@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
html{
	font-size : 10px;
}
:root{
	--headerHeight : calc( 60 var( --remBase ) );
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	min-width : 1440px;
	padding-top : calc( var( --headerHeight ) );
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	padding-inline : calc( ( 100% - 1400px ) / 2 );
}
.wrap-pc{
	padding-inline : calc( ( 100% - 1400px ) / 2 );
}
@media print , screen and ( width >= 1440px ){
	.wrap-full{
		min-width : 1400px;
	}
}
.wrapInfo{
	padding-inline : calc( ( 100% - 1326px ) / 2 );
}
:is( .wrapEntry , .wrapRequest , .wrapSupport ){
	padding-inline : calc( ( 100% - 1290px ) / 2 );
}

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

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

/* --------------------------------------------
LAYOUT
  HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	grid-template-columns : calc( 75 var( --percentBase ) ) auto 1fr auto calc( 117 var( --percentBase ) );
	grid-auto-rows : 100%;
	align-items : start;
	width : 100%;
	min-width : 1440px;
	height : var( --headerHeight );
	background-color : #c1e4ea;
}
#header .logo{
	display : block;
	grid-row : 1;
	grid-column : 2;
	width : fit-content;
	padding-top : calc( 15 var( --remBase ) );
}
#header .logo img{
	height : calc( 36 var( --remBase ) );
}

/* --------------------------------------------
NAVIGATION
--------------------------------------------- */
#nav{
	grid-row : 1;
	grid-column : 4;
	height : 100%;
}
#nav .scroll{
	display : grid;
	align-items : center;
	justify-content : end;
	height : 100%;
}

/* --------------------------------------------
GLOBAL NAVIGATION
--------------------------------------------- */
#globalNav{
	display : grid;
	grid-auto-flow : column;
	column-gap : calc( 30 var( --remBase ) );
	align-items : center;
	height : 100%;
}
#globalNav a{
	font-size : 1.6rem;
	font-weight : 700;
	color : #284b66;
}
#globalNav .register{
	display : grid;
	grid-template-columns : calc( 23 var( --remBase ) ) auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : center;
	justify-content : start;
}
#globalNav .register::before{
	aspect-ratio : 1;
	content : "";
	background : url( "../images/ui/icon/register.svg" ) 0 0 / contain no-repeat;
}

/* --------------------------------------------
HOM
	MV
--------------------------------------------- */
#mv{
	height : calc( 600 var( --remBase ) );
	padding-top : calc( 63 var( --remBase ) );
	background-image : url( "../images/home/mv/bg_pc.webp" );
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#mv hgroup p{
	margin-left : calc( 527 var( --percentBase ) );
}
#mv hgroup p img{
	height : calc( 122 var( --remBase ) );
}
#mv hgroup h1{
	margin-top : calc( 16 var( --remBase ) );
	margin-left : calc( 368 var( --percentBase ) );
}
#mv hgroup h1 img{
	height : calc( 145 var( --remBase ) );
}
#mv .box{
	width : calc( 1020 var( --percentBase ) );
	margin-inline : auto;
	margin-top : calc( 32 var( --remBase ) );
}
#mv .buttons{
	display : grid;
	grid-template-columns : repeat( 3 , calc( 320 * 100% / 1000 ) );
	column-gap : calc( 10 * 100% / 1020 );
	padding-inline : calc( 10 * 100% / 1020 );
	padding-top : calc( 8 var( --remBase ) );
	padding-bottom : calc( 7 var( --remBase ) );
	background-color : var( --primary );
	border-radius : calc( 13 var( --remBase ) );
}
#mv .buttons button{
	position : relative;
	height : calc( 55 var( --remBase ) );
	padding-left : calc( 66 * 100% / 320 );
	font-size : 2rem;
	font-weight : 700;
	text-align : left;
	background-color : #fff;
	border : 0;
	border-radius : calc( 7 var( --remBase ) );
	appearance : none;
}
#mv .buttons button::before , #mv .buttons button::after{
	position : absolute;
	z-index : 1;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#mv .buttons button::before{
	left : calc( 24 * 100% / 320 );
}
#mv .buttons button:nth-of-type( 1 )::before{
	top : calc( 15.5 var( --remBase ) );
	width : calc( 26 * 100% / 320 );
	height : calc( 24 var( --remBase ) );
	background-image : url( "../images/ui/icon/bag.svg" );
}
#mv .buttons button:nth-of-type( 2 )::before{
	top : calc( 14 var( --remBase ) );
	width : calc( 23 * 100% / 320 );
	height : calc( 30 var( --remBase ) );
	background-image : url( "../images/ui/icon/mappin.svg" );
}
#mv .buttons button:nth-of-type( 3 )::before{
	top : calc( 12.5 var( --remBase ) );
	height : calc( 30 var( --remBase ) );
	aspect-ratio : 1;
	background-image : url( "../images/ui/icon/search01.svg" );
}
#mv .buttons button::after{
	top : calc( 10.5 var( --remBase ) );
	right : calc( 10 * 100% / 320 );
	height : calc( 34 var( --remBase ) );
	aspect-ratio : 1;
	background-image : url( "../images/ui/arrow/circle/down01.svg" );
}
#mv .keywords{
	padding-inline : calc( 251 * 100% / 1020 );
	margin-top : calc( 24 var( --remBase ) );
}
#mv .keywords label{
	display : grid;
	grid-template-columns : auto calc( 10 * 100% / 157 );
	column-gap : calc( 17 * 100% / 157 );
	align-items : center;
	justify-content : start;
	width : calc( 177 * 100% / 518 );
	height : calc( 30 var( --remBase ) );
	padding-left : calc( 20 * 100% / 518 );
	font-size : 1.4rem;
	font-weight : 700;
	color : white;
	background-color : var( --primary );
	border-radius : calc( 5 var( --remBase ) );
}
#mv .keywords label::after{
	display : block;
	height : calc( 12 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/down01.svg" ) center / contain no-repeat;
}
#mv .keywords label + div{
	display : grid;
	grid-template-columns : calc( 18 * 100% / 514 ) 1fr calc( 31 * 100% / 514 );
	align-items : center;
	height : calc( 35 var( --remBase ) );
	margin-top : calc( 5 var( --remBase ) );
	background-color : white;
	border-color : var( --primary );
	border-style : solid;
	border-width : calc( 2 var( --remBase ) );
	border-radius : calc( 5 var( --remBase ) );
}
#mv .keywords input{
	grid-row : 1;
	grid-column : 2;
	width : 100%;
	height : 100%;
	padding : 0;
	margin : 0;
	font-size : 1.4rem;
	font-weight : 700;
	border : 0;
}
#mv .keywords input::placeholder{
	color : #abb8c3;
}
#mv .keywords button[type="submit"]{
	display : grid;
	grid-row : 1;
	grid-column : 3;
	place-items : center;
	height : 100%;
}
#mv .keywords button[type="submit"] img{
	height : calc( 19 var( --remBase ) );
}

