/* =========================================================
   BONEZ brand site — style.css
   配色は下の :root トークンで一元管理。
   白基調へ戻す時は【THEME TOKENS】の7変数を差し替えるだけ。
   ========================================================= */
/* 見出し明朝 Shippori Mincho（latin subset を self-host = 外部依存なしで確実に表示）
   ※本番 bonez-soup.jp では治一郎と同じ Adobe TBUD明朝(tbudmincho-std)を優先読込に差替可 */
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/shippori-mincho-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/shippori-mincho-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
:root{
  /* 【THEME TOKENS】ライト基調（ヒーロー下は白背景・黒文字）。ヒーロー等の暗い部分は個別指定で維持 */
  --ink:#1b1714;          /* 文字（ほぼ黒・暖かい） */
  --ink-soft:#6f685f;     /* 副次テキスト */
  --line:#e6e1d7;         /* 罫線 */
  --paper:#faf8f3;        /* 背景（暖かい白） */
  --paper-2:#f1ece3;      /* 少し沈んだ地 */
  --ph:#e9e5db;           /* 仮画像（明るいグレー） */
  --ph-2:#ddd7cb;
  --accent:#d8552a;       /* 差し色：朱色オレンジ（パウチの線色／冊子の見出し） */
  --accent-2:#e0906a;     /* 差し色の淡い方（チャートの中間色など） */

  --maxw:1280px;
  --gut:clamp(20px,5vw,88px);
  --sans:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  /* 見出し明朝。本番は先頭の tbudmincho-std(治一郎と同じTBUD明朝/Adobe)が効く。無ければ Shippori Mincho */
  --mincho:"tbudmincho-std","Shippori Mincho","Noto Serif JP",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip} /* スマホ横揺れ防止: 固定ヘッダー等の僅かな横あふれをクリップ(縦スクロール/stickyには影響なし) */
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
  overflow-x:clip; /* スマホの横揺れ(固定ヘッダー等による僅かな横あふれ)を防ぐ。sticky には影響しない */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-weight:300;letter-spacing:.06em}

/* placeholder image treatment（本番画像が入るまでの仮表示） */
.ph{
  background:repeating-linear-gradient(45deg,var(--ph) 0 22px,var(--ph-2) 22px 44px);
  position:relative;overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.18em;color:#6f6b64;text-transform:uppercase;
}

/* ---------- header（帯なし・浮遊。Izanami式 MENU展開） ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:30px var(--gut);
  animation:headerReveal .9s ease .2s both} /* 下層ページ=すぐ表示 */
/* トップページのみ: 導入中はロゴ非表示→鍋と一緒に現れる */
body.home header{animation:headerReveal 1.4s ease 5.3s both}
@keyframes headerReveal{from{opacity:0}to{opacity:1}}
.brand{display:block;line-height:0}
.brand img{height:36px;width:auto;display:block}
.menu-toggle{background:none;border:0;cursor:pointer;color:#efece7; /* 既定=暗い上なので白 */
  font-family:inherit;font-size:12px;letter-spacing:.26em;padding:6px 2px;transition:opacity .25s,color .3s}
.menu-toggle:hover{opacity:.6}
/* 白い本文の上に来たら黒 */
header.on-light .menu-toggle{color:var(--ink)}

/* full-screen メニュー（ヘッダーz60より下＝ロゴ/MENUは前面に残る） */
.drawer{position:fixed;inset:0;z-index:55;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.drawer.open{opacity:1;visibility:visible}
.drawer nav{display:flex;flex-direction:column;gap:clamp(20px,3.2vh,32px);text-align:center}
.drawer nav a{font-size:clamp(22px,3vw,34px);font-weight:300;letter-spacing:.18em;
  color:var(--ink);transition:opacity .25s}
.drawer nav a:hover{opacity:.55}

/* ---------- hero (cinematic, video-ready + 流れ続ける湯気の二層構造) ---------- */
/* トラック。中の .hero をピン留めし、鍋→湯気→真っ白→TASTE GIVES HOPEメッセージまで見せる（短めにして次のパウチをすぐ出す） */
.hero-track{position:relative;height:790vh;z-index:1}
.hero{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden}
/* 下地：動画のポスター静止画（明るい）。クロスフェードで一瞬映像が薄れても黒が出ず暗転しない。
   上下に余白(112vh)を持たせ、スクロールで少しだけ translateY させて“ほんの少し上がる”パララックス */
.hero-base{position:absolute;left:0;right:0;top:-6vh;height:112vh;will-change:transform;
  background:#12100e url("/assets/videos/steam-poster.jpg") center/cover no-repeat}
.hero-base .v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:opacity}
.hero-base .v2{opacity:0}
/* 湯気：フラクタルノイズ2枚を、背景位置を1タイルずつずらし続けて“途切れず流れる”
   （transform往復ではなく linear infinite の連続ドリフト。速度・向きを変えて2層で奥行き） */
.steam{position:absolute;inset:0;z-index:1;background-repeat:repeat;mix-blend-mode:screen;
  pointer-events:none;will-change:background-position;transform:scale(1.15)}
.steam.a{background-size:760px 760px;opacity:.62;filter:blur(7px);animation:steamA 17s linear infinite}
.steam.b{background-size:1150px 1150px;opacity:.42;filter:blur(15px);animation:steamB 29s linear infinite}
/* 移動量はタイルサイズの整数倍＝継ぎ目が出ず無限ループ */
@keyframes steamA{from{background-position:0 0}to{background-position:-760px -760px}}
@keyframes steamB{from{background-position:0 0}to{background-position:1150px -1150px}}
.hero .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.26) 0%,rgba(10,8,6,.05) 42%,rgba(10,8,6,.14) 78%,rgba(10,8,6,.34) 100%)}
/* 湯気ホワイトアウト: 白いフラクタル霧が下からもくもく立ちのぼる（下側を濃く・上を薄くmask、billowアニメ）
   opacity は JS がスクロールで 0→1。最後に .hero-white で一気に純白へ */
