@charset "UTF-8";

/* --------------------------------------------
FEATURE
--------------------------------------------- */
#feature{
	color : var( --title );
}
#feature > p{
	text-align : center;
}
#feature > p:nth-of-type( 1 ) span{
	display : block;
	font-weight : 700;
	line-height : 1.7;
}
#feature > p:nth-of-type( 2 ){
	font-weight : 900;
	line-height : 1.7;
}
#feature .box p{
	font-weight : 900;
	line-height : 1.5;
	color : var( --title );
}
#feature .box p span{
	line-height : 1.5;
}
#feature .cta{
	margin-top : calc( 40 var( --remBase ) );
}
#feature .cta h2{
	border-block-color : black;
}
@media screen and ( width <= 750px ){
	#feature{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 60 var( --remBase ) );
	}
	#feature > p:nth-of-type( 1 ){
		margin-top : calc( 40 var( --remBase ) );
	}
	#feature > p:nth-of-type( 1 ) span{
		margin-bottom : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
	}
	#feature > p:nth-of-type( 1 ) img{
		height : calc( 148.11 var( --remBase ) );
	}
	#feature > p:nth-of-type( 2 ){
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
	}
	#feature > ul{
		margin-top : calc( 40 var( --remBase ) );
	}
	#feature > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#feature .box{
		margin-top : calc( 16 var( --remBase ) );
	}
	#feature .box p{
		font-size : 3.6rem;
		line-height : 1.5;
	}
	#feature .box p span{
		font-size : 2rem;
	}
	#feature > ul > li:nth-child( 2 ) picture{
		margin-top : calc( 16 var( --remBase ) );
	}
	#feature > ul > li:nth-child( 3 ) picture{
		margin-top : calc( 11 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#feature{
		position : relative;
		padding-block : calc( 80 var( --remBase ) );
		overflow-x : clip;
	}
	#feature::before , #feature::after{
		position : absolute;
		inset : 0;
		z-index : -1;
		display : block;
		font-size : 0;
		content : "";
	}
	#feature::before{
		background : linear-gradient( 180deg , color-mix( in sRGB , black 15% , transparent ) 1px , transparent 1px );
		background-size : 100% calc( 50 var( --remBase ) );
	}
	#feature::after{
		background : linear-gradient( 90deg , color-mix( in sRGB , black 15% , transparent ) 1px , transparent 1px );
		background-size : calc( 50 var( --remBase ) ) 100%;
	}
	#feature > p:nth-of-type( 1 ){
		margin-top : calc( 40 var( --remBase ) );
	}
	#feature > p:nth-of-type( 1 ) span{
		margin-bottom : calc( 40 var( --remBase ) );
		font-size : 3.4rem;
	}
	#feature > p:nth-of-type( 1 ) img{
		height : calc( 134 var( --remBase ) );
	}
	#feature > p:nth-of-type( 2 ){
		margin-top : calc( 40 var( --remBase ) );
		font-size : 3.4rem;
	}
	#feature > ul{
		margin-top : calc( 80 var( --remBase ) );
	}
	#feature > ul > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#feature .box{
		display : grid;
		align-items : start;
		margin-top : calc( 16 var( --remBase ) );
	}
	#feature .box p{
		font-size : 6rem;
	}
	#feature .box p span{
		font-size : 3.4rem;
	}
	#feature > ul > li:nth-child( 1 ) .box{
		grid-template-columns : 1fr calc( 704 var( --percentBase ) );
	}
	#feature > ul > li:nth-child( 2 ) .box{
		grid-template-columns : calc( 680 var( --percentBase ) ) calc( 680 var( --percentBase ) );
		justify-content : space-between;
	}
	#feature > ul > li:nth-child( 3 ) .box{
		grid-template-columns : calc( 688 var( --percentBase ) ) calc( 712 var( --percentBase ) );
		justify-content : space-between;
	}
}
#slider01 .splide__slide{
	font-size : 2rem;
	font-weight : 700;
	line-height : 1.2;
	text-align : center;
}
#slider01 .splide__slide::before{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
}
#slider01 .slide01::before{
	background-image : url( "../images/ui/icon/icon0101.svg" );
}
#slider01 .slide02::before{
	background-image : url( "../images/ui/icon/icon0102.svg" );
}
#slider01 .slide04::before{
	background-image : url( "../images/ui/icon/icon0104.svg" );
}
@media screen and ( width <= 750px ){
	#slider01{
		margin-top : calc( 32 var( --remBase ) );
	}
	#slider01 .splide__slide::before{
		height : calc( 143.71 var( --remBase ) );
		margin-bottom : calc( 5.05 var( --remBase ) );
		background-position : center bottom;
	}
	#slider01 .slide01{
		width : calc( 152.16 var( --remBase ) );
	}
	#slider01 .slide01::before{
		background-size : auto calc( 130.66 var( --remBase ) );
	}
	#slider01 .slide02{
		width : calc( 119.93 var( --remBase ) );
	}
	#slider01 .slide02::before{
		background-size : auto calc( 143.71 var( --remBase ) );
	}
	#slider01 .slide03{
		width : calc( 191.53 var( --remBase ) );
	}
	#slider01 .slide03::before{
		background-image : url( "../images/ui/icon/icon0103_sp.svg" );
		background-size : auto calc( 130.98 var( --remBase ) );
	}
	#slider01 .slide04{
		width : calc( 133.98 var( --remBase ) );
	}
	#slider01 .slide04::before{
		background-size : auto calc( 137.78 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#slider01{
		margin-top : calc( 33.3 var( --remBase ) );
	}
	#slider01 .splide__list{
		display : grid;
		grid-template-columns : calc( 151.53 * 100% / 704 ) calc( 114.21 * 100% / 704 ) calc( 144.66 * 100% / 704 ) calc( 134.1 * 100% / 704 );
		grid-auto-flow : column;
		align-items : start;
		justify-content : space-around;
	}
	#slider01 .splide__slide{
		font-size : 2rem;
		line-height : 1.2;
	}
	#slider01 .splide__slide::before{
		height : calc( 145.44 var( --remBase ) );
		margin-bottom : calc( 15.26 var( --remBase ) );
		background-position : center bottom;
	}
	#slider01 .slide01::before{
		background-size : auto calc( 130.24 var( --remBase ) );
	}
	#slider01 .slide02::before{
		background-size : auto calc( 137.1 var( --remBase ) );
	}
	#slider01 .slide03::before{
		background-image : url( "../images/ui/icon/icon0103_pc.svg" );
		background-size : auto calc( 145.44 var( --remBase ) );
	}
	#slider01 .slide04::before{
		background-size : auto calc( 136.8 var( --remBase ) );
	}
}