/* --------------------------------------------
BACK GROUND COLOR
--------------------------------------------- */
.bg01{
	background-color : #e9f5f7;
}

/* --------------------------------------------
BREAD CRUMBS
--------------------------------------------- */
#breadcrumbs{
	display : flex;
	flex-wrap : wrap;
}
#breadcrumbs li{
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 22 / 16 );
	color : var( --primary );
}
#breadcrumbs li + li{
	display : flex;
	align-items : start;
}
#breadcrumbs li + li::before{
	display : block;
	width : calc( 8 var( --remBase ) );
	height : calc( 10 var( --remBase ) );
	margin-top : calc( 7 var( --remBase ) );
	margin-left : calc( 14 var( --remBase ) );
	margin-right : calc( 16 var( --remBase ) );
	content : "";
	background : url( "../images/ui/arrow/right02.svg" ) center / contain no-repeat;
}
#breadcrumbs a{
	color : var( --body );
}
#results #breadcrumbs{
	padding-top : calc( 28 var( --remBase ) );
	padding-bottom : calc( 30 var( --remBase ) );
}
.wrapInfo #breadcrumbs{
	padding-top : calc( 68 var( --remBase ) );
	padding-bottom : calc( 55 var( --remBase ) );
}
:is( .wrapEntry , .wrapRequest , .wrapSupport ) #breadcrumbs{
	padding-top : calc( 68 var( --remBase ) );
	padding-bottom : calc( 60 var( --remBase ) );
}

