@charset "utf-8";
@import "keyframes.css";
#container { background: #4f80b0;}
body.fixed { position: fixed;}
.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 2;}

.bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.bg div { width: 100%; max-width: 1280px; height: 100%; margin: 0 auto; background: url('../img/ion/bg-base.jpg') repeat-y 50% 0 / 100% auto;}

.bg-2 {}
@media (max-width: 801px) {
}
#ft { max-width: 1280px; background: url('../img/bg/ft-sv.jpg') no-repeat 50% 50% / cover;}
@media (max-width: 641px) {
	#ft { background: url('../img/bg/ft-sv@sp.jpg') no-repeat 50% 100% / cover;}
}

.note ul { width: 92%;}
.note ul li { color: #fff; font-size: 10px;}

@keyframes shooting {
 0% { opacity: 0; width: 0px;}
 30% { opacity: 1;}
 50% { opacity: 0; width: 800px; }
 80% { opacity: 0; transform: translateX(-400px);}
 100% { opacity: 0;}
}
@keyframes updown {
	0% { transform: translateY(0px);}
 50% { transform: translateY(8px);}
100% { transform: translateY(0px);}
}

#kv-ion { position: relative; width: 100%; overflow: hidden;}
#kv-ion .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#kv-ion .icn-new { position: absolute; left: 42%; top: 12%; width: 10vw; max-width: 120px; z-index: 9;}
#kv-ion .icn-new img { position: relative; width: 100%; transition: 0.4s linear 0.8s; opacity: 0;}

#kv-ion .txt { position: absolute; left: 0; top: 0; z-index: 10; width: 100%;}
#kv-ion .txt .inner { width: 94%; max-width: 1200px; margin: 0 auto;}
#kv-ion .txt .inner div { width: 60%; margin: 0 0 0 auto; padding-top: 240px;}
#kv-ion .txt p { text-align: center;}
#kv-ion .txt p img { position: relative; width: 90%; max-width: 650px;
 transition: 0.4s linear 0.4s; opacity: 0; transform: translateY(20px);
}
#kv-ion .txt p img.sp { display: none;}
#kv-ion .note { position: absolute; width: 100%; bottom: 15%; padding: 20px; z-index: 2;}
#kv-ion .note ul { text-align: right;}
#kv-ion .bg-kv { position: relative; width: 100%; z-index: 1;}
#kv-ion .bg-kv picture { display: block; width: 100%;}
#kv-ion .bg-kv picture img { width: 100%; height: auto;}

#kv-ion .news { position: absolute; left: 0%; top: 540px; width: 100%; z-index: 3;}
#kv-ion .news .inner { position: relative; width: 94%; max-width: 1200px; margin: 0 auto; transition: 0.4s linear 0.8s; opacity: 0; transform: translateY(20px);}
#kv-ion .news .inner div { width: 60%; margin: 0 0 0 auto;}
#kv-ion .news .inner div a { display: block; margin: 0 auto; width: 88%; max-width: 350px; margin: 0 auto; padding: 20px; background: url('../img/bg/news.png') no-repeat 50% 50%  / 100% 100%; color: #0f275d; text-decoration: none;}
#kv-ion .news a dl { display: table; width: 100%; margin: 0 auto;}
#kv-ion .news a dl dt,
#kv-ion .news a dl dd { display: table-cell; vertical-align: middle;}
#kv-ion .news a dl dt { width: 90px;}
#kv-ion .news a dl dt img{ width: 100%;}
#kv-ion .news a dl dd { width: auto; padding-left: 15px; font-size: 13px;}
#kv-ion .news a dl dd span.date { display: block; font-size: 12px;}
#kv-ion .news a:hover { opacity: 0.85;}

