@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 : "Noto Serif JP";
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : url( "..//fonts/Noto_Serif_JP/NotoSerifJP-VariableFont_wght.woff2" ) format( "woff2" );
	font-display : swap;
}
.serif{
	font-family : "Noto Serif JP" , serif;
}
@font-face{
	font-family : Barlow;
	font-style : normal;
	font-weight : 700;
	src : url( "../fonts/Barlow/Barlow-Bold.woff2" ) format( "woff2" );
}
.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;
}

/* --------------------------------------------
TOP PAGE
--------------------------------------------- */
/* --------------------------------------------
AREA
--------------------------------------------- */
#topAreas{
	background-color : #f1f8fe;
	h2{
		font-weight : 700;
	}
	.tabController{
		position : relative;
		display : grid;
		grid-template-columns : auto;
		grid-auto-flow : column;
		align-items : end;
		justify-content : center;
		margin-top : calc( 26 * var( --remBase ) );
		button{
			display : grid;
			place-items : center;
			padding-top : calc( 8 * var( --remBase ) );
			padding-bottom : calc( 8 * var( --remBase ) + 1px );
			line-height : 1.2;
			cursor : pointer;
			border : 0;
			border-top-style : solid;
			border-top-width : 1px;
			border-radius : calc( 6 * var( --remBase ) ) calc( 6 * var( --remBase ) ) 0 0;
			box-shadow : none;
			border-inline-style : solid;
			border-inline-width : 1px;
			&[aria-selected="true"]{
				font-weight : 700;
				white-space : pre;
				background-color : white;
				border-top-color : #e9e9e9;
				border-inline-color : #e9e9e9;
			}
			&[aria-selected="false"]{
				background-color : #dcdcdc;
				border-top-color : #dcdcdc;
				border-inline-color : #dcdcdc;
			}
		}
		> li:nth-child( 1 ) button{
			color : var( --colorIhinseiri );
		}
		> li:nth-child( 2 ) button{
			color : var( --colorSeizenseiri );
		}
		> li:nth-child( 3 ) button{
			color : var( --colorTokushuseiso );
		}
		> li:nth-child( 4 ) button{
			color : var( --colorGomiyashiki );
		}
	}
	.panelBox{
		margin-top : -1px;
		background-color : white;
		outline : solid 1px #e9e9e9;
		outline-offset : -1px;
	}
	h3{
		font-weight : 700;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 35 * var( --remBase ) );
		padding-bottom : calc( 55 * var( --remBase ) );
		h2{
			font-size : calc( 28.8 * var( --remBase ) );
			line-height : calc( 41 / 28.8 );
		}
		> p{
			margin-top : calc( 25 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.8;
			text-align : left;
		}
		.tabController{
			grid-template-columns : repeat( 4 , 1fr );
			column-gap : calc( 4 * var( --contentBase ) );
			justify-content : space-between;
			button{
				width : 100%;
				&[aria-selected="true"]{
					font-size : calc( 18.2 * var( --remBase ) );
				}
				&[aria-selected="false"]{
					font-size : calc( 15.2 * var( --remBase ) );
				}
			}
		}
		.panelBox{
			padding-top : calc( 28 * var( --remBase ) );
			padding-bottom : calc( 44 * var( --remBase ) );
		}
		h3{
			margin-bottom : calc( 44 * var( --remBase ) );
			font-size : calc( 28.8 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 42 * var( --remBase ) );
		padding-bottom : calc( 60 * var( --remBase ) );
		h2{
			font-size : calc( 41 * var( --remBase ) );
			line-height : calc( 61 / 41 );
		}
		> p{
			margin-top : calc( 40 * var( --remBase ) );
			font-size : calc( 19.2 * var( --remBase ) );
			line-height : calc( 34.56 / 19.2 );
		}
		.tabController{
			column-gap : calc( 5 * var( --contentBase ) );
			button{
				padding-inline : calc( 18 * var( --remBase ) );
				&[aria-selected="true"]{
					font-size : calc( 19.2 * var( --remBase ) );
				}
				&[aria-selected="false"]{
					font-size : calc( 15.2 * var( --remBase ) );
				}
			}
		}
		.panelBox{
			padding-top : calc( 28 * var( --remBase ) );
			padding-bottom : calc( 64 * var( --remBase ) );
			border-radius : calc( 16 * var( --remBase ) );
		}
		h3{
			margin-bottom : calc( 24 * var( --remBase ) );
			font-size : calc( 28.8 * var( --remBase ) );
			line-height : calc( 41 / 28.8 );
		}
	}
}
.link-areas{
	> li{
		background-color : var( --linkAreaColor );
		> h3 , h4{
			font-weight : 700;
			color : white;
			text-align : center;
		}
		> ul{
			display : flex;
			flex-wrap : wrap;
			> li{
				> a , > button{
					display : grid;
					place-items : center;
					width : 100%;
					height : 100%;
					background-color : white;
					border : 0;
					outline : solid 1px white;
					outline-offset : -1px;
				}
			}
		}
		&:nth-child( 1 ){
			> ul{
				justify-content : center;
			}
		}
		&:not( :nth-child( 1 ) ){
			> ul{
				justify-content : space-between;
			}
		}
	}
	@media screen and ( width <= 768px ){
		&::before{
			display : block;
			width : 100%;
			height : calc( 240 * var( --remBase ) );
			margin-bottom : calc( 20 * var( --remBase ) );
			font-size : 0;
			content : "";
			background : url( "../images/ui/bg/japan.svg" ) center / auto 100% no-repeat;
		}
		> li{
			width : calc( 325 * var( --contentBase ) );
			padding-top : calc( 5 * var( --remBase ) );
			padding-bottom : calc( 10 * var( --remBase ) );
			margin-inline : auto;
			border-radius : calc( 7 * var( --remBase ) );
			+ li{
				margin-top : calc( 20 * var( --remBase ) );
			}
			> h3 , h4{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
			}
			> ul{
				row-gap : calc( 5 * var( --remBase ) );
				column-gap : calc( 12.5 * 100% / 300 );
				padding-inline : calc( 12.5 * 100% / 325 );
				margin-top : calc( 10 * var( --remBase ) );
				> li{
					width : calc( 143.75 * 100% / 300 );
					> a , > button{
						height : calc( 28 * var( --remBase ) );
						font-size : calc( 16 * var( --remBase ) );
						border-radius : calc( 5 * var( --remBase ) );
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : auto auto calc( 10 * var( --remBase ) ) auto calc( 10 * var( --remBase ) ) calc( 120 * var( --remBase ) ) auto auto;
		grid-template-columns : calc( 152 * 100% / 978 ) calc( 10 * 100% / 978 ) calc( 152 * 100% / 978 ) calc( 10 * 100% / 978 ) calc( 152 * 100% / 978 ) 1fr calc( 152 * 100% / 978 ) calc( 10 * 100% / 978 ) calc( 35 * 100% / 978 ) calc( 117 * 100% / 978 ) calc( 35 * 100% / 978 );
		align-items : start;
		padding-inline : calc( 51 * var( --contentBase ) );
		background : url( "../images/ui/bg/japan.svg" ) center calc( 74 * var( --remBase ) ) / auto calc( 437 * var( --remBase ) ) no-repeat;
		> li{
			align-self : start;
			padding-block : calc( 10 * var( --remBase ) );
			padding-inline : calc( 5 * 100% / 152 );
			border-radius : calc( 7 * var( --remBase ) );
			> h3 , h4{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
			}
			&:nth-of-type( 1 ){
				grid-row : 1;
				grid-column : 10/-1;
			}
			&:nth-of-type( 2 ){
				grid-row : 4;
				grid-column : 10/-1;
			}
			&:nth-of-type( 3 ){
				grid-row : 6/8;
				grid-column : 9/11;
			}
			&:nth-of-type( 4 ){
				grid-row : 1/3;
				grid-column : 5;
			}
			&:nth-of-type( 5 ){
				grid-row : 6/8;
				grid-column : 7;
			}
			&:nth-of-type( 6 ){
				grid-row : 1/3;
				grid-column : 3;
			}
			&:nth-of-type( 7 ){
				grid-row : 1/3;
				grid-column : 1;
			}
			&:nth-of-type( 8 ){
				grid-row : 7/9;
				grid-column : 3;
			}
			&:nth-of-type( 9 ){
				grid-row : 7/9;
				grid-column : 1;
			}
			> ul{
				row-gap : calc( 5 * var( --remBase ) );
				column-gap : calc( 5 * 100% / 142 );
				justify-content : center;
				margin-top : calc( 10 * var( --remBase ) );
				> li{
					width : calc( 68.5 * 100% / 142 );
					> a , > button{
						height : calc( 28 * var( --remBase ) );
						font-size : calc( 16 * var( --remBase ) );
						border-radius : calc( 5 * var( --remBase ) );
					}
				}
			}
		}
	}
}
:root:has( .dialogAreas[open] ){
	overflow : hidden;
}
.dialogAreas{
	position : fixed;
	inset : 0;
	margin : auto;
	&[open]{
		z-index : 100;
		display : block;
		overflow-y : visible;
		&::backdrop{
			pointer-events : auto;
			background-color : color-mix( in sRGB , black 40% , transparent );
		}
	}
	.dialogContent{
		position : relative;
		background-color : white;
	}
	button{
		position : absolute;
		z-index : 1;
		display : block;
		font-size : 0;
	}
	h4 , h5{
		font-weight : 500;
	}
	a{
		display : block;
		align-items : center;
		width : fit-content;
		font-weight : 500;
		color : white;
		text-align : center;
		background-color : var( --linkAreaColor );
		outline : solid 1px var( --linkAreaColor );
		outline-offset : -1px;
	}
	p{
		font-weight : 500;
		border-top : solid 1px currentColor;
	}
	ul{
		display : flex;
		flex-wrap : wrap;
	}
	@media screen and ( width <= 768px ){
		width : calc( 330 * var( --viewportBase ) );
		.dialogContent{
			padding-inline : calc( 12.5 * 100% / 330 );
			padding-top : calc( 42 * var( --remBase ) );
			padding-bottom : calc( 20 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		button{
			top : calc( 12 * var( --remBase ) );
			right : calc( 12.5 * 100% / 330 );
			img{
				height : calc( 30 * var( --remBase ) );
			}
		}
		h4 , h5{
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 26 / 18 );
		}
		h4 + a , h5 + a{
			margin-top : calc( 8 * var( --remBase ) );
		}
		a{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 14 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
			border-radius : calc( 5 * var( --remBase ) );
		}
		p{
			padding-top : calc( 18 * var( --remBase ) );
			margin-top : calc( 18 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 26 / 18 );
		}
		ul{
			row-gap : calc( 4 * var( --remBase ) );
			column-gap : calc( 4 * 100% / 305 );
			height : calc( 300 * var( --remBase ) );
			margin-top : calc( 12 * var( --remBase ) );
			overflow-y : auto;
		}
	}
	@media print , screen and ( width > 768px ){
		width : calc( 730 * var( --viewportBase ) );
		.dialogContent{
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 24 * 100% / 730 );
			border-radius : calc( 10 * var( --remBase ) );
		}
		button{
			top : calc( 12 * var( --remBase ) );
			right : calc( 16 * 100% / 730 );
			img{
				height : calc( 50 * var( --remBase ) );
			}
		}
		h4 , h5{
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
		}
		h4 + a , h5 + a{
			margin-top : calc( 10 * var( --remBase ) );
		}
		a{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
			border-radius : calc( 6 * var( --remBase ) );
		}
		p{
			padding-top : calc( 16 * var( --remBase ) );
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
		}
		ul{
			row-gap : calc( 6 * var( --remBase ) );
			column-gap : calc( 6 * 100% / 682 );
			margin-top : calc( 10 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	.dialogAreas a:hover{
		color : var( --linkAreaColor );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.dialogAreas a{
		transition : color .3s linear , background-color .3s linear;
	}
}

/* --------------------------------------------
PAGES
--------------------------------------------- */
/* --------------------------------------------
AREA
--------------------------------------------- */
.mapArea{
	.wrap{
		padding-bottom : calc( 64 * var( --remBase ) );
	}
}