@charset "utf-8";

@import "keyframes.css";
#container { background: #0d1344;}
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/tera/bg/base.jpg') repeat-y 50% 0 / 100% auto;}

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

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

.mfp-bg { background: #000;}
.mfp-figure:after { content: none;}
.mfp-figure figure { width: 85%; max-width: 600px; margin: 0 auto;}
@media (max-width: 901px) {
	.mfp-image-holder .mfp-close,
	.mfp-iframe-holder .mfp-close { width: 50%; right: 0%;}
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	.mfp-close:before,
	.mfp-close:after { height: 32px; right: 15%;}
}
/*
@keyframes shooting {
 0% { opacity: 0; transform: translateX(800px);}
 50% { opacity: 1;}
 80% { opacity: 0;}
 100% { opacity: 0; transform: translateX(-500px);}
}
*/

@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-tera { position: relative; width: 100%; overflow: hidden;}
#kv-tera .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#kv-tera .icn-new { position: absolute; left: 5%; bottom: 6vw; width: 10vw; max-width: 140px; z-index: 9;}
#kv-tera .icn-new img { position: relative; width: 100%; transition: 0.4s linear 0.8s; opacity: 0;}

#kv-tera .txt { position: absolute; left: 42%; z-index: 10; width: 48%; padding-top: 120px;}
#kv-tera .txt h1 { margin-bottom: 80px; text-align: center;}
#kv-tera .txt p { text-align: center;}
#kv-tera .txt h1 img{ position: relative; width: 65%; max-width: 360px; opacity: 0; transform: translateY(20px);}
#kv-tera .txt p img { position: relative; width: 90%; /* max-width: 450px;*/ opacity: 0; transform: translateY(20px);}
#kv-tera .txt h1 img{ transition: 0.4s linear;}
#kv-tera .txt p img { transition: 0.4s linear 0.4s;}
#kv-tera .note { position: absolute; width: 100%; bottom: 0px; padding: 20px; z-index: 2;}
#kv-tera .note ul { max-width: 680px; margin: 0 0 0 auto;}

#kv-tera .bg-kv { position: relative; width: 100%; z-index: 1;}
#kv-tera .bg-kv img { width: 100%; z-index: 1;}
#kv-tera .bg-kv img.sp { display: none;}
#kv-tera .bg-kv .c { position: absolute; z-index: 3; transition: 1.2s linear; opacity: 0;}
#kv-tera .bg-kv .c:after { content: ''; position: relative; display: block; width: 100%; height: 100%;}
#kv-tera .bg-kv .c.c-1 { /* width: 158px; */  width: 92px; height: 162px; left: 0; top: 5%;}
#kv-tera .bg-kv .c.c-1:after { background: url('../img/tera/bg/collagen-1.png') no-repeat 100% 50% / auto 100%; animation: 3.0s updown linear infinite;}
#kv-tera .bg-kv .c.c-2 { /* width: 80px; */ width: 50px; height: 80px; left: 0; top: 35%;}
#kv-tera .bg-kv .c.c-2:after { background: url('../img/tera/bg/collagen-2.png') no-repeat 100% 50% / auto 100%; animation: 5.0s updown linear 0.2s infinite;}
#kv-tera .bg-kv .c.c-3 { width: 85px; height: 92px; left: 46%; top: 32%;}
#kv-tera .bg-kv .c.c-3:after { background: url('../img/tera/bg/collagen-3.png') no-repeat 50% 50% / 100% 100%; animation: 3.0s updown linear infinite;}
#kv-tera .bg-kv .c.c-4 { width: 100px; height: 120px; right: 20%; top: 2%;}
#kv-tera .bg-kv .c.c-4:after { background: url('../img/tera/bg/collagen-4.png') no-repeat 50% 50% / 100% 100%; animation: 5.0s updown linear -0.8s infinite;}
#kv-tera .bg-kv .c.c-5 { /* width: 200px; */ width: 160px; height: 182px; right: 0; top: 5%;}
#kv-tera .bg-kv .c.c-5:after { background: url('../img/tera/bg/collagen-5.png') no-repeat 0% 50% / auto 100%; animation: 3.0s updown linear infinite;}
#kv-tera .bg-kv .c.c-6 { /* width: 192px; */ width: 130px; height: 230px; right: 0; bottom: 5%;}
#kv-tera .bg-kv .c.c-6:after { background: url('../img/tera/bg/collagen-6.png') no-repeat 0% 50% / auto 100%; animation: 4.0s updown linear 0.4s infinite;}
#kv-tera .bg-kv .shooting { position: absolute; right: 0%; top: 60px; width: 100%; height: 100px; transform: rotate(-10deg); z-index: 2;}
#kv-tera .bg-kv .shooting:after { content: ''; display: block; width: 800px; height: 56px; position: absolute; right: 0; top: 0;
 background: url('../img/tera/bg/shooting.png') no-repeat 50% 50%  / 100% auto;
 animation: 8.0s shooting ease-in infinite;
}

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

