@charset "UTF-8";

/* --------------------------------------------
COLOR
--------------------------------------------- */
.color-white{
	color : white;
}
.color01{
	color : var( --color01 );
}
.color0102{
	color : var( --color0102 );
}
.color0103{
	color : var( --color0103 );
}
.color02{
	color : var( --color02 );
}
.color0202{
	color : var( --color0202 );
}
.color0203{
	color : var( --color0203 );
}
.color03{
	color : var( --color03 );
}
.color0302{
	color : var( --color0302 );
}
.color0303{
	color : var( --color0303 );
}
.bg-white{
	background-color : white;
}
.bg-color01{
	background-color : var( --color01 );
}
.bg-color0102{
	background-color : var( --color0102 );
}
.bg-color0103{
	background-color : var( --color0103 );
}
.bg-color02{
	background-color : var( --color02 );
}
.bg-color0202{
	background-color : var( --color0202 );
}
.bg-color0203{
	background-color : var( --color0203 );
}
.bg-color03{
	background-color : var( --color03 );
}
.bg-color0302{
	background-color : var( --color0302 );
}
.bg-color0303{
	background-color : var( --color0303 );
}
.category01{
	background-color : var( --category01 );
}
.category02{
	background-color : var( --category02 );
}
.category03{
	background-color : var( --category03 );
}
.category04{
	background-color : var( --category04 );
}
.category05{
	background-color : var( --category05 );
}
.category06{
	background-color : var( --category06 );
}
.bg01{
	background-color : var( --bg01 );
}

