@charset "UTF-8";

/* --------------------------------------------
SECTIONS
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#says{
		grid-row-end : 9;
	}
}
@media print , screen and ( width > 750px ){
	#flow{
		grid-row-end : 10;
	}
}

/* --------------------------------------------
QUALITY
--------------------------------------------- */
#quality h2{
	font-weight : 500;
	color : var( --blue );
	letter-spacing : .05em;
}
#quality dl > div{
	display : grid;
	background-color : #e8eef0;
}
#quality dl dt , #quality dl dd{
	align-content : center;
}
#quality dl dt{
	color : var( --blue );
	background-color : #cfdde2;
}
#quality dl dd{
	display : grid;
	grid-row : 1;
	grid-column : 1;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : center;
	font-family : "Bebas Neue" , serif;
	font-weight : 400;
	color : var( --blue02 );
}
#quality dl dt{
	grid-row : 1;
	grid-column : 2;
	font-weight : 500;
	letter-spacing : .05em;
}
#quality dl dt span{
	display : block;
	font-weight : 300;
	letter-spacing : 0;
}
@media screen and ( width <= 750px ){
	#quality{
		padding-top : calc( ( 71 - 7 ) var( --remBase ) );
		padding-bottom : calc( 38 var( --remBase ) );
	}
	#quality h2{
		font-size : 3.6rem;
		line-height : calc( 50 / 36 );
	}
	#quality dl{
		margin-top : calc( ( 40 - 7 ) var( --remBase ) );
	}
	#quality dl > div + div{
		margin-top : calc( 20 var( --remBase ) );
	}
	#quality dl > div{
		grid-template-columns : calc( 140 var( --percentBase ) ) 1fr;
		height : calc( 120 var( --remBase ) );
	}
	#quality dd{
		font-size : 7.5rem;
	}
	#quality dd span{
		font-size : 3rem;
	}
	#quality dt{
		padding-inline : calc( 27 * 100% / 530 );
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
	#quality dt span{
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
}
@media print , screen and ( width > 750px ){
	#quality{
		padding-bottom : calc( 60 var( --remBase ) );
	}
	#quality h2{
		font-size : 2.4rem;
		line-height : calc( 34 / 24 );
	}
	#quality dl{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 290 * 100% / 930 ) );
		grid-auto-rows : calc( 80 var( --remBase ) );
		row-gap : calc( 30 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( ( 37 - 5 ) var( --remBase ) );
	}
	#quality dl > div{
		grid-template-columns : calc( 90 * 100% / 290 );
	}
	#quality dd{
		font-size : 5rem;
	}
	#quality dd span{
		font-size : 2rem;
	}
	#quality dt{
		padding-inline : calc( 18 * 100% / 200 );
		font-size : 1.4rem;
		line-height : calc( 24 / 14 );
	}
	#quality dt span{
		font-size : 1.2rem;
		line-height : 2;
	}
}

/* --------------------------------------------
PLANNING
--------------------------------------------- */
#planning h2{
	font-weight : 600;
	color : var( --blue02 );
}
#planning .box{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : space-between;
}
#planning p{
	font-weight : 300;
}
@media screen and ( width <= 750px ){
	#planning{
		padding-top : calc( ( 76 - 7 ) var( --remBase ) );
		padding-bottom : calc( ( 81 - 6 ) var( --remBase ) );
	}
	#planning h2{
		font-size : 3.6rem;
		line-height : calc( 50 / 36 );
	}
	#planning .box{
		margin-top : calc( ( 59 - 7 ) var( --remBase ) );
	}
	#planning .box img{
		height : calc( 542 var( --remBase ) );
	}
	#planning .box picture + picture{
		margin-top : calc( 103 var( --remBase ) );
	}
	#planning p{
		margin-top : calc( ( 40 - 6 ) var( --remBase ) );
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
}
@media print , screen and ( width > 750px ){
	#planning{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 390 * 100% / 930 ) 1fr;
		row-gap : calc( ( 45 - 5 ) var( --remBase ) );
		column-gap : calc( 39 * 100% / 930 );
		padding-top : calc( 65 var( --remBase ) );
		padding-bottom : calc( ( 59 - 5 ) var( --remBase ) );
		border-image-source : linear-gradient( #efefef , #efefef );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	#planning h2{
		grid-row : 1;
		grid-column : 2;
		margin-top : calc( 3 var( --remBase ) );
		font-size : 3rem;
	}
	#planning .box{
		grid-row : 1/-1;
		grid-column : 1;
		align-self : start;
	}
	#planning .box img{
		height : calc( 314 var( --remBase ) );
	}
	#planning .box picture + picture{
		margin-top : calc( 60 var( --remBase ) );
	}
	#planning p{
		grid-row : 2;
		grid-column : 2;
		font-size : 1.4rem;
		line-height : calc( 24 / 14 );
	}
}

