@charset "UTF-8";

/* --------------------------------------------
STORY
--------------------------------------------- */
#story{
	@media screen and ( width <= 768px ){
		#pagination{
			margin-top : calc( 96.5 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		#pagination{
			padding-inline : calc( 10 * 100% / 820 );
			margin-top : calc( 115 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about02{
	header{
		padding-block : calc( 10 * var( --remBase ) );
		h2{
			font-weight : 500;
		}
	}
	@media screen and ( width <= 768px ){
		padding-inline : calc( 51 * var( --viewportBase ) );
		margin-top : calc( 76 * var( --remBase ) );
		header , dl{
			padding-inline : calc( 10 * 100% / 340 );
		}
		header{
			h2{
				padding-block : calc( 10 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 34 / 24 );
			}
			p{
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 30 / 16 );
			}
		}
		dl{
			margin-top : calc( 76 * var( --remBase ) );
		}
		dt{
			text-align : center;
		}
		dd{
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 30 / 16 );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 94 * var( --remBase ) );
		header , dl{
			padding-inline : calc( 10 * 100% / 825 );
		}
		header{
			h2{
				font-size : calc( 36 * var( --remBase ) );
				line-height : calc( 64 / 36 );
			}
			p{
				margin-top : calc( 31 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 2;
			}
		}
		dl{
			margin-top : calc( 94 * var( --remBase ) );
		}
		dd{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 2.25;
		}
	}
}
#aboutLogo01{
	dt{
		text-align : center;
	}
	dd{
		padding-block : calc( 10 * var( --remBase ) );
	}
	li + li{
		margin-top : 1lh;
	}
	@media screen and ( width <= 768px ){
		dt{
			img{
				height : calc( 33.33 * var( --remBase ) );
			}
		}
		dd{
			margin-top : calc( 76 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		dt{
			img{
				height : calc( 85.79 * var( --remBase ) );
			}
		}
		dd{
			margin-top : calc( 94 * var( --remBase ) );
		}
	}
}
#aboutLogo02 , #aboutLogo03{
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : 1fr calc( 400 * 100% / 805 );
		align-items : center;
	}
}
#aboutLogo02{
	@media screen and ( width <= 768px ){
		margin-top : calc( 76 * var( --remBase ) );
		dt{
			img{
				height : calc( 75 * var( --remBase ) );
			}
		}
		dd{
			margin-top : calc( 76 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 10 * var( --remBase ) );
		margin-top : calc( 94 * var( --remBase ) );
		dt{
			img{
				height : calc( 112 * var( --remBase ) );
			}
		}
	}
}
#aboutLogo03{
	padding-bottom : calc( 10 * var( --remBase ) );
	@media screen and ( width <= 768px ){
		margin-top : calc( 76 * var( --remBase ) );
		dt{
			img{
				height : calc( 29.02 * var( --remBase ) );
			}
		}
		dd{
			padding-block : calc( 10 * var( --remBase ) );
			margin-top : calc( 76 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 120 * var( --remBase ) );
		dt{
			img{
				height : calc( 45.96 * var( --remBase ) );
			}
		}
	}
}
#aboutDesigner{
	outline : solid 1px var( --base );
	outline-offset : -1px;
	.hgroup{
		h3{
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : start;
			font-weight : 500;
		}
	}
	> p{
		font-size : calc( 14 * var( --remBase ) );
		line-height : calc( 30 / 14 );
	}
	section{
		border-top : solid 1px var( --base );
	}
	h4{
		padding-block : calc( 10 * var( --remBase ) );
		font-weight : 500;
	}
	@media screen and ( width <= 768px ){
		padding-inline : calc( 20 * 100% / 340 );
		padding-top : calc( 25 * var( --remBase ) );
		padding-bottom : calc( ( 36 - 10 ) * var( --remBase ) );
		margin-top : calc( 76 * var( --remBase ) );
		.hgroup{
			font-size : 0;
			p , h3{
				display : inline;
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 30 / 16 );
			}
			h3{
				span{
					padding-left : 1em;
				}
			}
		}
		> p{
			margin-top : calc( 32 * var( --remBase ) );
		}
		section{
			padding-top : calc( 30 * var( --remBase ) );
			margin-top : calc( 30 * var( --remBase ) );
		}
		h4{
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 32 / 22 );
		}
		.link01{
			width : 100%;
			margin-top : calc( ( 20 - 10 ) * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 47 * var( --remBase ) );
		padding-bottom : calc( 51 * var( --remBase ) );
		padding-left : calc( 91 * 100% / 825 );
		padding-right : calc( 54 * 100% / 825 );
		margin-top : calc( 94 * var( --remBase ) );
		.hgroup{
			p{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 2.25;
			}
			h3{
				column-gap : calc( 20 * 100% / 680 );
				margin-top : calc( 4 * var( --remBase ) );
				span[lang="ja"]{
					font-size : calc( 24 * var( --remBase ) );
					line-height : calc( 35 / 24 );
				}
				span[lang="en"]{
					font-size : calc( 20 * var( --remBase ) );
					line-height : 2;
				}
			}
		}
		> p{
			margin-top : calc( 25 * var( --remBase ) );
		}
		section{
			padding-top : calc( 35 * var( --remBase ) );
			margin-top : calc( * var( --remBase ) );
			margin-top : calc( 35 * var( --remBase ) );
		}
		h4{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
		}
		.link01{
			margin-top : calc( 25 * var( --remBase ) );
		}
	}
}
#about03{
	padding-block : calc( 10 * var( --remBase ) );
	h2{
		font-family : Barlow , sans-serif;
		font-weight : 500;
		letter-spacing : .1em;
	}
	dt , dd{
		font-weight : 500;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 76 * var( --remBase ) );
		h2{
			padding-block : calc( 6 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 29 / 24 );
		}
		dl{
			margin-top : calc( 60 * var( --remBase ) );
		}
		dt{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 30 / 14 );
		}
		dd{
			margin-top : calc( -4 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 30 / 16 );
		}
		dd + dt{
			margin-top : calc( 30 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 94 * var( --remBase ) );
		h2{
			font-size : calc( 36 * var( --remBase ) );
			line-height : calc( 43 / 36 );
		}
		dl{
			display : grid;
			grid-template-columns : calc( 340 * 100% / 805 ) 1fr;
			row-gap : calc( 20 * var( --remBase ) );
			align-items : start;
			padding-block : calc( 40 * var( --remBase ) );
			margin-top : calc( 40 * var( --remBase ) );
		}
		dt , dd{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
		}
	}
}
#about04{
	padding-block : calc( 10 * var( --remBase ) );
	h2{
		font-family : Barlow , sans-serif;
		font-weight : 500;
		letter-spacing : .1em;
	}
	iframe{
		width : 100%;
		height : auto;
		border : 0;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 76 * var( --remBase ) );
		h2{
			padding-block : calc( 6 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 29 / 24 );
		}
		iframe{
			aspect-ratio : 300/320;
			margin-top : calc( 30 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 94 * var( --remBase ) );
		h2{
			font-size : calc( 36 * var( --remBase ) );
			line-height : calc( 43 / 36 );
		}
		iframe{
			aspect-ratio : 805/477;
			margin-top : calc( 41 * var( --remBase ) );
		}
	}
}
#about{
	@media screen and ( width <= 768px ){
		#pagination{
			padding-inline : calc( 51 * var( --viewportBase ) );
			margin-top : calc( 104 * var( --remBase ) );
		}
		#footerLinks{
			padding-inline : calc( 41 * var( --viewportBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		#pagination{
			margin-top : calc( 110 * var( --remBase ) );
		}
		#footerLinks{
			padding-inline : calc( 10 * 100% / 825 );
		}
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contactPrivacy{
	padding-top : calc( 45 * var( --remBase ) );
	margin-top : calc( 45 * var( --remBase ) );
	border-top : solid 1px var( --base );
	h2{
		font-weight : 500;
		text-decoration : underline;
		text-underline-offset : calc( 2 * var( --remBase ) );
	}
	p{
		font-weight : 400;
		a{
			font-weight : 500;
		}
	}
	@media screen and ( width <= 768px ){
		h2 , p{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 26 / 14 );
		}
	}
	@media print , screen and ( width > 768px ){
		h2 , p{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 30 / 14 );
		}
	}
}