/* =========================================================
   CROWN MELON — Shared design system
   新CIデザインシステム（クラウングリーン × 金 × Cinzel/Shippori）
   全ページ共通。ページ固有の微調整のみ各HTMLに埋め込む。
   ========================================================= */
:root{
  --green:#005a28;        /* Crown Green / DIC389 */
  --green-deep:#003d1a;
  --green-soft:#6f8f5c;
  --gold:#b08d4e;         /* DIC620 gold, web approximation */
  --gold-soft:#c9b079;
  --ivory:#f6f2e8;
  --ivory-2:#efe9da;
  --paper:#fbfaf5;
  --ink:#1d2a20;
  --ink-soft:#4b574d;
  --line:rgba(0,90,40,.16);
  --maxw:1280px;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.45s; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"EB Garamond","Cormorant Garamond","Shippori Mincho",serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Cormorant Garamond はオールドスタイル数字が既定のため、算用数字を等高に統一 */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.eyebrow{
  font-family:"Inter",sans-serif;
  font-weight:400;letter-spacing:.42em;text-transform:uppercase;
  font-size:11px;color:var(--gold);
}

.jp{font-family:"Shippori Mincho",serif;}
h1,h2,h3{font-weight:400;line-height:1.2;}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:24px 40px 20px;
  background:linear-gradient(to bottom,rgba(0,40,18,.6),rgba(0,40,18,0));
}
.brand{display:flex;align-items:center;gap:14px;}
.brand img{height:86px;}
nav ul{display:flex;gap:34px;list-style:none;align-items:center;}
nav a{
  font-family:"Cinzel",serif;font-size:12.5px;letter-spacing:.22em;
  color:#fff;text-transform:uppercase;opacity:.9;transition:opacity .3s;
}
nav a:hover{opacity:1;color:var(--gold-soft);}
nav a.current{color:var(--gold-soft);opacity:1;border-bottom:1px solid var(--gold-soft);padding-bottom:4px;}

.lang-pc{position:absolute;top:30px;right:40px;font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.7);}
.lang-pc a{color:rgba(255,255,255,.7);}
.lang-pc b{color:var(--gold-soft);font-weight:600;}
.menu-btn{display:none;}
.navtoggle{display:none;}
.mobile-menu{display:none;}
.header-actions{display:none;}
.menu-btn .mb-close{display:none;}
/* スクロール時: 深緑の帯＋コンパクト化（明るいセクション上でも可読性を確保） */
header{transition:background .45s ease,padding .35s ease,gap .35s ease;}
.brand img{transition:height .35s ease;}
header.scrolled{background:rgba(0,45,20,.95);padding:12px 40px 12px;gap:10px;box-shadow:0 1px 0 rgba(201,176,121,.18);}
header.scrolled .brand img{height:52px;}
header.scrolled .lang-pc{top:18px;}

/* ---------- Hero (top page) ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  background:var(--green-deep) url('assets/img/hero_melon.jpg') center/cover no-repeat;
  color:#fff;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,45,20,.62) 0%,rgba(0,45,20,.20) 55%,rgba(0,45,20,0) 100%);}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 40px;width:100%;}
.hero .eyebrow{color:var(--gold-soft);}
.hero h1{
  font-family:"Cinzel",serif;font-weight:500;
  font-size:clamp(48px,7vw,104px);letter-spacing:.06em;
  margin:18px 0 8px;line-height:1.02;
}
.hero-sig{position:absolute;right:7%;top:50%;transform:translateY(-50%);z-index:2;}
.hero-sig img{height:min(60vh,560px);width:auto;display:block;}
.hero p.sub{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(18px,2vw,24px);max-width:30ch;margin-top:26px;color:rgba(255,255,255,.92);
}
.btn{
  display:inline-block;margin-top:38px;
  font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.6);
  padding:16px 38px;transition:all .35s;
}
.btn:hover{background:#fff;color:var(--green);border-color:#fff;}
.btn-dark{color:var(--green);border-color:var(--green);}
.btn-dark:hover{background:var(--green);color:#fff;}
.btn-gold{color:var(--green-deep);background:var(--gold);border-color:var(--gold);}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--green-deep);}

/* ---------- Page hero (subpages) ---------- */
.page-hero{
  position:relative;padding:220px 0 96px;text-align:center;color:#fff;
  background:var(--green-deep);
}
.page-hero.has-img{background-size:cover;background-position:center;}
.page-hero.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,45,20,.66),rgba(0,45,20,.58));}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero .eyebrow{color:var(--gold-soft);}
.page-hero h1{
  font-family:"Cinzel",serif;font-weight:500;
  font-size:clamp(34px,4.6vw,58px);letter-spacing:.1em;margin-top:18px;
}
.page-hero .jp-sub{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(15px,1.6vw,19px);color:rgba(246,242,232,.85);margin-top:16px;letter-spacing:.14em;
}
.page-hero .rule{margin-top:30px;}

