@charset "UTF-8";

/* --------------------------------------------
PREBLEM
--------------------------------------------- */
#problem h2{
	text-align : center;
}
#problem h2::after{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --primary );
}
#problem h2 > span:nth-of-type( 1 ){
	display : inline-block;
}
#problem h2 > span:nth-of-type( 1 ) > span{
	position : relative;
	display : inline-block;
}
#problem h2 > span:nth-of-type( 1 ) > span::after{
	position : absolute;
	left : 50%;
	display : block;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-color : #f19812;
	border-radius : 50%;
	translate : -50% 0;
}
#problem h2 > span:nth-of-type( 2 ){
	position : relative;
	display : inline-block;
}
#problem h2 > span:nth-of-type( 2 )::before , #problem h2 > span:nth-of-type( 2 )::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#problem h2 > span:nth-of-type( 2 )::before{
	left : 0;
	background-image : url( "../images/home/problem/decoration01.svg" );
}
#problem h2 > span:nth-of-type( 2 )::after{
	right : 0;
	background-image : url( "../images/home/problem/decoration02.svg" );
}
#problem ul{
	position : relative;
	background-color : #e8f7f7;
}
#problem ul::after{
	position : absolute;
	display : block;
	content : "";
	background : url( "../images/home/problem/bg.svg" ) center / contain no-repeat;
}
#problem li{
	position : absolute;
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#problem li .bold{
	font-weight : 700;
}
#problem li .line{
	display : inline;
	background : linear-gradient( transparent 60% , #f8f598 40% );
}
@media screen and ( max-width : 750px ){
	#problem{
		padding-top : calc( ( 60 - 10 ) var( --remBase ) );
		overflow-x : clip;
	}
	#problem h2{
		font-size : 4rem;
		line-height : 1.5;
	}
	#problem h2 > span:nth-of-type( 1 ){
		line-height : 1;
	}
	#problem h2 > span:nth-of-type( 1 ) > span{
		font-size : 4.6rem;
		line-height : 1;
	}
	#problem h2 > span:nth-of-type( 2 ){
		padding-left : calc( 13 var( --remBase ) );
		padding-right : calc( 10 var( --remBase ) );
		margin-right : calc( 6 var( --remBase ) );
		font-size : 4.6rem;
		line-height : 1;
	}
	#problem h2 > span:nth-of-type( 2 )::before{
		top : calc( -8 var( --remBase ) );
		width : calc( 29 var( --remBase ) );
		height : calc( 31 var( --remBase ) );
	}
	#problem h2 > span:nth-of-type( 2 )::after{
		bottom : calc( -10 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 30 var( --remBase ) );
	}
	#problem h2::after{
		width : calc( 200 var( --viewportBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( ( 25 - 10 ) var( --remBase ) );
	}
	#problem ul{
		height : calc( 811 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#problem ul::after{
		bottom : 0;
		left : calc( 10 var( --viewportBase ) );
		width : calc( 594 var( --viewportBase ) );
		height : calc( 274 var( --remBase ) );
	}
	#problem li{
		font-size : 2.6rem;
		line-height : calc( 36 / 26 );
	}
	#problem li:nth-child( odd ){
		left : calc( -2 var( --viewportBase ) );
		width : calc( 367 var( --viewportBase ) );
		height : calc( 226 var( --remBase ) );
		padding-left : calc( 34 var( --viewportBase ) );
		padding-right : calc( 22 var( --viewportBase ) );
		background-image : url( "../images/home/problem/li_odd_sp.svg" );
	}
	#problem li:nth-child( even ){
		left : calc( 359 var( --viewportBase ) );
		width : calc( 362 var( --viewportBase ) );
		height : calc( 247 var( --remBase ) );
		background-image : url( "../images/home/problem/li_even_sp.svg" );
	}
	#problem li:nth-child( 1 ){
		top : calc( 44 var( --remBase ) );
		padding-top : calc( ( 45 - 5 ) var( --remBase ) );
	}
	#problem li:nth-child( 2 ){
		top : calc( 74 var( --remBase ) );
		padding-top : calc( ( 94 - 5 ) var( --remBase ) );
		padding-left : calc( 32 var( --viewportBase ) );
		padding-right : calc( 2 var( --viewportBase ) );
	}
	#problem li:nth-child( 2 ) div{
		white-space : nowrap;
	}
	#problem li:nth-child( 3 ){
		top : calc( 285 var( --remBase ) );
		padding-top : calc( ( 32 - 5 ) var( --remBase ) );
	}
	#problem li:nth-child( 4 ){
		top : calc( 348 var( --remBase ) );
		padding-top : calc( ( 84 - 5 ) var( --remBase ) );
		padding-left : calc( 33 var( --viewportBase ) );
		padding-right : calc( 19 var( --viewportBase ) );
	}
	#problem .line-sp{
		display : inline;
		background : linear-gradient( transparent 60% , #f8f598 40% );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#problem{
		padding-top : calc( 76 var( --remBase ) );
		padding-bottom : calc( 109 var( --remBase ) );
	}
	#problem h2{
		font-size : calc( 40 var( --fontCoef ) );
	}
	#problem h2 > span:nth-of-type( 1 ) > span{
		font-size : calc( 46 var( --fontCoef ) );
	}
	#problem h2 > span:nth-of-type( 1 ) > span::after{
		bottom : calc( -12 var( --fontCoef ) );
		height : calc( 6 var( --fontCoef ) );
	}
	#problem h2 > span:nth-of-type( 2 ){
		padding-left : calc( 11 var( --fontCoef ) );
		padding-right : calc( 9 var( --fontCoef ) );
		margin-inline : calc( 6 var( --fontCoef ) );
		font-size : calc( 46 var( --fontCoef ) );
	}
	#problem h2 > span:nth-of-type( 2 )::before{
		top : calc( -10 var( --fontCoef ) );
		width : calc( 29 var( --fontCoef ) );
		height : calc( 31 var( --fontCoef ) );
	}
	#problem h2 > span:nth-of-type( 2 )::after{
		bottom : calc( -10 var( --fontCoef ) );
		width : calc( 28 var( --fontCoef ) );
		height : calc( 30 var( --fontCoef ) );
	}
	#problem h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 36 var( --remBase ) );
	}
	#problem ul{
		width : 100%;
		height : calc( 476 var( --remBase ) );
		margin-top : calc( 47 var( --remBase ) );
		border-radius : calc( 20 var( --remBase ) );
	}
	#problem ul::after{
		top : calc( 285 var( --remBase ) );
		left : calc( 379 var( --percentBase ) );
		width : calc( 654 var( --percentBase ) );
		height : calc( 301 var( --remBase ) );
	}
	#problem li{
		display : grid;
		place-items : center;
		font-size : calc( 20 var( --fontCoef ) );
		line-height : calc( 28 / 20 );
	}
	#problem li:nth-child( 1 ){
		top : calc( 162 var( --remBase ) );
		left : calc( 153 var( --percentBase ) );
		width : calc( 242 var( --percentBase ) );
		height : calc( 243 var( --remBase ) );
		padding-left : calc( 18 var( --percentBase ) );
		padding-right : calc( 24 var( --percentBase ) );
		background-image : url( "../images/home/problem/li01_pc.webp" );
	}
	#problem li:nth-child( 2 ){
		top : calc( 54 var( --remBase ) );
		left : calc( 424 var( --percentBase ) );
		width : calc( 241 var( --percentBase ) );
		height : calc( 238 var( --remBase ) );
		padding-left : calc( 17 var( --percentBase ) );
		padding-right : calc( 24 var( --percentBase ) );
		background-image : url( "../images/home/problem/li02_pc.svg" );
	}
	#problem li:nth-child( 3 ){
		top : calc( 54 var( --remBase ) );
		left : calc( 767 var( --percentBase ) );
		width : calc( 235 var( --percentBase ) );
		height : calc( 246 var( --remBase ) );
		padding-left : calc( 12 var( --percentBase ) );
		padding-right : calc( 13 var( --percentBase ) );
		background-image : url( "../images/home/problem/li03_pc.webp" );
	}
	#problem li:nth-child( 4 ){
		top : calc( 215 var( --remBase ) );
		left : calc( 1014 var( --percentBase ) );
		width : calc( 265 var( --percentBase ) );
		height : calc( 231 var( --remBase ) );
		padding-left : calc( 37 var( --percentBase ) );
		padding-right : calc( 13 var( --percentBase ) );
		background-image : url( "../images/home/problem/li04_pc.webp" );
	}
	#problem .line-pc{
		display : inline;
		background : linear-gradient( transparent 60% , #f8f598 40% );
	}
}

