@charset "UTF-8";
/*--------------------------------------------
SETTINGS
---------------------------------------------*/
@media screen and ( width <= 750px ){
html{
		font-size: calc( 10 * 100vw / var(--breakPoint) )
}
	}
@media screen and ( 750px < width < 1440px ){
html{
		font-size : calc( 10 * 100vw / var(--breakPoint) )
}
	}
@media print,screen and ( width >= 1440px ){
html{
		font-size: 10px
}
	}
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 120 var(--remBase) );
	}
}
@media print,screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 60 var(--remBase) );
	}
}
html{
	scroll-padding-top: var(--headerHeight);
}
body{
	padding-top: calc(  var(--headerHeight) );
}
/*--------------------------------------------
WRAPPER
---------------------------------------------*/
@media screen and ( width <= 750px ){
.wrap{
		padding-inline : calc( 40 var(--viewportBase) )
}
	}
@media screen and ( 750px < width < 1440px ){
.wrap{
		padding-inline:calc( 20 var(--viewportBase) )
}
	}
@media print,screen and ( width >= 1440px ){
.wrap{
		padding-inline:calc( ( 100% - 1400px ) / 2 )
}
	}
@media screen and ( width <= 750px ){
.wrap-sp{
		padding-inline : calc( 40 var(--viewportBase) )
}
	}
@media screen and ( 750px < width < 1440px ){
.wrap-pc{
		padding-inline:calc( 20 var(--viewportBase) )
}
	}
@media print,screen and ( width >= 1440px ){
.wrap-pc{
		padding-inline:calc( ( 100% - 1400px ) / 2 )
}
	}
@media print,screen and ( width >= 1440px ){
.wrap-full{
		max-width: 1400px;
		margin-inline:auto
}
	}
/*--------------------------------------------
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{
		content:attr( data-before );
		white-space: pre;
	}
[data-after]:after{
		content:attr( data-after );
		white-space: pre;
	}
[data-both]:before{
		content:attr( data-both );
		white-space: pre;
	}
[data-both]:after{
		content:attr( data-both );
		white-space: pre;
	}
@media screen and ( width <= 750px ){
[data-sp-after]:after{
			content:attr( data-sp-after );
			white-space: pre
	}
		}
@media screen and ( width <= 750px ){
[data-sp-before]:before{
			content:attr( data-sp-before );
			white-space: pre
	}
		}
@media print,screen and ( width > 750px ){
[data-pc-after]:after{
			content:attr( data-pc-after );
			white-space: pre
	}
		}
@media print,screen and ( width > 750px ){
[data-pc-before]:before{
			content:attr( data-pc-before );
			white-space: pre
	}
		}
/*--------------------------------------------
LAYOUT
  HEADER
---------------------------------------------*/
#header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	background-color: #C1E4EA;
	height: var(--headerHeight);
}
#header .logo{
		display: block;
		width:fit-content;
	}
@media screen and ( width <= 750px ){
		#header .logo{
			padding-top: calc( 28 var(--remBase) );
		}
			#header .logo img{
				height: calc( 72 var(--remBase) );
			}
	}
@media print,screen and ( width > 750px ){
#header{
		display: grid;
		align-items: start;
		grid-template-columns: calc( 80 var(--percentBase) ) auto 1fr auto calc( 117 var(--percentBase) );
		grid-auto-rows: 100%
}
		#header .logo{
			grid-column: 2;
			grid-row: 1;
			padding-top: calc( 15 var(--remBase) );
		}
			#header .logo img{
				height: calc( 36 var(--remBase) );
			}
	}
/*--------------------------------------------
NAVIGATION
---------------------------------------------*/
@media screen and ( width <= 750px ){
#nav{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 10;
		transition: max-height .5s ease-in;
		max-height: 0;
		overflow: hidden;
		overflow-y:auto;
		top:var(--headerHeight);
		height: calc( 100% - var(--headerHeight) );
		background-color: #E9F5F7E6
}
		#nav .scroll{
			padding-inline: calc( 155 var(--viewportBase) );
			padding-block: var(--headerHeight);
		}
	}