/* ---------- Philosophy ---------- */
.philosophy{background:var(--green);color:var(--ivory);padding:140px 0;text-align:center;position:relative;}
.philosophy .romaji{font-family:"Cinzel",serif;letter-spacing:.4em;font-size:13px;margin-bottom:18px;color:rgba(246,242,232,.6);}
.philosophy .philo-h{font-family:"Cinzel",serif;font-weight:500;font-size:clamp(30px,4.6vw,52px);letter-spacing:.05em;line-height:1.12;color:var(--ivory);margin:0;}
.philosophy p{max-width:54ch;margin:42px auto 0;font-size:clamp(17px,1.5vw,21px);font-family:"Cormorant Garamond",serif;color:rgba(246,242,232,.9);}
.rule{width:54px;height:1px;background:var(--gold);margin:0 auto;}

/* ---------- Generic section ---------- */
section.feature{padding:130px 0;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;}
/* .flip は写真とテキストの左右を入れ替える。DOM は media→txt の順なので
   media 側に order を与える（txt に order:2 を付けても DOM 順のままで反転しない） */
.split.flip .media{order:2;}
.split.flip .txt{order:1;}
.split .media img{width:100%;height:100%;object-fit:cover;min-height:560px;}
.split .txt{padding:0 70px;}
.sec-h{font-family:"Shippori Mincho",serif;font-size:clamp(28px,3.4vw,46px);margin:18px 0 10px;color:var(--green);line-height:1.25;}
.sec-h .en{display:block;font-family:"Cinzel",serif;font-size:.5em;letter-spacing:.18em;color:var(--gold);margin-bottom:6px;}
section.feature p{color:var(--ink-soft);margin-top:18px;font-size:17px;}
.specs{list-style:none;margin-top:34px;max-width:580px;}
.specs li{display:flex;align-items:baseline;gap:12px;padding:18px 0;font-family:"Inter",sans-serif;font-size:13px;letter-spacing:.04em;}
.specs li::after{content:"";order:2;flex:1;border-bottom:1px dotted rgba(0,90,40,.4);transform:translateY(-4px);}
.specs li span:first-child{order:1;color:var(--green);letter-spacing:.16em;text-transform:uppercase;font-size:11px;align-self:center;white-space:nowrap;}
.specs li span:last-child{order:3;font-family:"Cormorant Garamond",serif;font-size:19px;color:var(--ink);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;}

/* ---------- Story timeline (TOP digest) ---------- */
.story{background:var(--ivory);padding:130px 0;}
.story .head{text-align:center;max-width:760px;margin:0 auto 76px;}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;}
.tl-card{border-top:2px solid var(--gold);padding-top:22px;}
.tl-card .day{font-family:"Cinzel",serif;color:var(--green);font-size:13px;letter-spacing:.2em;}
.tl-card .num{font-family:"Cormorant Garamond",serif;font-size:54px;line-height:1;color:var(--green);margin:6px 0 12px;}
.tl-card h4{font-family:"Shippori Mincho",serif;font-weight:500;font-size:18px;color:var(--ink);margin-bottom:8px;}
.tl-card p{font-size:15px;color:var(--ink-soft);line-height:1.7;}

