/* =========================================================================
   女神の前髪 / 薬用スパエッセンス No.8-HINOKI  大元LP（指名検索用・新規設計）
   "わかりやすさ"重視：各セクションHTMLネイティブ＋きれいな実写。
   CSS+HTML分離（VPS / Nginx 静的配信）。デザイントークンは brand §8。
   ========================================================================= */
:root{
  --gold:#cbb78d; --gold-deep:#bfa468; --gold-pale:rgba(203,183,141,.16);
  --brown:#6b5544; --head:#4a3b30; --text:#5b4a3d; --text2:#6b5e52; --muted:#9a8a78;
  --cream:#f7f1ea; --cream2:#f3ece2; --card:#fffdfb; --white:#fff; --line:#e6dac8;
  --mincho:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --gothic:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --lat:'Helvetica Neue',Arial,sans-serif;
  --maxw:900px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#ece2d4;color:var(--text);font-family:var(--mincho);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;padding-bottom:80px}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
.lp{max-width:var(--maxw);margin:0 auto;background:var(--white);overflow:hidden}

/* 共通 */
.eyebrow{font-family:var(--lat);letter-spacing:.34em;font-size:clamp(10px,2.4vw,12px);color:var(--gold-deep);text-indent:.34em}
.sec{padding:clamp(48px,9vw,86px) clamp(22px,6vw,64px)}
.sec--cream{background:var(--cream)}
.sec--cream2{background:var(--cream2)}
.sec--brown{background:var(--brown);color:#f0e6da}
.center{text-align:center}
.shead{text-align:center;margin-bottom:clamp(28px,5.5vw,44px)}
.shead .eyebrow{display:block;margin-bottom:14px}
.h2{font-family:var(--mincho);font-weight:600;color:var(--head);letter-spacing:.04em;line-height:1.5;font-size:clamp(25px,5.6vw,40px)}
.sec--brown .h2{color:#fff}
.h2 .gd{color:var(--gold-deep)}
.lead{font-size:clamp(14px,3.4vw,17px);line-height:2.05;color:var(--text)}
.deco{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px auto 0}
.deco i{display:block;width:clamp(28px,6vw,46px);height:1px;background:var(--gold)}
.deco b{display:block;width:6px;height:6px;background:var(--gold-deep);transform:rotate(45deg)}
.sup{font-size:.6em;position:relative;top:-.5em;margin-left:.25em;line-height:0;color:#b3a48f}

/* ===== HERO ===== */
.hero{background:linear-gradient(180deg,#faf5ee 0%,#f3eae0 100%);text-align:center;padding:clamp(36px,7vw,60px) clamp(22px,6vw,56px) clamp(34px,6vw,52px)}
.hero__mark{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:clamp(20px,4vw,30px)}
.hero__mark img{width:clamp(30px,7vw,40px);height:auto}
.hero__mark span{font-family:var(--mincho);font-size:clamp(16px,3.8vw,21px);color:var(--brown);letter-spacing:.18em;font-weight:600}
.hero__title{font-family:var(--mincho);font-weight:600;font-size:clamp(32px,8.4vw,60px);letter-spacing:.05em;color:var(--head);line-height:1.3}
.hero__sub{display:inline-block;font-family:var(--gothic);font-size:clamp(12px,3vw,15px);letter-spacing:.1em;color:var(--brown);margin-top:clamp(16px,3.4vw,22px);border:1px solid var(--gold);border-radius:999px;padding:8px 22px;background:var(--card)}
.hero__product{margin:clamp(18px,3.6vw,26px) auto clamp(8px,2vw,14px)}
.hero__product img{width:clamp(190px,46vw,300px);margin:0 auto;filter:drop-shadow(0 18px 30px rgba(120,95,60,.18))}
.hero__lead{font-size:clamp(14px,3.5vw,18px);line-height:1.95;color:var(--text);margin-bottom:clamp(20px,4vw,28px)}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,2vw,12px);margin-bottom:clamp(24px,5vw,34px)}
.facts>span{font-family:var(--gothic);font-size:clamp(11px,2.8vw,13px);color:var(--brown);background:var(--card);border:1px solid var(--gold);border-radius:6px;padding:9px 16px}
.scrollcue{display:block;margin:clamp(20px,4vw,28px) auto 0;font-family:var(--lat);font-size:11px;letter-spacing:.3em;color:var(--muted)}

/* ===== CTA ===== */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--gothic);font-weight:700;
  background:linear-gradient(180deg,#cfb681,#bfa468);color:#fff;border:0;border-radius:999px;cursor:pointer;letter-spacing:.08em;
  font-size:clamp(15px,4vw,19px);padding:clamp(16px,3.8vw,21px) clamp(34px,9vw,60px);box-shadow:0 10px 24px rgba(120,95,60,.28);
  transition:transform .15s,box-shadow .15s;max-width:560px;width:100%}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(120,95,60,.34)}
.cta__a{font-size:1.05em}
.cta-wrap{text-align:center;margin-top:clamp(24px,5vw,34px)}
.cta-note{font-family:var(--gothic);font-size:clamp(11px,2.6vw,13px);color:var(--muted);margin-top:12px}
.sec--brown .cta-note{color:#e7d8c4}
.sec--brown .cta{box-shadow:0 10px 24px rgba(0,0,0,.26)}

/* ===== PROLOGUE（ポジティブ共感入口） ===== */
.prologue{background:var(--cream);text-align:center;padding-top:clamp(64px,11vw,110px);padding-bottom:0}
.prologue .eyebrow{display:block;margin-bottom:18px}
.prologue__h{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,7.2vw,46px);color:var(--head);letter-spacing:.05em;line-height:1.55}
.prologue__sub{font-family:var(--mincho);font-size:clamp(16px,3.8vw,21px);color:var(--brown);margin-top:clamp(18px,3.6vw,24px);line-height:1.9;letter-spacing:.03em}
.prologue__p{font-family:var(--mincho);font-size:clamp(13.5px,3.2vw,16px);line-height:2.15;color:var(--text);max-width:640px;margin:clamp(20px,4vw,28px) auto 0}
.prologue__img{max-width:760px;margin:clamp(34px,6.5vw,52px) auto 0;overflow:hidden}
.prologue__img img{width:100%}

/* ===== THE BOTTLE（佇まい） ===== */
.bottle__p{text-align:center;font-family:var(--mincho);font-size:clamp(14px,3.4vw,17px);line-height:2.05;color:var(--text);max-width:640px;margin:clamp(22px,4.6vw,30px) auto 0;letter-spacing:.02em}

/* ===== 解決（正当性） ===== */
.solve{background:var(--brown);color:#f0e6da;text-align:center}
.solve .eyebrow{color:#e7d8c4}
.solve__h{font-family:var(--mincho);font-weight:600;font-size:clamp(24px,6vw,40px);color:#fff;line-height:1.5;letter-spacing:.04em;margin:14px 0 clamp(18px,3.6vw,24px)}
.solve__h .gd{color:#e3c89a}
.solve__p{font-size:clamp(13.5px,3.4vw,17px);line-height:2.05;color:#f0e6da;max-width:640px;margin:0 auto}
.solve__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(22px,4.5vw,30px)}
.solve__badges span{font-family:var(--gothic);font-size:clamp(11px,2.8vw,13px);color:#fff;border:1px solid #c9a86f;border-radius:999px;padding:8px 18px}
.solve__badges .fill{background:var(--gold-deep);border-color:var(--gold-deep)}

/* ===== 成分8種 ===== */
.ing8{max-width:700px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(16px,4vw,40px)}
.ing8__it{display:flex;align-items:center;gap:14px;padding:clamp(14px,2.8vw,18px) 4px;border-bottom:1px solid var(--line)}
.ing8__no{flex:0 0 auto;width:clamp(36px,8vw,44px);height:clamp(36px,8vw,44px);border:1.4px solid var(--gold-deep);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mincho);color:var(--gold-deep);font-weight:600;font-size:clamp(16px,3.6vw,20px)}
.ing8__nm{font-family:var(--mincho);font-size:clamp(14px,3.3vw,19px);color:var(--head);font-weight:600;line-height:1.3}
.ing8__pp{display:block;font-family:var(--gothic);font-size:clamp(10px,2.4vw,12px);color:var(--muted);font-weight:400;margin-top:2px}
.ing-note{text-align:center;font-family:var(--gothic);font-size:clamp(12px,2.8vw,14px);color:var(--brown);margin-top:clamp(24px,5vw,32px);font-weight:500}

/* ===== 安心（8FREE） ===== */
.free-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,14px);max-width:680px;margin:0 auto}
.free-grid .chip{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:clamp(14px,2.8vw,20px) 6px;text-align:center;box-shadow:0 5px 14px rgba(120,95,60,.05)}
.free-grid .chip .f{font-family:var(--lat);font-size:clamp(10px,2.2vw,12px);color:var(--gold-deep);border:1.2px solid var(--gold);border-radius:999px;display:inline-block;padding:1px 10px;margin-bottom:8px;letter-spacing:.06em}
.free-grid .chip p{font-family:var(--gothic);font-size:clamp(11px,2.7vw,15px);color:var(--head);font-weight:500;line-height:1.3}
.commit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.6vw,18px);max-width:680px;margin:clamp(20px,4vw,28px) auto 0}
.commit .box{background:var(--gold-pale);border:1px solid var(--gold);border-radius:12px;padding:clamp(18px,3.6vw,26px) clamp(16px,3.4vw,24px);text-align:center;font-family:var(--gothic)}
.commit .box h4{font-family:var(--mincho);font-size:clamp(15px,3.6vw,19px);color:var(--head);font-weight:600;margin-bottom:8px}
.commit .box p{font-size:clamp(12px,2.8vw,14px);line-height:1.7;color:var(--text2)}
.commit .box b{color:var(--brown);font-weight:600}

/* ===== 使い方＋香り ===== */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,24px);max-width:700px;margin:0 auto}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3.6vw,28px) clamp(14px,3vw,22px);text-align:center;box-shadow:0 8px 20px rgba(120,95,60,.06);display:flex;flex-direction:column;align-items:center}
.step img{width:auto;height:clamp(120px,26vw,170px);max-width:100%;object-fit:contain;margin:0 auto clamp(10px,2.2vw,14px);display:block}
.step .badge{font-family:var(--gothic);font-size:clamp(11px,2.6vw,13px);letter-spacing:.18em;color:#fff;background:var(--gold-deep);border-radius:999px;padding:6px 20px;display:inline-block;text-indent:.18em}
.step h3{font-family:var(--mincho);font-size:clamp(17px,4vw,24px);color:var(--head);font-weight:600;margin:12px 0 8px}
.step p{font-family:var(--gothic);font-size:clamp(12px,2.9vw,14px);line-height:1.7;color:var(--text2)}
.aroma{max-width:700px;margin:clamp(20px,4vw,30px) auto 0;background:var(--gold-pale);border:1px solid var(--gold);border-radius:14px;padding:clamp(20px,4vw,28px);text-align:center}
.aroma .eyebrow{display:block;margin-bottom:8px}
.aroma h3{font-family:var(--mincho);font-size:clamp(18px,4.4vw,26px);color:var(--head);font-weight:600;margin-bottom:8px}
.aroma p{font-family:var(--gothic);font-size:clamp(12.5px,3vw,15px);line-height:1.8;color:var(--text2)}
.aroma small{display:block;font-family:var(--gothic);font-size:clamp(10px,2.3vw,11px);color:var(--muted);margin-top:10px}

/* ===== 続けやすい理由＋実写 ===== */
.reasons{background:var(--cream)}
.figrow{max-width:760px;margin:0 auto clamp(24px,5vw,36px);border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 28px rgba(120,95,60,.10)}
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.4vw,16px);max-width:760px;margin:0 auto}
.r-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3.8vw,28px) clamp(14px,2.8vw,20px);text-align:center;font-family:var(--gothic);position:relative}
.r-card .no{display:block;font-family:var(--mincho);font-size:clamp(20px,4.8vw,28px);color:var(--gold-deep);font-weight:500;letter-spacing:.08em;margin-bottom:12px;line-height:1}
.r-card .no::after{content:"";display:block;width:18px;height:1px;background:var(--gold);margin:8px auto 0}
.r-card h4{font-family:var(--mincho);font-size:clamp(14px,3.3vw,18px);color:var(--head);font-weight:600;margin-bottom:6px;line-height:1.4}
.r-card p{font-size:clamp(11px,2.6vw,13px);line-height:1.65;color:var(--text2)}

