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

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	@media screen and ( width <= 800px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 800px ){
		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 <= 800px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
.container-pc{
	@media print , screen and ( width > 800px ){
		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 <= 800px ){
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 800px ){
		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 <= 800px ){
		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 >= 1440px ){
		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 <= 800px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 800px ){
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
.wrap-sp{
	@media screen and ( width <= 800px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
.wrap-pc{
	@media print , screen and ( width > 800px ){
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
.is-sp{
	@media print , screen and ( width > 800px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 800px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 800px ){
		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 <= 800px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 800px ){
		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 <= 800px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 800px ){
	[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 > 800px ){
	[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 <= 800px ){
		content : "";
		&::after{
			content : " ";
		}
	}
}
br.pc-space{
	@media print , screen and ( width > 800px ){
		content : "";
		&::after{
			content : " ";
		}
	}
}
br.sp-spaceEm{
	@media screen and ( width <= 800px ){
		content : "";
		&::after{
			content : "　";
		}
	}
}
br.pc-spaceEm{
	@media print , screen and ( width > 800px ){
		content : "";
		&::after{
			content : "　";
		}
	}
}

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

/* --------------------------------------------
 Lang set
  --------------------------------------------- */
.lang-wrap {

}
@media screen and ( width <= 800px ){
	.lang-wrap {
		position: relative;
	}
		.lang-wrap .lang-select {
			position: absolute;
			top: calc( -100 var( --remBase ) );
			right: 0;
			padding-right: 2em;
			background-position:right calc( 8 var( --remBase ) ) top 50%
		}
}
@media print , screen and ( width > 800px ){
	.lang-wrap {
		position: relative;
	}
		.lang-wrap .lang-select {
			position: absolute;
			top: calc( -140 var( --remBase ) );
			right: 0;
			padding-right: 2em;
			background-position:right calc( 8 var( --remBase ) ) top 50%
		}
}

.lang-select{
	background-image : url( "../images/ui/arrow/down02.svg" );
	background-repeat : no-repeat;
	background-position : right calc( 19 var( --remBase ) ) top 50%;
	background-size : auto calc( 9 var( --remBase ) );
	background-color: #f2f2f7;
}