/* ---------- 100-Day Journey (story page) ---------- */
.journey{background:#06180e;color:var(--ivory);}

.journey-head{
  text-align:center;padding:120px 40px 80px;
  max-width:var(--maxw);margin:0 auto;
}
.journey-head .eyebrow{color:var(--gold-soft);}
.journey-head .sec-h{color:var(--ivory);}
.journey-head .sec-h .en{display:block;font-family:"Cinzel",serif;font-size:.5em;letter-spacing:.18em;color:var(--gold);margin-bottom:6px;}

/* Step: 左右交互 split */
.jstep{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(246,242,232,.08);
}
.jstep--flip .jstep-media{order:2;}
.jstep--flip .jstep-body{order:1;}

.jstep-media{aspect-ratio:4/3;align-self:start;overflow:hidden;}
.jstep-media img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.25,.46,.45,.94);
}
.jstep:hover .jstep-media img{transform:scale(1.04);}

.jstep-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:72px 80px;
}

/* day + kanji header */
.jstep-meta{display:flex;align-items:baseline;gap:20px;margin-bottom:24px;}
.jday{
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.28em;
  color:var(--gold-soft);text-transform:uppercase;
}
.jkanji{
  font-family:"Shippori Mincho",serif;font-size:72px;line-height:1;
  color:var(--gold);opacity:.42;
  font-weight:500;
}

.jstep-h{
  font-family:"Shippori Mincho",serif;font-weight:500;
  font-size:clamp(22px,2.4vw,32px);color:var(--ivory);
  line-height:1.25;margin-bottom:20px;
}
.jstep-body p{
  font-size:16px;color:rgba(246,242,232,.72);
  line-height:1.78;max-width:42ch;
}

.grower-link{
  display:inline-block;margin-top:32px;
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);border-bottom:1px solid rgba(201,176,121,.5);padding-bottom:3px;
}
.grower-link:hover{color:var(--gold-soft);border-color:var(--gold-soft);}

/* ---------- Heritage band ---------- */
.heritage{position:relative;color:#fff;text-align:center;padding:190px 0 170px;
  background:linear-gradient(rgba(0,45,20,.6),rgba(0,45,20,.5)),var(--green-deep) url('assets/img/glasshouse.jpg') center/cover fixed;}
.heritage h2{font-family:"Cinzel",serif;font-size:clamp(30px,4vw,58px);letter-spacing:.1em;}
.heritage .est{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--gold-soft);margin-top:14px;}
.heritage p{max-width:52ch;margin:30px auto 0;color:rgba(255,255,255,.88);font-size:18px;}

/* ---------- Collaboration / grid ---------- */
.collab{padding:130px 0;text-align:center;}
.collab .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;}
.collab .card{background:var(--ivory);overflow:hidden;text-align:left;}
.collab .card img{height:300px;width:100%;object-fit:cover;}
.collab .card .body{padding:30px 32px 38px;}
.collab .card h4{font-family:"Shippori Mincho",serif;font-weight:500;font-size:21px;color:var(--green);margin-bottom:10px;}
.collab .card p{font-size:15px;color:var(--ink-soft);}
.collab .card .tag{display:block;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;}

/* コラボ末尾の Instagram 誘導ブロック（コラボページ専用） */
.collab-more{padding:0 0 110px;text-align:center;background:var(--ivory);}
.collab-more p{font-size:16px;color:var(--ink-soft);}
/* リンク意匠は index の「@crown.melon on Instagram」に合わせる。
   Cinzel はスモールキャップスでハンドル名が大文字化してしまうため Inter を使う */
.collab-more a{
  display:inline-block;margin-top:16px;
  font-family:"Inter",sans-serif;font-size:13px;letter-spacing:.06em;
  color:var(--green);border-bottom:1px solid var(--gold);padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.collab-more a:hover{color:var(--gold);border-color:var(--green);}
html[lang="ja"] .collab-more p{font-family:"Shippori Mincho",serif;font-size:15px;}
@media(max-width:860px){
  .collab-more{padding:0 0 64px;}
}

/* ---------- Instagram / News ---------- */
.news{background:var(--green-deep);color:var(--ivory);padding:120px 0;}
.news-head{text-align:center;margin-bottom:50px;}
.news-head h2{font-family:"Cinzel",serif;font-size:clamp(30px,4vw,46px);letter-spacing:.12em;}
.news-head .handle{font-family:"Inter",sans-serif;font-size:13px;letter-spacing:.16em;color:var(--gold-soft);margin-top:14px;}

.ig-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}

