@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
:root{
	@media screen and ( width <= 750px ){
		--headerHeight : calc( 55 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		--headerHeight : calc( 70 * var( --remBase ) );
	}
}
:root{
	@media screen and ( width <= 750px ){
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
	@media print , screen and ( width > 750px ){
		font-size : min( calc( 10 * 100vw / var( --breakPoint ) ) , 10px );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	position : relative;
	padding-top : var( --headerHeight );
	@media screen and ( width <= 750px ){
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	@media print , screen and ( width > 750px ){
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) * var( --viewportBase ) );
	}
	@media print , screen and ( width > 750px ){
		width : min( 100% , calc( var( --breakPoint ) * 1px ) );
		padding-inline : min( calc( var( --gutter ) * 1px ) , calc( var( --gutter ) * var( --viewportBase ) ) );
		margin-inline : auto;
	}
}
.container-sp{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
.container-pc{
	@media print , screen and ( width > 750px ){
		width : min( 100% , calc( var( --breakPoint ) * 1px ) );
		padding-inline : min( calc( var( --gutter ) * 1px ) , calc( var( --gutter ) * var( --viewportBase ) ) );
		margin-inline : auto;
	}
}
.gridContainer{
	display : grid;
	grid-auto-flow : column;
	row-gap : 0;
	>*{
		grid-column : 2;
	}
	@media screen and ( width <= 750px ){
		grid-template-columns : calc( var( --gutter ) * var( --viewportBase ) ) calc( var( --wrapperSize ) * var( --viewportBase ) ) calc( var( --gutter ) * var( --viewportBase ) );
	}
	@media print , screen and ( width > 750px ){
		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 ) );
	}
}
.gridContainer-sp{
	@media screen and ( width <= 750px ){
		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;
		>*:not( .fluid-sp, .right-end-sp ){
			grid-column : 2;
		}
		.fluid-sp{
			grid-column : 1/-1;
		}
		.right-end-sp{
			grid-column : 2/-1;
		}
	}
}
.gridContainer-pc{
	@media print , screen and ( width >= 950px ){
		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;
		>*:not( .fluid-pc, .right-end-pc ){
			grid-column : 2;
		}
		.fluid-pc{
			grid-column : 1/-1;
		}
		.right-end-pc{
			grid-column : 2/-1;
		}
	}
}

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

/* --------------------------------------------
  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 >= 950px ){
		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
  --------------------------------------------- */
br.sp-space{
	@media screen and ( width <= 750px ){
		content : "";
		&::after{
			content : " ";
		}
	}
}
br.pc-space{
	@media print , screen and ( width > 750px ){
		content : "";
		&::after{
			content : " ";
		}
	}
}
br.sp-spaceEm{
	@media screen and ( width <= 750px ){
		content : "";
		&::after{
			content : "　";
		}
	}
}
br.pc-spaceEm{
	@media print , screen and ( width > 750px ){
		content : "";
		&::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;
	inset : 0;
	z-index : 10;
	display : grid;
	height : var( --headerHeight );
	background-color : white;
	.logo{
		display : block;
		width : fit-content;
		font-weight : 700;
		color : var( --blue );
	}
	@media screen and ( width <= 750px ){
		grid-template-columns : calc( 29 * var( --viewportBase ) ) auto 1fr;
		align-items : center;
		.logo{
			grid-row : 1;
			grid-column : 2;
			img{
				height : calc( 40.8 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		grid-template-columns : calc( 25 * 100% / 1440 ) auto 1fr min( 250px , calc( 250 * var( --viewportBase ) ) ) calc( 20 * 100% / 1440 );
		align-items : center;
		padding-inline : calc( ( 100% - 1440px ) / 2 );
		margin-inline : auto;
		.logo{
			grid-row : 1;
			grid-column : 2;
			img{
				height : calc( 51 var( --remBase ) );
			}
		}
		.logo + a{
			display : grid;
			grid-row : 1;
			grid-column : 4;
			place-items : center;
			height : calc( 37 * var( --remBase ) );
			font-size : 1.4rem;
			font-weight : 500;
			color : var( --primary );
			border : solid 1px currentColor;
			border-radius : 100vmax;
		}
	}
}