/* =========================================================
   Natura Biologico 共通スタイル style.css
   ※ 画像は /assets/images/ 配下を参照しています
      （LP既存の画像フォルダをそのまま流用できます）
   ========================================================= */
:root{
  --cream:#F6F1E7; --ivory:#FBF8F1; --sand:#ECE3D4; --taupe:#C9B89E;
  --olive:#566046; --olive-soft:#8B976F; --gold:#A98B5D; --deepgreen:#3C5240;
  --ink:#2C2822; --ink-soft:#6E6657; --line:rgba(44,40,34,.12);
  --serif-ja:"Shippori Mincho",serif; --sans-ja:"Zen Kaku Gothic New",sans-serif;
  --serif-en:"Cormorant Garamond",serif;
  --gutter:clamp(14px,3.6vw,60px);
}
html{background:var(--cream)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans-ja);color:var(--ink);background:var(--cream);line-height:1.9;font-weight:300;-webkit-font-smoothing:antialiased;letter-spacing:.02em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.en{font-family:var(--serif-en);letter-spacing:.14em;font-weight:400}
.eyebrow{font-family:var(--serif-en);font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--olive-soft)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h2.ttl{font-family:var(--serif-ja);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.5;letter-spacing:.04em}
.em{color:var(--olive)}

/* top bar */
.topbar{background:var(--olive);color:#F6F1E7;text-align:center;font-family:var(--serif-en);letter-spacing:.28em;font-size:.7rem;padding:9px;text-transform:uppercase}

/* header（共通）
   既定: クリーム色の背景＋濃い文字（通常ページ向け）
   body.has-hero のページ（トップ等、全画面写真がある）だけ、
   スクロール前は半透明グレー＋白文字に切り替わります。 */
header{position:sticky;top:0;z-index:50;transition:.4s ease;background:rgba(246,241,231,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;max-width:1320px;margin:0 auto;transition:.4s}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--serif-en);font-size:1rem;letter-spacing:.05em;transition:.4s}
.logo .name{font-family:var(--serif-en);font-size:1.18rem;letter-spacing:.22em;line-height:1.1}
.logo .name small{display:block;font-family:var(--sans-ja);font-size:.6rem;letter-spacing:.34em;color:var(--ink-soft);margin-top:3px}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{font-size:.82rem;letter-spacing:.12em;position:relative;padding:4px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--olive);transition:.3s}
nav.main a:hover::after{width:100%}
.htools{display:flex;align-items:center;gap:18px}
.cart{position:relative;display:grid;place-items:center;width:24px;height:24px}
.cart .badge{position:absolute;top:-7px;right:-9px;background:var(--olive);color:#fff;font-size:.6rem;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif-en)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:24px;height:1.5px;background:var(--ink)}
/* hero ページのみ: 写真の上に白文字で重ねる */
body.has-hero header:not(.solid){background:rgba(64,62,58,.5);backdrop-filter:blur(8px);border-bottom-color:rgba(251,248,241,.18)}
body.has-hero header.solid{background:rgba(246,241,231,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
body.has-hero header:not(.solid) .logo .mark,body.has-hero header:not(.solid) .logo .name,body.has-hero header:not(.solid) nav.main a,body.has-hero header:not(.solid) .htools{color:#FBF8F1}
body.has-hero header:not(.solid) .logo .mark{border-color:rgba(251,248,241,.7)}
body.has-hero header:not(.solid) .logo .name small{color:rgba(251,248,241,.75)}
body.has-hero header:not(.solid) .burger span{background:#FBF8F1}

/* hero */
.hero{position:relative;min-height:92vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;margin-top:-90px;background:#9aa085 center/cover no-repeat;background-image:linear-gradient(180deg,rgba(30,28,22,.5),rgba(30,28,22,.22) 42%,rgba(30,28,22,.62)),url('/assets/images/model_image.webp')}
.hero .copy{color:#FBF8F1;padding:clamp(120px,13vw,160px) clamp(24px,3vw,48px) clamp(60px,8vw,90px) clamp(28px,5vw,80px)}
.hero .eyebrow{color:rgba(251,248,241,.85)}
.hero .hero-cat{font-family:var(--serif-ja);font-weight:500;font-size:clamp(.95rem,1.9vw,1.2rem);letter-spacing:.32em;color:#EBE3CF;margin-top:14px}
.hero h1{font-family:var(--serif-ja);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.3rem);line-height:1.55;letter-spacing:.05em;margin:22px 0 26px;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero h1 em{font-style:normal;color:#EBE3CF}
.hero p.lead{max-width:30em;font-size:.96rem;line-height:2.1;color:rgba(251,248,241,.92);font-weight:300}
.hero .visual{position:relative;display:grid;place-items:center;padding:clamp(20px,4vw,40px);min-height:300px}
.hero .visual img{max-height:66vh;width:auto;filter:drop-shadow(0 28px 55px rgba(0,0,0,.45))}
.hbtns{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;font-size:.8rem;letter-spacing:.16em;border:1px solid currentColor;border-radius:2px;transition:.35s;font-family:var(--sans-ja)}
.btn.fill{background:var(--olive);color:#FBF8F1;border-color:var(--olive)}
.btn.fill:hover{background:#454e38}
.btn.outline{color:var(--olive);border-color:var(--olive)}
.btn.outline:hover{background:rgba(86,96,70,.08)}
.btn.ghost{color:#FBF8F1}
.btn.ghost:hover{background:rgba(251,248,241,.14)}

/* sections */
section{padding:clamp(64px,9vw,128px) 0}
.reveal{opacity:0;transform:translateY(26px);transition:1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* concept */
.concept{background:var(--ivory)}
.concept .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center}
.concept figure{aspect-ratio:4/5;background:var(--sand) center/cover no-repeat;background-image:url('/assets/images/hands_holding_tree.webp');border-radius:2px}
.concept .lead{font-size:1rem;color:var(--ink-soft);margin-top:26px;line-height:2.2}
.quote{font-family:var(--serif-ja);font-size:1.35rem;line-height:1.9;color:var(--olive);margin-top:30px;font-weight:500}

/* product */
.product{background:var(--olive);color:#F6F1E7;overflow:hidden}
.product .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.product .eyebrow{color:var(--taupe)}
.product h2.ttl{color:#F6F1E7}
.product .bottle{position:relative;display:grid;place-items:center;min-height:420px}
.product .bottle::before{content:"";position:absolute;width:min(78%,360px);aspect-ratio:1;background:rgba(255,255,255,.07);border-radius:50%}
.product .bottle img{position:relative;max-height:440px;width:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}
.badges span{border:1px solid rgba(246,241,231,.4);border-radius:40px;padding:7px 16px;font-size:.72rem;letter-spacing:.1em}
.price{font-family:var(--serif-en);font-size:1.7rem;letter-spacing:.04em;margin:6px 0 4px}
.price small{font-size:.8rem;letter-spacing:.1em;color:var(--taupe)}
.note-demo{font-size:.66rem;color:var(--taupe);letter-spacing:.08em}
.product .hbtns .btn{color:#F6F1E7}
.product .btn.fill{background:#F6F1E7;color:var(--olive);border-color:#F6F1E7}
.product .btn.fill:hover{background:#fff}

/* features */
.feat .head{text-align:center;margin-bottom:60px}
.feat .head p{color:var(--ink-soft);margin-top:18px;font-size:.95rem}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
.fcard figure{aspect-ratio:3/2;background:var(--sand) center/cover no-repeat;border-radius:2px;margin-bottom:22px}
.fcard .no{font-family:var(--serif-en);font-size:.9rem;color:var(--olive-soft);letter-spacing:.2em}
.fcard h3{font-family:var(--serif-ja);font-weight:500;font-size:1.2rem;margin:8px 0 12px;letter-spacing:.04em}
.fcard p{color:var(--ink-soft);font-size:.9rem;line-height:2}
.fcard .en{font-size:.72rem;color:var(--olive-soft);display:block;margin-top:12px}

/* ingredients */
.ingr{background:var(--ivory)}
.ingr .head{text-align:center;margin-bottom:56px}
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.icard figure{aspect-ratio:1;border-radius:50%;background:var(--sand) center/cover no-repeat;margin:0 auto 20px;width:78%}
.icard{text-align:center}
.icard h4{font-family:var(--serif-ja);font-weight:500;font-size:1.02rem;margin-bottom:4px}
.icard .en{font-size:.66rem;color:var(--olive-soft);display:block;margin-bottom:12px}
.icard p{font-size:.8rem;color:var(--ink-soft);line-height:1.95;text-align:left}

/* certification */
.cert{position:relative;color:#FBF8F1;text-align:center;background:var(--deepgreen)}
.cert .big{font-family:var(--serif-en);font-size:clamp(3.4rem,11vw,7rem);line-height:1;color:#EBE3CF}
.cert h2.ttl{color:#FBF8F1;max-width:18em;margin:14px auto 22px}
.cert p{max-width:40em;margin:0 auto;color:rgba(251,248,241,.85);font-size:.92rem;line-height:2.2}

/* reviews */
.rev .head{text-align:center;margin-bottom:54px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rcard{background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:34px 30px}
.stars{color:var(--gold);letter-spacing:.2em;font-size:.85rem;margin-bottom:14px}
.rcard p{font-size:.88rem;color:var(--ink);line-height:2;min-height:7.4em}
.rcard .who{margin-top:18px;font-size:.74rem;color:var(--ink-soft);letter-spacing:.08em}

/* news */
.news{background:var(--ivory)}
.news .grid{display:grid;grid-template-columns:.4fr 1fr;gap:clamp(24px,5vw,64px);align-items:start}
.nlist{border-top:1px solid var(--line)}
.nlist a{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:24px 6px;border-bottom:1px solid var(--line);align-items:baseline;transition:.3s}
.nlist a:hover{padding-left:14px;color:var(--olive)}
.nlist time{font-family:var(--serif-en);font-size:.82rem;color:var(--olive-soft);letter-spacing:.08em}
.nlist .tag{font-size:.62rem;border:1px solid var(--line);border-radius:30px;padding:2px 10px;margin-right:12px;color:var(--ink-soft);letter-spacing:.1em}
.nlist .t{font-size:.9rem}

/* faq */
.faq .head{text-align:center;margin-bottom:48px}
.faqwrap{max-width:780px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--sans-ja);font-size:.98rem;color:var(--ink);padding:26px 40px 26px 36px;position:relative;letter-spacing:.04em}
.qa button::before{content:"Q";position:absolute;left:0;font-family:var(--serif-en);color:var(--olive);font-size:1rem}
.qa button::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);transform:translateY(-70%) rotate(45deg);transition:.3s}
.qa.open button::after{transform:translateY(-30%) rotate(-135deg)}
.qa .ans{max-height:0;overflow:hidden;transition:.4s ease;color:var(--ink-soft);font-size:.88rem;line-height:2.1}
.qa .ans div{padding:0 40px 26px 36px}
.qa.open .ans{max-height:240px}

/* cta band */
.cta{text-align:center;background:var(--cream)}
.cta h2{font-family:var(--serif-ja);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.6;letter-spacing:.05em}
.cta .hbtns{justify-content:center;margin-top:34px}

/* footer（共通） */
footer{background:var(--deepgreen);color:rgba(246,241,231,.78);padding:80px 0 40px;font-weight:300}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:54px;border-bottom:1px solid rgba(246,241,231,.14)}
footer .name{font-family:var(--serif-en);font-size:1.3rem;letter-spacing:.22em;color:#F6F1E7}
footer .name small{display:block;font-size:.6rem;letter-spacing:.3em;margin-top:6px;color:rgba(246,241,231,.6)}
footer p.desc{font-size:.8rem;margin-top:22px;line-height:2;max-width:24em;color:rgba(246,241,231,.6)}
footer h5{font-family:var(--serif-en);letter-spacing:.18em;font-size:.78rem;color:var(--taupe);margin-bottom:20px;text-transform:uppercase}
footer ul{list-style:none}
footer ul li{margin-bottom:13px;font-size:.82rem}
footer ul a:hover{color:#F6F1E7}
.company{font-size:.74rem;line-height:2;color:rgba(246,241,231,.55);margin-top:6px}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;font-size:.7rem;letter-spacing:.1em;color:rgba(246,241,231,.5);flex-wrap:wrap;gap:14px}
.fbot .pay{display:flex;gap:8px;align-items:center}
.fbot .pay span{border:1px solid rgba(246,241,231,.25);border-radius:3px;padding:3px 9px;font-family:var(--serif-en);font-size:.62rem;letter-spacing:.06em}

/* mobile nav */
.mnav{position:fixed;inset:0;background:var(--cream);z-index:60;transform:translateY(-100%);transition:.5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;justify-content:center;padding:40px;gap:6px}
.mnav.open{transform:none}
.mnav a{font-family:var(--serif-ja);font-size:1.5rem;padding:14px 0;border-bottom:1px solid var(--line)}
.mnav .close{position:absolute;top:28px;right:28px;font-size:2rem;cursor:pointer;line-height:1}

@media(max-width:860px){
  nav.main,.htools .en-link{display:none}
  .burger{display:flex}
  .concept .grid,.product .grid,.news .grid{grid-template-columns:1fr}
  .fgrid,.igrid,.rgrid{grid-template-columns:1fr 1fr}
  footer .grid{grid-template-columns:1fr 1fr}
  .product .bottle{min-height:340px;order:-1}
}
@media(max-width:560px){
  .igrid,.rgrid,.fgrid,footer .grid{grid-template-columns:1fr}
  .nlist a{grid-template-columns:1fr}
  .hbtns{flex-direction:column}
  .btn{justify-content:center}
  .hero{grid-template-columns:1.12fr .88fr;min-height:78vh}
  .hero .copy{padding:104px 12px 36px 18px}
  .hero .eyebrow{font-size:.6rem;letter-spacing:.2em}
  .hero .hero-cat{font-size:.82rem;letter-spacing:.18em;margin-top:8px}
  .hero h1{font-size:clamp(1.1rem,5vw,1.5rem);margin:12px 0 14px}
  .hero p.lead{font-size:.72rem;line-height:1.85}
  .hero .hbtns{margin-top:18px;gap:10px}
  .hero .btn{padding:10px 14px;font-size:.66rem;letter-spacing:.06em}
  .hero .visual{padding:6px 8px 6px 0;min-height:auto}
  .hero .visual img{max-height:52vh}
}

/* =========================================================
   下層ページ用（ブランド / 商品一覧 / 商品詳細）
   ========================================================= */
/* 通常ページのページ見出し */
.pagehead{background:var(--ivory);text-align:center;padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px);border-bottom:1px solid var(--line)}
.pagehead .eyebrow{display:block;margin-bottom:14px}
.pagehead h1{font-family:var(--serif-ja);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:.05em;line-height:1.4}
.pagehead p{color:var(--ink-soft);font-size:.92rem;margin-top:18px}
.breadcrumb{font-size:.72rem;color:var(--ink-soft);letter-spacing:.08em;margin-top:20px}
.breadcrumb a:hover{color:var(--olive)}
.breadcrumb span{margin:0 8px;color:var(--taupe)}

/* 商品一覧 */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,34px)}
.pcard{display:block;background:var(--ivory);border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:.4s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(44,40,34,.08)}
.pcard figure{aspect-ratio:4/5;background:var(--sand) center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.pcard figure img{max-height:74%;width:auto}
.pcard .body{padding:26px 26px 32px;text-align:center}
.pcard .cat{font-family:var(--serif-en);font-size:.7rem;letter-spacing:.18em;color:var(--olive-soft);text-transform:uppercase}
.pcard h3{font-family:var(--serif-ja);font-weight:500;font-size:1.2rem;margin:8px 0 10px;letter-spacing:.03em}
.pcard .pc-price{font-family:var(--serif-en);font-size:1.15rem;color:var(--ink)}
.pcard.soon{pointer-events:none}
.pcard.soon figure{filter:grayscale(.4);opacity:.7}
.pcard.soon .tag-soon{display:inline-block;margin-top:6px;font-size:.66rem;letter-spacing:.14em;color:var(--olive-soft);border:1px solid var(--line);border-radius:30px;padding:3px 12px}

/* 商品詳細 (PDP) */
.pdp{padding:clamp(40px,6vw,70px) 0 clamp(70px,9vw,112px)}
.pdp .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,72px);align-items:start}
.pdp .gallery .main{aspect-ratio:1;background:var(--sand) center/cover no-repeat;border-radius:3px;display:grid;place-items:center;overflow:hidden}
.pdp .gallery .main img{max-height:80%;width:auto;filter:drop-shadow(0 24px 44px rgba(0,0,0,.12))}
.pdp .thumbs{display:flex;gap:12px;margin-top:14px}
.pdp .thumbs span{width:74px;height:74px;border-radius:3px;background:var(--sand) center/cover no-repeat;border:1px solid var(--line);cursor:pointer}
.pdp .info .eyebrow{margin-bottom:10px}
.pdp .info h1{font-family:var(--serif-ja);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.2rem);letter-spacing:.04em}
.pdp .info .price{font-family:var(--serif-en);font-size:1.7rem;color:var(--ink);margin:14px 0 4px}
.pdp .info .price small{font-size:.8rem;color:var(--ink-soft);letter-spacing:.1em}
.pdp .info .lead{color:var(--ink-soft);font-size:.92rem;line-height:2.1;margin:18px 0}
.pdp .badges span{border-color:var(--line);color:var(--ink-soft)}
.pdp .info .hbtns{margin-top:26px}
.pdp .detail{max-width:none;margin-top:18px}
.note-soft{font-size:.7rem;color:var(--ink-soft);letter-spacing:.04em;margin-top:6px}

@media(max-width:860px){
  .plist{grid-template-columns:1fr 1fr}
  .pdp .grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .plist{grid-template-columns:1fr}
}

/* =========================================================
   お問い合わせ / 会社概要・特商法 / 規約ページ用
   ========================================================= */
.infowrap{max-width:860px;margin:0 auto;padding:clamp(40px,6vw,64px) 28px clamp(70px,9vw,110px)}
.infotable{width:100%;border-collapse:collapse;font-size:.9rem;border-top:1px solid var(--line)}
.infotable th,.infotable td{text-align:left;vertical-align:top;padding:18px 16px;border-bottom:1px solid var(--line);line-height:1.95}
.infotable th{width:34%;font-weight:500;color:var(--ink);background:var(--ivory);font-family:var(--sans-ja);letter-spacing:.03em}
.infotable td{color:var(--ink-soft)}
.todo{color:#a85a4a;font-size:.82rem}

.legal{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,64px) 28px clamp(70px,9vw,110px)}
.legal h2{font-family:var(--serif-ja);font-weight:500;font-size:1.2rem;letter-spacing:.04em;margin:40px 0 14px;color:var(--ink)}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:.9rem;line-height:2.05;color:var(--ink-soft);margin-bottom:14px}
.legal ul{margin:0 0 16px 1.2em}
.legal li{font-size:.9rem;line-height:2;color:var(--ink-soft);margin-bottom:6px}
.legal .updated{font-size:.8rem;color:var(--taupe);margin-top:40px}

.form{max-width:680px;margin:0 auto;padding:clamp(40px,6vw,64px) 28px clamp(70px,9vw,110px)}
.form .row{margin-bottom:24px}
.form label{display:block;font-size:.82rem;letter-spacing:.06em;margin-bottom:8px;color:var(--ink)}
.form label .req{color:#a85a4a;font-size:.68rem;margin-left:8px;letter-spacing:.08em}
.form input,.form textarea{width:100%;background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:14px 16px;font-family:var(--sans-ja);font-size:.92rem;color:var(--ink);transition:.25s}
.form textarea{min-height:170px;resize:vertical;line-height:1.9}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--olive);background:#fff}
.form .submit{text-align:center;margin-top:8px}
.form .privacy-note{font-size:.78rem;color:var(--ink-soft);text-align:center;margin-top:18px;line-height:1.9}
.alert{padding:16px 18px;border-radius:3px;font-size:.88rem;margin-bottom:28px;line-height:1.8}
.alert.ok{background:#eef2e8;border:1px solid var(--olive-soft);color:var(--olive)}
.alert.ng{background:#f6ece9;border:1px solid #d9b3aa;color:#a85a4a}
.alert ul{margin:6px 0 0 1.2em}