.ig-follow{text-align:center;margin-top:48px;}
.ig-follow .btn{margin-top:0;}
/* News ページ: 埋め込みをページヒーローの罫線直下（Instagram 見出しの上）に置く構成 */
.news-embed-first .ig-embed-row{margin-top:0;}
.news-embed-first .news-head{margin-top:72px;margin-bottom:0;}

/* ---------- Contact CTA ---------- */
.cta{padding:150px 0;text-align:center;background:var(--paper);}
.cta h2{font-family:"Shippori Mincho",serif;font-size:clamp(28px,3.6vw,48px);color:var(--green);margin:18px 0 6px;}
.cta .en{font-family:"Cinzel",serif;letter-spacing:.2em;color:var(--gold);font-size:13px;}
.cta p{max-width:46ch;margin:22px auto 0;color:var(--ink-soft);font-size:17px;}
.cta p a{white-space:nowrap;}                        /* SPで「@crown.melon on / Instagram」と千切れないように */

/* ---------- Footer ---------- */
footer{background:var(--green);color:rgba(246,242,232,.85);padding:80px 0 40px;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:50px;border-bottom:1px solid rgba(201,176,121,.25);}
footer img.flogo{height:46px;margin-bottom:20px;}
footer h5{font-family:"Cinzel",serif;font-size:12px;letter-spacing:.2em;color:var(--gold-soft);margin-bottom:18px;}
footer ul{list-style:none;}
footer ul li{margin-bottom:11px;font-family:"Inter",sans-serif;font-size:13px;font-weight:300;}
footer .addr{font-family:"Inter",sans-serif;font-size:13px;font-weight:300;line-height:1.9;}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.08em;color:rgba(246,242,232,.55);}
.foot-bot .langs a{margin-left:18px;}
.foot-bot .langs a:hover{color:var(--gold-soft);}

/* ---------- Value-prop trio band ---------- */
.valueprops{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ivory);border-bottom:1px solid var(--line);}
.valueprops .vp{padding:56px 40px;text-align:center;border-right:1px solid var(--line);}
.valueprops .vp:last-child{border-right:0;}
.valueprops .vp .ic{font-family:"Shippori Mincho",serif;font-size:30px;color:var(--gold);}
.valueprops .vp h4{font-family:"Cinzel",serif;font-size:15px;letter-spacing:.14em;color:var(--green);margin:16px 0 10px;}
.valueprops .vp p{font-family:"Cormorant Garamond",serif;font-size:16px;color:var(--ink-soft);max-width:30ch;margin:0 auto;}

/* ---------- Prose (privacy etc.) ---------- */
.prose-sec{padding:100px 0 130px;}
.prose{max-width:760px;margin:0 auto;}
.prose h2{font-family:"Cinzel",serif;font-size:20px;letter-spacing:.12em;color:var(--green);margin:56px 0 16px;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--ink-soft);font-size:16.5px;margin-bottom:16px;}
.prose ul{margin:0 0 16px 22px;color:var(--ink-soft);font-size:16.5px;}
.prose ol.policy-list{margin:26px 0 18px 22px;color:var(--ink-soft);font-size:16.5px;line-height:1.9;}
.prose ol.policy-list li{margin-bottom:12px;}
.prose .updated{font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:44px;}

/* ---------- Grades (product) ---------- */
.grades{background:var(--ivory);padding:120px 0;text-align:center;}
.grades .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:60px;}
.grade-card{background:var(--g-bg,var(--paper));border:1px solid var(--g-line,var(--line));padding:44px 26px 40px;position:relative;}
.grade-card .kanji{font-family:"Shippori Mincho",serif;font-size:44px;color:var(--g-kanji,var(--green));line-height:1;}
.grade-card .name{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.24em;color:var(--g-name,var(--gold));margin-top:16px;text-transform:uppercase;}
.grade-card p{font-size:14px;color:var(--g-body,var(--ink-soft));margin-top:14px;line-height:1.7;}
/* 等級の格付け：富士だけ「濃緑×金」で別格に見せ、山→白→雪は淡い緑の微グラデ。
   「1枚だけ色が違う」ことで最上位が一目で伝わる。 */
