@charset "utf-8";

.bg { width: 100%; height: 100vh; position: fixed; left: 0 ; top: 0; background: url('../img/shop/bg.jpg') no-repeat 50% 50% / 1280px auto; z-index: 1;}
#wrapper { position: relative; z-index: 2;}

@media (max-width: 641px) {
	.bg {}
}

.note { padding: 10px 0; text-align: center;}
.note ul { font-size: 0px; text-align: center;}
.note ul li { display: inline-block; padding: 0 10px; color: #949494; font-size: 10px; text-align: center;}
.note p { display: inline-block; padding: 8px; color: #949494; font-size: 10px; text-align: left;}
@media (max-width: 481px) {
	.note p { width: 92%; margin: 0 auto;}
}
@media (max-width: 401px) {
	.note { padding: 4px 0;}
}


#kv-product { position: relative; background: url('../img/product/kv.jpg') no-repeat 50% 50% / 1280px auto;}
#kv-product .inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 160px 0 80px; /* padding: 270px 0;*/}
#kv-product h2 { margin-bottom: 50px; font-size: 45px; font-weight: 700; letter-spacing: 0.12rem; text-align: center;}
#kv-product .pageNav { width: 92%; max-width: 1000px; margin: 0 auto;}
#kv-product .pageNav ul { font-size: 0; text-align: center;}
#kv-product .pageNav ul li { display: inline-block; width: 25%;}
#kv-product .pageNav ul li a { display: block; width: 92%; margin: 0 auto;}
#kv-product .pageNav ul li a img { width: 100%;}

#kv-product .bg-kv { display: none;}
#kv-product .bg-kv img { width: 100%;}

@media (max-width: 1281px) {
	#kv-product { background-position: 100% 50%; background-size: cover;}
}
@media (max-width: 801px) {
	#kv-product .inner { padding: 80px 0;}
}
@media (max-width: 641px) {
	#kv-product { background: url('../img/product/kv-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#kv-product .inner { padding: 60px 0; z-index: 2;}
	#kv-product h2 { width: 100%; font-size: 36px;}
}
@media (max-width: 481px) {
	#kv-product .inner { padding: 50px 0;}
	#kv-product h2 { margin-bottom: 30px;}
	#kv-product .pageNav ul li { padding: 10px 8px; width: 50%;}
}


.ttl { position: relative; width: 100%; max-width: 900px;}
.ttl h2 { text-align: center;}
.ttl h2 img { width: 100%;}
.ttl h2 img.sp { display: none;}
@media (max-width: 641px) {
	.ttl h2 img.pc { display: none;}
	.ttl h2 img.sp { display: block;}
}


.product-ctn-2 { position: relative;}
#product-vt { padding-bottom: 50px; background: url('../img/product/bg/vt.jpg') no-repeat 50% 0% / 1280px auto;}
#product-blos { padding-bottom: 50px; background: url('../img/product/bg/blossom.jpg') no-repeat 50% 0% / 1280px auto;}
#product-lipo { padding-bottom: 50px; background: url('../img/product/bg/lipo.jpg') no-repeat 50% 0% / 1280px auto;}
.product-ctn-2 .ttl { margin: 0 auto; padding-bottom: 20px;}
#product-blos .ttl:after { content: ''; display: block; width: 100px; height: 140px; background: url('../img/product/blossom-2.png') no-repeat 50% 50% / 100% auto;
 position: absolute; right: -40px; bottom: -80px;
}
.product-ctn-2 .bloc .inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 100px 0 40px;}
#product-lipo .bloc .inner { padding: 40px 0 0;}
#product-blos .bloc .inner.blossom:before,
#product-blos .bloc .inner.blossom:after { content: ''; display: block; position: absolute; }
#product-blos .bloc .inner.blossom:before{ width: 65px; height: 50px; background: url('../img/product/blossom-1.png') no-repeat 50% 50% / 100% auto;
 left: 8%; top: 0px;}
#product-blos .bloc .inner.blossom:after { width: 90px; height: 130px; background: url('../img/product/blossom-2.png') no-repeat 50% 50% / 100% auto;
 right: 15%; bottom: 60px;}
