@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%;}
.bg div { width: 100%; max-width: 1280px; height: 100%; margin: 0 auto; background: url('../img/moonlight/bg.jpg') repeat-y 50% 0 / 100% auto;}

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


.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%;}
}

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

#kv-moonlight .txt { position: absolute; left: 48%; z-index: 10; width: 46%; padding-top: 150px;}
#kv-moonlight .txt h1 { margin-bottom: 30px; text-align: center;}
#kv-moonlight .txt p { text-align: center;}
#kv-moonlight .txt h1 img,
#kv-moonlight .txt p img { position: relative; width: 65%; /* max-width: 450px;*/ opacity: 0; transform: translateY(20px);}
#kv-moonlight .txt h1 img{ transition: 0.4s linear;}
#kv-moonlight .txt p img { transition: 0.4s linear 0.4s;}
#kv-moonlight .txt-sp { display: none; position: absolute; left: 0; width: 100%; z-index: 4; }
#kv-moonlight .txt-sp p { text-align: center;}
#kv-moonlight .txt-sp p img { position: relative; width: 60%; transition: 0.4s linear 0.4s; opacity: 0; transform: translateY(20px);}
#kv-moonlight .bg-kv { position: relative; width: 100%; z-index: 1;}
#kv-moonlight .bg-kv img { width: 100%;}
#kv-moonlight .bg-kv img.sp { display: none;}

#kv-moonlight .news { position: absolute; left: 48%; top: 540px; width: 46%; z-index: 3;}
#kv-moonlight .news .inner { position: relative; width: 100%; transition: 0.4s linear 0.8s; opacity: 0; transform: translateY(20px);}
#kv-moonlight .news .inner div { width: 92%; max-width: 400px; margin: 0 auto;}
#kv-moonlight .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-moonlight .news a dl { display: table; width: 100%; margin: 0 auto;}
#kv-moonlight .news a dl dt,
#kv-moonlight .news a dl dd { display: table-cell; vertical-align: middle;}
#kv-moonlight .news a dl dt { width: 90px;}
#kv-moonlight .news a dl dt img{ width: 100%;}
#kv-moonlight .news a dl dd { width: auto; padding-left: 15px; font-size: 15px;}
#kv-moonlight .news a dl dd span.date { display: block; font-size: 12px;}
#kv-moonlight .news a:hover { opacity: 0.8;}

#kv-moonlight.show .icn-new img { opacity: 1;}
#kv-moonlight.show .txt h1 img,
#kv-moonlight.show .txt p img,
#kv-moonlight.show .news div { opacity: 1; transform: translateY(0px);}
#kv-moonlight.show .txt-sp p img { opacity: 1; transform: translateY(0px);}
@media (max-width: 1281px) {
	#kv-moonlight .txt { padding-top: 8.5vw;}
	#kv-moonlight .txt h1 { margin-bottom: 2.2vw;}
	#kv-moonlight .news { top: 38vw;}
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#kv-moonlight { padding-bottom: 0px;}
	#kv-moonlight .icn-new { left: 8%; bottom: 24vw; width: 18vw;}

	#kv-moonlight .txt { position: absolute; left: 0%; width: 100%; padding-top: 8vw;}
	#kv-moonlight .txt h1 { margin-bottom: 3.2vw; text-align: center;}
	#kv-moonlight .txt h1 img{ width: 55%; max-width: 400px; }
	#kv-moonlight .txt p {}

	#kv-moonlight .news { top: auto; bottom: 5vw; left: 0px; width: 100%;}
	#kv-moonlight .bg-kv img.pc { display: none;}
	#kv-moonlight .bg-kv img.sp { display: block;}
}
@media (max-width: 641px) {
	#kv-nightrepair .txt h1 img { width: 52%;}
}
@media (max-width: 481px) {
	#kv-moonlight .icn-new { left: 6%; bottom: 38vw;}
	#kv-moonlight .news a dl dt { width: 60px;}
	#kv-moonlight .news a dl dd { font-size: 13px;}
	#kv-moonlight .news a dl dd span.date { font-size: 11px;}
}

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


