@charset "UTF-8";

/* --------------------------------------------
PRIVACY
-------------------------------------------- */
@media screen and ( width <= 750px ){
	:where( #about , #profile , #law , #privacy ){
		padding-top : calc( 40 var( --remBase ) );
	}
	:where( #about , #profile , #law , #privacy ) .title01{
		margin-bottom : calc( 48 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #about , #profile , #law , #privacy ){
		padding-top : calc( 120 var( --remBase ) );
	}
	:where( #about , #profile , #law , #privacy ) .title01{
		margin-bottom : calc( 64 var( --remBase ) );
	}
}
#about h3{
	font-weight : 600;
	line-height : 1.5;
}
#about h3:not( :first-of-type ){
	margin-top : 2lh;
}
#about p , #about li{
	line-height : 1.7;
}
#about li{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
	justify-content : start;
}
@media screen and ( width <= 750px ){
	#about h3{
		margin-bottom : calc( 12 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#about p , #about li{
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	#about > div{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#about h3{
		margin-bottom : calc( 15 var( --remBase ) );
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	#about p , #about li{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#about > div{
		margin-top : calc( 10 var( --remBase ) );
	}
}
#profile .box{
	display : grid;
	align-items : center;
	justify-content : center;
}
#profile dt{
	font-weight : 600;
}
#profile dt , #profile dd , #profile p{
	line-height : 1.7;
}
#profile > p + p{
	margin-top : 1lh;
}
@media screen and ( width <= 750px ){
	#profile .box{
		grid-template-columns : 1fr auto;
		column-gap : calc( 8 var( --percentBase ) );
		margin-bottom : calc( 16 var( --remBase ) );
	}
	#profile .box img{
		height : calc( 120 var( --remBase ) );
	}
	#profile dt{
		font-size : 1.4rem;
	}
	#profile dd{
		font-size : 1.1rem;
	}
	#profile p{
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	#profile .box{
		grid-template-columns : calc( 320 * 100% / 890 ) auto;
		column-gap : calc( 40 * 100% / 890 );
		margin-bottom : calc( 64 var( --remBase ) );
	}
	#profile .box img{
		height : calc( 240 var( --remBase ) );
	}
	#profile dt , #profile dd , #profile p{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#profile dt{
		margin-bottom : calc( 4 var( --remBase ) );
	}
}
#law dt , #law dd{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#law dt , #law dd{
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	#law dt{
		padding-top : calc( 12 var( --remBase ) );
		font-weight : 500;
	}
	#law dd{
		padding-bottom : calc( 12 var( --remBase ) );
		margin-top : calc( 12 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
}
@media print , screen and ( width > 750px ){
	#law dl{
		display : grid;
		grid-template-columns : calc( 240 * 100% / 890 ) 1fr;
	}
	#law dt , #law dd{
		padding-block : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		border-bottom : solid 1px #d9d9d9;
	}
}
#privacy > p{
	margin-bottom : 1lh;
}
#privacy h3{
	font-weight : 600;
	line-height : 1.5;
}
#privacy h4{
	font-weight : 500;
}
#privacy p , #privacy li{
	line-height : 1.7;
}
#privacy > ul > li{
	counter-increment : no;
}
#privacy > ul > li > h3::before{
	content : counter( no ) "．";
}
#privacy dl{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : end;
}
#privacy dt{
	padding-right : 1em;
}
#privacy ul ul li{
	counter-increment : no02;
}
#privacy ul ul li:not( :has( h4 ) ){
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
}
#privacy ul ul li:not( :has( h4 ) )::before{
	width : 1.75em;
	text-align : center;
	content : counter( no02 , upper-roman ) "．";
}
#privacy ul ul li:has( h4 ) h4::before{
	width : 1.75em;
	text-align : center;
	content : counter( no02 , upper-roman ) "．";
}
@media screen and ( width <= 750px ){
	#privacy{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#privacy > ul{
		margin-bottom : calc( 48 var( --remBase ) );
	}
	#privacy > ul > li + li{
		margin-top : 1lh;
	}
	#privacy ul ul{
		margin-top : .5lh;
	}
	#privacy h3{
		margin-bottom : calc( 4 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.3rem , var( --max ) );
	}
	#privacy p , #privacy li , #privacy h4 , #privacy dt , #privacy dd{
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	#privacy h4{
		margin-bottom : calc( 4 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#privacy{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#privacy > ul{
		margin-bottom : calc( 80 var( --remBase ) );
	}
	#privacy > ul > li + li{
		margin-top : 1lh;
	}
	#privacy ul ul{
		margin-top : .5lh;
	}
	#privacy h3{
		margin-bottom : calc( 4 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.7rem , var( --max ) );
	}
	#privacy p , #privacy li , #privacy h4 , #privacy dt , #privacy dd{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#privacy h4{
		margin-bottom : calc( 4 var( --remBase ) );
	}
}

