@charset "UTF-8";

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#mailformpro{
	font-family : zen-kaku-gothic-new , sans-serif;
	font-weight : 500;
}
#mailformpro .hline{
	position : relative;
}
#mailformpro .hline::after{
	border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px 100% );
}
#mailformpro dt label{
	display : block;
}
#mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
	width : 100%;
	padding-inline : calc( .75em );
	background-color : #e6e6e6;
	border : solid 1px #808080;
}
#mailformpro .acceptance > dd{
	display : contents;
}
#mailformpro .acceptance #privacy{
	grid-row : 1;
}
#mailformpro .acceptance > dt{
	grid-row : 2;
	grid-column : 1;
}
#mailformpro .acceptance dd label{
	grid-row : 2;
	grid-column : 2;
}
#mailformpro .checkbox input{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#mailformpro .checkbox span{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	cursor : pointer;
}
#mailformpro .checkbox span::before{
	font-size : 0;
	content : "";
	background-color : #e6e6e6;
	border : solid 1px #808080;
}
#mailformpro .checkbox input:checked ~ span::after{
	position : absolute;
	top : 0;
	left : 0;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/check.svg" ) center / contain no-repeat;
}
#mailformpro button[type="submit"]{
	display : grid;
	place-items : center;
	background-color : #e6e6e6;
	border : solid 1px #808080;
}
@media screen and ( width <= 750px ){
	#mailformpro{
		margin-bottom : calc( 150 var( --remBase ) );
	}
	#mailformpro > dl > div + div{
		margin-top : calc( 50 var( --remBase ) );
	}
	#mailformpro > dl > div > dt label{
		font-size : 1.8rem;
		font-weight : 700;
	}
	#mailformpro > dl > div > dd{
		margin-top : calc( 16 var( --remBase ) );
	}
	#mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
		font-size : 1.8rem;
	}
	#mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] ){
		height : calc( 68 var( --remBase ) );
	}
	#mailformpro .acceptance{
		display : grid;
		grid-template-rows : calc( 350 var( --remBase ) ) auto;
		grid-template-columns : calc( 323 var( --percentBase ) ) 1fr;
		row-gap : calc( 114 var( --remBase ) );
		margin-top : calc( 68 var( --remBase ) );
	}
	#mailformpro .acceptance #privacy{
		grid-column : 1/3;
	}
	#mailformpro .checkbox span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 10 var( --remBase ) );
		font-size : 1.8rem;
	}
	#mailformpro .checkbox span::before{
		height : calc( 24 var( --remBase ) );
	}
	#mailformpro .checkbox input:checked ~ span::after{
		width : calc( 24 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
	}
	#mailformpro button[type="submit"]{
		width : 100%;
		height : calc( 80 var( --remBase ) );
		margin-top : calc( 118 var( --remBase ) );
		font-size : 1.9rem;
	}
}
@media print , screen and ( width > 750px ){
	#mailformpro{
		margin-bottom : calc( 148 var( --remBase ) );
	}
	#mailformpro > dl > div{
		display : grid;
		grid-template-columns : calc( 280 var( --percentBase ) ) calc( 590 var( --percentBase ) );
		column-gap : calc( 30 var( --percentBase ) );
	}
	#mailformpro > dl > div + div{
		margin-top : calc( 50 var( --remBase ) );
	}
	#mailformpro > dl > div > dt label{
		font-size : 1.7rem;
	}
	#mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
		font-size : 1.7rem;
	}
	#mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] ){
		height : calc( 60 var( --remBase ) );
	}
	#mailformpro textarea{
		height : calc( 309 var( --remBase ) );
		line-height : calc( 26 / 17 );
	}
	#mailformpro .acceptance{
		position : relative;
		grid-template-rows : calc( 309 var( --remBase ) ) auto;
		row-gap : calc( 74 var( --remBase ) );
		align-items : start;
	}
	#mailformpro .acceptance::after{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
		pointer-events : none;
		content : "";
		border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px 100% );
		border-image-slice : fill 0;
		border-image-outset : 0 100vw 0 100vw;
	}
	#mailformpro .acceptance > dd{
		display : contents;
	}
	#mailformpro .acceptance #privacy{
		grid-column : 2;
	}
	#mailformpro .checkbox span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 10 var( --remBase ) );
		font-size : 1.7rem;
	}
	#mailformpro .checkbox span::before{
		height : calc( 24 var( --remBase ) );
	}
	#mailformpro .checkbox input:checked ~ span::after{
		width : calc( 24 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
	}
	#mailformpro button[type="submit"]{
		width : calc( 590 var( --percentBase ) );
		height : calc( 70 var( --remBase ) );
		margin-top : calc( 76 var( --remBase ) );
		margin-left : calc( 310 var( --percentBase ) );
		font-size : 1.7rem;
	}
}
#privacy{
	height : 100%;
	overflow-y : auto;
	border : solid 1px black;
}
#privacy :where( p , h2 , dt , dd , li li ){
	font-weight : 500;
}
#privacy > ul + p{
	margin-top : 1em;
}
#privacy dl{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	margin-top : 1em;
}
@media screen and ( width <= 750px ){
	#privacy{
		padding-block : calc( ( 30 - 5 ) var( --remBase ) );
		padding-inline : calc( 30 var( --percentBase ) );
	}
	#privacy :where( p , h2 , dt , dd , li li ){
		font-size : 2rem;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	#privacy{
		padding-block : calc( ( 25 - 2 ) var( --remBase ) );
		padding-inline : calc( 28 * 100% / 590 );
	}
	#privacy :where( p , h2 , dt , dd , li li ){
		font-size : 1.7rem;
		line-height : calc( 21 / 17 );
	}
}