.hero-steam{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;overflow:hidden;will-change:opacity;
  -webkit-mask-image:linear-gradient(to top,#000 16%,rgba(0,0,0,.55) 52%,transparent 90%);
  mask-image:linear-gradient(to top,#000 16%,rgba(0,0,0,.55) 52%,transparent 90%)}
/* 内側テクスチャを transform で billow（GPU合成＝軽い）。1枚もの(cover)でタイル継ぎ目を出さない */
.hero-steam .steam-tex{position:absolute;inset:-45%;background-repeat:no-repeat;background-size:cover;background-position:center;
  will-change:transform;animation:steamDrift 24s ease-in-out infinite alternate}
.hero-steam.b .steam-tex{animation:steamDriftB 37s ease-in-out infinite alternate}
@keyframes steamDrift{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(6%,-10%,0) scale(1.22)}}
@keyframes steamDriftB{from{transform:translate3d(0,0,0) scale(1.12)}to{transform:translate3d(-7%,-6%,0) scale(1.28)}}
.hero-out .steam-tex{animation-play-state:paused} /* ヒーローが画面外の時は停止＝軽い */
.hero-white{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:var(--paper)}
/* 真っ白の中に浮かび上がる商品カット hero01.jpg。被写体を右へ寄せ、右の縦書きテキストと両立。
   ※フェードは JS がスクロール位置に1:1連動（transitionなし＝止めれば止まる・戻せば即戻る・自走しない） */
.hero-product{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:url("/assets/images/hero/hero01.jpg") 60% center/cover no-repeat}
/* 縦書きタグライン「カラダに向き合う 全ての人へ」＝右側に大きく（主役）。パウチ(中央)の右の壁面上。 */
.hero .hero-text{position:absolute;top:40%;right:clamp(88px,11vw,260px);left:auto;transform:translateY(-50%);z-index:5;
  writing-mode:vertical-rl;white-space:nowrap;font-family:var(--mincho);font-weight:500;color:var(--ink);
  font-size:clamp(23px,3.0vw,40px);letter-spacing:.16em;line-height:1.9;opacity:0;
  text-shadow:0 0 20px rgba(250,248,244,.9),0 0 8px rgba(250,248,244,.7),0 1px 2px rgba(250,248,244,.55)}
/* 見出し2列を黄金比で段差に（肩ずらし）: 2列目を行長の38.2%だけ下げ、重なりを61.8%にする */
.hero .hero-text span{display:block}
.hero .hero-text span:last-child{transform:translateY(38.2%)}

/* 想いのメッセージ。opacity は JS がスクロール連動で制御（transitionなし） */
.hero .hero-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:min(760px,86vw);text-align:center;color:var(--ink);opacity:0}
/* ①(TASTE GIVES HOPE.＋パート1)は中央。②(パート2の詩)は“縦書き”で中央より左（パウチの左の壁面上） */
.hero .hero-message.two{left:auto;right:clamp(280px,50vw,1040px);top:50%;transform:translateY(-50%);
  width:auto;text-align:left}
.hero .hero-message.two .jp{writing-mode:vertical-rl;white-space:normal;height:min(72vh,620px);
  font-size:clamp(12px,1.35vw,15px);line-height:2.0;letter-spacing:.12em}
.hero .hero-message .en{font-family:var(--mincho);font-weight:500;
  font-size:clamp(21px,2.9vw,37px);letter-spacing:.04em;line-height:1.25}
.hero .hero-message .jp{font-family:var(--mincho);color:var(--ink-soft);
  font-size:clamp(12px,1.35vw,15px);line-height:2.4;letter-spacing:.06em}
/* ①の本文は縦書き（見出し .en は横書きのまま）。中央のcontainerに対し inline-block で中央寄せ */
.hero .hero-message.one .jp{margin:0;writing-mode:vertical-rl;
  white-space:nowrap;line-height:2.0;letter-spacing:.12em}
/* メッセージ①の見出しは明朝（端正）。横に伸びすぎないようサイズ・字間を控えめに。
   TWENTY と FIVE の間は nbsp で結合済み（折り返してもその間では切れない） */
/* ①は見出し・本文とも縦書き。縦書きの読み順(右→左)に合わせ、見出しを右・本文を左に置く（row-reverse） */
.hero .hero-message.one{display:flex;flex-direction:row-reverse;align-items:flex-start;
  justify-content:center;gap:clamp(20px,3vw,44px);text-align:start} /* 縦書きでは text-align:start=各列を上揃え */
.hero .hero-message.one .en{font-family:var(--mincho);font-weight:500;writing-mode:vertical-rl;
  font-size:clamp(19px,2.5vw,33px);letter-spacing:.08em;line-height:1.25}
/* 詩②はパウチ写真(葉・影)の上に乗るので、白いソフトグローで文字を浮かせて可読性を確保 */
.hero .hero-message.two .jp{color:var(--ink);
  text-shadow:0 0 18px rgba(250,248,244,.92),0 0 7px rgba(250,248,244,.8),0 1px 2px rgba(250,248,244,.6)}
/* タグライン/詩②: 一文字ずつではなく“ブロックごと”いっぺんにゆっくりフェードイン。
   シーン到達で container に .revealed が付いたら transition で自走（スクロール量に引きずられない）。
   ★transition なので .revealed が外れる時も“なめらかに消える”＝上りでブツっと切れない。 */
.hero .hero-text,.hero .hero-message.two{filter:blur(3px);transition:opacity 1.8s ease,filter 1.8s ease}
.hero .hero-text.revealed,.hero .hero-message.two.revealed{opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){
  .hero .hero-text,.hero .hero-message.two{transition:none;filter:none}
  .hero .hero-text.revealed,.hero .hero-message.two.revealed{opacity:1}
}
/* 起動完了(body.hero-ready)まで後半シーンの文言を完全に隠す＝読み込み時のスクロール復元などで
   “ぼんやり白い大きな文字”が一瞬ちらつくのを防止（JSが load 後に hero-ready を付与して解禁） */
body:not(.hero-ready) .hero-message,
body:not(.hero-ready) .hero-text,
body:not(.hero-ready) .hero-lead2{opacity:0!important}

/* シネマティックパネル（汎用）: 画像をピン留め＋縦書きの言葉が浮かび、まとめて上へ流れる */
.panel-track{position:relative;height:250vh}
.panel{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;background:var(--paper)}
.panel-media{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;will-change:opacity,filter}
.panel-text{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  writing-mode:vertical-rl;white-space:nowrap;font-family:var(--mincho);font-weight:500;color:var(--ink);
  font-size:clamp(22px,2.6vw,34px);letter-spacing:.14em;line-height:1.9;opacity:0}
.panel-text--left{left:clamp(60px,30vw,480px)}
.panel-text--right{right:clamp(80px,42vw,700px)}
/* イントロ: 黒 →「カラダに向き合う全ての人へ」→ 約1秒後に hero0.jpg がふわっと浮上（待機画）。
   その後スクロールすると hero0.jpg が消えて鍋が浮き上がる（hero0.jpg の opacity は JS が制御）。 */
.hero-intro-img{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:#000 url("/assets/images/hero/hero0.jpg") center/cover no-repeat}
.hero-cover{position:absolute;inset:0;z-index:2;background:#000;pointer-events:none;
  opacity:1;transition:opacity .5s ease} /* 黒幕。hero0.jpg が完全に不透明になってから JS が同一クロックで外す＝鍋のちらつき防止 */
.hero-cover.lifted{opacity:0}
@keyframes heroFadeIn{from{opacity:0}to{opacity:1}}
.hero .hero-lead{position:absolute;left:clamp(24px,13vw,260px);top:50%;transform:translateY(-50%);z-index:8;
  font-family:var(--mincho);font-weight:500;color:#efece7; /* 暗い鍋の上なので白系 */
  font-size:clamp(12.5px,1.3vw,16px);letter-spacing:.18em;line-height:1.8;white-space:nowrap;
  visibility:hidden} /* JSが1文字ずつに組み替えるまで隠す＝生テキストの一瞬フラッシュ(FOUC)防止 */
/* 鍋に切り替わったときのコピー（3行）。opacity は JS がスクロールに1:1連動でクロスフェード */
.hero .hero-lead2{position:absolute;left:clamp(24px,13vw,260px);top:50%;transform:translateY(-50%);z-index:8;
  font-family:var(--mincho);font-weight:500;color:#f4f1ec;pointer-events:none;white-space:nowrap;
  font-size:clamp(12.5px,1.3vw,16px);letter-spacing:.18em;line-height:2.0; /* イントロ文と同サイズ */
  text-shadow:0 1px 22px rgba(0,0,0,.5),0 0 9px rgba(0,0,0,.38)} /* 琥珀色の鍋の上でも読めるよう影を敷く */
/* 鍋コピーは“いったん何も無い状態”から、行ごとに少し遅らせて下から浮かび上がる＝前の文字とのディゾルブと差別化(メリハリ)。
   .revealed は JS が鍋の帯[0.18〜0.29]で付け外し。base で隠し(下・ぼかし)、revealed で上へ・くっきり。 */
.hero .hero-lead2 > span{display:block;opacity:0;transform:translateY(8px);filter:blur(2px);
  transition:opacity .8s ease,transform .8s ease,filter .8s ease}
.hero .hero-lead2 > span:last-child{transition-delay:.16s} /* 2行目を少し遅らせて“順に現れる” */
.hero .hero-lead2.revealed > span{opacity:1;transform:translateY(0);filter:blur(0)}
@media(prefers-reduced-motion:reduce){
  .hero .hero-lead2 span{transition:none;transform:none;filter:none}
}
/* 左から一文字ずつ、ぼんやり(ぼかし→クリア)浮かび上がる。遅延はJSで各文字に付与 */
.hero .hero-lead .ch{display:inline-block;opacity:0;animation:charFade 1s ease forwards}
@keyframes charFade{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
.hero .foot{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;
  justify-content:space-between;align-items:center;padding:0 var(--gut);
  font-size:10.5px;letter-spacing:.24em;color:var(--ink-soft);
  animation:heroFadeIn 1s ease 1.8s both}
.hero .foot .mid{display:flex;gap:30px}
.scrollcue{writing-mode:vertical-rl}
@media(max-width:720px){.hero .foot .mid{display:none}}
@media(prefers-reduced-motion:reduce){
  .hero-cover{display:none}
  .hero-intro-img{display:none}
  .hero-lead{animation:none}
  header{animation:none}
}

/* ---------- section shell ---------- */
section{padding:clamp(90px,14vh,190px) 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-size:11px;letter-spacing:.32em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:26px}

/* 大見出しは明朝(セリフ)で統一（Izanami準拠） */
.statement .en,.closing .en,.pagehead .en{font-family:var(--mincho);font-weight:500}

/* statement */
.statement .en{font-size:clamp(30px,5.4vw,72px);font-weight:300;line-height:1.14}
.statement p.jp{margin-top:34px;max-width:40em;color:var(--ink-soft);font-size:16px}

/* statement-hero: 黒から大画像(hero0)が立ち上がり、テキストを重ねる */
.statement-hero{position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;background:var(--paper);padding:0}
.sh-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
/* 上下フェードは“白”＝白い本文から立ち上がり、白へ戻る（ダーク写真の島） */
.sh-topfade{position:absolute;top:0;left:0;right:0;height:44vh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(250,248,243,0) 100%)}
.sh-botfade{position:absolute;bottom:0;left:0;right:0;height:40vh;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,var(--paper) 0%,rgba(250,248,243,0) 100%)}
/* 写真上のテキスト読みやすさ用に左を暗く（写真は暗いので文字は白） */
.sh-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,8,6,.82) 0%,rgba(10,8,6,.40) 42%,rgba(10,8,6,.06) 100%)}
.statement-hero .sh-copy{position:relative;z-index:2}
/* ダーク写真の上なので文字は白系（テーマ反転の影響を打ち消す） */
.statement-hero .sh-copy .en{color:#f3f0ea}
.statement-hero .sh-copy .eyebrow{color:rgba(243,240,234,.68)}
.statement-hero .sh-copy .jp{color:rgba(243,240,234,.84)}
.statement-hero .sh-copy .more{color:#f3f0ea}
.statement-hero .sh-copy .more .l{background:#f3f0ea}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,96px);align-items:center}
.feature+.feature{margin-top:clamp(70px,11vh,150px)}
.feature .media{aspect-ratio:4/5}
.feature.reverse .media{order:2}
.feature .no{font-size:13px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:20px}
.feature h3 .en{font-size:clamp(26px,3.6vw,44px);font-weight:300;line-height:1.1}
.feature h3 .jp{display:block;font-size:15px;color:var(--ink-soft);letter-spacing:.16em;margin-top:14px}
.feature p{margin-top:24px;color:var(--ink-soft);font-size:15.5px;max-width:34em}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-size:12px;letter-spacing:.2em;color:var(--ink)}
.more .l{width:44px;height:1px;background:var(--ink);transition:width .3s}
.more:hover .l{width:66px}

/* story = Izanami「Projects」型（黒地／縦ラベル／大セリフ見出し＋番号＋右縦長画像＋View）
   スクロール動き = 各項目を position:sticky で固定し、次の項目がせり上がって前を覆う（Izanami再現・JS不要） */
/* STORY をヒーロー(固定スパウト)の末尾に重ね、第1パネルがせり上がって覆う。
   背景は透明にして、各 .proj 自身の paper 地で覆う（第1パネルは JS で透過→不透明にフェード） */
.story-proj{background:transparent;padding:0;position:relative;z-index:2;margin-top:-60vh}
/* 末尾スペーサー: 最後の WHO WE ARE を覆った後も top:0 に留める“スクロール分”（他と同じく“カチッ”と止める） */
.story-proj .proj-hold{height:92vh}
/* パネル間の dwell: 直前のパネルが top:0 に収まってから“ひと呼吸”置いて次を上げる（背景paperで隙間が見えない） */
.story-proj .proj-gap{height:62vh;background:var(--paper)}
.story-proj .proj{will-change:opacity}
.proj{position:sticky;top:0;min-height:100vh;background:var(--paper);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center;
  padding:clamp(70px,12vh,130px) var(--gut)}
.proj::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--line)}
.proj:first-child::before{display:none}
.proj-label{position:absolute;left:clamp(6px,1.6vw,22px);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-size:11px;letter-spacing:.36em;color:var(--ink-soft)}
.proj-title{font-family:var(--mincho);font-weight:500;line-height:1.08;
  font-size:clamp(34px,5vw,64px);letter-spacing:.02em}
