@charset "UTF-8";

/* --------------------------------------------
PROPOSAL
--------------------------------------------- */
#proposal{
	position : relative;
	overflow-x : clip;
}
#proposal::before{
	position : absolute;
	display : block;
	width : auto;
	font-size : 0;
	content : "";
	background-image : url( "../images/home/proposal/bg.webp" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#proposal h2{
	display : grid;
	align-items : baseline;
	justify-content : start;
}
#proposal h2 span{
	font-family : "Crimson Text" , serif;
	font-weight : 400;
	line-height : 1.2;
}
#proposal h2::before{
	display : block;
	width : 100%;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : #333;
}
#proposal h2::after{
	line-height : 1.7;
}
#proposal > p{
	line-height : 2;
}
#proposal h3 > :where( span , ruby ){
	display : grid;
	grid-auto-flow : column;
	column-gap : calc( 2 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
	font-weight : 500;
	color : #333;
}
#proposal h3 > :where( span , ruby ) :where( rt , span ){
	font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
	color : var( --base );
}
#proposal li p{
	line-height : 2;
}
#proposal ul ul{
	display : grid;
	grid-auto-flow : column;
	overflow-x : auto;
	scroll-behavior : auto;
	cursor : grab;
	user-select : none;
	scrollbar-width : thin;
	scrollbar-color : transparent transparent;
}
#proposal ul ul > li{
	scroll-snap-align : start;
}
#proposal picture{
	width : 100%;
}
#proposal picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#proposal h4{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : start;
	margin-top : calc( 8 var( --remBase ) );
	overflow : hidden;
	font-weight : 400;
	line-height : 1.3;
	white-space : pre;
}
#proposal h4::after{
	display : block;
	width : auto;
	height : calc( 6 var( --remBase ) );
	aspect-ratio : 20/6;
	font-size : 0;
	content : "";
	background-image : url( "../images/home/proposal/arrow.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#proposal{
		padding-top : calc( 50 var( --remBase ) );
		padding-bottom : calc( 320 var( --remBase ) );
	}
	#proposal > :where( h2 , p ){
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	#proposal h2{
		grid-template-columns : auto 1fr;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 var( --percentBase ) );
	}
	#proposal h2 span{
		grid-row : 1;
		grid-column : 1/-1;
		font-size : clamp( var( --min ) , 7rem , var( --max ) );
	}
	#proposal h2::after{
		grid-row : 2;
		grid-column : 1;
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#proposal h2::before{
		grid-row : 2;
		grid-column : 2;
	}
	#proposal > p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#proposal > ul{
		margin-top : calc( 40 var( --remBase ) );
		margin-left : calc( var( --gutter ) var( --viewportBase ) );
	}
	#proposal > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#proposal > ul h3 > :where( ruby , span ){
		font-size : clamp( var( --min ) , 8rem , var( --max ) );
	}
	#proposal > ul p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#proposal ul ul{
		grid-auto-columns : calc( 160 * 100% / 368 );
		column-gap : calc( 16 * 100% / 368 );
		margin-top : calc( 16 var( --remBase ) );
	}
	#proposal picture{
		height : calc( 116 var( --remBase ) );
	}
	#proposal h4{
		column-gap : calc( 8 * 100% / 160 );
	}
	#proposal > ul > li:first-child h4{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#proposal > ul > li + li h4{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#proposal::before{
		bottom : 0;
		left : 0;
		width : 100%;
		height : calc( 280 var( --remBase ) );
		aspect-ratio : 400/280;
		background-size : cover;
	}
}
@media print , screen and ( width > 750px ){
	#proposal{
		padding-block : calc( 120 var( --remBase ) );
	}
	#proposal::before{
		top : calc( 40 var( --remBase ) );
		left : calc( 50% - 30 var( --viewportBase ) );
		z-index : -1;
		height : calc( 497.74 var( --remBase ) );
		aspect-ratio : 760/497.74;
	}
	#proposal > :where( h2 , p ){
		width : calc( 560 var( --viewportBase ) );
		padding-left : calc( 64 var( --viewportBase ) );
	}
	#proposal h2{
		grid-template-columns : auto auto 1fr;
		align-items : baseline;
	}
	#proposal h2 span{
		font-size : clamp( var( --min ) , 10rem , var( --max ) );
	}
	#proposal h2{
		column-gap : calc( 4 var( --remBase ) );
	}
	#proposal h2::after{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#proposal h2::before{
		grid-row : 1;
		grid-row-end : -1;
		grid-column : 3;
	}
	#proposal > p{
		margin-top : calc( 40 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#proposal > ul{
		width : 100%;
		padding-left : calc( 64 var( --viewportBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#proposal > ul > li{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 416 * 100% / 1376 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 32 * 100% / 1376 );
		align-content : start;
		align-items : start;
		justify-content : start;
	}
	#proposal > ul > li + li{
		margin-top : calc( ( 48 - 32 ) var( --remBase ) );
	}
	#proposal > ul > li > h3{
		grid-row : 1;
		grid-column : 1;
		padding-top : calc( 32 var( --remBase ) );
	}
	#proposal > ul > li > h3 > :where( ruby , span ){
		font-size : clamp( var( --min ) , 10rem , var( --max ) );
	}
	#proposal > ul > li > p{
		grid-row : 2;
		grid-column : 1;
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#proposal ul ul{
		grid-row : 1/-1;
		grid-column : 2;
		grid-auto-columns : calc( 192 * 100% / 928 );
		column-gap : calc( 32 * 100% / 928 );
		padding-top : calc( 32 var( --remBase ) );
	}
	#proposal ul ul > li{
		position : relative;
		z-index : 0;
	}
	#proposal ul ul > li::before{
		position : absolute;
		top : calc( -32 var( --remBase ) );
		left : 0;
		z-index : -1;
		display : block;
		width : calc( 100% + ( 32 * 100% / 192 ) );
		height : calc( 100% + ( 32 var( --remBase ) ) );
		content : "";
		background-color : #f1efef;
	}
	#proposal picture{
		height : calc( 139 var( --remBase ) );
	}
	#proposal h4{
		column-gap : calc( 8 * 100% / 192 );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}
