@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@font-face{
	font-family : "Noto Sans JP";
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : local( "Noto Sans JP" ) , local( "NotoSansJP" ) , local( "NotoSansJP-Regular" ) , url( "../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2" ) format( "woff2" );
	font-display : swap;
}
:root{
	--fontFamily : "Noto Sans JP" , sans-serif;
}
@font-face{
	font-family : Barlow;
	font-style : normal;
	font-weight : 700;
	src : url( "../fonts/Barlow/Barlow-Bold.woff2" ) format( "woff2" );
	font-display : swap;
}
.barlow{
	font-family : Barlow , sans-serif;
}

/* --------------------------------------------
UNIT
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--breakPoint : 375;
		--contentWidth : 350;
		--gutter : 12.5;
		--remBase : 100vw / 375;
		--viewportBase : 100% / var( --breakPoint );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--breakPoint : 1120;
		--contentWidth : 1080;
		--gutter : 20;
		--remBase : min( 1px , 100vw / 1120 );
		--viewportBase : min( 1px , 100% / var( --breakPoint ) );
	}
}
:root{
	--contentBase : 100% / var( --contentWidth );
}

/* --------------------------------------------
COLOR
--------------------------------------------- */
@property --base{
	syntax : "<color>";
	inherits : false;
	initial-value : black;
}
@property --blue{
	syntax : "<color>";
	inherits : false;
	initial-value : #234398;
}
@property --lightBlue{
	syntax : "<color>";
	inherits : false;
	initial-value : #d4edfc;
}
@property --green{
	syntax : "<color>";
	inherits : false;
	initial-value : #0b8078;
}
@property --lightGreen{
	syntax : "<color>";
	inherits : false;
	initial-value : #f6fee2;
}
@property --yellow{
	syntax : "<color>";
	inherits : false;
	initial-value : #f1ef64;
}
@property --red{
	syntax : "<color>";
	inherits : false;
	initial-value : #cc271f;
}
@property --lineColor{
	syntax : "<color>";
	inherits : false;
	initial-value : #00b900;
}

/* --------------------------------------------
FILTER COLOR
--------------------------------------------- */
@property --filterWhite{
	syntax : "*";
	inherits : false;
	initial-value : invert( 99% ) sepia( 28% ) saturate( 2% ) hue-rotate( 3deg ) brightness( 108% ) contrast( 100% );
}
@property --filterBlue{
	syntax : "*";
	inherits : false;
	initial-value : invert( 21% ) sepia( 53% ) saturate( 2150% ) hue-rotate( 208deg ) brightness( 94% ) contrast( 96% );
}
@property --filterGreen{
	syntax : "*";
	inherits : false;
	initial-value : invert( 29% ) sepia( 46% ) saturate( 5206% ) hue-rotate( 161deg ) brightness( 87% ) contrast( 91% );
}
@property --filterRed{
	syntax : "*";
	inherits : false;
	initial-value : invert( 32% ) sepia( 64% ) saturate( 1909% ) hue-rotate( 337deg ) brightness( 76% ) contrast( 114% );
}
@property --filterLineColor{
	syntax : "*";
	inherits : false;
	initial-value : invert( 41% ) sepia( 71% ) saturate( 1482% ) hue-rotate( 88deg ) brightness( 99% ) contrast( 111% );
}

/* --------------------------------------------
TRANSITION
--------------------------------------------- */
:root{
	--hoverDuration : .3s;
	--hoverTimingFunction : linear;
	--transitionBase : var( --hoverDuration ) var( --hoverTimingFunction )
;
}

/* --------------------------------------------
COLORS
--------------------------------------------- */
@property --colorIhinseiri{
	syntax : "<color>";
	inherits : false;
	initial-value : #4289a8;
}
@property --colorSeizenseiri{
	syntax : "<color>";
	inherits : false;
	initial-value : #098558;
}
@property --colorTokushuseiso{
	syntax : "<color>";
	inherits : false;
	initial-value : #d75e14;
}
@property --colorGomiyashiki{
	syntax : "<color>";
	inherits : false;
	initial-value : #911010;
}

/* --------------------------------------------
RESET
--------------------------------------------- */
:is( body:has( dialog[open] ) ){
	overflow : clip;
}


/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--containerWidth : 100%;
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--containerWidth : calc( var( --contentWidth ) * var( --viewportBase ) );
		--wrapPaddingInline : max( calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
	}
}
:root{
	--containerWidth : 100%;
	--gridContainerGutter : calc( var( --gutter ) * var( --viewportBase ) );
	--gridContainerGridTemplateColumns : var( --gridContainerGutter ) var( --containerWidth ) var( --gridContainerGutter );
	--gridContainerColumnCenter : 2;
	--gridContainerLeftStartEnd : 3;
	--gridContainerRightEndStart : 2;
}
.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 );
	}
}
.container{
	width : var( --containerWidth );
	@media print , screen and ( width > 768px ){
		.container{
			margin-inline : auto;
		}
	}
}
.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;
	}
}

/* --------------------------------------------
  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 >= 1120px ){
		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 );
	}
}

/* --------------------------------------------
RESET
--------------------------------------------- */
:where( button ){
	font : inherit;
	font-size : inherit;
	color : inherit;
	letter-spacing : inherit;
	touch-action : manipulation;
	cursor : pointer;
	background-color : transparent;
	border : 0;
	&:focus , &:focus-visible{
		outline : none;
	}
}
:where( dialog , [popover] ){
	inset : unset;
	max-width : unset;
	max-width : 100%;
	max-height : unset;
	max-height : 100%;
	color : inherit;
	background : none;
	border : none;
}
:where( dialog:not( [open] ), [popover]:not( :popover-open ) ){
	display : none;
}