#kv-ion.show .icn-new img { opacity: 1;}
#kv-ion.show .txt h1 img,
#kv-ion.show .txt p img,
#kv-ion.show .news div { opacity: 1; transform: translateY(0px);}
#kv-ion.show .txt-sp p img { opacity: 1; transform: translateY(0px);}
#kv-ion.show .bg-kv .c { opacity: 1;}
@media (max-width: 1281px) {
	#kv-ion .txt .inner div { padding-top: 21vw;}
	#kv-ion .news { top: 42vw;}
}
@media (max-width: 1001px) {
	#kv-ion .txt h1 { margin-bottom: 3.2vw;}
}
@media (max-width: 801px) {
	#kv-ion { padding-bottom: 0px;}
	#kv-ion .icn-new { left: auto; right: 6%; top: 26%; width: 16vw;}

	#kv-ion .txt { position: absolute; left: 0%; width: 100%;}
	#kv-ion .txt .inner div { width: 100%; padding-top: 14vw;}

	#kv-ion .news { top: auto; bottom: 18vw; left: 0px; width: 100%;}
	#kv-ion .news .inner div { width: 100%; margin: 0 auto;}

	#kv-ion .note { bottom: 4%;}
	#kv-ion .note ul { margin: 0 auto; text-align: left;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {

	#kv-ion .news { bottom: 18vw;}
	#kv-ion .news a dl dt { width: 60px;}
	#kv-ion .news a dl dd { font-size: 13px;}
	#kv-ion .news a dl dd span.date { font-size: 11px;}

	#kv-ion .note { bottom: 2%;}
	#kv-ion .note { padding: 16px 0px;}
}

.lead { width: 100%; position: relative; z-index: 2;}
.lead .inner { padding: 0px 0 20px;}
.lead p { color: #fff; font-size: clamp(14px,2.8vw,28px); font-weight: 700; letter-spacing: 0.075rem; text-align: center;}
.lead p img { display: block; width: 72%; max-width: 500px; margin: 0 auto 30px;}
.lead p span { display: block;}
.lead p sub { font-size: 16px; vertical-align: baseline;}
@media (max-width: 801px) {
	.lead .inner{ padding: 60px 0 20px;}
	.lead p { font-size: 3.6vw;}
	.lead p sub { font-size: 12px;}
}
@media (max-width: 481px) {
	.lead .inner{ padding: 40px 0 12px;}
	.lead p img { margin-bottom: 20px;}
	.lead p sub { font-size: 10px;}
}

#story {}
#story .inner-sct { width: 92%; margin: 0 auto; padding: 20px 0 40px;}
#story .movie { width: 90%; max-width: 630px; margin: 0 auto 20px;}
#story .movie .inner { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden;}
#story .movie .preload { position: absolute; left: 0; top: 0; z-index: 2; width: 100%;}
#story .movie .preload img { width: 100%; opacity: 1; transition: 0.3s linear;}
#story .movie .preload.fade img { opacity: 0;}
#story .movie iframe{ position: absolute; z-index: 1; width: 100%; top: 50%; transform: translateY(-50%);}
#story .movie video { position: relative; z-index: 1; width: 100%;}
#story .note ul { max-width: 850px; margin: 0 auto;}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#story .inner-sct { padding: 12px 0 20px;}
}