/* --------------------------------------------
SOLVE
--------------------------------------------- */
#solve h2{
	font-weight : 700;
	color : white;
	background-color : var( --primary );
}
#solve h2 > span{
	display : inline-block;
}
#solve h2 > span:first-of-type{
	position : relative;
	display : inline-block;
}
#solve h2 > span:first-of-type::before , #solve h2 > span:first-of-type::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#solve h2 > span:first-of-type::before{
	left : 0;
	background-image : url( "../images/home/solve/decoration01.svg" );
}
#solve h2 > span:first-of-type::after{
	right : 0;
	background-image : url( "../images/home/solve/decoration02.svg" );
}
#solve iframe{
	display : block;
	height : auto;
	aspect-ratio : 560 / 315;
	margin-inline : auto;
}
@media screen and ( max-width : 750px ){
	#solve{
		padding-bottom : calc( 117 var( --remBase ) );
		text-align : center;
	}
	#solve h2{
		padding-top : calc( ( 82 - 10 ) var( --remBase ) );
		padding-bottom : calc( ( 142 - 10 ) var( --remBase ) );
		font-size : 4rem;
		line-height : 1.5;
	}
	#solve h2 > span{
		line-height : 1;
	}
	#solve h2 > span:first-of-type{
		padding-inline : calc( 16 var( --remBase ) );
		margin-left : calc( 18 var( --remBase ) );
		margin-right : calc( 10 var( --remBase ) );
	}
	#solve h2 > span:first-of-type::before{
		top : calc( -19 var( --remBase ) );
		width : calc( 29 var( --remBase ) );
		height : calc( 31 var( --remBase ) );
	}
	#solve h2 > span:first-of-type::after{
		bottom : calc( -9 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 30 var( --remBase ) );
	}
	#solve h2 > span:not( :first-of-type ){
		font-size : 6rem;
		line-height : 1;
	}
	#solve iframe{
		width : 100%;
		margin-top : calc( -82 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#solve{
		padding-bottom : calc( 100 var( --remBase ) );
	}
	#solve h2{
		padding-top : calc( ( 111 - 10 ) var( --remBase ) );
		padding-bottom : calc( ( 153 - 10 ) var( --remBase ) );
		font-size : calc( 40 var( --fontCoef ) );
		line-height : calc( 60 / 40 );
	}
	#solve h2 > span{
		line-height : 1;
	}
	#solve h2 > span:first-of-type{
		padding-inline : calc( 15 var( --fontCoef ) );
		margin-inline : calc( 10 var( --fontCoef ) );
	}
	#solve h2 > span:first-of-type::before{
		top : calc( -15 var( --fontCoef ) );
		width : calc( 29 var( --fontCoef ) );
		height : calc( 31 var( --fontCoef ) );
	}
	#solve h2 > span:first-of-type::after{
		bottom : calc( -13 var( --fontCoef ) );
		width : calc( 28 var( --fontCoef ) );
		height : calc( 30 var( --fontCoef ) );
	}
	#solve h2 > span:not( :first-of-type ){
		font-size : calc( 60 var( --fontCoef ) );
		line-height : 1;
	}
	#solve iframe{
		width : 100%;
		margin-top : calc( -91 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1163.98px ){
	#solve h2{
		padding-inline : calc( 20 var( --viewportBase ) );
	}
	#solve iframe{
		width : calc( 100% - ( 40 var( --viewportBase ) ) );
	}
}
@media screen and ( min-width : 1164px ){
	#solve h2{
		padding-inline : calc( ( 100% - 1124px ) / 2 );
	}
	#solve iframe{
		width : 1123px;
	}
}

/* --------------------------------------------
FEATURES
--------------------------------------------- */
#features{
	position : relative;
	overflow-x : clip;
}
#features::before{
	position : absolute;
	top : 0;
	z-index : -1;
	display : block;
	height : 100%;
	content : "";
	background-color : #e8f7f7;
}
#features h2{
	font-weight : 400;
	text-align : center;
}
#features h2::after{
	display : block;
	margin-inline : auto;
	content : "";
	background-color : var( --primary );
}
#features > p{
	text-align : center;
}
#features > p span{
	display : inline;
	font-weight : 700;
	background : linear-gradient( transparent 60% , #f8f598 40% );
}
#features li{
	position : relative;
	display : grid;
	counter-increment : no;
	background-color : white;
}
#features img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#features h3{
	color : var( --primary );
}
@media screen and ( max-width : 750px ){
	#features{
		padding-top : calc( 85 var( --remBase ) );
		padding-bottom : calc( 123 var( --remBase ) );
	}
	#features::before{
		left : 0;
		width : 100%;
	}
	#features h2{
		font-size : 4rem;
	}
	#features h2 span{
		font-size : 3rem;
	}
	#features h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#features > p{
		margin-top : calc( ( 38 - 13 ) var( --remBase ) );
		font-size : 3.4rem;
		line-height : calc( 60 / 34 );
	}
	#features ul{
		margin-top : calc( 48 var( --remBase ) );
	}
	#features li{
		grid-template-rows : calc( ( 36 - 6.5 ) var( --remBase ) ) auto calc( 10 var( --remBase ) ) auto calc( ( 34 - 6.5 ) var( --remBase ) );
		grid-template-columns : calc( 16 var( --percentBase ) ) 1fr calc( 16 var( --percentBase ) ) calc( 311 var( --percentBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#features li::before{
		position : absolute;
		top : calc( -28 var( --remBase ) );
		left : 0;
		font-size : 24rem;
		font-weight : 900;
		color : #e8f7f7;
		content : counter( no );
	}
	#features li + li{
		margin-top : calc( 23 var( --remBase ) );
	}
	#features h3 , #features li p{
		position : relative;
	}
	#features h3{
		grid-row : 2;
		grid-column : 2;
		font-size : 2.6rem;
		line-height : calc( 36 / 26 );
	}
	#features li p{
		grid-row : 4;
		grid-column : 2;
		font-size : 2.6rem;
		line-height : calc( 36 / 26 );
	}
	#features picture{
		grid-row : 1/6;
		grid-column : 4;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#features{
		padding-top : calc( 77 var( --remBase ) );
		padding-bottom : calc( 54 var( --remBase ) );
	}
	#features::before{
		border-radius : calc( 20 var( --remBase ) );
	}
	#features h2{
		font-size : calc( 40 var( --fontCoef ) );
	}
	#features h2 span{
		font-size : calc( 30 var( --fontCoef ) );
	}
	#features h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#features > p{
		margin-top : calc( ( 34 - 7.5 ) var( --remBase ) );
		font-size : calc( 30 var( --fontCoef ) );
		line-height : calc( 45 / 30 );
	}
	#features ul{
		display : grid;
		grid-template-columns : repeat( 3 , minmax( calc( 356 var( --percentBase ) ) , 356px ) );
		column-gap : calc( 24 var( --percentBase ) );
		align-items : stretch;
		justify-content : center;
		margin-top : calc( ( 35 - 7.5 ) var( --remBase ) );
	}
	#features li{
		grid-template-rows : subgrid;
		grid-template-columns : calc( 12 * 100% / 356 ) 1fr calc( 12 * 100% / 356 );
		grid-row : span 3;
		padding-bottom : calc( ( 25 - 4 ) var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#features picture{
		position : relative;
		grid-row : 1;
		grid-column : 1/4;
		aspect-ratio : 356 / 241;
		overflow : hidden;
	}
	#features picture::before{
		position : absolute;
		bottom : -.2em;
		left : calc( 10 * 100% / 356 );
		font-size : calc( 120 var( --remBase ) );
		font-weight : 900;
		color : white;
		content : counter( no );
	}
	#features h3 , #features li p{
		grid-column : 2;
	}
	#features h3{
		position : relative;
		grid-row : 2;
		padding-top : calc( ( 17 - 3 ) var( --remBase ) );
		font-size : calc( 20 var( --fontCoef ) );
		line-height : calc( 26 / 20 );
	}
	#features li p{
		grid-row : 3;
		padding-top : calc( 10 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : calc( 24 / 16 );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#features::before{
		/* left: calc( 20 var(--viewportBase ) ); */
		left : 0;
		width : 100%;
	}
}
@media print , screen and ( min-width : 1480px ){
	#features::before{
		left : calc( 50% - 720px );
		width : calc( 50% + 720px ) ;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#features::before{
		transition : translate var( --transitionBase );
		translate : 100% 0;
	}
	#features.is-animation::before{
		translate : 0 0;
	}
}

