@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');


*{margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
a{color: var(--black); cursor: pointer; border: none; text-decoration: none;}
img{display: inline-block; font-size: 0; vertical-align: bottom; line-height: normal; width: 100%; height: auto;}
main, article, section, header, footer{display: block; width: 100%;}
html, body, #base{height: 100%; position: relative;}
body{
	font-size: 18px;
	line-height: 2;
	font-weight: 400;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.03em;
	font-kerning: normal;
	font-family: 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans W3", "ヒラギノ角ゴ ProN W3", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: var(--black);
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
h1,h2,h3,h4,h5,h6,p,div,li,dt,dd,a {font-size:100%;}
h1,h2,h3,h4,h5,h6{line-height: normal; font-weight: 700;}
strong{font-weight: 700;}
#base{position: relative;}

:root{
	--size--80px: calc(-5px * 16);
	--size--60px: calc(-5px * 12);
	--size--50px: calc(-5px * 10);
	--size--40px: calc(-5px * 8);
	--size--30px: calc(-5px * 6);
	--size--20px: calc(-5px * 4);
	--size--10px: calc(-5px * 2);
	--size--5px: -5px;
	--size-5px: 5px;
	--size-10px: calc(5px * 2);
	--size-20px: calc(5px * 4);
	--size-30px: calc(5px * 6);
	--size-40px: calc(5px * 8);
	--size-50px: calc(5px * 10);
	--size-60px: calc(5px * 12);
	--size-80px: calc(5px * 16);
	--size-100px: calc(5px * 20);
	--size-120px: calc(5px * 24);
	--size-140px: calc(5px * 28);
	--size-160px: calc(5px * 32);
	--size-180px: calc(5px * 36);
	--size-200px: calc(5px * 40);
	--size-220px: calc(5px * 44);
	--size-240px: calc(5px * 48);

	--headerTop: calc(5px * 31.42857142);

	--contentMaxWidth: 1368px;
	--baseBoxpLR: 80px;
	--baseListBoxLR: 60px;
	--ListBoxLR: 20px;

	--border: solid 1px #111;
	--borderDot1px: dotted 1px #111;
	--borderGray: solid 1px #eee;
	--borderGray2: solid 1px #ddd;
	--borderWhite: solid 1px #fff;
	--borderblue: solid 1px #171c61;
	--borderthinblue: solid 1px #ececf5;

	--black: #111;
	--gray: #888;
	--thingray: #f7f7f7;
	--white: #fff;
	--blue: #171c61;
	--sky: #2ea7e0;
	--thinblue: #f9f9fb;
	--white50: rgba(255,255,255,0.5);
	--white90: rgba(255,255,255,0.9);

	--font-2up: 133.33%;
	--font-1up: 116.66%;
	--font-1down: 88.88%;
	--font-2down: 77.77%;
	--font-3down: 66.66%;
	--font-h2: 322.22%;
	--font-h3: 177.77%;
	--font-h4: 116.66%;
	--font-info-ttl: 150%;

	--font-exlight: 200;
	--font-light: 300;
	--font-normal: 400;
	--font-bold: 700;

	--line-height1down: 1.5;
	--line-height2down: 1.3;

	--r0: 0;
	--r10: 10px;
	--r20: 20px;
	--r30: 30px;
	--r40: 40px;
	--r50: 50px;
	--r100: 100px;
	--rall: 999px;

}

.baseBox{
	width: 100%;
	max-width: var(--contentMaxWidth);
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}
.baseListBox{
	width: 100%;
	max-width: var(--contentMaxWidth);
	margin: 0 auto;
	padding: 0 var(--baseListBoxLR);
}
.wideBox{
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}

.mt40{
	margin-top: var(--size-40px) !important;
}
.mt60{
	margin-top: var(--size-60px) !important;
}
.mt80{
	margin-top: var(--size-80px) !important;
}
.mt100{
	margin-top: var(--size-100px) !important;
}
.mb40{
	margin-bottom: var(--size-40px) !important;
}
.mb60{
	margin-bottom: var(--size-60px) !important;
}
.mb80{
	margin-bottom: var(--size-80px) !important;
}
.mb100{
	margin-bottom: var(--size-100px) !important;
}

img {
	pointer-events: none;
	user-drag: none;
	-webkit-user-drag: none;
}

/*-- COOKIE --*/
#cookie{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10002;
	background: var(--blue);
	color: var(--white);
	text-align: center;
}
#cookie .baseBox{
	padding: var(--size-60px) var(--baseBoxpLR);
	line-height: var(--line-height1down);
}
#cookie button{
	cursor: pointer;
	display: block;
	background: #fff;
	border: none;
	border-radius: 999px;
	width: 60%;
	max-width: 300px;
	padding: var(--size-30px);
	color: #000;
	margin: 0 auto;
	margin-top: 1em;
	line-height: normal;
	font-size: 100%;
}

