@charset "UTF-8";

/* --------------------------------------------
REM BASE
--------------------------------------------- */

/* ■■解除--------------------------------------------

@media screen and ( width <= 781px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 781px < width < 1240px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1240px ){
	:root{
		font-size : 10px;
	}
}
---------------------------------------------解除■■ */





/* --------------------------------------------
HEADER HEIGHT
--------------------------------------------- */
@media screen and ( width <= 781px ){
	:root{
		--headerHeight : calc( 100 var( --remBase ) );
	}
}
@media print , screen and ( width > 781px ){
	:root{
		--headerHeight : calc( 120 var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}


body{
	font-size : 1.6rem;
	@media print , screen and ( width > 781px ){
		padding-top : var( --headerHeight );
	}
}


/* --------------------------------------------
FOR WP EDITOR
--------------------------------------------- */
:is( body .is-layout-flow ) > *{
	/* margin-block-start : 25px; */
	margin-block-end : 0;
}
.entry-content.is-layout-flow > *{
  margin-block-start: 25px;
}

/* --------------------------------------------
FONT SIZE
--------------------------------------------- */
@media screen and ( width <= 781px ){
	:root{
		--fontCoef : * .1rem;
	}
}


/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	margin-inline : auto;
	@media screen and ( width <= 781px ){
		width : calc( var( --wrapperSize ) var( --viewportBase ) );
		&-sp{
			width : calc( var( --wrapperSize ) var( --viewportBase ) );
			margin-inline : auto;
		}
	}
	@media print , screen and ( width > 781px ){
		&-pc{
			margin-inline : auto;
		}
	}
	@media screen and ( 781px < width < 1240px ){
		width : calc( var( --wrapperSize ) var( --viewportBase ) );
		&-pc{
			width : calc( var( --wrapperSize ) var( --viewportBase ) );
		}
	}
	@media print , screen and ( width >= 1240px ){
		width : calc( ( var( --breakPoint ) * 1px ) );
		&-pc{
			width : calc( ( var( --wrapperSize ) * 1px ) );
		}
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	@media screen and ( width < 1240px ){
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media screen and ( width <= 781px ){
		&-sp{
			padding-inline : calc( var( --gutter ) var( --viewportBase ) );
		}
	}
	@media screen and ( 781px < width < 1240px ){
		&-pc{
			padding-inline : calc( var( --gutter ) var( --viewportBase ) );
		}
	}
	@media print , screen and ( width >= 1240px ){
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
		&-pc{
			padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
		}
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
.is-pc{
	@media screen and ( width <= 781px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 781px ){
		display : none;
	}
	@media print , screen and ( width >= 1240px ){
		display : none;
	}
}
.is-sp{
	@media print , screen and ( width > 781px ){
		display : none;
	}
}

/* --------------------------------------------
  COMMON
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-both]::before{
	white-space : pre;
	content : attr( data-both );
}
[data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
[data-after-sp]::after{
	@media screen and ( width <= 781px ){
		white-space : pre;
		content : attr( data-after-sp );
	}
}
[data-before-sp]::before{
	@media screen and ( width <= 781px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-after-pc]::after{
	@media print , screen and ( width > 781px ){
		white-space : pre;
		content : attr( data-after-pc );
	}
}
[data-before-pc]::before{
	@media print , screen and ( width > 781px ){
		white-space : pre;
		content : attr( data-before-pc );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
br.sp-space{
	@media screen and ( width <= 781px ){
		content : "";
		&::after{
			content : " ";
		}
	}
}
br.pc-space{
	@media print , screen and ( width > 781px ){
		content : "";
		&::after{
			content : " ";
		}
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
.lh-sp{
	@media screen and ( width <= 781px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
.lh-pc{
	@media print , screen and ( width > 781px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	display : grid;
	align-items : center;
	height : var( --headerHeight );
	background-color : white;
	.logo{
		display : block;
		width : fit-content;
		img{
			width : auto;
		}
	}
	@media screen and ( width <= 781px ){
		.logo{
			img{
				height : calc( 80 var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 781px ){
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		grid-template-columns : auto 1fr;
		width : 100%;
		.logo{
			img{
				height : calc( 80 var( --remBase ) );
			}
		}
	}
	@media screen and ( width < 1440px ){
		column-gap : calc( 40 * 100% / 1400 );
		padding-inline : calc( 20 * 100% / 1440 );
	}
	@media screen and ( width >= 1440px ){
		column-gap : 40px;
		padding-inline : calc( ( 100% - 1400px ) / 2 );
	}
}
#navInfo{
	p{
		letter-spacing : .1em;
	}
	a{
		display : grid;
		place-items : center;
		background-color : white;
		border : solid calc( 2 var( --remBase ) ) #ddd;
	}
	@media screen and ( width <= 781px ){
		margin-top : calc( 80 var( --remBase ) );
		p{
			font-size : 2.8rem;
			line-height : 1.5;
			text-align : center;
			text-indent : .1em;
		}
		a{
			width : calc( 480 var( --percentBase ) );
			height : calc( 64 var( --remBase ) );
			margin-inline : auto;
			margin-top : calc( 40 var( --remBase ) );
			font-size : 2.4rem;
			background-color : white;
			border-radius : calc( 8 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 781px ){
		p{
			font-size : 1.6rem;
			line-height : 1.4;
			text-align : center;
		}
		a{
			height : calc( 28 var( --remBase ) );
			margin-top : calc( 8 var( --remBase ) );
			border-radius : calc( 8 var( --remBase ) );
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	@media screen and ( width <= 781px ){
		position : fixed;
		top : 0;
		right : 0;
		z-index : 12;
		width : calc( 100 var( --viewportBase ) );
		height : calc( 100 var( --remBase ) );
		padding-block : calc( 30 var( --remBase ) );
		padding-inline : calc( 30 var( --viewportBase ) );
		overflow : hidden;
		background-color : rgb( 255 255 255 / .95 );
		> span:nth-of-type( 1 ){
			position : relative;
			display : block;
			width : 100%;
			height : 100%;
			font-size : 0;
			> span{
				position : absolute;
				left : 0;
				display : block;
				width : 100%;
				transition : all .4s;
				&:nth-of-type( 1 ){
					top : 0;
				}
				&:nth-of-type( 4 ){
					bottom : 0;
				}
			}
		}
		&[aria-expanded="true"]{
			> span:nth-of-type( 1 ){
				span:nth-of-type( 1 ){
					scale : 0;
					translate : calc( $( top ) var( --remBase ) ) 0;
				}
				span:nth-of-type( 2 ){
					rotate : -45deg;
				}
				span:nth-of-type( 3 ){
					rotate : 45deg;
				}
				span:nth-of-type( 4 ){
					scale : 0;
					translate : calc( -$( top ) var( --remBase ) ) 0;
				}
			}
		}
		span{
			span{
				height : calc( 4 var( --remBase ) );
				background-color : var( --primary );
				&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
					top : calc( 18 var( --remBase ) );
					left : calc( 2 * 100% / 40 );
					width : calc( 36 * 100% / 40 );
				}
			}
		}
		&[aria-expanded="true"]{
			span{
				span{
					left : 0;
					width : 100%;
					border-radius : 100vmax;
				}
			}
		}
	}
}
body:has( #menuBtn[aria-expanded="true"] ){
	@media screen and ( width <= 781px ){
		overflow : hidden;
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
#nav{
	@media screen and ( width <= 781px ){
		&[aria-hidden="false"]{
			translate : -100% 0;
		}
		&[aria-hidden="true"]{
			translate : 0 0;
		}
		position : fixed;
		top : 0;
		left : 100%;
		z-index : 11;
		width : 100%;
		height : 100dvh;
		padding-block : calc( 80 var( --remBase ) );
		padding-inline : calc( 25 var( --viewportBase ) );
		overflow-y : auto;
		background-color : var( --wp--preset--color--accent-01 );
		background-color : rgb( 255 255 255 / .95 );
		translate : 0 0;
		.scroll{
			overflow-y : auto;
		}
	}
	@media print , screen and ( width > 781px ){
		> div{
			display : grid;
			grid-template-columns : 1fr auto;
			column-gap : calc( 80 var( --remBase ) );
			align-items : center;
			height : 100%;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nav{
		@media screen and ( width <= 781px ){
			transition : translate .4s ease-in;
		}
	}
}

/* --------------------------------------------
GLOBAL NAVI
--------------------------------------------- */
#globalNav{
	@media screen and ( width <= 781px ){
		padding-inline : calc( 40 var( --percentBase ) );
		padding-top : calc( 40 var( --remBase ) );
		a{
			font-size : 3.2rem;
			line-height : 1.5;
			color : var( --wp--preset--color--text-03 );
		}
		li li a{
			display : grid;
			grid-template-columns : auto 1fr;
			align-items : baseline;
			justify-content : start;
			font-size : 2.8rem;
			&::before{
				content : "-";
			}
		}
		ul{
			margin-top : calc( 24 var( --remBase ) );
		}
		li li + li{
			margin-top : calc( 24 var( --remBase ) );
		}
		> li{
			padding-block : calc( 24 var( --remBase ) );
			border-bottom : solid 1px var( --wp--preset--color--text-03 );
			> a{
				display : block;
			}
			> div{
				> ul{
					> li{
						> a{
							column-gap : calc( 16 * 100% / 620 );
							margin-left : calc( 36 * 100% / 620 );
						}
					}
				}
			}
		}
	}
	@media print , screen and ( width > 781px ){
		display : grid;
		grid-template-columns : repeat( auto-fit , 1fr );
		grid-auto-flow : column;
		column-gap : calc( 12 var( --remBase ) );
		align-items : center;
		> li{
			position : relative;
			> a{
				display : block;
				padding-block : calc( 8 var( --remBase ) );
				font-size : 1.8rem;
				font-weight : 400;
				text-align : center;
				text-indent : .1em;
				letter-spacing : .1em;
			}
			+ li{
				border-left : solid 1px currentColor;
			}
			> div{
				position : absolute;
				top : 100%;
				left : 0;
				display : grid;
				grid-template-rows : 0fr;
				width : 100%;
				> ul{
					overflow : hidden;
					background-color : color-mix( in sRGB , var( --primary ) , transparent 40% );
				}
			}
		}
		li li + li{
			border-top : solid 1px white;
		}
		li li a{
			display : block;
			padding-block : calc( 16 var( --remBase ) );
			padding-inline : 2em;
			font-size : 1.6rem;
			color : white;
			letter-spacing : .1em;
		}
	}
}
@media ( hover : hover ){
	#globalNav{
		@media print , screen and ( width > 781px ){
			> li:hover{
				> div{
					grid-template-rows : 1fr;
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#globalNav{
		@media print , screen and ( width > 781px ){
			> li{
				> div{
					transition : grid-template-rows var( --transitionBase );
				}
			}
		}
	}
}

/* --------------------------------------------
HOME
 MAIN VISUAL
--------------------------------------------- */
#mv{
	font-size : 0;
	.splide__slide{
		picture{
			width : 100%;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
	}
	.splide__pagination{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		li{
			display : block;
			width : 100%;
			height : 100%;
		}
		button{
			width : 100%;
			height : 100%;
			&:not( .is-active ){
				background-color : #f1f2ed;
			}
			&.is-active{
				background-color : var( --primary );
			}
		}
	}
	@media screen and ( width <= 781px ){
		.splide__slide{
			picture{
				height : calc( 400 var( --remBase ) );
			}
		}
		.splide__pagination{
			grid-auto-rows : calc( 4 var( --remBase ) );
			grid-auto-columns : calc( 48 var( --percentBase ) );
			column-gap : calc( 4 var( --percentBase ) );
			margin-top : calc( 4 var( --remBase ) );
		}
	}
	@media screen and ( width < 1240px ){
		.splide__pagination{
			padding-inline : calc( var( --gutter ) var( --viewportBase ) );
		}
	}
	@media print , screen and ( width > 781px ){
		width : 100%;
		max-width : calc( 2000 var( --remBase ) );
		margin-inline : auto;
		.splide__slide{
			picture{
				width : 100%;
				height : calc( 640 var( --remBase ) );
			}
		}
		.splide__pagination{
			grid-auto-rows : calc( 4 var( --remBase ) );
			grid-auto-columns : calc( 80 var( --percentBase ) );
			column-gap : calc( 8 var( --percentBase ) );
			margin-top : calc( 8 var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 1240px ){
		.splide__pagination{
			padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#mv .splide__pagination button{
		transition : background var( --transitionBase );
	}
}