@charset "UTF-8";

/* product
----------------------------------------------- */
.second-text { width: 100%; }
.product p.sub-title { margin-bottom: 6vw; color: #bfa992; font-size: 6vw; font-family: "baskerville-urw"; font-weight: 400; letter-spacing: 0.04rem; }
.product .title {margin-bottom: 4vw;font-size: 4.6vw;font-family: var(--mincho);line-height: 1.6;}
.product .title .jp { display: block; font-size: 7.6vw; }
.product .title .en { color: #bfa992; display: block; font-size: 80%; font-weight: normal;letter-spacing: .04rem; }
.product p.lead { margin-bottom: 6vw; font-size: 4.2vw; font-family: var(--mincho); line-height: 1.6; }
.product b { color: #c6050d; }

.product-intro { width: 90%; margin: 0 auto 20vw; }
.product-intro img { width: 100%; margin-bottom: 8vw; }

.product .effect { padding: 12vw 5vw; background: #f8f5ee; position: relative; }
.product .effect-text { position: relative; }
.product .effect .effect-title { width: 100%; color: #bfa992; font-size: 10vw; font-family: "baskerville-urw"; font-weight: 400; text-align: center; letter-spacing: 0.04rem; position: absolute; top: -22vw; }
.product .effect .sub-title { margin-bottom: 2vw; text-align: center; }
.product .effect .title {margin-bottom: 20vw;text-align: center;}
.product .effect .title .jp span { color: #c6050d; font-size: 140%; }
.product .effect-items { position: relative; }
.product .effect-items .scroll {font-size: 4vw;font-family: "baskerville-urw";font-weight: 400;letter-spacing: 0.04rem;position: absolute;top: -12vw;right: 12vw;}
.product .effect-items .scroll::after {content: '';width: 10vw;height: 0.5px;background: #000;position: absolute;top: 50%;right: -12vw;}
.product .effect-items ul { margin-bottom: 12vw; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.product .effect-items ul::-webkit-scrollbar { height: 1px; display: block; }
.product .effect-items ul::-webkit-scrollbar-thumb { height: 0.5px; background: #000; border-radius: 6px; display: block; }
.product .effect-items ul::-webkit-scrollbar-track { background: #d5d5d5; border-radius: 6px; display: block; }
.product .effect-items .effect-item { min-width: 100%; min-height: 450px; padding: 10vw 8vw 12vw; line-height: 2; text-align: center; position: relative; }
.product .effect-items .effect-item::after { content: ''; width: 0.5px; height: 90%; background: #000; position: absolute; top: 0; right: 0; }
.product .effect-items .effect-item:last-child::after { display: none; }
.product .effect-items .effect-item dt img { width: 40%; margin: 0 auto 4vw; }
.product .effect-items .effect-item-name { margin: 0 auto 4vw; font-family: var(--mincho); }
.product .effect-items .effect-item-name span { display: block; font-size: 6vw; font-family: "baskerville-urw"; font-weight: 400; letter-spacing: 0.04rem; }
.product .effect-items .effect-item-name span b { display: block; }
.product .effect-items .effect-item .effect-item-name span b { color: #c6050d; font-weight: normal; }

/* 
grace-herb
----------------------*/
.product .effect-items .effect-item dd p span { margin-right: 2%; padding: 0 4%; display: inline-block; color: #fff; font-weight: bold; background: #bfa992; border-radius: 4px; }


.product .detail { width: 90%; margin: 0 auto; }
.product .detail img { width: 100%; margin-bottom: 6vw; }
.product .detail li { margin-bottom: 4vw; font-size: 3.6vw; line-height: 1.6; }
.product .detail .price { font-size: 6vw; font-weight: bold; }
.product .detail .price span {padding: 2vw 4vw 0 0;color: #000;font-size: 5vw;background: none;display: inline-block;}
.product .detail li span { width: fit-content; margin-bottom: 2vw; padding: 2vw 4vw; display: block; color: #fff; font-size: 3.6vw; font-weight: bold; background: #bfa992; }

.product .contact-area { padding: 8vw 5vw; border: 1px solid #000; }
.product .contact-area dt {width: fit-content;margin: 0 auto 4vw;padding: 2vw 4vw;display: block;color: #fff;font-size: 4vw;font-weight: bold;line-height: 1.6;background: #bfa992;}
.product .contact-area dd { text-align: center; line-height: 1.8; }
.product .contact-area dd a { width: 60vw; margin: 6vw auto 0; color: #fff; font-weight: bold; background: #b62c34; }
.product .contact-area dd .more01 span {background: url(../../images/arrow-white.png) no-repeat right top 2.5vw;background-size: 2.5vw;}

/* =============================================
pc-size 
================================================*/
@media screen and (min-width: 900px) {

.product p.sub-title {margin-bottom: 40px;font-size: 24px;}
.product .title {margin-bottom: 20px;font-size: 18px;}
.product .title .jp { font-size: 36px; }
.product .title .en { font-size: 20px; }
.product p.lead {margin-bottom: 30px;font-size: 20px;}

.product-intro { margin-bottom: 60px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.product-intro img { width: 40%; margin-bottom: 40px; }
.product-intro p.sub-title { font-size: 24px; }
.product-intro .title { margin-bottom: 50px; position: relative; }
.product-intro .title::after { content: ''; width: 50px; height: 0.5px; background: #000; position: absolute; bottom: -20px; left: 0; }
.product-intro .intro-text { width: 54%; margin-bottom: 40px; }
.product-intro p.lead { font-size: 20px; }
.product-intro p { font-size: 15px; }

.product .effect {padding: 46px 40px 120px;}
.product .effect .effect-title {font-size: 60px;top: -100px;}
.product .effect .sub-title { margin-bottom: 10px; }
.product .effect .title { margin-bottom: 80px; }
.product .effect-items { width: 90%; max-width: 1200px; margin: auto; }
.product .effect-items .scroll { font-size: 20px; top: -50px; left: calc(50% + 340px); right: inherit; }
.product .effect-items .scroll::after { width: 80px; right: -100px; }
.product .effect-items ul { margin-bottom: 40px; }
.product .effect-items .effect-item {min-width: 50%;min-height: 580px;padding: 40px 60px 80px;}
.product .effect-items .effect-item::after { top: 0; right: 0; }
.product .effect-items .effect-item dt img {margin: 0 auto 20px;}
.product .effect-items .effect-item-name {margin: 0 auto 20px;}
.product .effect-items .effect-item-name span { font-size: 30px; }
.product .effect-items .effect-item dd ul { width: 60%; margin: 0 auto; }
.product .effect-items .effect-item dd li { padding-left: 90px; }
.product .effect-items .effect-item dd li::before { content: ''; width: 4.5px; height: 4.5px; top: 14px; left: 75px; }

/* grace-herb
----------------------*/
.product .effect-items .effect-item dd p span { margin-right: 8px; padding: 0 10px; }

.product .detail .detail-inner { margin-bottom: 30px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.product .detail img { width: 58%; margin-bottom: 0; order: 1; }
.product .detail dl { width: 40%; }
.product .detail ul li:nth-child(4) { margin-bottom: 20px; }
.product .detail li { margin-bottom: 10px; font-size: 15px; }
.product .detail li span { margin-bottom: 10px; padding: 10px 20px; font-size: 16px; }
.product .detail .price { margin-bottom: 10px; font-size: 24px; }
.product .detail .price span { padding: 10px 20px 10px 0; font-size: 18px; }

.product dl.contact-area { width: 100%; padding: 50px 0; }
.product .contact-area dt { width: 60%; margin: 0 auto 30px; padding: 10px 20px; font-size: 18px; text-align: center; }
.product .contact-area dd { font-size: 16px; line-height: 2; }
.product .contact-area dd a { width: 320px; margin: 40px auto 0; }
.product .contact-area dd .more01 span { background: url(../../images/arrow-white.png) no-repeat top 11px right; background-size: 8px; }

@media screen and (min-width: 1000px) {
.product .detail { width: 1000px; margin: 0 auto; }
}

@media screen and (min-width: 1300px) {
.product .product-intro,.product .detail { width: 1200px; margin: 0 auto 50px; }
}
}

/* retina用
----------------------------------------------- */ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.more01 span { background: url(../../images/arrow-white@2x.png) no-repeat top 11px right; background-size: 8px; } 
}