/* --------------------------------------------
INFO
	MAIN
--------------------------------------------- */
#infoMain{
	display : grid;
	grid-template-rows : auto calc( 18 var( --remBase ) ) auto calc( 23 var( --remBase ) ) auto 1fr calc( 21 var( --remBase ) ) calc( 56 var( --remBase ) );
	grid-template-columns : 1fr calc( 500 * 100% / 1264 );
	column-gap : calc( 32 * 100% / 1264 );
	padding-inline : calc( 31 * 100% / 1326 );
	padding-top : calc( 30 var( --remBase ) );
	padding-bottom : calc( 25 var( --remBase ) );
	background-color : #fff;
	filter : drop-shadow( 0 0 calc( 10 var( --remBase ) ) rgb( 40 75 102 / .15 ) );
}
#infoMain > picture{
	grid-row : 1/7;
	grid-column : 2;
	align-items : start;
	height : calc( 320 var( --remBase ) );
}
#infoMain > picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#infoMain .tags{
	display : flex;
	flex-wrap : wrap;
	grid-row : 1;
	grid-column : 1;
	row-gap : calc( 10 var( --remBase ) );
	column-gap : calc( 10 * 100% / 732 );
}
#infoMain .tags span{
	display : grid;
	place-items : center;
	height : calc( 27 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.2rem;
	font-weight : 800;
	border-radius : calc( 5 var( --remBase ) );
}
#infoMain .tags span:not( .new ){
	color : #fff;
	background-color : var( --primary );
}
#infoMain .tags span.new{
	color : #284b66;
	background-color : #ffe500;
}
#infoMain > h1{
	grid-row : 3;
	grid-column : 1;
	font-size : 3rem;
	font-weight : 700;
	line-height : 1.4;
}
#infoMain > dl{
	display : grid;
	grid-template-columns : calc( 30 * 100% / 732 ) 1fr;
	grid-row : 5;
	grid-column : 1;
	row-gap : calc( 15 var( --remBase ) );
	column-gap : calc( 8 * 100% / 732 );
}
#infoMain > dl dt{
	aspect-ratio : 1;
}
#infoMain > dl dt img{
	width : 100%;
	height : auto;
}
#infoMain > dl dd{
	padding-top : calc( 2 var( --remBase ) );
	font-size : calc( 20 var( --remBase ) );
	font-weight : 700;
	line-height : 1.3;
}
#infoMain .link-entry{
	grid-template-columns : calc( 23 * 100% / 190 ) auto;
	grid-row : 8;
	grid-column : 1/3;
	column-gap : calc( 6 * 100% / 190 );
	justify-self : center;
	width : calc( 250 * 100% / 1264 );
	padding-left : calc( 30 * 100% / 1264 );
	font-size : 2.4rem;
}