.grades .grid > .grade-card:nth-child(1){--g-bg:#003d1a;--g-line:var(--gold);--g-kanji:var(--gold-soft);--g-name:var(--gold-soft);--g-body:#e2e8dc;}
.grades .grid > .grade-card:nth-child(2){--g-bg:#ccdcc4;--g-line:#b5c9ab;--g-kanji:var(--green-deep);--g-name:var(--green-deep);--g-body:var(--ink);}
.grades .grid > .grade-card:nth-child(3){--g-bg:#e3ebdc;--g-line:#cdd9c3;--g-kanji:var(--green);--g-name:var(--green-deep);--g-body:var(--ink-soft);}
.grades .grid > .grade-card:nth-child(4){--g-bg:#f2f5ee;--g-line:#dde5d6;--g-kanji:var(--green);--g-name:var(--green-deep);--g-body:var(--ink-soft);}

/* ---------- Taste band (dark dining — product page) ---------- */
.taste-band{background:#0c1208;color:var(--ivory);padding:120px 0 80px;overflow:hidden;display:block;}
.taste-band .wrap{text-align:center;}
.taste-band .eyebrow{color:var(--gold-soft);}
.taste-band .sec-h{color:var(--ivory);}
.taste-band .taste-lead{max-width:52ch;margin:22px auto 0;font-size:17px;color:rgba(246,242,232,.72);line-height:1.78;}
/* 3-photo row: cards stretch to equal height so captions align */
.taste-band .taste-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:72px;align-items:stretch;}
.taste-band .taste-card{display:flex;flex-direction:column;overflow:hidden;}
/* photo fills remaining height equally across all cards */
.taste-band .taste-card .ph{flex:1;min-height:480px;overflow:hidden;position:relative;}
.taste-band .taste-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);}
/* T1: whole+slice — slice is right-of-centre, shift right to feature it */
.taste-band .taste-card:first-child img{object-position:62% center;}
.taste-band .taste-card:hover img{transform:scale(1.04);}
/* gradient overlay bottom of photo */
.taste-band .taste-card .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,16,8,.72) 0%,rgba(10,16,8,.1) 50%,transparent 100%);
  pointer-events:none;}
/* caption: fixed dark bg, pinned below photo */
.taste-band .taste-cap{padding:28px 32px 40px;background:#0c1208;flex-shrink:0;}
/* gold hairline top of caption */
.taste-band .taste-cap::before{content:"";display:block;width:32px;height:1px;background:var(--gold);margin:0 0 20px;}
.taste-band .taste-cap .no{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.3em;color:var(--gold-soft);text-transform:uppercase;}
.taste-band .taste-cap h4{font-family:"Shippori Mincho",serif;font-weight:500;font-size:19px;color:var(--ivory);margin-top:8px;}
.taste-band .taste-cap p{font-size:14.5px;color:rgba(246,242,232,.68);margin-top:10px;line-height:1.72;}

/* ---------- Contact page ---------- */
.dm-panel{background:var(--ivory);padding:64px 56px;text-align:center;}
.dm-panel h2,.dm-panel h3{font-family:"Shippori Mincho",serif;font-weight:500;font-size:clamp(22px,2.4vw,30px);color:var(--green);margin-top:16px;}
.dm-panel p{color:var(--ink-soft);font-size:16px;max-width:38ch;margin:18px auto 0;}
.dm-panel .btn{margin-top:34px;}
.dm-panel .dm-alt{font-family:"Inter",sans-serif;font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);margin-top:22px;}
.dm-panel .dm-alt a{border-bottom:1px solid var(--gold);}
.contact-sec{padding:110px 0 140px;}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;}
.contact-info h2,.contact-info h3{font-family:"Shippori Mincho",serif;font-weight:500;font-size:26px;color:var(--green);margin-bottom:20px;}
.contact-info p{color:var(--ink-soft);font-size:16px;margin-bottom:28px;}
.contact-info .item{border-top:1px solid var(--line);padding:18px 0;}
.contact-info .item .lbl{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);}
.contact-info .item .val{font-family:"Cormorant Garamond",serif;font-size:20px;color:var(--ink);margin-top:4px;}

/* ---------- 404 ---------- */
.notfound{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--green-deep);color:var(--ivory);padding:140px 24px 80px;}
.notfound .code{font-family:"Cormorant Garamond",serif;font-size:clamp(90px,16vw,180px);line-height:1;color:var(--gold-soft);}
.notfound h1{font-family:"Cinzel",serif;font-size:clamp(20px,2.6vw,30px);letter-spacing:.18em;margin-top:18px;}
.notfound .jp-sub{font-family:"Shippori Mincho",serif;font-size:15px;color:rgba(246,242,232,.75);margin-top:16px;letter-spacing:.1em;}

