@charset "UTF-8";

/* --------------------------------------------
BACKGROUND
--------------------------------------------- */
.bg01{
	background-color : var( --color01 );
}
.bg0102{
	background-color : var( --color0102 );
}
.bg0103{
	background-color : var( --color0103 );
}
:where( hgroup , h1 , h2 , h3 , h4 , h5 ){
	font-family : "Noto Serif JP";
	font-weight : 400;
}

/* --------------------------------------------
TEXT
--------------------------------------------- */
/* font-size */
@media screen and ( width <= 750px ){
	:where( .text-ss , .text-sm , .text-sl ){
		font-size : 1.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss , .text-sm , .text-sl ){
		font-size : 1.6rem;
	}
}
@media screen and ( width <= 750px ){
	:where( .text , .text-ms , .text-mm , .text-ml ){
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text , .text-ms , .text-mm , .text-ml ){
		font-size : 2rem;
	}
}
@media screen and ( width <= 750px ){
	:where( .text-ls , .text-lm , .text-ll ){
		font-size : 1.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ls , .text-lm , .text-ll ){
		font-size : 2.2rem;
	}
}
@media screen and ( width <= 750px ){
	:where( .text-ss-sp , .text-sm-sp , .text-sl-sp ){
		font-size : 1.2rem;
	}
	:where( .text-sp , .text-ms-sp , .text-mm-sp , .text-ml-sp ){
		font-size : 1.4rem;
	}
	:where( .text-ls-sp , .text-lm-sp , .text-ll-sp ){
		font-size : 1.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss-pc , .text-sm-pc , .text-sl-pc ){
		font-size : 1.6rem;
	}
	:where( .text-pc , .text-ms-pc , .text-mm-pc , .text-ml-pc ){
		font-size : 2rem;
	}
	:where( .text-ls-pc , .text-lm-pc , .text-ll-pc ){
		font-size : 2.2rem;
	}
}

/* line-height */
@media screen and ( width <= 750px ){
	:where( .text-ss , .text-ms , .text-ls ){
		line-height : 1.4;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss , .text-ms , .text-ls ){
		line-height : 1.5;
	}
}
:where( .text , .text-sm , .text-mm , .text-lm ){
	line-height : 1.7;
}
:where( .text-sl , .text-ml , .text-ll ){
	line-height : 2;
}
@media screen and ( width <= 750px ){
	:where( .text-ss-sp , .text-ms-sp , .text-ls-sp ){
		line-height : 1.4;
	}
	:where( .text-sp , .text-sm-sp , .text-mm-sp , .text-lm-sp ){
		line-height : 1.7;
	}
	:where( .text-sl-sp , .text-ml-sp , .text-ll-sp ){
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss-pc , .text-ms-pc , .text-ls-pc ){
		line-height : 1.5;
	}
	:where( .text-pc , .text-sm-pc , .text-mm-pc , .text-lm-pc ){
		line-height : 1.7;
	}
	:where( .text-sl-pc , .text-ml-pc , .text-ll-pc ){
		line-height : 2;
	}
}

/* --------------------------------------------
TITLES
--------------------------------------------- */
.titles01 :where( h2 , h3 , h4 , h5 , h6 ){
	display : grid;
	grid-template-columns : auto auto;
	align-items : end;
	justify-content : space-between;
	line-height : 1.3;
	color : var( --color01 );
	letter-spacing : .1em;
	border-bottom-color : currentColor;
	border-bottom-width : calc( 2 var( --remBase ) );
}
.titles01 :where( h2 , h3 , h4 , h5 , h6 )[data-en]::after{
	margin-right : -.1em;
	font-family : "Alex Brush";
	line-height : 1;
	letter-spacing : .1em;
	white-space : pre;
	content : attr( data-en );
}
.titles01 p{
	font-weight : 500;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	.titles01 :where( h2 , h3 , h4 , h5 , h6 ){
		padding-bottom : calc( 3 var( --remBase ) );
		font-size : 3.2rem;
	}
	.titles01 :where( h2 , h3 , h4 , h5 , h6 )[data-en]::after{
		font-size : 2rem;
		color : #6b7a85;
	}
	.titles01 p{
		margin-top : calc( 22 var( --remBase ) );
		font-size : 2.4rem;
		letter-spacing : .05em;
	}
	.titles01 p span:not( .pc ){
		font-size : 2.8rem;
		line-height : 1.3;
		letter-spacing : .1em;
	}
}
@media screen and ( width > 750px ) , print{
	.titles01 :where( h2 , h3 , h4 , h5 , h6 ){
		padding-bottom : calc( 10 var( --remBase ) );
		font-size : 4rem;
	}
	.titles01 :where( h2 , h3 , h4 , h5 , h6 )[data-en]::after{
		margin-bottom : calc( -6 var( --remBase ) );
		font-size : 3.4rem;
	}
	.titles01 p{
		font-size : 4.8rem;
		letter-spacing : .1em;
	}
	.titles01 p span:not( .sp ){
		font-size : 3.6rem;
		line-height : 1.3;
		letter-spacing : .1em;
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-weight : 500;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 3.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	.title01{
		font-size : 4.8rem;
	}
}
@media screen and ( width <= 750px ){
	.title01-sp{
		font-size : 3.2rem;
		font-weight : 500;
		line-height : 1.3;
	}
}
@media screen and ( width > 750px ) , print{
	.title01-pc{
		font-size : 4.8rem;
		font-weight : 500;
		line-height : 1.3;
	}
}
.title02{
	font-size : 2.4rem;
	font-weight : 600;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	.title02-sp{
		font-size : 2.4rem;
		font-weight : 600;
		line-height : 1.3;
	}
}
@media screen and ( width > 750px ) , print{
	.title02-pc{
		font-size : 2.4rem;
		font-weight : 600;
		line-height : 1.3;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 9 var( --remBase ) );
	align-items : center;
	justify-content : start;
	width : fit-content;
	height : calc( 40 var( --remBase ) );
	padding-left : calc( 32 var( --remBase ) - 1px );
	padding-right : calc( 29 var( --remBase ) - 1px );
	font-family : Poppins , sans-serif;
	font-size : 1.8rem;
	line-height : 1.3;
	border-width : 1px;
}
.link01::after{
	display : block;
	width : 100%;
	height : calc( 14 var( --remBase ) );
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "../../images/ui/arrow/right01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
.link01:not( .invert ){
	color : white;
	background-color : var( --color01 );
	border-color : var( --color01 );
}
.link01:not( .invert )::after{
	filter : var( --filterWhite );
}
.link01.invert{
	color : var( --color01 );
	background-color : white;
	border-color : white;
}
.link01.invert::after{
	filter : var( --filterColor01 );
}
@media ( hover : hover ){
	.link01:not( .invert ):hover{
		color : var( --color01 );
		background-color : white;
	}
	.link01:not( .invert ):hover::after{
		filter : var( --filterColor01 );
	}
	.link01.invert:hover{
		color : white;
		background-color : var( --color01 );
	}
	.link01.invert:hover::after{
		filter : var( --filterWhite );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
	.link01::after{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
SCOLL HINT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.pics:has( .hint ){
		position : relative;
		overflow-x : auto;
	}
	.pics:has( .hint ) .hint{
		position : absolute;
		inset : 0;
		width : fit-content;
		height : fit-content;
		margin : auto;
		pointer-events : none;
		opacity : 1;
	}
	.pics:has( .hint ) .hint img{
		height : calc( 102 var( --remBase ) );
	}
	.pics:has( .hint ) .hint.hidden{
		opacity : 0;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		.hint{
			transition : opacity var( --transitionBase );
		}
	}
}