/* --------------------------------------------
MODULE
	LINK
--------------------------------------------- */
.link-entry{
	display : grid;
	align-items : center;
	justify-content : start;
	height : calc( 56 var( --remBase ) );
	font-weight : 700;
	color : #fff;
	background-color : #fb4c6d;
}
.link-entry::before{
	display : block;
	height : calc( 23 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/write.svg" ) center / contain no-repeat;
}

/* --------------------------------------------
DIALOG
--------------------------------------------- */
body.is-dialog{
	height : 100vh;
	overflow-y : hidden;
}
#dialogSearch[open]{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 15;
	display : grid;
	place-items : center;
	width : 100dvw;
	height : 100dvh;
	padding-inline : calc( ( 100% - 1160px ) / 2 );
	background-color : rgb( 0 0 0 / .4 );
}
#dialogContent{
	position : relative;
	width : 100%;
	overflow : clip;
	border-radius : calc( 5 var( --remBase ) );
}
#dialogContent > button{
	position : absolute;
	top : calc( 11 var( --remBase ) );
	right : calc( 10 * 100% / 1160 );
	display : block;
	aspect-ratio : 1;
}
#dialogContent > button img{
	height : calc( 60 var( --remBase ) );
}
#dialogContent .submits{
	display : grid;
	grid-template-columns : calc( 250 * 100% / 731 ) auto;
	column-gap : calc( 40 * 100% / 731 );
	align-items : center;
	justify-content : start;
	padding-left : calc( 365 * 100% / 1096 );
	margin-top : calc( 50 var( --remBase ) );
}
#dialogContent .submits button[type="submit"]{
	display : grid;
	grid-template-columns : calc( 35 * 100% / 250 ) auto;
	column-gap : calc( 16 * 100% / 250 );
	align-items : center;
	justify-content : center;
	height : calc( 55 var( --remBase ) );
	font-size : 2rem;
	font-weight : 700;
	color : white;
	background-color : var( --primary );
	border-radius : 100vmax;
}
#dialogContent .submits button[type="submit"]::before{
	display : block;
	aspect-ratio : 1;
	content : "";
	background : url( "../images/ui/icon/search04.svg" ) center / contain no-repeat;
}
#dialogContent .submits input[type="reset"]{
	font-size : 2rem;
	font-weight : 700;
	color : #284b66;
	background-color : transparent;
	border : 0;
}
#tabsController{
	display : grid;
	grid-template-columns : repeat( auto-fit , calc( 230 * 100% / 1100 ) );
	column-gap : calc( 16 * 100% / 1100 );
	align-items : start;
	justify-content : start;
	padding-inline : calc( 80 * 100% / 1160 ) ;
	padding-top : calc( 32 var( --remBase ) );
	background-color : var( --primary );
}
#tabsController button{
	display : grid;
	align-items : center;
	justify-content : start;
	width : 100%;
	height : calc( 50 var( --remBase ) );
	font-size : 2rem;
	font-weight : 700;
	color : #fff;
	background-color : #666c6f;
	border-radius : calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) ) 0 0;
	transition : color var( --transitionBase ) , background var( --transitionBase );
}
#tabsController button::before{
	display : block;
	content : "";
	filter : invert( 90% ) sepia( 100% ) saturate( 0% ) hue-rotate( 292deg ) brightness( 104% ) contrast( 102% );
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
	transition : filter var( --transitionBase );
}
#tabsController button:hover , #tabsController button.is-current{
	color : var( --primary );
	background-color : white;
}
#tabsController button:hover::before , #tabsController button.is-current::before{
	filter : invert( 67% ) sepia( 71% ) saturate( 4900% ) hue-rotate( 150deg ) brightness( 95% ) contrast( 109% );
}
#tabsController + form{
	padding-inline : calc( 32 * 100% / 1160 );
	padding-top : calc( 16 var( --remBase ) );
	padding-bottom : calc( 160 var( --remBase ) );
	background-color : white;
}
#btn-category{
	grid-template-columns : calc( 27 * 100% / 182 ) auto;
	column-gap : calc( 8 * 100% / 182 );
	padding-left : calc( 48 * 100% / 230 );
}
#btn-category::before{
	height : calc( 24 var( --remBase ) );
	background-image : url( "../images/ui/icon/black/bag.svg" );
}
#btn-area{
	grid-template-columns : calc( 23 * 100% / 190 ) auto;
	column-gap : calc( 8 * 100% / 190 );
	padding-left : calc( 40 * 100% / 230 );
}
#btn-area::before{
	height : calc( 31 var( --remBase ) );
	background-image : url( "../images/ui/icon/black/mappin.svg" );
}
#btn-feature{
	grid-template-columns : calc( 25 * 100% / 201 ) auto;
	column-gap : calc( 8 * 100% / 201 );
	padding-left : calc( 29 * 100% / 230 );
}
#btn-feature::before{
	aspect-ratio : 1;
	background-image : url( "../images/ui/icon/black/search.svg" );
}
#tabs > li:not( .is-current ){
	display : none;
}
#tabs > li > p{
	font-size : calc( 30 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 41 / 30 );
}
#tabs .list01{
	position : relative;
	display : grid;
	grid-template-rows : repeat( auto-fit , calc( 50 var( --remBase ) ) );
	grid-template-columns : calc( 365 * 100% / 1096 ) 1fr;
	margin-top : calc( 21 var( --remBase ) );
}
#tabs .list01 > li{
	display : contents;
}
#tabs .list01 > li > button{
	position : relative;
	display : grid;
	grid-template-columns : 1fr calc( 8 * 100% / 319 );
	grid-column : 1;
	align-items : center;
	height : calc( 50 var( --remBase ) );
	padding-left : calc( 24 * 100% / 1096 );
	padding-right : calc( 22 * 100% / 1096 );
	font-size : 2rem;
	font-weight : 700;
	color : #284b66;
	text-align : left;
	border : 0;
	border-radius : calc( 5 var( --remBase ) ) 0 0 calc( 5 var( --remBase ) );
	transition : background var( --transitionBase );
}
#tabs .list01 > li > button::before{
	position : absolute;
	bottom : 0;
	right : 0;
	display : block;
	width : calc( 341 * 100% / 365 );
	height : 1px;
	content : "";
	background-color : #daecef;
	transition : background var( --transitionBase );
}
#tabs .list01 > li > button::after{
	display : block;
	height : calc( 10 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/right04.svg" ) center / contain no-repeat;
}
#tabs .list01 > li > button:hover{
	background-color : #daecef;
}
#tabs .list01 > li > button:hover::before{
	background-color : transparent;
}
#tabs .list01 > li.is-empty button::after{
	content : none;
}
#tabs .list01 ul{
	display : grid;
	display : none;
	grid-template-columns : repeat( 2 , 50% );
	grid-row : 1 / 999;
	grid-column : 2;
	row-gap : calc( 20 var( --remBase ) );
	align-content : start;
	min-height : 100%;
	padding-block : calc( 14 var( --remBase ) );
	padding-inline : calc( 34 * 100% / 1096 );
	background-color : #daecef;
	border-radius : 0 calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) );
}
#tabs .list01 label{
	display : grid;
	grid-template-columns : calc( 15 * 100% / 331.5 ) 1fr;
	column-gap : calc( 8 * 100% / 331.5 );
	font-size : calc( 14 var( --remBase ) );
	line-height : calc( 26 / 14 );
}
#tabs .list01 label input{
	aspect-ratio : 1;
	padding : 0;
	margin : 0;
	margin-top : calc( 5.5 var( --remBase ) );
	font-size : 0;
	border-radius : 0;
}
#tabs .list01 button.is-current{
	background-color : #daecef;
}
#tabs .list01 button.is-current::before{
	background-color : transparent;
}
#tabs .list01 button.is-current + ul{
	display : grid;
}