.ttl h2 { line-height: 1; text-align: center;}
.ttl h2 img { width: 85%; max-width: 500px;}
.ttl p { margin-top: -10px; color: #fff; font-size: 15px; text-align: center;}
@media (max-width: 481px) {
	.ttl p { margin-top: -6px; font-size: 12px;}
}

#point { padding: 40px 0 60px;}
#point .ttl { margin-bottom: 50px;}
#point h3 { margin-bottom: 40px; color: #fff; text-align: center;}
#point h3 img { width: 68%; max-width: 480px; height: auto;}
#point p { color: #fff; font-weight: 700; text-align: center;}
#point p.read-1 { margin-bottom: 20px; font-size: clamp(12px,2.6vw,24px);}
#point p.read-2 { font-size:  clamp(12px,3.0vw,28px);}
#point p.read-1 span { display: block;}
#point p.read-2 span { display: block;}
#point p sub { font-size: 12px; vertical-align: baseline;}
#point p.note { font-size: 12px;}
#point .ctn-pc { position: relative;}
#point .ctn-pc .box { position: absolute; left: 0; top: 0; width: 100%;}
#point .ctn-pc.fixed .box { position: fixed;}
#point .ctn-pc .box.show {}
#point .ctn-pc .box .inner-box { width: 88%; max-width: 1024px; margin: 0 auto; padding: 50px 0; transition: 0.3s linear; opacity: 0;}
#point .ctn-pc .box.show .inner-box { opacity: 1;}
#point .ctn-pc .box .ctn-flex { display: flex; width: 100%; justify-content: space-between;}
#point .ctn-pc .box .tit { width: 48%; max-width: 480px;}
#point .ctn-pc .box .fig { width: 50%;}
#point .ctn-pc .box .tit img { width: 100%; height: auto;}
#point .ctn-pc .box .fig figure { width: 100%; border-radius: 30px; overflow: hidden;}
#point .ctn-pc .box .fig figure img { width: 100%; height: auto;}

#point .ctn-sp { display: none; margin: 0 auto 20px;}
#point .ctn-sp ul { width: 92%; max-width: 680px; margin: 0 auto; padding-top: 30px;}
#point .ctn-sp ul li { margin: 0 auto 30px;}
#point .ctn-sp ul li:last-child { margin: 0 auto;}
#point .ctn-sp ul li dl dt { position: relative; cursor: pointer;}
#point .ctn-sp ul li dl dt:after { content: ''; display: block; width: 20px; height: 20px; border-bottom: solid 2px #44035e; border-right: solid 2px #44035e;
 position: absolute; right: 6%; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#point .ctn-sp ul li dl dt.open:after { transform: translateY(-40%) rotate(225deg);}
#point .ctn-sp ul li dl dd { display: none; padding-top: 15px; padding-left: 7%;}
#point .ctn-sp ul li dl dt img { width: 100%;}
#point .ctn-sp ul li dl dd img { width: 100%; border-radius: 30px;}
#point .note ul { width: 92%; max-width: 1024px; margin: 0 auto;}

@media (max-width: 801px) {
	#point .ttl { margin-bottom: 30px;}
	#point p.note { margin-bottom: 30px;}
	#point .ctn-pc { display: none;}
	#point .ctn-sp { display: block;}
}
@media (max-width: 481px) {
	#point { padding-bottom: 40px;}
	#point .ttl { margin-bottom: 20px;}
	#point h3 { margin-bottom: 16px; font-size: 21px;}
	#point p.read-2 { margin-bottom: 0px;}
	#point p sub { font-size: 10px;}
	#point p.note { margin-bottom: 20px;}
	#point .ctn-sp ul li { margin: 0 auto 20px;}
	#point .ctn-sp ul li dl dt:after { width: 12px; height: 12px; right: 4%;}
	#point .ctn-sp ul li dl dd { padding-top: 10px;}
	#point .ctn-sp ul li dl dd img { border-radius: 20px;}
}


#pickup .inner-sct { width: 92%; max-width: 1080px; margin: 0 auto; padding: 60px 0 120px;}
#pickup .ttl { margin-bottom: 50px;}
#pickup .ctn { width: 100%; margin: 0 auto 40px;}
#pickup .ctn .board { width: 100%; max-width: 700px; margin: 0 auto 30px;
 border: solid 2px #fff;
 background: rgba(255,255,255,0.25);
 box-shadow: 0 0 30px rgba(255,255,255,0.6), 0 0 30px rgba(255,255,255,0.6), 0 0 40px inset rgba(255,255,255,0.6);
}
#pickup .ctn .board img { width: 100%;}
#pickup .ctn picture { display: block; width: 100%; max-width: 900px; margin: 0 auto 30px;}
#pickup .ctn picture img { width: 100%;}

#pickup .use { position: relative; width: 90%; max-width: 720px; margin: 0 auto; background: #006ab7;}
#pickup .use dl { display: table; width: 100%; padding: 20px 30px;}
#pickup .use dl dt,
#pickup .use dl dd { display: table-cell; vertical-align: middle;}
#pickup .use dl dt { width: 230px; }
#pickup .use dl dt img { width: 100%;}
#pickup .use dl dd { padding-left: 30px; color: #fff; font-size: clamp(11px,2.1vw,21px); line-height: 1.4;}
#pickup .use dl dd span { display: block; font-size: clamp(12px,2.2vw,22px);}
#pickup .note {}
#pickup .note ul { max-width: 1024px; margin: 0 auto;}
@media (max-width: 801px) {
	#pickup .use dl dt { width: 180px; }
	#pickup .use dl dd { padding-left: 20px;}
}
@media (max-width: 481px) {
	#pickup .inner-sct { width: 100%; padding: 40px 0;}
	#pickup .ttl { margin-bottom: 20px;}
	#pickup .ctn { margin: 0 auto 20px;}
	#pickup .ctn .board { width: 82%; margin: 0 auto 20px; box-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 20px rgba(255,255,255,0.6), 0 0 20px inset rgba(255,255,255,0.6);}
	#pickup .ctn picture { margin-bottom: 12px;}

	#pickup .use dl { padding: 12px 15px;}
	#pickup .use dl dt { width: 100px; }
}