@media (max-width:1024px){
  .jstep{display:block;}
  .jstep-media{width:100%;}
  .jstep-body{padding:44px 6vw;}
  /* コラボ4枚。タブレット幅では4カラムだとカードが細くなりすぎるため2×2に落とす */
  .collab .grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Responsive (SP) ---------- */
@media(max-width:860px){
  .wrap{padding:0 22px;}
  header{flex-direction:row;justify-content:space-between;gap:0;padding:16px 22px;}
  nav ul{display:none;}

  .lang-pc{display:none;}
  .brand{position:relative;z-index:3;}
  .header-actions{display:flex;align-items:center;gap:16px;position:relative;z-index:3;}
  .lang-top{font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.85);white-space:nowrap;}
  .lang-top a{color:rgba(255,255,255,.55);}
  .lang-top a b{color:var(--gold-soft);font-weight:600;}
  .menu-btn{display:block;position:relative;min-width:82px;text-align:center;font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.2em;color:#fff;border:1px solid rgba(255,255,255,.55);padding:9px 16px;text-transform:uppercase;cursor:pointer;}
  .menu-btn .mb-open,.menu-btn .mb-close{display:inline-block;transition:opacity .3s ease;}
  .menu-btn .mb-close{position:absolute;left:16px;right:16px;opacity:0;}
  .navtoggle:checked ~ .header-actions .menu-btn .mb-open{opacity:0;}
  .navtoggle:checked ~ .header-actions .menu-btn .mb-close{opacity:1;}
  .mobile-menu{position:fixed;inset:0;z-index:1;background:var(--green);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
    visibility:hidden;opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .5s ease,transform .5s ease,visibility .5s;}
  .navtoggle:checked ~ .mobile-menu{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;}
  .mobile-menu a{font-family:"Cinzel",serif;font-size:19px;letter-spacing:.18em;color:var(--ivory);text-transform:uppercase;
    opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;}
  .navtoggle:checked ~ .mobile-menu a{opacity:1;transform:translateY(0);}
  .navtoggle:checked ~ .mobile-menu a:nth-child(1){transition-delay:.1s;}
  .navtoggle:checked ~ .mobile-menu a:nth-child(2){transition-delay:.18s;}
  .navtoggle:checked ~ .mobile-menu a:nth-child(3){transition-delay:.26s;}
  .navtoggle:checked ~ .mobile-menu a:nth-child(4){transition-delay:.34s;}
  .navtoggle:checked ~ .mobile-menu a:nth-child(5){transition-delay:.42s;}
  .brand img{height:58px;}
  header.scrolled{padding:10px 22px;}
  header.scrolled .brand img{height:44px;}
  .hero{min-height:88vh;background-position:60% center;}
  .hero::after{background:linear-gradient(to top,rgba(0,45,20,.78),rgba(0,45,20,.25));}
  .hero-inner{padding-left:22px;padding-right:22px;}
  .hero .eyebrow{max-width:62vw;}
  .hero h1{font-size:clamp(28px,8vw,44px);max-width:62vw;}
  .hero p.sub{max-width:56vw;} /* 62vwだと360-390px幅で縦組ロゴに接触（EN/JA共通） */
  .hero-sig{right:2%;top:51%;bottom:auto;transform:translateY(-50%);opacity:1;}
  .hero-sig img{height:min(38vh,320px);}
  .hero .btn{padding:13px 20px;font-size:9.5px;letter-spacing:.12em;margin-top:60px;}
  .page-hero{padding:150px 0 64px;}
  .philosophy{padding:90px 0;}
  section.feature{padding:64px 0;}
  .split{grid-template-columns:1fr;}
  /* SP は1カラム。全セクションで写真→テキストの順に揃える */
  .split.flip .media{order:0;}
  .split.flip .txt{order:1;}
  .split .txt{padding:48px 22px 8px;}
  .split .media img{min-height:340px;}
  .story{padding:72px 0;}
  .timeline{grid-template-columns:1fr 1fr;gap:24px;}
  .journey-head{padding:72px 22px 0;}
  .jstep{grid-template-columns:1fr;min-height:auto;}
  .jstep--flip .jstep-media{order:0;}
  .jstep--flip .jstep-body{order:1;}
  .jstep-body{padding:44px 22px;}
  .jkanji{font-size:54px;}
  .grower-link{margin-top:20px;}
  .heritage{padding:96px 0;background-attachment:scroll;}
  .collab{padding:72px 0;}
  .collab .grid{grid-template-columns:1fr;gap:20px;}
  .news{padding:72px 0;}

  .ig-card-row{grid-template-columns:1fr;gap:18px;}

  .cta{padding:90px 0;}
  .foot-top{grid-template-columns:1fr;gap:34px;}
  .foot-bot{flex-direction:column;gap:14px;align-items:flex-start;}
  .valueprops{grid-template-columns:1fr;gap:0;}
  .valueprops .vp{padding:30px 16px;border-right:0;border-bottom:1px solid var(--line);}
  .prose-sec{padding:60px 0 80px;}
  .grades{padding:72px 0;}
  .grades .grid{grid-template-columns:1fr 1fr;gap:16px;}
  .taste-band{padding:72px 0 64px;}
  .taste-band .taste-row{grid-template-columns:1fr;margin-top:48px;}
  .taste-band .taste-card .ph{min-height:260px;flex:none;height:300px;}
  .taste-band .taste-cap{padding:20px 22px 32px;}
  .contact-sec{padding:64px 0 80px;}
  .contact-grid{grid-template-columns:1fr;gap:44px;}

  .dm-panel{padding:44px 24px;}
}

html[lang="ja"] .page-hero h1,
html[lang="ja"] .philosophy .philo-h,
html[lang="ja"] .heritage h2,
html[lang="ja"] .news-head h2{font-family:"Shippori Mincho",serif;letter-spacing:.08em;}

/* 和文の行長: ch はラテン「0」幅基準で日本語だと約21字/行と窮屈。
   CJK は 1em = 1文字幅なので em で指定し、35字前後/行にそろえる。 */
html[lang="ja"] .jstep-body p{max-width:35em;}
/* 同じ理由で、ch 指定の本文系も和文だけ em に上書き（英語版の ch 指定はそのまま）。
   値は headless 実測（1440px / 768px）で行数・1行文字数・端行の長さを見て決定。 */
html[lang="ja"] .hero p.sub{max-width:min(24em,56vw);} /* PC=24字2行 / SP=56vw（縦組ロゴと重ならない幅） */
html[lang="ja"] .philosophy p{max-width:28em;}        /* 28〜30字/行 */
html[lang="ja"] .heritage p{max-width:34em;}          /* 36/32字 の2行 */
html[lang="ja"] .cta p{max-width:32em;}
html[lang="ja"] .specs li span:last-child{word-break:keep-all;} /* 「フェボリッ／ト種」型の単語内折れ防止。折り返し点は <wbr> */               /* 中央短文 27〜33字/行 */
html[lang="ja"] .valueprops .vp p{max-width:22em;}    /* 3カラム内 22字/行（カラム幅400pxが上限） */
html[lang="ja"] .taste-band .taste-lead{max-width:32em;} /* 32字/行 の3行 */
html[lang="ja"] .dm-panel p{max-width:26em;}          /* パネル内 21〜31字/行 */

/* ---------- Taste band: external video link ---------- */
.taste-band .taste-video{text-align:center;margin-top:44px;padding:0 24px;}
.taste-band .taste-link{display:inline-block;
  font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.04em;
  color:var(--gold-soft);border-bottom:1px solid rgba(201,176,121,.5);padding-bottom:4px;}
.taste-band .taste-link:hover{color:var(--ivory);border-color:var(--gold-soft);}
html[lang="ja"] .taste-band .taste-link{font-family:"Shippori Mincho",serif;font-size:15px;letter-spacing:.02em;}

/* ---------- Collaboration photos ---------- */
.collab-shot{object-fit:cover;}
/* ハロッズは縦位置写真。被写体（ギフト箱とメロン）が中央〜下部にあるため下寄せでトリミングする */
.collab-shot-harrods{object-position:50% 80%;}
/* 日本平は縦位置写真。3段スタンドが画面中央〜下部に立つため、上段のグラスから
   下段のサンドイッチまでが枠に収まる位置で下寄せにトリミングする */
.collab-shot-nippondaira{object-position:50% 63%;}
/* 縦位置写真でセクション高が突出しないよう、コラボ写真の枠高を3件で揃える */
.split .media .collab-shot{height:560px;}
@media(max-width:860px){
  .split .media .collab-shot{height:340px;}
}

/* ---------- Instagram 公式埋め込み（blockquote + embed.js） ----------
   embed.js は blockquote.instagram-media を iframe.instagram-media に差し替える。
   iframe は幅 326〜540px の白カードで、高さは投稿ごとに JS が実測して決める。
   .ig-card-row の固定3カラム（repeat(3,1fr)）だと 326px を下回る幅ではみ出すため、
   埋め込み行だけ auto-fit で 3→2→1 カラムに落ちるようにする。 */
.ig-embed-row{
  grid-template-columns:repeat(auto-fit,minmax(min(326px,100%),1fr));
  align-items:start; /* 上揃え。高さは投稿の縦横比で決まるため揃えられない（同比率投稿なら揃う） */
  justify-items:center;
}
.ig-embed-row .instagram-media{width:100% !important;margin:0 auto !important;}
/* 幅 326px を確保できないビューポートでは inline の min-width を解除して
   横スクロールの発生を防ぐ（IG 側の埋め込みは 326px 未満でも縮んで収まる） */
@media(max-width:420px){
  .ig-embed-row .instagram-media{min-width:0 !important;}
}
/* 読み込み前・JS 無効・オフライン時に見えるフォールバック。
   iframe 化されるとこの blockquote 自体が消えるので、rendered 側には影響しない */
.ig-embed-row blockquote.instagram-media{
  display:flex;align-items:center;justify-content:center;
  min-height:220px;padding:24px;
  box-sizing:border-box;
  background:#fff;border:1px solid #dbdbdb;border-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-align:center;
}
.ig-embed-row blockquote.instagram-media a{
  color:#3897f0;font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;
}
.ig-embed-row blockquote.instagram-media a:hover{text-decoration:underline;}

/* ---------- JA: 大きい文字の改行位置を文節でそろえる ----------
   和文はどこでも折れるため、大きく組んだコピーだと「日／本」「メロ／ン」のように
   語中で割れて違和感が出る。対象要素だけ word-break:keep-all で自動改行を止め、
   HTML 側に置いた <wbr>（文節の切れ目）と読点・句点でのみ折るようにする。
   対象は「大きく表示される短文コピー」に限定。本文（15〜17px 帯）と privacy の
   法務文は行数が増えて読みにくくなるため対象外。
   overflow-wrap:anywhere は保険。<wbr> を置けない一語（例:「コラボレーション」）が
   容器幅を超えたときだけ発動し、横スクロールを防ぐ。keep-all は min-content を
   押し上げるため、grid カラム（.collab .grid 等）のはみ出し対策としても要る。 */
html[lang="ja"] .hero p.sub,
html[lang="ja"] .philosophy p,
html[lang="ja"] .philosophy .philo-h,
html[lang="ja"] .page-hero h1,
html[lang="ja"] .page-hero .jp-sub,
html[lang="ja"] .sec-h,
html[lang="ja"] .jstep-h,
html[lang="ja"] .tl-card h4,
html[lang="ja"] .heritage h2,
html[lang="ja"] .heritage p,
html[lang="ja"] .valueprops .vp h4,
html[lang="ja"] .grade-card .kanji,
html[lang="ja"] .grade-card .name,
html[lang="ja"] .taste-band .taste-lead,
html[lang="ja"] .taste-band .taste-cap h4,
html[lang="ja"] .collab .card h4,
html[lang="ja"] .collab-more p,
html[lang="ja"] .news-head h2,
html[lang="ja"] .cta h2,
html[lang="ja"] .cta p,
html[lang="ja"] .dm-panel h2,
html[lang="ja"] .contact-info h2,
html[lang="ja"] .notfound h1,
html[lang="ja"] .notfound .jp-sub{word-break:keep-all;overflow-wrap:anywhere;}

/* 極小幅（旧iPhone SE級）では縦組ロゴを置く余白が物理的に無いため非表示にする */
@media(max-width:340px){
  .hero-sig{display:none;}
}