@media ( hover : hover ){
	#proposal ul ul:hover{
		scrollbar-color : var( --base ) transparent;
	}
	#proposal li a:hover{
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#proposal ul ul{
		transition : scrollbar-color var( --transitionBounds );
	}
	#proposal li a:hover{
		transition : opacity var( --transitionBounds );
	}
}

/* --------------------------------------------
ABOUT US
--------------------------------------------- */
#about{
	color : #242424;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#about a{
	color : white;
}
#about h3{
	font-weight : 500;
	line-height : 1.2;
}
#about p{
	margin-top : calc( 16 var( --remBase ) );
	line-height : 2;
}
#about .links{
	display : grid;
	justify-content : space-between;
}
#about .links a{
	display : grid;
	grid-auto-flow : row;
	row-gap : calc( 12 var( --remBase ) );
	align-content : center;
	justify-items : center;
	font-family : Manrope , serif;
	font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	color : #898989;
	text-align : center;
	background-color : color-mix( in sRGB , black 40% , transparent );
}
#about .links a::before{
	display : block;
	order : 2;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : white;
}
#about .links a::after{
	order : 3;
	font-family : "Zen Old Mincho" , serif;
	font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	color : white;
}
#about h4{
	font-family : "Zen Old Mincho" , serif;
	font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	font-weight : 700;
	line-height : 2;
}
#about h5{
	font-weight : 700;
	line-height : 2;
}
#about ul ul{
	display : flex;
	flex-wrap : wrap;
}
#about ul ul :where( a , button ){
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
	place-items : center;
	padding-block : calc( 4 var( --remBase ) );
	padding-inline : calc( 4 var( --remBase ) );
	font-family : "Zen Old Mincho" , serif;
	line-height : 2;
	text-align : center;
	background-color : color-mix( in sRGB , black 20% , transparent );
}
#about button{
	width : 100%;
}
@media screen and ( width <= 750px ){
	#about{
		padding-block : calc( 80 var( --remBase ) );
		background-image : url( "../images/home/about/bg_sp.webp" );
	}
	html[lang="en"] #about{
		padding-block : calc( 80 var( --remBase ) );
		background-image : url( "../images/home/about/bg_sp_2.webp" );
	}
	#about h3{
		margin-top : calc( 24 var( --remBase ) );
		font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
	}
	#about p{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#about .links{
		grid-template-columns : repeat( 2 , calc( 160 var( --percentBase ) ) );
		row-gap : calc( 16 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#about .links a{
		padding-block : calc( 23.5 var( --remBase ) );
	}
	#about .links a::before{
		width : calc( 22 * 100% / 160 );
	}
	#about .box{
		margin-top : calc( 24 var( --remBase ) );
	}
	#about h4{
		padding-bottom : calc( 8 var( --remBase ) );
		border-bottom : solid 1px white;
	}
	#about .sns{
		margin-top : calc( 16 var( --remBase ) );
	}
	#about .sns > li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#about h5{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#about ul ul{
		column-gap : calc( 8 var( --percentBase ) );
		align-items : start;
		justify-content : start;
		margin-top : calc( 8 var( --remBase ) );
	}
	#about ul ul > li{
		min-width : calc( 78 var( --percentBase ) );
	}
	#about ul ul :where( a , button ){
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	#about{
		padding-block : calc( 160 var( --remBase ) );
		background-image : url( "../images/home/about/bg_pc.webp" );
	}
	html[lang="en"] #about{
		padding-block : calc( 160 var( --remBase ) );
		background-image : url( "../images/home/about/bg_pc_2.webp" );
	}
	#about > *{
		width : calc( 976 var( --percentBase ) );
		margin-left : auto;
	}
	#about h3{
		margin-top : calc( 16 var( --remBase ) );
		font-size : clamp( var( --min ) , 4rem , var( --max ) );
	}
	#about h3 span{
		font-size : clamp( var( --min ) , 3rem , var( --max ) );
	}
	#about p{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#about .links{
		grid-template-columns : repeat( 3 , calc( 304 * 100% / 976 ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#about .links a{
		padding-top : calc( 53 var( --remBase ) );
		padding-bottom : calc( 54 var( --remBase ) );
	}
	#about .links a::before{
		width : calc( 22 * 100% / 304 );
	}
	#about .box{
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : calc( 16 * 100% / 976 );
		align-items : start;
		margin-top : calc( 32 var( --remBase ) );
	}
	#about h4{
		min-width : calc( 111 var( --remBase ) );
	}
	#about .sns{
		padding-left : calc( 24 var( --remBase ) );
		border-left : solid 1px #d9d9d9;
	}
	#about .sns > li{
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : calc( 8 var( --remBase ) );
		align-items : start;
	}
	#about .sns > li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#about h5{
		min-width : calc( 140 var( --remBase ) );
		padding-top : calc( 4 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#about ul ul{
		column-gap : calc( 8 var( --remBase ) );
		align-items : start;
		justify-content : start;
	}
	#about ul ul > li{
		min-width : calc( 108 var( --remBase ) );
	}
	#about ul ul :where( a , button ){
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}
@media ( hover : hover ){
	#about a:hover{
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#about a{
		transition : opacity var( --transitionBounds );
	}
}