#story { margin: 0 auto 80px;}
#story .inner-sct { width: 72%; margin: 0 auto; padding-top: 40px;}
#story .movie { width: 100%; max-width: 540px; margin: 0 auto;}
#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%;}
@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: -6px; color: #fff; font-size: 15px; letter-spacing: 0.12rem; text-align: center;}
@media (max-width: 481px) {
	.ttl p { margin-top: 0px; font-size: 12px;}
}

#point { padding-bottom: 60px;}
#point .ttl { margin-bottom: 50px;}
#point p { color: #fff; text-align: center;}
#point p.read { margin-bottom: 20px; color: #fff; font-size: 26px; font-weight: 700;}
#point p.read span { display: block;}
#point p.read 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;}
#point .ctn-sp ul { width: 92%; max-width: 680px; margin: 0 auto;}
#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;}
@media (max-width: 801px) {
	#point .ttl { margin-bottom: 30px;}
	#point p.read { font-size: 3.2vw;}
	#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 p.read { margin-bottom: 15px; font-size: 14px;}
	#point p.read 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 .box { width: 100%; max-width: 480px; margin: 0 auto;}
#pickup .box .tit { margin-bottom: 40px;
 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 .box .tit img { width: 100%;}
#pickup .box figure { margin: 0 auto 25px;}
#pickup .box figure img { width: 100%;}
#pickup .box table { width: 100%; margin: 0 auto 20px;}
#pickup .box table tr td img { width: 100%;}
#pickup .box table tr td img.sp { display: none;}
#pickup .box table tr td a:hover { opacity: 0.8;}
#pickup .box ul.note { margin-bottom: 20px;}
#pickup .box ul.note li { color: #fff; font-size: 10px; text-align: right;}
#pickup .box .btn { width: 92%; margin: 0 auto;}
#pickup .box .btn a,
#pickup .box .btn span.nolink { position: relative; display: block; width: 100%; padding: 10px; background: #fff; border-radius: 50px; text-align: center; text-decoration: none;}
#pickup .box .btn a:after { content: ''; display: block; width: 14px; height: 14px; border-top: solid 2px #44035e; border-right: solid 2px #44035e;
 position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#pickup .box .btn a img { display: inline-block; vertical-align: middle; width: 45px; margin-right: 30px;}
#pickup .box .btn span.nolink span,
#pickup .box .btn a span { display: inline-block; vertical-align: middle; color: #44035e; font-size: 24px; font-weight: 700;}
#pickup .box .btn a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#pickup .ctn-flex { display: block; }
	#pickup .box { width: 92%; margin: 0 auto;}
	#pickup .box.mb { margin-bottom: 80px;}
	#pickup .box figure { max-width: 600px;}
	#pickup .box table { max-width: 600px; margin: 0 auto;}
	#pickup .box table tr td img.pc { display: none;}
	#pickup .box table tr td img.sp { display: block;}
}
@media (max-width: 481px) {
	#pickup .inner-sct { padding: 40px 0 60px;}
	#pickup .box.mb { margin-bottom: 60px;}
	#pickup .box .tit { margin-bottom: 20px;}
	#pickup .box figure { margin: 0 auto 10px;}
	#pickup .box .btn a { padding: 6px;}
	#pickup .box .btn a:after { width: 8px; height: 8px; border-width: 1px; right: 20px;}
	#pickup .box .btn a img { width: 30px; margin-right: 20px;}
	#pickup .box .btn a span { font-size: 16px;}
	#pickup .box .btn span.nolink span{ font-size: 16px;}
}



#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: #190581; font-size: 14px; font-weight: 700; letter-spacing: 0.1rem;}
#product .signboard .tit p { color: #0343a1; font-size: 15px;}
#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(-55deg,#140e87 20%, #342fb1 50%, #171379 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 .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: 6vw;}
	#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,#dadaf5, #fff 25%, #eae9f9 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(#3933ab, #5955c4 50%, #2e2a92); 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 svg { fill: #0e275d;}
#product .bloc .cart form:hover input[type="submit"]{ background: rgba(255,255,255,1); color: #0e275d;}