#kv-tera.show .icn-new img { opacity: 1;}
#kv-tera.show .txt h1 img,
#kv-tera.show .txt p img,
#kv-tera.show .news div { opacity: 1; transform: translateY(0px);}
#kv-tera.show .txt-sp p img { opacity: 1; transform: translateY(0px);}
#kv-tera.show .bg-kv .c { opacity: 1;}
@media (max-width: 1281px) {
	#kv-tera .txt { padding-top: 8.5vw;}
	#kv-tera .news { top: 40vw;}
}
@media (max-width: 1001px) {
	#kv-tera .txt h1 { margin-bottom: 6.2vw;}
	#kv-tera .bg-kv .c.c-1 { width: 80px; height: 120px;}
	#kv-tera .bg-kv .c.c-2 { width: 30px; height: 60px;}
	#kv-tera .bg-kv .c.c-3 { width: 60px; height: 60px;}
	#kv-tera .bg-kv .c.c-4 { width: 80px; height: 100px;}
	#kv-tera .bg-kv .c.c-5 { width: 120px; height: 150px;}
	#kv-tera .bg-kv .c.c-6 { width: 100px; height: 180px;}
}
@media (max-width: 801px) {
	#kv-tera { padding-bottom: 0px;}
	#kv-tera .icn-new { left: 8%; top: 48%; width: 18vw;}

	#kv-tera .txt { position: absolute; left: 0%; width: 100%; padding-top: 6vw;}
	#kv-tera .txt h1 {}
	#kv-tera .txt h1 img{ width: 45%;}

	#kv-tera .news { top: auto; bottom: 18vw; left: 0px; width: 100%;}
	#kv-tera .bg-kv img.pc { display: none;}
	#kv-tera .bg-kv img.sp { display: block;}

	#kv-tera .bg-kv .c.c-1 { top: 18%;}
	#kv-tera .bg-kv .c.c-2 { width: 50px; height: 50px; left: 8%; top: 70%;}
	#kv-tera .bg-kv .c.c-3 { width: 60px; height: 60px; left: 76%; top: 2%;}
	#kv-tera .bg-kv .c.c-4 { width: 60px; height: 80px; right: 0%; top: -30px;}
	#kv-tera .bg-kv .c.c-5 { width: 100px; height: 120px;}
	#kv-tera .bg-kv .c.c-6 { bottom: 45%;}
	#kv-tera .bg-kv .shooting { top: 0;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#kv-tera .txt { padding-top: 7vw;}
	#kv-tera .txt h1 { margin-bottom: 10vw;}

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

	#kv-tera .note { padding: 20px 0px;}
	#kv-tera .note ul { margin: 0 auto;}

	#kv-tera .bg-kv .c.c-1 { width: 40px; height: 90px;}
	#kv-tera .bg-kv .c.c-2 { width: 40px; height: 40px; top: 60%;}
	#kv-tera .bg-kv .c.c-3 { width: 40px; height: 40px;}
	#kv-tera .bg-kv .c.c-4 { width: 60px; height: 80px;}
	#kv-tera .bg-kv .c.c-5 { width: 60px; height: 100px;}
	#kv-tera .bg-kv .c.c-6 { width: 90px; height: 140px;}
	#kv-tera .bg-kv .shooting { top: -20px;}

}

