@charset "UTF-8";

/* --------------------------------------------
STORY
--------------------------------------------- */
#story , body:has( #story ) #footerLinks{
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 820px ) / 2 ) , calc( 204 * var( --viewportBase ) ) );
	}
}
#story{
	.more{
		display : grid;
		grid-template-columns : auto auto 1fr;
		align-items : center;
		margin-inline : auto;
		&::after{
			display : block;
			height : 0;
			font-size : 0;
			content : "";
			border-top : dashed 1px currentColor;
		}
	}
	section{
		border-bottom : dashed 1px currentColor;
	}
	h2{
		font-weight : 500;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
		.title01 , .lede , .more , section{
			padding-inline : calc( 10 * var( --contentBase ) );
		}
		.lede{
			padding-block : calc( 10 * var( --remBase ) );
			margin-top : calc( 20 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 30 / 16 );
		}
		.more{
			margin-top : calc( 40 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 30 / 14 );
			+ section{
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		section{
			padding-top : calc( 10 * var( --remBase ) );
			padding-bottom : calc( 55 * var( --remBase ) );
			+ section{
				margin-top : calc( 54 * var( --remBase ) );
			}
		}
		h2{
			margin-top : calc( 13 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 26 / 18 );
		}
		h2 + p{
			margin-top : calc( 23 * var( --remBase ) );
		}
		section p{
			margin-top : calc( 13 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 26 / 14 );
		}
		.link01{
			margin-top : calc( 13 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 90 * var( --remBase ) );
		.lede{
			padding-block : calc( 10 * var( --remBase ) );
			margin-top : calc( 22 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
		}
		.more{
			margin-inline : calc( 10 * 100% / 820 );
			margin-top : calc( 68 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : 2.25;
			+ section{
				margin-top : calc( 57 * var( --remBase ) );
			}
		}
		section{
			padding-bottom : calc( 76 * var( --remBase ) );
			+ section{
				margin-top : calc( 74 * var( --remBase ) );
			}
		}
		h2{
			padding-block : calc( 10 * var( --remBase ) );
			margin-top : calc( 23 * var( --remBase ) );
			font-size : calc( 36 * var( --remBase ) );
			line-height : calc( 64 / 36 );
		}
		h2 + p{
			margin-top : calc( 23 * var( --remBase ) );
		}
		section p{
			padding-block : calc( 10 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
		}
		.link01{
			margin-inline : calc( 10 * 100% / 820 );
			margin-top : calc( ( 23 + 10 ) * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about , body:has( #about ) #footerLinks{
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 825px ) / 2 ) , calc( 201.5 * var( --viewportBase ) ) );
	}
}
#about{
	@media screen and ( width <= 768px ){
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
		.title01 , #about01 , #about03 , #about04{
			padding-inline : calc( 51 * var( --viewportBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 70 * var( --remBase ) );
		padding-bottom : calc( 90 * var( --remBase ) );
		.title01 , #about01 , #about03 , #about04{
			padding-inline : calc( 10 * 100% / 825 );
		}
	}
}
#about01{
	h2{
		font-family : Barlow , sans-serif;
		text-align : center;
	}
	.texts{
		padding-block : calc( 10 * var( --remBase ) );
	}
	p + p{
		margin-top : 1lh;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 70 * var( --remBase ) );
		h2{
			img{
				height : calc( 150 * var( --remBase ) );
			}
		}
		.texts{
			margin-top : calc( 80 * var( --remBase ) );
		}
		p{
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 30 / 16 );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 120 * var( --remBase ) );
		h2{
			img{
				height : calc( 374 * var( --remBase ) );
			}
		}
		.texts{
			margin-top : calc( 94 * var( --remBase ) );
		}
		p{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
		}
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact , body:has( #contact ) #footerLinks{
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 800px ) / 2 ) , calc( 214 * var( --viewportBase ) ) );
	}
}
#contact{
	@media screen and ( width <= 768px ){
		padding-inline : calc( 51 * var( --viewportBase ) );
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 50 * var( --remBase ) );
		> p{
			&:first-of-type{
				margin-top : calc( 20 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 30 / 16 );
			}
		}
		.link02{
			width : 100%;
			margin-top : calc( 45 * var( --remBase ) );
		}
		> p{
			&:nth-of-type( 2 ){
				margin-top : calc( 45 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 26 / 14 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 70 * var( --remBase ) );
		padding-bottom : calc( 93 * var( --remBase ) );
		> p{
			&:first-of-type{
				margin-top : calc( 47 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 2;
			}
		}
		.link02{
			width : calc( 182 * 100% / 800 );
			margin-top : calc( 45 * var( --remBase ) );
		}
		> p{
			&:nth-of-type( 2 ){
				margin-top : calc( 45 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : 2.25;
			}
		}
	}
}

/* --------------------------------------------
PRIVACY
--------------------------------------------- */
#privacy , body:has( #privacy ) #footerLinks{
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 800px ) / 2 ) , calc( 214 * var( --viewportBase ) ) );
	}
}
#privacy{
	h1 , h2{
		font-weight : 500;
	}
	address{
		font-style : normal;
	}
	> ul{
		margin-top : 1lh;
		> li + li{
			margin-top : 1lh;
		}
	}
	dl{
		> div{
			display : grid;
			grid-auto-flow : column;
			column-gap : 1em;
			align-items : baseline;
			justify-content : start;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 71 * var( --remBase ) );
		h1{
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 26 / 18 );
			+ p{
				margin-top : calc( 32 * var( --remBase ) );
			}
		}
		> p , > ul , h2{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 26 / 14 );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 91 * var( --remBase ) );
		h1{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
			+ p{
				margin-top : calc( 60 * var( --remBase ) );
			}
		}
		> p , > ul , h2{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 2.25;
		}
	}
}