#product { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: #f6f4f7; z-index: 2;}
#product .signboard { position: relative; width: 100%;}
#product .signboard .tit { position: absolute; left: 0; top: 60px; width: 100%; z-index: 2;}
#product .signboard .tit h2 { text-align: center; }
#product .signboard .tit h2 img { display: block; width: 64%; max-width: 380px; margin: 0 auto 6px;}
#product .signboard .tit h2 span { display: block; color: #010873; font-size: 14px; font-weight: 700; letter-spacing: 0.1rem;}
#product .signboard .tit p { color: #0343a1; font-size: 15px; font-weight: 700; letter-spacing: 0.1rem;}
#product .signboard .btn { position: absolute; left: 0; bottom: 35px; width: 100%; z-index: 2;}
#product .signboard .btn .toggle { position: relative; width: 70%; max-width: 380px; margin: 0 auto; border-radius: 10px;
	background: linear-gradient(30deg,#274a6d, #335678 20%, #43739b 50%, #335678 80%, #274a6d); cursor: pointer;
}
#product .signboard .btn .toggle:before,
#product .signboard .btn .toggle:after { content: ''; display: block; width: 4px; height: 30px; background: #fff; position: absolute; right: 30px; top: 50%; }
#product .signboard .btn .toggle:before{ transform: translateY(-50%);}
#product .signboard .btn .toggle:after { transform: translateY(-50%) rotate(90deg);}
#product .signboard .btn.open .toggle:before { transform: translateY(-50%) rotate(90deg);}
#product .signboard .btn .toggle span { display: block; padding: 10px 0; padding-right: 30px;
 color: #fff; font-size: clamp(16px,2.4vw,24px); font-weight: 700; letter-spacing: 0.1rem; text-align: center;
}
#product .signboard .bg { position: relative; width: 100%;}
#product .signboard .bg picture { display: block; width: 100%;}
#product .signboard .bg picture img { width: 100%; height: auto;}
@media (max-width: 801px) {
	#product .signboard .tit { top: 11.5vw;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#product .signboard .tit { top: 8vw;}
	#product .signboard .tit h2 span { font-size: 12px;}
	#product .signboard .btn { bottom: 30px;}
	#product .signboard .btn .toggle:before,
	#product .signboard .btn .toggle:after { width: 2px; height: 20px; right: 20px;}
}


#product .hide-ctn { display: none;}
#product .bloc { background: linear-gradient(165deg,#b6d2db, #edf7f9 35%, #b6d2db 65%, #edf7f9);}
#product .bloc .inner-bloc { padding: 60px 0;}
#product .bloc .ctn-flex { position: relative; display: flex; justify-content: space-between; width: 88%; max-width: 1080px; margin: 0 auto;}
#product .bloc .ctn-flex.sub { max-width: 920px; margin-bottom: 40px;}
#product .bloc .ctn-flex.re { flex-direction: row-reverse; align-items: center;}
#product .bloc .img-ctn { width: 30%;}
#product .bloc .txt-ctn { width: 70%; position: relative;}
#product .bloc .item { width: 45%; max-width: 340px;}

#product .bloc .cart form { display: block; position: relative; background: linear-gradient(-25deg,#274a6d, #335678 20%, #43739b 50%, #335678 80%, #274a6d); border-radius: 50px; overflow: hidden;}
#product .bloc .cart form svg { position: absolute; left: 15%; top: 30%; width: 24px; fill: #fff; z-index: 2; transition: 0.4s linear;}