/* --------------------------------------------
SCENE
--------------------------------------------- */
#scene h2{
	font-weight : 400;
	text-align : center;
}
#scene p{
	font-weight : 700;
	color : var( --primary );
}
#scene ul{
	justify-content : center;
}
#scene li{
	text-align : center;
}
#scene li::before{
	display : block;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#scene li:nth-child( 1 )::before{
	background-image : url( "../images/home/scene/img01.webp" );
}
#scene li:nth-child( 2 )::before{
	background-image : url( "../images/home/scene/img02.webp" );
}
#scene li:nth-child( 3 )::before{
	background-image : url( "../images/home/scene/img03.webp" );
}
#scene li:nth-child( 4 )::before{
	background-image : url( "../images/home/scene/img04.webp" );
}
#scene li:nth-child( 5 )::before{
	background-image : url( "../images/home/scene/img05.webp" );
}
@media screen and ( max-width : 750px ){
	#scene{
		padding-top : calc( 86 var( --remBase ) );
		padding-bottom : calc( ( 113 - 2 ) var( --remBase ) );
	}
	#scene h2{
		font-size : 4rem;
	}
	#scene p{
		margin-top : calc( ( 40 - 6.5 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 36 / 26 );
	}
	#scene ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( ( 40 - 2 ) var( --remBase ) );
		column-gap : calc( 37 var( --percentBase ) );
		margin-top : calc( ( 43 - 6.5 ) var( --remBase ) );
	}
	#scene li{
		width : calc( 204 var( --percentBase ) );
		font-size : 1.6rem;
		line-height : 1.25;
	}
	#scene li::before{
		width : 100%;
		margin-bottom : calc( ( 12 - 2 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#scene{
		padding-top : calc( 90 var( --remBase ) );
		padding-bottom : calc( ( 103 - 2 ) var( --remBase ) );
	}
	#scene h2{
		font-size : calc( 40 var( --fontCoef ) );
	}
	#scene p{
		margin-top : calc( 32 var( --remBase ) );
		font-size : calc( 20 var( --fontCoef ) );
		text-align : center;
	}
	#scene ul{
		display : grid;
		grid-template-columns : repeat( 5 , minmax( calc( 204 var( --percentBase ) ) , 204px ) );
		column-gap : calc( 24 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#scene li{
		font-size : calc( 16 var( --fontCoef ) );
		line-height : calc( 20 / 16 );
	}
	#scene li::before{
		width : 100%;
		margin-bottom : calc( ( 12 - 2 ) var( --remBase ) );
	}
}