#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: #727272; font-size: 38px;}
#product .bloc .txt-ctn .name h3 span { display: block; font-size: 28px;}
#product .bloc .txt-ctn .name h3 span.color-1 { color: #78aefb;}
#product .bloc .txt-ctn .name h3 span.color-2 { color: #739efd;}
#product .bloc .txt-ctn .name h3 span.color-3 { color: #647df5;}
#product .bloc .txt-ctn .name h3 span.color-4 { color: #7e78ff;}
#product .bloc .txt-ctn .name h3 span.color-5 { color: #9467ff;}
#product .bloc .txt-ctn .name h3 span sub { font-size: 14px; vertical-align: baseline;}
#product .bloc .txt-ctn .name h3 br { display: none;}
#product .bloc .txt-ctn .aside { position: relative;}
#product .bloc .txt-ctn .amount { margin-bottom: 20px;}
#product .bloc .txt-ctn .amount p { color: #727272; 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 #727272; border-radius: 50px;}
#product .bloc .txt-ctn p.price { margin-bottom: 70px; color: #727272; font-size: 22px;}
#product .bloc .txt-ctn p.price span { display: block; font-size: 28px; font-weight: 700;}
#product .bloc .txt-ctn .flavor { position: absolute; left: 50%; top: 50%; transform: translateY(-50%); width: 50%;}
#product .bloc .txt-ctn .flavor figure { width: 100%; max-width: 290px; text-align: center;}
#product .bloc .txt-ctn .flavor figure img { width: 100%;}
#product .bloc .txt-ctn .flavor 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 .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: #eeeee5;}
#product .note ul { width: 94%; margin: 0 auto; text-align: center;}
#product .note ul li {display: inline-block; padding: 0 20px; color: #8c8c8c; font-size: 18px;}
@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 { 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 .flavor { position: relative; left: 0%; top: auto; transform: translateY(0%); width: 100%;}
	#product .bloc .txt-ctn .flavor figure img.pc{ display: none;}
	#product .bloc .txt-ctn .flavor 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 { text-align: left;}
	#product .note ul li { display: block; padding: 0px; font-size: 16px;}

}
@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 .flavor figure { width: 100%;}
	#product .bloc .txt-ctn .flavor figure.w230 { max-width: 200px;}
	#product .bloc .txt-ctn .flavor figure.w250 { max-width: 200px;}
	#product .bloc .txt-ctn .flavor figure.w270 { max-width: 200px;}
	#product .bloc .txt-ctn .flavor figure.w330 { max-width: 200px;}

	#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 .cart span { padding: 12px 0; font-size: 12px;}

	#product .note { padding: 12px 0;}
	#product .note ul li { font-size: 10px;}
	#product .note ul li span { display: block;}
}



#shop .inner-sct { width: 92%; margin: 0 auto; padding: 60px 0;}
#shop .ttl { margin-bottom: 20px;}
#shop h3 { margin-bottom: 8px; 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;}
}


#instagram .inner-sct { width: 92%; max-width: 1000px; margin: 0 auto; padding: 60px 0;}
#instagram .ttl { margin-bottom: 40px;}
#instagram .ctn { margin-bottom: 40px;}
#instagram .ctn ul { font-size: 0; text-align: center;}
#instagram .ctn ul li { display: inline-block; width: 33%;}
#instagram .ctn ul li img { width: 92%;}
#instagram .follow { width: 50%; max-width: 300px; margin: 0 auto;}
#instagram .follow a { display: block; padding: 10px 0; border: solid 2px #fff; border-radius: 50px;
 color: #fff; font-size: 25px; font-weight: 700; letter-spacing: 0.05rem; text-align: center; text-decoration: none;
}
#instagram .follow a span { display: inline-block; vertical-align: middle;}
#instagram .follow a svg { display: inline-block; vertical-align: middle; width: 34px; margin-left: 12px; fill: #fff;}
#instagram .follow a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#instagram .follow a { padding: 8px 0; font-size: 21px;}
}
@media (max-width: 481px) {
	#instagram .inner-sct { padding: 40px 0;}
	#instagram .ttl { margin-bottom: 20px;}
	#instagram .ctn ul li { width: 50%;}
	#instagram .ctn ul li:last-child { display: none;}
	#instagram .follow a { padding: 6px 0; border-width: 1px; font-size: 15px;}
	#instagram .follow a svg { width: 20px;}
}


#campaign .inner-sct { width: 92%; margin: 0 auto; padding: 60px 0;}
#campaign .board { position: relative; width: 100%; max-width: 800px; margin: 0 auto;}
#campaign .board img { width: 100%;}
#campaign .board a { display: block;}
#campaign .board a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 30px 0;}
}