#product .bloc .cart form:before { content: ''; display: block; width: 24px; height: 24px; position: absolute; left: 15%; top: 50%; transform: translateY(-50%);
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><g fill="%23fff"><path d="M5.7,26.5a1.06,1.06,0,0,1,0-2.11H20l.66-2.46H5.54a1.07,1.07,0,0,1-1-.77L.77,7.78A1.05,1.05,0,0,1,1,6.86a1.07,1.07,0,0,1,.84-.42h23L26.22,1a1.06,1.06,0,0,1,1-.79h5a1.07,1.07,0,0,1,1.06,1.06,1.06,1.06,0,0,1-1.06,1.05H28.05L21.81,25.72a1.05,1.05,0,0,1-1,.78Zm12.48-6.68h3l1.21-4.58H18.18Zm-7.1,0h5V15.24h-5Zm-4.74,0H9V15.24H5.06Zm11.84-6.69H23l1.21-4.58h-6Zm-7.1,0h5V8.55h-5Zm-6.62,0H9V8.55H3.18Z"/><path d="M7.94,33.84a3,3,0,1,1,3-3A3,3,0,0,1,7.94,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.91.91,0,0,0,7.94,29.92Z"/><path d="M19,33.84a3,3,0,1,1,3-3A3,3,0,0,1,19,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.9.9,0,0,0,19,29.92Z"/></g></svg>');
 background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% auto; transition: 0.4s linear;
}					
#product .bloc .cart form input[type="submit"]{ display: block; width: 100%; padding: 18px 0; border: none;
 background: rgba(255,255,255,0); transition: 0.3s linear;
 color: #fff; font-size: clamp(15px,2.4vw,24px);; line-height: 1; text-align: center; text-indent: 24px;
}
#product .bloc .cart form:hover input[type="submit"]{ background: rgba(255,255,255,0.15);}

#product .bloc .cart span { display: block; position: relative; padding: 18px 0; background: #a1a1a1; border-radius: 50px;
 line-height: 1; text-align: center; overflow: hidden;}
#product .bloc .cart span svg { display: inline-block; width: 24px; margin-right: 8px; fill: #fff; vertical-align: middle;}
#product .bloc .cart span em { display: inline-block; color: #fff; font-size: 24px; vertical-align: middle;}

#product .bloc .img-ctn figure { text-align: center;}
#product .bloc .img-ctn figure img { width: 88%; max-width: 300px;}
#product .bloc .txt-ctn .icn { width: 24%; max-width: 200px; margin-bottom: 30px;}
#product .bloc .txt-ctn .icn img { width: 100%;}
#product .bloc .txt-ctn .name { margin-bottom: 20px;}
#product .bloc .txt-ctn .name h3 { color: #0e275d; font-size: clamp(18px,3.8vw,40px); line-height: 1.2;}
#product .bloc .txt-ctn .name h3 span { display: block; margin-bottom: 8px; color: #006ab7; font-size: clamp(15px,3.0vw,28px);}
#product .bloc .txt-ctn .name h3 span sub { font-size: 12px;}
#product .bloc .txt-ctn .name h3 br.sp { display: none;}
#product .bloc .txt-ctn .aside { position: relative;}
#product .bloc .txt-ctn .amount { margin-bottom: 20px;}
#product .bloc .txt-ctn .amount p { color: #0e275d; font-size: 24px; font-weight: 700; line-height: 1.2;}
#product .bloc .txt-ctn .amount p span { display: inline-block; padding: 2px 20px; border: solid 2px #0e275d; border-radius: 50px;}
#product .bloc .txt-ctn .amount p span.g { padding: 2px 20px 5px;}
#product .bloc .txt-ctn p.price { margin-bottom: 60px; color: #0e275d; font-size: clamp(15px,2.2vw,22px);}
#product .bloc .txt-ctn p.price span { display: block; font-size: clamp(18px,3.0vw,28px); font-weight: 700;}

#product .bloc .txt-ctn .flavor { position: absolute; left: 46%; top: 50%; transform: translateY(-60%); width: 50%;}
#product .bloc .txt-ctn .flavor picture { display: block; width: 85%; max-width: 280px; margin: 0 auto;}
#product .bloc .txt-ctn .flavor picture img { width: 100%;}

#product .bloc .txt-ctn .cart { width: 50%; max-width: 320px;}