/* --------------------------------------------
POSITION
--------------------------------------------- */
.center{
	text-align : center;
}
@media screen and ( width <= 750px ){
	.center-sp{
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	.center-pc{
		text-align : center;
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-weight : 500;
}
.title01.style::after{
	display : block;
	width : calc( 150 var( --remBase ) );
	height : calc( 3 var( --remBase ) );
	content : "";
	background-color : var( --color02 );
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	.title01.style::after{
		margin-top : calc( 8 var( --remBase ) );
	}
	.title01.style-sp::after{
		display : block;
		width : calc( 150 var( --remBase ) );
		height : calc( 3 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		content : "";
		background-color : var( --color02 );
	}
}
@media print , screen and ( width > 750px ){
	.title01{
		font-size : 3.2rem;
		line-height : calc( 46 / 32 );
	}
	.title01.style::after{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	.title01-sp{
		font-size : 2.8rem;
		font-weight : 500;
		line-height : 1.3;
	}
	.title01-sp.style-sp::after{
		display : block;
		width : calc( 150 var( --remBase ) );
		height : calc( 3 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		content : "";
		background-color : var( --color02 );
	}
}
@media print , screen and ( width > 750px ){
	.title01-pc{
		font-size : 3.2rem;
		font-weight : 500;
		line-height : calc( 46 / 32 );
	}
	.title01-pc.style-pc::after{
		display : block;
		width : calc( 150 var( --remBase ) );
		height : calc( 3 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		content : "";
		background-color : var( --color02 );
	}
}
.title02{
	font-weight : 600;
}
.title02.style{
	padding-block : calc( 1.5 var( --remBase ) );
	padding-left : calc( 11 var( --remBase ) );
	border-left-color : var( --color01 );
	border-left-style : solid;
	border-left-width : calc( 4 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	.title02{
		font-size : 2.4rem;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	.title02{
		font-size : 2.6rem;
		line-height : calc( 37 / 26 );
	}
}
@media screen and ( width <= 750px ){
	.title02-sp{
		font-size : 2.4rem;
		font-weight : 600;
		line-height : 1.3;
	}
	.title02-sp.style-sp{
		padding-block : calc( 1.5 var( --remBase ) );
		padding-left : calc( 11 var( --remBase ) );
		border-left-color : var( --color01 );
		border-left-style : solid;
		border-left-width : calc( 4 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.title02-pc{
		font-size : 2.6rem;
		font-weight : 600;
		line-height : calc( 37 / 26 );
	}
	.title02-pc.style-pc{
		padding-block : calc( 1.5 var( --remBase ) );
		padding-left : calc( 11 var( --remBase ) );
		border-left-color : var( --color01 );
		border-left-style : solid;
		border-left-width : calc( 4 var( --remBase ) );
	}
}
.title03.style{
	border-bottom : solid 1px #d9d9d9 ;
}
@media screen and ( width <= 750px ){
	.title03{
		font-size : 2rem;
		font-weight : 600;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	.title03{
		font-size : 1.6rem;
		font-weight : 500;
		line-height : calc( 22 / 16 );
	}
	.title03.style{
		padding-bottom : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	.title03-sp{
		font-size : 2rem;
		font-weight : 600;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	.title03-pc{
		font-size : 1.6rem;
		font-weight : 500;
		line-height : calc( 22 / 16 );
	}
	.title03-pc.style-pc{
		padding-bottom : calc( 8 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9 ;
	}
}
.catchcopy01{
	font-weight : 700;
	color : var( --color01 );
	letter-spacing : .05em;
}
.catchcopy01 em{
	color : var( --color02 );
}
.catchcopy01.center{
	text-align : center;
	text-indent : .05em;
}
@media screen and ( width <= 750px ){
	.catchcopy01{
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
	}
}
@media print , screen and ( width > 750px ){
	.catchcopy01{
		font-size : 4.5rem;
		line-height : calc( 65 / 45 );
	}
}
@media screen and ( width <= 750px ){
	.catchcopy01-sp{
		font-size : 2.8rem;
		font-weight : 700;
		line-height : calc( 40 / 28 );
		color : var( --color01 );
		letter-spacing : .05em;
	}
	.catchcopy01-sp em{
		color : var( --color02 );
	}
}
@media print , screen and ( width > 750px ){
	.catchcopy01-pc{
		font-size : 4.5rem;
		font-weight : 700;
		line-height : calc( 65 / 45 );
		color : var( --color01 );
		letter-spacing : .05em;
	}
	.catchcopy01-pc em{
		color : var( --color02 );
	}
	.catchcopy01-pc.center-pc{
		text-indent : .05em;
	}
}
.lede01{
	font-size : 2.4rem;
	font-weight : 600;
	line-height : 1.3;
	color : black;
}
@media print , screen and ( width > 750px ){
	.lede01-pc{
		font-size : 2.4rem;
		font-weight : 600;
		line-height : 1.3;
		color : black;
	}
}
.title-en01{
	font-family : "Qwitcher Grypen";
	font-weight : 400;
	color : var( --color01 );
}
@media screen and ( width <= 750px ){
	.title-en01{
		font-size : 12.8rem;
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	.title-en01{
		display : grid;
		grid-template-columns : calc( 320 var( --percentBase ) ) auto calc( 320 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		font-size : 12.8rem;
	}
	.title-en01::before , .title-en01::after{
		grid-row : 1;
		height : calc( 2 var( --remBase ) );
		margin-top : calc( ( 26 * 2 / 3 ) var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : currentColor;
	}
	.title-en01::before{
		grid-column : 1;
	}
	.title-en01::after{
		grid-column : 3;
	}
}
.color-white .title-en01{
	color : inherit;
}

/* --------------------------------------------
TEXT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.text{
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	.text{
		font-size : 1.6rem;
	}
}
@media screen and ( width <= 750px ){
	.text-sp{
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	.text-pc{
		font-size : 1.6rem;
	}
}
.text-l{
	font-size : 2rem;
}
@media print , screen and ( width > 750px ){
	.text-l-pc{
		font-size : 2rem;
	}
}

/* --------------------------------------------
LINE HEIGHT
--------------------------------------------- */
.lh-s{
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	.lh-s-sp{
		line-height : 1.3;
	}
}
@media print , screen and ( width >= 1440px ){
	.lh-s-pc{
		line-height : 1.5;
	}
}
.lh{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	.lh-sp{
		line-height : 1.7;
	}
}
@media print , screen and ( width > 750px ){
	.lh-pc{
		line-height : 1.7;
	}
}
.lh-l{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	.lh-l-sp{
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	.lh-l-pc{
		line-height : 2;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	display : grid;
	place-items : center;
	width : fit-content;
	font-weight : 500;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	border-style : solid;
	border-width : 1px;
}
.link01:not( .bg-white ){
	border-color : var( --color01 );
}
.link01.bg-white{
	background-color : white;
	border-color : white;
}
.link01:not( .bg-blue ){
	color : var( --color01 );
}
.link01.bg-blue{
	color : white;
	background-color : var( --color01 );
}
.link01.center{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	.link01{
		height : calc( 52 var( --remBase ) );
		padding-inline : calc( 36 var( --remBase ) - 1px );
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	.link01{
		height : calc( 58 var( --remBase ) );
		padding-inline : calc( 48 var( --remBase ) - 1px );
		font-size : 1.8rem;
	}
}
@media ( hover : hover ){
	.link01:not( .bg-blue ):hover{
		color : white;
		background-color : var( --color01 );
	}
	.link01.bg-blue:hover{
		color : var( --color01 );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
}
.link02{
	display : grid;
	grid-template-columns : calc( 18 * 100% / 318 ) auto;
	column-gap : calc( 5.5 * 100% / 318 );
	align-items : center;
	justify-content : center;
	width : calc( 318 var( --percentBase ) );
	height : calc( 61 var( --remBase ) );
	font-family : "Noto Sans JP" , sans-serif;
	font-size : 2rem;
	font-weight : 500;
	color : white;
	background-color : var( --color01 );
	border : solid 1px var( --color01 );
	border-radius : 100vmax;
}
.link02::before{
	display : block;
	height : calc( 18 var( --remBase ) );
	content : "";
	background : url( "../images/ui/arrow/circle01_base.svg" ) center / contain no-repeat;
	filter : var( --filterWhite );
}
.link02.center{
	margin-inline : auto;
}
@media ( hover : hover ){
	.link02:hover{
		color : var( --color01 );
		background-color : white;
	}
	.link02:hover::before{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link02{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	.link02::before{
		transition : filter var( --transitionBase );
	}
}
:where( .photoBox , .tableBox ) .hint{
	transition : opacity var( --transitionBase ) , visibility 0s ease .3s;
}
:where( .photoBox , .tableBox ) .hint.hidden{
	visibility : hidden;
	opacity : 0;
}
@media screen and ( width <= 750px ){
	:where( .photoBox , .tableBox ){
		position : relative;
		overflow-x : auto;
		overflow-y : visible;
	}
	@supports not selector(::-webkit-scrollbar){
		:where( .photoBox , .tableBox ){
			scrollbar-color : var( --color01 ) var( --color0102 );
			scrollbar-width : thin;
		}
	}
	@supports selector(::-webkit-scrollbar){
		:where( .photoBox , .tableBox )::-webkit-scrollbar{
			block-size : calc( 14 var( --remBase ) );
		}
		:where( .photoBox , .tableBox )::-webkit-scrollbar-thumb{
			background-color : var( --color01 );
			opacity : 1;
		}
		:where( .photoBox , .tableBox )::-webkit-scrollbar-track{
			background-color : var( --color0102 );
		}
	}
	:where( .photoBox , .tableBox ) .hint{
		position : absolute;
		top : 50%;
		left : 50%;
		translate : -50% -50%;
		z-index : 1;
		pointer-events : none;
	}
	:where( .photoBox , .tableBox ) .hint img{
		height : calc( 102 var( --remBase ) );
	}
}