.product-ctn-2 .ctn-L,
.product-ctn-2 .ctn-R { position: relative; width: 100%; max-width: 850px; margin: 0 auto 36px;}
.product-ctn-2 .ctn-L.mb,
.product-ctn-2 .ctn-R.mb { margin-bottom: 50px;}
.product-ctn-2 .ctn-L .badge,
.product-ctn-2 .ctn-R .badge { width: 28%; max-width: 180px;}
.product-ctn-2 .ctn-L .badge { margin: 0 0 20px;}
.product-ctn-2 .ctn-R .badge { margin: 0 20px 20px auto;}
.product-ctn-2 .ctn-L .badge img,
.product-ctn-2 .ctn-R .badge img { width: 100%;}

.product-ctn-2 .ctn-L .txt { padding-left: 20px;}
.product-ctn-2 .ctn-R .txt { width: 100%; max-width: 400px; margin: 0 0 0 auto;}
.product-ctn-2 .name { margin-bottom: 20px;}
.product-ctn-2 .name p { margin-bottom: 18px; font-size: 20px; font-weight: 700; line-height: 1.25;}
#product-vt .name p { color: #a2e290;}
#product-blos .name p { color: #fc6e93;}
#product-lipo .name p { color: #658ba8;}
.product-ctn-2 .name p span { display: block;}
.product-ctn-2 .name p sub { font-size: 12px;}