#product .bloc .item figure { text-align: center;}
#product .bloc .item figure img { width: 92%; max-width: 280px;}
#product .bloc .ctn-flex.sub .item figure img { max-width: 200px;}
#product .bloc .item .txt h3 { margin-bottom: 10px; color: #0e275d; font-size: clamp(12px,2.4vw,24px); font-weight: 700; text-align: center;}
#product .bloc .item .txt p.amount { color: #0e275d; font-size: clamp(13px,2.2vw,22px); font-weight: 700; text-align: center;}
#product .bloc .item .txt hr { width: 92%; margin: 20px auto; border: none; border-top: solid 2px #0e275d;}
#product .bloc .item .txt p.price { margin-bottom: 30px; color: #0e275d; font-size: clamp(12px,2.0vw,20px); text-align: center;}
#product .bloc .item .txt p.price span { display: block; font-size: clamp(14px,2.4vw,24px); font-weight: 700;}
#product .bloc .item .cart { width: 90%; margin: 0 auto;}
#product .note { padding: 25px 0;text-align: center;}
#product .note ul {  display: inline-block; text-align: left;}
#product .note ul li { color: #25272f;}
@media (max-width: 1201px) {
	#product .bloc .txt-ctn p.price { margin-bottom: 40px;}
	#product .bloc .txt-ctn .flavor { left: 55%; width: 45%;}
}
@media (max-width: 641px) {
	#product .bloc .inner-bloc { padding: 30px 0 60px;}

	#product .bloc .ctn-flex { display: block;}
	#product .bloc .ctn-flex.sub { display: flex !important;}
	#product .bloc .img-ctn { position: absolute; width: 42%;}
	#product .bloc .txt-ctn { width: 100%;}

	#product .bloc#item-1 .img-ctn { right: -6%; top: 50%; transform: translateY(-50%);}
	#product .bloc#item-2 .img-ctn { left: -6%; top: 56%; transform: translateY(-50%);}
	#product .bloc#item-3 .img-ctn { right: -6%; top: 56%; transform: translateY(-50%);}
	#product .bloc#item-4 .img-ctn { left: -6%; top: 56%; transform: translateY(-50%);}
	#product .bloc .txt-ctn figure.sp img { width: 100%;}

	#product .bloc .txt-ctn .icn { width: 28%;}
	#product .bloc#item-2 .txt-ctn { padding-top: 240px;}
	#product .bloc#item-4 .txt-ctn { padding-top: 140px;}
	#product .bloc#item-2 .txt-ctn .icn,
	#product .bloc#item-4 .txt-ctn .icn { position: absolute; left: 0; top: 0; margin: 0;}
	#product .bloc .txt-ctn .name {}
	#product .bloc#item-2 .txt-ctn .name,
	#product .bloc#item-4 .txt-ctn .name { padding-left: 40%;}
	#product .bloc .txt-ctn .name h3 span { margin-bottom: 20px;}
	
	#product .bloc .txt-ctn .aside { padding-bottom: 80px;}
	#product .bloc#item-2 .txt-ctn .aside,
	#product .bloc#item-4 .txt-ctn .aside { padding-left: 40%; padding-bottom: 150px;}
	
	#product .bloc .txt-ctn .amount p { font-size: 16px;}

	#product .bloc .txt-ctn .flavor { position: relative; left: 0%; top: auto; transform: translateY(0%); width: 100%;}
	#product .bloc .txt-ctn .flavor picture { margin: 0;}

	#product .bloc .txt-ctn .aroma { position: relative; left: 0%; top: auto; transform: translateY(0%); width: 100%;}
	#product .bloc .txt-ctn .aroma figure img.pc{ display: none;}
	#product .bloc .txt-ctn .aroma figure img.sp{ display: block;}
	
	#product .bloc .txt-ctn .cart { width: 100%; max-width: 100%; position: absolute; left: 0; bottom: 0;}
	#product .bloc .txt-ctn .cart form { width: 80%; max-width: 320px; margin: 0 auto;}

	#product .bloc .cart span { width: 80%; max-width: 320px; margin: 0 auto;}
	#product .note ul { width: 92%; margin: 0 auto; text-align: left;}
	#product .note ul li { display: block; padding: 0px;}

}
@media (max-width: 481px) {
	#product .bloc .cart form svg { left: 24%; top: 24%; width: 18px;}
	#product .bloc .cart form:before { left: 24%; width: 18px; height: 18px;}
	#product .bloc .cart form input[type="submit"]{ padding: 12px 0; font-size: 16px;}

	#product .bloc .inner-bloc { padding: 20px 0 30px;}
	#product .bloc .img-ctn figure img { width: 80%;}
	#product .bloc#item-2 .txt-ctn { padding-top: 132px;}
	#product .bloc .txt-ctn .icn { margin-bottom: 12px;}
	#product .bloc .txt-ctn .name { margin-bottom: 10px;}
	#product .bloc#item-2 .txt-ctn .name { padding-left: 36%;}
	#product .bloc .txt-ctn .name h3 span { margin-bottom: 12px;}
	#product .bloc .txt-ctn .name h3 span sup { font-size: 10px;}

	#product .bloc .txt-ctn .aside { padding-bottom: 60px;}
	#product .bloc#item-2 .txt-ctn .aside { padding-left: 36%; padding-bottom: 80px;}

	#product .bloc .txt-ctn .amount { margin-bottom: 10px;}
	#product .bloc .txt-ctn .amount p { font-size: 14px;}
	#product .bloc .txt-ctn .amount p span { padding: 2px 14px; border-width: 1px;}
	#product .bloc .txt-ctn .amount p span.g { padding: 2px 14px 5px;}

	#product .bloc .txt-ctn p.price { margin-bottom: 12px;}
	#product .bloc .txt-ctn .flavor picture { width: 100%; max-width: 220px;}

	#product .bloc .item figure img { width: 80%;}
	#product .bloc .item .txt h3 { margin-bottom: 2px; font-size: 12px;}
	#product .bloc .item .txt p.amount { font-size: 14px;}
	#product .bloc .item .txt hr { margin: 10px auto; border-width: 1px;}
	#product .bloc .item .txt p.price { margin-bottom: 15px; font-size: 11px;}
	#product .bloc .item .txt p.price span { font-size: 14px;}

	#product .bloc .ctn-flex.sub .cart form:before { left: 12%;}
	#product .bloc .ctn-flex.sub .cart form input[type="submit"]{ padding: 10px 0; font-size: 12px;}
/*	#product .bloc .cart span { padding: 12px 0; font-size: 12px;}*/

	#product .bloc .cart span { padding: 10px 0; font-size: 12px;}
	#product .bloc .cart span svg{ width: 14px;}
	#product .bloc .cart span em { font-size: 12px;}

	#product .note { padding: 12px 0;}
}



