@charset "UTF-8";

/* --------------------------------------------
SPIRIT
--------------------------------------------- */
article.spirit hgroup{
	display : contents;
}
article.spirit .sincerely hgroup p{
	background-image : url( "../images/spirit/bg01.webp" );
}
article.spirit .imagine hgroup p{
	background-image : url( "../images/spirit/bg02.webp" );
}
article.spirit .bravery hgroup p{
	background-image : url( "../images/spirit/bg03.webp" );
}
article.spirit .challenge hgroup p{
	background-image : url( "../images/spirit/bg04.webp" );
}
article.spirit .passion hgroup p{
	background-image : url( "../images/spirit/bg05.webp" );
}
article.spirit hgroup p{
	display : grid;
	grid-column : 1/-1;
	place-items : center;
	font-family : Roboto , sans-serif;
	font-weight : 800;
	line-height : 1.2;
	color : white;
	text-align : center;
	text-indent : .03em;
	letter-spacing : .03em;
	background-repeat : no-repeat;
	background-position : center;
	background-size : auto 100%;
}
article.spirit hgroup h2{
	font-weight : 700;
	line-height : 1.3;
	text-align : center;
}
article.spirit section > p{
	line-height : 2;
	text-align : center;
}
@media screen and ( width < 768px ){
	article.spirit section{
		padding-bottom : calc( 66 * var( --remBase ) );
	}
	article.spirit hgroup p{
		height : calc( 280 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
	}
	article.spirit hgroup h2{
		grid-column : 2;
		margin-top : calc( 40 * var( --remBase ) );
		font-size : calc( 22 * var( --remBase ) );
	}
	article.spirit section > p{
		font-size : calc( 14 * var( --remBase ) );
	}
	article.spirit hgroup + p{
		margin-top : calc( 32 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	article.spirit section{
		padding-bottom : calc( 160 * var( --remBase ) );
	}
	article.spirit hgroup p{
		height : calc( 600 * var( --remBase ) );
		font-size : calc( 34 * var( --remBase ) );
	}
	article.spirit hgroup h2{
		grid-column : 3;
		margin-top : calc( 72 * var( --remBase ) );
		font-size : calc( 25 * var( --remBase ) );
	}
	article.spirit section > p{
		font-size : var(--font-honmon);
	}
	article.spirit hgroup + p{
		margin-top : calc( 64 * var( --remBase ) );
	}
}

/* --------------------------------------------
MESSAGE
--------------------------------------------- */
article.message p , article.message dl{
	line-height : 2;
}
article.message p{
	text-align : center;
}
article.message p + p{
	margin-top : 2lh;
}
article.message dl{
	display : flex;
	flex-wrap : wrap;
	grid-auto-flow : column;
	column-gap : 1em;
	align-items : center;
	justify-content : center;
	margin-top : 1lh;
}
article.message dd{
	display : contents;
}
article.message dd span:nth-of-type( 2 ){
	width : 100%;
	text-align : right;
}
@media screen and ( width < 768px ){
	article.message{
		padding-bottom : calc( 90 * var( --remBase ) );
	}
	article.message :where( p , dl ){
		font-size : calc( 14 * var( --remBase ) );
	}
	article.message dd span:nth-of-type( 2 ){
		margin-top : calc( 8 * var( --remBase ) );
	}
	article.message dd span:nth-of-type( 2 ) img{
		height : calc( 63 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	article.message{
		padding-bottom : calc( 60 * var( --remBase ) );
	}
	article.message :where( p , dl ){
		font-size : var(--font-honmon);
	}
	article.message dd span:nth-of-type( 2 ){
		margin-top : calc( 16 * var( --remBase ) );
	}
	article.message dd span:nth-of-type( 2 ) img{
		height : calc( 84 * var( --remBase ) );
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
section.contact{
	padding-bottom : calc( 160 * var( --remBase ) );
}
section.contact .wrap > p{
	line-height : 2;
}
@media screen and ( width < 768px ){
	section.contact .wrap > p{
		font-size : calc( 14 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	section.contact .wrap > p{
		font-size : font-size : var(--font-honmon);
		text-align : center;
	}
}
section.confirm{
	padding-bottom : calc( 160 * var( --remBase ) );
}
section.thanks{
	padding-bottom : calc( 160 * var( --remBase ) );
}
section.thanks p{
	line-height : 2;
}
section.thanks p{
	text-align : center;
}
section.thanks p + p{
	margin-top : 2lh;
}
@media screen and ( width < 768px ){
	section.thanks{
		padding-bottom : calc( 90 * var( --remBase ) );
	}
	section.thanks p{
		font-size : calc( 14 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	section.thanks p{
		font-size : var(--font-honmon);
	}
}