/* --------------------------------------------
CONFIRM
--------------------------------------------- */
#mfp_phase_confirm h4{
	text-align : center;
}
#mfp_phase_confirm .mfp_buttons{
	position : relative;
}
#mfp_phase_confirm .mfp_buttons::after{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	pointer-events : none;
	content : "";
	border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px 100% );
	border-image-slice : fill 0;
	border-image-outset : 0 100vw 0 100vw;
}
@media screen and ( width <= 750px ){
	#mfp_phase_confirm{
		margin-bottom : calc( 150 var( --remBase ) );
	}
	#mfp_phase_confirm h4{
		font-size : 1.8rem;
	}
	#mfp_phase_confirm .mfp_buttons{
		margin-top : calc( 50 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#mfp_phase_confirm{
		margin-bottom : calc( 148 var( --remBase ) );
	}
	#mfp_phase_confirm h4{
		font-size : 1.7rem;
	}
	#mfp_phase_confirm .mfp_buttons{
		display : grid;
		grid-template-columns : calc( 280 var( --percentBase ) ) calc( 30 var( --percentBase ) ) calc( 280 var( --percentBase ) );
		align-items : start;
		justify-content : center;
		margin-top : calc( 50 var( --remBase ) );
	}
}
#mfp_confirm_table table , #mfp_confirm_table tbody{
	display : block;
}
#mfp_confirm_table tr{
	position : relative;
}
#mfp_confirm_table tr::after{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	pointer-events : none;
	content : "";
	border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px 100% );
	border-image-slice : fill 0;
	border-image-outset : 0 100vw 0 100vw;
}
#mfp_confirm_table th , #mfp_confirm_table td{
	display : block;
	vertical-align : top;
}
#mfp_confirm_table th{
	text-align : left;
}
@media screen and ( width <= 750px ){
	#mfp_confirm_table{
		margin-top : calc( 40 var( --remBase ) );
	}
	#mfp_confirm_table tr{
		display : block;
	}
	#mfp_confirm_table tr + tr{
		margin-top : calc( 50 var( --remBase ) );
	}
	#mfp_confirm_table th{
		font-size : 1.8rem;
	}
	#mfp_confirm_table td{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
	}
}
@media print , screen and ( width > 750px ){
	#mfp_confirm_table{
		width : calc( 900 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#mfp_confirm_table tr{
		display : grid;
		grid-template-columns : calc( 280 * 100% / 900 ) calc( 590 * 100% / 900 );
		column-gap : calc( 30 * 100% / 900 );
	}
	#mfp_confirm_table tr + tr{
		margin-top : calc( ( 50 - 4.5 ) var( --remBase ) );
	}
	#mfp_confirm_table th , #mfp_confirm_table td{
		font-size : 1.7rem;
		font-weight : 500;
		line-height : calc( 26 / 17 );
	}
	#mfp_confirm_table th::before , #mfp_confirm_table td::before{
		display : block;
		margin-top : calc( ( -1lh + 1em ) / 2 );
		content : "";
	}
}
#mfp_button_send , #mfp_button_cancel{
	display : grid;
	place-items : center;
	width : 100%;
	font-weight : 700;
	border : solid 1px #808080;
}
@media screen and ( width <= 750px ){
	#mfp_button_send , #mfp_button_cancel{
		height : calc( 80 var( --remBase ) );
		font-size : 2rem;
	}
}
@media print , screen and ( width > 750px ){
	#mfp_button_send , #mfp_button_cancel{
		height : calc( 70 var( --remBase ) );
		font-size : 1.7rem;
	}
}
#mfp_button_cancel{
	background-color : white;
}
#mfp_button_send{
	background-color : #e6e6e6;
}

/* --------------------------------------------
THANKS
--------------------------------------------- */
#thanks{
	border-block : 1px #ccc solid;
}
#thanks p{
	margin-inline : auto;
	background-color : white;
}
@media screen and ( width <= 750px ){
	#thanks{
		margin-bottom : calc( 100 var( --remBase ) );
	}
	#thanks p{
		width : calc( 590 var( --percentBase ) );
		padding-block : calc( 40 var( --remBase ) );
		font-size : 1.8rem;
		line-height : calc( 26 / 18 );
	}
}
@media print , screen and ( width > 750px ){
	#thanks{
		margin-bottom : calc( 100 var( --remBase ) );
	}
	#thanks p{
		width : calc( 1150 var( --percentBase ) );
		padding-block : calc( 40 var( --remBase ) );
		font-size : 1.7rem;
		line-height : calc( 26 / 17 );
	}
}