@charset "UTF-8";

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact{
	background-color : #f5faff;
	.hgroup01{
		h2{
			&::before{
				font-weight : 700;
				color : var( --primary );
				text-align : center;
				content : attr( data-before );
			}
		}
		p{
			em{
				font-weight : 700;
				color : var( --primary );
			}
		}
	}
	dl{
		margin-top : calc( 30 * var( --remBase ) );
	}
	dt label{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		font-size : 1.6rem;
		font-weight : 700;
		line-height : 1.2;
		span{
			font-weight : 400;
		}
		&::before{
			display : block;
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	dd{
		margin-top : calc( 5 * var( --remBase ) );
	}
	dd + dt{
		margin-top : calc( 15 * var( --remBase ) );
	}
	:is( input[type="text"] , input[type="email"] , select , textarea  ){
		width : 100%;
		font-size : 1.6rem;
		font-weight : 700;
		line-height : 1.6;
		background-color : white;
		border-color : var( --primary );
		border-style : solid;
		border-width : calc( 2 * var( --remBase ) );
		&::placeholder{
			color : #a8a8a8;
		}
	}
	:is( input[type="text"] , input[type="email"] , select  ){
		height : calc( 56 * var( --remBase ) );
	}
	.submits{
		margin-top : calc( 15 * var( --remBase ) );
	}
	input[type="submit"]{
		display : block;
		width : calc( 178 * 100% / 315 );
		height : calc( 49 * var( --remBase ) );
		margin-inline : auto;
		font-size : 1.8rem;
		font-weight : 700;
		line-height : 1.6;
		color : white;
		background-color : #ffa800;
		border-radius : 100vmax;
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		.hgroup01{
			h2{
				font-size : 2rem;
				line-height : 1.2;
				white-space : nowrap;
				&::before{
					margin-bottom : calc( 10 * var( --remBase ) );
					font-size : 2rem;
					line-height : 1.7;
				}
			}
		}
		:is( input[type="text"] , input[type="email"] , select , textarea  ){
			padding-inline : calc( 20 * var( --percentBase ) );
			border-radius : calc( 5 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		position : relative;
		width : 100%;
		max-width : 750px;
		padding-block : calc( 80 * var( --remBase ) );
		margin-inline : auto;
		overflow-x : clip;
		background-color : #f5faff;
		.hgroup01{
			h2::before{
				margin-bottom : calc( 10 * var( --remBase ) );
				font-size : 2.6rem;
				line-height : 1.7;
			}
		}
		:where( dl , .submits ){
			width : calc( 375 * 100% / 750 );
			padding-inline : calc( 30 * 100% / 750 );
			margin-inline : auto;
		}
		:is( input[type="text"] , input[type="email"] , select , textarea  ){
			padding-inline : calc( 30 * 100% / 315 );
			border-radius : calc( 15 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
PRIVACY
--------------------------------------------- */
#privacy{
	h2{
		line-height : 1.4;
		text-align : center;
	}
	p , li{
		line-height : 1.6;
	}
	h2 + p{
		margin-top : 2em;
	}
	:where( p , ul , ol ) + h3{
		margin-top : 2em;
	}
	h3 + :where( p , ul , ol ){
		margin-top : 1.5em;
	}
	ol > li{
		position : relative;
		padding-left : 1.5em;
		counter-increment : no;
		&::before{
			position : absolute;
			top : 0;
			left : 0;
			white-space : pre;
			content : counter( no ) ". ";
		}
	}
	li + li{
		margin-top : 1em;
	}
	:where( ol , ul ) + p , p + :where( ol , ul ){
		margin-top : 1em;
	}
	p + h2{
		margin-top : 4em;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 100 * var( --remBase ) );
		h2{
			font-size : 1.6rem;
		}
		h3{
			font-size : 1.2rem;
		}
		p , li{
			font-size : 1rem;
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 100 * var( --remBase ) );
		h2{
			font-size : 2.4rem;
		}
		h3{
			font-size : 2rem;
		}
		p , li{
			font-size : 1.6rem;
		}
	}
}