.product-ctn-2 .name h3 { font-size: 24px; line-height: 1.45;}
.product-ctn-2 .name h3 span { display: block; font-size: 32px;}
.product-ctn-2 .name h3 br.sp { display: none;}
.product-ctn-2 .amount { margin-bottom: 12px;}
.product-ctn-2 .amount p { display: inline-block; padding: 0 15px; border: solid 2px #fff; border-radius: 50px; color: #fff; font-size: 18px; font-weight: 700;}
.product-ctn-2 .price { margin-bottom: 20px;}
.product-ctn-2 .price p { font-size: 20px;}
.product-ctn-2 .price p span { display: block; font-size: 15px;}
.product-ctn-2 .aroma dl { display: table; width: 100%;}
.product-ctn-2 .aroma dl dt,
.product-ctn-2 .aroma dl dd { display: table-cell; vertical-align: middle;}
.product-ctn-2 .aroma dl dt { width: 100px;}
.product-ctn-2 .aroma dl dd { width: auto; padding-left: 10px; font-size: 16px; font-weight: 700;}
#product-vt .aroma dl dd { color: #a2e290;}
#product-blos .aroma dl dd { color: #fc6e93;}
#product-lipo .aroma dl dd { color: #658ba8;}
.product-ctn-2 .aroma dl dt img { width: 100%; border-radius: 50%;}

.product-ctn-2 .btn { width: 62%; max-width: 320px; margin: 0 auto;}
.product-ctn-2 .btn a { position: relative; display: block; width: 100%; padding: 2px; background: linear-gradient(135deg,#6d6d6d,#fff,#4e4e4e); border-radius: 10px;
 color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
}
.product-ctn-2 .btn a span{ position: relative; display: block; padding: 16px 0; background: #000; border-radius: 8px;}
.product-ctn-2 .btn a svg{ display: inline-block; width: 18px; margin-right: 8px; fill: #fff; vertical-align: middle;}
.product-ctn-2 .btn a em { display: inline-block; vertical-align: middle;}
.product-ctn-2 .btn a:hover span { opacity: 0.8;}
@media (max-width: 1001px) {
	.product-ctn-2 { background-size: 150% auto;}
	#product-blos .ttl:after { right: 10px; bottom: -50px;}
	#product-blos .bloc .inner.blossom:before{ left: 4%;}
	#product-blos .bloc .inner.blossom:after { right: 10%;}
	.product-ctn-2 .ctn-R .txt { max-width: 440px;}
}
@media (max-width: 801px) {
	.product-ctn-2 .bloc .inner { padding: 6vw 0 10vw;}
	.product-ctn-2 .name h3 { font-size: 2.4vw;}
	.product-ctn-2 .name h3 span { font-size: 3.2vw;}
}
@media (max-width: 641px) {
	.product-ctn-2 { padding-bottom: 20px;}
	#product-vt { background: url('../img/product/bg/vt@sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product-blos { background: url('../img/product/bg/blossom@sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product-lipo { background: url('../img/product/bg/lipo@sp.jpg') no-repeat 50% 0% / 100% auto;}
	.product-ctn-2 .ttl { padding-bottom: 0px;}
	.product-ctn-2 .bloc .inner { padding: 12vw 0 6vw;}
	#product-blos .bloc .inner.blossom:after { right: 5%; bottom: 32vw;}
	.product-ctn-2 .ctn-L.mb,
	.product-ctn-2 .ctn-R.mb { margin: 0 auto 12px;}
	.product-ctn-2 .ctn-R .txt { max-width: 60%;}
	.product-ctn-2 .ctn-R .txt.w300 { max-width: 60%;}
	.product-ctn-2 .name p br { display: block;}
	.product-ctn-2 .name h3 { font-size: 4.2vw;}
	.product-ctn-2 .name h3 span { font-size: 5.4vw;}
	.product-ctn-2 .name h3 br.sp { display: block;}

}
@media (max-width: 481px) {
	#product-blos .ttl:after { width: 60px; height: 100px; bottom: -30px;}
	.product-ctn-2 .bloc .inner { padding: 9vw 0;}
	.product-ctn-2 .bloc .inner.p0 { padding: 6vw 0;}
	#product-lipo .bloc .inner { padding: 4vw 0 0;}
	#product-blos .bloc .inner.blossom:before{ width: 40px; height: 30px; top: -20px;}
	#product-blos .bloc .inner.blossom:after { width: 50px; height: 90px; bottom: 40vw;}

	.product-ctn-2 .ctn-L,
	.product-ctn-2 .ctn-R { margin: 0 auto 25px;}
	.product-ctn-2 .ctn-L.mb,
	.product-ctn-2 .ctn-R.mb { margin: 0 auto 8px;}
	.product-ctn-2 .ctn-L .badge { margin: 0 0 8px;}
	.product-ctn-2 .ctn-R .badge { margin: 0 12px 8px auto;}
	.product-ctn-2 .ctn-L .badge2 { top: 16px;}
	.product-ctn-2 .name { margin-bottom: 12px;}
	.product-ctn-2 .name p { margin-bottom: 8px; font-size: 15px;}
	.product-ctn-2 .name p sub { font-size: 10px;}
	.product-ctn-2 .name h3 { font-size: 17px;}
	.product-ctn-2 .name h3 span { font-size: 21px;}

	.product-ctn-2 .price p { font-size: 16px;}
	.product-ctn-2 .price p span { font-size: 12px;}
	.product-ctn-2 .amount p { padding: 0 12px; border: solid 1px #fff; font-size: 14px;}
	.product-ctn-2 .aroma dl dt { width: 60px;}
	.product-ctn-2 .aroma dl dd { font-size: 13px;}

	.product-ctn-2 .btn a { padding: 1px; border-radius: 5px;}
	.product-ctn-2 .btn a span { padding: 12px 0; border-radius: 4px;}

	.product-ctn-2 .btn a { font-size: 12px;}
	.product-ctn-2 .btn a svg{ width: 15px; margin-right: 5px;}

	.product-ctn-2 aside.bloc { padding: 2vw 0 4vw;}
	.product-ctn-2 aside.bloc .item .name h4 { font-size: 13px;}
	.product-ctn-2 aside.bloc .item .price { margin-bottom: 20px;}
	.product-ctn-2 aside.bloc .item .price p { font-size: 14px;}
	.product-ctn-2 aside.bloc .item .price p span { font-size: 11px;}
	.product-ctn-2 aside.bloc .item .btn { width: 75%;}
	.product-ctn-2 aside.bloc .item .btn a span{ padding: 6px 0;}
}
@media (max-width: 401px) {
	.product-ctn-2 .bloc .inner { padding: 6.0vw 0 4.0vw;}
	.product-ctn-2 .bloc .inner.p0 { padding: 0vw 0;}
	#product-blos .bloc .inner.blossom:before{ top: -8px;}
	#product-blos .bloc .inner.blossom:after { bottom: 32vw;}
	.product-ctn-2 .price { margin-bottom: 12px;}
}


#product-ctn { position: relative; background: url('../img/product/bg/1.jpg') no-repeat 50% 0% / 1280px auto;}
#product-ctn #sct2 { position: absolute; top: -40px;}
#product-ctn .ttl { margin: 0 auto 80px;}
#product-ctn .bloc {}
#product-ctn .bloc .inner { padding: 30px 0;}
#product-ctn .ctn-L,
#product-ctn .ctn-R { position: relative; width: 100%; max-width: 850px; margin: 0 auto 36px;}
#product-ctn .ctn-L .badge,
#product-ctn .ctn-R .badge { width: 28%; max-width: 180px;}
#product-ctn .ctn-L .badge { margin: 0 0 20px;}
#product-ctn .ctn-R .badge { margin: 0 20px 20px auto;}
#product-ctn .ctn-L .badge img,
#product-ctn .ctn-R .badge img { width: 100%;}
#product-ctn .ctn-L .badge2,
#product-ctn .ctn-R .badge2 { width: 25%; max-width: 140px; position: absolute; top: 12%;}
#product-ctn .ctn-L .badge2 { left: 45%;}
#product-ctn .ctn-L .badge2 img,
#product-ctn .ctn-R .badge2 img { width: 100%;}
#product-ctn .ctn-L .txt { padding-left: 20px;}
#product-ctn .ctn-R .txt { width: 100%; max-width: 400px; margin: 0 0 0 auto;}
#product-ctn .ctn-R .txt.w300 { max-width: 300px;}
#product-ctn .name { margin-bottom: 20px;}
#product-ctn .name p { margin-bottom: 18px; color: #ffc942; font-size: 20px; font-weight: 700; line-height: 1.25;}
#product-ctn .name p sub { font-size: 12px;}
/*#product-ctn .name p br { display: none;}*/
#product-ctn .name h3 { font-size: 24px; line-height: 1.45;}
#product-ctn .name h3 span { display: block; font-size: 32px;}
#product-ctn .name h3 br.sp { display: none;}
#product-ctn .amount { margin-bottom: 12px;}
#product-ctn .amount p { display: inline-block; padding: 0 15px; border: solid 2px #fff; border-radius: 50px; color: #fff; font-size: 18px; font-weight: 700;}
#product-ctn .price { margin-bottom: 20px;}
#product-ctn .price p { font-size: 20px;}
#product-ctn .price p span { display: block; font-size: 15px;}
#product-ctn .aroma dl { display: table; width: 100%;}
#product-ctn .aroma dl dt,
#product-ctn .aroma dl dd { display: table-cell; vertical-align: middle;}
#product-ctn .aroma dl dt { width: 100px;}
#product-ctn .aroma dl dd { width: auto; padding-left: 10px; color: #ffc942; font-size: 16px; font-weight: 700;}
#product-ctn .aroma dl dt img { width: 100%; border-radius: 50%;}
#product-ctn .btn { width: 62%; max-width: 320px; margin: 0 auto;}
#product-ctn .btn a { position: relative; display: block; width: 100%; padding: 2px; background: linear-gradient(135deg,#6d6d6d,#fff,#4e4e4e); border-radius: 10px;
 color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
}
#product-ctn .btn a span{ position: relative; display: block; padding: 16px 0; background: #000; border-radius: 8px;}
#product-ctn .btn a svg{ display: inline-block; width: 18px; margin-right: 8px; fill: #fff; vertical-align: middle;}
#product-ctn .btn a em { display: inline-block; vertical-align: middle;}
#product-ctn .btn a:hover span { opacity: 0.8;}

#product-ctn aside.bloc { padding: 40px 0;}
#product-ctn aside.bloc .inner { padding: 0px 0 40px;}
#product-ctn aside.bloc .tit { margin-bottom: 60px;}
#product-ctn aside.bloc .tit h3 { text-align: center;}
#product-ctn aside.bloc .tit h3 img { width: 90%; max-width: 450px;}
#product-ctn aside.bloc .ctn-flex { display: flex; width: 100%; max-width: 850px; margin: 0 auto;}
#product-ctn aside.bloc .item { width: 50%;}
#product-ctn aside.bloc .item .space { width: 100%; padding-top: 74%;}
#product-ctn aside.bloc .item .name { position: relative; width: 92%; max-width: 340px; margin: 0 auto 12px; padding-bottom: 16px; text-align: center;}
#product-ctn aside.bloc .item .name:after { content: ''; display: block; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
#product-ctn aside.bloc .item .name h4 { font-size: 16px;}
#product-ctn aside.bloc .item .name p { margin-bottom: 0px; color: #fff; font-size: 15px;}
#product-ctn aside.bloc .item .price { margin-bottom: 30px;}
#product-ctn aside.bloc .item .price p { font-size: 17px; text-align: center;}
#product-ctn aside.bloc .item .price p span { font-size: 14px;}
#product-ctn aside.bloc .item .btn { max-width: 200px;}
#product-ctn aside.bloc .item .btn a span{ padding: 12px 0;}
@media (max-width: 1001px) {
	#product-ctn .ctn-R .txt.w300 { max-width: 360px;}
}
@media (max-width: 801px) {
	#product-ctn .ttl { margin: 0 auto 40px;}
	#product-ctn .bloc .inner { padding: 8vw 0 10vw;}
	#product-ctn .ctn-L .badge,
	#product-ctn .ctn-R .badge { width: 25%; max-width: 150px;}
	#product-ctn .name h3 { font-size: 2.4vw;}
	#product-ctn .name h3 span { font-size: 3.2vw;}
	#product-ctn aside.bloc .inner { padding: 2vw 0 8vw;}
	#product-ctn aside.bloc .tit { margin-bottom: 40px;}
}
@media (max-width: 641px) {
	#product-ctn { background: url('../img/product/bg/1@sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product-ctn .ttl { margin: 0 auto;}
	#product-ctn .bloc .inner { padding: 16vw 0 18vw;}
	#product-ctn .ctn-L .badge2 { left: 30%; top: 36px;}
	#product-ctn .ctn-R .txt { max-width: 60%;}
	#product-ctn .ctn-R .txt.w300 { max-width: 60%;}
	#product-ctn .name p br { display: block;}
	#product-ctn .name h3 { font-size: 4.2vw;}
	#product-ctn .name h3 span { font-size: 5.4vw;}
	#product-ctn .name h3 br.sp { display: block;}

	#product-ctn aside.bloc { padding: 30px 0 40px; background: url('../img/product/bg/2@sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product-ctn aside.bloc .inner { padding: 0vw 0 8vw;}
	#product-ctn aside.bloc .tit { margin-bottom: 20px;}
	#product-ctn aside.bloc .tit h3 img { max-width: 82%;}
	#product-ctn aside.bloc .item .space { padding-top: 110%;}
	#product-ctn aside.bloc .item .name:after { width: 60%;}
	#product-ctn aside.bloc .item .name h4 span { display: block;}
	#product-ctn aside.bloc .item .name h4 { font-size: 18px;}
	#product-ctn .btn a { font-size: 14px;}
}
@media (max-width: 481px) {
	#product-ctn .bloc .inner { padding: 14vw 0 12vw;}
	#product-ctn .bloc .inner.p0 { padding: 8vw 0 10vw;}
	#product-ctn .ctn-L,
	#product-ctn .ctn-R { margin: 0 auto 25px;}
	#product-ctn .ctn-L .badge { margin: 0 0 8px;}
	#product-ctn .ctn-R .badge { margin: 0 12px 8px auto;}
	#product-ctn .ctn-L .badge2 { top: 16px;}
	#product-ctn .name { margin-bottom: 12px;}
	#product-ctn .name p { margin-bottom: 8px; font-size: 15px;}
	#product-ctn .name p sub { font-size: 10px;}
	#product-ctn .name h3 { font-size: 17px;}
	#product-ctn .name h3 span { font-size: 21px;}

	#product-ctn .price p { font-size: 16px;}
	#product-ctn .price p span { font-size: 12px;}
	#product-ctn .amount p { padding: 0 12px; border: solid 1px #fff; font-size: 14px;}
	#product-ctn .aroma dl dt { width: 60px;}
	#product-ctn .aroma dl dd { font-size: 13px;}

	#product-ctn .btn a { padding: 1px; border-radius: 5px;}
	#product-ctn .btn a span { padding: 12px 0; border-radius: 4px;}

	#product-ctn .btn a { font-size: 12px;}
	#product-ctn .btn a svg{ width: 15px; margin-right: 5px;}

	#product-ctn aside.bloc { padding: 2vw 0 4vw;}
	#product-ctn aside.bloc .item .name h4 { font-size: 13px;}
	#product-ctn aside.bloc .item .price { margin-bottom: 20px;}
	#product-ctn aside.bloc .item .price p { font-size: 14px;}
	#product-ctn aside.bloc .item .price p span { font-size: 11px;}
	#product-ctn aside.bloc .item .btn { width: 75%;}
	#product-ctn aside.bloc .item .btn a span{ padding: 6px 0;}
}
@media (max-width: 401px) {
	#product-ctn .bloc .inner { padding: 8vw 0 10vw;}
	#product-ctn .bloc .inner.p0 { padding: 0vw 0;}
	#product-ctn .price { margin-bottom: 12px;}
	#product-ctn .btn { margin: 0 auto 10px;}
}