/* --------------------------------------------
JOURNAL
--------------------------------------------- */
#journal .title-home{
	color : #242424;
}
#journal picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#journal li a{
	font-family : "Zen Old Mincho" , serif;
	color : #242424;
	background-color : white;
}
#journal h3{
	padding-bottom : calc( 8 var( --remBase ) );
	font-weight : 500;
	line-height : 1.7;
	border-bottom : solid 1px #e6e6e6;
}
#journal dl{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
	justify-content : start;
	padding-top : calc( 8 var( --remBase ) );
	font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	line-height : 1.7;
}
#journal dl ul{
	display : grid;
	grid-template-columns : repeat( auto-fill , minmax( auto , 1fr ) );
	align-items : start;
	justify-content : start;
}
@media screen and ( width <= 750px ){
	#journal{
		padding-block : calc( 80 var( --remBase ) );
	}
	#journal > ul{
		margin-top : calc( 35 var( --remBase ) );
	}
	#journal > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#journal > ul > li > a{
		display : block;
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#journal picture{
		height : calc( 180 var( --remBase ) );
	}
	#journal :where( h3 , dl ){
		margin-inline : calc( 16 var( --percentBase ) );
	}
	#journal h3{
		margin-top : calc( 16 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	#journal{
		display : grid;
		grid-template-columns : calc( 416 var( --percentBase ) ) calc( 864 var( --percentBase ) );
		row-gap : calc( 24 var( --remBase ) );
		column-gap : calc( 32 var( --percentBase ) );
		align-items : start;
		padding-block : calc( 160 var( --remBase ) );
	}
	#journal .title-home{
		grid-row : 1;
		grid-column : 1;
	}
	#journal > ul{
		grid-row : 1;
		grid-column : 2;
	}
	#journal > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#journal > ul > li > a{
		display : grid;
		grid-template-rows : 1fr auto auto 1fr;
		grid-template-columns : calc( 192 * 100% / 848 );
		column-gap : calc( 16 * 100% / 848 );
		align-content : center;
		padding-right : calc( 16 * 100% / 864 );
	}
	#journal picture{
		grid-row : 1/-1;
		grid-column : 1;
		height : calc( 103 var( --remBase ) );
	}
	#journal h3{
		grid-row : 2;
		grid-column : 2;
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	}
	#journal dl{
		grid-row : 3;
		grid-column : 2;
	}
	#journal > a{
		grid-row : 2;
		grid-column : 2;
		justify-self : end;
	}
}
@media ( hover : hover ){
	#journal li a:hover{
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#journal li a{
		transition : opacity var( --transitionBounds );
	}
}