/* --------------------------------------------
DEMO
--------------------------------------------- */
#demo{
	position : relative;
	overflow-x : clip;
	overflow-y : clip;
	color : white;
	background-color : #3ba1a0;
}
#demo::before{
	position : absolute;
	display : block;
	height : calc( 877 var( --remBase ) );
	content : "";
	background : url( "../images/home/demo/logo.svg" ) left top / contain repeat-y;
}
#demo h2{
	position : relative;
	font-weight : 400;
}
#demo h2::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : currentColor;
}
#demo .box{
	position : relative;
}
#demo .pics{
	position : relative;
}
#demo .links button{
	position : absolute;
	display : grid;
	place-items : center;
	aspect-ratio : 1;
	font-weight : 700;
	background-color : #f19812;
	border-radius : 50%;
}
#demo a{
	display : grid;
	align-items : center;
	justify-content : center;
	width : fit-content;
	margin-inline : auto;
	color : white;
	background-color : #f19812;
}
#demo a::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/home/demo/play.svg" ) center / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	#demo{
		padding-top : calc( 92 var( --remBase ) );
		padding-bottom : calc( 95 var( --remBase ) );
	}
	#demo::before{
		top : calc( -2 var( --remBase ) );
		left : calc( -21 var( --viewportBase ) );
		width : calc( 144 var( --viewportBase ) );
		height : calc( 877 var( --remBase ) );
		opacity : .2;
	}
	#demo h2{
		font-size : 4rem;
	}
	#demo h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#demo .box{
		margin-top : calc( 34 var( --remBase ) );
	}
	#demo .pics{
		width : 100%;
	}
	#demo .pics picture{
		box-shadow : calc( 10 var( --remBase ) ) 0 calc( 20 var( --remBase ) ) rgb( 0 0 0 / .2 );
	}
	#demo .links button{
		height : calc( ( 36 * 686 / 662 ) var( --remBase ) );
		font-size : calc( 24 var( --fontCoef ) );
	}
	#demo .links li:nth-child( 1 ) button{
		top : calc( ( 65 * 686 / 662 ) var( --remBase ) );
		left : calc( 523 * 100% / 662 );
	}
	#demo .links li:nth-child( 2 ) button{
		top : calc( ( 136 * 686 / 662 ) var( --remBase ) );
		left : calc( 140 * 100% / 662 );
	}
	#demo .links li:nth-child( 3 ) button{
		top : calc( ( 235 * 686 / 662 ) var( --remBase ) );
		left : calc( 248 * 100% / 662 );
	}
	#demo .links li:nth-child( 4 ) button{
		top : calc( ( 389 * 686 / 662 ) var( --remBase ) );
		left : calc( 315 * 100% / 662 );
	}
	#demo .links li:nth-child( 5 ) button{
		top : calc( ( 351 * 686 / 662 ) var( --remBase ) );
		left : calc( 4 * 100% / 662 );
	}
	#demo .links li:nth-child( 6 ) button{
		top : calc( ( 351 * 686 / 662 ) var( --remBase ) );
		left : calc( 52 * 100% / 662 );
	}
	#demo .targets{
		display : none;
	}
	#demo a{
		position : relative;
		grid-template-columns : calc( 60 var( --percentBase ) ) auto;
		column-gap : calc( 5.5 var( --percentBase ) );
		width : 100%;
		height : calc( 107 var( --remBase ) );
		margin-top : calc( 30 var( --remBase ) );
		font-size : 3.4rem;
		font-weight : 300;
	}
	#demo a::before{
		height : calc( 48 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#demo{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 61 var( --remBase ) );
		overflow-y : cliip;
	}
	#demo::before{
		top : calc( -8 var( --remBase ) );
		height : 100%;
		opacity : .4;
	}
	#demo h2{
		font-size : calc( 40 var( --fontCoef ) );
		text-align : center;
	}
	#demo h2::after{
		width : calc( 200 var( --fontCoef ) );
		height : calc( 6 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 24 var( --fontCoef ) );
	}
	#demo .box{
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 662 var( --percentBase ) ) calc( 24 var( --percentBase ) ) 1fr;
		align-items : start;
		margin-top : calc( 33 var( --remBase ) );
	}
	#demo .pics{
		grid-row : 1;
		grid-column : 2;
	}
	#demo .links button{
		height : calc( 36 var( --remBase ) );
		font-size : calc( 24 var( --fontCoef ) );
	}
	#demo .links li:nth-child( 1 ) button{
		top : calc( 65 var( --remBase ) );
		left : calc( 523 * 100% / 662 );
	}
	#demo .links li:nth-child( 2 ) button{
		top : calc( 136 var( --remBase ) );
		left : calc( 140 * 100% / 662 );
	}
	#demo .links li:nth-child( 3 ) button{
		top : calc( 235 var( --remBase ) );
		left : calc( 248 * 100% / 662 );
	}
	#demo .links li:nth-child( 4 ) button{
		top : calc( 389 var( --remBase ) );
		left : calc( 315 * 100% / 662 );
	}
	#demo .links li:nth-child( 5 ) button{
		top : calc( 351 var( --remBase ) );
		left : calc( 4 * 100% / 662 );
	}
	#demo .links li:nth-child( 6 ) button{
		top : calc( 351 var( --remBase ) );
		left : calc( 52 * 100% / 662 );
	}
	#demo .targets{
		grid-row : 1;
		grid-column : 4;
		max-width : 432px;
		margin-top : calc( -4 var( --fontCoef ) );
	}
	#demo .targets li + li{
		margin-top : calc( 10 var( --fontCoef ) );
	}
	#demo .targets h3 , #demo .targets p{
		font-size : calc( 16 var( --fontCoef ) );
		line-height : calc( 24 / 16 );
	}
	#demo .targets p{
		padding-left : 1em;
	}
	#demo a{
		grid-template-columns : calc( 32 var( --fontCoef ) ) auto;
		column-gap : calc( 3 var( --fontCoef ) );
		padding-block : calc( 16 var( --fontCoef ) );
		padding-inline : calc( 98 var( --fontCoef ) );
		margin-top : calc( ( 79 - 4 ) var( --remBase ) );
		font-size : calc( 24 var( --fontCoef ) );
	}
	#demo a::before{
		height : calc( 26 var( --fontCoef ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#demo::before{
		width : calc( 144 * 100% / 2000 );
	}
}
@media print , screen and ( min-width : 1480px ){
	#demo::before{
		width : 144px;
	}
}