/* ===== 声 ===== */
.voices{background:var(--cream2);font-family:var(--gothic)}
.vwrap{max-width:640px;margin:0 auto}
.vcard{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:clamp(16px,3.6vw,22px) clamp(16px,4vw,24px);margin-bottom:clamp(12px,2.6vw,16px)}
.vcard:last-child{margin-bottom:0}
.vcard .av{flex:0 0 auto;width:clamp(46px,11vw,56px);height:clamp(46px,11vw,56px);border-radius:50%;background:#f0e6d6;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--mincho);color:#9a7b4f;font-size:clamp(16px,4vw,20px)}
.vcard .nm{font-size:clamp(13px,3.1vw,15px);color:var(--brown);font-weight:700;margin-bottom:5px}
.vcard .nm span{font-weight:400;color:#a08a6e;font-size:.9em}
.vcard .tx{font-size:clamp(12.5px,3vw,14px);line-height:1.85;color:var(--text2)}
.disc{font-size:clamp(10px,2.2vw,11px);line-height:1.8;color:#a89a86;max-width:640px;margin:clamp(14px,3vw,18px) auto 0;font-family:var(--gothic)}
.sv-card{max-width:640px;margin:clamp(16px,3.4vw,22px) auto 0;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:clamp(24px,5vw,34px) clamp(20px,5vw,38px);font-family:var(--gothic)}
.sv-card .meta{text-align:center;font-size:clamp(12px,2.9vw,14px);color:#a08a6e;margin-bottom:8px}
.sv-card .stars{text-align:center;color:var(--gold-deep);letter-spacing:3px;font-size:clamp(18px,4.4vw,24px);margin-bottom:10px}
.sv-card .ttl{text-align:center;font-family:var(--mincho);font-size:clamp(17px,4.2vw,23px);color:var(--head);font-weight:600;margin-bottom:16px}
.sv-card .p{font-size:clamp(13px,3vw,15px);line-height:2.05;color:var(--text2);margin-bottom:12px}
.sv-card .p:last-child{margin-bottom:0}

/* ===== ギフト ===== */
.gift{background:var(--white);text-align:center}
.gift__img{max-width:760px;margin:0 auto clamp(20px,4vw,28px);border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 28px rgba(120,95,60,.10)}
.gift__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.gift__badges span{font-family:var(--gothic);font-size:clamp(12px,2.9vw,14px);color:var(--brown);background:var(--card);border:1px solid var(--gold);border-radius:999px;padding:10px 22px}

/* ===== 料金 ===== */
.price{background:var(--brown);text-align:center;font-family:var(--gothic)}
.price .eyebrow{color:#e0c79b}
.plan{max-width:560px;margin:0 auto clamp(14px,3vw,20px);background:var(--card);border-radius:12px;padding:clamp(20px,4.5vw,28px) clamp(20px,5vw,34px)}
.plan:last-of-type{margin-bottom:0}
.plan .name{font-size:clamp(15px,3.8vw,19px);color:var(--brown);font-weight:700;letter-spacing:.03em;margin-bottom:6px}
.plan .off{display:inline-block;background:#f3eadd;color:#9a7b3f;font-size:.72em;border-radius:5px;padding:2px 9px;margin-left:4px;vertical-align:middle}
.plan .pr{font-family:var(--mincho);font-size:clamp(30px,8vw,46px);color:#3a2f28;line-height:1.1}
.plan .pr small{font-size:.4em}.plan .pr .per{font-size:.32em;color:var(--muted)}
.plan .nt{font-size:clamp(12px,2.9vw,14px);color:#a08a6e;margin-top:6px}
.plan .nt del{text-decoration:line-through}.plan .nt b{color:#9a7b3f}
.plan--reco{position:relative;border:2px solid var(--gold);padding-top:clamp(30px,5.5vw,38px);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.plan--reco .ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--gold-deep);color:#fff;font-size:clamp(11px,2.8vw,13px);letter-spacing:.1em;padding:5px 20px;border-radius:999px;white-space:nowrap}
.plan--reco .pr{font-size:clamp(38px,9.5vw,56px)}
.plan__buy{margin-top:clamp(16px,3.4vw,22px)}
.plan__buy .cta{width:100%;font-size:clamp(15px,3.8vw,18px);padding:clamp(15px,3.4vw,19px) clamp(20px,5vw,34px)}
.price .cta-note{max-width:560px;margin:clamp(18px,4vw,26px) auto 0;color:#e7d8c4}
.price__note{max-width:560px;margin:clamp(20px,4vw,28px) auto 0;font-size:clamp(11px,2.7vw,13px);line-height:1.85;color:#e7d8c4}

/* ===== クロージング ===== */
.closing{background:linear-gradient(180deg,#f7f1ea,#f1e7db);text-align:center}
.closing__rom{font-family:var(--lat);letter-spacing:.34em;font-size:clamp(11px,2.6vw,13px);color:#9a8472}
.closing__h{font-family:var(--mincho);font-weight:600;line-height:1.75;font-size:clamp(22px,5.2vw,34px);letter-spacing:.04em;color:var(--head);margin:clamp(18px,3.6vw,24px) 0}
.closing__p{font-size:clamp(13px,3.3vw,16px);line-height:2.05;color:var(--text)}

/* ===== 注釈・フッター ===== */
.notes{background:var(--cream2);font-family:var(--gothic);padding:clamp(20px,4vw,28px) clamp(20px,5vw,44px) clamp(28px,6vw,40px)}
.notes p{font-size:clamp(10px,2.2vw,11px);line-height:1.9;color:#8a7a6a}
.notes p+p{margin-top:10px;color:#a39684}
.footer{background:#574436;color:#e7d8c4;text-align:center;font-family:var(--gothic);padding:clamp(28px,6vw,42px) 20px}
.footer .b{font-family:var(--mincho);font-size:clamp(16px,4vw,20px);letter-spacing:.14em;margin-bottom:10px;color:#fff}
.footer a{color:#e7d8c4;text-decoration:underline;text-underline-offset:3px}
.footer .lk{font-size:clamp(11px,2.8vw,13px);line-height:2;margin:8px 0}
.footer .cp{font-size:clamp(10px,2.4vw,11px);color:#bda88f;margin-top:12px}

/* ===== 固定追従CTA ===== */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,253,251,.97);border-top:1px solid var(--gold);box-shadow:0 -4px 18px rgba(120,95,60,.14);backdrop-filter:blur(4px);padding:10px clamp(12px,4vw,22px);display:flex;align-items:center;justify-content:center;gap:14px}
.sticky .info{font-family:var(--gothic);text-align:left;line-height:1.3}
.sticky .info b{color:var(--brown);font-size:clamp(13px,3.4vw,15px);font-weight:700}
.sticky .info small{display:block;color:var(--muted);font-size:clamp(10px,2.6vw,11px)}
.sticky .cta{width:auto;font-size:clamp(13px,3.6vw,16px);padding:clamp(12px,3vw,15px) clamp(22px,6vw,38px)}
@media(min-width:560px){.sticky{gap:24px}}

@media(max-width:380px){
  .free-grid{grid-template-columns:repeat(2,1fr)}
  .r-grid{grid-template-columns:1fr}
}