@media print,screen and ( width > 750px ){
#nav{
		height: 100%;
		grid-column: 4;
		grid-row: 1
}
		#nav .scroll{
			height: 100%;
			display: grid;
			align-items: center;
			justify-content: end;
		}
	}
/*--------------------------------------------
GLOBAL NAVIGATION
---------------------------------------------*/
@media screen and ( width <= 750px ){
#globalNav{
		display: grid;
		grid-auto-flow: row;
		align-content: center
}
		#globalNav :where( .search , .archive ){
			display: grid;
			align-items: center;
			justify-content: start;
			font-size: calc( 36 var(--remBase) );;
			line-height: calc( 50 / 36 );;
			column-gap: calc( 40 * 100% / 440 );
			grid-template-columns: calc( 48 * 100% / 440 ) auto;
			font-weight: 700;
		}
			#globalNav :where( .search , .archive ):before{
				content:"";
				display: block;
				background-repeat: round;
				aspect-ratio: 1;
				background-size: contain;
				background-position: center;
				font-size: 0;
			}
		#globalNav .search{
			margin-top: calc( 72 var(--remBase) );
		}
			#globalNav .search:before{
				background-image: url("../../images/ui/icon/search01.svg");
			}
		#globalNav .archive{
			margin-top: calc( 40 var(--remBase) );
		}
			#globalNav .archive:before{
				background-image: url("../../images/ui/icon/time.svg");
			}
		#globalNav .support{
			margin-top: calc( 68 var(--remBase) );
			width: 100%;
			display: grid;
			align-items: center;
			justify-content: start;
			background-color: #FB4C6D;
			color:white;
			width: 100%;
			font-size: 3.2rem;
			padding-left: calc( 16 * 100% / 440 );
			column-gap: calc( 16 * 100% / 440 );
			grid-template-columns: calc( 40 * 100% / 424 ) auto;
			height: calc( 92 var(--remBase) );
			border-radius: calc( 10 var(--remBase) );
		}
			#globalNav .support:before{
				content:"";
				display: block;
				background: url("../../images/ui/icon/mail01.svg") center / contain no-repeat;
				aspect-ratio: 1;
				font-size: 0;
			}
	}
@media print,screen and ( width > 750px ){
#globalNav{
		height: 100%;
		display: grid;
		align-items: center;
		grid-auto-flow: column;
		column-gap: calc( 30 var(--remBase) )
}
		#globalNav a{
			font-weight: 700;
			font-size: 1.6rem;
			color:#284B66;
		}
		#globalNav .register{
			display: grid;
			align-items: center;
			justify-content: start;
			grid-template-columns: calc( 23 var(--remBase) ) auto;
			column-gap: calc( 4 var(--remBase) );
		}
			#globalNav .register:before{
				content:"";
				background:url("../../images/ui/icon/register.svg") 0 0 / contain no-repeat;
				aspect-ratio: 1;
			}
	}
/*--------------------------------------------
LAYOUT
  MENU BUTTON
---------------------------------------------*/
@media screen and ( width <= 750px ){
#menuBtn{
		z-index: 12;
		overflow:hidden;
}
		#menuBtn > span:nth-of-type(1){
		font-size: 0;
		width: 100%;
		height: 100%;
		position: relative;
		display: block;
	}
		#menuBtn span span{
		display: block;
		position: absolute;
		left: 0;
		transition: all .4s;
		width: 100%;
	}
		#menuBtn span span:nth-of-type(1){
			top: 0;
		}
		#menuBtn span span:nth-of-type(4){
			bottom: 0;
		}
		#menuBtn{
		position: fixed;
		width: calc( 70 var(--viewportBase) );
		height: calc( 46 var(--remBase) );
		top: calc( 36 var(--remBase) );
		right: calc( 40 var(--viewportBase) )
}
		#menuBtn > span:nth-of-type(1){
			height: 100%;
		}
			#menuBtn > span:nth-of-type(1) span{
				background-color: #284b66;
				border-radius: 100vmax;
			}
			#menuBtn > span:nth-of-type(1) span{
				height: calc( 6 var(--remBase) );
			}
				#menuBtn > span:nth-of-type(1) span:nth-of-type(2), #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
					top: calc( 20 var(--remBase) );
				}
	}