#shop { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 2;}
#shop .inner-sct { width: 92%; margin: 0 auto; padding: 60px 0;}
#shop .ttl { margin-bottom: 20px;}
#shop h3 { color: #fff; font-size: 25px; text-align: center;}
#shop p { margin-bottom: 40px; color: #fff; text-align: center;}
#shop .parts { max-width: 330px; margin: 0 auto;}
#shop .parts a.btn { border-width: 2px;}
#shop .parts a.btn span { font-size: clamp(24px,4.5vw,45px);; font-weight: 700; line-height: 1.4;}
#shop .parts a.btn span:after { width: 18px; height: 18px; border-top: solid 3px #fff; border-right: solid 3px #fff; right: 30px;}
@media (max-width: 481px) {
	#shop .inner-sct { padding: 40px 0;}
	#shop h3 { font-size: 17px;}
	#shop p { margin-bottom: 20px; font-size: 12px;}
	#shop .parts { max-width: 180px;}
	#shop .parts a.btn span:after { width: 12px; height: 12px; border-width: 2px; right: 20px;}
}




#campaign .inner-sct { width: 92%; max-width: 800px; margin: 0 auto; padding: 30px 0 60px;}
#campaign .board { position: relative; width: 100%;}
#campaign .board img { width: 100%;}
#campaign .board .btn { position: absolute; left: 49%; bottom: 12%; width: 42%; }
#campaign .board .btn a { display: block; width: 100%; max-width: 290px; margin: 0 auto 10px; padding: 8px 0;
 background: linear-gradient(-25deg,#274a6d, #335678 20%, #43739b 50%, #335678 80%, #274a6d); border-radius: 50px;
 color: #fff; font-size: clamp(13px,2.1vw,21px); text-align: center; text-decoration: none;
}
#campaign .board .btn a:hover { opacity: 0.8;}
#campaign .board .btn p { color: #0e275d; font-size: clamp(11px,2.1vw,21px); line-height: 1; text-align: center;}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 30px 0;}
	#campaign .board .btn { bottom: 8%;}
	#campaign .board .btn a { margin-bottom: 6px; padding: 4px 0;}
}