.lead { width: 100%; position: relative; z-index: 2;}
.lead .inner { padding: 100px 0 40px;}
.lead p { color: #fff; font-size: 28px; font-weight: 700; letter-spacing: 0.075rem; text-align: center;}
.lead p img { display: block; width: 85%; 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 40px;}
	.lead p { font-size: 3.6vw;}
	.lead p sub { font-size: 12px;}
}
@media (max-width: 481px) {
	.lead p { font-size: 15px;}
	.lead p sub { font-size: 10px;}
}

#story { margin: 0 auto 80px;}
#story .inner-sct { width: 92%; margin: 0 auto;}
#story .movie { width: 90%; max-width: 540px; margin: 0 auto 20px;}
#story .movie .inner { position: relative; width: 100%;}
#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 video { position: relative; z-index: 1; width: 100%;}
#story .note ul { max-width: 660px; margin: 0 auto;}
@media (max-width: 641px) {
	#story { margin: 0 auto 40px;}
}
@media (max-width: 481px) {
	#story .inner-sct { padding-top: 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: 20px 0 60px;}
#point .ttl { margin-bottom: 50px;}
#point h3 { margin-bottom: 50px; color: #fff; font-size: 30px; font-weight: 500; text-align: center; text-decoration: underline; text-underline-offset: 8px;text-decoration-thickness: 1px}
#point p { color: #fff; font-weight: 700; text-align: center;}
#point p.read-1 { margin-bottom: 20px; font-size: 24px;}
#point p.read-2 { font-size: 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%;}
#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: 530px; margin: 0 auto;}
#point .note ul li { color: #fff; font-size: 10px;}
@media (max-width: 801px) {
	#point .ttl { margin-bottom: 30px;}
	#point p.read-1 { font-size: 2.6vw;}
	#point p.read-2 { font-size: 3.0vw;}
	#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: 30px; font-size: 21px;}
	#point p.read-1 { font-size: 13px;}
	#point p.read-2 { margin-bottom: 15px; font-size: 12px;}
	#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%; max-width: 480px; margin: 0 auto 40px;}
#pickup .ctn .board { margin-bottom: 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 figure { text-align: center;}
#pickup .ctn figure img { width: 100%;}
#pickup .tit { position: relative; width: 100%; max-width: 900px; margin: 0 auto;}
#pickup .tit:before,
#pickup .tit:after { content: ''; display: block; width: 30%; height: 2px; background: #fff; position: absolute; top: 50%;}
#pickup .tit:before{ left: 0;}
#pickup .tit:after { right: 0;}
#pickup .tit h3 { text-align: center;}
#pickup .tit h3 img { width: 55%; max-width: 280px;}
#pickup .ctn-flex { display: flex; justify-content: space-between; width: 100%; max-width: 900px; margin: 0 auto 40px; border-bottom: solid 2px #fff;}
#pickup .box { width: 48%; padding: 30px 0 60px;}
#pickup .box figure img { width: 100%;}
#pickup .note {}
#pickup .note ul { max-width: 700px; margin: 0 auto;}
@media (max-width: 801px) {
	#pickup .ctn { width: 94%; margin: 0 auto 30px;}
	#pickup .ctn figure { max-width: 600px;}
	#pickup .tit:before,
	#pickup .tit:after { width: 20%; height: 1px;}
	#pickup .ctn-flex { display: block; border-bottom: none;}
	#pickup .box { width: 100%; padding: 30px 0; border-bottom: solid 1px #fff;}
}
@media (max-width: 481px) {
	#pickup .inner-sct { padding: 40px 0 60px;}
	#pickup .ttl { margin-bottom: 20px;}
	#pickup .ctn { margin: 0 auto 20px;}
	#pickup .ctn .board { width: 88%; margin: 0 auto 20px;}
	#pickup .ctn-flex { margin: 0 auto 20px;}
	#pickup .box { padding: 12px 0 20px;}
}




#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: 40px; width: 100%; z-index: 2;}
#product .signboard .tit h2 { text-align: center; }
#product .signboard .tit h2 img { display: block; width: 72%; 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(-10deg,#171e50 20%, #303d7e 50%, #171e5c 80%); 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: 24px; font-weight: 700; text-align: center;
}
#product .signboard .bg { position: relative; width: 100%;}
#product .signboard .bg img { width: 100%;}
#product .signboard .bg img.sp { display: none;}
#product .signboard .tit-sp { display: none;}
#product .signboard .tit-sp img{ width: 100%;}
@media (max-width: 801px) {
	#product .signboard .tit { top: 11.5vw;}
	#product .signboard .bg img.pc { display: none;}
	#product .signboard .bg img.sp { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#product .signboard .tit { top: 8vw;}
	#product .signboard .btn { bottom: 30px;}
	#product .signboard .btn .toggle:before,
	#product .signboard .btn .toggle:after { width: 2px; height: 20px; right: 20px;}
	#product .signboard .btn .toggle span { font-size: 16px;}
}


#product .hide-ctn { display: none;}
#product .bloc { background: linear-gradient(165deg,#e3e6f5, #fff 60%, #fff);}
#product .bloc .inner-bloc { padding: 60px 0;}
#product .bloc .ctn-flex { position: relative; display: flex; justify-content: space-between; width: 92%; max-width: 1080px; margin: 0 auto;}
#product .bloc .ctn-flex.sub { max-width: 920px;}
#product .bloc .ctn-flex.re { flex-direction: row-reverse;}
#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(-10deg,#171e50 20%, #303d7e 50%, #171e5c 80%); 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 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: 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: 92%; 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: #3b3b3b; font-size: 40px;}
#product .bloc .txt-ctn .name h3 span { display: block; color: #2f3c7b; font-size: 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: 30px;}
#product .bloc .txt-ctn .amount p { color: #3a3a3a; 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 #3a3a3a; border-radius: 50px;}
#product .bloc .txt-ctn p.price { margin-bottom: 40px; color: #727272; font-size: 22px;}
#product .bloc .txt-ctn p.price span { display: block; font-size: 28px; font-weight: 700;}
#product .bloc .txt-ctn .aroma { position: absolute; left: 50%; top: 50%; transform: translateY(-50%); width: 50%;}
#product .bloc .txt-ctn .aroma figure { width: 100%; text-align: center;}
#product .bloc .txt-ctn .aroma figure img { width: 85%; max-width: 200px;}
#product .bloc .txt-ctn .aroma figure img.sp{ display: none;}
#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: #727272; font-size: 24px; font-weight: 700; text-align: center;}
#product .bloc .item .txt p.amount { color: #727272; font-size: 22px; font-weight: 700; text-align: center;}
#product .bloc .item .txt hr { width: 92%; margin: 20px auto; border: none; border-top: solid 2px #727272;}
#product .bloc .item .txt p.price { margin-bottom: 30px; color: #727272; font-size: 20px; text-align: center;}
#product .bloc .item .txt p.price span { display: block; font-size: 24px; font-weight: 700;}
#product .bloc .item .cart { width: 90%; margin: 0 auto;}
#product .note { padding: 25px 0; background: #fff; text-align: center;}
#product .note ul {  display: inline-block; text-align: left;}
#product .note ul li { color: #8c8c8c;}
@media (max-width: 1201px) {
	#product .bloc .cart form input[type="submit"]{ font-size: 2.4vw;}
	#product .bloc .txt-ctn .name h3 { font-size: 3.2vw;}
	#product .bloc .txt-ctn .name h3 span { font-size: 2.4vw;}
	#product .bloc .txt-ctn .amount p { font-size: 1.8vw;}
	#product .bloc .txt-ctn p.price { margin-bottom: 40px; font-size: 1.8vw;}
	#product .bloc .txt-ctn p.price span { font-size: 2.4vw;}
	#product .bloc .txt-ctn .flavor { left: 55%; width: 45%;}

	#product .bloc .item .txt h3 { font-size: 2.2vw;}
	#product .bloc .item .txt p.amount { font-size: 2vw;}
	#product .bloc .item .txt p.price { font-size: 2vw;}
	#product .bloc .item .txt p.price span { font-size: 2.4vw;}
}
@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: 0; top: 50%; transform: translateY(-50%);}
	#product .bloc#item-1_5 .img-ctn { left: 0; top: 60%; transform: translateY(-50%);}
	#product .bloc#item-2 .img-ctn { right: 0; top: 50%; transform: translateY(-50%);}
	#product .bloc#item-3 .img-ctn { left: -10px; top: 56%; transform: translateY(-50%);}
	#product .bloc#item-4 .img-ctn { right: -10px; top: 50%; transform: translateY(-50%);}
	#product .bloc .txt-ctn figure.sp img { width: 100%;}

	#product .bloc .txt-ctn .icn { width: 28%;}
	#product .bloc#item-1_5 .txt-ctn,
	#product .bloc#item-3 .txt-ctn { padding-top: 140px;}
	#product .bloc#item-1_5 .txt-ctn .icn,
	#product .bloc#item-3 .txt-ctn .icn { position: absolute; left: 0; top: 0; margin: 0;}
	#product .bloc .txt-ctn .name {}
	#product .bloc#item-1_5 .txt-ctn .name,
	#product .bloc#item-3 .txt-ctn .name { padding-left: 40%;}
	#product .bloc .txt-ctn .name h3 { font-size: 32px; line-height: 1.2;}
	#product .bloc .txt-ctn .name h3 span { margin-bottom: 20px; font-size: 20px;}
	#product .bloc .txt-ctn .name h3 span sup { font-size: 12px;}
	#product .bloc .txt-ctn .name h3 br.sp { display: block;}
	
	#product .bloc .txt-ctn .aside { padding-bottom: 80px;}
	#product .bloc#item-1_5 .txt-ctn .aside,
	#product .bloc#item-3 .txt-ctn .aside { padding-left: 40%; padding-bottom: 150px;}
	
	#product .bloc .txt-ctn .amount p { font-size: 16px;}
	#product .bloc .txt-ctn p.price { font-size: 15px;}
	#product .bloc .txt-ctn p.price span { font-size: 20px;}

	#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 input[type="submit"]{ padding: 12px 0; font-size: 16px;}

	#product .bloc .inner-bloc { padding: 20px 0 30px;}
	#product .bloc#item-1_5 .txt-ctn,
	#product .bloc#item-3 .txt-ctn { padding-top: 80px;}
	#product .bloc .txt-ctn .icn { margin-bottom: 12px;}
	#product .bloc .txt-ctn .name { margin-bottom: 10px;}
	#product .bloc#item-1_5 .txt-ctn .name,
	#product .bloc#item-3 .txt-ctn .name { padding-left: 36%;}
	#product .bloc .txt-ctn .name h3 { font-size: 21px;}
	#product .bloc .txt-ctn .name h3 span { margin-bottom: 12px; font-size: 15px;}
	#product .bloc .txt-ctn .name h3 span sup { font-size: 10px;}

	#product .bloc .txt-ctn .aside { padding-bottom: 60px;}
	#product .bloc#item-1_5 .txt-ctn .aside,
	#product .bloc#item-3 .txt-ctn .aside { padding-left: 36%; padding-bottom: 100px;}

	#product .bloc .txt-ctn .amount { margin-bottom: 15px;}
	#product .bloc .txt-ctn .amount p { font-size: 14px;}
	#product .bloc .txt-ctn .amount p span { padding: 2px 14px;}

	#product .bloc .txt-ctn p.price { margin-bottom: 20px; font-size: 13px;}
	#product .bloc .txt-ctn p.price span { font-size: 18px;}
	#product .bloc .txt-ctn .aroma figure { width: 100%;}

	#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;}
	#product .bloc .item .txt p.price { margin-bottom: 15px; font-size: 12px;}
	#product .bloc .item .txt p.price span { font-size: 15px;}
	#product .bloc .item .cart form svg { left: 14%;}
	#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 .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.box { font-size: 45px; font-weight: 700; line-height: 1.4;}
#shop .parts a.btn span.box:after { width: 32px; height: 18px; background: url('../img/icn-arw.png') no-repeat 50% 50% / 100% auto; border: none;
 transform: translateY(-50%) rotate(0deg);
}
@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.box { font-size: 24px;}
	#shop .parts a.btn span.box:after { width: 20px; height: 12px; right: 10px;}
}




#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: 48%; bottom: 12%; width: 40%; }
#campaign .board .btn a { display: block;}
#campaign .board .btn a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 30px 0;}
}