/* --------------------------------------------
CONTACT ,  APPLY
--------------------------------------------- */
form#mailformpro{
	/* @mixin reset-MailFormPro; */
}
@media print , screen and ( width > 750px ){
	body:has( #main > #contact , #main > #apply ){
		display : grid;
		grid-template-rows : 1fr auto;
		min-height : 100dvh;
	}
	body:has( #main > #contact , #main > #apply ) #footer{
		border-top : solid 1px #808080;
	}
}
:is( #contact , #apply ) .lede{
	line-height : 1.7;
	text-align : center;
}
:is( #contact , #apply ) dt label{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	font-weight : 500;
}
:is( #contact , #apply ) dt label::after{
	display : grid;
	place-items : center;
	padding-inline : 1em;
	font-weight : 400;
	color : white;
	text-align : center;
	text-indent : .01em;
	letter-spacing : .01em;
}
:is( #contact , #apply ) dt label.required::after{
	content : "必須";
	background-color : var( --orange );
}
:is( #contact , #apply ) dt label:not( .required )::after{
	content : "任意";
	background-color : var( --blue );
}
:is( #contact , #apply ) dd{
	position : relative;
}
:is( #contact , #apply ) :is( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
	width : 100%;
	padding-inline : 1em;
	line-height : 1.7;
	border : solid 1px #808080;
}
:is( #contact , #apply ) :is( input[type="text"] , input[type="email"] , input[type="tel"] , textarea )::placeholder{
	color : #808080;
}
:is( #contact , #apply ) textarea{
	padding-block : .75em;
}
:is( #contact , #apply ) .names ul{
	display : grid;
	grid-template-columns : repeat( 2 , 1fr );
	align-items : start;
	justify-content : space-between;
}
:is( #contact , #apply ) .names li{
	position : relative;
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : center;
	justify-content : start;
}
:is( #contact , #apply ) .names label{
	grid-row : 1;
}
:is( #contact , #apply ) .names input{
	grid-row : 1;
}
:is( #contact , #apply ) input[type="submit"]{
	display : grid;
	place-items : center;
	width : 100%;
	font-weight : 500;
	color : white;
	text-align : center;
	text-indent : .5em;
	letter-spacing : .5em;
	background-color : var( --blue );
}
:is( #contact , #apply ) .mfp_err{
	position : absolute;
	top : 100%;
	left : 0;
	width : 100%;
	line-height : 1.5;
	color : color-mix( in sRGB , red 80% , white );
}
:is( #contact , #apply ) .mfp_err + .mfp_err{
	margin-top : 1lh;
}
@media screen and ( width <= 750px ){
	:is( #contact , #apply ){
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 200 var( --remBase ) );
	}
	:is( #contact , #apply ) .lede{
		margin-top : calc( 24 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	:is( #contact , #apply ) form{
		margin-top : calc( 24 var( --remBase ) );
	}
	:is( #contact , #apply ) dt label{
		column-gap : calc( 8 var( --percentBase ) );
		font-size : 1.2rem;
	}
	:is( #contact , #apply ) dt label::after{
		height : calc( 20 var( --remBase ) );
		font-size : 1rem;
		border-radius : calc( 4 var( --remBase ) );
	}
	:is( #contact , #apply ) dd{
		margin-top : calc( 12 var( --remBase ) );
	}
	:is( #contact , #apply ) dd + dt{
		margin-top : calc( 36 var( --remBase ) );
	}
	:is( #contact , #apply ) :is( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
		font-size : 1.2rem;
		border-radius : calc( 4 var( --remBase ) );
	}
	:is( #contact , #apply ) :is( input[type="text"] , input[type="email"] , input[type="tel"] ){
		height : calc( 36 var( --remBase ) );
	}
	:is( #contact , #apply ) textarea{
		width : 100%;
		height : calc( 140 var( --remBase ) );
	}
	:is( #contact , #apply ) .names ul{
		column-gap : calc( 8 var( --percentBase ) );
	}
	:is( #contact , #apply ) .names li{
		column-gap : calc( 8 * 100% / 163.5 );
	}
	:is( #contact , #apply ) .names label{
		font-size : 1.2rem;
	}
	:is( #contact , #apply ) input[type="submit"]{
		height : calc( 48 var( --remBase ) );
		margin-top : calc( 12 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
		border-radius : calc( 4 var( --remBase ) );
	}
	:is( #contact , #apply ) .mfp_err{
		font-size : 1.2rem;
	}
}
@media print , screen and ( width > 750px ){
	:is( #contact , #apply ){
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 200 var( --remBase ) );
	}
	:is( #contact , #apply ) .lede{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 1.6rem;
	}
	:is( #contact , #apply ) form{
		margin-top : calc( 40 var( --remBase ) );
	}
	:is( #contact , #apply ) dt label{
		column-gap : calc( 16 * 100% / 680 );
		font-size : 1.6rem;
	}
	:is( #contact , #apply ) dt label::after{
		height : calc( 24 var( --remBase ) );
		font-size : 1.4rem;
		border-radius : calc( 4 var( --remBase ) );
	}
	:is( #contact , #apply ) dd{
		margin-top : calc( 24 var( --remBase ) );
	}
	:is( #contact , #apply ) dd + dt{
		margin-top : calc( 64 var( --remBase ) );
	}
	:is( #contact , #apply ) :is( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
		font-size : 1.6rem;
		border-radius : calc( 8 var( --remBase ) );
	}
	:is( #contact , #apply ) :is( input[type="text"] , input[type="email"] , input[type="tel"] ){
		height : calc( 44 var( --remBase ) );
	}
	:is( #contact , #apply ) textarea{
		width : 100%;
		height : calc( 280 var( --remBase ) );
	}
	:is( #contact , #apply ) .names ul{
		column-gap : calc( 16 * 100% / 680 );
	}
	:is( #contact , #apply ) .names li{
		column-gap : calc( 16 * 100% / 332 );
	}
	:is( #contact , #apply ) .names label{
		font-size : 1.6rem;
	}
	:is( #contact , #apply ) input[type="submit"]{
		height : calc( 56 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		border-radius : calc( 8 var( --remBase ) );
	}
	:is( #contact , #apply ) .mfp_err{
		font-size : 1.6rem;
	}
}
#apply .mails p{
	line-height : 1.5;
}
#apply .tels p{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : space-between;
	line-height : 1.5;
}
#apply .tels p span:nth-of-type( 2 ){
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : end;
}
#apply .tels p span:nth-of-type( 2 ) span{
	min-width : 1em;
	text-align : right;
}
@media screen and ( width <= 750px ){
	#apply .mails p{
		margin-block : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	#apply .tels p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
}
@media print , screen and ( width > 750px ){
	#apply .mails p{
		margin-block : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
	}
	#apply .tels p{
		margin-block : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media ( hover : hover ){
	:is( #contact , #apply ) input[type="submit"]:hover{
		filter : brightness( 1.1 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	:is( #contact , #apply ) input[type="submit"]{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
THANKS
--------------------------------------------- */
body:has( #thanks ){
	display : grid;
	grid-template-rows : 1fr auto;
	min-height : 100dvh;
}
body:has( #thanks ) #footer{
	border-top : solid 1px #808080;
}
#thanks .lede{
	line-height : 2;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#thanks{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 200 var( --remBase ) );
	}
	#thanks .lede{
		margin-top : calc( 32 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	#thanks{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 200 var( --remBase ) );
	}
	#thanks .lede{
		width : calc( 595 * 100% / 680 );
		margin-inline : auto;
		margin-top : calc( 80 var( --remBase ) );
		font-size : 1.8rem;
	}
}