/* --------------------------------------------
PLAN
--------------------------------------------- */
#plan h2{
	font-weight : 400;
}
#plan h2::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --primary );
}
#plan .plans{
	display : grid;
	align-items : stretch;
}
#plan .plans > div{
	display : grid;
	grid-template-rows : subgrid;
	grid-row : span 4;
}
#plan .plans > div > dt{
	display : grid;
	place-items : center;
	font-weight : 700;
	text-align : center;
}
#plan .plans > div > dd:nth-of-type( 1 ){
	font-weight : 700;
	text-align : center;
}
#plan .plans li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
}
#plan .plans li::before{
	white-space : nowrap;
	content : "※ ";
}
#plan .plan01{
	background-color : #f5f2f2;
}
#plan .plan01 > dt{
	background-color : #d2d2d2;
}
#plan .plan02{
	background-color : #eee4cb;
}
#plan .plan02 > dt{
	background-color : #edc157;
}
#plan h3{
	font-weight : 400;
}
#plan h3::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --primary );
}
#plan .options dt{
	font-weight : 700;
	color : var( --primary );
}
#plan p.option-text{
	margin-top : 1em;
	line-height : 1.5;
}
@media screen and ( max-width : 750px ){
	#plan{
		padding-top : calc( 108 var( --remBase ) );
		padding-bottom : calc( ( 157 - 6.5 ) var( --remBase ) );
	}
	#plan h2{
		font-size : 4rem;
		text-align : center;
	}
	#plan h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 24 var( --remBase ) );
	}
	#plan .plan-common{
		padding-top : calc( ( 40 - 6.5 ) var( --remBase ) );
	}
	#plan .plan-common dl{
		display : flex;
		line-height : 1.3;
	}
	#plan .plan-common dl dt{
		width : 6em;
		padding-right : 1em;
		font-size : 3rem;
		font-weight : 600;
	}
	#plan .plan-common dl dd{
		font-size : 2.2rem;
	}
	#plan .plan-common dl dd span{
		font-size : 3rem;
		font-weight : 600;
	}
	#plan .plans{
		grid-template-columns : 1fr 1fr;
		margin-top : calc( 26 var( --remBase ) );
	}
	#plan .plans > div{
		padding-bottom : calc( ( 30 - 5 ) var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#plan .plans > div > dt{
		height : calc( 120 var( --remBase ) );
		font-size : 3rem;
		line-height : 1.2;
	}
	#plan .plans > div > dd.summary{
		padding : .5em;
		padding-top : calc( 18 var( --remBase ) );
		font-size : 2.2rem;
		line-height : 1.3;
		text-align : left;
	}
	#plan .plans > div > dd.caution{
		padding-inline : calc( 18 * 100% / 343 );
		padding-top : calc( ( 10 - 1.6 ) var( --remBase ) );
		padding-top : calc( ( 13 - 1.6 - 5 ) var( --remBase ) );
	}
	#plan .plans > div li{
		font-size : 2rem;
		line-height : 1.5;
	}
	#plan h3{
		margin-top : calc( 49 var( --remBase ) );
		font-size : 3rem;
	}
	#plan h3::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#plan .options{
		margin-top : calc( ( 26 - 5 ) var( --remBase ) );
	}
	#plan .options > div + div{
		padding-top : calc( ( 22 - 5 ) var( --remBase ) );
		margin-top : calc( ( 20 - 5 ) var( --remBase ) );
		border-top : solid 1px #ccc;
	}
	#plan .options dt , #plan .options dd{
		font-size : 2.6rem;
		line-height : calc( 36 / 26 );
	}
	#plan .options dd{
		margin-top : calc( 6 var( --remBase ) );
	}
	#plan p.option-text{
		margin-top : 1em;
		line-height : 1.5;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#plan{
		position : relative;
		padding-top : calc( 19 var( --remBase ) );
		padding-bottom : calc( ( 91 - 4 ) var( --remBase ) );
		margin-top : calc( 135 var( --remBase ) );
		overflow-x : clip;
	}
	#plan::before{
		position : absolute;
		top : 0;
		right : 0;
		z-index : -1;
		display : block;
		height : 100%;
		content : "";
		background-color : #e8f7f7;
		border-radius : calc( 20 var( --remBase ) );
	}
	#plan > *{
		margin-left : calc( 162 var( --percentBase ) );
	}
	#plan h2{
		font-size : calc( 40 var( --fontCoef ) );
	}
	#plan h2::after{
		width : calc( 200 var( --fontCoef ) );
		height : calc( 6 var( --fontCoef ) );
		margin-top : calc( 24 var( --fontCoef ) );
	}
	#plan .plan-common{
		padding-top : 40px;
	}
	#plan .plan-common dl{
		display : flex;
		line-height : 1.3;
	}
	#plan .plan-common dl dt{
		padding-right : 1em;
		font-size : calc( 24 var( --fontCoef ) );
		font-weight : 600;
	}
	#plan .plan-common dl dd{
		font-size : calc( 16 var( --fontCoef ) );
	}
	#plan .plan-common dl dd span{
		font-size : calc( 24 var( --fontCoef ) );
		font-weight : 600;
	}
	#plan .plans{
		grid-template-columns : minmax( auto , 432px ) minmax( calc( 24 * 100% / 1278 ) , 24px ) minmax( auto , 432px );
		margin-top : calc( 31 var( --remBase ) );
	}
	#plan .plans > div{
		padding-bottom : calc( ( 20 - 3.5 ) var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#plan .plans > div:nth-of-type( 1 ){
		grid-column : 1;
	}
	#plan .plans > div:nth-of-type( 2 ){
		grid-column : 3;
	}
	#plan .plans > div > dt{
		height : calc( 120 var( --remBase ) );
		font-size : calc( 24 var( --fontCoef ) );
	}
	#plan .plans > div > dd.price{
		padding-top : calc( 25 var( --remBase ) );
		font-size : calc( 50 var( --fontCoef ) );
	}
	#plan .plans > div > dd.price span{
		font-size : calc( 16 var( --fontCoef ) );
		font-weight : 400;
	}
	#plan .plans > div > dd:nth-of-type( 2 ){
		margin-top : calc( 12 var( --remBase ) );
	}
	#plan .plans > div dl{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : center;
		font-size : calc( 16 var( --fontCoef ) );
	}
	#plan .plans > div > dd.summary{
		padding-inline : calc( 24 * 100% / 432 );
		padding-top : calc( 24 var( --remBase ) );
		font-size : calc( 18 var( --fontCoef ) );
		line-height : 1.3;
	}
	#plan .plans > div > dd.summary p{
		text-align : left;
	}
	#plan .plans > div > dd.caution{
		padding-inline : calc( 25 * 100% / 432 );
		font-size : calc( 14 var( --fontCoef ) );
		line-height : 130%;
	}
	#plan h3{
		margin-top : calc( 35 var( --remBase ) );
		font-size : calc( 24 var( --fontCoef ) );
	}
	#plan h3::after{
		width : calc( 200 var( --fontCoef ) );
		height : calc( 4 var( --fontCoef ) );
		margin-top : calc( 16 var( --fontCoef ) );
	}
	#plan .options{
		display : grid;
		grid-template-columns : minmax( auto , 204px ) minmax( calc( 24 * 100% / 2178 ) , 24px ) minmax( auto , 204px ) minmax( calc( 24 * 100% / 2178 ) , 24px ) minmax( auto , 204px ) minmax( calc( 24 * 100% / 2178 ) , 24px ) minmax( auto , 204px );
		margin-top : calc( 17 var( --remBase ) );
	}
	#plan .options > div{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
	}
	#plan .options > div:nth-of-type( 1 ){
		grid-column : 1;
	}
	#plan .options > div:nth-of-type( 2 ){
		grid-column : 3;
	}
	#plan .options > div:nth-of-type( 3 ){
		grid-column : 5;
	}
	#plan .options > div:nth-of-type( 4 ){
		grid-column : 7;
	}
	#plan .options dt{
		font-size : calc( 20 var( --fontCoef ) );
		line-height : calc( 26 / 20 );
	}
	#plan .options dd{
		padding-top : calc( 10 var( --fontCoef ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : calc( 24 / 16 );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1090px ){
	#plan::before{
		width : calc( 50% - var( 378 var( --viewportBase ) ) );
	}
}
@media screen and ( min-width : 1090.02px ) and ( max-width : 1479.98px ){
	#plan::before{
		width : calc( 100% - 1090px );
	}
}
@media print , screen and ( min-width : 1480px ){
	#plan::before{
		width : calc( 50% - 378px );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media print , screen and ( min-width : 750.02px ){
		#plan::before{
			transition : translate var( --transitionBase );
			translate : 100% 0;
		}
		#plan.is-animation::before{
			translate : 0 0;
		}
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow{
	position : relative;
	overflow-x : clip;
}
#flow::before{
	position : absolute;
	top : 0;
	z-index : -1;
	display : block;
	content : "";
	background-color : #e8f7f7;
}
#flow h2{
	font-weight : 400;
}
#flow h2::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --primary );
}
#flow ol li{
	counter-increment : no02;
}
#flow ol li::before{
	font-family : Lato , sans-serif;
	line-height : 1;
	color : var( --primary );
	content : counter( no02 , decimal-leading-zero );
}
#flow ol li:nth-child( even ){
	background-color : #f5f4f4;
}
#flow h3{
	color : var( --primary );
}
@media screen and ( max-width : 750px ){
	#flow{
		padding-top : calc( 104 var( --remBase ) );
		padding-bottom : calc( 116 var( --remBase ) );
	}
	#flow::before{
		left : 0;
		width : 100%;
		height : 100%;
	}
	#flow h2{
		font-size : 4rem;
		text-align : center;
	}
	#flow h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 24 var( --remBase ) );
	}
	#flow ol{
		margin-top : calc( 44 var( --remBase ) );
	}
	#flow li{
		position : relative;
		padding-top : calc( 50 var( --remBase ) );
		padding-bottom : calc( ( 32 - 6.5 ) var( --remBase ) );
		padding-left : calc( 138 var( --percentBase ) );
		padding-right : calc( 28 var( --percentBase ) );
	}
	#flow li::before{
		position : absolute;
		top : calc( 22.5 var( --remBase ) );
		left : calc( 21 var( --percentBase ) );
		font-size : 8rem;
	}
	#flow li:nth-child( odd ){
		background-color : white;
	}
	#flow h3{
		font-size : 3rem;
	}
	#flow p{
		margin-top : calc( ( 25 - 6.5 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : 1.5;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#flow{
		padding-top : calc( 58 var( --remBase ) );
		padding-bottom : calc( 58 var( --remBase ) );
		margin-top : calc( 67 var( --remBase ) );
	}
	#flow::before{
		left : 0;
		height : 100%;
		border-radius : calc( 20 var( --remBase ) );
	}
	#flow > *{
		margin-left : calc( 390 var( --percentBase ) );
	}
	#flow h2{
		font-size : calc( 40 var( --fontCoef ) );
	}
	#flow h2::after{
		width : calc( 200 var( --fontCoef ) );
		height : calc( 6 var( --fontCoef ) );
		margin-top : calc( 24 var( --fontCoef ) );
	}
	#flow ol{
		max-width : 888px;
		margin-top : calc( 28 var( --remBase ) );
	}
	#flow li{
		display : grid;
		grid-template-columns : calc( 126 * 100% / 776 ) calc( 212 * 100% / 776 ) 1fr;
		align-items : start;
		padding-top : calc( 14 var( --remBase ) );
		padding-bottom : calc( 28 var( --remBase ) );
		padding-left : calc( 25 * 100% / 888 );
		padding-right : calc( 87 * 100% / 888 );
	}
	#flow li::before{
		font-size : calc( 80 var( --fontCoef ) );
	}
	#flow li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#flow li:nth-child( odd ){
		background-color : #e8f7f7;
	}
	#flow h3{
		padding-top : calc( ( 12 - 5 ) var( --remBase ) );
		font-size : calc( 20 var( --fontCoef ) );
		line-height : calc( 30 / 20 );
	}
	#flow p{
		padding-top : calc( ( 11 - 6.4 ) var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : calc( 28.8 / 16 );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#flow::before{
		width : calc( 380 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	#flow::before{
		width : calc( 50% - 380px ) ;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#flow::before{
		transition : translate var( --transitionBase );
		translate : -100% 0;
	}
	#flow.is-animation::before{
		translate : 0 0;
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq{
	background-color : #f5f4f4;
}
#faq h2{
	text-align : center;
}
#faq h2::after{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --primary );
}
#faq dt{
	position : relative;
	font-weight : 700;
	color : white;
	cursor : pointer;
	background-color : var( --primary );
}
#faq dt::before{
	position : absolute;
	display : block;
	line-height : 1;
	content : "Q";
}
#faq dt::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
}
#faq dd{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
	transition : grid-template-rows var( --transitionBase ) , border-radius var( --transitionBase );
}
#faq dd > div{
	position : relative;
	overflow : hidden;
	background-color : white;
	transition : padding var( --transitionBase );
}
#faq dd.is-open{
	grid-template-rows : 1fr;
}
#faq dt:has( +dd.is-open ){
	border-end-start-radius : 0;
	border-end-end-radius : 0;
}
@media screen and ( max-width : 750px ){
	#faq{
		padding-top : calc( 108 var( --remBase ) );
		padding-bottom : calc( 90 var( --remBase ) );
	}
	#faq h2{
		font-size : 4rem;
	}
	#faq h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#faq dl{
		margin-top : calc( 53 var( --remBase ) );
	}
	#faq dt{
		min-height : calc( 88 var( --remBase ) );
		padding-top : calc( ( 17 - 3.9 ) var( --remBase ) );
		padding-bottom : calc( ( 15 - 3.9 ) var( --remBase ) );
		padding-left : calc( 117 var( --percentBase ) );
		padding-right : calc( 34 var( --percentBase ) );
		font-size : 2.6rem;
		line-height : calc( 33.8 / 26 );
		border-radius : calc( 20 var( --remBase ) );
	}
	#faq dt::before{
		top : calc( 6 var( --remBase ) );
		left : calc( 29 var( --percentBase ) );
		font-size : 6rem;
	}
	#faq dt::after{
		top : calc( 17 var( --remBase ) );
		left : calc( 95 var( --percentBase ) );
		width : calc( 4 var( --percentBase ) );
		height : calc( 100% - ( 28 var( --remBase ) ) );
	}
	#faq dd > div{
		padding-left : calc( 30 var( --percentBase ) );
		padding-right : calc( 34 var( --percentBase ) );
		font-size : 2.6rem;
		line-height : 1.5;
		border-radius : 0 0 calc( 20 var( --remBase ) ) calc( 20 var( --remBase ) );
	}
	#faq dd.is-open > div{
		padding-top : calc( ( 27 - 6.5 ) var( --remBase ) );
		padding-bottom : calc( ( 48 - 6.5 ) var( --remBase ) );
	}
	#faq dd + dt{
		margin-top : calc( 31 var( --remBase ) );
	}
	#faq p{
		margin-top : 1em;
		line-height : 1.8;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#faq{
		padding-top : calc( 81 var( --remBase ) );
		padding-bottom : calc( 127 var( --remBase ) );
		margin-top : calc( 119 var( --remBase ) );
	}
	#faq h2{
		font-size : calc( 40 var( --fontCoef ) );
	}
	#faq h2::after{
		width : calc( 200 var( --fontCoef ) );
		height : calc( 6 var( --fontCoef ) );
		margin-top : calc( 24 var( --fontCoef ) );
	}
	#faq dl{
		max-width : 1116px;
		margin-inline : auto;
		margin-top : calc( 46 var( --remBase ) );
	}
	#faq dt{
		min-height : calc( 70 var( --remBase ) );
		padding-top : calc( ( 24 - 3 ) var( --remBase ) );
		padding-bottom : calc( ( 27 - 3 ) var( --remBase ) );
		padding-left : calc( 116 * 100% / 1116 );
		padding-right : calc( 48 * 100% / 1116 );
		font-size : calc( 20 var( --fontCoef ) );
		line-height : calc( 26 / 20 );
		border-radius : calc( 20 var( --remBase ) );
	}
	#faq dt::before{
		top : calc( 10 var( --remBase ) );
		left : calc( 32 * 100% / 1116 );
		font-size : calc( 40 var( --fontCoef ) );
	}
	#faq dt::after{
		top : calc( 10 var( --remBase ) );
		left : calc( 93 * 100% / 1116 );
		width : calc( 2 * 100% / 1116 );
		height : calc( 100% - ( 20 var( --remBase ) ) );
	}
	#faq dd > div{
		padding-left : calc( 116 * 100% / 1116 );
		padding-right : calc( 48 * 100% / 1116 );
		font-size : calc( 18 var( --fontCoef ) );
		line-height : calc( 30.6 / 18 );
		border-radius : 0 0 calc( 20 var( --remBase ) ) calc( 20 var( --remBase ) );
	}
	#faq dd > div::before{
		position : absolute;
		top : calc( 20 var( --remBase ) );
		left : calc( 36 * 100% / 1116 );
		display : block;
		font-size : calc( 40 var( --fontCoef ) );
		font-weight : 700;
		line-height : 1;
		color : var( --primary );
		content : "A";
	}
	#faq dd.is-open > div{
		padding-top : calc( ( 27 - 6.3 ) var( --remBase ) );
		padding-bottom : calc( ( 26 - 6.3 ) var( --remBase ) );
	}
	#faq dd + dt{
		margin-top : calc( 4 var( --remBase ) );
	}
	#faq p{
		max-width : 1116px;
		margin-inline : auto;
		margin-top : 1em;
	}
}

