@charset "UTF-8";

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
:is( .wrapEntry , .wrapRequest , .wrapSupport ){
	padding-bottom : calc( 80 var( --remBase ) );
}

/* --------------------------------------------
ENTRY
--------------------------------------------- */
:is( #entry , #request , #support ){
	padding-inline : calc( 155 * 100% / 1290 );
}
:is( #entry , #request , #support ) > p{
	margin-bottom : calc( 39 var( --remBase ) );
	font-size : 2rem;
	line-height : 1.4;
	color : black;
}
:is( #entry , #request , #support ) h1{
	display : grid;
	place-items : center;
	height : calc( 68 var( --remBase ) );
	font-size : 3rem;
	font-weight : 700;
	color : white;
	text-indent : calc( .39 * var( --remBase ) );
	letter-spacing : calc( .39 * var( --remBase ) );
	background-color : var( --primary );
	border-radius : calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) ) 0 0;
}
:is( #entry , #request , #support ) .box{
	padding-inline : calc( 100 * 100% / 980 );
	padding-top : calc( 29 var( --remBase ) );
	padding-bottom : calc( 46 var( --remBase ) );
	background-color : #fff;
}
:is( #entry , #request , #support ) h2{
	font-size : calc( 30 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 35 / 30 );
	letter-spacing : calc( .39 * var( --remBase ) );
}
:is( #entry , #request , #support ) .info{
	display : grid;
	grid-template-columns : calc( 104 * 100% / 780 ) 1fr;
	margin-top : calc( 17 var( --remBase ) );
}
:is( #entry , #request , #support ) .info :where( dt,dd ){
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 26 / 16 );
}
:is( #entry , #request , #support ) :where( .inputs , .confirm ){
	display : grid;
	grid-template-columns : calc( 220 * 100% / 780 ) 1fr;
	row-gap : calc( 24 var( --remBase ) );
	margin-top : calc( 36 var( --remBase ) );
}
:is( #entry , #request , #support ) .inputs{
	display : grid;
	grid-template-columns : calc( 220 * 100% / 780 ) 1fr;
	row-gap : calc( 24 var( --remBase ) );
	margin-top : calc( 36 var( --remBase ) );
}
:is( #entry , #request , #support ) .inputs > dt label{
	padding-top : calc( 7.5 var( --remBase ) );
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 35 / 16 );
	letter-spacing : .208px;
}
:is( #entry , #request , #support ) .inputs > dt label.required{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 15 * 100% / 220 );
	align-items : center;
	justify-content : start;
}
:is( #entry , #request , #support ) .inputs > dt label.required::after{
	display : grid;
	place-items : center;
	height : calc( 24 var( --remBase ) );
	padding-left : calc( 9 var( --remBase ) );
	padding-right : calc( 10 var( --remBase ) );
	font-size : 1.2rem;
	font-weight : 700;
	color : white;
	content : "必須";
	background-color : #b90000;
	border-radius : 100vmax;
}
:is( #entry , #request , #support ) .inputs > dd{
	position : relative;
}
:is( #entry , #request , #support ) .inputs > dd .error{
	position : absolute;
	top : 100%;
	left : 0;
}
:is( #entry , #request , #support ) :where( input[type="text"] , input[type="tel"] , input[type="email"] , select , textarea ){
	width : 100%;
	height : calc( 50 var( --remBase ) );
	padding-inline : calc( 18 var( --remBase ) );
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 35 / 16 );
	letter-spacing : calc( .208 * var( --remBase ) );
	background-color : #eceff0;
	border : solid 1px #c6cbcc;
	border-radius : calc( 3 var( --remBase ) );
}
:is( #entry , #request , #support ) :where( input[type="text"] , input[type="tel"] , input[type="email"] , select , textarea )::placeholder{
	color : #b1b2b2;
}
:is( #entry , #request , #support ) :where( input[type="text"] , input[type="tel"] , input[type="email"] , select ){
	height : calc( 50 var( --remBase ) );
}
:is( #entry , #request , #support ) .years{
	display : grid;
	grid-template-columns : calc( 150 * 100% / 560 ) auto;
	column-gap : calc( 6 * 100% / 560 );
	align-items : end;
	justify-content : start;
}
:is( #entry , #request , #support ) .years span{
	padding-bottom : calc( 4 var( --remBase ) );
	margin-left : calc( 6 * 100% / 560 );
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1;
}
:is( #entry , #request , #support ) .zips{
	display : grid;
	grid-template-columns : calc( 80 * 100% / 560 ) calc( 13 * 100% / 560 ) calc( 100 * 100% / 560 );
	column-gap : calc( 10 * 100% / 560 );
	align-items : center;
	justify-content : start;
}
:is( #entry , #request , #support ) .zips::before{
	display : block;
	grid-row : 1;
	grid-column : 2;
	height : calc( 2 var( --remBase ) );
	content : "";
	background-color : #707070;
}
:is( #entry , #request , #support ) .zips input:nth-of-type( 1 ){
	grid-row : 1;
	grid-column : 1;
}
:is( #entry , #request , #support ) .zips input:nth-of-type( 2 ){
	grid-row : 1;
	grid-column : 3;
}
:is( #entry , #request , #support ) .adresses > div{
	display : grid;
	align-items : center;
	justify-content : start;
}
:is( #entry , #request , #support ) .adresses > div + div{
	margin-top : calc( 10 var( --remBase ) );
}
:is( #entry , #request , #support ) .adresses > div label{
	padding-top : calc( 7.5 var( --remBase ) );
	font-size : calc( 16 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 35 / 16 );
}
:is( #entry , #request , #support ) .adresses > div:first-of-type{
	grid-template-columns : calc( 83 * 100% / 560 ) calc( 165 * 100% / 560 ) 1fr;
}
:is( #entry , #request , #support ) .adresses > div:not( :first-of-type ){
	grid-template-columns : calc( 83 * 100% / 560 ) 1fr;
}
:is( #entry , #request , #support ) textarea{
	height : calc( 250 var( --remBase ) );
	padding-block : clc( 18 var( --remBase ) );
}
:is( #entry , #request , #support ) .agreements{
	margin-top : calc( 33 var( --remBase ) );
}
:is( #entry , #request , #support ) .agreements p{
	font-size : calc( 16 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 35 / 16 );
	text-align : center;
	text-indent : calc( .208 * var( --remBase ) );
	letter-spacing : calc( .208 * var( --remBase ) );
}
:is( #entry , #request , #support ) .agreements p a{
	color : var( --primary );
}
:is( #entry , #request , #support ) .agreements label{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 16 * 100% / 780 );
	align-items : center;
	justify-content : center;
	margin-top : calc( 21 var( --remBase ) );
	font-size : calc( 20 var( --remBase ) );
	line-height : 1.35;
}
:is( #entry , #request , #support ) .agreements label input{
	height : calc( 20 var( --remBase ) );
	aspect-ratio : 1;
	margin : 0;
}
:is( #entry , #request , #support ) .agreements .error{
	text-align : center;
}
:is( #entry , #request , #support ) .box > input[type="submit"]{
	display : grid;
	place-items : center;
	width : calc( 350 * 100% / 780 );
	height : calc( 65 var( --remBase ) );
	margin-inline : auto;
	margin-top : calc( 30 var( --remBase ) );
	font-size : 2.5rem;
	font-weight : 700;
	color : #fff;
	text-indent : calc( 1.5 * var( --remBase ) );
	letter-spacing : calc( 1.5 * var( --remBase ) );
	background-color : #fb4c6d;
	filter : drop-shadow( 0 2px 0 #b1364d );
	border-radius : calc( 6 var( --remBase ) );
}
:is( #entry , #request , #support ) .hiddens{
	display : none;
}
:is( #entry , #request , #support ) .confirm > dt , :is( #entry , #request , #support ) .confirm > dd{
	font-size : 1.6rem;
	line-height : 1.8;
}
:is( #entry , #request , #support ) .submits{
	display : grid;
	grid-template-columns : auto calc( 350 * 100% / 780 );
	column-gap : calc( 32 * 100% / 780 );
	align-items : center;
	justify-content : center;
	margin-top : calc( 30 var( --remBase ) );
}
:is( #entry , #request , #support ) .submits input[name="back"]{
	padding : 0;
	margin : 0;
	font-size : 1.8rem;
	font-weight : 700;
	background-color : transparent;
	border : 0;
}
:is( #entry , #request , #support ) .submits input[name="Submit"]{
	display : grid;
	place-items : center;
	height : calc( 65 var( --remBase ) );
	font-size : 2.5rem;
	font-weight : 700;
	color : #fff;
	text-indent : calc( 1.5 * var( --remBase ) );
	letter-spacing : calc( 1.5 * var( --remBase ) );
	background-color : #fb4c6d;
	filter : drop-shadow( 0 2px 0 #b1364d );
	border-radius : calc( 6 var( --remBase ) );
}
:is( #entry , #request , #support ) .error{
	display : block;
	width : 100%;
	font-size : 1.4rem;
	line-height : 1.2;
	color : red;
}
:is( #entry , #request , #support ) dd .error ~ .error{
	opacity : 0;
}