.proj-sub{margin-top:16px;font-family:var(--mincho);font-size:14px;letter-spacing:.16em;color:var(--ink-soft)}
.proj-body{margin-top:26px;font-family:var(--mincho);max-width:30em;color:var(--ink-soft);font-size:15px;line-height:1.95}
.proj-foot{display:flex;align-items:center;gap:clamp(24px,4vw,52px);margin-top:clamp(36px,6vh,64px)}
.proj-no{font-family:var(--mincho);font-size:15px;letter-spacing:.14em;color:var(--ink-soft)}
.proj-media{aspect-ratio:3/4;width:100%;max-width:520px;max-height:80vh;justify-self:end}
/* 反転（画像左）＝ABOUT で使いリズムを出す */
.proj.rev .proj-media{order:-1;justify-self:start}
.proj.rev .proj-text{padding-left:clamp(0px,4vw,64px)}
@media(max-width:860px){
  .proj{grid-template-columns:1fr;min-height:auto;padding:clamp(64px,10vh,110px) var(--gut) clamp(64px,10vh,110px)}
  .proj-label{position:static;writing-mode:horizontal-tb;transform:none;margin-bottom:18px}
  .proj-media{order:-1;max-width:none;margin-bottom:32px;aspect-ratio:4/5}
}

/* band + three-cell */
.band{background:var(--paper-2)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:60px;border:1px solid var(--line)}
.three .cell{background:var(--paper-2);padding:clamp(30px,4vw,54px)}
.three .cell .k{font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}
.three .cell .en{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:300;margin:14px 0 18px}
.three .cell p{font-size:14px;color:var(--ink-soft);line-height:1.85}