/* --------------------------------------------
FORM
--------------------------------------------- */
#form{
	color : white;
	background-color : #434343;
}
#form h2{
	font-weight : 400;
	text-align : center;
}
#form h2::after{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --primary );
}
#form input[type="text"] , #form input[type="email"] , #form textarea , #form select{
	width : 100%;
	padding-inline : .5em;
	color : var( --body );
	background-color : white;
}
#form li input , #form .agree input{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#form li span , #form .agree span{
	position : relative;
	display : grid;
	justify-content : start;
	cursor : pointer;
}
#form li span::before , #form .agree span::before{
	flex-shrink : 0;
	font-size : 0;
	content : "";
}
#form li span , #form .agree span{
	align-items : center;
}
#form li span::before , #form .agree span::before{
	grid-row : 1;
	grid-column : 1;
	aspect-ratio : 1;
	background-color : white;
}
#form li input:checked ~ span::after , #form .agree input:checked ~ span::after{
	position : absolute;
	display : block;
	aspect-ratio : 1;
	content : "";
	background : url( "../images/ui/icon/square/check.svg" ) center / contain no-repeat;
}
#form ol li .mfp_err{
	grid-row : 2;
	grid-column : 1/-1;
	padding-top : .5em;
}
#form h3{
	font-weight : 400;
}
#form .box{
	width : 100%;
	border-color : white;
	border-style : solid;
}
#form .box > div{
	height : 100%;
	overflow-y : auto;
}
@supports ( -moz-orient ){
	#form .box > div{
		scrollbar-width : thin;
		scrollbar-color : #f3f5f7 #666;
	}
}
#form .box > div::-webkit-scrollbar-track{
	background-color : #666;
}
#form .box > div::-webkit-scrollbar-thumb{
	background-color : #f3f5f7;
}
#form .agree label{
	display : grid;
	align-items : center;
	justify-content : center;
}
#form .agree span{
	justify-content : center;
}
#form input[type="submit"]{
	display : grid;
	place-items : center;
	margin-inline : auto;
	color : #161515;
	background-color : #fcdc02;
	border-radius : 100vmax;
}
@media screen and ( max-width : 750px ){
	#form{
		padding-top : calc( 125 var( --remBase ) );
		padding-bottom : calc( 124 var( --remBase ) );
	}
	#form h2{
		font-size : 4rem;
	}
	#form h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#form dl{
		margin-top : calc( 57 var( --remBase ) );
	}
	#form dt label{
		font-size : 2.8rem;
	}
	#form dd{
		margin-top : calc( 16 var( --remBase ) );
	}
	#form input[type="text"] , #form input[type="email"] , #form textarea{
		font-size : 2.8rem;
	}
	#form input[type="text"] , #form input[type="email"]{
		height : calc( 60 var( --remBase ) );
	}
	#form dd + dt{
		margin-top : calc( 30 var( --remBase ) );
	}
	#form dd > ul{
		padding-top : calc( 3 var( --remBase ) );
	}
	#form dd > ul > li + li{
		margin-top : calc( 30 var( --remBase ) );
	}
	#form dd > ul > li span{
		grid-template-columns : calc( 39 var( --percentBase ) ) auto;
		column-gap : calc( 14 var( --percentBase ) );
	}
	#form dd > ul > li input:checked ~ span::after{
		left : calc( 1 var( --percentBase ) );
		width : calc( 39 var( --percentBase ) );
	}
	#form dd ol{
		padding-bottom : calc( 21 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#form dd ol li{
		display : grid;
		grid-template-columns : 1fr 1fr 1fr;
		column-gap : calc( 20 var( --percentBase ) );
		align-items : center;
	}
	#form dd ol li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#form dd ol label{
		font-size : 2.6rem;
	}
	#form dd ol select{
		width : 100%;
		height : calc( 52 var( --remBase ) );
		font-size : 2.6rem;
	}
	#form dd li span , #form .agree span{
		font-size : 2.6rem;
	}
	#form dd li input:checked ~ span::after , #form .agree input:checked ~ span::after{
		top : 0;
	}
	#form textarea{
		height : calc( 220 var( --remBase ) );
	}
	#form h3{
		margin-top : calc( 62 var( --remBase ) );
		font-size : 2.6rem;
	}
	#form .box{
		height : calc( 233 var( --remBase ) );
		padding-block : calc( 5 var( --remBase ) );
		padding-left : calc( 19 var( --percentBase ) );
		padding-right : calc( 6 var( --percentBase ) );
		margin-top : calc( 20 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
	}
	#form .box > div{
		padding-block : calc( ( 11 - 5.5 ) var( --remBase ) );
	}
	#form .box > div::-webkit-scrollbar{
		width : calc( 9 var( --remBase ) );
	}
	#form .box p{
		font-size : 2.2rem;
		line-height : 1.5;
	}
	#form .agree{
		margin-top : calc( 46 var( --remBase ) );
	}
	#form .agree label{
		display : grid;
		align-items : center;
		justify-content : center;
	}
	#form .agree span{
		grid-template-columns : calc( 40 var( --remBase ) ) auto;
		column-gap : calc( 14 var( --remBase ) );
	}
	#form .agree input:checked ~ span::after{
		left : 0;
		width : calc( 40 var( --remBase ) );
	}
	#form input[type="submit"]{
		width : calc( 340 var( --percentBase ) );
		height : calc( 60 var( --remBase ) );
		margin-top : calc( 77 var( --remBase ) );
		font-size : 2.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#form{
		padding-top : calc( 124 var( --remBase ) );
		padding-bottom : calc( 66 var( --remBase ) );
	}
	#form h2{
		font-size : 4rem;
	}
	#form h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#form dl{
		display : grid;
		grid-template-columns : calc( 420 * 100% / 1120 ) 1fr;
		width : calc( 1120 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 42 var( --remBase ) );
	}
	#form :where( dt,dd ){
		padding-block : calc( 30 var( --remBase ) );
		border-bottom : solid 1px #fff;
	}
	#form dt{
		padding-right : calc( 44 * 100% / 420 );
	}
	#form dt label{
		display : grid;
		grid-template-columns : auto calc( 62 * 100% / 376 );
		column-gap : calc( 50 * 100% / 376 );
		align-items : center;
		justify-content : end;
		padding-top : calc( 5 var( --remBase ) );
		font-size : calc( 18 var( --fontCoef ) );
	}
	#form dt label.required::after{
		display : grid;
		place-items : center;
		width : 100%;
		height : calc( 30 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		color : white;
		content : "必須";
		background-color : #eb6877;
	}
	#form input[type="text"] , #form input[type="email"] , #form textarea{
		font-size : calc( 18 var( --fontCoef ) );
	}
	#form input[type="text"] , #form input[type="email"]{
		height : calc( 40 var( --remBase ) );
	}
	#form #contact_organization , #form #contact_organization-title , #form #contact_name , #form #contact_email{
		width : calc( 433 * 100% / 700 );
	}
	#form #contact_tel{
		width : calc( 318 * 100% / 700 );
	}
	#form dd li span , #form .agree span{
		font-size : calc( 18 var( --fontCoef ) );
	}
	#form dd li input:checked ~ span::after , #form .agree input:checked ~ span::after{
		top : 0;
	}
	#form dt:has( + dd ul ) label{
		padding-top : 0;
	}
	#form dd > ul > li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#form dd > ul > li span{
		grid-template-columns : calc( 25 * 100% / 700 ) auto;
		column-gap : calc( 8 * 100% / 700 );
	}
	#form dd > ul > li input:checked ~ span::after{
		left : 0;
		width : calc( 25 * 100% / 700 );
	}
	#form dd ol{
		padding-bottom : calc( 28 var( --remBase ) );
		padding-left : calc( 33 * 100% / 700 );
		margin-top : calc( 16 var( --remBase ) );
	}
	#form dd ol li{
		display : grid;
		grid-template-columns : calc( 124 * 100% /  667 ) calc( 193 * 100% /  667 ) calc( 193 * 100% /  667 );
		column-gap : calc( 14 * 100% /  667 );
		align-items : center;
	}
	#form dd ol li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#form dd ol label{
		font-size : calc( 18 var( --fontCoef ) );
	}
	#form dd ol select{
		width : 100%;
		height : calc( 33 var( --remBase ) );
		font-size : calc( 18 var( --fontCoef ) );
	}
	#form textarea{
		width : calc( 506 * 100% / 700 );
		height : calc( 168 var( --remBase ) );
	}
	#form h3{
		margin-top : calc( 52 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		text-align : center;
	}
	#form .box{
		width : calc( 658 var( --percentBase ) );
		height : calc( 120 var( --remBase ) );
		padding-block : calc( ( 5 - 3 ) var( --remBase ) );
		padding-left : calc( 9 var( --percentBase ) );
		padding-right : calc( 4 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 21 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
	}
	#form .box > div::-webkit-scrollbar{
		width : calc( 4 var( --remBase ) );
	}
	#form .box p{
		font-size : calc( 14 var( --fontCoef ) );
		line-height : calc( 20 / 14 );
	}
	#form .agree{
		margin-top : calc( 23 var( --remBase ) );
	}
	#form .agree span{
		grid-template-columns : calc( 25 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
	}
	#form .agree input:checked ~ span::after{
		left : 0;
		width : calc( 25 var( --remBase ) );
	}
	#form input[type="submit"]{
		width : calc( 260 var( --percentBase ) );
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 33 var( --remBase ) );
		font-size : calc( 18 var( --fontCoef ) );
	}
}