@media screen and (max-width: 1499px) { /* 1499px */

	body{
		font-size: calc(100vw * 18 / 1500);
	}

	:root{

	--size--80px: calc(-0.333vw * 16);
	--size--60px: calc(-0.333vw * 12);
	--size--50px: calc(-0.333vw * 10);
	--size--40px: calc(-0.333vw * 8);
	--size--30px: calc(-0.333vw * 6);
	--size--20px: calc(-0.333vw * 4);
	--size--10px: calc(-0.333vw * 2);
	--size--5px: -0.333vw;
	--size-5px: 0.333vw;
	--size-10px: calc(0.333vw * 2);
	--size-20px: calc(0.333vw * 4);
	--size-30px: calc(0.333vw * 6);
	--size-40px: calc(0.333vw * 8);
	--size-50px: calc(0.333vw * 10);
	--size-60px: calc(0.333vw * 12);
	--size-80px: calc(0.333vw * 16);
	--size-100px: calc(0.333vw * 20);
	--size-120px: calc(0.333vw * 24);
	--size-140px: calc(0.333vw * 28);
	--size-160px: calc(0.333vw * 32);
	--size-180px: calc(0.333vw * 36);
	--size-200px: calc(0.333vw * 40);
	--size-220px: calc(0.333vw * 44);
	--size-240px: calc(0.333vw * 48);

	--headerTop: calc(0.333vw * 31.42857142);

	--baseBoxpLR: 5.33vw;
	--baseListBoxLR: 4vw;
	--ListBoxLR: 20px;

	--baseBoxpLR: 3.8vw;
	--baseListBoxLR: 3vw;
	--ListBoxLR: 1.33vw;

	}

}


@media screen and (max-width: 1366px) {/* iPad pro　landscape */

	body{
		font-size: calc(100vw * 18 / 1366);
	}


}



@media screen and (max-width: 1194px) {/* iPad pro 11　landscape */

	body{
		font-size: calc(100vw * 18 / 1194);
	}

}

@media screen and (max-width: 1024px) {/* iPad pro　portrait */

	body{
		font-size: calc(100vw * 18 / 1024);
	}

	/*-- COOKIE --*/
	#cookie .baseBox{
		padding: 3vw;
	}
	#cookie button{
		width: 35vw;
		max-width: inherit;
		padding: 2vw;
	}

}



@media screen and (max-width: 768px) {/* TB */

	body{
		font-size: calc(100vw * 24 / 768);
	}

	:root{

	--size--80px: calc(-0.75vw * 16);
	--size--60px: calc(-0.75vw * 12);
	--size--50px: calc(-0.75vw * 10);
	--size--40px: calc(-0.75vw * 8);
	--size--30px: calc(-0.75vw * 6);
	--size--20px: calc(-0.75vw * 4);
	--size--10px: calc(-0.75vw * 2);
	--size--5px: -0.75vw;
	--size-5px: 0.75vw;
	--size-10px: calc(0.75vw * 2);
	--size-20px: calc(0.75vw * 4);
	--size-30px: calc(0.75vw * 6);
	--size-40px: calc(0.75vw * 8);
	--size-50px: calc(0.75vw * 10);
	--size-60px: calc(0.75vw * 12);
	--size-80px: calc(0.75vw * 16);
	--size-100px: calc(0.75vw * 20);
	--size-120px: calc(0.75vw * 24);
	--size-140px: calc(0.75vw * 28);
	--size-160px: calc(0.75vw * 32);
	--size-180px: calc(0.75vw * 36);
	--size-200px: calc(0.75vw * 40);
	--size-220px: calc(0.75vw * 44);
	--size-240px: calc(0.75vw * 48);

	--baseBoxpLR: 6vw;
	--baseListBoxLR: 4vw;
	--ListBoxLR: 2vw;

	--r10: 1vw;
	--r20: 2vw;
	--r30: 3vw;
	--r40: 4vw;
	--r50: 5vw;
	--r100: 10vw;
	--rall: 100vw;

	}

}



@media screen and (max-width: 759px) {/* SP */

	body{
		font-size: calc(100vw * 32 / 759);
		/*font-size: 3.55vw;*/
	}

/*	:root{

	--size--80px: calc(-0.75vw * 16);
	--size--60px: calc(-0.75vw * 12);
	--size--50px: calc(-0.75vw * 10);
	--size--40px: calc(-0.75vw * 8);
	--size--30px: calc(-0.75vw * 6);
	--size--20px: calc(-0.75vw * 4);
	--size--10px: calc(-0.75vw * 2);
	--size--5px: -0.75vw;
	--size-5px: 0.75vw;
	--size-10px: calc(0.75vw * 2);
	--size-20px: calc(0.75vw * 4);
	--size-30px: calc(0.75vw * 6);
	--size-40px: calc(0.75vw * 8);
	--size-50px: calc(0.75vw * 10);
	--size-60px: calc(0.75vw * 12);
	--size-80px: calc(0.75vw * 16);
	--size-100px: calc(0.75vw * 20);
	--size-120px: calc(0.75vw * 24);
	--size-140px: calc(0.75vw * 28);
	--size-160px: calc(0.75vw * 32);
	--size-180px: calc(0.75vw * 36);
	--size-200px: calc(0.75vw * 40);
	--size-220px: calc(0.75vw * 44);
	--size-240px: calc(0.75vw * 48);

	--baseBoxpLR: 6vw;
	--baseListBoxLR: 4vw;
	--ListBoxLR: 2vw;

	--r10: 1vw;
	--r20: 2vw;
	--r30: 3vw;
	--r40: 4vw;
	--r50: 5vw;
	--r100: 10vw;
	--rall: 100vw;

	}*/

	/*-- COOKIE --*/
	#cookie{
		font-size: 80%;
	}
	#cookie button{
		width: 40vw;
		padding: 2.5vw;
	}

}