/*
#choose .inner-sct { width: 100%; max-width: 1400px; margin: 0 auto; padding: 60px 0 0;}
#choose .ttl { margin-bottom: 40px;}
#choose h3 { margin-bottom: 40px; color: #fff; font-size: 38px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#choose p.read { margin-bottom: 50px; color: #fff; font-size: 24px; text-align: center;}
#choose figure img { width: 100%;}
#choose figure img.sp { display: none;}
@media (max-width: 801px) {
	#choose .inner-sct { padding: 40px 0 0;}
	#choose .ttl { margin-bottom: 0px;}
	#choose h3 { margin-bottom: 30px; font-size: 5.0vw;}
	#choose p.read { margin-bottom: 30px; font-size: 3vw;}
	#choose figure img.pc { display: none;}
	#choose figure img.sp { display: block;}
}
@media (max-width: 481px) {
	#choose h3 { margin-bottom: 20px; font-size: 18px;}
	#choose p.read { margin-bottom: 20px; font-size: 14px;}
}


#aside { position: relative;}
#aside .inner-sct { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;}
#aside .inner-sct .ctn{ position: relative; width: 92%; height: 100%; margin: 0 auto;}
#aside .txt { position: absolute; right: 0; top: 50%; width: 50%; transform: translateY(-50%);}
#aside .txt h2 { margin-bottom: 30px; text-align: center;}
#aside .txt h2 img { width: 100%; max-width: 390px;}
#aside .txt .btn { width: 80%; max-width: 280px; margin: 0 auto;}
#aside .txt .btn a { display: block; padding: 10px 0; background: #fff; border-radius: 50px;
 color: #0f275d; font-size: 28px; font-weight: 700; text-align: center; text-decoration: none;
}
#aside .txt .btn a:hover { opacity: 0.8;}
#aside .bg { position: relative; z-index: 1; width: 100%;}
#aside .bg img { width: 100%;}
@media (max-width: 1201px) {
	#aside .txt .btn a { font-size: 2.6vw;}
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
	#aside { background: url('../img/dreamymoist/bg-night.jpg') no-repeat 100% 50% / cover;}
	#aside .inner-sct { position: relative; padding: 4vw 0;}
	#aside .txt { position: relative; right: auto; top: auto; width: 50%; transform: translateY(0%); margin: 0 0 0 auto;}
	#aside .bg { display: none;}
}
@media (max-width: 481px) {
	#aside .txt h2 { margin-bottom: 10px;}
	#aside .txt .btn a { padding: 4px 0; font-size: 15px;}
}

#specialist .inner { width: 92%; max-width: 980px; margin: 0 auto; padding: 40px 0 100px;}
#specialist .box { position: relative; width: 100%; 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);
}
#specialist .box .arw { width: 45px; height: 45px; border-bottom: solid 3px #fff; border-right: solid 3px #fff; cursor: pointer;
 position: absolute; right: 60px; top: 78%; transform: rotate(45deg);
}
#specialist .box .arw.open { top: 12.5%; border: none; border-top: solid 3px #5b5b5b; border-left: solid 3px #5b5b5b;}
#specialist .box figure { width: 100%;}
#specialist .box figure img { width: 100%;}
#specialist .box figure img.sp,
#specialist .box figure img.change { display: none;}
#specialist .box figure.show img.def { display: none;}
#specialist .box figure.show img.pc.change { display: block;}
@media (max-width: 641px) {
	#specialist .box .arw { width: 36px; height: 36px; right: 40px; top: 72%; }
	#specialist .box .arw.open { width: 30px; height: 30px; top: 6%;}
	#specialist .box figure img.pc { display: none;}
	#specialist .box figure img.sp.def { display: block;}
	#specialist .box figure.show img.sp.def,
	#specialist .box figure.show img.pc.change { display: none;}
	#specialist .box figure.show img.sp.change { display: block;}
}
@media (max-width: 481px) {
	#specialist .inner { padding: 20px 0 50px;}
	#specialist .box .arw { right: 21px; width: 20px; height: 20px; border-width: 2px;}
	#specialist .box .arw.open { width: 20px; height: 20px; border-width: 2px;}
}
*/