/* --------------------------------------------
CONFIFRM
--------------------------------------------- */
#mfp_phase_confirm table , #mfp_phase_confirm tbody , #mfp_phase_confirm tr , #mfp_phase_confirm th , #mfp_phase_confirm td{
	display : block;
}
#mfp_phase_confirm th{
	font-weight : 400;
	text-align : left;
}
#mfp_phase_confirm h4{
	text-align : center;
}
#mfp_phase_confirm #mfp_button_send{
	display : grid;
	place-items : center;
	margin-inline : auto;
	color : #161515;
	background-color : #fcdc02;
	border-radius : 100vmax;
}
#mfp_phase_confirm #mfp_button_cancel{
	display : block;
	width : fit-content;
	margin-inline : auto;
	text-align : center;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
@media print , screen and ( min-width : 750.02px ){
	#mfp_phase_confirm #mfp_phase_confirm_inner{
		margin-top : calc( 19 var( --remBase ) );
	}
	#mfp_phase_confirm table{
		width : calc( 1120 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 19 var( --remBase ) );
	}
	#mfp_phase_confirm h4{
		font-size : calc( 16 var( --fontCoef ) );
	}
	#mfp_phase_confirm th{
		font-size : calc( 16 var( --fontCoef ) );
	}
	#mfp_phase_confirm td{
		padding-left : 1em;
		margin-top : calc( 7 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
	}
	#mfp_phase_confirm tr + tr{
		margin-top : calc( 13 var( --remBase ) );
	}
	#mfp_phase_confirm #mfp_button_send{
		width : calc( 260 * 100% / 1120 );
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 33 var( --remBase ) );
		font-size : calc( 18 var( --fontCoef ) );
	}
	#mfp_phase_confirm #mfp_button_cancel{
		margin-top : calc( 12 var( --remBase ) );
		font-size : calc( 18 var( --fontCoef ) );
	}
}

