@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,p,span,div,object,iframe,em,ul,ol,li,label,dl,dt,dd,form,label,table,tbody,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-family:inherit; list-style-type:none; list-style-image:none; } html { font-size:62.5%; overflow-y:scroll; } img { border:none; vertical-align:bottom; line-height:0; font-size:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none; } body { background: #fff; margin:0 !important; letter-spacing: 0; } .clearfix { zoom:1; min-height: 1px; } .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0.1em; line-height: 0; } .clearboth { clear: both; height: 1px; } *html .clearfix{ height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }

.nopc { display: none; }
.nosp { display: inline-block; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease 0s; }

@media screen and (max-width:768px) {
	.nosp { display: none; }
	.nopc { display: inline-block; }
}

/* --------------------------------------------------------------------------
   header / footer
-------------------------------------------------------------------------- */

header {
	position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 60px;
	padding: 11px 30px; background: #8c7e41; justify-content: space-between;
	align-items: center; box-sizing: border-box; z-index: 9999;
}
header * img { width: 100%; }
header .logo { display: flex; width: 168px; justify-content: space-between; align-items: center; }
header .logo h1 a { display: block; }
header .logo p { width: 54px; }
header nav a::after {
	content: ''; position: absolute; top: 50%; right: 0; width: 6px; height: 6px;
	border: solid 3px #fff; border-width: 0 3px 3px 0; transform: translateY(-60%) rotate(45deg);
}
footer {
	position: relative; width: 100%; padding: 80px 0 24px; background: #8c7e41;
	color: #fff; text-align: center;
}
footer .totop {
	position: absolute; top: -30px; right: 40px; width: 60px; height: 60px;
	background: 0 100%/300% auto no-repeat url(/spicecharge/images/ico.svg);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
footer .sns { display: flex; width: 540px; margin: 0 auto; }
footer .sns a {
	display: block; width: 60px; height: 60px; margin: 0 24px;
	background: 0 0/500% auto no-repeat url(/spicecharge/images/sns.png);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
footer .sns a.x { background-position: 25% 0; }
footer .sns a.ig { background-position: 50% 0; }
footer .sns a.yt { background-position: 75% 0; }
footer .sns a.ln { background: center/cover no-repeat url(/common/images/icon-LINE.svg); }
footer p { margin: 64px 0 0; font: 400 1.2rem/1.5 'Noto Sans JP'; }

@media screen and (min-width:769px) {
	header h1 { width: 86px; }
	header .menu { display: none; }
	header nav { display: flex; }
	header nav a {
		position: relative; display: block; margin-left: 54px; padding-right: 20px; color: #fff;
		font: 600 1.6rem/1.5 'Noto Sans JP'
	}
	footer { min-width: 1200px; }
}

@media screen and (max-width: 768px) {
	header { padding: 10px 5%; }
	header .logo { width: 120px; }
	header .logo h1 { width: 60px; }
	header .logo p { width: 42px; }
	header .menu { position: absolute; top: 0; right: 5%; }
	header .menu a {
		display: block; position: relative; width: 60px; height: 60px;
		background: 0 0/300% auto no-repeat url(/spicecharge/images/ico.svg);
	}
	header nav {
		position: absolute; top: 60px; right: -100vw; width: 100vw; height: 100vh;
		padding: 12vh 16% 0; background: #8c7e41; transform: translateX(0);
		transition: transform 0.6s cubic-bezier(0.215,0.61,0.355,1) 0s; box-sizing: border-box; 
	}
	header nav a {
		position: relative; display: block; padding: 1.0em; border-top: solid 1px #fff;
		font: 600 1.8rem/2.8 'Noto Sans JP'; color: #fff;
	}
	header nav a::after { right: 1.0em; width: 8px; height: 8px; }
	header nav a:last-child { border-bottom: solid 1px #fff; }
	.opened header .menu a { background-position: 50% 0; }
	.opened header nav { transform: translateX(-100vw); }
	footer { padding: 64px 0 24px; }
	footer .totop { right: 5%; }
	footer .sns { width: 90%; justify-content: space-around; }
	footer .sns a { width: 10vw; height: 10vw; margin: 0; }
	footer .sns a.ln { }
	footer p { margin: 36px 0 0; }
}

/* --------------------------------------------------------------------------
   kv / wrap / common
-------------------------------------------------------------------------- */

.kv {
	display: block; width: 100%; height: 0; margin: 60px auto 0; padding: 0 0 56.25%;
	background: center/cover no-repeat url(/spicecharge/images/kv_pc.webp);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
.wrap * { box-sizing: border-box; }
.wrap * img { width: 100%; }
section { padding: 90px 0 0; }

.mov { position: relative; width: 100%; height: 0; padding: 0 0 56.25%; overflow: hidden; }
.mov iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (min-width: 769px){
	.kv { min-width: 1200px; }
	.wrap {
		width: 100%; min-width: 1200px; margin: 0 auto; padding: 0 0 120px;
		background-image: url(/spicecharge/images/wrap2.svg),url(/spicecharge/images/wrap1.jpg);
		background-position: center -20px; background-size: auto 3230px;
		background-repeat: repeat-y;
	}
	.wrap .buy {
		position: fixed; bottom: 30vh; right: 0; display: block; width: 160px; padding: 1.0em 0;
		border-radius: 50px 0 0 50px; background: linear-gradient(120deg,#ed1c24 10%,#ffb261);
		font: 500 1.6rem/1.4 'Noto Sans JP'; text-align: center; letter-spacing: 0; color: #fff;
		transform: translateX(0); z-index: 98;
		transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	}
	.wrap .buy::before {
		content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		border-radius: 50px 0 0 50px;background: #8c7e41; opacity: 0;
		transition: opacity .4s ease; z-index: -1;
	}
	.wrap .buy::after {
		content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 5px;
		background: 100% 0/300% auto no-repeat url(/spicecharge/images/ico.svg);
		vertical-align: middle;
	}
	.wrap .buy:hover::before { opacity: 1; }
	.wrap .buy.hide {
		transform: translateX(162px);
		transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; z-index: 999;
	}
}
@media screen and (max-width: 768px) {
	.kv { padding: 0 0 160%; background-image: url(/spicecharge/images/kv_sp.webp); }
	.wrap {
		min-width: 100%; padding: 0 0 100px;
		background: center -20px/100% auto repeat-y url(/spicecharge/images/wrap_sp.jpg);
	}
	section { padding: 60px 0 0; }
	.wrap .buy {
		position: fixed; left: 0; bottom: 0; display: block; width: 100%; z-index: 999;
		background: linear-gradient(to right,#ffb261,#ed1c24 92%); border-top: solid 2px #fff;
		font: 600 1.8rem/3.5 'Noto Sans JP'; color: #fff; text-align: center;
		transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	}
	.wrap .buy::after {
		content: ''; position: absolute; top: 50%; right: 20px; width: 20px; height: 20px;
		background: 100% 0/300% auto no-repeat url(/spicecharge/images/ico.svg);
		transform: translateY(-50%);
	}
	.wrap .buy.hide {
		transform: translateY(6.5em);
		transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	}
}

/* --------------------------------------------------------------------------
   product
-------------------------------------------------------------------------- */

#product { padding: 60px 0 0; color: #8c7e41; text-align: center; letter-spacing: .3em; }
#product .name { display: flex; width: 894px; margin: 0 auto 20px; }
#product .name li:first-child { width: 384px; }
#product .name li:last-child { width: 464px; }
#product .name li h2 {
	display: block; width: 100%; height: 0; padding: 0 0 68%;
	background: center/cover no-repeat url(/spicecharge/images/prod_sc.svg);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
#product .lead { margin: 0 0 24px; font: 500 2.4rem/2.0 'Noto Sans JP'; transform: scale(.9,1); }
#product h3 {
	margin: 0 0 64px; font: 700 4.2rem/1.6 'Noto Sans JP'; transform: scale(.9,1);
}
#product h3 span { display: block; font-size: 40%; font-weight: 500; line-height: 1.0; }

#product .detail { position: relative; width: 100%; color: #fff; }
.detail li:first-child {
	position: relative; width: 360px; background: linear-gradient(#ed1c24,#ffb261 92%);
}
.detail .TM li:first-child { background: linear-gradient(#fdaf15,#f55800 88%); }
.detail .BM li:first-child { background: linear-gradient(#863fbe 5%,#3c0078); }
.detail li:first-child i {
	display: block; width: 320px; height: 100%; margin-left: 40px; border-left: solid 2px #fff;
	background: center/cover no-repeat url(/spicecharge/images/prod_ga1.png);
	text-indent: 120%; white-space: nowrap; overflow: hidden;	
}
.detail .TM li:first-child i { background-image: url(/spicecharge/images/prod_tm1.png); }
.detail .BM li:first-child i { background-image: url(/spicecharge/images/prod_bm1.png); }
.detail li:first-child p {
	position: absolute; top: 12px; left: 40px; font: 1.6rem/40px 'Pattaya';
	transform-origin: 0 0; transform: rotate(90deg) scale(1,1); white-space: nowrap;
	text-align: left; letter-spacing: 0;
}
.detail li:last-child {
	width: 640px; border: solid 2px #fff; border-width: 0 0 0 2px; text-align: center;
}
.detail h4 { background: #aea57a; border-bottom: solid 2px #fff; }
.detail h4 span {
	display: inline-block; font: 600 2.0rem/52px 'Noto Sans JP'; transform: scale(.9,1);
	letter-spacing: 0;
}
.detail .info { position: relative; width: 100%; overflow: hidden; }
.detail .info .page {
	position: absolute; top: 50%; left: 16px; transform: translateY(-50%); z-index: 99;
}
.detail .info .page i {
	display: block; width: 6px; height: 6px; border-radius: 10px; background: #fff;
	margin: 10px 0;
}
.detail .info .page i.current {
	border: solid 1px #fff; background: transparent; transform: scale(1.5,1.5);
}
.detail .info h5, .detail .info p { transform: scale(.9,1); }
.detail .info .overview {
	background: linear-gradient(135deg,#ed1c24 9%,#ffb261);
	font: 500 1.8rem/1.6 'Noto Sans JP'; color: #fff;
}
.detail .TM .info .overview { background: linear-gradient(135deg,#fdaf15,#f55800 70%); }
.detail .BM .info .overview { background: linear-gradient(135deg,#863fbe 5%,#3c0078); }
.detail .info .overview a {
	display: block; width: 45%; margin: 16px auto 0; border: solid 2px #fff;
	border-radius: 80px; font: 1.8rem/2.2 'Noto Sans JP'; color: #fff; transform: scale(.9,1);
}
.detail .info .overview a::after {
	content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 4px;
	background: 100% 0/300% auto no-repeat url(/spicecharge/images/ico.svg); 
}
.detail .info .overview a:hover { background: #fff; color: #8c7e41; }
.detail .info .overview a:hover::after { background-position: 50% 100%; }
.detail .info .overview .mix {
	display: block; position: absolute; top: 20px; right: 20px; width: 92px; height: 92px;
	background: 0 0/300% auto no-repeat url(/spicecharge/images/mix.png);
	text-indent: 100%; white-space: nowrap; overflow: hidden;
}
.detail .TM .info .overview .mix { background-position: 50% 0; }
.detail .BM .info .overview .mix { background-position: 100% 0; }
.detail .info .spice {
	position: absolute; top: 0; right: -640px; width: 638px; height: 100%; padding: 10px 0 0;
	background: #8c7e41; font: 500 1.4rem/1.6 'Noto Sans JP'; color: #fff;
	transform: translateX(0); transition: transform 1s cubic-bezier(0.215,0.61,0.355,1) 0s; 
}
.detail .info .spice.show { transform: translateX(-640px); }
.detail .info .spice .tag {
	margin: 0 0 12px; font: 1.2rem/1.5 'Pattaya'; letter-spacing: 0; transform: scale(1,1);
}
.detail .info .spice h5 { margin: 0 0 10px; font: 600 1.8rem/1.5 'Noto Sans JP'; }
.detail .info .spice .ing {
	position: absolute; bottom: 20px; right: 20px; display: block; width: 140px;
}
.detail .info button {
	position: absolute; display: inline-block; font: 1.4rem/1.5 'Noto Sans JP'; color: #fff;
	appearance: none; border: none; outline: none; background: none; cursor: pointer;
	transform: scale(.9,1);
}
.detail .info button.next { bottom: 10px; right: 20px; }
.detail .info button.next::after {
	content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 4px;
	background: 100% 0/300% auto no-repeat url(/spicecharge/images/ico.svg);
}
.detail .info button.prev { bottom: 10px; left: 20px; }
.detail .info button.prev::before {
	content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 4px;
	background: 100% 100%/300% auto no-repeat url(/spicecharge/images/ico.svg);
}

@media screen and (min-width: 769px) {
	#product .name { justify-content: space-between; align-items: center; }
	#product .detail ul { display: flex; width: 1000px; margin: 20px auto 0; }
	.detail .info .overview, .detail .info .spice { width: 100%; height: 23.8rem; }
	.detail .info .overview {
		display: flex; flex-direction: column; justify-content: center; position: relative;
	}
}
@media screen and (max-width: 768px) {
	#product { letter-spacing: .08em; }
	#product .name { display: block; width: 100%; }
	#product .name li:first-child { width: 52%; margin: 0 auto 24px; }
	#product .name li:last-child { width: 64%; margin: 0 auto; }
	#product .lead { font-size: 1.6rem; }
	#product h3 { margin: 0 0 36px; font-size: 2.8rem; }
	#product h3 span { font-size: 50%; }
	
	#product .detail .buy { display: none; }
	#product .detail ul { display: block; width: 90vw; margin: 20px auto 0; }
	.detail li:first-child { width: 100%; }
	.detail li:first-child i { width: calc(100% - 40px); height: 82vw; }
	.detail li:first-child p { font: 2.0rem/40px 'Pattaya';}
	.detail li:last-child { width: 100%; border-width: 2px 0 0 0; }
	.detail h4 span { font-size: 1.8rem; }
	.detail .info .page { top: 10px; left: 10px; transform: translateY(0); }
	.detail .info .page i { display: inline-block; margin: 0 6px; }
	.detail .info .overview { width: 90vw; padding: 48px 0; }
	.detail .info .overview { font-size: 1.6rem; }
	.detail .info .overview a { width: 80%; margin: 20px auto 0; }
	.detail .info .overview .mix {
		position: relative; top: auto; right: auto; width: 30vw; height: 30vw;
		margin: 0 auto 20px;
	}
	.detail .info .spice { right: -90vw; width: 90vw; padding: 20px 0 48px; font-size: 1.6rem; }
	.detail .info .spice.show { transform: translateX(-90vw); }
	.detail .info .spice .ing {
		position: relative; bottom: auto; right: auto; width: 40%; margin: 20px auto 0;
	}
	.detail .info button.next { right: 10px; }
	.detail .info button.prev { left: 10px; }
}

/* --------------------------------------------------------------------------
   cm
-------------------------------------------------------------------------- */

#cm article { width: 640px; margin: 0 auto; text-align: center; }
#cm h2 { background: #8c7e41; color: #fff; }
#cm h2 span {
	display: inline-block; font: 500 2.8rem/2.2 'Noto Sans JP'; transform: scale(.9,1);
}

@media screen and (max-width: 768px) {
	#cm article { width: 90vw; }
	#cm h2 span { font-size: 2.0rem; }
}

/* --------------------------------------------------------------------------
   scene
-------------------------------------------------------------------------- */

#scene article {
	width: 1000px; margin: 0 auto; text-align: center; color: #8c7e41; letter-spacing: .1em;
}
#scene h2 { border: solid 2px #8c7e41; border-width: 2px 0 2px 0; letter-spacing: .2em;}
#scene h2 span {
	display: inline-block; font: 700 2.3rem/2.2 'Noto Sans JP'; transform: scale(.9,1);
}
#scene h3 { margin: 36px 0; font: 500 2.0rem/1.5 'Noto Sans JP'; transform: scale(.9,1); }
#scene ul { display: flex; justify-content: space-between; }
#scene li { width: 328px; }
#scene .type { display: flex; border-bottom: solid 2px #fff; color: #fff; }
#scene .type.TM { background: linear-gradient(#f55800,#fdaf15); }
#scene .type.GA { background: linear-gradient(#ed1c24 8%,#ffb261); }
#scene .type.BM { background: linear-gradient(#863fbe 6%,#3c0078); }
#scene .type dt { width: 78px; }
#scene .type i {
	display: block; width: 100%; height: 100%;
	background: center/contain no-repeat url(/spicecharge/images/prod_tm2.png);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
#scene .type.GA i { background-image: url(/spicecharge/images/prod_ga2.png); }
#scene .type.BM i { background-image: url(/spicecharge/images/prod_bm2.png); }
#scene .type dd { width: 250px; overflow: hidden; border-left: solid 2px #fff; }
#scene .type dd h4 { border-bottom: solid 2px #fff; font: 600 1.8rem/2.6 'Noto Sans JP'; }
#scene .type.BM dd h4 { padding: 0 10px; }
#scene .type dd h4 span { display: block; transform-origin: center; transform: scale(.85,1); }
#scene .type.BM dd h4 span {
	transform-origin: 0 0; transform: scale(.7,1); white-space: nowrap;
}
#scene .type dd p {
	padding: 1.6rem 0; font: 500 1.4rem/1.6 'Noto Sans JP'; transform: scale(.9,1);
}

@media screen and (max-width: 768px) {
	#scene article { width: 90vw; }
	#scene h2 span { font-size: 2.0rem; }
	#scene h3 { font-size: 1.6rem; }
	#scene ul { display: block; }
	#scene li { width: 100%; margin: 20px 0 0; }
	#scene .type dt { width: 23%; }
	#scene .type dd { width: 77%; }
	#scene .type dd h4 { font-size: 1.6rem; }
	#scene .type.BM dd h4 { padding: 0 1.7em; }
	#scene .type dd p { padding: 1.2rem; font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   online shop
-------------------------------------------------------------------------- */

#shop { text-align: center; }
#shop p { font: 500 2.2rem/1.6 'Noto Sans JP'; transform: scale(.9,1); color: #8c7e41; }
#shop p::before, #shop p::after {
	display: inline-block; font: 500 3.2rem/1.1 'Noto Sans JP'; vertical-align: middle;
}
#shop p::before { content: '＼'; margin-right: 6px; }
#shop p::after { content: '／'; margin-left: 3px; }
#shop a {
	display: block; position: relative; width: 640px; margin: 10px auto 0;
	background: linear-gradient(to right,#ffb261,#ed1c24 90%); border-radius: 50px;
	font: 600 2.8rem/3.2 'Noto Sans JP'; color: #fff; z-index: 0;
}
#shop a::before {
	content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	border-radius: 50px; background: #8c7e41; opacity: 0; transition: opacity .4s ease;
	z-index: -1;
}
#shop a::after {
	content: ''; position: absolute; top: 50%; right: 40px; width: 24px; height: 24px;
	background: 100% 0/300% auto no-repeat url(/spicecharge/images/ico.svg);
	transform: translateY(-50%);
}
#shop a:hover::before { opacity: 1; }

@media screen and (max-width: 768px) {
	#shop p { font-size: 1.6rem; }
	#shop p::before, #shop p::after { font-size: 2.2rem; }
	#shop a { width: 90%; font-size: 1.8rem; }
	#shop a::after { right: 20px; width: 20px; height: 20px; }
}

/* --------------------------------------------------------------------------
   animation
-------------------------------------------------------------------------- */

.di { opacity: 0; transform: translateY(-30px); }
.di.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateY(0);
}