/* --------------------------------------------
CASE
--------------------------------------------- */
:where( #case , #interview , #column ) .box p{
	margin-top : calc( 24 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.7;
}
:where( #case , #interview , #column ) .splide{
	margin-top : calc( 24 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	:where( #case , #interview , #column ){
		padding-block : calc( 64 var( --remBase ) );
	}
	:where( #case , #interview , #column ) .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #case , #interview , #column ){
		display : grid;
		grid-template-columns : min( 600px , calc( 600 * 100% / 1660 ) ) 1fr;
		align-items : start;
		padding-block : calc( 120 var( --remBase ) );
	}
	:where( #case , #interview , #column ) .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow .box{
	margin-bottom : calc( 24 var( --remBase ) );
}
#flow .box p{
	font-size : 1.6rem;
	line-height : 1.7;
}
#flow .box ul{
	display : grid;
	grid-template-columns : repeat( 2 , 1fr );
}
#flow .box button{
	font-size : 1.6rem;
	line-height : 1.3;
}
#flow ol picture{
	width : 100%;
	height : auto;
	aspect-ratio : 1;
}
#flow ol picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
@media screen and ( width <= 750px ){
	#flow{
		padding-block : calc( 55 var( --remBase ) );
	}
	#flow .box p{
		margin-top : calc( 8 var( --remBase ) );
	}
	#flow .box ul{
		grid-auto-rows : calc( 60 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#flow{
		padding-block : calc( 120 var( --remBase ) );
	}
	#flow .box{
		display : grid;
		grid-template-columns : auto 1fr calc( 368 var( --percentBase ) );
		column-gap : calc( 55 var( --percentBase ) );
		align-items : center;
	}
	#flow .box ul{
		grid-auto-rows : calc( 50 var( --remBase ) );
	}
}
:is( #flow01 , #flow02 ) h3{
	font-size : 3.4rem;
	font-weight : 900;
	line-height : 1.7;
}
:is( #flow01 , #flow02 ) .splide{
	margin-top : calc( 16 var( --remBase ) );
}
:is( #flow01 , #flow02 ) h4{
	margin-top : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1.6;
}
:is( #flow01 , #flow02 ) p{
	margin-top : calc( 10 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.7;
}
:is( #flow01 , #flow02 ) li:not( :first-child ){
	position : relative;
}
:is( #flow01 , #flow02 ) li:not( :first-child )::before{
	position : absolute;
	top : calc( 87 var( --remBase ) );
	left : calc( -48 * 100% / 200 );
	display : block;
	width : auto;
	height : calc( 23 var( --remBase ) );
	aspect-ratio : 40/23;
	font-size : 0;
	content : "";
	background-image : url( "../images/home/flow/arrow.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	:is( #flow01 , #flow02 ) .splide__list{
		display : grid;
		grid-auto-columns : calc( 240 * 100% / 368 );
		grid-auto-flow : column;
		justify-content : start;
	}
	:is( #flow01 , #flow02 ) .splide__slide{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
	}
}
@media print , screen and ( width > 750px ){
	:is( #flow01 , #flow02 ) ol{
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 40 var( --percentBase ) );
		justify-content : center;
	}
	:is( #flow01 , #flow02 ) ol > li{
		width : calc( 200 var( --percentBase ) );
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news ul{
	margin-top : calc( 24 var( --remBase ) );
}
#news li a{
	display : block;
	padding-block : calc( 24 var( --remBase ) );
	background-color : white;
}
#news section{
	display : grid;
	grid-template-columns : 1fr auto;
	row-gap : calc( 9 var( --remBase ) );
}
#news time{
	grid-row : 1;
	grid-column : 1;
	margin-top : calc( 2.6 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.3;
}
#news .category{
	display : grid;
	grid-row : 1;
	grid-column : 2;
	place-items : center;
	height : calc( 26 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.3;
	color : white;
}
#news h3{
	grid-row : 2;
	grid-column : 1/-1;
	font-size : 1.6rem;
	font-weight : 400;
	line-height : 1.5;
}
#news .link01{
	margin-top : calc( 24 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#news{
		padding-block : calc( 64 var( --remBase ) );
	}
	#news li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#news li a{
		padding-inline : calc( 24 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#news{
		padding-block : calc( 120 var( --remBase ) );
	}
	#news ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
	}
	#news li a{
		padding-inline : calc( 24 * 100% / 320 );
	}
}


@media screen and ( width <= 750px ){
	.sp-text {
		display: block;
		margin-top: -.5em;
	}
}

@media screen and ( width > 750px ){
	#column .wrap-right-sp {
		padding-right: 	calc( 40 var( --percentBase ) );

	}
}