@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
:root{
	--fontFamily : "Zen Maru Gothic" , sans-serif;
}
.noto{
	font-family : "Noto Sans JP" , sans-serif;
	font-style : normal;
	font-weight : 900;
	font-optical-sizing : auto;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1440px ){
	:root{
		font-size : 10px;
	}
}
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 100 * var( --rem ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 90 * var( --rem ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
	@media screen and ( width <= 750px ){
		font-size : calc( 20 * var( --rem ) );
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 16 * var( --rem ) );
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewport ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewport ) );
	}
}
@media print , screen and ( width >= 1440px ){
	:root{
		--wrapPaddingInline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width <= 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.container{
	@media screen and ( width <= 750px ){
		width : 100%;
	}
	@media screen and ( 750px < width < 1440px ){
		width : 100%;
	}
	@media print , screen and ( width >= 1440px ){
		width : calc( var( --breakPoint ) * 1px );
		margin-inline : auto;
	}
}

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

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

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

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

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 1;
	z-index : 10;
	display : flex;
	align-items : center;
	justify-content : start;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
	.logo{
		display : block;
		flex-shrink : 0;
	}
	.mypage{
		display : grid;
		flex-shrink : 0;
		align-items : center;
		justify-content : center;
		font-weight : 900;
		color : white;
		background-color : var( --red );
	}
	@media screen and ( width <= 750px ){
		padding-inline : calc( 32 * var( --viewport ) );
		.logo{
			img{
				height : calc( 52 * var( --rem ) );
			}
		}
		.mypage{
			width : calc( 215 * var( --rem ) );
			height : calc( 45 * var( --rem ) );
			margin-left : calc( 68 * var( --rem ) );
			font-size : calc( 28 * var( --rem ) );
			border-radius : calc( 10 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		justify-content : center;
		.logo{
			img{
				height : calc( 51 * var( --rem ) );
			}
		}
		.mypage{
			width : calc( 139 * var( --rem ) );
			height : calc( 40 * var( --rem ) );
			margin-left : calc( 32 * var( --rem ) );
			font-size : calc( 16 * var( --rem ) );
			border-radius : calc( 10 * var( --rem ) );
		}
		.tel{
			display : block;
			flex-shrink : 0;
			margin-left : calc( 26 * var( --rem ) );
			img{
				height : calc( 19 * var( --rem ) );
			}
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	@media screen and ( width <= 750px ){
		position : fixed;
		top : calc( 30 * var( --rem ) );
		right : calc( 27 * var( --rem ) );
		z-index : 12;
		width : calc( 60 * var( --rem ) );
		height : calc( 45 * var( --rem ) );
		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 ){
				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{
			height : calc( 5 * var( --rem ) );
			background-color : var( --red );
			border-radius : 100vmax;
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				top : calc( 17.5 * var( --rem ) );
			}
		}
		&[aria-expanded="false"]{
			> span{
				&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
					left : calc( 10 * var( --rem ) );
					width : calc( 50 * var( --rem ) );
				}
				&:nth-of-type( 4 ){
					left : calc( 20 * var( --rem ) );
					width : calc( 40 * var( --rem ) );
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#menuBtn{
			@media ( prefers-reduced-motion : no-preference ){
				> span{
					transition : all .3s linear;
				}
			}
		}
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
#nav{
	@media screen and ( width <= 750px ){
		body:has( &:not( [inert] ) ){
			overflow : hidden;
		}
		position : fixed;
		top : 0;
		top : var( --headerHeight );
		left : 0;
		z-index : 11;
		width : 100%;
		height : calc( 100dvh - var( --headerHeight ) );
		overflow : hidden;
		background-color : var( --red );
		&[inert]{
			max-height : 0;
		}
		&:not( [inert] ){
			max-height : 100dvh;
		}
		> div{
			height : 100dvh;
			overflow-y : auto;
		}
		.scroll{
			padding-top : calc( 122 * var( --rem ) );
			padding-bottom : calc( 187 * var( --rem ) );
		}
		.navTel{
			display : block;
			width : fit-content;
			margin-inline : auto;
			margin-top : calc( 98 * var( --rem ) );
			img{
				height : calc( 31 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		margin-left : calc( 74 * var( --rem ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#nav{
			@media ( prefers-reduced-motion : no-preference ){
				transition : max-height .4s linear;
			}
		}
	}
}
#navGlobal{
	a{
		font-weight : 700;
	}
	@media screen and ( width <= 750px ){
		li + li{
			margin-top : calc( 64 * var( --rem ) );
		}
		a{
			display : block;
			width : fit-content;
			margin-inline : auto;
			font-size : calc( 40 * var( --rem ) );
			line-height : calc( 58 / 40 );
			color : white;
		}
	}
	@media print , screen and ( width > 750px ){
		display : flex;
		column-gap : calc( 37 * var( --rem ) );
		align-items : center;
		justify-content : start;
		a{
			font-size : calc( 16 * var( --rem ) );
			line-height : calc( 23 / 16 );
		}
	}
}