@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/


/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 961px){
	
	div#mv_block nav.slide_nav li.menu.johnan a{
		color: #4fc4d7;
    }
	
	section div.section_inner {
		width: 64.8%;
		margin: 0 auto;
	}
	
	section div.section_inner div.block{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row-reverse;
		margin-top: 7.3vw;
	}
	
	section div.section_inner div.block figure.photo {
		width: 36%;
	}
	
	section div.section_inner div.block figure.photo div{
		overflow: hidden;
		line-height: 0;
		border-radius: 20px;
	}
	
	section div.section_inner div.block figure.photo figcaption{
		display: block;
		font-size: 2.2rem;
		font-size: clamp(calc((2.2rem * 0.64)), 1.46vw, 2.2rem);
		font-weight: 700;
		line-height: 2;
		letter-spacing: 0.2em;
		text-align: center;
		margin-top: 1em;
	}
	
	section div.section_inner div.block figure.photo figcaption small{
		font-size: 63.6%;
		letter-spacing: 0.05em;
	}
	
	section div.section_inner div.block div.text_block {
		width: 36%;
	}
	
	section div.section_inner div.block div.text_block {
		width: 59.4%;
	}
	
	section div.section_inner div.block div.text_block h4 {
		font-size: 2.3rem;
		font-size: clamp(calc((2.3rem * 0.64)), 1.53vw, 2.3rem);
		line-height: 1.57;
		letter-spacing: 0.13em;
		padding: 0.1em 0.5em;
		color: #FFF;
		background: #4fc4d7;
		display: inline-block;
		margin-bottom: 0.75em;
	}
	
	section div.section_inner div.block div.text_block h3{
		font-size: 2.6rem;
		font-size: clamp(calc((2.6rem * 0.64)), 1.73vw, 2.6rem);
		line-height: 1.57;
		letter-spacing: 0.13em;
		margin-bottom: 1.5em;
	}
	
	section div.section_inner div.block div.text_block p{
		font-size: 1.6rem;
		font-size: clamp(calc((1.6rem * 0.64)), 1.06vw, 1.6rem);
		font-weight: 700;
		line-height: 2.5;
		letter-spacing: -0.025em;
		text-align: justify;
	}
	
	section div.section_inner div.block div.text_block p + p{
		margin-top: 3em;
	}
	
	section div.section_inner div.block div.text_block div.btn_block {
		margin-top: 4.6vw;
	}
	
	section div.section_inner div.block div.text_block div.btn_block a{
		width: 98%;
		display: block;
		font-size: 1.7rem;
		font-size: clamp(calc((1.7rem * 0.64)), 1.13vw, 1.7rem);
		font-weight: 700;
		line-height: 1;
		color: #000;
		padding: 1.25em 0;
		text-align: center;
		background: url("../images/common/bg_blue.jpg") repeat;
		background-size: 50%;
		position: relative;
	}
	
	section div.section_inner div.block div.text_block div.btn_block a::after{
		content: "";
		width: 9.3vw;
		width: 9.3cqw;
		max-width: 139px;
		height: 3.26vw;
		height: 3.26cqw;
		max-height: 49px;
		display: inline-block;
		background: url("../images/about_johnan/arrow_black.svg") no-repeat;
		background-size: contain;
		position: absolute;
		top: -20%;
		right: -6%;
		z-index: 3;
	}
	
	a.out_arrow:hover::after {
		right: -8%!important;
	}
}

@media screen and (min-width:961px) and (max-width: 1500px){
	
	
	
}
	

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 960px){
	
	section div.section_inner {
		width: 82%;
		margin: 0 auto;
	}
	
	section div.section_inner div.block{
		display: block;
		margin-top: 7.7vw;
		padding-top: 10.6vw;
		position: relative;
	}
	
	section div.section_inner div.block figure.photo {
		width: 100vw;
		width: 100cqw;
		margin-left: -9vw;
		margin-left: -9cqw;
	}
	
	section div.section_inner div.block figure.photo div{
		overflow: hidden;
		line-height: 0;
	}
	
	section div.section_inner div.block figure.photo figcaption{
		width: 65.8%;
		display: block;
		font-size: calc(3.8rem * 0.48);
		font-size: clamp(calc((3.8rem * 0.48)), 5.06vw, calc(3.8rem * 1.28));
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.2em;
		margin: 1em auto 0;
	}
	
	section div.section_inner div.block figure.photo figcaption small{
		font-size: 68.4%;
		letter-spacing: 0.05em;
	}
	
	section div.section_inner div.block div.text_block {
		width: 100%;
		margin-top: 8vw;
	}
	
	section div.section_inner div.block div.text_block h4 {
		width: 9em;
		font-size: calc(3.1rem * 0.48);
		font-size: clamp(calc((3.8rem * 0.48)), 4.13vw, calc(3.1rem * 1.28));
		line-height: 1.57;
		letter-spacing: 0.13em;
		text-align: center;
		padding: 0.1em 0;
		color: #FFF;
		background: #4fc4d7;
		display: inline-block;
		position: absolute;
		top: 0;
		left: calc(50% - 4.5em);
	}
	
	section div.section_inner div.block div.text_block h3{
		font-size: calc(3.8rem * 0.48);
		font-size: clamp(calc((3.8rem * 0.48)), 5.06vw, calc(3.8rem * 1.28));
		line-height: 1.57;
		letter-spacing: 0.13em;
		margin-bottom: 1.25em;
	}
	
	section div.section_inner div.block div.text_block p{
		font-size: calc(2.4rem * 0.48);
		font-size: clamp(calc((2.4rem * 0.48)), 3.2vw, calc(2.4rem * 1.28));
		font-weight: 700;
		line-height: 1.78;
		letter-spacing: 0.05em;
		text-align: justify;
	}
	
	section div.section_inner div.block div.text_block p + p{
		margin-top: 2em;
	}
	
	section div.section_inner div.block div.text_block div.btn_block {
		width: 94%;
		margin: 11.8vw auto 0;
	}
	
	section div.section_inner div.block div.text_block div.btn_block a{
		width: 100%;
		display: block;
		font-size: calc(2.4rem * 0.48);
		font-size: clamp(calc((2.4rem * 0.48)), 3.2vw, calc(2.4rem * 1.28));
		font-weight: 700;
		line-height: 1;
		color: #000;
		padding: 0.75em 0 0.85em 1.25em;
		background: url("../images/common/bg_blue.jpg") repeat;
		background-size: 50%;
		position: relative;
	}
	
	section div.section_inner div.block div.text_block div.btn_block a::after{
		content: "";
		width: 18.6vw;
		width: 18.6cqw;
		height: 6.66vw;
		height: 6.66cqw;
		display: inline-block;
		background: url("../images/about_johnan/arrow_black.svg") no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		right: -4.5%;
		z-index: 3;
	}
}