/* company */
.company .feature .media{aspect-ratio:16/11}

/* closing CTA */
.closing{text-align:center;padding:clamp(110px,18vh,220px) var(--gut)}
.closing .en{font-size:clamp(30px,5vw,64px);font-weight:300;line-height:1.15}
.closing p{margin:28px auto 0;max-width:32em;color:var(--ink-soft);font-size:15.5px}
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:52px;padding:18px 40px;border:1px solid var(--ink);font-size:12px;letter-spacing:.24em;transition:background .3s,color .3s}
.cta:hover{background:var(--ink);color:var(--paper)}

/* footer */
footer{border-top:1px solid var(--line);padding:70px var(--gut) 54px}
.fgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:max-content max-content;justify-content:end;gap:clamp(48px,8vw,110px)}
footer h4{font-size:11px;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:18px}
footer ul{list-style:none;font-size:13px;line-height:2.2;color:var(--ink)}
footer ul a{color:var(--ink-soft)}
footer ul a:hover{color:var(--ink)}
.copy{max-width:var(--maxw);margin:56px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}

/* page hero (下層ページ用の小さめ見出し) */
.pagehead{padding:clamp(140px,22vh,240px) 0 clamp(50px,8vh,90px)}
.pagehead .en{font-size:clamp(34px,6vw,84px);font-weight:300;line-height:1.05}
.pagehead .jp{margin-top:22px;color:var(--ink-soft);font-size:15px;letter-spacing:.14em}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.contact-grid .lead{color:var(--ink-soft);font-size:15.5px;max-width:30em}
.contact-info{margin-top:40px;font-size:14.5px;line-height:2.1}
.contact-info a{border-bottom:1px solid var(--line)}
.field{margin-bottom:26px}
.field label{display:block;font-size:11px;letter-spacing:.2em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:10px}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:15px;padding:12px 2px;transition:border-color .3s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
button.cta{background:none;cursor:pointer;color:var(--ink)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

@media(max-width:860px){
  .feature,.fgrid{grid-template-columns:1fr}
  .feature.reverse .media{order:0}
  .three{grid-template-columns:1fr}
  .copy{flex-direction:column;gap:10px}
}

/* ============ スマホ最適化（トップ ヒーロー＋パネル） ============ */
@media(max-width:720px){
  /* イントロの待機画はスマホ専用の縦構図（主役＝急須から湯呑みへ注ぐ画が中央）に差し替え */
  .hero-intro-img{background-image:url("/assets/images/hero/kyuusutate.jpg");background-position:center}
  /* パウチのシーンはスマホ専用の縦画像（パウチ＋カップ＋余白）に差し替え */
  .hero-product{background-image:url("/assets/images/hero/BONEZ1005.jpg");background-position:center}
  /* 鍋動画（俯瞰）はスマホで“ど真ん中”を避け、ほんの少し左寄りの画にする */
  .hero-base .v{object-position:42% center}
  /* リード文はスマホでは縦書き。左に寄りすぎないよう少し内側へ（中央の急須とは重ならない）。
     文字サイズは鍋コピーと揃え、位置は少し上へ。 */
  .hero .hero-lead{writing-mode:vertical-rl;left:clamp(36px,11vw,72px);right:auto;top:44%;transform:translateY(-50%);
    font-size:clamp(15px,4.6vw,20px);line-height:2.0}
  /* 鍋コピーはスマホでは縦書き＋少し大きく。琥珀色の液体は主役が無いので“水平中央”に置く */
  .hero .hero-lead2{writing-mode:vertical-rl;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);
    font-size:clamp(15px,4.6vw,20px);line-height:2.0}
  .hero .hero-lead2 .num{text-combine-upright:all} /* 「36」を縦中横（横並び1マス）に */

  /* ①見出し＋本文（縦書きflex）: 収まるが窮屈回避で下限を少し上げる。配置は現状維持 */
  .hero .hero-message.one{gap:clamp(16px,5vw,30px)}
  .hero .hero-message.one .en{font-size:clamp(23px,6.4vw,30px)}
  .hero .hero-message.one .jp{font-size:16px;font-weight:500;color:var(--ink)} /* 本文を大きく・太く・濃く＝読みやすく */

  /* パウチのシーン: 専用縦画像の上に「右=タグライン(大)／中央左=詩」のバランスで配置（モック準拠・1画面同時表示） */
  .hero .hero-message.two{left:clamp(16px,6vw,48px);right:auto;top:19%;transform:none;text-align:start;width:auto}
  .hero .hero-message.two .jp{height:auto;max-height:56vh;font-size:13px;font-weight:500;line-height:1.6} /* 少し大きく・太く（タグラインと重ならない範囲で列間を詰める） */
  .hero .hero-text{top:33%;right:clamp(14px,4.2vw,30px);left:auto;transform:translateY(-50%);
    font-size:clamp(25px,7.2vw,38px);letter-spacing:.1em;line-height:1.55}
  .hero .hero-text span:last-child{transform:translateY(38.2%)}

  /* パネル: 過大な空白・ピン崩れを解消＝素直な縦スクロール（JSで透過フェードもスキップ） */
  .story-proj{margin-top:0}
  .story-proj .proj-gap,.story-proj .proj-hold{display:none}
  .story-proj .proj{position:static;min-height:auto;gap:22px} /* 画像と見出しの間を詰める */
  /* 小さい縦ラベル(STORY/ABOUT/WHO WE ARE)は、スマホでは大見出しと同じ語で重複するので非表示＝上に詰める */
  .proj-label{display:none}
  /* パネル画像はスマホでは上下を少しカットして横長に（中央=上下同量クロップ）。
     about2(窓際の女性)の頭が切れない最大比≒1.277 を基準に、安全マージンを取り 5/4 に。 */
  .proj-media{aspect-ratio:5/4;margin-bottom:0} /* 下余白0＝見出しを画像に寄せる */
}