body.is-open{
		overflow: hidden;
	}
body.is-open #nav{
		max-height: 100dvh;
	}
body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			scale:0;
			translate : calc( 10 100dvh var(--remBase) ) 0;
		}
body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
			rotate:-45deg;
		}
body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
			rotate:45deg;
		}
body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
			scale:0;
			translate : calc( -10 100dvh var(--remBase) ) 0;
		}
/*--------------------------------------------
HOM MV
---------------------------------------------*/
#mv{
	background-repeat: no-repeat;
}
#mv .selectWrapper{
		position: relative;
		background-color: #fff;
	}
#mv .selectWrapper:before, #mv .selectWrapper:after{
			content:"";
			display: block;
			position: absolute;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			z-index: 1;
			font-size: 0;
		}
#mv .selectWrapper:nth-of-type(1):before{
				background-image: url("../../images/ui/icon/bag.svg");
			}
#mv .selectWrapper:nth-of-type(2):before{
				background-image: url("../../images/ui/icon/mappin.svg");
			}
#mv .selectWrapper:nth-of-type(3):before{
				background-image: url("../../images/ui/icon/search01.svg");
				aspect-ratio: 1;
			}
#mv .selectWrapper:after{
			background-image: url("../../images/ui/arrow/circle/down01.svg");
			aspect-ratio: 1;
		}
#mv .selectWrapper > select{
			width: 100%;
			height: 100%;
			background-color: transparent;
			border: 0;
			font-weight: 700;
			appearance: none;
		}
#mv .keywords label{
			display: grid;
			align-items: center;
			justify-content: start;
			font-weight: 700;
			color:white;
		}
#mv .keywords label:after{
				content:"";
				display: block;
				background: url("../../images/ui/arrow/down01.svg") center / contain no-repeat;
				font-size: 0;
			}
#mv .keywords input{
			background-color: white;
			background-repeat: no-repeat;
			background-image: url("../../images/ui/icon/search02.svg");
			font-weight: 700;
			width: 100%;
		}
#mv .keywords input::placeholder{
				color:#ABB8C3;
			}
@media screen and ( width <= 750px ){
#mv{
		background-image: url("../../images/home/mv/bg_sp.webp");
		background-size: 100% auto;
		background-position: center 0;
		padding-top: calc( 86 var(--remBase) );
		background-color: var(--primary)
}
			#mv hgroup p{
				margin-left: calc( 168 var(--viewportBase) );
			}
				#mv hgroup p img{
					height: calc( 132 var(--remBase) );
				}
			#mv hgroup h1{
				margin-top: calc( 18 var(--remBase) );
				margin-left: calc( 60 var(--viewportBase) );
			}
				#mv hgroup h1 img{
					height: calc( 280 var(--remBase) );
				}
		#mv .box{
			margin-top: calc( 86 var(--remBase) );
			background-color: var(--primary);
			padding-block: calc( 40 var(--remBase) );
		}
			#mv .selectors > div + div{
				margin-top: calc( 32 var(--remBase) );
			}
		#mv .selectWrapper{
			height: calc( 82 var(--remBase) );
			border-radius: calc( 10 var(--remBase) );
		}
			#mv .selectWrapper:before{
				left: calc( 56 var(--percentBase) );
			}
			#mv .selectWrapper:after{
				height: calc( 50 var(--remBase) );
				top: calc( 16 var(--remBase) );
				right: calc( 55 var(--percentBase) );
			}
			#mv .selectWrapper > select{
				padding-left: calc( 112 var(--percentBase) );
				font-size: 3.2rem;
				color:#284B66;
			}
				#mv .selectWrapper:nth-of-type(1):before{
					width: calc( 40 var(--percentBase) );
					height: calc( 36 var(--remBase) );
					top: calc( 23 var(--remBase) );
				}
				#mv .selectWrapper:nth-of-type(2):before{
					width: calc( 40 var(--percentBase) );
					height: calc( 55 var(--remBase) );
					top: calc( 14 var(--remBase) );
				}
				#mv .selectWrapper:nth-of-type(3):before{
					height: calc( 40 var(--remBase) );
					top: calc( 21 var(--remBase) );
				}
		#mv .keywords{
			margin-top: calc( 30 var(--remBase) );
		}
			#mv .keywords label{
				border-radius: calc( 5 var(--remBase) );
				grid-template-columns: auto calc( 30 var(--percentBase) );
				column-gap: calc( 16 var(--percentBase) );
				font-size: 2.4rem;
			}
				#mv .keywords label:after{
					height: calc( 20 var(--remBase) );
				}
			#mv .keywords input{
				margin-top: calc( 10 var(--remBase) );
				height: calc( 70 var(--remBase) );
				font-size: 2.8rem;
				padding-left: calc( 20 var(--percentBase) );
				background-size: auto calc( 36 var(--remBase) );
				background-position: calc( 594 var(--remBase) ) calc( 17 var(--remBase) );
				border-radius: calc( 10 var(--remBase) );
			}
	}
