@charset "UTF-8";

/* --------------------------------------------
HGROUP
--------------------------------------------- */
.hgoup01{
	display : grid;
}
.hgoup01 h2{
	font-weight : 500;
}
.hgoup01 h2 > :where( ruby , span ){
	display : grid;
	align-items : baseline;
	justify-content : start;
}
.hgoup01 p{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	.hgoup01{
		grid-auto-flow : row;
		row-gap : calc( 8 var( --remBase ) );
	}
	.hgoup01 h2 > :where( ruby , span ){
		grid-auto-flow : column;
		column-gap : calc( 2 var( --percentBase ) );
		align-items : baseline;
		font-size : clamp( var( --min ) , 8rem , var( --max ) );
	}
	.hgoup01 h2 > :where( ruby , span ) > :where( rt , span ){
		font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
	}
	.hgoup01 p{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	.hgoup01{
		grid-auto-flow : column;
		column-gap : calc( 32 var( --percentBase ) );
		align-items : baseline;
		justify-content : start;
	}
	.hgoup01 h2 > :where( ruby , span ){
		grid-auto-flow : column;
		align-items : baseline;
		font-size : clamp( var( --min ) , 16rem , var( --max ) );
	}
	.hgoup01 h2 > :where( ruby , span ) > :where( rt , span ){
		font-size : clamp( var( --min ) , 3.2rem , var( --max ) );
	}
	.hgoup01 p{
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title-home{
	display : grid;
	grid-template-columns : auto 1fr;
	row-gap : calc( 4 var( --remBase ) );
	column-gap : calc( 4 var( --remBase ) );
	align-items : baseline;
	font-weight : 400;
}
.title-home span{
	grid-row : 1;
	grid-column : 1/-1;
	font-family : "Crimson Text" , serif;
}
.title-home::after{
	grid-row : 2;
	grid-column : 1;
	line-height : 1.7;
}
.title-home::before{
	display : block;
	grid-row : 2;
	grid-column : 2;
	width : 100%;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : currentColor;
}
@media screen and ( width <= 750px ){
	.title-home span{
		font-size : clamp( var( --min ) , 6rem , var( --max ) );
	}
	.title-home::after{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	.title-home span{
		font-size : clamp( var( --min ) , 10rem , var( --max ) );
	}
	.title-home::after{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}
.title02{
	display : grid;
	grid-template-columns : auto 1fr;
	font-weight : 400;
}
.title02 span{
	grid-row : 1;
	font-family : "Crimson Text" , serif;
}
.title02::before{
	display : block;
	grid-column : 2;
	height : 1px;
	font-size : 0;
	content : "";
}
@media screen and ( width <= 750px ){
	.title02{
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 var( --percentBase ) );
		align-items : baseline;
	}
	.title02 span{
		grid-column : 1/-1;
		font-size : clamp( var( --min ) , 6rem , var( --max ) );
		color : #333;
	}
	.title02::after{
		grid-row : 2;
		grid-column : 1;
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
		line-height : 1.7;
	}
	.title02::before{
		grid-row : 2;
		background-color : #333;
	}
}
@media print , screen and ( width > 750px ){
	.title02{
		row-gap : calc( 16 var( --remBase ) );
		align-items : end;
	}
	.title02 span{
		grid-column : 1;
		font-size : clamp( var( --min ) , 10rem , var( --max ) );
		color : #242424;
	}
	.title02::before{
		background-color : color-mix( in srgb , #10192b 95% , transparent );
	}
	.title02::after{
		grid-row : 2;
		grid-column : 1/-1
			@mixin fz 2rem;
		line-height : 2;
	}
}

/* --------------------------------------------
LINK BUTTON
--------------------------------------------- */
.link-home{
	display : grid;
	place-items : center;
	width : fit-content;
	font-family : Manrope , serif;
	line-height : 1.2;
	color : white;
	background-color : #16202a;
	outline : solid 1px #16202a;
	outline-offset : -1px;
}
@media screen and ( width <= 750px ){
	.link-home.is-pc{
		display : none;
	}
}
@media print , screen and ( width > 750px ){
	.link-home{
		padding-block : calc( 8 var( --remBase ) );
		padding-inline : calc( 53 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}
@media ( hover : hover ){
	.link-home:hover{
		color : #16202a;
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link-home{
		transition : color var( --transitionBounds ) , background var( --transitionBounds );
	}
}

/* --------------------------------------------
BACKGROUND PATTERN
--------------------------------------------- */
.tile01{
	position : relative;
	z-index : 0;
	overflow-x : clip;
}
.tile01::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/bg/tile01.webp" );
	background-repeat : repeat;
	background-size : auto calc( 655 var( --remBase ) );
	opacity : .1;
}
@media screen and ( width <= 750px ){
	.tile01::before{
		background-position : 0 0;
	}
}
@media print , screen and ( width > 750px ){
	.tile01::before{
		background-position : center top;
	}
}
.tile02{
	background-color : #09101e;
	background-image : url( "../images/ui/bg/tile01_v2.webp" );
	background-repeat : repeat;
	background-size : auto calc( 655 var( --remBase ) );
	color: #fff;
}

/*---
.tile02{
	position : relative;
	z-index : 0;
	overflow-x : clip;
	color : white;
}
.tile02::before , .tile02::after{
	position : absolute;
	top : 0;
	left : 0;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	content : "";
}

.tile02::before{
	z-index : -2;
	background-color : #09101e;
}
.tile02::after{
	z-index : 1;
	background-image : url( "../images/ui/bg/tile01.webp" );
	background-repeat : repeat;
	background-size : auto calc( 655 var( --remBase ) );
	opacity : .05;
}
---*/
.tile02 .title02 span{
	color : white;
}
.tile02 .title02::after{
	color : white;
}
.tile02 .title02::before{
	background-color : white;
}
@media screen and ( width <= 750px ){
	.tile02::after{
		background-position : 0 0;
	}
}
@media print , screen and ( width > 750px ){
	.tile02::after{
		background-position : center top;
	}
}