/* ============================================================
   ABOUT ページ（冊子デザイン準拠）  body.page-about 配下にスコープ
   ハイブリッド: 大見出しは縦書き(PC)／本文は横書き、スマホは全横書き
   ============================================================ */
.page-about .ac{color:var(--accent)}

/* --- 1. ウェルネスガストロノミー --- */
.page-about .ab-philo{padding:clamp(90px,16vh,190px) 0 clamp(60px,10vh,120px);background:var(--paper)}
.ab-philo__inner{display:grid;grid-template-columns:1fr auto;gap:clamp(40px,6vw,90px);align-items:center}
.ab-philo__lead{max-width:34em}
.ab-philo__lead p{font-family:var(--mincho);color:var(--ink-soft);font-size:clamp(15px,1.15vw,16.5px);
  line-height:2.15;letter-spacing:.03em;margin:0 0 1.5em}
.ab-philo__title{font-family:var(--mincho);font-weight:500;color:var(--ink);
  font-size:clamp(23px,2.3vw,33px);letter-spacing:.06em;line-height:1.95;margin:0;justify-self:end}
.ab-philo__title span{display:block}
.ab-philo__title span.ac,.ab-philo__title span.ac+span{display:inline}
.ab-philo__detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,6vw,80px);align-items:center;
  margin-top:clamp(56px,9vh,120px)}
.ab-philo__media{aspect-ratio:4/5;border-radius:2px;background-color:var(--ph)}
.ab-philo__body p{font-family:var(--mincho);color:var(--ink-soft);font-size:clamp(13.5px,1.0vw,15px);
  line-height:2.1;letter-spacing:.02em;margin:0 0 1.3em}

/* --- 2. 栄養素 --- */
.page-about .ab-nutri{position:relative;padding:clamp(70px,12vh,150px) 0 clamp(50px,8vh,110px);
  background:linear-gradient(rgba(250,248,243,.74),rgba(250,248,243,.80)),
    url("/assets/images/about/nutrition-bg.jpg") center top/cover no-repeat fixed}
@media(max-width:860px){ .page-about .ab-nutri{background-attachment:scroll} }
.ab-nutri__head{text-align:center;max-width:40em;margin:0 auto clamp(40px,6vh,70px)}
.ab-nutri__head .eyebrow{margin-bottom:18px}
.ab-nutri__title{font-family:var(--mincho);font-weight:500;color:var(--ink);
  font-size:clamp(30px,4.6vw,56px);letter-spacing:.08em;margin:0 0 .5em}
.ab-nutri__sub{color:var(--ink-soft);font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.9}
/* 六角バッジ */
.ab-badges{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px) clamp(16px,2.4vw,36px);
  margin:0 0 clamp(56px,9vh,110px)}
.ab-badge{display:flex;flex-direction:column;align-items:center;text-align:center}
.ab-badge__hex{width:clamp(150px,17vw,210px);aspect-ratio:1/1;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(27,23,20,.06)}
.ab-badge__in{display:flex;flex-direction:column;align-items:center;gap:2px}
.ab-badge__jp{font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}
.ab-badge__en{font-family:var(--mincho);font-size:clamp(12px,1vw,14px);letter-spacing:.1em;color:var(--accent)}
.ab-badge__val{font-family:var(--mincho);font-weight:500;color:var(--ink);line-height:1;
  font-size:clamp(26px,3.2vw,40px);margin-top:4px}
