@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width < 768px ){
	:root{
		--headerHeight : calc( 80 * var( --remBase ) );
	}
}
@media print , screen and ( width >= 768px ){
	:root{
		--headerHeight : calc( 140 * var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
	background-color : #f1ede9;
	@media screen and ( width < 768px ){
		font-size : calc( 16 * var( --remBase ) );
	}
	@media print , screen and ( width >= 768px ){
		font-size : calc( 16 * var( --remBase ) );
	}
}

/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width < 768px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 768px ){
	:root{
		--wrapPaddingInline : max( calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
	}
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width < 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width >= 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap02{
	@media screen and ( width < 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
	@media print , screen and ( width >= 768px ){
		padding-inline : max( calc( ( 100% - 932px ) / 2 ) , calc( 24 * var( --viewportBase ) ) );
	}
}
:root{
	--containerWidth : calc( var( --contentWidth ) * var( --viewportBase ) );
}
.container{
	width : var( --containerWidth );
	margin-inline : auto;
}
.container-sp{
	@media screen and ( width < 768px ){
		width : var( --containerWidth );
		margin-inline : auto;
	}
}
.container-pc{
	@media print , screen and ( width >= 768px ){
		width : var( --containerWidth );
		margin-inline : auto;
	}
}
@media screen and ( width < 768px ){
	:root{
		--gridContainerGutter : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 768px ){
	:root{
		--gridContainerGutter : 1fr;
	}
}
:root{
	--containerWidth : calc( var( --contentWidth ) * var( --viewportBase ) );
	--gridContainerGridTemplateColumns : var( --gridContainerGutter ) var( --containerWidth ) var( --gridContainerGutter );
	--gridContainerColumnCenter : 2;
	--gridContainerLeftStartEnd : 3;
	--gridContainerRightEndStart : 2;
}
.gridContainer{
	display : grid;
	grid-template-columns : var( --gridContainerGridTemplateColumns );
	grid-auto-flow : column;
	row-gap : 0;
	>*:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.fluid{
		grid-column : 1/-1;
	}
	.left-start{
		grid-column : 1 / 3;
	}
	.right-end{
		grid-column : 2 / 4;
	}
}
@media screen and ( width < 768px ){
	.gridContainer-sp{
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
		>*:not( .fluid-sp , .left-start-sp , .right-end-sp ){
			grid-column : var( --gridContainerColumnCenter );
		}
		.fluid-sp{
			grid-column : 1/-1;
		}
		.left-start-sp{
			grid-column : 1 / 3;
		}
		.right-end-sp{
			grid-column : 2 / 4;
		}
	}
}

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

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visually-hidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}
.visually-hidden-text{
	overflow : hidden;
	color : transparent;
}
[hidden]{
	display : none;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
.full-sp{
	@media screen and ( width < 768px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width >= 768px ){
		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-before-sp]::before{
	@media screen and ( width < 768px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width < 768px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
@media print , screen and ( width >= 768px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
[data-outline]{
	position : relative;
	z-index : 0;
	display : inline-block;
	&::before{
		position : absolute;
		inset : 0;
		z-index : -1;
		white-space : pre;
		content : attr( data-outline );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
.sp-space{
	@media screen and ( width < 768px ){
		&::after{
			content : " ";
		}
	}
	@media print , screen and ( width >= 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-space{
	@media screen and ( width < 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width >= 768px ){
		&::after{
			content : " ";
		}
	}
}
.sp-spaceEm{
	@media screen and ( width < 768px ){
		&::after{
			content : "　";
		}
	}
	@media print , screen and ( width >= 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-spaceEm{
	@media screen and ( width < 768px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width >= 768px ){
		&::after{
			content : "　";
		}
	}
}

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	align-items : center;
	width : 100%;
	height : var( --headerHeight );
	> .logo{
		display : block;
		width : fit-content;
	}
	@media screen and ( width < 768px ){
		> .logo{
			img{
				height : calc( 41.32 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		grid-template-columns : auto 1fr auto calc( 82 * var( --remBase ) );
		padding-inline : max( calc( ( 100% - 1432px ) / 2 ) , calc( 40 * var( --viewportBase ) ) );
		> .logo{
			grid-row : 1;
			grid-column : 1;
			img{
				height : calc( 59.33 * var( --remBase ) );
			}
		}
	}
}
.link-contact01 , .link-line01{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
	border-radius : calc( 10 * var( --remBase ) );
	> span{
		&:nth-of-type( 1 ){
			font-weight : 500;
			color : white;
		}
		&:nth-of-type( 2 ){
			position : relative;
			width : auto;
			aspect-ratio : 1;
			overflow : hidden;
			background-color : white;
			border-radius : 50%;
			img{
				opacity : 0;
			}
			&::after{
				position : absolute;
				top : 0;
				left : 0;
				display : block;
				width : 100%;
				height : 100%;
				font-size : 0;
				content : "";
				background-image : url( "../images/ui/arrow/right02.svg" );
				background-repeat : no-repeat;
				background-position : center;
				translate : 0 0;
			}
		}
	}
}
.link-contact01{
	background-color : var( --orange );
	outline : solid calc( 2 * var( --remBase ) ) var( --orange );
	outline-offset : calc( -2 * var( --remBase ) );
	> span{
		&:nth-of-type( 2 ){
			&::after{
				filter : var( --filterOrange );
			}
		}
	}
}
.link-line01{
	background-color : var( --green );
	outline : solid calc( 2 * var( --remBase ) ) var( --green );
	outline-offset : calc( -2 * var( --remBase ) );
	> span{
		&:nth-of-type( 2 ){
			&::after{
				filter : var( --filterGreen );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ) and ( hover : hover ){
	.link-contact01 , .link-line01{
		> span:nth-of-type( 2 )::after{
			transition : translate .6s linear;
			will-change : translate;
		}
		&:hover > span:nth-of-type( 2 )::after{
			transition : none;
			animation : arrowMarquee .6s linear;
		}
	}
}
@keyframes arrowMarquee{
	0%{
		translate : 0 0;
	}
	50%{
		translate : 100% 0;
	}
	50.01%{
		translate : -100% 0;
	}
	100%{
		translate : 0 0;
	}
}
@keyframes arrowMarqueeReverse{
	0%{
		translate : 0 0;
	}
	50%{
		translate : -100% 0;
	}
	50.01%{
		translate : 100% 0;
	}
	100%{
		translate : 0 0;
	}
}
#headerLinks{
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-row : 1;
		grid-column : 3;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
		> li:not( [class] ){
			a{
				display : block;
				padding-inline : calc( 12 / 16 * 1em - .08em );
				font-size : calc( 16 * var( --remBase ) );
				text-align : center;
				text-indent : .04em;
				letter-spacing : .04em;
				white-space : pre;
			}
		}
		.link-contact01 , .link-line01{
			column-gap : calc( 8 * var( --remBase ) );
			height : calc( 58 * var( --remBase ) );
			padding-inline : calc( 20 * var( --remBase ) );
			white-space : pre;
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 16 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					height : calc( 18 * var( --remBase ) );
					&::after{
						background-size : auto calc( 8 * var( --remBase ) );
					}
				}
			}
		}
		.contact{
			margin-left : calc( 12 * var( --remBase ) );
		}
		.line{
			margin-left : calc( 16 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	&[aria-expanded="true"]{
		overflow : hidden;
	}
	position : fixed;
	z-index : 12;
	display : grid;
	grid-template-columns : 100%;
	grid-auto-flow : row;
	align-content : center;
	align-items : center;
	justify-content : center;
	width : auto;
	aspect-ratio : 1;
	overflow : hidden;
	background-color : white;
	border-radius : calc( 10 * var( --remBase ) );
	> span:nth-of-type( 1 ){
		position : relative;
		display : block;
		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{
		&:nth-of-type( 1 ){
			> span{
				height : calc( 2 * var( --remBase ) );
				border-radius : 100vma;
			}
		}
		&:nth-of-type( 2 ){
			display : block;
			font-family : Helvetica , Arial , sans-serif;
			text-align : center;
		}
	}
	&[aria-expanded="false"]{
		background-color : white;
		> span{
			&:nth-of-type( 1 ){
				> span{
					background-color : var( --orange );
				}
			}
			&:nth-of-type( 2 ){
				color : var( --base );
			}
		}
	}
	&[aria-expanded="true"]{
		background-color : var( --base );
		> span{
			&:nth-of-type( 1 ){
				> span{
					background-color : white;
				}
			}
			&:nth-of-type( 2 ){
				color : white;
			}
		}
	}
	@media screen and ( width < 768px ){
		top : calc( 18 * var( --remBase ) );
		right : calc( 20 * var( --viewportBase ) );
		row-gap : calc( 6 * var( --remBase ) );
		height : calc( 48 * var( --remBase ) );
		> span{
			&:nth-of-type( 1 ){
				width : calc( 14 * 100% / 48 );
				height : calc( 12 * var( --remBase ) );
				margin-inline : auto;
				> span{
					&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
						top : calc( 5 * var( --remBase ) );
					}
				}
			}
			&:nth-of-type( 2 ){
				font-size : calc( 10 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		top : calc( 40 * var( --remBase ) );
		left : calc( 50% + min( 658px , 658 * 100% / 1512 ) );
		row-gap : calc( 7 * var( --remBase ) );
		height : calc( 58 * var( --remBase ) );
		> span{
			&:nth-of-type( 1 ){
				width : calc( 16 * 100% / 58 );
				height : calc( 15 * var( --remBase ) );
				margin-inline : auto;
				> span{
					&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
						top : calc( 6.5 * var( --remBase ) );
					}
				}
			}
			&:nth-of-type( 2 ){
				font-size : calc( 11 * var( --remBase ) );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#menuBtn{
		@media screen and ( width < 768px ){
			transition : background var( --transitionBase );
		}
	}
}

/* --------------------------------------------
NAVIGATION
--------------------------------------------- */
#nav{
	body:has( &:not( [inert] ) ){
		overflow : hidden;
	}
	&:not( [inert] ){
		pointer-events : auto;
		visibility : visible;
		opacity : 1;
	}
	&[inert]{
		pointer-events : none;
		visibility : hidden;
		opacity : 0;
	}
	position : fixed;
	top : 0;
	left : 0;
	z-index : 11;
	width : 100%;
	height : 100dvh;
	background-color : white;
	.scroll{
		height : 100%;
		overflow-y : auto;
	}
	.logo{
		display : block;
		width : fit-content;
	}
	@media screen and ( width < 768px ){
		.scroll{
			padding-top : calc( 18 * var( --remBase ) );
			padding-bottom : calc( 70 * var( --remBase ) );
		}
		.logo{
			img{
				height : calc( 41.32 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		overflow-y : auto;
		.scroll{
			display : grid;
			grid-template-rows : auto calc( 56 * var( --remBase ) ) auto calc( 10 * var( --remBase ) ) auto calc( 48 * var( --remBase ) ) auto calc( 96 * var( --remBase ) ) auto;
			grid-template-columns : calc( 308 * var( --contentBase ) ) calc( 157 * var( --contentBase ) ) 1fr;
			align-content : center;
			padding-inline : max( calc( ( 100% - 1280px ) / 2 ) , calc( 60 * var( --viewportBase ) ) );
			padding-top : calc( 200 * var( --remBase ) );
			padding-bottom : calc( 80 * var( --remBase ) );
		}
		.logo{
			grid-row : 1;
			grid-column : 1;
			img{
				height : calc( 64 * var( --remBase ) );
			}
		}
		.address{
			grid-row : 3;
			grid-column : 1;
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.6;
		}
		.map{
			display : grid;
			grid-row : 5;
			grid-column : 1;
			grid-auto-flow : column;
			column-gap : calc( 12 * 100% / 308 );
			align-items : center;
			justify-content : start;
			font-size : calc( 18 * var( --remBase ) );
			text-decoration : underline;
			&::after{
				display : block;
				width : auto;
				height : calc( 24 * var( --remBase ) );
				aspect-ratio : 1;
				font-size : 0;
				content : "";
				background : url( "../images/ui/arrow/right_top01.svg" ) left top / contain no-repeat;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nav{
		transition : opacity .4s linear , visibility .4s linear;
	}
}
#navGlobal{
	@media screen and ( width < 768px ){
		padding-inline : calc( 12 * var( --contentBase ) );
		margin-top : calc( 74 * var( --remBase ) );
		li li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		a{
			font-size : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-template-columns : 1fr auto;
		grid-row : 1/8;
		grid-column : 3;
		align-self : start;
		justify-content : space-between;
		padding-top : calc( 44 * var( --remBase ) );
		padding-right : calc( 72 * 100% / 887 );
		p{
			font-size : calc( 20 * var( --remBase ) );
		}
		> li{
			> ul{
				margin-top : calc( 56 * var( --remBase ) );
			}
			&:nth-child( 1 ){
				> ul{
					display : grid;
					grid-auto-flow : column;
					column-gap : calc( 72 * var( --remBase ) );
					align-items : start;
					justify-content : start;
					> li{
						padding-left : calc( 20 * var( --remBase ) );
						border-left : solid 1px color-mix( in sRGB , var( --base ) 20% , transparent );
						li + li{
							margin-top : calc( 20 * var( --remBase ) );
						}
					}
				}
			}
			&:nth-child( 2 ){
				li + li{
					margin-top : calc( 20 * var( --remBase ) );
				}
			}
		}
		a{
			font-size : calc( 14 * var( --remBase ) );
		}
	}
}
#navContacts{
	.contact{
		margin-top : calc( 32 * var( --remBase ) );
	}
	.line{
		margin-top : calc( 12 * var( --remBase ) );
	}
	.link-contact01 , .link-line01{
		height : calc( 58 * var( --remBase ) );
		> span{
			&:nth-of-type( 1 ){
				font-size : calc( 16 * var( --remBase ) );
			}
			&:nth-of-type( 2 ){
				height : calc( 18 * var( --remBase ) );
			}
		}
	}
	@media screen and ( width < 768px ){
		padding-inline : calc( 12 * var( --contentBase ) );
		margin-top : calc( 48 * var( --remBase ) );
		.links-tel01{
			column-gap : calc( 14 * 100% / 326 );
		}
		.contact{
			margin-top : calc( 32 * var( --remBase ) );
		}
		.line{
			margin-top : calc( 12 * var( --remBase ) );
		}
		.link-contact01 , .link-line01{
			column-gap : calc( 8 * 100% / 326 );
		}
	}
	@media print , screen and ( width >= 768px ){
		grid-row : 7;
		grid-column : 1;
		.links-tel01{
			column-gap : calc( 14 * 100% / 308 );
		}
		.link-contact01 , .link-line01{
			column-gap : calc( 8 * 100% / 308 );
		}
	}
}
#navFooter{
	ul{
		display : grid;
		grid-auto-flow : column;
		justify-content : start;
		a{
			color : color-mix( in sRGB , var( --base ) 40% , transparent );
			text-decoration : underline;
		}
	}
	@media screen and ( width < 768px ){
		padding-inline : calc( 12 * var( --contentBase ) );
		margin-top : calc( 32 * var( --remBase ) );
		ul{
			column-gap : calc( 12 * 100% / 326 );
			a{
				font-size : calc( 12 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : calc( 465 * var( --contentBase ) ) 1fr auto;
		grid-row : 9;
		grid-column : 1/-1;
		align-items : end;
		color : color-mix( in sRGB , var( --base ) 40% , transparent );
		p:nth-of-type( 1 ){
			grid-row : 1;
			grid-column : 1;
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.5;
		}
		dl{
			display : grid;
			grid-row : 2;
			grid-column : 1;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : start;
		}
		dt , dd{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.5;
		}
		ul{
			display : grid;
			grid-row : 1/-1;
			grid-column : 2;
			column-gap : calc( 32 * var( --remBase ) );
			align-self : end;
			a{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		p:nth-of-type( 2 ){
			grid-row : 1/-1;
			grid-column : 3;
			font-size : calc( 14 * var( --remBase ) );
			text-align : right;
		}
	}
}