/* --------------------------------------------
CONFIRM
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#mfp_phase_confirm{
		margin-top : calc( 57 var( --remBase ) );
	}
	#mfp_phase_confirm table{
		margin-top : calc( 57 var( --remBase ) );
	}
	#mfp_phase_confirm h4{
		font-size : 2.8rem;
	}
	#mfp_phase_confirm th{
		font-size : 2.8rem;
	}
	#mfp_phase_confirm td{
		padding-left : 1em;
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2.8rem;
	}
	#mfp_phase_confirm tr + tr{
		margin-top : calc( 30 var( --remBase ) );
	}
	#mfp_phase_confirm #mfp_button_send{
		width : calc( 340 var( --percentBase ) );
		height : calc( 60 var( --remBase ) );
		margin-top : calc( 77 var( --remBase ) );
		font-size : 2.6rem;
	}
	#mfp_phase_confirm #mfp_button_cancel{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 2.6rem;
	}
}

/* --------------------------------------------
THANKS
--------------------------------------------- */
#thanks{
	position : relative;
	overflow-x : clip;
}
#thanks::before{
	position : absolute;
	top : 0;
	z-index : -1;
	display : block;
	height : 100%;
	content : "";
	background-repeat : no-repeat;
	background-size : cover;
}
#thanks h2{
	font-weight : 400;
	text-align : center;
}
#thanks h2::after{
	display : block;
	margin-inline : auto;
	content : "";
	background-color : var( --primary );
}
#thanks > p{
	text-align : center;
}
@media screen and ( max-width : 750px ){
	#thanks{
		padding-top : calc( 85 var( --remBase ) );
		padding-bottom : calc( 123 var( --remBase ) );
	}
	#thanks::before{
		left : 0;
		width : 100%;
	}
	#thanks h2{
		font-size : 4rem;
	}
	#thanks h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#thanks > p{
		margin-top : calc( ( 38 - 13 ) var( --remBase ) );
		font-size : 3.4rem;
		line-height : calc( 60 / 34 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#thanks{
		padding-top : calc( 77 var( --remBase ) );
		padding-bottom : calc( 54 var( --remBase ) );
	}
	#thanks h2{
		font-size : calc( 40 var( --fontCoef ) );
	}
	#thanks h2::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#thanks > p{
		margin-top : calc( ( 34 - 7.5 ) var( --remBase ) );
		font-size : calc( 30 var( --fontCoef ) );
		line-height : calc( 45 / 30 );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#thanks::before{
		left : 0;
		width : calc( 1807 * 100% / 1440 );
	}
}
@media print , screen and ( min-width : 1480px ){
	#thanks::before{
		left : calc( 50% - 720px );
		width : 1807px;
	}
}
.thanks_text{
	min-height : 50vh;
	padding : 200px 0 ;
	text-align : center;
}
.thanks_text p{
	margin-top : 3em;
}
@media screen and ( max-width : 750px ){
	.thanks_text p{
		font-size : 2.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.thanks_text p{
		font-size : calc( 16 var( --fontCoef ) );
	}
}
.policy-text{
	min-height : 50vh;
	padding : 50px 0 ;
}
.policy-text p{
	margin-top : 1em;
	line-height : 1.7;
}
@media screen and ( max-width : 750px ){
	.policy-text p{
		font-size : 2.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.policy-text p{
		font-size : calc( 16 var( --fontCoef ) );
	}
}
.mfp_err{
	color : palevioletred;
}