@charset "UTF-8";

/* --------------------------------------------
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( 90 var( --remBase ) )
;
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 160 var( --remBase ) )
;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	position : relative;
}
@media screen and ( width <= 750px ){
	body{
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	body{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}
body:not( .home ){
	padding-top : var( --headerHeight );
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	display : grid;
	grid-auto-flow : column;
	row-gap : 0;
}
.container > *{
	grid-column : 2;
}
@media screen and ( width <= 750px ){
	.container{
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.container{
		grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
@media screen and ( width <= 750px ){
	.container-sp{
		display : grid;
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
		grid-auto-flow : column;
		row-gap : 0;
	}
	.container-sp > *:not( .fluid-sp , .right-end-sp ){
		grid-column : 2;
	}
	.container-sp .fluid-sp{
		grid-column : 1/-1;
	}
	.container-sp .right-end-sp{
		grid-column : 2/-1;
	}
}
@media print , screen and ( width >= 1440px ){
	.container-pc{
		display : grid;
		grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		grid-auto-flow : column;
		row-gap : 0;
	}
	.container-pc > *:not( .fluid-pc , .right-end-pc ){
		grid-column : 2;
	}
	.container-pc .fluid-pc{
		grid-column : 1/-1;
	}
	.container-pc .right-end-pc{
		grid-column : 2/-1;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.wrap{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.wrap{
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
@media screen and ( width <= 750px ){
	.wrap-sp{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.wrap-pc{
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
@media screen and ( width <= 750px ){
	.wrap-left{
		width : 100%;
		padding-left : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-left .wrap-right , .wrap-left .wrap-right-sp{
		padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media print , screen and ( width > 750px ){
	.wrap-left{
		padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-left.wrap-right-pc{
		padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-left .wrap-right , .wrap-left .wrap-right-pc{
		padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
	}
}
@media screen and ( width <= 750px ){
	.wrap-left-sp{
		width : 100%;
		padding-left : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-left-sp .wrap-right , .wrap-left-sp .wrap-right-sp{
		padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media screen and ( width <= 750px ){
	.wrap-right{
		width : 100%;
		padding-right : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-right .wrap-left , .wrap-right .wrap-left-sp{
		padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media print , screen and ( width > 750px ){
	.wrap-right{
		padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-right.wrap-left-pc{
		padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
	.wrap-right .wrap-left , .wrap-right .wrap-left-pc{
		padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
	}
}
@media screen and ( width <= 750px ){
	.wrap-right-sp{
		width : 100%;
		padding-right : calc( var( --gutter ) var( --viewportBase ) );
	}
	.wrap-right-sp .wrap-left , .wrap-right-sp .wrap-left-sp{
		padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
	}
}
@media screen and ( width <= 750px ){
	.wrap02{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.wrap02{
		padding-inline : max( calc( 140 var( --viewportBase ) ) , calc( ( 100% - 1160px ) / 2 ) );
	}
}

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

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

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

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	display : grid;
	align-items : center;
	height : var( --headerHeight );
	background-color : var( --yellow );
}
#header.is-transparent{
	background-color : transparent;
}
@media screen and ( width <= 750px ){
	#header{
		position : absolute;
		top : 0;
		left : 0;
		width : 100%;
	}
	#header .logo img{
		height : calc( 27 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		width : 100%;
	}
	#header .logo img{
		height : calc( 42.18 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1920px ){
	#header{
		grid-template-rows : auto auto;
		grid-template-columns : auto 1fr auto;
		grid-column : auto auto;
		row-gap : calc( 20 var( --remBase ) );
		align-content : center;
		align-items : center;
		padding-inline : max( 40px , calc( ( 100% - 1880px ) / 2 ) );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
	}
	#header #nav , #header .scroll{
		display : contents;
	}
	#header #navGlobal{
		grid-row : 2;
		grid-column : 1/-1;
		justify-content : end;
	}
	#header #navGlobal li:last-child a{
		padding-right : 0;
	}
	#header #navContacts{
		grid-row : 1;
		grid-column : 3;
	}
	#header #navContacts ul{
		justify-content : end;
	}
}
@media screen and ( width >= 1920px ){
	#header{
		grid-template-columns : auto auto;
		justify-content : space-between;
		padding-inline : 20px;
	}
	#header .scroll{
		display : flex;
		flex-wrap : wrap-reverse;
		row-gap : calc( 20 var( --remBase ) );
		column-gap : calc( 16 var( --remBase ) );
		justify-content : end;
	}
	#header #navGlobal{
		justify-content : start;
	}
}
@media screen and ( width <= 750px ){
	#menuBtn{
		z-index : 12;
	}
	#menuBtn span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		transition : all .4s;
	}
	#menuBtn span:first-of-type{
		top : 0;
	}
	#menuBtn span:last-of-type{
		bottom : 0;
	}
	#menuBtn[aria-expanded="true"] span{
		top : 50%;
		translate : 0 - 50%;
	}
	#menuBtn[aria-expanded="true"] span:first-of-type{
		rotate : -45deg;
	}
	#menuBtn[aria-expanded="true"] span:last-of-type{
		rotate : 45deg;
	}
	#menuBtn{
		position : fixed;
		top : calc( 25 var( --remBase ) );
		right : calc( 13 var( --viewportBase ) );
		width : calc( 46 var( --viewportBase ) );
		height : calc( 46 var( --remBase ) );
		border-color : transparent;
		border-style : solid;
		border-inline-width : calc( 10 var( --remBase ) );
		border-block-width : calc( 17 var( --remBase ) );
	}
	#menuBtn span{
		height : calc( 2 var( --remBase ) );
	}
	#menuBtn[aria-expanded="false"]{
		background-color : black;
	}
	#menuBtn[aria-expanded="false"] span{
		background-color : white;
	}
	#menuBtn[aria-expanded="false"] span:nth-of-type( 2 ){
		width : calc( 20 * 100% / 26 );
	}
	#menuBtn[aria-expanded="true"]{
		background-color : transparent;
	}
	#menuBtn[aria-expanded="true"] span{
		background-color : black;
	}
}
@media screen and ( width <= 750px ){
	body:has( #nav:not( [inert] ) ){
		overflow : hidden;
	}
	#nav:not( [inert] ){
		pointer-events : auto;
		opacity : 1;
	}
	#nav[inert]{
		pointer-events : none;
		opacity : 0;
	}
	#nav{
		position : fixed;
		z-index : 11;
	}
	#nav .scroll{
		height : 100%;
		overflow-y : auto;
	}
	#nav{
		top : 0;
		width : 100%;
		height : 100dvh;
		background-color : var( --yellow );
	}
	#nav .scroll{
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 32 var( --viewportBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#nav{
			transition : opacity var( --transitionBase );
		}
	}
}
#navGlobal a{
	display : grid;
	grid-auto-flow : column;
	column-gap : calc( 7 var( --remBase ) );
	align-items : center;
	font-weight : 700;
	line-height : 1.5;
}
#navGlobal a[target]::after{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/icon/_blank.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#navGlobal li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#navGlobal a{
		justify-content : start;
		font-size : 2.5rem;
	}
	#navGlobal a[target]::after{
		height : calc( 18 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#navGlobal{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
	}
	#navGlobal li{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
	}
	#navGlobal li + li::before{
		display : block;
		font-size : 1.8rem;
		font-weight : 700;
		line-height : 1.5;
		content : "｜";
	}
	#navGlobal a{
		justify-content : center;
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
	}
	#navGlobal a[target]::after{
		height : calc( 18 var( --remBase ) );
	}
}
#navContacts > ul{
	display : grid;
}
#navContacts > ul a{
	display : grid;
	align-items : center;
	width : 100%;
	height : 100%;
	font-weight : 700;
}
#navContacts .line{
	color : white;
	background-color : var( --green );
}
@media screen and ( width <= 750px ){
	#navContacts{
		margin-top : calc( 40 var( --remBase ) );
	}
	#navContacts p{
		text-align : center;
	}
	#navContacts p:nth-of-type( 1 ){
		padding-block : calc( 16 var( --remBase ) );
		font-size : 2.8rem;
		font-weight : 800;
		line-height : 1.4;
		text-align : center;
		border-block : solid 1px black;
	}
	#navContacts p:nth-of-type( 2 ){
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
		font-weight : 700;
		line-height : 1.3;
	}
	#navContacts > dl{
		display : grid;
		grid-template-columns : auto auto;
		row-gap : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#navContacts > dl > dt , #navContacts > dl > dd:nth-of-type( 1 ){
		grid-row : 1;
		font-family : Inter , sans-serif;
		font-size : 3.6rem;
		font-weight : 700;
	}
	#navContacts > dl > dt{
		justify-self : end;
		padding-right : .25em;
	}
	#navContacts > dl > dd:nth-of-type( 1 ){
		justify-self : start;
	}
	#navContacts > dl > dd:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 1/-1;
	}
	#navContacts dl dl{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
	}
	#navContacts dl dl dt , #navContacts dl dl dd{
		font-size : 1.2rem;
		font-weight : 500;
		line-height : 1.5;
	}
	#navContacts dl dl dt:nth-of-type( n+2 ){
		margin-left : .5em;
	}
	#navContacts dl dl ul{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
	}
	#navContacts dl dl ul li + li::before{
		content : "、";
	}
	#navContacts > ul{
		grid-template-columns : calc( 235 var( --percentBase ) )  1fr;
		grid-auto-rows : calc( 80 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#navContacts > ul a{
		color : white;
	}
	#navContacts .contact{
		justify-content : center;
		font-size : 2.2rem;
		background-color : black;
	}
	#navContacts .line{
		justify-content : center;
		font-size : 1.8rem;
		line-height : 1.2;
	}
}
@media print , screen and ( width > 750px ){
	#navContacts > ul{
		grid-template-columns : repeat( 2 , calc( 160 var( --remBase ) ) );
		grid-auto-rows : calc( 55 var( --remBase ) );
	}
	#navContacts > ul a{
		justify-content : center;
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#navContacts .contact{
		background-color : white;
	}
}
#header.is-transparent .logo img{
	filter : var( --filterWhite );
}
@media print , screen and ( width > 750px ){
	#header.is-transparent{
		background-color : transparent;
	}
	#header.is-transparent #navGlobal li + li::before{
		color : white;
	}
	#header.is-transparent #navGlobal a{
		color : white;
	}
	#header.is-transparent #navGlobal a[target]::after{
		filter : var( --filterWhite );
	}
	#header.is-transparent .contact{
		background-color : var( --yellow );
		color: #000;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header{
		transition : background-color var( --transitionBase );
	}
	#header .logo img{
		transition : filter var( --transitionBase );
	}
	#header #navGlobal li + li::before , #header #navGlobal a{
		transition : color var( --transitionBase );
	}
	#header #navGlobal a[target]{
		transition : filter var( --transitionBase );
	}
	#header .contact{
		transition : background-color var( --transitionBase );
		color: #000;
	}
}
@media screen and ( width <= 750px ){
	#menuBtnClose{
		display : grid;
		place-items : center;
		width : auto;
		height : calc( 72 var( --remBase ) );
		aspect-ratio : 1;
		margin-inline : auto;
		margin-top : calc( 48 var( --remBase ) );
	}
	#menuBtnClose img{
		height : calc( 21.73 var( --remBase ) );
	}
}

/* --------------------------------------------
HEAD
--------------------------------------------- */
#head{
	position : relative;
	overflow-x : clip;
	color : var( --title );
}
#head::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	width : 100%;
	font-size : 0;
	content : "";
	background-color : var( --yellow );
}
#head :where( h1 , h2 )::before{
	font-family : Afacad , sans-serif;
	font-weight : 700;
	line-height : 1;
}
#head :where( h1 , h2 ) span{
	display : grid;
	grid-auto-flow : column;
	column-gap : .25em;
	align-items : start;
	justify-content : start;
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#head{
		padding-bottom : calc( 34 var( --remBase ) );
	}
	#head::before{
		height : calc( 41 var( --remBase ) );
	}
	#head :where( h1 , h2 )::before{
		display : block;
		margin-bottom : calc( 4 var( --remBase ) );
		font-size : 6rem;
	}
	#head :where( h1 , h2 ) span{
		font-size : 1.6rem;
	}
}
@media print , screen and ( width > 750px ){
	#head{
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : calc( 16 var( --remBase ) );
		align-items : start;
		padding-top : calc( 31 var( --remBase ) );
		padding-bottom : calc( 25 var( --remBase ) );
	}
	#head::before{
		height : calc( 111 var( --remBase ) );
	}
	#head :where( h1 , h2 ){
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 16 var( --remBase ) );
		align-items : start;
		justify-content : start;
	}
	#head :where( h1 , h2 )::before{
		font-size : 12rem;
	}
	#head :where( h1 , h2 ) span{
		margin-top : calc( 43 var( --remBase ) );
		font-size : 2.2rem;
	}
}
#breadcrumb ol{
	display : flex;
	flex-wrap : wrap;
	justify-content : end;
}
#breadcrumb li{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
}
#breadcrumb li + li::before{
	white-space : pre;
	content : "　／　";
}
#breadcrumb a , #breadcrumb span{
	display : block;
}
#breadcrumb li + li::before , #breadcrumb a , #breadcrumb span{
	line-height : 1.3;
}
#breadcrumb a{
	color : var( --title );
}
@media screen and ( width <= 750px ){
	#breadcrumb{
		margin-top : calc( 24 var( --remBase ) );
	}
	#breadcrumb li + li::before , #breadcrumb a , #breadcrumb span{
		font-size : 1.2rem;
	}
}
@media print , screen and ( width > 750px ){
	#breadcrumb{
		padding-top : calc( 51 var( --remBase ) );
	}
	#breadcrumb li + li::before , #breadcrumb a , #breadcrumb span{
		font-size : 1.6rem;
	}
}