@media print,screen and ( width > 750px ){
#mv{
		background-image: url("../../images/home/mv/bg_pc.webp");
		height: calc( 600 var(--remBase) );
		padding-top: calc( 63 var(--remBase) );
		background-size: cover;
		background-position: center
}
			#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{
			margin-top: calc( 32 var(--remBase) );
			margin-inline: auto;
			width: calc( 1020 var(--percentBase) );
		}
		#mv .selectors{
			background-color: var(--primary);
			border-radius: calc( 13 var(--remBase) );
			padding-inline: calc( 10 * 100% / 1020 );
			padding-top: calc( 8 var(--remBase) );
			padding-bottom: calc( 7 var(--remBase) );
			display: grid;
			grid-template-columns: repeat( 3 , calc( 320 * 100% / 1000 ) );
			column-gap: calc( 10 * 100% / 1020 );
		}
		#mv .selectWrapper{
			height: calc( 55 var(--remBase) );
			border-radius: calc( 7 var(--remBase) );
		}
			#mv .selectWrapper:before{
				left: calc( 24 * 100% / 320 );
			}
			#mv .selectWrapper:after{
				height: calc( 34 var(--remBase) );
				top: calc( 10.5 var(--remBase) );
				right: calc( 10 * 100% / 320 );
			}
			#mv .selectWrapper > select{
				padding-left: calc( 66 * 100% / 320 );
				font-size: 2rem;
			}
				#mv .selectWrapper:nth-of-type(1):before{
					width: calc( 26 * 100% / 320 );
					height: calc( 24 var(--remBase) );
					top: calc( 15.5 var(--remBase) );
				}
				#mv .selectWrapper:nth-of-type(2):before{
					width: calc( 23 * 100% / 320 );
					height: calc( 30 var(--remBase) );
					top: calc( 14 var(--remBase) );
				}
				#mv .selectWrapper:nth-of-type(3):before{
					height: calc( 30 var(--remBase) );
					top: calc( 12.5 var(--remBase) );
				}
		#mv .keywords{
			padding-inline:calc( 251 * 100% / 1020 );
			margin-top: calc( 24 var(--remBase) );
		}
			#mv .keywords label{
				width: calc( 177 * 100% / 518 );
				background-color: var(--primary);
				height: calc( 30 var(--remBase) );
				border-radius: calc( 5 var(--remBase) );
				padding-left: calc( 20 * 100% / 518 );
				grid-template-columns: auto calc( 10 * 100% / 157 );
				column-gap: calc( 17 * 100% / 157 );
				font-size: 1.4rem;
			}
				#mv .keywords label:after{
					height: calc( 12 var(--remBase) );
				}
			#mv .keywords input{
				margin-top: calc( 5 var(--remBase) );
				height: calc( 35 var(--remBase) );
				font-size: 1.4rem;
				border-style: solid;
				border-color: var(--primary);
				border-width: calc( 2 var(--remBase) );
				padding-left: calc( 18 * 100% / 518 );
				background-size: auto calc( 19 var(--remBase) );
				background-position: calc( 480 var(--remBase) ) calc( 9 var(--remBase) );
				border-radius: calc( 5 var(--remBase) );
			}
	}