.ab-badge__val em{font-style:normal;font-size:.42em;margin-left:2px;color:var(--ink-soft)}
.ab-badge__desc{margin-top:16px;max-width:15em;font-size:12.5px;line-height:1.85;color:var(--ink-soft)}
/* チャート */
.ab-chart{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:clamp(24px,3.4vw,40px)}
.ab-chart__cap{font-family:var(--mincho);font-size:14px;color:var(--ink);margin-bottom:4px}
.ab-chart__cap small{color:var(--ink-soft);font-size:11px;letter-spacing:.04em}
.ab-chart__legend{display:flex;gap:20px;margin:10px 0 22px;font-size:11.5px;color:var(--ink-soft)}
.ab-chart__legend .lg{display:inline-flex;align-items:center;gap:7px}
.ab-chart__legend .lg::before{content:"";width:12px;height:12px;border-radius:2px;display:inline-block}
.lg--gly::before{background:var(--accent)} .lg--pro::before{background:#6fae8f} .lg--glu::before{background:#c0d3a2}
.ab-chart__row{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:12px 0;
  border-top:1px solid var(--line)}
.ab-chart__row:first-child{border-top:0}
.ab-chart__name{font-family:var(--mincho);font-size:13px;color:var(--ink);line-height:1.2}
.ab-chart__name small{display:block;font-size:10px;color:var(--ink-soft);letter-spacing:.06em;margin-top:2px}
.ab-bars{display:flex;flex-direction:column;gap:5px;padding-right:52px}
.ab-bar{position:relative;height:9px;border-radius:0 3px 3px 0;min-width:2px}
.ab-bar span{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:7px;
  font-size:10.5px;color:var(--ink-soft);white-space:nowrap}
.ab-bar--gly{background:var(--accent)} .ab-bar--pro{background:#6fae8f} .ab-bar--glu{background:#c0d3a2}
/* 大型英字 */
.ab-nutri__display{font-family:var(--mincho);font-weight:500;color:var(--accent);
  font-size:clamp(40px,9vw,120px);line-height:1.02;letter-spacing:.01em;text-align:right;
  padding:clamp(20px,4vh,60px) var(--gut) 0;max-width:var(--maxw);margin:0 auto}

/* --- 3. DOCTOR'S MESSAGE ＋ USER VOICE（黒地） --- */
.page-about .ab-dark{background:#14100e;color:#e9e4dc;padding:clamp(70px,12vh,150px) 0 clamp(80px,13vh,170px)}
.ab-dark__kicker{font-family:var(--mincho);font-weight:500;font-size:clamp(26px,4vw,52px);
  letter-spacing:.04em;margin-bottom:clamp(20px,3vh,34px);line-height:1}
.ab-doctor{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,6vw,80px);align-items:center}
.ab-doctor__photo{aspect-ratio:3/4;background-color:#241f1b;filter:grayscale(1)}
.ab-doctor__msg{color:#cfc8bf;font-size:clamp(14px,1.05vw,15.5px);line-height:2.1;margin:0 0 1.4em;font-family:var(--mincho)}
.ab-doctor__name{font-family:var(--mincho);font-size:clamp(22px,2.4vw,30px);color:#fff;margin-top:8px}
.ab-doctor__name span{font-size:.45em;letter-spacing:.2em;color:#8f877d;margin-left:12px}
.ab-doctor__title{font-size:12px;color:#9a9188;letter-spacing:.04em;margin-top:10px;line-height:1.7}
.ab-doctor__bio{font-size:12px;color:#8a827a;line-height:1.95;margin-top:16px;max-width:40em;
  border-top:1px solid rgba(233,228,220,.14);padding-top:16px}
.ab-voice{margin-top:clamp(70px,12vh,150px)}
.ab-voice__statement{font-family:var(--mincho);font-size:clamp(18px,2vw,26px);line-height:2.0;
  letter-spacing:.04em;color:#e9e4dc;max-width:30em}
.ab-voice__list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(36px,6vh,64px)}
.ab-vcard{border:1px solid rgba(233,228,220,.16);border-radius:3px;padding:22px 22px 18px;
  display:flex;flex-direction:column;gap:14px}
.ab-vcard p{font-size:13.5px;line-height:1.95;color:#d7d0c7;margin:0;flex:1}
.ab-vcard__tag{align-self:flex-start;font-size:10.5px;letter-spacing:.1em;color:var(--accent);
  border:1px solid rgba(216,85,42,.5);border-radius:999px;padding:3px 12px}

/* --- ABOUT レスポンシブ（スマホ：縦書き解除・1カラム） --- */
@media(max-width:860px){
  .ab-philo__inner{grid-template-columns:1fr}
  .ab-philo__title{order:-1;justify-self:start;margin-bottom:6px}
  .ab-philo__detail{grid-template-columns:1fr}
  .ab-badges{grid-template-columns:repeat(2,1fr)}
  .ab-doctor{grid-template-columns:1fr}
  .ab-voice__list{grid-template-columns:1fr}
}
@media(max-width:720px){
  .ab-philo__title{font-size:clamp(22px,5.5vw,27px);line-height:1.7;letter-spacing:.06em}
  .ab-philo__lead p{font-weight:500;color:var(--ink)}
  .ab-philo__body p{font-size:14px;font-weight:500}
  .ab-badges{grid-template-columns:1fr;gap:28px}
  .ab-badge__hex{width:min(68vw,230px)}
  .ab-badge__desc{font-size:13.5px}
  .ab-bars{padding-right:46px}
  .ab-nutri__display{text-align:center;font-size:clamp(34px,11vw,56px)}
  .ab-voice__statement{font-size:clamp(17px,4.8vw,22px)}
}

/* =========================================================
   HISTORY ページ（特許・発明の物語 / ABOUTと同トーン）
   ========================================================= */
.page-history .ac{color:var(--accent)}

/* 00 OPENING */
.hs-open{background:var(--paper);padding:clamp(120px,20vh,240px) 0 clamp(70px,11vh,130px)}
/* 00 OPENING: 大英字ヒーロー（フェードイン） */
.hs-open--hero{padding:clamp(120px,16vh,180px) 0 clamp(50px,8vh,84px)}
.hs-open__hero{font-family:var(--mincho);font-weight:500;color:var(--ink);margin:0;
  font-size:clamp(30px,5vw,64px);line-height:1.2;letter-spacing:.04em}
/* 英字の見出し（Clarification / THE ANSWER 等）= closing と同サイズ */
.hs-en-head{font-family:var(--mincho);font-weight:500;color:var(--ink);margin:0 0 clamp(26px,4vh,44px);
  font-size:clamp(30px,5vw,64px);line-height:1.15;letter-spacing:.03em}

/* WHO WE ARE: 全面画像ヒーロー（テキストなし／ヘッダー白） */
.co-hero{height:86vh;min-height:460px;position:relative;overflow:hidden;background:#1a1612}
.co-hero__img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.co-way__body{max-width:38em}
/* WHO WE ARE: 読みカラム＋シネマ画像＋中央スケッチ */
.co-read{max-width:38em}
/* The Legend: テキスト左＋写真右（写真はテキスト高さに合わせて伸縮） */
.hs-read__block.co-legend__block{align-items:stretch}
.co-legend__block .hs-read__col-pic{aspect-ratio:auto;min-height:340px}
@media(max-width:860px){ .co-legend__block .hs-read__col-pic{aspect-ratio:4/3;min-height:0} }
.co-cinema{margin:clamp(56px,9vh,104px) 0 0}
.co-cinema__img{aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#1a1612}
.co-cinema figcaption{text-align:center;margin-top:16px;font-size:11px;letter-spacing:.3em;color:var(--ink-soft)}
.co-mission{max-width:42em;margin-left:auto;margin-right:auto;text-align:center}
.co-soul__img{width:min(100%,780px);aspect-ratio:5/4;margin:0 auto clamp(30px,5vh,52px);
  background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#1a1612;
  border-radius:2px;box-shadow:0 22px 55px rgba(27,23,20,.16)}
.co-mission__text{max-width:34em;margin:0 auto}
.co-mission__text p{text-align:center}
/* 四字熟語グリッド（横書き・左カラム内の2×2・小さめ） */
.co-way__block{align-items:start}
.co-values{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vh,46px) clamp(20px,2vw,34px);
  margin-top:clamp(40px,6vh,58px)}
.co-value{text-align:center}
.co-value__label{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;line-height:1.6}
.co-value__ja{font-family:var(--mincho);font-weight:500;color:var(--ink);
  font-size:clamp(20px,1.9vw,26px);letter-spacing:.22em;line-height:1.2;margin:0 0 12px;padding-left:.22em}
.co-values .co-value__desc{font-family:var(--mincho);color:var(--ink-soft);font-size:12px;line-height:1.9;letter-spacing:.02em}
@media(max-width:720px){ .co-values{grid-template-columns:1fr;gap:clamp(34px,6vh,48px);margin-top:clamp(36px,6vh,50px)} }
.hs-open__hero span{display:block;opacity:0;transform:translateY(26px);
  animation:hsHeroIn 1.2s cubic-bezier(.2,.75,.2,1) forwards}
.hs-open__hero span:nth-child(1){animation-delay:.2s}
.hs-open__hero span:nth-child(2){animation-delay:.5s}
@keyframes hsHeroIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hs-open__hero span{opacity:1;transform:none;animation:none}
}
.hs-open__title{font-family:var(--mincho);font-weight:500;color:var(--ink);white-space:nowrap;
  font-size:clamp(32px,4.2vw,56px);letter-spacing:.02em;line-height:1.34;margin:0 0 .5em}
.hs-open__en{font-family:var(--mincho);color:var(--ink-soft);letter-spacing:.16em;
  font-size:clamp(13px,1.4vw,19px);line-height:1.6;opacity:.65}
.hs-open__lead{margin:clamp(40px,6vh,70px) 0 0;max-width:34em}
.hs-open__lead p{font-family:var(--mincho);font-size:clamp(15px,1.2vw,17px);color:var(--ink-soft);line-height:2.1}
.hs-quote{font-family:var(--mincho);font-weight:500;color:var(--ink);border:0;margin:clamp(24px,4vh,42px) 0 0;
  font-size:clamp(21px,3.1vw,40px);line-height:1.8;letter-spacing:.04em}

/* STEP（白地・2カラム） */
.hs-step{padding:clamp(70px,12vh,150px) 0;background:var(--paper)}
.hs-step--light{background:var(--paper-2)}
.hs-step__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.hs-step__body{max-width:34em}
.hs-step__title{font-family:var(--mincho);font-weight:500;color:var(--ink);
  font-size:clamp(24px,3vw,40px);letter-spacing:.05em;line-height:1.5;margin:0 0 1em}
.hs-step__body p{font-family:var(--mincho);color:var(--ink-soft);font-size:clamp(14px,1.05vw,16px);
  line-height:2.15;letter-spacing:.02em;margin:0 0 1.3em}
.hs-step__accent{color:var(--ink);font-weight:500}
.hs-step__media{aspect-ratio:4/5;border-radius:2px;background-color:var(--ph);
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* STEP（長文・見出し全幅＋横長バナー＋読みカラム） */
.hs-read__head{margin:0}
.hs-read__head .hs-step__title{white-space:nowrap;margin:0}
.hs-read__media{aspect-ratio:16/9;border-radius:2px;background-color:var(--ph);
  background-size:cover;background-position:center;background-repeat:no-repeat;margin:0 0 clamp(34px,6vh,60px)}
/* テキスト/画像の交互ブロック */
.hs-read__block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;
  margin-top:clamp(44px,8vh,80px)}
.hs-read__col-pic{aspect-ratio:4/5;border-radius:2px;background-color:var(--ph);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* 2枚組（工程: 濁り→澄明） */
.hs-read__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px);margin:0 0 clamp(34px,6vh,60px)}
.hs-read__pic{aspect-ratio:4/3;border-radius:2px;background-color:var(--ph);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* 比較（一般的なボーンブロス vs BONEZ） */
.hs-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px);margin:clamp(40px,7vh,72px) 0 0}
.hs-compare__item{margin:0}
.hs-compare__pic{aspect-ratio:4/3;border-radius:2px;background-color:var(--ph);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hs-compare figcaption{margin-top:14px;text-align:center;font-family:var(--mincho);
  font-size:clamp(13px,1.3vw,16px);letter-spacing:.1em;color:var(--ink)}
.hs-compare__item--bonez figcaption{font-weight:500}

.hs-read__body{max-width:none;column-count:2;column-gap:clamp(36px,4.5vw,72px)}
.hs-read__body > *{break-inside:avoid}
.hs-read__body > p:first-child{margin-top:0}

/* 黒地共通 */
.hs-dark{background:#14100e;color:#e9e4dc;position:relative;overflow:hidden}
.hs-dark .eyebrow{color:rgba(233,228,220,.82)}
.hs-dark__lead{font-family:var(--mincho);color:#ece7df;font-size:clamp(14px,1.1vw,16.5px);line-height:2.1;margin:0 0 1.5em}
.hs-dark__note{color:#ddd7cd;font-size:clamp(13px,1vw,14.5px);line-height:2.0;margin:clamp(24px,4vh,40px) 0 0}
.hs-quote--dark{color:#fff}

/* 03 CHALLENGE */
.hs-challenge{padding:clamp(80px,14vh,170px) 0}
.hs-challenge__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;filter:grayscale(1)}
.hs-challenge__inner{position:relative;max-width:46em}

/* 04 REVEAL */
.hs-reveal{padding:clamp(70px,12vh,150px) 0;text-align:center}
.hs-reveal__turn{font-family:var(--mincho);font-size:clamp(18px,2.2vw,30px);color:#e9e4dc;
  letter-spacing:.06em;margin:0 0 clamp(30px,5vh,50px)}
.hs-ledger{list-style:none;max-width:30em;margin:0 auto clamp(36px,6vh,60px);display:flex;flex-direction:column;gap:14px}
.hs-ledger li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid rgba(233,228,220,.14);padding-bottom:14px}
.hs-ledger__k{font-size:clamp(13px,1.1vw,15px);color:#c9c2b8;letter-spacing:.08em;white-space:nowrap}
.hs-ledger__v{font-family:var(--mincho);font-weight:500;font-size:clamp(18px,2.4vw,30px);color:#e9e4dc}
.hs-ledger__v em{font-style:normal;margin-left:6px;font-size:.85em}
.hs-ledger__v.down{color:#c9c2b8}
.hs-ledger__v.up{color:var(--accent)}
.hs-ledger li.is-climax{border-bottom-color:rgba(216,85,42,.5)}
.hs-display{font-family:var(--mincho);font-weight:500;color:var(--accent);
  font-size:clamp(34px,8vw,100px);line-height:1.05;letter-spacing:.01em}

/* 06 PATENT timeline */
.hs-patent{padding:clamp(70px,12vh,150px) 0}
.hs-patent__head{margin:0 0 clamp(40px,6vh,70px)}
.hs-patent__head .hs-step__title{font-size:clamp(22px,2.25vw,32px);line-height:1.5}
.hs-patent__grid{display:grid;grid-template-columns:1fr minmax(190px,280px);gap:clamp(36px,5vw,72px);align-items:start}
.hs-patent__cert{margin:0}
.hs-patent__cert img{width:100%;height:auto;display:block;border:1px solid var(--line);box-shadow:0 20px 50px rgba(27,23,20,.12)}
.hs-timeline{list-style:none;max-width:720px}
.hs-timeline li{display:grid;grid-template-columns:clamp(110px,16vw,180px) 1fr;gap:clamp(20px,3vw,44px);
  padding:clamp(24px,4vh,40px) 0;border-top:1px solid var(--line);align-items:baseline}
.hs-timeline li:last-child{border-bottom:1px solid var(--line)}
.hs-timeline__date{font-family:var(--mincho);font-weight:500;color:var(--accent);font-size:clamp(26px,3.4vw,44px);line-height:1}
.hs-timeline__date small{display:block;font-size:.4em;color:var(--ink-soft);letter-spacing:.1em;margin-top:8px}
.hs-timeline__body h3{font-family:var(--mincho);font-weight:500;font-size:clamp(17px,1.6vw,22px);color:var(--ink);margin:0 0 .5em;letter-spacing:.04em}
.hs-timeline__body p{color:var(--ink-soft);font-size:14px;line-height:1.9}

/* 07 PHILO closing */
.hs-philo{padding:clamp(80px,14vh,180px) 0}
.hs-philo__inner{max-width:44em}
.hs-ledger--mini{max-width:26em;margin:clamp(28px,4vh,44px) 0}
.hs-ledger--mini li{justify-content:flex-start;gap:0}
.hs-philo__emph{font-family:var(--mincho);color:#fff;font-size:clamp(17px,2vw,24px);
  line-height:1.8;letter-spacing:.04em;margin:clamp(24px,4vh,40px) 0}
.hs-philo__final{font-family:var(--mincho);font-weight:500;color:#fff;
  font-size:clamp(24px,3.6vw,48px);line-height:1.6;letter-spacing:.04em;margin:clamp(30px,5vh,50px) 0 0}

/* HISTORY レスポンシブ */
@media(max-width:860px){
  .hs-step__inner{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .hs-step__media{order:-1;aspect-ratio:3/2}
  .hs-read__media{aspect-ratio:3/2}
  .hs-read__body{column-count:1}
  .hs-read__block{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  .hs-read__col-pic{order:-1;aspect-ratio:3/2}
  .co-way__block .hs-read__col-pic{aspect-ratio:4/5}
  .hs-patent__grid{grid-template-columns:1fr}
  .hs-patent__cert{max-width:230px;margin:clamp(20px,4vh,32px) auto 0}
  .hs-timeline li{grid-template-columns:1fr;gap:8px;padding:clamp(22px,4vh,32px) 0}
}
@media(max-width:720px){
  .hs-open__title{white-space:normal;font-size:clamp(28px,7vw,40px);line-height:1.4}
  .hs-read__head .hs-step__title{white-space:normal;font-size:clamp(22px,5.6vw,30px)}
  .hs-open__lead p{font-size:15px}
  /* 引用: 行末に「か。」が1文字だけ残らないよう少し小さく */
  .hs-quote{font-size:clamp(16px,4.6vw,19px);line-height:1.9}
  /* スマホは縦余白を詰める（画像の上などの空きすぎ解消） */
  .hs-open{padding:clamp(84px,14vh,116px) 0 28px}
  .hs-step{padding:clamp(40px,7vh,56px) 0}
  .hs-challenge{padding:clamp(52px,9vh,80px) 0}
  .hs-reveal{padding:clamp(52px,9vh,80px) 0;text-align:center}
  .hs-patent{padding:clamp(52px,9vh,80px) 0}
  .hs-philo{padding:clamp(56px,10vh,90px) 0}
  .hs-step__body p{font-weight:500}
  .hs-dark__lead{font-weight:500;color:#ece7df}
  .hs-ledger li{gap:12px}
}

/* === スマホの可読性向上: 明朝の本文を少し濃く・太く（細くて見づらい対策） === */
@media(max-width:720px){
  :root{--ink-soft:#514a41}
  .hs-step__body p,.hs-read__col-text p,.ab-philo__lead p,.ab-philo__body p,
  .ab-nutri__sub,.ab-doctor__msg,.proj-body,.proj-sub,
  .hs-dark__lead,.hs-dark__note,.hs-quote,.hs-reveal__turn,.hs-philo__emph{font-weight:600}
}

/* ===== CONTACT フォーム ===== */
.ct-intro{max-width:40em;margin-bottom:clamp(40px,6vh,64px)}
.ct-intro p{font-family:var(--mincho);color:var(--ink-soft);font-size:clamp(14px,1.1vw,16px);line-height:2}
.ct-form{max-width:46em}
.ct-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.4vw,32px)}
.ct-field{margin-bottom:clamp(20px,3vh,26px)}
.ct-field label{display:block;font-size:12.5px;letter-spacing:.06em;color:var(--ink);font-weight:500;margin-bottom:9px}
.ct-field .req{display:inline-block;font-size:10px;letter-spacing:.08em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:middle;font-weight:400}
.ct-field input,.ct-field select,.ct-field textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);line-height:1.6;
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:13px 14px;
  transition:border-color .2s;-webkit-appearance:none;appearance:none}
.ct-field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236f685f' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{outline:none;border-color:var(--ink)}
.ct-field textarea{resize:vertical;min-height:150px;line-height:1.85}
.ct-submit{margin-top:clamp(14px,2vh,22px);display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:13px;letter-spacing:.18em;color:#fff;background:var(--ink);
  border:1px solid var(--ink);border-radius:3px;padding:16px 44px;cursor:pointer;transition:opacity .2s}
.ct-submit:hover{opacity:.82}
.ct-submit:disabled{opacity:.5;cursor:default}
.ct-note{margin-top:16px;font-size:12px;color:var(--ink-soft);letter-spacing:.02em}
.ct-status{max-width:40em;border-top:1px solid var(--line);padding-top:clamp(30px,5vh,48px);margin-top:clamp(10px,2vh,20px)}
.ct-status__ja{font-family:var(--mincho);font-size:clamp(20px,2.4vw,28px);color:var(--ink);margin-bottom:16px}
.ct-status p{font-family:var(--mincho);color:var(--ink-soft);font-size:14px;line-height:2}
.ct-direct{margin-top:clamp(56px,9vh,90px);border-top:1px solid var(--line);padding-top:clamp(28px,4vh,40px)}
.ct-direct .eyebrow{margin-bottom:14px}
.ct-direct p{font-family:var(--mincho);font-size:clamp(14px,1.1vw,16px);color:var(--ink)}
.ct-direct a{border-bottom:1px solid var(--ink)}
@media(max-width:620px){ .ct-row{grid-template-columns:1fr} }