/* --------------------------------------------
SERVICES
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#services{
		padding-top : calc( ( 103 - 7 ) var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#services{
		padding-top : calc( ( 60 - 5 ) var( --remBase ) );
		padding-bottom : calc( 60 var( --remBase ) );
	}
}

/* --------------------------------------------
SAYS
--------------------------------------------- */
#says{
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#says h2{
	font-weight : 600;
	color : white;
}
#says .splide__slide{
	position : relative;
	background-color : white;
}
#says .splide__slide::before{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 267/246;
	font-size : 0;
	content : "";
	background-image : url( "../../images/multilingual/ui/icon/dq01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#says .splide__slide p{
	font-weight : 600;
}
#says .splide__slide p:nth-of-type( 1 ){
	color : #777;
}
#says .splide__slide p:nth-of-type( 2 ){
	color : var( --blue02 );
}
#says .splide__arrows{
	display : grid;
}
#says .splide__arrow{
	display : grid;
	place-items : center;
	width : auto;
	aspect-ratio : 1;
	background-color : white;
	border-radius : 50%;
}
#says .splide__arrow img{
	filter : var( --filterBlue02 );
}
@media screen and ( width <= 750px ){
	#says{
		padding-top : calc( ( 76 - 2 ) var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		background-image : image-set( url( "../../images/multilingual/top/says/bg_sp.avif" ) type( "image/avif" ) , url( "../../images/multilingual/top/says/bg_sp.webp" ) type( "image/webp" ) );
	}
	#says h2{
		font-size : 3.6rem;
		line-height : calc( 40 / 36 );
	}
	#says .splide__track{
		width : calc( 710 var( --viewportBase ) );
		padding-top : calc( ( 60 - 2 ) var( --remBase ) );
		margin-left : auto;
	}
	#says .splide__slide{
		padding-inline : calc( 41 * 100% / 710 );
		padding-top : calc( ( 84 - 4.69 ) var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#says .splide__slide::before{
		top : calc( -26 var( --remBase ) );
		left : calc( 42 * 100% / 594 );
		height : calc( 68 var( --remBase ) );
	}
	#says .splide__slide p:nth-of-type( 1 ){
		min-height : 5lh;
		font-size : 2.8rem;
		line-height : calc( 37.38 / 28 );
	}
	#says .splide__slide p:nth-of-type( 2 ){
		font-size : 2.2rem;
		line-height : calc( 27.19 / 22 );
	}
	#says .splide__arrows{
		grid-template-columns : calc( 40 var( --percentBase ) ) 1fr auto calc( 42 var( --percentBase ) ) auto 1fr calc( 40 var( --percentBase ) );
		row-gap : calc( 42 var( --remBase ) );
		margin-top : calc( 41 var( --remBase ) );
	}
	#says .splide__arrow{
		grid-row : 1;
		height : calc( 80 var( --remBase ) );
	}
	#says .splide__arrow img{
		height : calc( 36 var( --remBase ) );
	}
	#says .splide__arrow--prev{
		grid-column : 3;
		padding-right : calc( 6 * 100% / 80 );
	}
	#says .splide__arrow--next{
		grid-column : 5;
		padding-left : calc( 6 * 100% / 80 );
	}
	#says .more01{
		grid-row : 2;
		grid-column : 2/7;
		width : 100%;
	}
}
@media print , screen and ( width > 750px ){
	#says{
		grid-column : 1/-1;
		padding-top : calc( ( 80 - 5 ) var( --remBase ) );
		padding-bottom : calc( 60 var( --remBase ) );
		background-image : image-set( url( "../../images/multilingual/top/says/bg_pc.avif" ) type( "image/avif" ) , url( "../../images/multilingual/top/says/bg_pc.webp" ) type( "image/webp" ) );
	}
	#says h2{
		font-size : 3rem;
		line-height : calc( 40 / 30 );
	}
	#says .splide__track{
		padding-top : calc( 59 var( --remBase ) );
	}
	#says .splide__slide{
		padding-top : calc( ( 50 - 4 ) var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#says .splide__slide::before{
		top : calc( -15 var( --remBase ) );
		left : calc( 25 * 100% / 350 );
		height : calc( 40 var( --remBase ) );
	}
	#says .splide__slide p:nth-of-type( 1 ){
		min-height : 5lh;
		font-size : 1.6rem;
		line-height : calc( 22 / 16 );
	}
	#says .splide__slide p:nth-of-type( 2 ){
		font-size : 1.2rem;
		line-height : calc( 16 / 12 );
	}
	#says .splide__arrows{
		grid-template-columns : calc( 230 var( --percentBase ) ) 1fr auto calc( 21 var( --percentBase ) ) auto calc( 270 var( --percentBase ) );
		align-items : center;
		margin-top : calc( 51 var( --remBase ) );
	}
	#says .more01{
		grid-row : 1;
		grid-column : 1;
	}
	#says .splide__arrow{
		height : calc( 40 var( --remBase ) );
	}
	#says .splide__arrow img{
		height : calc( 18 var( --remBase ) );
	}
	#says .splide__arrow--prev{
		grid-column : 3;
		padding-right : calc( 3 * 100% / 40 );
	}
	#says .splide__arrow--next{
		grid-column : 5;
		padding-left : calc( 3 * 100% / 40 );
	}
}
@media screen and ( 750px < width < 1240px ){
	#says .splide__slide{
		padding-inline : calc( 24 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1240px ){
	#says .splide__slide{
		padding-inline : 24px;
	}
}
@media ( hover : hover ){
	#says .splide__arrow:hover{
		background-color : var( --blue02 );
	}
	#says .splide__arrow:hover img{
		filter : var( --filterWhite );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#says .splide__arrow{
		transition : background var( --transitionBase );
	}
	#says .splide__arrow img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow h2{
	font-weight : 600;
	color : var( --blue02 );
	letter-spacing : .06em;
}
#flow li{
	position : relative;
	display : grid;
	counter-increment : no;
}
#flow li:not( :last-child )::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --blue );
}
#flow li::before{
	grid-row : 1;
	grid-column : 1;
	font-weight : 600;
	color : var( --blue );
	letter-spacing : .04em;
	content : "STEP"counter( no , decimal-leading-zero );
}
#flow h3{
	grid-row : 1;
	grid-column : 2;
	font-weight : 600;
	color : var( --blue );
	letter-spacing : .06em;
}
#flow p{
	grid-row : 2;
	grid-column : 2;
	font-weight : 400;
	letter-spacing : .06em;
}
#flow p a{
	color : var( --blue02 );
}
#flow li:not( :last-child ) p{
	border-bottom : solid 1px #c3c3c3;
}
@media screen and ( width <= 750px ){
	#flow{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( ( 76 - 6 ) var( --remBase ) );
	}
	#flow h2{
		font-size : 3.6rem;
	}
	#flow ol{
		margin-top : calc( 46 var( --remBase ) );
	}
	#flow li{
		grid-template-columns : calc( 122 var( --percentBase ) ) 1fr;
		row-gap : calc( ( 18 - 4 ) var( --remBase ) );
	}
	#flow li:not( :last-child )::after{
		top : calc( 46 var( --remBase ) );
		left : calc( 45 var( --percentBase ) );
		width : calc( 2 var( --percentBase ) );
		height : calc( 100% - ( ( 57 - 6 ) var( --remBase ) ) );
	}
	#flow li + li{
		margin-top : calc( 30 var( --remBase ) );
	}
	#flow li::before{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 2.4rem;
	}
	#flow h3{
		font-size : 3.2rem;
	}
	#flow p{
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
	#flow li:not( :last-child ) p{
		padding-bottom : calc( ( 41 - 6 ) var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#flow{
		padding-top : calc( 60 var( --remBase ) );
		padding-bottom : calc( ( 58 - 4 ) var( --remBase ) );
	}
	#flow h2{
		font-size : 3rem;
	}
	#flow ol{
		margin-top : calc( 40 var( --remBase ) );
	}
	#flow li{
		grid-template-columns : calc( 103 * 100% / 930 ) 1fr;
		row-gap : calc( ( 18 - 4 ) var( --remBase ) );
	}
	#flow li:not( :last-child )::after{
		top : calc( 46 var( --remBase ) );
		left : calc( 39 * 100% / 930 );
		width : 1px;
		height : calc( 100% - ( ( 46 - 10 ) var( --remBase ) ) );
	}
	#flow li + li{
		margin-top : calc( 30 var( --remBase ) );
	}
	#flow li::before{
		margin-top : calc( 2 var( --remBase ) );
		font-size : 2rem;
	}
	#flow h3{
		font-size : 2.4rem;
	}
	#flow p{
		font-size : 1.4rem;
		line-height : calc( 22 / 14 );
	}
	#flow li:not( :last-child ) p{
		padding-bottom : calc( ( 29 - 4 ) var( --remBase ) );
	}
}