@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1140px ){
	:root{
		font-size : 10px;
	}
}
body{
	position : relative;
}
body::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-image : linear-gradient( 180deg , var( --blue ) 0% , var( --blue02 ) 100% );
}
@media screen and ( width <= 750px ){
	body{
		font-size : 2rem;
	}
}
@media print , screen and ( width > 750px ){
	body{
		font-size : 1.6rem;
	}
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.container{
		margin-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	.container{
		margin-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	.container{
		width : calc( ( var( --wrapperSize ) * 1px ) );
		margin-inline : auto;
	}
}
@media screen and ( width <= 750px ){
	.container-sp{
		margin-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	.container-pc{
		margin-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	.container-pc{
		width : calc( ( var( --wrapperSize ) * 1px ) );
		margin-inline : auto;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width < 1140px ){
	.wrap{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	.wrap{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}
@media screen and ( width <= 750px ){
	.wrap-sp{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	.wrap-pc{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media print , screen and ( width > 750px ){
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width >= 1140px ){
	.is-tb{
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
@media screen and ( width <= 750px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]::before , [data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( width <= 750px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]::before , [data-both-sp]::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media print , screen and ( width > 750px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]::before , [data-both-pb]::after{
		white-space : pre;
		content : attr( data-both );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
@media screen and ( width <= 750px ){
	br.sp-space{
		content : "";
	}
	br.sp-space::after{
		content : " ";
	}
}
@media print , screen and ( width > 750px ){
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}
@media screen and ( width <= 750px ){
	br.sp-spaceEm{
		content : "";
	}
	br.sp-spaceEm::after{
		content : "　";
	}
}
@media print , screen and ( width > 750px ){
	br.pc-spaceEm{
		content : "";
	}
	br.pc-spaceEm::after{
		content : "　";
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 750px ){
	.lh-up-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 750px ){
	.lh-up-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	display : grid;
	place-items : center;
	border-bottom : solid 1px white;
}
#header .logo{
	display : block;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	#header{
		height : calc( 48 var( --remBase ) );
	}
	#header .logo img{
		height : calc( 15.05 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#header{
		height : 50px;
	}
	#header .logo img{
		height : calc( 18.81 var( --remBase ) );
	}
}

/* --------------------------------------------
HOME MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	overflow-x : clip;
	background-repeat : no-repeat;
	background-position-x : center;
}
#mv p{
	font-weight : 700;
	color : var( --blue );
	letter-spacing : .1em;
	background-image : url( "../images/home/mv/bg_text.svg" );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#mv p::before{
	content : attr( data-before ) "\A";
}
#mv p::after{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : image-set( url( "../images/home/mv/duck.avif" ) type( "image/avif" ) , url( "../images/home/mv/duck.webp" ) type( "image/webp" ) );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#mv h1{
	text-align : center;
}
#mv h1 span{
	display : block;
	font-size : 2.4rem;
	font-weight : 700;
	line-height : 1.6;
	text-align : center;
	text-indent : .16em;
	letter-spacing : .16em;
}
#mv h1 picture{
	margin-inline : auto;
}
#mv ul:nth-of-type( 1 ) li{
	display : grid;
	place-items : center;
	aspect-ratio : 1;
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	border-color : #d9d9d9;
	border-style : dashed;
	border-radius : 50%;
}
#mv h2{
	font-weight : 700;
}
#mv ul:nth-of-type( 2 ) li{
	display : grid;
	place-items : center;
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1.2;
	color : var( --blue );
	background-color : var( --yellow );
	border-radius : calc( 4 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#mv{
		padding-top : calc( ( 40 - 10.4 ) var( --remBase ) );
		background-image : url( "../images/home/mv/bg_sp.svg" );
		background-position-y : calc( 372.26 var( --remBase ) );
		background-size : auto calc( 181.49 var( --remBase ) );
	}
	#mv h1 picture{
		margin-top : calc( ( 32 - 10.4 ) var( --remBase ) );
	}
	#mv h1 picture img{
		height : calc( 115.83 var( --remBase ) );
	}
	#mv ul:nth-of-type( 1 ){
		display : grid;
		grid-auto-rows : calc( 77.18 var( --remBase ) );
		grid-auto-columns : calc( 77.18 var( --percentBase ) );
		grid-auto-flow : column;
		column-gap : calc( 12.41 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 24 var( --remBase ) );
	}
	#mv ul:nth-of-type( 1 ) li{
		font-size : 1.4929999999999999rem;
		line-height : calc( 22.39 / 14.93 );
		border-block-width : calc( 1.6 var( --remBase ) );
	}
	#mv h2{
		margin-top : calc( 32 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.2;
	}
	#mv ul:nth-of-type( 2 ){
		margin-top : calc( 17 var( --remBase ) );
	}
	#mv ul:nth-of-type( 2 ) li{
		width : fit-content;
		height : calc( 32 var( --remBase ) );
		padding-inline : calc( 8 var( --percentBase ) );
		font-size : 1.6rem;
		line-height : 1.2;
	}
	#mv ul:nth-of-type( 2 ) li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#mv p{
		position : absolute;
		top : calc( 344 var( --remBase ) );
		left : calc( 274 var( --viewportBase ) );
		width : calc( 106.57 var( --viewportBase ) );
		height : calc( 113.92 var( --remBase ) );
		padding-top : calc( 29.12 var( --remBase ) );
		padding-left : calc( 27.44 var( --viewportBase ) );
		font-size : 1.1199999999999999rem;
		line-height : calc( 16.8 / 11.2 );
	}
	#mv p::after{
		top : calc( 26.48 var( --remBase ) );
		left : calc( -140 * 100% / 106.57 );
		height : calc( 251 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#mv{
		padding-top : calc( 89 var( --remBase ) );
		background-image : url( "../images/home/mv/bg_pc.svg" );
		background-position-y : calc( 65.21 var( --remBase ) );
		background-size : auto calc( 283.57 var( --remBase ) );
	}
	#mv p{
		width : calc( 133.21 var( --percentBase ) );
		height : calc( 142.39 var( --remBase ) );
		padding-top : calc( ( 36.41 - 3.5 ) var( --remBase ) );
		padding-left : calc( 34.3 var( --percentBase ) );
		margin-left : calc( 593 var( --percentBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#mv p::after{
		top : calc( 128 var( --remBase ) );
		left : 50%;
		height : calc( 280 var( --remBase ) );
		translate : -50%;
	}
	#mv h1{
		margin-top : calc( 192.61 var( --remBase ) );
	}
	#mv h1 picture{
		margin-top : calc( 32 var( --remBase ) );
	}
	#mv h1 picture img{
		height : calc( 57.98 var( --remBase ) );
	}
	#mv ul:nth-of-type( 1 ) li{
		position : absolute;
		height : calc( 96.48 var( --remBase ) );
		font-size : 1.866rem;
		line-height : calc( 27.99 / 18.66 );
		border-width : calc( 2 var( --remBase ) );
	}
	#mv ul:nth-of-type( 1 ) li:nth-child( 1 ){
		top : calc( 298 var( --remBase ) );
	}
	#mv ul:nth-of-type( 1 ) li:nth-child( 2 ){
		top : calc( 372.7 var( --remBase ) );
	}
	#mv h2{
		margin-top : calc( 48 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.2;
		text-align : center;
	}
	#mv ul:nth-of-type( 2 ){
		display : grid;
		grid-auto-rows : calc( 32 var( --remBase ) );
		grid-auto-columns : calc( 144 var( --percentBase ) );
		grid-auto-flow : column;
		column-gap : calc( 8 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 17 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	#mv ul:nth-of-type( 1 ) li:nth-child( 1 ){
		left : calc( 223.3 var( --viewportBase ) );
	}
	#mv ul:nth-of-type( 1 ) li:nth-child( 2 ){
		left : calc( 145 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	#mv ul:nth-of-type( 1 ) li:nth-child( 1 ){
		left : calc( 50% - 346.7px );
	}
	#mv ul:nth-of-type( 1 ) li:nth-child( 2 ){
		left : calc( 50% - 425.5px );
	}
}

/* --------------------------------------------
FRAME
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.frame01{
		padding-top : calc( 64 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	.frame01 > .title02{
		margin-top : calc( 68 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.frame01{
		padding-top : calc( 88 var( --remBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
		margin-block : calc( 90 var( --remBase ) );
		border-radius : calc( 8 var( --remBase ) );
		outline : solid 1px var( --base );
	}
	.frame01 > .title02{
		margin-top : calc( 88 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	.frame01{
		padding-inline : calc( 64 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	.frame01{
		padding-inline : 64px;
	}
}

/* --------------------------------------------
CONTRACT STEP
--------------------------------------------- */
#contractStep{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
#contractStep li{
	position : relative;
	counter-increment : no;
}
#contractStep li::before{
	display : block;
	display : grid;
	place-items : center;
	width : auto;
	height : calc( 40 var( --remBase ) );
	aspect-ratio : 1;
	margin-inline : auto;
	margin-bottom : calc( 8 var( --remBase ) );
	font-family : Inter , serif;
	font-size : 2.4rem;
	font-weight : 500;
	line-height : 1;
	color : var( --blue02 );
	content : counter( no );
	border-radius : 50%;
}
#contractStep li:not( [aria-current] )::before{
	background-color : var( --base );
}
#contractStep li[aria-current]::before{
	background-color : var( --yellow );
}
#contractStep li > span{
	position : relative;
	left : 50%;
	display : block;
	width : fit-content;
	font-weight : 500;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	white-space : nowrap;
	translate : -50% 0;
}
#contractStep li[aria-current] > span::after{
	position : absolute;
	top : calc( -73 var( --remBase ) );
	left : 50%;
	display : block;
	width : auto;
	height : calc( 34 var( --remBase ) );
	aspect-ratio : 32/34;
	font-size : 0;
	content : "";
	background-image : image-set( url( "../images/ui/icon/duck01.avif" ) type( "image/avif" ) , url( "../images/ui/icon/duck01.webp" ) type( "image/webp" ) );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
	translate : -50% 0;
}
#contractStep li:not( :last-child )::after{
	position : absolute;
	top : calc( 20 var( --remBase ) - .5px );
	display : block;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : var( --base );
}
@media screen and ( width <= 750px ){
	#contractStep{
		grid-template-columns : repeat( 4 , calc( 40 var( --percentBase ) ) );
		column-gap : calc( 48 var( --percentBase ) );
	}
	#contractStep li > span{
		font-size : 1rem;
		line-height : 1.2;
	}
	#contractStep li:not( :last-child )::after{
		left : calc( 48 * 100% / 40 );
		width : calc( 32 * 100% / 40 );
	}
}
@media print , screen and ( width > 750px ){
	#contractStep{
		grid-template-columns : repeat( 4 , calc( 40 * 100% / 972 ) );
		column-gap : calc( 128 * 100% / 972 );
	}
	#contractStep li > span{
		font-size : 1.4rem;
		line-height : calc( 17 / 14 );
	}
	#contractStep li:not( :last-child )::after{
		left : calc( 64 * 100% / 40 );
		width : calc( 80 * 100% / 40 );
	}
}