@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');


*{margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
a{color: #000; 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: 16px;
	line-height: 2;
	font-weight: 400;
	font-feature-settings: "palt" 1;
	/*letter-spacing: 0.1em;*/
	letter-spacing: 0.03em;
	font-kerning: normal;
	font-family: 'M PLUS 1p', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans W3", "ヒラギノ角ゴ ProN W3", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background: #fff;
}
h1,h2,h3,h4,h5,h6,p,div,li,dt,dd {font-size:100%;}
h1,h2,h3,h4,h5,h6{line-height: normal; font-weight: 700;}
strong{font-weight: 700;}
#base{position: relative;}

:root{
	--size--70px: -70px;
	--size--56px: -56px;
	--size--42px: -42px;
	--size--28px: -28px;
	--size--21px: -21px;
	--size--14px: -14px;
	--size--7px: -7px;
	--size-7px: 7px;
	--size-14px: 14px;
	--size-21px: 21px;
	--size-28px: 28px;
	--size-42px: 42px;
	--size-56px: 56px;
	--size-70px: 70px;
	--size-84px: 84px;
	--size-98px: 98px;
	--size-112px: 112px;
	--size-126px: 126px;
	--size-140px: 140px;
	--size-154px: 154px;
	--size-168px: 168px;
	--size-182px: 182px;
	--size-196px: 196px;
	--size-210px: 210px;
	--size-224px: 224px;
	--size-238px: 238px;
	--size-252px: 252px;
	--size-266px: 266px;
	--size-280px: 280px;

	--baseBoxpLR: 84px;
	--listBoxpLR: 70px;

	--brderDot1px: dotted 1px #ddd;

	--red: #ea545d;
	--red2: #fbdddf;
	--red3: #fdeeee;
}

.baseBox{
	width: 100%;
	max-width: 1376px;
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}
.wideBox{
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--baseBoxpLR);
}
.listBox{
	width: 100%;
	max-width: 1376px;
	margin: 0 auto;
	padding: 0 var(--listBoxpLR);
}

.mt14{
	margin-top: var(--size-14px);
}
.mt21{
	margin-top: var(--size-21px);
}
.mt28{
	margin-top: var(--size-28px);
}


/*-- 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-42px) 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-28px);
	color: #000;
	margin: 0 auto;
	margin-top: 1em;
	line-height: normal;
	font-size: 100%;
}


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

	body{
		font-size: 1.25vw;
	}

	:root{
		--size--70px: -5.8vw;
		--size--56px: -4.6vw;
		--size--42px: -3.5vw;
		--size--28px: -2.3vw;
		--size--21px: -1.8vw;
		--size--14px: -1.2vw;
		--size--7px: -0.6vw;
		--size-7px: 0.6vw;
		--size-14px: 1.2vw;
		--size-21px: 1.8vw;
		--size-28px: 2.3vw;
		--size-42px: 3.5vw;
		--size-56px: 4.6vw;
		--size-70px: 5.8vw;
		--size-84px: 6.9vw;
		--size-98px: 8.1vw;
		--size-112px: 9.2vw;
		--size-126px: 10.4vw;
		--size-140px: 11.5vw;
		--size-154px: 12.7vw;
		--size-168px: 13.8vw;
		--size-182px: 15vw;
		--size-196px: 16.1vw;
		--size-210px: 17.3vw;
		--size-224px: 18.4vw;
		--size-238px: 19.6vw;
		--size-252px: 20.7vw;
		--size-266px: 21.9vw;
		--size-280px: 23vw;

		--baseBoxpLR: 6vw;
		--listBoxpLR: 4.5vw;
	}

}


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

	.w1366none{
		display: none;
	}

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


}

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

	.w1194none{
		display: none;
	}

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

}

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

	.w1024none{
		display: none;
	}

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

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

}

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

	.w768none{
		display: none;
	}

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

}

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

	.w759none{
		display: none;
	}

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

	:root{
		--size--70px: -10vw;
		--size--56px: -8vw;
		--size--42px: -6vw;
		--size--28px: -4vw;
		--size--21px: -3vw;
		--size--14px: -2vw;
		--size--7px: -1vw;
		--size-7px: 1vw;
		--size-14px: 2vw;
		--size-21px: 3vw;
		--size-28px: 4vw;
		--size-42px: 6vw;
		--size-56px: 8vw;
		--size-70px: 10vw;
		--size-84px: 12vw;
		--size-98px: 14vw;
		--size-112px: 16vw;
		--size-126px: 18vw;
		--size-140px: 20vw;
		--size-154px: 22vw;
		--size-168px: 24vw;
		--size-182px: 26vw;
		--size-196px: 28vw;
		--size-210px: 30vw;
		--size-224px: 32vw;
		--size-238px: 34vw;
		--size-252px: 36vw;
		--size-266px: 38vw;
		--size-280px: 40vw;

		--baseBoxpLR: 6vw;
		--listBoxpLR: 1.7vw;
	}

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

}