@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700;900&display=swap');


*{margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
a{color: #fff; 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: "Zen Maru Gothic", "M PLUS 1p", '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: #fff;
	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--100px: -100px;
	--size--80px: -80px;
	--size--60px: -60px;
	--size--40px: -40px;
	--size--20px: -20px;
	--size--10px: -10px;
	--size--5px: -5px;
	--size-5px: 5px;
	--size-10px: 10px;
	--size-20px: 20px;
	--size-40px: 40px;
	--size-60px: 60px;
	--size-80px: 80px;
	--size-100px: 100px;
	--size-120px: 120px;
	--size-140px: 140px;
	--size-160px: 160px;
	--size-180px: 180px;
	--size-200px: 200px;
	--size-220px: 220px;
	--size-240px: 240px;
	--size-260px: 260px;
	--size-280px: 280px;
	--size-300px: 300px;

	--baseBoxpLR: 80px;

	--border: solid 2px #121212;
	--borderDot1px: dotted 1px #444;
	--bordersolid1px: solid 1px #444;
	--bordersolidw:  solid 1px #fff;
	--black: #121212;
	--grey: #bfc0c0;
	--red: #f08c82;
	--blue: #00b3d6;
	--green: #9dcd72;
	--yellow: #ffd900;
	--yellowOn: #eddd13;
	--r40: 40px;
	--r20: 20px;

}

.baseBox{
	width: 100%;
	max-width: 1376px;
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}
.baseMaxBox{
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}
.baseListBox{
	width: 100%;
	max-width: 1416px;
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}
.wideBox{
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}

.tb,.sp{
	display: none;
}
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: rgba(0, 0, 0, 0.97);
	color: #fff;
	text-align: center;
}
#cookie .baseBox{
	padding: var(--size-60px) var(--baseBoxpLR);
	line-height: 1.5;
}
#cookie button{
	cursor: pointer;
	display: block;
	background: #fff;
	border: none;
	border-radius: 999px;
	width: 60%;
	max-width: 300px;
	padding: var(--size-40px);
	color: #000;
	margin: 0 auto;
	margin-top: 1em;
	line-height: normal;
	font-size: 100%;
}

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

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

	:root{
		--size--100px: -5.8vw;
		--size--80px: -4.6vw;
		--size--60px: -3.5vw;
		--size--40px: -2.3vw;
		--size--20px: -1.8vw;
		--size--10px: -1.2vw;
		--size--5px: -0.6vw;
		--size-5px: 0.6vw;
		--size-10px: 1.2vw;
		--size-20px: 1.8vw;
		--size-40px: 2.3vw;
		--size-60px: 3.5vw;
		--size-80px: 4.6vw;
		--size-100px: 5.8vw;
		--size-120px: 6.9vw;
		--size-140px: 8.1vw;
		--size-160px: 9.2vw;
		--size-180px: 10.4vw;
		--size-200px: 11.5vw;
		--size-220px: 12.7vw;
		--size-240px: 13.8vw;
		--size-260px: 15vw;
		--size-280px: 16.1vw;
		--size-300px: 17.3vw;

		--baseBoxpLR: 6vw;

		--r40: 3vw;
		--r20: 1.5vw;

	}

}


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

	.w1366none{
		display: none;
	}

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


}



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

	.w1194none{
		display: none;
	}

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

}

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

	.w1024none{
		display: none;
	}

	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 */

	.tb{
		display: block !important;
	}

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

}



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

	.sp{
		display: block !important;
	}
	.w759none{
		display: none;
	}

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

	:root{
		--size--100px: -10vw;
		--size--80px: -8vw;
		--size--60px: -6vw;
		--size--40px: -4vw;
		--size--20px: -3vw;
		--size--10px: -2vw;
		--size--5px: -1vw;
		--size-5px: 1vw;
		--size-10px: 2vw;
		--size-20px: 3vw;
		--size-40px: 4vw;
		--size-60px: 6vw;
		--size-80px: 8vw;
		--size-100px: 10vw;
		--size-120px: 12vw;
		--size-140px: 14vw;
		--size-160px: 16vw;
		--size-180px: 18vw;
		--size-200px: 20vw;
		--size-220px: 22vw;
		--size-240px: 24vw;
		--size-260px: 26vw;
		--size-280px: 28vw;
		--size-300px: 30vw;

		--baseBoxpLR: 6vw;

	}

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

}