/* Morelia Reptor — トップページ
   参考：qino.jp（24列の流体グリッド・枠内パララックス・単一の出現カーブ）、gris.jp（平らな面・余白）
   数値は 2026-10-19 の実測から */

:root {
  --gw: 4.1667vw;                 /* 1列（1440 で 60px） */
  --side: var(--gw);
  --bg: #e3eae0;                  /* qino の地 */
  --bg2: #dbe2d7;
  --ink: #131417;
  --ink-2: #4a4d48;
  --mute: #898d87;
  --line: rgba(0, 0, 0, .2);
  --green: #296a46;
    --ease: cubic-bezier(.16, .75, .3, 1);
  --sans: "IBM Plex Sans", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --serif: "Shippori Mincho", "Yu Mincho", "游明朝体", serif;
  --latin: "Cormorant Garamond", "Shippori Mincho", serif;
}
@media (max-width: 1024px) {
  :root { --gw: 8.333vw; --side: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(13px, .95vw, 17px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); line-height: 1.8; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: var(--green); color: #fff; }

/* 慣性スクロール中は中身を固定して JS で動かす */
body.has-smooth .smooth { position: fixed; inset: 0 0 auto 0; will-change: transform; }

/* ================= ローディング ================= */
/* 10/19 夜：黒い幕で隠さず、頭（密林）の上に膜を敷いてまん中で m を描く → 舌 → ヘッダーのロゴの位置へ飛んで縮む */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--ink); color: #f2f4ef;
  display: grid; place-items: center; pointer-events: none;
  transition: background-color 1.2s var(--ease);
}
.loader.is-play { background-color: rgba(10,13,11,.5); }
.loader.is-fly { background-color: rgba(10,13,11,0); }
.loader.is-skip { display: none; }
.loader__inner { width: min(46vw, 340px); text-align: center; transition: transform .64s var(--ease), opacity .64s; }
.mark--loader { width: 100%; height: auto; overflow: visible; transform-origin: 50% 50%; transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.loader__word {
  margin-top: 1.4em; font-family: var(--latin); font-style: italic; font-size: clamp(20px, 2vw, 28px);
  letter-spacing: .04em; opacity: 0; transform: translateY(10px); transform-origin: 0 50%; display: table; margin-inline: auto; white-space: nowrap;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.loader__word .wordmark { display: block; height: .95em; width: auto; overflow: visible; }
.loader.is-play .loader__word { opacity: 1; transform: none; transition-delay: 1.9s; }
/* 10/19 夜：文字も消さずに、ロゴと一緒にヘッダーの「Morelia Reptor」の位置へ飛ぶ（行き先は JS で実測） */
.loader.is-fly .loader__word { transition: transform 1.1s cubic-bezier(.7,0,.2,1); transition-delay: 0s; }

/* なぞり線（マスク）を順に伸ばして本体を見せる */
.mark--loader .m-s { stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; }
.loader.is-play .m-s1 { animation: draw .55s cubic-bezier(.5,0,.3,1) .2s forwards; }
.loader.is-play .m-s2 { animation: draw .6s  cubic-bezier(.5,0,.3,1) .72s forwards; }
.loader.is-play .m-s3 { animation: draw .75s cubic-bezier(.5,0,.3,1) 1.28s forwards; }
@keyframes draw { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }

/* 舌：口元を支点に伸び縮み（2回ちろちろ） */
.m-tongue {
  transform-box: view-box; transform-origin: 8px 44px;
  transform: scaleY(0);
}
/* 11/12 最後は舌を出したまま止める（着地で .ai の m＝舌が出ている形に入れ替わっても跳ばない） */
.loader.is-tongue .m-tongue { animation: flick-out 1.1s forwards; }
.m-tongue--ai { transform-origin: 22px 60px; }
/* 描き終わったらなぞり線のマスクを外す（.ai の m の縁が線からわずかにはみ出す所があるため） */
.loader.is-tongue .m-shape { mask: none; }
.hd__logo.is-flick .m-tongue, .menu__logo.is-flick .m-tongue { animation: flick 1.2s linear; }
@keyframes flick {
  0%   { transform: scaleY(0); }
  10%  { transform: scaleY(1.05) rotate(-4deg); }
  18%  { transform: scaleY(.55) rotate(4deg); }
  26%  { transform: scaleY(1) rotate(-3deg); }
  36%  { transform: scaleY(0); }
  50%  { transform: scaleY(0); }
  60%  { transform: scaleY(1.05) rotate(3deg); }
  68%  { transform: scaleY(.5) rotate(-4deg); }
  76%  { transform: scaleY(1) rotate(2deg); }
  88%, 100% { transform: scaleY(0); }
}
/* 11/12 夜：ちろちろ2回（段がついて見えた）をやめ、1回のなめらかな動きに（本人「progresiva」）
   ローダー：引っ込んだ状態からゆっくり出て、少し揺れて、出たまま止まる */
@keyframes flick-out {
  /* 11/12 夜（3）：舌は最低2回、根元まで完全に引っ込める（本人）→ 出たまま止まる */
  0%   { transform: scaleY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2,0,.2,1); }
  16%  { transform: scaleY(1.05) rotate(-3deg); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  32%  { transform: scaleY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2,0,.2,1); }
  50%  { transform: scaleY(1.05) rotate(3deg); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  66%  { transform: scaleY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2,0,.2,1); }
  84%  { transform: scaleY(1.03) rotate(-2deg); animation-timing-function: ease-in-out; }
  100% { transform: scaleY(1) rotate(0deg); }
}
/* .ai の m（ホバー・メニュー）：出た状態からゆっくり引っ込め → ゆっくり出して少し揺れ → 出たまま */
@keyframes flick-ai {
  /* 出た状態から：完全に引っ込める×2 → 出たまま止まる */
  0%   { transform: scaleY(1) rotate(0deg); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  16%  { transform: scaleY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2,0,.2,1); }
  34%  { transform: scaleY(1.05) rotate(-3deg); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  50%  { transform: scaleY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2,0,.2,1); }
  70%  { transform: scaleY(1.05) rotate(3deg); animation-timing-function: ease-in-out; }
  86%  { transform: scaleY(.97) rotate(-2deg); animation-timing-function: ease-in-out; }
  100% { transform: scaleY(1) rotate(0deg); }
}

/* ローダー後のページの入り（qino：blur 2px・20px 下・0.96s） */
.smooth { transition: opacity .96s var(--ease), filter .96s var(--ease), translate .96s var(--ease); }
body.is-loading .smooth { opacity: 0; filter: blur(2px) brightness(1.04); translate: 0 20px; }
/* 演出中のトップ：写真は最初から見せる。ヘッダーはロゴが着いてから */
body.is-intro .smooth { opacity: 1; filter: none; translate: none; transition: none; }
body.is-intro .hd__logo .mark { visibility: hidden; }
.hd__logo .wordmark, .hd__side { transition: opacity .8s ease; }
body.is-intro .hd__logo .wordmark, body.is-intro .hd__side { opacity: 0; }
body.is-ready .smooth { transition-delay: .25s; }

/* ================= ヘッダー ================= */
.hd {
  position: fixed; z-index: 50; top: min(var(--gw), 40px); left: var(--side); right: var(--side);
  display: flex; align-items: center; gap: 2em;
  transition: transform .6s var(--ease), color .4s ease;
}
.hd.is-hide { transform: translateY(calc(-100% - 60px)); }
.hd.is-dark { color: #f2f4ef; }
.hd__logo { display: flex; align-items: center; gap: .7em; text-decoration: none; }
.hd__logo .mark { width: 50px; height: auto; overflow: visible; }
/* 11/12 ロゴの m は .ai の m（.mark-ai）だけを見せる。既存の .mark は透明でローダーの着地先として場所だけ持つ
   ホバーでは描き直さず、.ai の m の舌だけをちろちろさせる（本人の指示） */
.hd__logo { position: relative; }
.hd__logo .mark-ai { position: absolute; left: 0; top: 50%; width: 50px; height: auto; overflow: visible; transform: translateY(-50%); }
.hd__logo .mark { opacity: 0; }
.m-tongue-ai { transform-box: view-box; transform-origin: 22px 60px; }
/* 11/12 .ai の m は舌が出ている形が素なので、出た状態から引っ込めて2回ちろちろ→出たまま戻る（途中で跳ばない） */
.hd__logo.is-flick .m-tongue-ai, .menu__logo.is-flick .m-tongue-ai { animation: flick-ai 1.2s; }
body.is-intro .hd__logo .mark-ai { visibility: hidden; }
/* 11/12 文字ロゴは先方支給 .ai の文字（tools/wordmark.mjs）・色は currentColor（頭の上では白） */
.hd__logo .wordmark { display: block; height: 18px; width: auto; flex: none; overflow: visible; }
@media (max-width: 600px) { .hd__logo .wordmark { height: 13px; } }
.hd__side { margin-left: auto; display: flex; align-items: center; }
/* 丸い釦（qino：56px・白い丸に 18×2 の線3本 → 開くと #23352b の丸に白い ×） */
.hd__menu { position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer;
  transition: background .4s ease, color .4s ease; }
.hd__menu i { position: absolute; left: 19px; top: 27px; width: 18px; height: 2px; background: currentColor; transition: transform .4s ease-in-out, opacity .3s ease, width .4s var(--ease); }
.hd__menu i:nth-child(1) { transform: translateY(-5px); }
.hd__menu i:nth-child(3) { transform: translateY(5px); }
.hd__menu:hover i:nth-child(2) { width: 12px; }
body.is-menu .hd__menu { background: #23352b; color: #fff; }
body.is-menu .hd__menu i:nth-child(1) { transform: rotate(45deg); }
body.is-menu .hd__menu i:nth-child(2) { opacity: 0; }
body.is-menu .hd__menu i:nth-child(3) { transform: rotate(-45deg); }


/* ================= 出現（qino：.8s・下から 110% ＋ 12° 傾き） ================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.px[data-reveal] { transform: none; clip-path: inset(18% 0 0 0); transition: opacity .6s ease, clip-path 1.2s var(--ease); }
.px[data-reveal].is-in { clip-path: inset(0 0 0 0); }

/* 枠内パララックス：画像は枠の 112%（帯は 120%）、上へずらして置く */
.px { position: relative; overflow: hidden; background: var(--bg2); }
.px img { position: absolute; left: 0; width: 100%; height: 112%; top: -12%; object-fit: cover; will-change: transform; }
.px--band img { height: 120%; top: -20%; }

/* ================= ヒーロー：密林の写真を4層に切り分けたパララックス（qino 実測は 奥 .275・中 .105・手前 0 だが、もっと分かるように 奥 .55／.38／.2／手前 0 ＋マウス。速さと量は index.html の data-depth／data-mouse）。下端は黒へ溶かして INFORMATION へつなぐ ================= */
.hero { position: relative; height: 120vh; height: 120svh; min-height: 680px; overflow: hidden; color: #f2f4ef; background: var(--ink); }
/* 絵の層は合成レイヤーなので下端の切り抜きが端数で丸められ、スクロール中に 1px 明るい線が出る。
   絵だけ 3px 手前で切り、下端は .hero の地色（墨）を見せる（10/19） */
.hero__visuals { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 3px 0); }
/* 3層とも同じ寸法・同じ切り取り（ずれないように）。上に流す余白として 12% 上へ、blur の縁とマウスで上がるぶんを隠すため 5% 下へ、左右 3% はみ出させる */
.hero__px { position: absolute; left: -3%; top: -12%; width: 106%; height: 117%; will-change: transform; }
.hero__px img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform: scale(1.08); transform-origin: 50% 100%; transition: transform 2.6s var(--ease); }
body.is-ready .hero__px img { transform: none; }
.hero__px--mid img { filter: blur(.6px); }
.hero__px--front img { filter: blur(1.4px); }
.hero__layer--title { position: absolute; left: 0; top: 0; width: 100%; height: 100svh; display: grid; place-items: center; z-index: 2; will-change: transform; pointer-events: none; }
/* 開くときだけ、全層ごと少し寄った所から戻す */
/* 四隅を落とす覆い（multiply。.5 だと葉の緑が沈むので .32） */
.hero__visuals::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: multiply; opacity: .32; background: radial-gradient(circle, #0000, #000), linear-gradient(#0000 50%, #000 100%); }
/* 絵の下端に残る 1px の継ぎ目を地色の線で潰す（parallax-web と同じ） */
/* 10/19 夜：切り口（下から 3px）のさらに上 1〜2px にも線が出ていたので、覆いを 10px に（下端はグラデで墨なので見えない） */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 10px; z-index: 6; background: var(--ink); }
/* 下端を次の面の地色へ溶かす（13 段） */
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 4; pointer-events: none;
  background: linear-gradient(#13141700, #13141703 1.8%, #13141708 4.8%, #13141710 9%, #1314171c 13.9%, #1314172b 19.8%, #13141740 27%, #1314175a 35%, #13141778 43.5%, #13141799 53%, #131417bf 66%, #131417e3 81%, var(--ink)); }
.hero__copy {
  position: relative; z-index: 2; width: max-content; max-width: calc(100vw - var(--side) * 2); text-align: center; font-weight: 400;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.5), 0 0 42px rgba(0,0,0,.4); translate: 0 -4svh;
}
.hero__copy .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__copy .line > span { display: inline-block; transform: translateY(110%) rotate(8deg); transform-origin: left top; transition: transform .9s var(--ease); }
.hero__en { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: .06em; }
.hero__catch { display: block; margin-top: .25em; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 6vw, 104px); line-height: 1.3; letter-spacing: .12em; }
.hero__catch .line { display: inline-block; white-space: nowrap; }
.hero__sub { margin-top: 1.4em; font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .14em; }
.hero__note { margin-top: .5em; font-size: clamp(11px, .8vw, 13px); letter-spacing: .1em; opacity: .8; }
/* 見出しの後ろだけ暗くする楕円の膜（見出しと一緒に動く・縁はぼかして四角に見せない） */
.hero__layer--title::before {
  content: ""; position: absolute; left: 50%; top: calc(50% - 4svh); width: min(1280px, 100vw); height: 72%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(8,12,9,.6), rgba(8,12,9,.4) 50%, rgba(8,12,9,.15) 78%, rgba(8,12,9,0));
}
body.is-ready .hero__copy .line > span { transform: none; }
body.is-ready .hero__en > span { transition-delay: .15s; }
body.is-ready .hero__catch .line:nth-child(1) > span { transition-delay: .3s; }
body.is-ready .hero__catch .line:nth-child(2) > span { transition-delay: .42s; }
body.is-ready .hero__sub > span { transition-delay: .65s; }
body.is-ready .hero__note > span { transition-delay: .75s; }
/* 右下の「Scroll」と縦線は 10/19 撤去 */

/* ================= 節の共通 ================= */
.sec { position: relative; padding: calc(var(--gw) * 1.8) var(--side); display: grid; grid-template-columns: repeat(24, 1fr); column-gap: 0; }
.sec__head { grid-column: 2 / 9; margin-bottom: calc(var(--gw) * 1.2); }
.sec__en { font-size: 1rem; letter-spacing: .03em; color: var(--mute); text-transform: uppercase; display: flex; align-items: center; gap: .8em; }
/* 英字ラベルの前の短い横線は撤去（10/19 本人の指示） */
.sec__ja { margin-top: .4em; font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.5vw, 40px); line-height: 1.6; letter-spacing: .03em; }

.btn {
  display: inline-flex; align-items: center; gap: .8em; padding: .9em 1.8em; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; font-size: .9rem; letter-spacing: .03em;
  transition: background .4s ease, color .4s ease;
}
.btn::after { content: "→"; transition: transform .4s var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.btn:hover { background: var(--green); color: #fff; }
.btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; }

/* ================= INFORMATION（ヒーローの黒い足元から続く暗い面） ================= */
.info { background: var(--ink); color: #e9ece6; --line: rgba(255,255,255,.18); --ink-2: #b9beb5; padding-top: calc(var(--gw) * 2); }
.info .sec__en { color: #9ea39a; }
.info .notice__lead { color: #8fc2a2; }
.info .contact-card:hover { color: #8fc2a2; }
.info .g-tx { color: #e9ece6; }
.info .sec__head { grid-row: 1; }
.notice { grid-column: 10 / 23; grid-row: 1 / 3; }
.notice__title { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2vw, 32px); letter-spacing: .05em; }
.notice__lead { margin-top: 1em; padding: .9em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--green); font-size: 1.05rem; }
.notice__body { margin-top: 2em; display: grid; gap: 1.4em; font-size: 1.05rem; line-height: 2.1; }
.notice__body strong { font-weight: 500; }
/* qino の .g-tx：斜めの濃淡で文字を塗り、スクロールで塗り進める
   10/20 background-clip:text → mask に変更（見た目は同じ。グラデ文字に見えないよう、字の色は単色） */
.g-tx {
  color: var(--ink);
  -webkit-mask-image: linear-gradient(135deg, #000 35%, rgba(0,0,0,.12) 65%); mask-image: linear-gradient(135deg, #000 35%, rgba(0,0,0,.12) 65%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.notice__contact { margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.notice__contact dt { font-weight: 500; }
.notice__contact dd a { text-decoration: none; border-bottom: 1px solid var(--line); }

.contact-row { grid-column: 10 / 25; margin-top: calc(var(--gw) * 1.6); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.contact-card { display: grid; gap: .3em; padding: 1.6em 1.6em 1.6em 0; text-decoration: none; border-bottom: 1px solid var(--line); transition: color .4s ease; }
.contact-card + .contact-card { padding-left: 1.6em; border-left: 1px solid var(--line); }
.contact-card__label { font-size: .9rem; color: var(--ink-2); }
.contact-card__value { font-family: var(--latin); font-style: italic; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.2; letter-spacing: .02em; }
.contact-card__value i { font-style: normal; display: inline-block; transition: transform .4s var(--ease); }
.contact-card:hover { color: var(--green); }
.contact-card:hover i { transform: translateX(6px); }

/* ================= SHOP GUIDE（暗い面） ================= */
.shop { background: var(--ink); color: #e9ece6; --line: rgba(255,255,255,.18); }
.shop .sec__en { color: #9ea39a; }
.shop__grid { grid-column: 2 / 24; display: grid; grid-template-columns: repeat(22, 1fr); align-items: end; }
.shop__img { grid-column: 1 / 13; aspect-ratio: 4 / 3; background: #1d1f22; }
.shop__text { grid-column: 14 / 23; padding-bottom: .5em; }
.shop__brand { font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; color: #9ea39a; line-height: 1.6; }
.shop__brand b { display: block; margin: .15em 0; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(56px, 7vw, 120px); letter-spacing: .02em; line-height: 1; color: #e9ece6; text-transform: none; }
.shop__catch { margin-top: 1.6em; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 28px); }
.shop__note { margin-top: .8em; }
.shop__note a { text-decoration: none; border-bottom: 1px solid var(--line); }
.shop__links { margin-top: 2em; display: flex; flex-wrap: wrap; gap: .8em; }
.shop .btn { background: #e9ece6; color: var(--ink); }
.shop .btn:hover { background: var(--green); color: #fff; }
.shop .btn--ghost { background: transparent; color: #e9ece6; }

.spec { grid-column: 2 / 24; margin-top: calc(var(--gw) * 2); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gw) * 1); }
.spec table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec caption { text-align: left; padding-bottom: .8em; font-size: .85rem; letter-spacing: .1em; color: #9ea39a; }
.spec th, .spec td { text-align: left; padding: .75em 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.spec thead th { font-size: .8rem; letter-spacing: .1em; color: #9ea39a; }
.spec tbody th { font-family: var(--sans); font-weight: 500; letter-spacing: .04em; }
.spec td { text-align: right; }
.spec thead th:last-child { text-align: right; }
.spec__note { margin-top: .8em; font-size: .85rem; color: #9ea39a; }

.cages { grid-column: 1 / 25; margin: calc(var(--gw) * 2) calc(var(--side) * -1) 0; overflow: hidden; }
.cages__track { display: flex; gap: calc(var(--gw) * .5); width: max-content; padding-left: calc(var(--gw) * 3); will-change: translate; }
.cages figure { width: clamp(220px, 22vw, 360px); }
.cages img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f2f3f0; padding: 6%; }
.cages figcaption { margin-top: .7em; font-size: .85rem; letter-spacing: .06em; color: #9ea39a; }

.shop__notes { grid-column: 2 / 14; margin-top: calc(var(--gw) * 2); display: grid; gap: .3em; font-size: .95rem; color: #c9cdc5; }
.shop__apology { grid-column: 2 / 18; margin-top: 1.4em; font-size: .95rem; color: #c9cdc5; }

/* ================= ベーレンパイソン ================= */
/* 10/19 夜：boelen → Payment の間が空きすぎ（450px）と本人。下の余白と Payment の上を詰めて約 210px に */
.boelen { padding-top: calc(var(--gw) * 2); padding-bottom: calc(var(--gw) * 1.5); align-items: center; }
.boelen__imgs { grid-column: 1 / 16; position: relative; margin-left: calc(var(--side) * -1); }
.boelen__a { aspect-ratio: 16 / 10; }
.boelen__b { position: absolute; width: 36%; aspect-ratio: 3 / 4; right: -9%; bottom: -18%; box-shadow: 0 0 0 10px var(--bg); }
.boelen__text { grid-column: 18 / 24; padding-left: calc(var(--gw) * .5); }
.boelen__title { margin-top: .4em; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(44px, 5vw, 86px); line-height: 1; letter-spacing: .01em; }
.boelen__sub { margin-top: .6em; font-family: var(--latin); font-style: italic; font-size: clamp(18px, 1.6vw, 26px); color: var(--green); }
.boelen__lead { margin: 1.6em 0 2em; font-size: 1.05rem; line-height: 2; }

/* ================= お支払い ================= */
.pay { padding-top: calc(var(--gw) * 2); }
/* 使用可能カード：カードの形の札（10/19 夜）。マウスで少し傾き、光が走る（main.js の .pcard） */
.pay__cards { grid-column: 10 / 25; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 22px); perspective: 900px; }
.pcard { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 1.586; border-radius: 14px; padding: 9% 9% 8%; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 14px 30px -12px rgba(19,20,23,.45); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover { box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 28px 50px -16px rgba(19,20,23,.55); }
.pcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.28), transparent 45%); opacity: 0; transition: opacity .4s; }
.pcard:hover::before { opacity: 1; }
.pcard::after { content: ""; position: absolute; right: -30%; top: -60%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.pcard__chip { width: 17%; aspect-ratio: 1.3; border-radius: 4px; background: linear-gradient(135deg, #e9d9a6, #b89a52 60%, #e2cf92); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pcard__brand { position: absolute; right: 9%; top: 9%; font-family: "IBM Plex Sans", var(--sans); line-height: 1; }
.pcard__name { position: relative; z-index: 1; font-size: clamp(10px, .78vw, 12.5px); letter-spacing: .14em; opacity: .9; font-variant-numeric: tabular-nums; }
.pcard--visa { background: linear-gradient(135deg, #1c2a7a, #0f1650); }
.pcard--visa .pcard__brand { font-size: clamp(20px, 1.9vw, 30px); font-weight: 600; font-style: italic; letter-spacing: .02em; }
.pcard--master { background: linear-gradient(135deg, #2b2d33, #131417); }
.pcard--master .pcard__brand { display: flex; }
.pcard--master .pcard__brand i { width: clamp(22px, 2.1vw, 34px); aspect-ratio: 1; border-radius: 50%; background: #eb001b; }
.pcard--master .pcard__brand i + i { margin-left: calc(clamp(22px, 2.1vw, 34px) * -.42); background: #f79e1b; mix-blend-mode: screen; opacity: .95; }
.pcard--id { background: linear-gradient(135deg, #3a3d44, #1d1f24); }
.pcard--id .pcard__brand { font-size: clamp(24px, 2.3vw, 36px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.pcard--paypal { background: linear-gradient(135deg, #0a72c9, #003087); }
.pcard--paypal .pcard__brand { font-size: clamp(16px, 1.5vw, 23px); font-weight: 700; font-style: italic; color: #8fd3ff; }
.pcard--paypal .pcard__brand b { color: #fff; font-weight: 700; }
.pay__note { grid-column: 10 / 25; margin-top: 1.6em; font-size: .9rem; color: var(--ink-2); display: flex; align-items: center; gap: .9em; flex-wrap: wrap; }
.pay__tag { font-family: "IBM Plex Sans", var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .08em; padding: .35em .8em; border-radius: 999px; background: #003087; color: #fff; }

/* ================= フッター ================= */
.ft { background: var(--ink); color: #e9ece6; padding: calc(var(--gw) * 2) var(--side) calc(var(--gw) * .8); --line: rgba(255,255,255,.18); }
.ft__big { font-family: var(--latin); font-style: italic; font-size: 13.4vw; line-height: .95; letter-spacing: -.015em; white-space: nowrap; margin-left: -.04em; }
.ft__cols { margin-top: calc(var(--gw) * 1); padding-top: 1.6em; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 2em; flex-wrap: wrap; }
.ft address { font-style: normal; line-height: 2; }
.ft address a, .ft__links a { text-decoration: none; border-bottom: 1px solid var(--line); }
.ft__links { display: flex; gap: 1.8em; flex-wrap: wrap; align-items: flex-start; }
.ft__small { margin-top: .4em; font-size: .78rem; color: #9ea39a; }
.ft__small:first-of-type { margin-top: calc(var(--gw) * .8); }

/* ================= スマホ・タブレット ================= */
@media (max-width: 1024px) {
  .hero__catch { font-size: clamp(28px, 8.4vw, 64px); letter-spacing: .06em; }
  .hero__catch .line { display: block; }
  .hero__sub { letter-spacing: .06em; }
  /* 狭い画面は字が細く小さいので、膜を濃く広く */
  .hero__layer--title::before { width: 150vw; height: 62%; background: radial-gradient(closest-side, rgba(8,12,9,.72), rgba(8,12,9,.55) 55%, rgba(8,12,9,.2) 82%, rgba(8,12,9,0)); }
  .sec { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; }
  .sec__head, .notice, .contact-row, .shop__grid, .spec, .shop__notes, .shop__apology, .pay__cards, .pay__note, .boelen__imgs, .boelen__text, .cages { grid-column: 1; grid-row: auto; }
  .contact-row { grid-template-columns: 1fr; }
  .contact-card + .contact-card { padding-left: 0; border-left: 0; }
  .shop__grid { grid-template-columns: 1fr; gap: 32px; }
  .shop__img, .shop__text { grid-column: 1; }
  .spec { grid-template-columns: 1fr; gap: 40px; }
  .cages { margin-left: calc(var(--side) * -1); margin-right: calc(var(--side) * -1); }
  .cages__track { padding-left: var(--side); }
  .boelen__imgs { margin-right: 0; width: 88%; }
  .boelen__b { width: 44%; right: -14%; bottom: -14%; }
  .boelen__text { margin-top: 90px; }
  .boelen { padding-bottom: 56px; }
  .pay { padding-top: 64px; }
  .pay__cards { grid-template-columns: 1fr 1fr; }
  .pcard__name { font-size: 11px; }
  .ft__big { font-size: 15.5vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__copy .line > span { transform: none; }
  .g-tx { -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important; }
}

/* =====================================================================
   下層ページ（10/19 夜）— qino.jp の下層の作り
   ・明るい頭（.lp）：qino の特商法ページ（左寄りの本文列・2行の大きな英字・番号つきの項目・右に目次）
   ・ヘッダーのロゴの右にページ名（qino の .sub-pagename）
   ===================================================================== */
.hd__page { font-size: .78rem; letter-spacing: .04em; white-space: nowrap; opacity: .85; margin-left: 1.4em; }
@media (max-width: 1100px) { .hd__page { display: none; } }


/* ---------- 明るい頭（qino：本文列 x=287/1705・幅 717・英字 87px） ---------- */
.lp { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); padding: max(200px, calc(var(--gw) * 3.6)) var(--side) calc(var(--gw) * 3); }
.lp__main { grid-column: 4 / 15; }
.lp__aside { grid-column: 18 / 24; align-self: start; }
.lp__title { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(52px, 5.6vw, 100px); line-height: 1.04; letter-spacing: .005em; }
.lp__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.lp__title .line > span { display: inline-block; transform: translateY(110%) rotate(8deg); transform-origin: left top; transition: transform .9s var(--ease); }
body.is-ready .lp__title .line > span { transform: none; transition-delay: .3s; }
body.is-ready .lp__title .line + .line > span { transition-delay: .42s; }
.lp__sub { margin-top: 1.2em; padding-bottom: calc(var(--gw) * 1); border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(17px, 1.4vw, 22px); letter-spacing: .08em; }
.lp__lead { margin-top: 2em; line-height: 2.1; }

/* 番号つきの項目 */
.lp-item { padding: 2.6em 0 0; }
.lp-item__h { display: flex; align-items: baseline; gap: 1em; font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 1.35vw, 22px); letter-spacing: .06em; }
.lp-item__h small { font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; color: var(--mute); font-weight: 400; }
.lp-item__b { margin-top: 1em; line-height: 2; }
.lp-item__b a { text-decoration: none; border-bottom: 1px solid var(--line); }

/* 右の目次（qino：右下に小さい番号つき一覧） */
.toc { font-size: .78rem; line-height: 1.9; }
.toc__h { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: .8em; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; display: flex; gap: .9em; }
.toc li::before { content: counter(toc); width: 1.4em; color: var(--mute); font-variant-numeric: tabular-nums; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.dark .toc__h, .dark .toc li::before { color: #9ea39a; }

/* ---------- 品物の並び（本・フード） ---------- */
.goods { padding: 2.8em 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: calc(var(--gw) * .8); align-items: start; }
.goods:first-of-type { margin-top: 2em; border-top: 1px solid var(--line); }
.goods__img { background: var(--bg2); padding: 14px; }
.goods__img img { width: 100%; height: auto; margin: 0 auto; box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }
.goods__cat { font-size: .78rem; letter-spacing: .1em; color: var(--mute); }
.goods__h { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.6vw, 26px); letter-spacing: .05em; line-height: 1.6; }
.goods__en { margin-top: .2em; font-family: var(--latin); font-style: italic; font-size: 1.15rem; color: var(--ink-2); }
.goods__tx { margin-top: 1.1em; line-height: 2; }
.goods__spec { margin-top: 1.4em; display: grid; grid-template-columns: max-content 1fr; column-gap: 1.6em; font-size: .88rem; border-top: 1px solid var(--line); }
.goods__spec dt, .goods__spec dd { padding: .45em 0; border-bottom: 1px solid var(--line); }
.goods__spec dt { color: var(--mute); }
.goods__price { margin-top: 1.2em; font-family: var(--latin); font-style: italic; font-size: clamp(26px, 2.2vw, 36px); line-height: 1; }
.goods__price small { font-family: var(--sans); font-style: normal; font-size: .8rem; color: var(--mute); margin-right: .6em; letter-spacing: .1em; }

/* ---------- 読み物（About MORELIA の一覧） ---------- */
.rows { grid-column: 2 / 24; border-top: 1px solid var(--line); counter-reset: row; }
.row { counter-increment: row; display: grid; grid-template-columns: 4em 1.1fr 1fr 2em; gap: 1.6em; align-items: baseline; padding: 2em 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: color .4s ease, padding .6s var(--ease); }
.row::before { content: counter(row, decimal-leading-zero); font-size: .8rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.row__en { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.15; }
.row__en small { display: block; margin-top: .25em; font-size: .5em; color: var(--ink-2); }
.row__ja { font-size: .95rem; line-height: 1.9; color: var(--ink-2); }
.row__go { justify-self: end; transition: transform .5s var(--ease); }
.row:hover { color: var(--green); padding-left: .8em; }
.row:hover .row__go { transform: translateX(6px); }

/* ---------- Snugle Cage ---------- */
.sc-intro { align-items: center; }
.sc-intro__img { grid-column: 1 / 13; margin-left: calc(var(--side) * -1); aspect-ratio: 780 / 420; }
.sc-intro__img img { object-fit: cover; }
.sc-intro__tx { grid-column: 14 / 23; }
.sc-intro__tx p + p { margin-top: 1.2em; }
.sc-intro__tx a { text-decoration: none; border-bottom: 1px solid var(--line); }
.sc-wide { grid-column: 2 / 24; }
.sc-h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em 1em; margin: calc(var(--gw) * 1.3) 0 1.2em; padding-bottom: .8em; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .05em; }
.sc-h3 small { font-family: var(--sans); font-size: .78rem; color: var(--mute); letter-spacing: .04em; font-weight: 400; }
.sc-h3:first-child { margin-top: 0; }
/* 10/20 Ivan：品番の見かたの開閉（見出しはそのまま・右に＋→−） */
.snacc > summary { cursor: pointer; list-style: none; }
.snacc > summary::-webkit-details-marker { display: none; }
.snacc__ic { position: relative; flex: none; width: 34px; height: 34px; margin-left: auto; align-self: center; border: 1px solid var(--line); border-radius: 50%; transition: background .3s, border-color .3s; }
.snacc__ic::before, .snacc__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .4s var(--ease); }
.snacc__ic::after { transform: rotate(90deg); }
.snacc[open]:not(.is-closing) .snacc__ic::after { transform: rotate(0deg); }
/* 10/20 夜 Ivan：上との間を広げ、開閉できると分かるように（右に「一覧をひらく」＋丸の＋・見出しの帯ごと押せる） */
.snacc { margin-top: calc(var(--gw) * 2.2); }
.snacc > summary.sc-h3 { margin-top: 0; padding: 1em 0; border-top: 1px solid var(--line); transition: background .3s; }
.snacc__btn { display: inline-flex; align-items: center; gap: .8em; margin-left: auto; align-self: center; font-family: var(--sans); font-size: .82rem; letter-spacing: .06em; color: var(--ink-2); }
.snacc__lb::after { content: attr(data-closed); }
.snacc[open]:not(.is-closing) .snacc__lb::after { content: attr(data-open); }
.snacc .snacc__ic { margin-left: 0; width: 40px; height: 40px; background: var(--ink); border-color: var(--ink); color: #e9ece6; }
.snacc[open]:not(.is-closing) .snacc__ic { background: transparent; color: var(--ink); border-color: var(--line); }
.snacc > summary:hover .snacc__btn, .snacc > summary:focus-visible .snacc__btn { color: var(--ink); }
.snacc > summary:hover .snacc__ic { transform: scale(1.06); }
.snacc .snacc__ic { transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
@media (max-width: 600px) { .snacc__lb { display: none; } }
@keyframes snacc-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.snacc .sntypes tr[data-reveal] { opacity: 1; transform: none; }
.types { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.types > div { padding: 1.4em 1.4em 1.4em 0; border-bottom: 1px solid var(--line); }
.types > div:not(:nth-child(3n+1)) { padding-left: 1.4em; border-left: 1px solid var(--line); }
.types dt { font-weight: 500; letter-spacing: .03em; }
.types dt b { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 1.9rem; margin-right: .3em; }
.types dt i { font-family: var(--latin); font-size: 1.05rem; color: var(--ink-2); }
.types dd { margin-top: .5em; font-size: .9rem; line-height: 1.85; color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: calc(var(--gw) * .6) calc(var(--gw) * .4); }
.card a { display: block; text-decoration: none; }
.card__img { background: #f2f3f0; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 8%; overflow: hidden; }
.card__img img { max-height: 100%; width: auto; transition: transform .8s var(--ease); }
.card a:hover .card__img img { transform: scale(1.05); }
.card__name { margin-top: .8em; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-weight: 500; letter-spacing: .04em; }
.card__name em { font-style: normal; font-size: .62rem; letter-spacing: .14em; color: var(--green); border: 1px solid currentColor; border-radius: 999px; padding: .1em .7em; }
.card__size { margin-top: .2em; font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.card__note { margin-top: .2em; font-size: .8rem; color: var(--mute); }
.card__price { margin-top: .3em; font-family: var(--latin); font-style: italic; font-size: 1.6rem; line-height: 1.2; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: left; padding: .8em 1em .8em 0; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: top; }
.tbl thead th { font-size: .75rem; letter-spacing: .1em; color: var(--mute); border-bottom-color: var(--ink); }
.tbl tbody th { font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl a { text-decoration: none; border-bottom: 1px solid var(--line); }
.tbl-note { margin-top: 1.2em; font-size: .88rem; line-height: 1.9; }
.ped { display: grid; grid-template-columns: 200px 1fr; gap: calc(var(--gw) * .6); align-items: start; }
.ped .card__img { aspect-ratio: 2 / 1; padding: 4%; }
.details { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--gw) * .5) calc(var(--gw) * .35); }
.details a { display: block; text-decoration: none; }
.details .px { aspect-ratio: 1; }
.details figcaption { margin-top: .7em; font-size: .85rem; line-height: 1.7; }
.details figcaption small { display: block; margin-top: .2em; color: var(--ink-2); font-size: .78rem; }

/* 写真の拡大の窓 */
.lb { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 92vh; overflow: visible; color: #f2f4ef; }
.lb::backdrop { background: rgba(10,11,12,.86); }
.lb img { max-width: 100%; max-height: 82vh; margin: 0 auto; }
.lb figcaption { margin-top: .9em; font-size: .9rem; text-align: center; }
.lb__close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: none; cursor: pointer; }
.lb__close::before, .lb__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.lb__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- ベーレンパイソンの読み物 ---------- */
.art { grid-column: 9 / 23; }
.art-aside { grid-column: 2 / 7; align-self: start; }
.art-names { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.6em; border-top: 1px solid var(--line); }
.art-names dt, .art-names dd { padding: .8em 0; border-bottom: 1px solid var(--line); }
.art-names dt { font-size: .8rem; letter-spacing: .1em; color: var(--mute); }
.art-names i { font-family: var(--latin); font-size: 1.2em; }
.art h2 { margin: calc(var(--gw) * 2) 0 .2em; display: flex; flex-direction: column; gap: .3em; font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 38px); letter-spacing: .06em; line-height: 1.5; }
.art h2 small { font-family: var(--sans); font-size: .9rem; font-weight: 400; color: var(--mute); letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; gap: .8em; }
.art h2 small::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.art h3 { margin: 2.4em 0 .8em; padding-bottom: .6em; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .05em; }
.art p { line-height: 2.1; }
.art p + p { margin-top: 1.1em; }
.art figure + p, .art p + .figs, .art p + figure, .art .figs + p { margin-top: 1.6em; }
.figs { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 12px; }
.figs a { display: block; text-decoration: none; }
.figs .px { aspect-ratio: var(--ar, 4 / 3); }
.figs figcaption { margin-top: .5em; font-size: .78rem; color: var(--ink-2); line-height: 1.6; }
.art-temp { margin-top: 1.4em; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.art-temp div { padding: 1em 1em 1em 0; border-bottom: 1px solid var(--line); }
.art-temp div + div { padding-left: 1em; border-left: 1px solid var(--line); }
.art-temp dt { font-size: .78rem; color: var(--mute); }
.art-temp dd { font-family: var(--latin); font-style: italic; font-size: 1.8rem; line-height: 1.3; }
.myth { margin-top: 1.4em; border-top: 1px solid var(--line); }
.myth > div { padding: 1.6em 0; border-bottom: 1px solid var(--line); }
.myth dt { display: flex; align-items: center; gap: .8em; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; letter-spacing: .05em; }
.myth dt::before { content: "×"; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid currentColor; font-family: var(--sans); font-size: .85rem; color: #b04a3a; }
.myth dd { margin-top: .8em; line-height: 2.05; }
.myth dd p + p { margin-top: .9em; }
.steps { margin-top: 1.2em; counter-reset: st; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 2.4em 1fr; padding: 1em 0; border-bottom: 1px solid var(--line); line-height: 1.95; }
.steps li::before { content: counter(st); font-family: var(--latin); font-style: italic; font-size: 1.4rem; line-height: 1.4; color: var(--green); }
.sign { margin-top: calc(var(--gw) * 1.6); text-align: right; font-family: var(--latin); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--ink-2); }

/* 下層の終わりのお問い合わせ帯（トップの .contact-row と同じ部品） */
.page-cta { background: var(--ink); color: #e9ece6; --line: rgba(255,255,255,.18); --ink-2: #b9beb5; }
.page-cta .sec__en { color: #9ea39a; }
.page-cta .contact-card:hover { color: #8fc2a2; }

@media (max-width: 1024px) {
  .lp { grid-template-columns: 1fr; padding-top: 150px; }
  .lp__main, .lp__aside, .rows, .sc-intro__img, .sc-intro__tx, .sc-wide, .art, .art-aside { grid-column: 1; }
  .lp__aside, .art-aside { display: none; }
  .goods { grid-template-columns: 110px 1fr; gap: 20px; }
  .goods__img { padding: 8px; }
  .row { grid-template-columns: 2.6em 1fr 1.4em; gap: .4em 1em; }
  .row__ja { grid-column: 2 / 3; }
  .row__go { grid-row: 1; grid-column: 3; }
  .sc-intro__img { margin: 0 calc(var(--side) * -1) 32px; }
  .types { grid-template-columns: 1fr; }
  .types > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .ped { grid-template-columns: 1fr; }
  .details { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .art h2 { margin-top: 72px; }
  .figs { grid-template-columns: repeat(min(var(--n, 2), 2), 1fr); }
  .art-temp { grid-template-columns: 1fr; }
  .art-temp div + div { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .goods { grid-template-columns: 1fr; }
  .goods__img { width: 150px; }
}

/* 暗い頭のすぐ下の面（頭の足元が黒に溶けるので、続く面も黒にする。トップの INFORMATION と同じ） */
.sec--dark { background: var(--ink); color: #e9ece6; --line: rgba(255,255,255,.18); --ink-2: #b9beb5; --mute: #9ea39a; padding-top: calc(var(--gw) * 2); }
.sec--dark .sec__en { color: #9ea39a; }
.sec--dark .btn { background: #e9ece6; color: var(--ink); }
.sec--dark .btn:hover { background: var(--green); color: #fff; }
.sec--dark .card__img, .sec--dark .px { background: #1d1f22; }
.sec--dark .row:hover { color: #8fc2a2; }
.sc-wide, .art, .lp__main, .rows, .sc-intro__tx { min-width: 0; }
.details__img { aspect-ratio: 1; padding: 6%; background: #fff; }
.details__img img { max-width: 100%; object-fit: contain; }
.rows-lead { grid-column: 10 / 23; margin-top: 0; }
.rows-lead + .rows { margin-top: calc(var(--gw) * 1.6); }
@media (max-width: 1024px) {
  .rows-lead { grid-column: 1; }
  .rows-lead + .rows { margin-top: 40px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .card__price { font-size: 1.35rem; }
}

/* =====================================================================
   下層の作り直し（10/19 夜・「パララックスはトップだけ」）
   参考：qino.jp/projects（全面の札）・qino.jp/projects/qino-restaurant（頭・要約・全面写真・互い違いの写真）
   ===================================================================== */
/* ---------- 写真の頭（qino-restaurant：100vh・暗い膜・題はまん中・Inter の細字で字間を広く） ---------- */
.pv { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); color: #fff; display: grid; place-items: center; }
.pv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease); }
body.is-ready .pv__img { transform: none; }
.pv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(12,16,22,.42); }
.pv__title { position: relative; z-index: 2; padding: 0 var(--side); text-align: center; font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: clamp(34px, 5.2vw, 84px); letter-spacing: .2em; line-height: 1.2; text-shadow: 0 1px 24px rgba(0,0,0,.25); }
.pv__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.pv__title .line > span { display: inline-block; opacity: 0; transform: translateY(40%); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
body.is-ready .pv__title .line > span { opacity: 1; transform: none; transition-delay: .3s; }

/* ---------- 要約（qino-restaurant：左に小さめの写真・右に名前＋明朝の見出し＋本文） ---------- */
.sum { align-items: start; padding-top: calc(var(--gw) * 1.8); }
.sum__img { grid-column: 3 / 9; }
.sum__img img { width: 100%; height: auto; }
.sum__tx { grid-column: 12 / 22; }
.sum__name { font-size: .78rem; letter-spacing: .06em; color: var(--ink-2); }
.sum__h { margin-top: 1em; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.1vw, 36px); line-height: 1.6; letter-spacing: .05em; }
.sum__body { margin-top: 2em; display: grid; gap: 1.2em; line-height: 2.1; }
.sum__body a { text-decoration: none; border-bottom: 1px solid var(--line); }

/* ---------- 全面の写真（qino-restaurant の .fullscreen-img。動かさない） ---------- */
.fs-img { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: var(--ink); }
.fs-img img { width: 100%; height: 100%; object-fit: cover; }
.fs-img figcaption { position: absolute; left: var(--side); bottom: min(var(--gw), 40px); font-size: .78rem; color: #f2f4ef; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---------- 互い違いの写真（qino-restaurant の MENU：2列・右の列を下げる・番号つきの説明） ---------- */
.stag { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--gw) * 2.4); row-gap: calc(var(--gw) * 1.6); padding-bottom: calc(var(--gw) * 1.6); counter-reset: stag; }
.stag > figure { counter-increment: stag; }
.stag > figure:nth-child(even) { translate: 0 calc(var(--gw) * 1.4); }
.stag a { display: block; text-decoration: none; }
.stag .ph { background: #fff; }
.stag .ph img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.stag a:hover .ph img { transform: scale(1.03); }
.stag figcaption { margin-top: 1.1em; display: grid; grid-template-columns: 3.2em 1fr; font-size: .88rem; line-height: 1.8; }
.stag figcaption::before { content: counter(stag, decimal-leading-zero); color: var(--mute); font-size: .78rem; padding-top: .1em; }
.stag figcaption small { grid-column: 2; margin-top: .2em; color: var(--ink-2); font-size: .8rem; }
.ph { overflow: hidden; }

/* ---------- 全面の札の一覧（qino projects：1枚 100vh・左下に 01/06＋一言、その下に大きな題・右下に View の丸） ---------- */
.pj { position: relative; display: block; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); color: #fff; text-decoration: none; }
.pj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.pj::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(12,16,22,.25), rgba(12,16,22,.25) 45%, rgba(12,16,22,.7)); }
.pj:hover img { transform: scale(1.03); }
.pj__body { position: absolute; z-index: 2; left: var(--side); right: calc(var(--side) + var(--gw) + clamp(110px, 10vw, 160px) + 24px); bottom: min(var(--gw), 56px); }
.pj__meta { display: flex; gap: 1.6em; align-items: baseline; font-size: .82rem; letter-spacing: .04em; }
.pj__num { font-size: .72rem; letter-spacing: .1em; opacity: .85; white-space: nowrap; }
.pj__title { margin-top: .35em; font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: clamp(42px, 6.4vw, 112px); line-height: 1.12; letter-spacing: .01em; }
.pj__view { position: absolute; z-index: 2; right: calc(var(--side) + var(--gw)); bottom: calc(min(var(--gw), 56px) + 1em); width: clamp(110px, 10vw, 160px); aspect-ratio: 1; border-radius: 50%; background: rgba(19,20,23,.82); display: grid; place-items: center; font-size: .82rem; transition: transform .6s var(--ease), background .4s ease; }
.pj__view span { border-bottom: 1px solid currentColor; }
.pj:hover .pj__view { transform: scale(1.08); background: var(--green); }
.pj-intro { padding: max(170px, calc(var(--gw) * 3)) var(--side) calc(var(--gw) * 1.6); display: grid; grid-template-columns: repeat(24, 1fr); }
.pj-intro .lp__title { grid-column: 2 / 14; }
.pj-intro p { grid-column: 15 / 23; align-self: end; line-height: 2.1; }

@media (max-width: 1024px) {
  .sum { grid-template-columns: 1fr; padding-top: 80px; }
  .sum__img, .sum__tx { grid-column: 1; }
  .sum__img { width: 64%; margin-bottom: 36px; }
  .stag { column-gap: 14px; row-gap: 32px; }
  .stag > figure:nth-child(even) { translate: 0 48px; }
  .stag figcaption { grid-template-columns: 2.4em 1fr; font-size: .8rem; }
  .pj__body { right: var(--side); bottom: 40px; }
  .pj__meta { flex-direction: column; gap: .3em; }
  .pj__title { font-size: clamp(32px, 8.6vw, 56px); }
  .pj__view { width: 84px; right: var(--side); top: calc(96px + 2vh); bottom: auto; font-size: .72rem; }
  .pj-intro { grid-template-columns: 1fr; padding-top: 140px; }
  .pj-intro .lp__title, .pj-intro p { grid-column: 1; }
  .pj-intro p { margin-top: 1.4em; }
}
/* 番号を写真ごとの ＊ に任せる版（ベーレンの成長の写真） */
.stag--plain { padding-bottom: calc(var(--gw) * 2); margin-top: 1.6em; column-gap: calc(var(--gw) * .8); row-gap: calc(var(--gw) * .8); }
.stag--plain figcaption { display: block; }
.stag--plain figcaption::before { content: none; }
.stag--plain > figure:nth-child(even) { translate: 0 calc(var(--gw) * 1.6); }
.figs .ph { aspect-ratio: var(--ar, 4 / 3); }
.figs .ph img { width: 100%; height: 100%; object-fit: cover; }
.sum .art-names { margin-top: .4em; }

/* ---------- About MORELIA の作り直し（10/19 夜） ----------
   写真は旧サイトの白抜きの物撮りが多いので、全部同じ処理（少し落とす＋左下を暗く）でそろえる */
.pj img { filter: saturate(.9) contrast(1.05) brightness(.78); }
.pj::before { background: linear-gradient(rgba(10,13,11,.5), rgba(10,13,11,0) 22%), linear-gradient(90deg, rgba(10,13,11,.55), rgba(10,13,11,.1) 60%), linear-gradient(rgba(10,13,11,0) 40%, rgba(10,13,11,.75)); }
.pj__body[data-reveal] { transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.pj__body[data-reveal].is-in { transform: none; }
.pj__meta span:last-child { max-width: 34em; }
/* 右の目次：札の上にだけ出る（main.js で .is-on）・今いる札は .is-cur */
.pj-index { position: fixed; z-index: 40; right: var(--side); top: 50%; translate: 0 -50%; color: #f2f4ef; font-size: .8rem; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity .6s ease; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pj-index.is-on { opacity: 1; pointer-events: auto; }
.pj-index__h { font-family: var(--latin); font-style: italic; font-size: 1.05rem; margin-bottom: .9em; }
.pj-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.pj-index a { display: flex; gap: .9em; text-decoration: none; opacity: .45; transition: opacity .4s ease; }
.pj-index a span { width: 1.8em; font-variant-numeric: tabular-nums; }
.pj-index a:hover, .pj-index a.is-cur { opacity: 1; }
.pj-index a.is-cur span::after { content: ""; display: inline-block; width: 14px; height: 1px; margin-left: 6px; vertical-align: middle; background: currentColor; }
.page-morelia .pj__body { right: calc(var(--side) + 260px); }
.page-morelia .pj__view { right: calc(var(--side) + 260px - 160px); }
@media (max-width: 1024px) {
  .pj-index { display: none; }
  .page-morelia .pj__body { right: var(--side); }
  .page-morelia .pj__view { right: var(--side); }
}

/* ---------- About us（10/19 夜・qino.jp/about の要約の組み） ---------- */
.au-head { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; min-height: 100svh; padding: max(190px, calc(var(--gw) * 3.4)) var(--side) calc(var(--gw) * 2.2); background: #0d0f0c; color: #fff; overflow: hidden; }
.au-head__bg { position: absolute; inset: 0; z-index: -1; margin: 0; }
.au-head__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* 写真は 800px しかないので、左下の文字側を濃くして粗さを目立たせない */
.au-head__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,8,.78) 0%, rgba(8,10,8,.45) 45%, rgba(8,10,8,.15) 100%), linear-gradient(0deg, rgba(8,10,8,.6) 0%, rgba(8,10,8,0) 55%); }
.au-head__tx { grid-column: 2 / 14; padding-bottom: calc(var(--gw) * .6); }
.au-head .lp__title { margin-top: .2em; font-size: clamp(64px, 8vw, 140px); }
.au-head__catch { margin-top: .9em; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 36px); letter-spacing: .12em; }
.au-head__lead { margin-top: 1.4em; line-height: 2; color: rgba(255,255,255,.82); }

.au-story { padding-bottom: calc(var(--gw) * 1.8); }
.au-time { grid-column: 10 / 23; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: none; }
.au-time li { display: grid; grid-template-columns: 9em 1fr; gap: 1.6em; padding: 1.8em 0; border-bottom: 1px solid var(--line); line-height: 2; }
.au-time__y { font-family: var(--latin); font-style: italic; font-size: clamp(22px, 2vw, 32px); line-height: 1.3; color: #8fc2a2; }
.au-time b { font-weight: 500; }
.au-quote { grid-column: 1 / -1; justify-self: center; max-width: 34em; margin: calc(var(--gw) * 1.6) auto 0; text-align: center; } /* 10/20 Ivan：引用だけ頁のまん中 */
.au-quote p { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 30px); line-height: 1.9; letter-spacing: .06em; }
.au-quote .btn { margin-top: 2em; }

.au-strip { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 8px; background: var(--ink); padding: 0 0 8px; }
.au-strip .ph { aspect-ratio: 4 / 5; }
.au-strip .ph:nth-child(2) { aspect-ratio: auto; }
.au-strip img { width: 100%; height: 100%; object-fit: cover; }

.au-info .sec__head { grid-row: 1; }
.au-info__sub { margin-top: .5em; font-size: .92rem; letter-spacing: .04em; color: var(--ink-2); } /* 10/20 Ivan：題は短く「事業者情報」、法令名は副題に残す */
.au-dl { grid-column: 10 / 23; grid-row: 1 / 3; margin: 0; border-top: 1px solid var(--line); }
.au-dl > div { display: grid; grid-template-columns: 15em 1fr; gap: 1.4em; padding: 1.4em 0; border-bottom: 1px solid var(--line); }
.au-dl dt { display: flex; gap: 1em; align-items: baseline; color: var(--ink-2); font-size: .92rem; }
.au-dl dt small { font-size: .72rem; color: var(--mute); }
.au-dl dd { margin: 0; line-height: 1.9; }
.au-dl dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
.au-dl__en { margin-left: 1em; font-family: var(--latin); font-style: italic; color: var(--ink-2); }

.au-map { padding-top: 0; align-items: center; }
.au-map__tx { grid-column: 2 / 9; align-self: start; } /* 10/20 Ivan：上から始めてスクロールについてくる（data-pin） */
.au-map address { margin-top: 1.4em; font-style: normal; font-size: 1.1rem; line-height: 2; }
.au-map__note { margin-top: 1.2em; font-size: .85rem; line-height: 1.9; color: var(--ink-2); }
.au-map .btn { margin-top: 2em; }
.au-map__frame { grid-column: 10 / 25; margin-right: calc(var(--side) * -1); position: relative; aspect-ratio: 16 / 10; background: var(--bg2); overflow: hidden; }
/* 地図は地の色に寄せる（白黒＋少し緑）。触れると元の色 */
.au-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.95) brightness(1.02) sepia(.18) hue-rotate(50deg); transition: filter .6s ease; }
.au-map__frame:hover iframe { filter: none; }

@media (max-width: 1024px) {
  .au-head { grid-template-columns: 1fr; padding-top: 140px; min-height: 88svh; }
  .au-head__tx { grid-column: 1; }
  .au-head__bg img { object-position: 60% 50%; }
  .au-time, .au-quote, .au-dl, .au-map__tx, .au-map__frame { grid-column: 1; grid-row: auto; }
  .au-time li { grid-template-columns: 1fr; gap: .3em; }
  .au-strip { grid-template-columns: 1fr 1fr; }
  .au-strip .ph:nth-child(2) { aspect-ratio: 4 / 5; }
  .au-dl > div { grid-template-columns: 1fr; gap: .3em; }
  .au-map__frame { margin: 32px calc(var(--side) * -1) 0; aspect-ratio: 4 / 5; }
}

/* ---------- About MORELIA の記事（10/19 夜・旧サイトの6本の記事を作り直し） ----------
   旧サイトの写真は 340〜700px と小さいので、切り取らずに元の比率のまま並べる（.gal）。
   説明が2枚にまたがるもの（旧ページの colspan=2）は .gal__cap で列いっぱいに置く */
.gal { margin-top: 1.6em; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 14px 12px; align-items: start; }
.gal + .gal { margin-top: 28px; }
.gal a { display: block; text-decoration: none; }
.gal .ph { background: #fff; }
.gal img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.gal a:hover img { transform: scale(1.03); }
.gal figcaption, .gal__cap { margin-top: .55em; font-size: .82rem; line-height: 1.75; color: var(--ink-2); }
.gal__cap { grid-column: 1 / -1; margin-top: -.2em; }
/* 旧ページで1枚だけの行：拡大しすぎないよう元の幅まで */
.gal__wide { grid-column: 1 / -1; }
.gal__wide .ph { width: fit-content; max-width: 100%; }
.gal__wide img { width: auto; max-width: 100%; }
.art .gal + p, .lp__lead + .gal, .gal + .lp__lead { margin-top: 1.6em; }
.art p a, .lp__lead a { text-decoration: none; border-bottom: 1px solid var(--line); }
/* 写真のない記事の要約（分類の頁）：本文の列にそろえる */
.sum--noimg .sum__tx { grid-column: 9 / 23; }
/* 箇条（デザイナーズモルフの種類） */
.art-list { margin-top: 1.2em; border-top: 1px solid var(--line); }
.art-list li { padding: .7em 0; border-bottom: 1px solid var(--line); font-family: var(--latin); font-size: 1.15rem; }
/* Type の一覧：写真を枠いっぱいに */
.cards--photo .card__img { padding: 0; background: var(--ink); }
.cards--photo .card__img img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.cards--photo .card__name { font-family: var(--latin); font-style: italic; font-size: 1.3rem; font-weight: 500; letter-spacing: .01em; }
/* 目次の今いる頁 */
.toc a[aria-current="page"] { font-weight: 500; text-decoration: underline; text-underline-offset: .3em; }
/* 記事の終わり：前の記事／About MORELIA／次の記事 */
.art-nav { grid-column: 2 / 24; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.6em; padding: 2em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.art-nav a { text-decoration: none; transition: color .4s ease; }
.art-nav a:hover { color: var(--green); }
.art-nav__prev, .art-nav__next { display: flex; flex-direction: column; gap: .3em; font-family: var(--latin); font-style: italic; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.25; }
.art-nav__next { text-align: right; }
.art-nav small { font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.art-nav__up { font-size: .85rem; letter-spacing: .06em; padding: .8em 1.6em; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.sec--nav { padding-top: 0; }
.lp__lead p + p { margin-top: 1.1em; }
.lp__main > .gal { margin-top: 2em; }
/* バナナの頁の「The dream again!!」（旧ページは画像の文字） */
.dream { margin-top: 1.4em; font-family: var(--latin); font-style: italic; font-size: clamp(24px, 2.2vw, 34px); color: var(--ink-2); }
@media (max-width: 1024px) {
  .sum--noimg .sum__tx, .art-nav { grid-column: 1; }
  .gal { grid-template-columns: repeat(min(var(--n, 2), 2), 1fr); }
  .art-nav { grid-template-columns: 1fr 1fr; }
  .art-nav__up { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ===== お問い合せ（contact/contact.html）=====
   表の枠は使わない。欄は下線だけ・選択肢は丸い札（押すと緑）・番号つきの3つのまとまり */
.ct__notice { margin-top: 1.2em; font-size: .82rem; color: var(--ink-2); line-height: 1.9; }
.ct__req { color: #a5432f; margin-left: .2em; }
.ct-form { margin-top: calc(var(--gw) * 1.4); }
.ct-g { border: 0; margin: 0; padding: 0 0 calc(var(--gw) * 1.2); min-width: 0; }
.ct-g + .ct-g { padding-top: calc(var(--gw) * 1.2); border-top: 1px solid var(--line); }
.ct-g__h { display: flex; align-items: baseline; gap: 1em; padding: 0; margin-bottom: 1.6em; font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 1.35vw, 22px); letter-spacing: .06em; }
.ct-g__h span { font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; color: var(--mute); font-weight: 400; font-variant-numeric: tabular-nums; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4em; }
.ct-f { display: block; margin-bottom: 1.6em; }
.ct-f__l { display: block; font-size: .78rem; letter-spacing: .04em; color: var(--ink-2); }
.ct-f input, .ct-f textarea, .ct-f select {
  width: 100%; margin-top: .3em; padding: .55em 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.6;
  transition: border-color .3s ease; appearance: none; -webkit-appearance: none;
}
.ct-f textarea { resize: vertical; }
.ct-g#message .ct-f textarea { border: 1px solid var(--line); border-radius: 12px; padding: .9em 1em; background: rgba(255,255,255,.25); }
.ct-f input:focus, .ct-f textarea:focus, .ct-f select:focus { outline: none; border-color: var(--green); }
.ct-f input:user-invalid { border-color: #a5432f; }
.ct-sel { position: relative; display: block; }
.ct-sel::after { content: ""; position: absolute; right: .3em; top: 50%; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-30%) rotate(45deg); pointer-events: none; }
.ct-sub { margin: 1.4em 0 .7em; font-size: .78rem; letter-spacing: .04em; color: var(--ink-2); }
.ct-g__h + .ct-sub, .ct-f + .ct-sub { margin-top: 0; }
.ct-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.ct-chips label { position: relative; cursor: pointer; }
.ct-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ct-chips span {
  display: inline-block; padding: .45em 1.1em; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; line-height: 1.5; transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ct-chips label:hover span { border-color: var(--ink); }
.ct-chips input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.ct-chips input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.ct-send { display: flex; align-items: center; gap: 2em; padding-top: calc(var(--gw) * .8); border-top: 1px solid var(--line); }
.ct-send .btn { border: 0; cursor: pointer; font: inherit; font-size: .9rem; }
.ct-reset { border: 0; padding: 0; background: none; color: var(--mute); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; }
.ct-aside { margin-top: 2.4em; font-style: normal; font-size: .78rem; line-height: 1.9; color: var(--ink-2); }
@media (max-width: 1024px) {
  .ct-row { grid-template-columns: 1fr; }
  .ct .lp__aside { display: none; }
}

/* =====================================================================
   書籍（shop/goods_books.html ＝本屋の棚・shop/books/*.html ＝詳細）
   2026-10-19 hicpm.com/books の配置を移植。色と書体はこのサイトのもの（地 --bg・緑 --green・欧文 --latin）
   HTML は tools/build-pages.mjs が tools/books.mjs から作る
   ===================================================================== */
.lp--books { padding-bottom: calc(var(--gw) * .6); }
.lp--books .lp__main { grid-column: 2 / 24; }
.lp--books .lp__sub { border-bottom: 0; padding-bottom: 0; }

/* 立体の本（--bw＝幅・--bd＝厚み。--c＝背と裏の色、--t＝背の字の色は main.js が表紙から） */
.book3d { --bw: 120px; --bd: 18px; --c: var(--green); --t: #fff;
  position: relative; display: block; width: var(--bw); aspect-ratio: 7 / 10; transform-style: preserve-3d;
  transform: rotateY(26deg); transition: transform .8s var(--ease); }
.book3d > span { position: absolute; top: 0; height: 100%; }
.book3d__front { inset: 0; transform: translateZ(calc(var(--bd) / 2)); background: var(--c); }
.book3d__front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book3d__front::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.14) 3%, transparent 8%, transparent 92%, rgba(0,0,0,.06)); }
.book3d__spine { left: 0; width: var(--bd); background: var(--c); color: var(--t); overflow: hidden;
  transform: translateX(calc(var(--bd) / -2)) rotateY(-90deg);
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 8px rgba(0,0,0,.25); }
.book3d__spine span { writing-mode: vertical-rl; font: 500 10px/1 var(--serif); letter-spacing: .1em; white-space: nowrap; overflow: hidden; max-height: 88%; }
.book3d__pages { right: 0; width: var(--bd); transform: translateX(calc(var(--bd) / 2)) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #fff 0 2px, #e4e2da 2px 3px); }
.book3d__back { inset: 0; background: var(--c); transform: translateZ(calc(var(--bd) / -2)) rotateY(180deg); }

/* 釦（サイトの .btn と同じ丸い形・右に →） */
.bpill { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.2em; padding: .75em 1.3em; border: 1px solid var(--line);
  border-radius: 999px; font-size: .78rem; letter-spacing: .06em; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.bpill::after { content: "→"; transition: transform .4s var(--ease); }
.bpill:hover, .bitem:hover .bpill { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.bpill:hover::after, .bitem:hover .bpill::after { transform: translateX(4px); }
.bpill.is-solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.bpill.is-solid:hover { background: var(--green); border-color: var(--green); color: #fff; }
.bpill.is-lg { min-width: 14rem; padding: 1em 1.6em; font-size: .9rem; }
.bpill.is-block { display: flex; width: 100%; min-width: 0; }
.bpill.is-down::after { content: "↓"; }
.bpill.is-down:hover::after { transform: translateY(3px); }

/* 書誌 */
.bspec { margin: .6em 0 0; display: grid; gap: .15em; font-size: .78rem; line-height: 1.7; }
.bspec > div { display: flex; gap: .9em; }
.bspec dt { flex: none; min-width: 4em; color: var(--mute); letter-spacing: .06em; }
.bspec .is-price dd { font: italic 500 1.25rem/1.3 var(--latin); }
.bspec.is-item { margin-bottom: .2em; }
.bspec.is-feature { margin-top: 1.2em; }
.bspec.is-detail, .bspec.is-buy { gap: 0; border-top: 1px solid var(--line); font-size: .9rem; }
.bspec.is-detail > div, .bspec.is-buy > div { padding: .8em 0; border-bottom: 1px solid var(--line); gap: 1.5em; }
.bspec.is-detail dt { min-width: 5.5em; }
.bspec.is-buy { margin: 0; font-size: .82rem; }
.bspec.is-buy > div { padding: .65em 0; }
.bspec.is-buy .is-price dd { font-size: 1.6rem; }

/* ---------- 棚 ---------- */
.bstore { padding: 0 var(--side) calc(var(--gw) * 2.4); }
.bstore__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: clamp(2rem, 4vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem) 0; background: #f4f7f2; border-radius: 24px 24px 0 0; }
.bstore__copy { align-self: center; padding-bottom: 3rem; }
.bstore__kicker { margin-bottom: 1.1em; font: italic 500 1.15rem/1 var(--latin); color: var(--green); letter-spacing: .02em; }
.bstore__title { font: 500 clamp(21px, 2.1vw, 30px)/1.55 var(--serif); letter-spacing: .04em; }
.bstore__title a { text-decoration: none; }
.bstore__title a:hover { color: var(--green); }
.bstore__lead { margin: 1.2em 0 1.8em; max-width: 26em; font-size: .85rem; line-height: 2; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bstore__feature { display: block; perspective: 1400px; padding-top: 1rem; margin-bottom: -2px; }
.bstore__feature .book3d { --bw: clamp(190px, 18vw, 250px); --bd: 28px; transform: rotateY(-14deg); transform-origin: 50% 100%; }
.bstore__feature:hover .book3d, .bstore__feature:focus-visible .book3d { transform: rotateY(-2deg) translateY(-8px); }
.bstore__feature .book3d__front { box-shadow: 18px 0 40px rgba(19, 20, 23, .2); }

.bstore__cards { display: flex; justify-content: flex-end; padding-bottom: 2.4rem; }
.bstore__card { display: flex; gap: .75rem; align-items: flex-end; }
.bstore__vlabel { writing-mode: vertical-rl; transform: rotate(180deg); font: italic 500 1.05rem/1 var(--latin); letter-spacing: .06em; white-space: nowrap; }
.bstore__card-body { display: flex; flex-direction: column; align-items: stretch; gap: .9rem; width: 190px; padding: 1.4rem 1.1rem; border-radius: 18px; background: var(--ink); color: #e9ece6; }
.bstore__card-en { font: italic 500 1.5rem/1 var(--latin); }
.bstore__card .bpill { border-color: #e9ece6; background: #e9ece6; color: var(--ink); }
.bstore__card .bpill:hover { background: var(--green); border-color: var(--green); color: #fff; }
.bstore__mail { font-size: .72rem; color: #b9beb5; text-decoration: none; word-break: break-all; }
.bstore__mail:hover { color: #fff; }

.bstore__plank { position: relative; z-index: 2; height: 18px; margin: 0 -14px; border-radius: 4px; background: linear-gradient(#fbfcfa, #dfe5dc);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 22px 30px -12px rgba(19, 20, 23, .28); }

.bstore__shelf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: start;
  padding: 3rem clamp(1.5rem, 3vw, 3rem); background: #f4f7f2; border-radius: 0 0 24px 24px; }
.bstore__vlabel.is-shelf { font-size: 1.3rem; }
.bstore__vlabel.is-shelf span { margin-top: .5em; font-size: .9rem; color: var(--mute); }
.bstore__rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 3rem 2.5rem; padding: .5rem 4px 0; }

.bitem { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: stretch; }
.bitem__book { display: block; align-self: end; perspective: 900px; padding-left: 9px; }
.bitem:hover .book3d { transform: rotateY(6deg) translateY(-6px); }
.bitem__body { display: flex; flex-direction: column; align-items: flex-start; }
.bitem__title { font: 500 1rem/1.6 var(--serif); letter-spacing: .04em; }
.bitem__title a { text-decoration: none; }
.bitem__title a::after { content: ""; position: absolute; inset: 0; } /* 札全体を押せるように */
.bitem__text { margin: .4em 0 1.1em; font-size: .75rem; line-height: 1.85; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bitem__body .bpill { margin-top: auto; }

@media (max-width: 1100px) {
  .bstore__stage { grid-template-columns: minmax(0, 1fr) auto; }
  .bstore__cards { grid-column: 1 / -1; justify-content: flex-start; order: 3; padding-bottom: 2rem; }
}
@media (max-width: 767px) {
  .bstore { padding-inline: 12px; }
  .bstore__stage { grid-template-columns: 1fr; gap: 0; padding: 2rem 1.25rem 0; border-radius: 18px 18px 0 0; }
  .bstore__feature { order: 1; justify-self: center; margin-bottom: 2rem; }
  .bstore__feature .book3d { --bw: 170px; --bd: 22px; }
  .bstore__copy { order: 2; padding-bottom: 2rem; }
  .bstore__cards { order: 3; padding-bottom: 1.5rem; }
  .bstore__card { width: 100%; }
  .bstore__card-body { flex: 1; width: auto; }
  .bstore__plank { margin: 0 -6px; height: 14px; }
  .bstore__shelf { grid-template-columns: 1fr; gap: 1.25rem; padding: 2rem 1.25rem; border-radius: 0 0 18px 18px; }
  .bstore__vlabel.is-shelf { writing-mode: horizontal-tb; transform: none; }
  .bstore__vlabel.is-shelf span { margin: 0 0 0 .5em; }
  .bstore__rail { grid-template-columns: 1fr; gap: 2rem; }
  .bitem { gap: 1rem; }
  .bitem .book3d { --bw: 92px; --bd: 14px; }
}

/* ---------- 詳細ページ ---------- */
.bhero { --c: var(--bg2); position: relative; overflow: hidden; padding: max(170px, calc(var(--gw) * 3)) var(--side) calc(var(--gw) * 1.6);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, var(--bg)) 0%, color-mix(in srgb, var(--c) 10%, var(--bg)) 70%); transition: background .6s; }
.bhero::before { content: ""; position: absolute; left: -10%; top: 20%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 40%, transparent), transparent); filter: blur(30px); opacity: .7; }
.bhero__inner { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.bhero__visual { position: relative; display: grid; place-items: center; perspective: 1600px; padding: 1rem 0 2rem; }
.bhero__book { position: relative; z-index: 1; animation: book-in 1.1s var(--ease) both; }
/* 表紙の原画は幅 152〜169px しかないので、大きくしすぎない */
.bhero__book .book3d { --bw: clamp(190px, 18vw, 240px); --bd: 32px; transform: rotateY(24deg) rotateX(2deg); }
.bhero__visual:hover .book3d { transform: rotateY(-10deg) rotateX(0); }
.bhero__book .book3d__front { box-shadow: 30px 30px 50px -18px rgba(19, 20, 23, .4); }
.bhero__floor { position: absolute; bottom: .75rem; width: 60%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(19, 20, 23, .28), transparent); filter: blur(4px); }
@keyframes book-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.bhero__kicker { margin-bottom: 1.2em; font: italic 500 1.15rem/1 var(--latin); }
.bhero__kicker a { color: var(--green); text-decoration: none; }
.bhero__kicker a::before { content: "←"; margin-right: .5em; display: inline-block; font-style: normal; transition: transform .4s var(--ease); }
.bhero__kicker a:hover::before { transform: translateX(-4px); }
.bhero__title { font: 500 clamp(28px, 3.4vw, 48px)/1.45 var(--serif); letter-spacing: .04em; text-wrap: balance; }
.bhero__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4em 0 0; padding: 0; list-style: none; }
.bhero__tags li { padding: .3em .9em; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; background: rgba(255,255,255,.45); }
.bhero__buy { margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.bhero__price { margin-bottom: 1.2rem; display: flex; align-items: baseline; gap: .8em; font: italic 500 clamp(32px, 3vw, 44px)/1 var(--latin); }
.bhero__price small { font: 400 .75rem/1 var(--sans); font-style: normal; letter-spacing: .12em; color: var(--mute); }
.bhero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: .75rem; }
.bhero__actions .bpill { min-width: 0; }

.bd { max-width: 1180px; margin: 0 auto; padding: calc(var(--gw) * 1.6) var(--side) 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; box-sizing: content-box; }
.bd__sec + .bd__sec { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.bd__h { display: flex; flex-direction: column; gap: .4em; margin-bottom: 1.6em; font: 500 clamp(21px, 2vw, 28px)/1.4 var(--serif); letter-spacing: .05em; }
.bd__h span { font: italic 500 1.05rem/1 var(--latin); color: var(--green); letter-spacing: .02em; }
.bd__body { max-width: 38em; font: 400 1rem/2.15 var(--serif); }
.bd .bspec.is-detail { max-width: 38em; }
.bd__buy { padding: 1.6rem; border: 1px solid var(--line); border-radius: 18px; background: #f4f7f2; box-shadow: 0 24px 50px -30px rgba(19, 20, 23, .35); }
.bd__buy-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding-bottom: 1.2rem; }
.bd__buy-thumb { display: block; perspective: 600px; padding-left: 6px; }
.bd__buy-thumb .book3d { --bw: 54px; --bd: 9px; transform: rotateY(20deg); }
.bd__buy-title { font: 500 .9rem/1.6 var(--serif); }
.bd__buy .bpill { margin-top: 1.2rem; }
.bd__mail { display: flex; gap: .8em; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: .8rem; text-decoration: none; word-break: break-all; }
.bd__mail small { color: var(--mute); }
.bd__mail:hover { color: var(--green); }

.bmore { max-width: 1180px; margin: calc(var(--gw) * 2) auto 0; padding: calc(var(--gw) * 1.4) var(--side) calc(var(--gw) * 2.4); border-top: 1px solid var(--line); box-sizing: content-box; }
.bmore__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.4rem; }
.bmore__head .bd__h { margin: 0; }

@media (max-width: 1024px) {
  .bhero { padding-top: 130px; }
  .bhero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .bhero__book .book3d { --bw: 180px; --bd: 24px; }
  .bd { grid-template-columns: 1fr; }
  .bd__buy { max-width: 520px; translate: none !important; }
}
@media (max-width: 767px) {
  .bhero__title { font-size: 26px; }
  .bhero__actions { grid-template-columns: 1fr; }
  .bd__body { font-size: .95rem; line-height: 2.05; }
  .bmore__head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .book3d { transition: none; } .bhero__book { animation: none; } }
.bd__aside { align-self: stretch; }

/* =====================================================================
   メニュー（qino.jp の .site-menu を実測で移植・2026-10-19）
   HTML は tools/header.mjs。開閉は main.js が body.is-menu を付け外し
   ===================================================================== */
.menu { position: fixed; inset: 0; z-index: 45; visibility: hidden; transition: visibility 0s .6s; }
body.is-menu .menu { visibility: visible; transition: none; }
body.is-menu { overflow: hidden; }
.menu__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease; }
body.is-menu .menu__overlay { opacity: 1; }

/* 左：キャッチ＋蛇＋社名（qino：272×18 のキャッチの下に 280×61 のロゴ・ぼかし 20px→0） */
.menu__side { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% * 14 / 24); display: grid; place-items: center; }
.menu__logo { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; color: #f2f4ef; text-decoration: none;
  opacity: 0; filter: blur(20px); transition: opacity .4s ease, filter .4s ease; }
body.is-menu .menu__logo { opacity: 1; filter: blur(0); transition-delay: .05s; }
.menu__catch { font-family: var(--serif); font-size: clamp(15px, 1.1vw, 19px); letter-spacing: .32em; padding-left: .32em; white-space: nowrap; }
.menu__mark { width: clamp(150px, 12vw, 210px); height: auto; overflow: visible; }
/* 11/12 メニューの文字も .ai の文字（symbol #wm はヘッダーの .wordmark にある） */
.menu__word { display: block; height: clamp(18px, 1.5vw, 24px); width: auto; overflow: visible; }

/* 右：板（10/24・地は --bg ＝ qino と同じ #e3eae0） */
.menu__main { position: absolute; top: 0; right: 0; bottom: 0; width: calc(100% * 10 / 24); background: var(--bg); color: #000;
  overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .3s ease; }
body.is-menu .menu__main { opacity: 1; }
.menu__wrap { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gw) 60px calc(var(--gw) * 2); box-sizing: border-box; }
:where(.menu) ul { list-style: none; margin: 0; padding: 0; }

/* 文字のせり上がり：行の箱で切り、中身を下から（開くたびに上から順に少しずつ遅らせる） */
.menu .tx { display: block; overflow: hidden; text-decoration: none; color: inherit; position: relative; }
.menu .tx-in { display: block; transform: translateY(105%); transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
body.is-menu .menu .tx-in { transform: none; transition-delay: calc(.04s + var(--i, 0) * .025s); }
.menu a.tx:hover .tx-in { opacity: .6; }

.menu__big { font: 500 clamp(34px, 2.98vw, 56px)/1.3 var(--sans); letter-spacing: .003em; }
.menu__shop { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid rgba(23, 28, 25, .14); }
.menu__pj { font: 500 clamp(18px, 1.39vw, 26px)/1.5 var(--sans); }
.menu__pj li + li { margin-top: .15em; }
.menu__pj li { display: flex; align-items: baseline; }
.menu__no { flex: none; width: 35px; font-size: clamp(11px, .8vw, 14px); font-weight: 400; color: var(--mute); }
.menu__sub { margin-top: 1.5em; font: 500 clamp(17px, 1.33vw, 25px)/1.5 var(--sans); }
.menu__aside { margin: .9em 0 .2em; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 3.2em; font-size: clamp(12px, .76vw, 14px); line-height: 1.8; }
/* 2か国語（10/19）：英字の右に和文を小さく・灰色。読み物の2列だけ和文を下の行に */
.menu .tx .ja { display: inline-block; margin-left: .9rem; font-size: clamp(11px, .72vw, 13px); font-weight: 400; line-height: 1; letter-spacing: .08em; color: var(--ink-2); vertical-align: .2em; }
.menu__big li + li { margin-top: .35em; }
.menu__big > li > .tx .ja { display: block; margin: .15em 0 .25em; vertical-align: 0; }
.menu__aside li + li { margin-top: .85em; }
.menu__aside .tx .ja { display: block; margin: .1em 0 0; font-size: .82em; letter-spacing: .04em; vertical-align: 0; }
.menu__aside .tx .en { font-weight: 500; }
/* 10/20 Ivan：メニューにもフッターと同じ丸い絵の釦3つ（板は明るいので線と hover は墨） */
.menu .menu__sns { margin: 2.4em 0 0; padding: 0; list-style: none; }
.menu .menu__sns a { width: 44px; height: 44px; border-color: rgba(23, 28, 25, .25); color: var(--ink); }
.menu .menu__sns a:hover, .menu .menu__sns a:focus-visible { background: var(--ink); border-color: var(--ink); color: #e9ece6; }

/* 今いるページ：緑の字＋左に緑の点（10/21・薄い灰色は「押せない」に見えたので）（qino：35px 左・点が膨らんで出る） */
.menu a[aria-current="page"] .tx-in, .menu a[aria-current="page"] .ja { color: var(--green); }
.menu li:has(> a[aria-current="page"]) { position: relative; }
.menu li:has(> a[aria-current="page"])::before { content: ""; position: absolute; left: -38px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--green);
  transform: scale(0); transition: transform .4s var(--ease); }
.menu__big > li:has(> a[aria-current="page"])::before { top: .68em; }
body.is-menu .menu li:has(> a[aria-current="page"])::before { transform: scale(1); transition-delay: .25s; }

/* メニューが開いている間のヘッダー：ロゴは暗い膜の上なので白、右の釦まわりは板の上なので墨 */
body.is-menu .hd { color: #f2f4ef; }
body.is-menu .hd__side { color: #000; }
body.is-menu .hd__page { opacity: 0; }

@media (max-width: 1024px) {
  .menu__side { display: none; }
  .menu__main { width: 100%; }
  .menu__wrap { justify-content: flex-start; padding: 120px var(--side) 48px calc(var(--side) + 30px); }
  /* 10/21 Ivan：スマホでは丸い絵の釦を画面のまん中に（左の点の分 30px を戻してから中央ぞろえ） */
  .menu .menu__sns { margin-left: -30px; justify-content: center; }
  /* 10/21 Ivan：板が全面になるので、メニューを開いてもロゴは白にせず墨のまま */
  body.is-menu .hd { color: #000; }
}
@media (max-width: 600px) {
  .menu__aside { column-gap: 1.4em; }
  .hd__menu { width: 48px; height: 48px; }
  .hd__menu i { left: 15px; top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu .tx-in { transform: none; transition: opacity .2s; }
  .menu__logo { filter: none; }
}

/* ============ ABOUT MORELIA：低いヒーロー＋雑誌の表紙のモザイク（10/19 夜） ============ */
.amh { position: relative; overflow: hidden; height: 62vh; height: 62svh; min-height: 520px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding: 120px var(--side) clamp(32px, 5vh, 56px); background: var(--ink); color: #f2f4ef; }
.amh__bg { position: absolute; inset: 0; background: url(../img/forest.webp) center 58% / cover; filter: brightness(.6) saturate(.85); transform: scale(1.12); animation: amhIn 2.4s var(--ease) forwards; }
@keyframes amhIn { to { transform: scale(1); } }
.amh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(19,20,23,.5), transparent 35%), linear-gradient(transparent 40%, var(--ink)); }
.amh > *:not(.amh__bg) { position: relative; z-index: 1; }
.amh__en { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: #cfd3cb; }
.amh__title { margin-top: .2em; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(56px, 8vw, 140px); line-height: .92; letter-spacing: -.01em; }
.amh__title span { display: block; opacity: 0; transform: translateY(36px); animation: amhUp 1.2s var(--ease) .2s forwards; }
.amh__title span + span { padding-left: .9em; animation-delay: .32s; }
@keyframes amhUp { to { opacity: 1; transform: none; } }
.amh__ix { list-style: none; margin: 0; padding: 0; min-width: 300px; border-top: 1px solid rgba(255,255,255,.3); opacity: 0; animation: amhUp 1s var(--ease) .6s forwards; }
.amh__ix a { display: flex; gap: 1.2em; align-items: baseline; padding: .6em 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: .84rem; color: rgba(233,236,230,.75); text-decoration: none; transition: color .3s, padding .4s var(--ease); }
.amh__ix a:hover { color: #fff; padding-left: .5em; }
.amh__ix span { font-size: .7rem; color: #9ea39a; font-variant-numeric: tabular-nums; }

.amz { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 15vw, 240px); gap: 14px; padding: clamp(24px, 3vw, 48px) var(--side) calc(var(--gw) * 2); background: var(--ink); }
.amz__item { position: relative; overflow: hidden; background: #1d1f22; color: #f2f4ef; text-decoration: none; grid-column: span 2; grid-row: span 2; }
.amz__item:nth-child(1) { grid-column: span 4; grid-row: span 3; }
.amz__item:nth-child(3) { grid-row: span 1; }
.amz__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); transition: transform 1.2s var(--ease), filter .5s; }
.amz__item:hover img, .amz__item:focus-visible img { transform: scale(1.05); filter: brightness(.9); }
.amz__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(10,12,11,.85)); }
.amz__tx { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; }
.amz__num { font-size: .72rem; letter-spacing: .1em; color: #cfd3cb; font-variant-numeric: tabular-nums; }
.amz__title { margin-top: .3em; font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.2; }
.amz__item:nth-child(1) .amz__title { font-size: clamp(32px, 4vw, 64px); font-weight: 200; }
.amz__desc { margin-top: .6em; max-width: 34em; font-size: .82rem; line-height: 1.8; color: #cfd3cb; }
.amz__item:not(:first-child) .amz__desc { display: none; }
@media (max-width: 900px) { .amh { grid-template-columns: 1fr; gap: 24px; height: auto; min-height: 0; padding-top: 140px; } .amh__ix { min-width: 0; } }
@media (max-width: 640px) {
  .amz { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 10px; }
  .amz__item, .amz__item:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .amz__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .amz__tx { left: 12px; right: 12px; bottom: 10px; }
  .amz__title { font-size: 15px; }
}

/* ============ Snugle Cage（10/19 夜・使いやすさの作り直し） ============ */
/* 頭：低い暗い面＋製品写真（写真は 600px なので全面にしない） */
.snbtn { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.6em; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); color: inherit; text-decoration: none; font-size: .88rem; letter-spacing: .06em; transition: background .3s, color .3s, border-color .3s; }
.snbtn:hover { border-color: #fff; }
.snbtn.is-solid { background: #f2f4ef; color: var(--ink); border-color: #f2f4ef; }
.snbtn.is-solid:hover { background: #8fc2a2; border-color: #8fc2a2; }

/* ラインナップの絞り込み */
.snf { display: grid; gap: 12px; margin-bottom: calc(var(--gw) * .7); }
.snf__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.snf__label { width: 4.5em; font-size: .78rem; color: var(--mute); letter-spacing: .06em; }
.snf button { font: inherit; font-size: .84rem; letter-spacing: .04em; padding: .55em 1.1em; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.snf button:hover { border-color: var(--ink); }
.snf button.is-on { background: var(--ink); color: #f2f4ef; border-color: var(--ink); }
.snf__desc { min-height: 1.6em; padding-left: calc(4.5em + 8px); font-size: .86rem; color: var(--ink-2); }
.snf__desc i { font-family: var(--latin); font-size: 1.05em; margin-right: .6em; color: var(--ink); }
.snf__count { display: flex; align-items: baseline; gap: .5em; padding-top: .9em; border-top: 1px solid var(--line); font-size: .8rem; color: var(--mute); letter-spacing: .06em; }
.snf__count b { font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: 1.6rem; color: var(--ink); }
.snf__count small { margin-left: auto; }
.sncards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.sncards .card a { height: 100%; padding: 12px 12px 18px; border-radius: 16px; background: rgba(255,255,255,.55); transition: background .4s, box-shadow .4s, transform .4s var(--ease); }
.sncards .card a:hover { background: #fff; box-shadow: 0 20px 40px -24px rgba(19,20,23,.35); transform: translateY(-3px); }
.sncards .card__img { position: relative; border-radius: 10px; background: #fff; }
.card__depth { position: absolute; left: 10px; top: 10px; font-family: "IBM Plex Sans", var(--sans); font-size: .66rem; letter-spacing: .1em; padding: .3em .7em; border-radius: 999px; background: var(--bg); color: var(--ink-2); }
.sncards .card__name, .sncards .card__size, .sncards .card__note, .sncards .card__price { padding: 0 4px; }
.sncards .card[hidden] { display: none; }
.snf__empty { padding: 2em 0; color: var(--mute); }

/* ディテールの横送り */

/* オプションのタブ */
.sntab { margin-top: calc(var(--gw) * 1.2); scroll-margin-top: 100px; }
.sntab__list { position: relative; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(19,20,23,.06); width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 1.4em; }
.sntab__list button { font: inherit; font-size: .86rem; padding: .7em 1.3em; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .3s, color .3s; }
.sntab__list button small { margin-left: .6em; font-size: .72rem; opacity: .7; }
.sntab__list button { position: relative; z-index: 1; }
.sntab__list button[aria-selected="true"] { color: #f2f4ef; }
/* 選んだタブの下を黒い札が弾んで移る（10/19 夜・その2）。JS が --x・--w を入れる。JS が無いときは札なしで背景色 */
.sntab__pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); border-radius: 999px; background: var(--ink); transform: translateX(var(--x, 0)); transition: transform .65s cubic-bezier(.34, 1.45, .5, 1), width .65s cubic-bezier(.34, 1.45, .5, 1); }
.sntab__list:not(.is-js) button[aria-selected="true"] { background: var(--ink); }
.sntab__panel.is-in { animation: sntabIn .6s var(--ease); }
.sntab__panel.is-in tbody tr, .sntab__panel.is-in thead tr { animation: sntabRow .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 35ms + 80ms); }
@keyframes sntabIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes sntabRow { from { opacity: 0; transform: translateX(-18px); } }
.sntab .tbl tbody tr { transition: background .2s; }
.sntab .tbl tbody tr:hover { background: rgba(255,255,255,.5); }
@media (max-width: 640px) { .snf__label { width: 100%; } .snf__desc { padding-left: 0; } .snf__count small { display: none; } }

/* ---- Snugle Cage v2（10/19 夜）：特長・並び順・サイズ比較・機種の詳細 ---- */

.snf__count { flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.snf__count p { display: flex; align-items: baseline; gap: .5em; margin-right: auto; }
.snf__sort { display: flex; align-items: center; gap: .6em; font-size: .78rem; color: var(--mute); }
.snf__sort select { font: inherit; font-size: .84rem; color: var(--ink); padding: .5em 2.2em .5em 1em; border-radius: 999px; border: 1px solid var(--line); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23131417'/%3E%3C/svg%3E") no-repeat right 1em center; appearance: none; cursor: pointer; }
.snf__view { display: flex; padding: 4px; border-radius: 999px; background: rgba(19,20,23,.06); }
.snf .snf__view button { border: 0; padding: .45em 1.1em; }
.snf .snf__view button.is-on { background: var(--ink); }
.sncards .card a { cursor: pointer; }
/* 10/20 Ivan：「詳細」はサイト共通の丸ボタン（.tyg__more と同じ：枠だけ→触れると墨の塗り）。札の下端にそろえる */
.sncards .card a { display: flex; flex-direction: column; }
.sncards .card a::after { content: "詳細を見る　→"; align-self: center; margin-top: auto; padding: .85em 1.7em; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .84rem; letter-spacing: .04em; line-height: 1; white-space: nowrap; transition: background .4s ease, color .4s ease; } /* .btn と同じ墨の丸ボタン・まん中 */
.sncards .card__price { margin-bottom: 1.1em; }
.sncards .card a:hover::after { background: var(--green); color: #fff; }
.sncards[hidden] { display: none; }

.snsz { padding: calc(var(--gw) * .6) 0 0; }
.snsz__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 34px 26px; padding: 30px 24px 26px; border-radius: 18px; background: rgba(255,255,255,.55); background-image: linear-gradient(rgba(19,20,23,.05) 1px, transparent 1px); background-size: 100% 19px; }
.snsz__it { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.snsz__box { display: flex; border: 1.5px solid var(--ink); border-radius: 3px; background: linear-gradient(160deg, rgba(220,232,236,.95), rgba(190,206,212,.75)); box-shadow: inset 0 -4px 0 rgba(19,20,23,.08); transition: background .3s, transform .4s var(--ease); margin-bottom: 8px; }
.snsz__box i { flex: 1; border-left: 1px solid rgba(19,20,23,.45); }
.snsz__box i:first-child { border-left: 0; }
.snsz__it:hover .snsz__box { background: #8fc2a2; transform: translateY(-4px); }
.snsz__nm { font-size: .8rem; font-weight: 500; letter-spacing: .04em; }
.snsz__dm { font-size: .7rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.snsz__note { margin-top: .8em; font-size: .76rem; color: var(--mute); }

html.is-dlg { overflow: hidden; }
.sndr { width: min(1040px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 22px; background: var(--bg); color: var(--ink); box-shadow: 0 40px 100px -20px rgba(0,0,0,.5); overflow: auto; }
.sndr::backdrop { background: rgba(10,12,11,.6); backdrop-filter: blur(4px); }
.sndr[open] { animation: sndrIn .5s var(--ease); }
@keyframes sndrIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.sndr__close { position: absolute; z-index: 2; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #f2f4ef; font-size: 1.3rem; cursor: pointer; }
.sndr__body { display: grid; grid-template-columns: 1fr 1.1fr; }
.sndr__img { margin: 0; padding: 8%; display: grid; place-items: center; background: #fff; }
.sndr__img img { width: 100%; height: auto; }
.sndr__tx { padding: 40px 40px 36px; }
.sndr__en { display: flex; gap: .8em; align-items: center; font-family: var(--latin); font-style: italic; font-size: 1.1rem; color: var(--green); }
.sndr__en em { font-family: "IBM Plex Sans", var(--sans); font-style: normal; font-size: .62rem; letter-spacing: .14em; border: 1px solid currentColor; border-radius: 999px; padding: .15em .7em; }
.sndr__title { margin-top: .1em; font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; }
.sndr__price { margin-top: .2em; font-family: var(--latin); font-style: italic; font-size: 2rem; }
.sndr__desc { margin-top: .6em; font-size: .88rem; line-height: 1.85; color: var(--ink-2); }
.sndr__dims { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sndr__dims li { padding: .8em 1em; border-radius: 12px; background: rgba(255,255,255,.65); font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.sndr__dims span { display: block; font-size: .66rem; font-weight: 500; letter-spacing: .14em; color: var(--mute); }
.sndr__dims small { font-size: .55em; margin-left: .2em; color: var(--mute); }
.sndr__rooms { margin-top: .6em; font-size: .8rem; color: var(--mute); }
.sndr__h { display: flex; gap: .8em; align-items: baseline; margin-top: 1.8em; padding-bottom: .6em; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 500; font-size: 1rem; }
.sndr__h small { font-family: var(--sans); font-size: .72rem; color: var(--mute); }
.sndr__opts { margin: 0; }
.sndr__opt { display: grid; grid-template-columns: 9.5em 1fr; gap: 1em; padding: .7em 0; border-bottom: 1px solid var(--line); align-items: start; }
.sndr__opt dt { font-size: .78rem; color: var(--mute); padding-top: .45em; }
.sndr__opt dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sndr__chip { display: inline-flex; align-items: baseline; gap: .5em; padding: .4em .9em; border-radius: 999px; background: #fff; font-size: .82rem; }
.sndr__chip em { font-style: normal; color: var(--mute); }
.sndr__chip b { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 1.05em; color: var(--green); }
.sndr__none { color: var(--mute); padding-top: .4em; }
.sndr__ped { display: flex; flex-wrap: wrap; gap: .4em 1.2em; align-items: baseline; padding: .8em 0; font-size: .86rem; }
.sndr__ped b:last-child { margin-left: auto; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--green); }
.sndr__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8em; }
.sndr .snbtn { border-color: var(--line); }
.sndr .snbtn.is-solid { background: var(--ink); color: #f2f4ef; border-color: var(--ink); }
.sndr .snbtn.is-solid:hover { background: var(--green); border-color: var(--green); }
@media (max-width: 800px) { .sndr__body { grid-template-columns: 1fr; } .sndr__img { padding: 10% 14%; } .sndr__tx { padding: 26px 22px 28px; } .sndr__opt { grid-template-columns: 1fr; gap: .4em; } }


/* =========================================================
   Snugle Cage v3（10/19 夜・その3）：ヒーロー・コンセプト・ディテール
   HTML は tools/pages/snugle_cage.html、動きは main.js（.sndh・data-count）
   ========================================================= */
/* ---- ヒーロー：森の写真＋大きな Snugle＋白地を抜いたケージ ---- */
.snh { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: #0d130f; color: #f2f4ef; }
.snh__bg { position: absolute; inset: 0; animation: snhBg 2.6s var(--ease) both; }
.snh__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.snh__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 58%, transparent 0, rgba(6,10,8,.5) 100%), linear-gradient(180deg, rgba(6,10,8,.55) 0%, rgba(6,10,8,.1) 30%, rgba(6,10,8,.25) 62%, rgba(6,10,8,.9) 100%); }
@keyframes snhBg { from { transform: scale(1.14); filter: brightness(.35); } to { transform: none; filter: none; } }
.snh__word { position: absolute; left: 0; right: 0; top: max(96px, 11vh); margin: 0; text-align: center; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(120px, 25vw, 440px); line-height: .82; letter-spacing: -.015em; color: #f2f4ef; pointer-events: none; white-space: nowrap; }
.snh__word span { display: inline-block; opacity: 0; transform: translateY(.3em); filter: blur(14px); animation: snhLetter 1.5s var(--ease) forwards; }
.snh__word span { animation-delay: .25s; }
.snh__word span:nth-child(2) { animation-delay: .32s; } .snh__word span:nth-child(3) { animation-delay: .39s; } .snh__word span:nth-child(4) { animation-delay: .46s; } .snh__word span:nth-child(5) { animation-delay: .53s; } .snh__word span:nth-child(6) { animation-delay: .6s; }
@keyframes snhLetter { to { opacity: .94; transform: none; filter: none; } }
.snh__cage { position: absolute; left: 50%; top: 56%; width: clamp(300px, 44vw, 660px); margin: 0; transform: translate(-50%, -50%); }
.snh__cage img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 30px rgba(0,0,0,.5)); animation: snhIn 1.6s var(--ease) .75s both, snhFloat 7s ease-in-out 2.4s infinite; }
/* 床の影：ケージが浮くと薄く小さく */
.snh__cage::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -12%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent); animation: snhIn 1.6s var(--ease) .75s both, snhShadow 7s ease-in-out 2.4s infinite; }
.snh__cage figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: -3.2em; text-align: center; padding-left: .2em; font-family: "IBM Plex Sans", var(--sans); font-size: .7rem; letter-spacing: .2em; color: #cfd5cb; opacity: 0; animation: amhUp 1s var(--ease) 1.8s forwards; }
@keyframes snhIn { from { opacity: 0; transform: translateY(90px) scale(.94); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes snhFloat { 50% { translate: 0 -14px; } }
@keyframes snhShadow { 50% { scale: .86; opacity: .6; } }
.snh__foot { position: absolute; z-index: 2; left: var(--side); right: var(--side); bottom: clamp(22px, 4.5vh, 44px); display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: clamp(20px, 4vw, 72px); padding-top: clamp(16px, 2.4vh, 26px); border-top: 1px solid rgba(255,255,255,.25); opacity: 0; animation: amhUp 1.2s var(--ease) 1.2s forwards; }
.snh__en { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #aab2a6; }
.snh__title { margin-top: .2em; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(28px, 2.9vw, 50px); line-height: 1; }
.snh__facts { display: flex; gap: clamp(20px, 3vw, 48px); margin: 0; }
.snh__facts dt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #aab2a6; }
.snh__facts dd { margin: .2em 0 0; font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.snh__facts small { font-size: .5em; margin-left: .2em; color: #b9beb5; }
.snh__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .snh { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 28px; }
  .snh__word { top: 104px; font-size: 31vw; }
  .snh__cage { position: relative; left: auto; top: auto; transform: none; width: 88vw; margin: 40vw auto 18vw; }
  .snh__cage figcaption { bottom: -2.6em; }
  .snh__foot { position: relative; left: auto; right: auto; bottom: auto; margin: 0 var(--side); grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .snh__bg, .snh__word span, .snh__cage img, .snh__cage::before, .snh__foot, .snh__cage figcaption { animation: none !important; opacity: 1; transform: none; filter: none; } }

/* ---- コンセプト：左に見出し、右に実物の写真と本文、特長は行 ---- */
.snc { display: block; padding-top: calc(var(--gw) * 2.4); }
.snc__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; /* 10/20 Ivan：左の見出しは右（写真＋文）の上下まん中に */ padding: 0 var(--gw); margin-bottom: calc(var(--gw) * 1.6); }
@media (min-width: 901px) { .snc__l { position: relative; top: clamp(-140px, -7vw, -48px); } } /* 10/20 Ivan：まん中より少し上へ */
.snc__h { margin-top: .7em; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.3vw, 56px); line-height: 1.5; letter-spacing: .03em; }
.snc__ph { margin: 0 0 1.8em; aspect-ratio: 780 / 300; border-radius: 16px; overflow: hidden; }
.snc__ph img { width: 100%; height: 100%; object-fit: cover; }
.snc__lead { margin: 0; font-size: .95rem; line-height: 2.1; color: var(--ink-2); }
.snfr-list { list-style: none; margin: 0 var(--gw); padding: 0; border-top: 1px solid var(--line); }
.snfr { position: relative; isolation: isolate; display: grid; grid-template-columns: 3em minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.7fr) clamp(120px, 11vw, 170px); grid-template-areas: "no en h p ph"; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: clamp(16px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--line); }
/* 触れると行の後ろに白い面がせり上がる */
.snfr::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--gw) * -.4); border-radius: 14px; background: #fff; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.snfr:hover::before { transform: none; }
.snfr__no { grid-area: no; font-family: "IBM Plex Sans", var(--sans); font-size: .74rem; letter-spacing: .08em; color: var(--mute); }
.snfr__en { grid-area: en; margin: 0; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(30px, 3.3vw, 58px); line-height: 1; transition: translate .6s var(--ease), color .4s; }
.snfr:hover .snfr__en { translate: 10px 0; color: var(--green); }
.snfr__h { grid-area: h; font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1.25vw, 20px); letter-spacing: .04em; }
.snfr__p { grid-area: p; margin: 0; font-size: .86rem; line-height: 1.95; color: var(--ink-2); }
.snfr__ph { grid-area: ph; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #fff; }
.snfr__ph img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .6; transform: scale(.9); transition: filter .6s, opacity .6s, transform .8s var(--ease); }
.snfr:hover .snfr__ph img { filter: none; opacity: 1; transform: none; }
@media (max-width: 900px) {
  .snc__intro { grid-template-columns: 1fr; padding: 0; }
  .snfr-list { margin: 0; }
  .snfr { grid-template-columns: 2.2em minmax(0, 1fr) 96px; grid-template-areas: "no en ph" "no h ph" "p p p"; row-gap: 6px; }
  .snfr__no { align-self: start; padding-top: .6em; }
  .snfr__p { margin-top: 8px; }
  .snfr__ph img { filter: none; opacity: 1; transform: none; }
}

/* ---- ディテール：節が止まって札が横に流れる（.is-pin は main.js が広い画面だけで付ける） ---- */
.sndh { position: relative; background: var(--bg2); }
.sndh__frame { padding: calc(var(--gw) * 2) 0; }
.sndh.is-pin .sndh__frame { height: 100vh; box-sizing: border-box; padding: 108px 0 clamp(28px, 5vh, 56px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; will-change: transform; }
.sndh__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--gw); margin-bottom: clamp(24px, 4.5vh, 56px); }
.sndh__h { margin-top: .15em; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(40px, 5.4vw, 96px); line-height: 1; }
.sndh__meter { display: flex; align-items: center; gap: .9em; font-family: "IBM Plex Sans", var(--sans); font-size: .8rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.sndh__cur { font-size: 1.5rem; font-weight: 300; color: var(--ink); }
.sndh__meter i { position: relative; width: clamp(110px, 15vw, 240px); height: 1px; background: var(--line); }
.sndh__meter b { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p, .077)); transform-origin: left; }
.sndh__track { list-style: none; margin: 0; padding: 0 var(--gw); display: flex; align-items: flex-start; gap: clamp(20px, 2.6vw, 44px); }
.sndh.is-pin .sndh__track { width: max-content; will-change: transform; }
.sndh:not(.is-pin) .sndh__track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gw); padding-bottom: 14px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.sndh__card { flex: none; width: clamp(270px, 27vw, 440px); scroll-snap-align: start; opacity: calc(.3 + var(--v, 1) * .7); transform: translateY(calc((1 - var(--v, 1)) * 48px)); }
.sndh.is-pin .sndh__card:nth-child(even) { margin-top: clamp(24px, 7vh, 84px); }
.sndh__card > a { display: block; cursor: zoom-in; }
.sndh__ph { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -42px rgba(19,20,23,.45); }
.sndh__ph img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--ease); }
.sndh__card > a:hover img { transform: scale(1.05); }
.sndh__tx { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9em; margin-top: 1.1em; }
.sndh__n { grid-row: span 2; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(38px, 3.2vw, 58px); line-height: .85; color: var(--green); }
.sndh__t { font-family: var(--serif); font-weight: 500; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; letter-spacing: .03em; }
.sndh__t em { display: inline-block; margin-left: .6em; padding: .05em .65em; border: 1px solid var(--green); border-radius: 999px; font-family: "IBM Plex Sans", var(--sans); font-style: normal; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); vertical-align: .2em; }
.sndh__d { margin-top: .45em; font-size: .8rem; line-height: 1.85; color: var(--ink-2); }
@media (max-width: 640px) { .sndh__card { width: 78vw; } .sndh__head { flex-direction: column; align-items: flex-start; } }
.snopt { padding-top: calc(var(--gw) * 1.2); }
.snopt .sntab { margin-top: 0; }
/* ---- Snugle Cage ラインナップ：スマホは2列＋絞り込みは横にすべらせる1行（10/19 夜）
   1列だと 14機種で約6,900px のスクロールになっていた ---- */
@media (max-width: 640px) {
  .snf { gap: 10px; margin-bottom: 20px; }
  .snf__row { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 calc(var(--side, 24px) * -1); padding: 2px var(--side, 24px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .snf__row::-webkit-scrollbar { display: none; }
  .snf__label { width: auto; flex: none; margin-right: 4px; }
  .snf button { flex: none; font-size: .8rem; padding: .45em .95em; }
  .snf__desc { min-height: 0; font-size: .8rem; }
  .snf__desc:empty { display: none; }
  .snf__count { padding-top: .7em; gap: 10px; }
  .snf__count b { font-size: 1.3rem; }
  .snf__sort > span { display: none; }
  .sncards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sncards .card a { padding: 6px 6px 12px; border-radius: 12px; }
  .sncards .card__img { border-radius: 8px; padding: 6%; }
  .card__depth { left: 6px; top: 6px; font-size: .56rem; padding: .25em .55em; }
  .sncards .card__name { margin-top: .6em; font-size: .86rem; gap: .4em; flex-wrap: wrap; }
  .sncards .card__name em { font-size: .55rem; padding: .05em .55em; }
  .sncards .card__size { font-size: .68rem; letter-spacing: 0; }
  .sncards .card__note { font-size: .68rem; }
  .sncards .card__price { font-size: 1.15rem; }
  .sncards .card a::after { display: none; }
}

/* ==== Foods（10/19 夜）：頭は .snh を流用・商品は178pxの写真しかないので白い札に載せる ==== */
.snh--food .snh__word { top: max(110px, 14vh); }
.fdh__pack { position: absolute; z-index: 1; left: 50%; top: 60%; height: clamp(240px, 38vh, 420px); margin: 0; transform: translate(-50%, -50%); }
/* 後ろの淡い光：暗い森から白い容器を浮かせる */
.fdh__pack::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(220,235,215,.32), rgba(220,235,215,.08) 55%, transparent); animation: snhIn 1.6s var(--ease) .6s both; pointer-events: none; }
.fdh__pack img { position: relative; z-index: 1; display: block; height: 100%; width: auto; rotate: -5deg; filter: drop-shadow(0 30px 26px rgba(0,0,0,.55)); animation: snhIn 1.6s var(--ease) .75s both, snhFloat 7s ease-in-out 2.4s infinite; }
.fdh__pack::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -9%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); animation: snhIn 1.6s var(--ease) .75s both, snhShadow 7s ease-in-out 2.4s infinite; }
.fdh__pack figcaption { position: absolute; left: -100%; right: -100%; bottom: -3.4em; text-align: center; font-family: "IBM Plex Sans", var(--sans); font-size: .7rem; letter-spacing: .2em; color: #cfd5cb; opacity: 0; animation: amhUp 1s var(--ease) 1.8s forwards; }
.snh--food .snh__title small { margin-left: .7em; font-family: var(--serif); font-style: normal; font-size: .38em; letter-spacing: .1em; color: #cfd5cb; vertical-align: middle; }
@media (max-width: 900px) {
  /* スマホ：字 → 商品 → 帯 を縦に流す（重ねない） */
  .snh--food { justify-content: flex-start; padding-top: 96px; }
  .snh--food .snh__word { position: relative; top: auto; font-size: 30vw; }
  .fdh__pack { position: relative; left: auto; top: auto; transform: none; height: min(66vw, 38svh); margin: 9vw auto auto; }
  .fdh__pack figcaption { bottom: -2.8em; }
  .snh--food .snh__foot { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .fdh__pack img, .fdh__pack::before, .fdh__pack::after, .fdh__pack figcaption { animation: none !important; opacity: 1; } }

/* 商品の詳細：左に写真の面、右に説明 */
.fd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 110px); align-items: start; padding: calc(var(--gw) * 2.2) var(--side) calc(var(--gw) * 1.8); scroll-margin-top: 80px; }
.fd__img { position: sticky; top: 110px; margin: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 28px; background: radial-gradient(ellipse 50% 50% at 50% 48%, #fff 0, #fff 30%, #eef1ea 62%, var(--bg2) 100%); }
.fd__img img { width: clamp(150px, 15vw, 240px); height: auto; mix-blend-mode: multiply; }
/* 10/20 Ivan：「Shop」の札と同じ平らな地の板・角丸 22px（白い光の輪はやめた）。写真は白地を抜いた高解像度版 */
.fd__img { border-radius: 22px; background: var(--bg2); }
.fd__img img { width: auto; height: 72%; max-height: 460px; mix-blend-mode: normal; transition: transform .8s var(--ease); }
.fd__img:hover img { transform: scale(1.04); }
.fd__cat { display: flex; align-items: center; gap: 1em; font-size: .74rem; letter-spacing: .16em; color: var(--mute); }
.fd__cat span { font-family: "IBM Plex Sans", var(--sans); color: var(--green); }
.fd__h { margin-top: .5em; font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: clamp(34px, 4vw, 64px); line-height: 1.05; letter-spacing: -.01em; }
.fd__en { margin-top: .5em; font-family: var(--latin); font-style: italic; font-size: 1.2rem; color: var(--ink-2); }
.fd__lead { margin-top: 1.8em; padding-top: 1.8em; border-top: 1px solid var(--line); line-height: 2.1; }
.fd__sh { margin-top: 2.4em; font-family: var(--latin); font-style: italic; font-size: 1.15rem; color: var(--green); }
.fd__use { list-style: none; margin: .8em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fd__use li { padding: .55em 1.1em; border-radius: 999px; background: #fff; font-size: .86rem; letter-spacing: .03em; }
.fd__spec { margin: 2.4em 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fd__spec div { padding: 1em 0; border-bottom: 1px solid var(--line); }
.fd__spec div:nth-child(odd) { padding-right: 1.4em; }
.fd__spec dt { font-size: .72rem; letter-spacing: .12em; color: var(--mute); }
.fd__spec dd { margin: .3em 0 0; font-size: .95rem; }
.fd__buy { margin-top: 2.2em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 1.4em 1.6em; border-radius: 20px; background: #fff; }
.fd__price { font-family: var(--latin); font-style: italic; font-size: clamp(32px, 3vw, 46px); line-height: 1; }
.fd__price small { font-family: var(--sans); font-style: normal; font-size: .72rem; color: var(--mute); margin-right: .8em; letter-spacing: .14em; vertical-align: middle; }
.fd__buy .snbtn.is-solid { background: var(--ink); color: #f2f4ef; border-color: var(--ink); }
.fd__buy .snbtn.is-solid:hover { background: var(--green); border-color: var(--green); }

/* ほかの売り物への近道 */
.fd-more { padding: calc(var(--gw) * .6) var(--side) calc(var(--gw) * 2.2); }
.fd-more__en { padding-bottom: .8em; border-bottom: 1px solid var(--line); font-family: var(--latin); font-style: italic; font-size: 1.3rem; }
.fd-more__row { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
/* 10/22 Ivan：札が大きすぎた → 横長の小さな札に（写真は左の小窓・矢印は丸の中） */
.fd-more__card { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); padding: 10px 18px 10px 10px; border-radius: 20px; background: var(--bg2); color: inherit; text-decoration: none; transition: background .4s var(--ease); }
.fd-more__card:hover { background: color-mix(in srgb, var(--bg2) 82%, var(--ink) 6%); }
.fd-more__ph { flex: none; position: relative; display: grid; place-items: center; width: clamp(108px, 10vw, 148px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.5); }
.fd-more__ph img { width: 78%; height: auto; transition: transform .8s var(--ease); }
.fd-more__ph.is-book img { width: auto; height: 80%; box-shadow: 0 8px 14px -6px rgba(0,0,0,.4); }
.fd-more__ph.is-pack img { position: absolute; inset: 0; margin: auto; width: auto; height: 84%; }
.fd-more__card:hover .fd-more__ph img { transform: scale(1.06); }
.fd-more__t { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--latin); font-style: italic; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.2; }
.fd-more__t i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; font-style: normal; font-size: 15px; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.fd-more__card:hover .fd-more__t i { background: var(--ink); border-color: var(--ink); color: var(--bg2); }

@media (max-width: 900px) {
  .fd { grid-template-columns: 1fr; padding-top: 72px; }
  .fd__img { position: relative; top: auto; aspect-ratio: 4 / 3; }
  .fd__img img { width: auto; height: 78%; max-width: none; }
  .fd-more__row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .fd__spec { grid-template-columns: 1fr; } .fd__spec div:nth-child(odd) { padding-right: 0; } }

/* ==== Books の頭（10/19 夜）：.snh を流用・表紙を扇に（触れると1冊だけ持ち上がる） ==== */
.snh--books .snh__word { top: max(110px, 14vh); }
.bkh__fan { position: absolute; z-index: 1; left: 50%; top: 60%; display: flex; justify-content: center; transform: translate(-50%, -50%); }
.bkh__cover { --o: calc(var(--i) - (var(--n) - 1) / 2); display: block; width: clamp(110px, 10vw, 168px); margin: 0 calc(clamp(110px, 10vw, 168px) * -.14); transform: translateY(calc(var(--o) * var(--o) * 9px)) rotate(calc(var(--o) * 7deg)); transform-origin: 50% 120%; transition: transform .6s var(--ease); }
.bkh__cover img { display: block; width: 100%; height: auto; aspect-ratio: 152 / 227; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: 0 30px 40px -18px rgba(0,0,0,.7), inset 3px 0 0 rgba(0,0,0,.15); animation: snhIn 1.4s var(--ease) both; animation-delay: calc(.7s + var(--i) * .09s); }
.bkh__cover:hover, .bkh__cover:focus-visible { z-index: 2; transform: translateY(calc(var(--o) * var(--o) * 9px - 26px)) rotate(calc(var(--o) * 7deg)) scale(1.06); }
.snh--books .snh__title small { margin-left: .7em; font-family: var(--serif); font-style: normal; font-size: .38em; letter-spacing: .1em; color: #cfd5cb; vertical-align: middle; }
#bstore { scroll-margin-top: 90px; }
@media (max-width: 900px) {
  .snh--books .snh__word { top: 110px; font-size: 32vw; }
  .bkh__fan { position: relative; left: auto; top: auto; transform: none; margin: 44vw auto 16vw; }
  .bkh__cover { width: 22vw; margin: 0 -3.2vw; }
}
@media (prefers-reduced-motion: reduce) { .bkh__cover img { animation: none !important; } }

/* Snugle：Concept の最後（06 Depth）と Line up の間を詰める（10/19 夜・430px → 約160px） */
#concept.snc { padding-bottom: calc(var(--gw) * 1); }
.snc + #lineup { padding-top: calc(var(--gw) * 1.2); }

/* Foods・Books の頭を低く（10/19 夜・100svh → 74svh／スマホは中身の高さだけ） */
.snh--food, .snh--books { height: 74svh; min-height: 560px; max-height: 820px; }
.snh--food .snh__word, .snh--books .snh__word { top: max(92px, 11vh); font-size: clamp(110px, 17vw, 300px); }
.fdh__pack { top: 55%; height: clamp(170px, 24vh, 270px); }
.fdh__pack figcaption { bottom: -2.6em; }
.bkh__fan { top: 57%; }
.bkh__cover { width: clamp(96px, 8vw, 136px); margin: 0 calc(clamp(96px, 8vw, 136px) * -.14); }
@media (max-width: 900px) {
  .snh--food, .snh--books { height: auto; min-height: 0; max-height: none; justify-content: flex-start; padding-top: 92px; }
  .snh--food .snh__word, .snh--books .snh__word { position: relative; top: auto; font-size: 26vw; }
  .fdh__pack { height: min(52vw, 30svh); margin: 7vw auto 0; }
  .bkh__fan { position: relative; left: auto; top: auto; transform: none; margin: 8vw auto 0; }
  .bkh__cover { width: 19vw; margin: 0 -2.8vw; }
  .snh--food .snh__foot, .snh--books .snh__foot { margin-top: 56px; }
}
/* Foods・Books：帯の上の細い線は外す（10/19 夜・Ivan） */
.snh--food .snh__foot, .snh--books .snh__foot { border-top: 0; }

/* ==== Books 一覧（10/19 夜・Ivan の参考3枚）：お勧めの1冊 .bfeat ＋ 表紙の升目 .bgrid ==== */
.bfeat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 96px);
  margin: calc(var(--gw) * 1.4) var(--side) 0; padding: clamp(40px, 5vw, 88px) clamp(24px, 5vw, 88px); border-radius: 28px;
  background: radial-gradient(ellipse 60% 70% at 72% 55%, #fff 0, #f4f7f2 55%, #e9eee6 100%); scroll-margin-top: 90px; }
.bfeat__kicker { font: italic 500 1.2rem/1 var(--latin); color: var(--green); }
.bfeat__title { margin-top: .6em; font: 500 clamp(28px, 3.2vw, 52px)/1.35 var(--serif); letter-spacing: .03em; }
.bfeat__title a { text-decoration: none; }
.bfeat__title a:hover { color: var(--green); }
.bfeat .bspec.is-feature { margin-top: 1.4em; }
.bfeat__lead { margin-top: 1.4em; max-width: 34em; font-size: .88rem; line-height: 2; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bfeat__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2em; }
.bfeat__mail { margin-top: 1.6em; font: italic 500 1rem/1 var(--latin); color: var(--mute); }
.bfeat__mail a { margin-left: .8em; font: .78rem/1 var(--sans); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
/* 右：立体の本（前）＋もう1冊（後ろ・少し小さく右へ）＋床の影 */
.bfeat__visual { position: relative; display: grid; place-items: center; min-height: clamp(340px, 34vw, 520px); }
.bfeat__visual::after { content: ""; position: absolute; left: 14%; right: 6%; bottom: 4%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(19,20,23,.22), transparent); }
.bfeat__book { position: relative; z-index: 2; display: block; translate: -14% 0; perspective: 1400px; }
.bfeat__book .book3d { --bw: clamp(200px, 19vw, 300px); --bd: 30px; transform: rotateY(-24deg); }
.bfeat__book .book3d__front { box-shadow: 24px 18px 50px rgba(19,20,23,.28); }
.bfeat__book:hover .book3d, .bfeat__book:focus-visible .book3d { transform: rotateY(-8deg) translateY(-10px); }
.bfeat__back { position: absolute; z-index: 1; left: 50%; top: 50%; width: clamp(150px, 14vw, 220px); translate: 8% -50%; transition: translate .8s var(--ease); }
.bfeat__back img { display: block; width: 100%; height: auto; aspect-ratio: 152 / 227; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: 18px 22px 40px -10px rgba(19,20,23,.35); filter: brightness(.92); }
.bfeat__visual:hover .bfeat__back { translate: 18% -50%; }

.bgrid { padding: calc(var(--gw) * 1.6) var(--side) calc(var(--gw) * 2.2); }
.bgrid__head { display: flex; align-items: baseline; gap: .6em; padding-bottom: .8em; border-bottom: 1px solid var(--line); font: italic 500 clamp(26px, 2.4vw, 38px)/1 var(--latin); }
.bgrid__head span { font: 300 .5em/1 "IBM Plex Sans", var(--sans); font-style: normal; color: var(--mute); }
.bgrid__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 220px), 1fr)); gap: clamp(36px, 4vw, 64px) clamp(18px, 2.4vw, 40px); margin-top: clamp(28px, 3vw, 48px); }
.btile { display: flex; flex-direction: column; align-items: center; text-align: center; color: inherit; text-decoration: none; transition-delay: var(--d); }
.btile__cover { position: relative; display: block; width: 100%; aspect-ratio: 152 / 227; border-radius: 2px 5px 5px 2px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(19,20,23,.08), 0 22px 36px -16px rgba(19,20,23,.4); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.btile__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 背の折り目の光と影（参考の「本らしさ」） */
.btile__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.28) 2.5%, rgba(0,0,0,.12) 5%, transparent 9%, transparent 96%, rgba(0,0,0,.08)); }
.btile:hover .btile__cover { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(19,20,23,.08), 0 34px 44px -18px rgba(19,20,23,.45); }
.btile__title { margin-top: 1.2em; font: 500 .95rem/1.6 var(--serif); letter-spacing: .04em; transition: color .3s; }
.btile:hover .btile__title { color: var(--green); }
.btile__price { margin-top: .3em; font: italic 500 1.25rem/1 var(--latin); color: var(--ink-2); }

@media (max-width: 900px) {
  .bfeat { grid-template-columns: 1fr; margin-inline: 12px; padding: 32px 22px 40px; gap: 8px; border-radius: 20px; }
  .bfeat__visual { order: -1; min-height: 300px; }
  .bfeat__book .book3d { --bw: 170px; --bd: 22px; }
  .bfeat__back { width: 130px; }
  .bgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
}
/* All Books の見出しを中央に・升目も余りが出たら中央へ寄せる（10/19 夜） */
.bgrid__head { justify-content: center; }
.bgrid__list { grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 15vw, 220px), 220px)); justify-content: center; }
@media (max-width: 900px) { .bgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==== 書籍の詳細：頭の作り直し（10/19 夜）：表紙をぼかして暗く敷く・大きな立体の本・白い字 ==== */
.bhero { --c: #1a1d1b; min-height: min(86svh, 860px); display: grid; align-items: center; padding: max(130px, calc(var(--gw) * 2)) var(--side) calc(var(--gw) * 1.2); background: #121513; color: #f2f4ef; }
.bhero::before { display: none; }
.bhero__bg { position: absolute; inset: -10%; z-index: 0; overflow: hidden; }
.bhero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) saturate(1.3) brightness(.55); transform: scale(1.2); }
.bhero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 30% 52%, transparent 0, rgba(10,12,11,.35) 60%, rgba(10,12,11,.75) 100%), linear-gradient(180deg, rgba(10,12,11,.45), transparent 30%, transparent 70%, rgba(10,12,11,.6)); }
.bhero__inner { z-index: 1; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.bhero__visual { perspective: none; padding: 1rem 0 3rem; }
.bhero__book { perspective: 1500px; animation: book-in 1.1s var(--ease) both, bheroFloat 8s ease-in-out 1.4s infinite; }
@keyframes bheroFloat { 50% { translate: 0 -12px; } }
.bhero__book .book3d { --bw: clamp(220px, 23vw, 340px); --bd: 34px; transform: rotateY(-24deg) rotateX(3deg); }
.bhero__visual:hover .book3d { transform: rotateY(-8deg) rotateX(0); }
.bhero__book .book3d__front { box-shadow: 30px 40px 70px -20px rgba(0,0,0,.7); }
.bhero__floor { bottom: .2rem; width: 70%; height: 34px; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.bhero__kicker a { color: #b9d6c2; }
.bhero__title { font-size: clamp(32px, 3.8vw, 58px); line-height: 1.35; color: #fff; }
.bhero__author { margin-top: .7em; font: italic 500 clamp(18px, 1.5vw, 24px)/1.3 var(--latin); color: #cfd5cb; }
.bhero__tags li { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #e9ece6; }
.bhero__facts { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); margin: 2rem 0 0; }
.bhero__facts dt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #aab2a6; }
.bhero__facts dd { margin: .3em 0 0; font-size: clamp(16px, 1.3vw, 20px); color: #fff; }
.bhero__buy { border-top-color: rgba(255,255,255,.22); }
.bhero__price { color: #fff; }
.bhero__price small { color: #aab2a6; }
.bhero .bpill { border-color: rgba(255,255,255,.4); color: #f2f4ef; }
.bhero .bpill:hover { background: #f2f4ef; border-color: #f2f4ef; color: var(--ink); }
.bhero .bpill.is-solid { background: #f2f4ef; border-color: #f2f4ef; color: var(--ink); }
.bhero .bpill.is-solid:hover { background: #8fc2a2; border-color: #8fc2a2; color: var(--ink); }
@media (max-width: 900px) {
  .bhero { min-height: 0; padding-top: 110px; }
  .bhero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .bhero__book .book3d { --bw: 190px; --bd: 26px; }
  .bhero__actions { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bhero__book { animation: none; } }
.bhero__title, .bfeat__title { word-break: auto-phrase; }
/* Books の頭：表紙の扇を外したので低く（10/19 夜） */
.snh--books { height: 60svh; min-height: 480px; max-height: 660px; }
@media (max-width: 900px) { .snh--books { height: auto; min-height: 0; max-height: none; } .snh--books .snh__foot { margin-top: 48px; } }

/* Foods・Books の頭をさらに低く（10/19 夜・約半分）：Foods は商品を字の右に並べる */
.snh--food, .snh--books { height: 46svh; min-height: 400px; max-height: 500px; }
.snh--food .snh__word, .snh--books .snh__word { top: max(84px, 10vh); font-size: clamp(90px, 12vw, 210px); }
.fdh__pack { left: calc(50% + 14.5vw); top: max(70px, 8vh); height: clamp(150px, 13vw, 230px); transform: none; }
.fdh__pack figcaption { display: none; }
@media (max-width: 900px) {
  .snh--food, .snh--books { height: auto; min-height: 0; max-height: none; padding-top: 84px; }
  .snh--food .snh__word, .snh--books .snh__word { top: auto; font-size: 22vw; }
  .fdh__pack { left: auto; top: auto; height: min(38vw, 22svh); margin: 4vw auto 0; }
  .snh--food .snh__foot, .snh--books .snh__foot { margin-top: 36px; }
}

/* Snugle の頭も Foods・Books と同じ低さと作りに（10/19 夜）：字はまん中・ケージは字の右・帯の上の線なし */
.snh--cage { height: 46svh; min-height: 400px; max-height: 500px; }
.snh--cage .snh__word { top: max(84px, 10vh); font-size: clamp(90px, 12vw, 210px); }
.snh--cage .snh__cage { left: calc(50% + 21vw); top: max(110px, 13vh); width: clamp(170px, 16vw, 280px); transform: none; }
.snh--cage .snh__cage figcaption { display: none; }
.snh--cage .snh__foot { border-top: 0; }
@media (max-width: 900px) {
  .snh--cage { height: auto; min-height: 0; max-height: none; justify-content: flex-start; padding-top: 84px; }
  .snh--cage .snh__word { position: relative; top: auto; font-size: 22vw; }
  .snh--cage .snh__cage { position: relative; left: auto; top: auto; width: min(72vw, 340px); margin: 6vw auto 0; }
  .snh--cage .snh__foot { margin-top: 36px; }
}

/* Contact の頭（10/19 夜）：Foods・Books・Snugle と同じ低い森の頭 */
.snh--contact { height: 46svh; min-height: 400px; max-height: 500px; }
.snh--contact .snh__word { top: max(84px, 10vh); font-size: clamp(90px, 12vw, 210px); }
.snh--contact .snh__word span:nth-child(7) { animation-delay: .67s; }
.snh--contact .snh__foot { border-top: 0; }
.snh--contact .snh__title small { margin-left: .7em; font-family: var(--serif); font-style: normal; font-size: .38em; letter-spacing: .1em; color: #cfd5cb; vertical-align: middle; }
.snh--contact .snh__facts a { color: inherit; text-decoration: none; }
.snh--contact .snh__facts a:hover { color: #8fc2a2; }
.snh--contact .snh__facts dd { font-size: clamp(16px, 1.4vw, 22px); }
.ct--after-hero { padding-top: calc(var(--gw) * 1.4); }
.ct--after-hero .lp__lead { margin-top: 0; }
#you { scroll-margin-top: 100px; }
@media (max-width: 900px) {
  .snh--contact { height: auto; min-height: 0; max-height: none; justify-content: flex-start; padding-top: 84px; }
  .snh--contact .snh__word { position: relative; top: auto; font-size: 20vw; }
  .snh--contact .snh__foot { margin-top: 36px; }
  .snh--contact .snh__facts { flex-direction: column; gap: 12px; }
  .ct--after-hero { padding-top: 48px; }
}

/* =====================================================================
   About MORELIA の記事8本（body.is-article）10/19 夜・2版目
   1版目（暗い全面写真の頭）は「テンプレっぽい」で却下。飾りの短い横線・— は使わない（本人が2回指摘）。
   頭：明るい地に大きな斜体の題＋縦書きの和名＋写真の帯（パララックス）
   本文：h2 ごとの章。番号と題は左に留める（data-pin）。章ごとに地の明るさを交互に
   下：章の移動札（JS・画面の下）／写真は画面いっぱいで見る（JS）／次の記事の写真つきの札
   ===================================================================== */
.is-article { --leaf: #9cc8a7; --paper: #edf1ea; }
.is-article .sec__en::before, .is-article .art h2 small::before { content: none; }

/* ---------- 頭 ---------- */
.ah { position: relative; padding: max(130px, calc(var(--gw) * 2.2)) var(--side) 0; display: grid; grid-template-columns: repeat(24, 1fr); }
.ah__top { grid-column: 1 / 25; display: flex; justify-content: space-between; align-items: baseline; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ah__kick { text-decoration: none; transition: color .3s; }
.ah__kick:hover { color: var(--green); }
.ah__main { grid-column: 1 / 25; margin-top: calc(var(--gw) * .35); padding-right: 6em; }
.ah__title { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(44px, 6.4vw, 112px); line-height: .96; letter-spacing: -.01em; max-width: 13em; }
.ah__title .line { display: block; overflow: hidden; padding-bottom: .1em; }
.ah__title .line > span { display: inline-block; transform: translateY(105%) rotate(5deg); transform-origin: left top; transition: transform 1.1s var(--ease) .25s; }
body.is-ready .ah__title .line > span { transform: none; }
/* 和名は縦書き。写真の帯の上端に掛かるよう下へはみ出させる */
/* 和名は縦書きの札。頭の高さには数えず（absolute）、写真の帯の上に垂らす */
.ah__ja { position: absolute; z-index: 2; right: var(--side); top: max(130px, calc(var(--gw) * 2.2)); padding: 1.1em .75em; background: var(--ink); color: #f2f4ef; writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .22em; line-height: 1.4;
  opacity: 0; translate: 0 16px; transition: opacity .9s var(--ease) .7s, translate .9s var(--ease) .7s; }
body.is-ready .ah__ja { opacity: 1; translate: none; }
.ah__img { grid-column: 1 / 25; margin: calc(var(--gw) * .6) calc(var(--side) * -1) 0; height: clamp(200px, 32vh, 340px); }
.ah:not(:has(.ah__img)) { padding-bottom: calc(var(--gw) * 1.6); }
.ah:not(:has(.ah__img)) { min-height: 0; }
/* 写真を地に敷く頭（FV の "bg": true）。写真は全面・字は白・右の黒い縦書きはそのまま */
.ah--bg { height: 46svh; min-height: 400px; max-height: 500px; padding-bottom: calc(var(--gw) * .8); grid-template-rows: 1fr auto; color: #f2f4ef; overflow: hidden; }
.ah--bg { isolation: isolate; }
.ah--bg .ah__img { position: absolute; inset: 0; z-index: -1; grid-column: auto; margin: 0; height: auto; background-color: #0d130f; background-size: 0 0; }
/* パララックスはトップだけなので、ここは写真を枠いっぱいに固定（ずらすと上に地の色が出る） */
.ah--bg .ah__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* PC：横長の頭に 4:3 の写真を切り抜くとヘビが半分消えるので、写真は丸ごと右に置き、左は同じ写真をぼかして敷く */
@media (min-width: 901px) {
  .ah--bg .ah__img::before { content: ""; position: absolute; inset: -60px; background: inherit; background-position: center; background-size: cover; filter: blur(30px) brightness(.55); }
  .ah--bg .ah__img img { left: auto; right: 0; width: auto; max-width: 62%; -webkit-mask-image: linear-gradient(to right, transparent, #000 28%); mask-image: linear-gradient(to right, transparent, #000 28%); }
  .ah--bg .ah__img::after { background: linear-gradient(to right, rgba(10,14,10,.55) 0%, rgba(10,14,10,.15) 55%, rgba(10,14,10,0) 100%), linear-gradient(to top, rgba(10,14,10,.35), rgba(10,14,10,0) 40%); }
}
.ah--bg .ah__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,10,.72) 0%, rgba(10,14,10,.25) 45%, rgba(10,14,10,.45) 100%); }
.ah--bg .ah__main { align-self: end; margin-top: 14px; }
/* 表現型ページ：頭を外へ出したので、下の .lp は上の余白を詰める */
.lp--after { padding-top: calc(var(--gw) * 1.6); }
/* 高さは books・food の頭（.snh--food, .snh--books）と同じ。900px 以下は中身なり */
@media (max-width: 900px) { .ah--bg { height: auto; min-height: 0; max-height: none; padding-bottom: 36px; } .ah--bg .ah__img::after { background: linear-gradient(to top, rgba(10,14,10,.82) 0%, rgba(10,14,10,.5) 50%, rgba(10,14,10,.5) 100%); } }
/* 肩の「About MORELIA」は題のすぐ上へ */
.ah--bg .ah__top { align-self: end; color: rgba(242,244,239,.8); }
.ah--bg .ah__kick:hover { color: #fff; }

/* ---------- 要約 ---------- */
.is-article .sum { padding-top: calc(var(--gw) * 1.8); }
.is-article .sum__name { font-size: .78rem; letter-spacing: .04em; color: var(--green); }
.is-article .sum__name .sep { display: inline-block; width: 4px; height: 4px; margin: 0 .9em; border-radius: 50%; background: currentColor; vertical-align: middle; }
.is-article .sum__h { margin-top: .7em; font-size: clamp(26px, 2.7vw, 46px); line-height: 1.45; }
.is-article .sum__body > p:first-child { font-family: var(--serif); font-size: clamp(16px, 1.25vw, 19px); line-height: 2.05; }
.is-article .sum__body a, .is-article .art p a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; border: 0; }
.is-article .sum__body a:hover, .is-article .art p a:hover { text-decoration-color: transparent; }
.is-article .sum__body a.btn { color: #fff; text-decoration: none; }
.is-article .sum__img img { box-shadow: 0 30px 60px -34px rgba(19,20,23,.5); }

/* ---------- 章 ---------- */
.ch-lead { padding-bottom: 0; }
.ch-lead .art { grid-column: 9 / 23; }
.ch { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); padding: calc(var(--gw) * 1.8) var(--side) calc(var(--gw) * 2); }
.ch--alt { background: var(--paper); }
.ch__head { grid-column: 2 / 8; }
.ch__pin { padding-right: 1.5em; }
.ch__no { display: block; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(64px, 7vw, 128px); line-height: .9; letter-spacing: -.03em; color: var(--green); }
.ch__en { margin-top: 1.1em; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ch__h { margin-top: .5em; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.8vw, 30px); line-height: 1.55; letter-spacing: .05em; }
.ch .ch__body { grid-column: 9 / 23; min-width: 0; }
.ch__body > :first-child { margin-top: 0; }
.is-article .art h3 { border-bottom: 0; padding-bottom: 0; color: var(--green); }
.is-article .art p { max-width: 40em; }
.is-article .stag figcaption::before { color: var(--green); font-family: var(--latin); font-style: italic; font-size: 1.3rem; line-height: 1; padding-top: 0; }
.ch--alt .stag .ph, .ch--alt .gal .ph { background: #fff; }

/* 写真：押すと画面いっぱいで見る（JS）。拡大できる印 */
.is-article a.zoomable { position: relative; cursor: zoom-in; }
.is-article a.zoomable::after { content: ""; position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(19,20,23,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5'/%3E%3C/svg%3E") center / 16px no-repeat; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease); }
.is-article a.zoomable:hover::after { opacity: 1; transform: none; }

/* ---------- 年表（Jan & the Jaguar） ---------- */
.art--tl { grid-column: 5 / 22; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 8.6em; top: 2.4em; bottom: 2.4em; width: 1px; background: var(--line); }
.tl__i { position: relative; display: grid; grid-template-columns: 7em 1fr; column-gap: 3.2em; padding: 1.5em 0; }
.tl__i::after { content: ""; position: absolute; left: calc(8.6em - 4px); top: 2.15em; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--green); }
.tl__i:has(.tl__y:not(.tl__y--none))::after { background: var(--green); }
.tl__y { padding-top: .1em; text-align: right; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(30px, 2.6vw, 44px); line-height: 1; color: var(--green); }
.tl__b p { line-height: 2.1; }
.art--tl .sign { margin: 2em auto 0; max-width: none; text-align: center; color: var(--green); }
/* 年表の下は署名だけなので、節の下余白と Next の上余白を詰める */
.sec:has(> .art--tl) { padding-bottom: calc(var(--gw) * 1.2); }
.sec:has(> .art--tl) + .an { padding-top: calc(var(--gw) * .8); }
/* 年表：スクロールで線が下へ伸び、線が届いた年と点が灯る（10/21）。JS が .is-anim と --p を付ける */
.tl.is-anim::after { content: ""; position: absolute; left: calc(8.6em - .5px); top: 2.4em; bottom: 2.4em; width: 2px; background: var(--green); transform-origin: top; transform: scaleY(var(--p, 0)); }
.tl.is-anim .tl__i::after { z-index: 1; background: var(--bg); transition: background-color .4s ease, transform .5s var(--ease); }
.tl.is-anim .tl__i.is-on::after { background: var(--green); transform: scale(1.35); }
.tl.is-anim .tl__y { opacity: .25; transition: opacity .6s ease; }
.tl.is-anim .tl__i.is-on .tl__y { opacity: 1; }

/* ---------- Types の一覧：通販の商品一覧のような升目（10/20）
   PC 3列×3段・≤760px 2列。写真は元が 340〜450px 幅なので升は 300px 程度まで（ぼかさない）。
   札は Books の All Books と同じ作り（中央ぞろえ・写真は影つきで浮く）。下に 番号／名前（h3）／詳しく見る（丸ボタン）。触れると写真が上がり、名前が緑、ボタンが墨の塗り ---------- */
.sum + .sec:has(.tyg) { padding-top: calc(var(--gw) * 2); }
.tyg__head, .tyg { max-width: 1000px; margin-left: auto; margin-right: auto; }
.tyg { list-style: none; padding: 0; margin-top: clamp(28px, 3vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 60px) clamp(16px, 2vw, 28px); }
.tyg li { display: flex; transition-delay: var(--d); }
/* 名前が2行の札があってもボタンの高さを段でそろえる（a を升の高さまで伸ばし、ボタンを下端へ） */
.tyg a { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; }
/* 写真は Books の表紙と同じ浮かせ方：薄い角丸・柔らかい影・触れると 8px 上がる */
.tyg__ph { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--ink); box-shadow: 0 2px 4px rgba(19,20,23,.08), 0 22px 36px -16px rgba(19,20,23,.4); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.tyg__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tyg__no { margin-top: 1.4em; font: 300 .72rem/1 "IBM Plex Sans", var(--sans); letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; }
.tyg__name { margin: .45em 0 1.1em; font: italic 500 clamp(21px, 1.9vw, 28px)/1.2 var(--latin); letter-spacing: -.005em; transition: color .3s; }
/* 詳しく見る：サイト共通の丸ボタン（.snbtn の明るい地の版・枠だけ→触れると墨の塗り） */
.tyg__more { display: inline-flex; align-items: center; margin-top: auto; padding: .8em 1.5em; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; letter-spacing: .06em; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.tyg a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
@media (hover: hover) {
  .tyg a:hover .tyg__ph { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(19,20,23,.08), 0 34px 44px -18px rgba(19,20,23,.45); }
  .tyg a:hover .tyg__name { color: var(--green); }
  .tyg a:hover .tyg__more { background: var(--ink); border-color: var(--ink); color: #f2f4ef; }
}
@media (max-width: 760px) {
  .sum + .sec:has(.tyg) { padding-top: 48px; }
  .tyg { grid-template-columns: 1fr 1fr; gap: 32px 12px; }
  .tyg__name { font-size: 19px; }
  .tyg__more { padding: .7em 1.2em; font-size: .74rem; }
}
/* ---------- Types の頭の箱 .tyf：Books の Pick up（.bfeat）をそのまま使い、右だけ写真2枚に（10/20）
   写真は元が 400px 前後なので手前 ≤400px・奥 ≤300px。手前は少し傾けて浮かせ、触れると水平に戻る ---------- */
.tyf { max-width: 1240px; margin-left: max(var(--side), calc((100% - 1240px) / 2)); margin-right: max(var(--side), calc((100% - 1240px) / 2)); }
.tyf + .sec { padding-top: calc(var(--gw) * 1.4); }
.tyf__lead { margin-top: 1.2em; font: italic 500 clamp(22px, 2vw, 30px)/1.2 var(--latin); color: var(--green); }
.tyf__front, .tyf__back { display: block; line-height: 0; }
.tyf__front { position: relative; z-index: 2; width: min(100%, clamp(260px, 26vw, 400px)); translate: -10% 0; rotate: -3deg; transition: rotate .8s var(--ease), translate .8s var(--ease); }
.tyf__front img, .tyf__back img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.tyf__front img { box-shadow: 24px 18px 50px rgba(19,20,23,.28); }
.tyf__back { position: absolute; z-index: 1; left: 50%; top: 50%; width: clamp(180px, 19vw, 300px); translate: 4% -62%; rotate: 4deg; transition: translate .8s var(--ease); }
.tyf__back img { box-shadow: 18px 22px 40px -10px rgba(19,20,23,.35); filter: brightness(.92); }
.tyf__visual:hover .tyf__front { rotate: 0deg; translate: -10% -8px; }
.tyf__visual:hover .tyf__back { translate: 14% -62%; }
@media (max-width: 900px) {
  .tyf { margin-left: 12px; margin-right: 12px; }
  .tyf__visual { min-height: 260px; }
  .tyf__front { width: 240px; }
  .tyf__back { width: 170px; }
}
/* 要約の英文（「3 & the more Types of Jaguars」）を大きな斜体の見出しに */
.sum:has(+ .sec .tyg) { padding-bottom: 0; }
.sum:has(+ .sec .tyg) .sum__h { word-break: auto-phrase; text-wrap: balance; }
.sum:has(+ .sec .tyg) .sum__body > p:first-child { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(28px, 3.2vw, 56px); line-height: 1.1; letter-spacing: -.01em; color: var(--green); }

/* ---------- Taxonomic History：学名の移り変わり（元は bunrui*.gif）。10/21 に組み直し ----------
   基亜種は1本の線（.txv__row：左に昔の名前を点で並べ、右の列に 2000年代。JS が横に流す年表 .txs に差し替える）。ほかの3群は「時間の物差し」（.txb：同じ目盛りに系統ごとの線）。
   赤は元の図の赤い矢印の2本だけ（.is-alt / .txv__row--alt）、薄い字は元の灰色の箱（.is-mute） */
.txv { --red: #b04a3a; --dot: #9ea39b; --trk: 1.35em; --now: clamp(220px, 19vw, 300px); display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--gw) * 1.3); margin-top: 1.2em; }
.txv__g { min-width: 0; }
.ch:has(.txv) .ch__head, .ch:has(.txv) .ch__body { grid-column: 2 / 24; }
.ch:has(.txv) .ch__pin { padding: 0 0 1.4em; }
.is-article .art .txv__h { margin: 0 0 1.2em; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .6em; color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: clamp(14px, 1vw, 16px); letter-spacing: .06em; }
.txv__h i { font-family: var(--latin); font-weight: 500; font-size: clamp(24px, 2vw, 32px); letter-spacing: 0; color: var(--green); }

/* 1件：年・学名・記載者・英名 */
.txv__e { display: grid; gap: .28em; font-size: .78rem; line-height: 1.5; }
.txv__t { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.1; color: var(--green); }
.txv__n i { font-family: var(--latin); font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: var(--ink); }
.txv__a { color: var(--mute); }
.txv__c { color: var(--ink-2); letter-spacing: .01em; }
.txv__note { margin-top: .3em; font-size: .7rem; line-height: 1.6; color: var(--mute); }
.txv__fn { display: inline-block; margin-left: .25em; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: .95em; line-height: 1; vertical-align: super; color: var(--green); text-decoration: none; }
.txv__fn:hover { text-decoration: underline; }
.is-alt .txv__fn { color: var(--red); }

/* ---- 基亜種：1本の線の上に点で昔の名前、線は右の列の点まで ---- */
.txv__rows { list-style: none; margin: 0; padding: 0; }
.txv__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--now); align-items: stretch; border-top: 1px solid var(--line); }
.txv__past { position: relative; list-style: none; margin: 0; padding: calc(var(--trk) + 16px) 2.2em 1.3em 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.1em 2.4em; }
.txv__past::before { content: ""; position: absolute; left: 0; right: 0; top: var(--trk); height: 1px; background: var(--dot); }
.txv__past > li { position: relative; }
.txv__past > li .txv__e { max-width: 15em; }
.txv__past > li::before { content: ""; position: absolute; left: 0; top: calc(-16px - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--green); }
.txv__now { position: relative; padding: calc(var(--trk) + 16px) 0 1.3em 1.6em; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .5); }
.txv__now::before { content: ""; position: absolute; left: calc(1.6em - 1px); top: calc(var(--trk) - 5px); width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.txv__now::after { content: ""; position: absolute; left: 0; top: var(--trk); width: 1.6em; height: 1px; background: var(--dot); }
.txv__now .txv__n i { font-size: 1.32rem; }

/* ---- 時間の物差し（.txb）：1750〜2000年代の同じ目盛りに、系統ごとの線。点は本当の年の位置（位置は HTML に直書き） ---- */
.txb__axis, .txb__row { display: grid; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); column-gap: 32px; }
.txb__axis { padding: 0 0 8px; }
.txb__axis::before { content: ""; }
.txb__sc { position: relative; height: 18px; border-bottom: 1px solid var(--line); }
.txb__sc span { position: absolute; bottom: 4px; translate: -50% 0; font-family: var(--latin); font-style: italic; font-size: 14px; line-height: 1; color: var(--mute); }
.txb__sc span::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 1px; height: 5px; background: var(--line); }
.txb__rows { list-style: none; margin: 0; padding: 0; }
.txb__row { align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.txb__lab { display: grid; gap: 1px; min-height: 3.2em; }
.txb__lab .txv__n i { font-size: 1.2rem; }
.txb__info { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; min-height: 1.6em; font-size: .72rem; line-height: 1.5; color: var(--ink-2); }
.txb__info .txv__t { font-size: .9rem; }
.txb__info .txv__n i { font-size: .95rem; }
.txb__tr { position: relative; height: 34px; }
.txb__ln { position: absolute; top: calc(50% - .5px); height: 1px; background: var(--green); transform-origin: left; }
.txb__dt { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.txb__dt::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--green); }
.txb__dt.is-now::before { inset: 6px; background: var(--green); box-shadow: none; }
.txb__dt.is-nyr::before { background: transparent; box-shadow: inset 0 0 0 1px var(--mute); }
.txb__dt.is-sel::before { outline: 1px solid var(--ink-2); outline-offset: 3px; }
.txb__row.is-alt .txb__ln { background: var(--red); }
.txb__row.is-alt .txb__dt::before { box-shadow: inset 0 0 0 1.5px var(--red); }
.txb__row.is-alt .txb__dt.is-now::before { background: var(--red); box-shadow: none; }
.txb__row.is-mute .txb__lab .txv__n i, .txb__row.is-mute .txb__info { color: var(--mute); }
.txb__row.is-mute .txb__dt::before { background: var(--mute); box-shadow: none; }

/* ---- 基亜種（PC）：節を止めて、縦のスクロールぶん年表を横に流す（.txs）。JS が .is-pin を付けたときだけ出し、下の .txv__rows は隠す ----
   慣性スクロール（.smooth は transform）なので sticky は使えない。枠を下へずらして止まって見せ、同じ量だけ列を左へ（Snugle の .sndh と同じ作り） */
.txs { display: none; }
.txv__g.has-txs > .txv__h, .txv__g.has-txs > .txv__rows, .txv__g.has-txs > .txb { display: none; }
.txs.is-pin { display: block; position: relative; }
.txs__frame { position: relative; width: 100vw; height: 100vh; margin-left: calc(var(--gw) * -2); overflow: hidden; will-change: transform; }
.txs__h { position: absolute; left: calc(var(--gw) * 2); top: max(110px, 13vh); z-index: 2; display: flex; align-items: baseline; gap: .6em; font-family: var(--serif); font-weight: 500; font-size: 15px; letter-spacing: .06em; }
.txs__h i { font-family: var(--latin); font-size: clamp(28px, 2.6vw, 44px); color: var(--green); }
.txs__track { position: absolute; left: 0; right: 0; top: 20vh; bottom: 9vh; }
.txs__list { --stem: 8.5vh; --it: clamp(250px, 21vw, 360px); position: relative; list-style: none; margin: 0; height: 100%; display: flex; width: max-content; padding: 0 22vw 0 calc(var(--gw) * 2); will-change: transform; }
/* 真ん中の線：進み具合（--p）だけ伸びる */
.txs__line { position: absolute; left: calc(var(--gw) * 2); right: calc(22vw + var(--it)); top: 50%; height: 1px; background: var(--green); transform: scaleX(var(--p, 0)); transform-origin: left; }
.txs__list::before { content: ""; position: absolute; left: calc(var(--gw) * 2); right: calc(22vw + var(--it)); top: 50%; height: 1px; background: var(--line); }
.txs__it { position: relative; flex: none; width: var(--it); height: 100%; }
.txs__dot { position: absolute; left: -6px; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--green); transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.txs__stem { position: absolute; left: 0; width: 1px; height: var(--stem); background: var(--green); transform: scaleY(0); transition: transform .6s var(--ease) .1s; }
.is-up .txs__stem { bottom: 50%; transform-origin: bottom; }
.is-down .txs__stem { top: 50%; transform-origin: top; }
.txs__tx { position: absolute; left: 0; right: 1.5em; display: grid; gap: .3em; padding-left: 16px; }
.is-up .txs__tx { bottom: calc(50% + var(--stem) - .4em); }
.is-down .txs__tx { top: calc(50% + var(--stem) - .4em); }
/* 文字は1行ずつ下から（マスク） */
.txs__m { display: block; overflow: hidden; }
.txs__l { display: block; transform: translateY(105%); transition: transform .8s var(--ease) calc(.15s + var(--q) * .07s); }
.txs__t { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(34px, 3.3vw, 58px); line-height: 1; color: var(--green); }
.txs__n i { font-family: var(--latin); font-weight: 500; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.2; color: var(--ink); }
.txs__a { font-size: .8rem; color: var(--mute); }
.txs__c { font-size: .8rem; color: var(--ink-2); }
.txs__it.is-on .txs__dot { transform: none; }
.txs__it.is-on .txs__stem { transform: none; }
.txs__it.is-on .txs__l { transform: none; }
/* 終点（2000年代）：塗りの大きな点・名前を大きく */
.txs__it.is-now .txs__dot { left: -11px; top: calc(50% - 11px); width: 22px; height: 22px; background: var(--green); box-shadow: none; }
.txs__it.is-now .txs__n i { font-size: clamp(26px, 2.4vw, 40px); color: var(--green); }
/* 3群（10/21）：名前が変わるものは下に「→ 今の名前」。赤は元の図の赤い矢印の2本 */
.txs__to { font-size: .8rem; color: var(--ink-2); }
.txs__to i { font-family: var(--latin); font-weight: 500; font-size: 1.15rem; color: var(--green); }
.txs__it.is-alt .txs__t, .txs__it.is-alt .txs__to i { color: var(--red); }
.txs__it.is-alt .txs__stem { background: var(--red); }
.txs__it.is-alt .txs__dot { box-shadow: inset 0 0 0 2px var(--red); }
/* 最後の大きな点：右に 2000年代の名前を縦に並べる（線の高さを中心に） */
.txs__it.is-fin .txs__tx { top: 50%; bottom: auto; right: auto; translate: 0 -50%; width: max-content; max-width: calc(var(--it) + 18vw); padding-left: 34px; gap: .45em; }
.txs__it.is-fin .txs__t { margin-bottom: .1em; }
.txs__f { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7em; }
.txs__f i { font-family: var(--latin); font-weight: 500; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.2; color: var(--ink); }
.txs__fc { font-size: .78rem; color: var(--ink-2); }
.txs__fc b { font-weight: 400; color: var(--mute); margin-right: .6em; }
.txs__m.is-mute .txs__f i, .txs__m.is-mute .txs__fc { color: var(--mute); }
/* ---- 基亜種（スマホ・タブレット・狭い画面）：PC と同じ横の年表を、画面の大きさに合わせて（10/21）。JS が .is-m を足す
   タッチ端末は慣性スクロールが無いので枠は sticky で止める（.is-sticky）。狭い PC 窓は PC と同じく枠をずらす */
.txs.is-m .txs__frame { width: 100vw; height: 100svh; margin-left: calc(50% - 50vw); }
.txs.is-m.is-sticky .txs__frame { position: sticky; top: 0; will-change: auto; }
.txs.is-m .txs__h { left: 24px; right: 24px; top: calc(48px + 11svh); flex-wrap: wrap; gap: .1em .6em; font-size: 13px; }
.txs.is-m .txs__h i { font-size: clamp(26px, 7.4vw, 40px); }
.txs.is-m .txs__track { top: 24svh; bottom: 11svh; }
.txs.is-m .txs__list { --stem: min(7svh, 56px); --it: clamp(220px, 64vw, 340px); padding: 0 6vw 0 24px; }
.txs.is-m .txs__line, .txs.is-m .txs__list::before { left: 24px; right: calc(6vw + var(--it)); }
.txs.is-m .txs__tx { right: .6em; padding-left: 12px; gap: .2em; }
.txs.is-m .txs__t { font-size: clamp(32px, 9vw, 48px); }
.txs.is-m .txs__n i { font-size: clamp(18px, 5vw, 24px); }
.txs.is-m .txs__it.is-now .txs__n i { font-size: clamp(22px, 6.2vw, 30px); }
.txs.is-m .txs__to i { font-size: 1rem; }
.txs.is-m .txs__it.is-fin .txs__tx { max-width: calc(var(--it) + 20vw); padding-left: 22px; gap: .3em; }
.txs.is-m .txs__f { display: grid; gap: 0; }
.txs.is-m .txs__f i { font-size: clamp(18px, 5vw, 22px); }
.txs.is-m .txs__fc { font-size: .7rem; line-height: 1.4; }
.txs.is-m .txs__a, .txs.is-m .txs__c { font-size: .74rem; }

.txv__notes { margin: 1.4em 0 0; display: grid; gap: .5em; font-size: .78rem; line-height: 1.8; max-width: 46em; }
.txv__notes div { display: grid; grid-template-columns: 2.4em 1fr; }
.txv__notes dt { color: var(--green); font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 1.05rem; line-height: 1.6; }
.txv__notes dd { margin: 0; color: var(--ink-2); }

/* ---- 動き（JS が .is-anim を付けたときだけ。動きを減らす設定では付かない） ---- */
.txv.no-tr *, .txv.no-tr *::before, .txv.no-tr *::after { transition: none !important; }
/* 基亜種の線：左→右に引き、点が年の順に出て、最後に右の列の点 */
.txv.is-anim .txv__past::before, .txv.is-anim .txv__now::after { transform: scaleX(0); transform-origin: left; }
.txv.is-anim .txv__past::before { transition: transform calc(.5s + var(--n) * .22s) cubic-bezier(.45, 0, .25, 1) .3s; }
.txv.is-anim .txv__now::after { transition: transform .3s ease-out calc(.75s + var(--n) * .22s); }
.txv.is-anim .txv__past > li::before { transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(.35s + var(--i) * .22s); }
.txv.is-anim .txv__past > li .txv__e { opacity: 0; translate: 0 6px; transition: opacity .6s ease calc(.4s + var(--i) * .22s), translate .6s var(--ease) calc(.4s + var(--i) * .22s); }
.txv.is-anim .txv__now::before { transform: scale(0); transition: transform .55s cubic-bezier(.3, 1.6, .5, 1) calc(1s + var(--n) * .22s); }
.txv.is-anim .txv__now .txv__e { opacity: 0; transition: opacity .7s ease calc(1.05s + var(--n) * .22s); }
.txv.is-anim .is-drawn .txv__past::before, .txv.is-anim .is-drawn .txv__now::after,
.txv.is-anim .is-drawn .txv__past > li::before, .txv.is-anim .is-drawn .txv__now::before { transform: none; }
.txv.is-anim .is-drawn .txv__past > li .txv__e, .txv.is-anim .is-drawn .txv__now .txv__e { opacity: 1; translate: none; }
/* 物差し：線は行の順に左から引かれ、点は線が届いた順に出る */
.txv.is-anim .txb__ln { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.45, 0, .25, 1) var(--d); }
.txv.is-anim .txb__dt::before { transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) + var(--x) * 1.4s); }
.txv.is-anim .txb__lab { opacity: 0; transition: opacity .7s ease var(--d); }
.txv.is-anim .txb__row.is-drawn .txb__ln, .txv.is-anim .txb__row.is-drawn .txb__dt::before { transform: none; }
.txv.is-anim .txb__row.is-drawn .txb__lab { opacity: 1; }

@media (max-width: 900px) {
  .ch:has(.txv) .ch__head, .ch:has(.txv) .ch__body { grid-column: 1 / 25; }
  /* 基亜種：縦の線に点 → 下の「今」へ */
  .txv__row { grid-template-columns: 1fr; }
  .txv__past { flex-direction: column; flex-wrap: nowrap; gap: 1em; padding: 1.1em 0 1em 22px; }
  .txv__past::before { left: 3px; right: auto; top: 1.5em; bottom: 0; width: 1px; height: auto; }
  .txv__past > li::before { left: -22px; top: .45em; }
  .txv__now { padding: 1em 1em 1.1em 22px; border-left: 0; }
  .txv__now::before { left: -2px; top: 1.35em; }
  .txv__now::after { left: 3px; top: 0; width: 1px; height: 1.35em; }
  .txv.is-anim .txv__past::before, .txv.is-anim .txv__now::after { transform: scaleY(0); transform-origin: top; }
  /* 物差し（スマホ）：名前は線の上に、昔の名前は線の下に常に並べる（触らなくても読める）。点は少し大きく */
  .txb__axis, .txb__row { grid-template-columns: minmax(0, 1fr); }
  .txb__row { padding: 18px 0 16px; }
  .txb__lab { min-height: 0; gap: 2px; }
  .txb__lab .txv__n i { font-size: 1.3rem; line-height: 1.2; }
  .txb__info { min-height: 0; font-size: .74rem; }
  .txb__sc span { font-size: 12px; }
  .txb__tr { height: 40px; }
  .txb__dt { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .txb__dt::before { inset: 11px; }
  .txb__dt.is-now::before { inset: 9px; }
  .txb__steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
  .txb__steps li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: baseline; column-gap: 10px; padding: 2px 0; border-radius: 4px; transition: background .25s; }
  .txb__steps .txv__t { font-size: 1rem; line-height: 1.3; }
  .txb__steps .txv__n i { font-size: 1.02rem; line-height: 1.3; color: var(--ink-2); }
  .txb__steps .txv__a { grid-column: 2; font-size: .7rem; line-height: 1.4; }
  .txb__steps li.is-sel { background: rgba(255, 255, 255, .6); }
  .txb__row.is-alt .txb__steps .txv__t { color: var(--red); }
  .txv.is-anim .txb__steps { opacity: 0; transition: opacity .7s ease calc(var(--d) + .5s); }
  .txv.is-anim .txb__row.is-drawn .txb__steps { opacity: 1; }
}
@media (min-width: 901px) { .txb__steps { display: none; } }

/* ---------- 種類のカード（Types） ---------- */
.is-article .card__img { transition: background-color .5s ease; }
.is-article .card a:hover .card__img { background: #fff; }
.is-article .card__name { transition: color .3s ease; }
.is-article .card__name::after { content: "→"; font-family: var(--sans); font-style: normal; font-size: .9rem; transition: transform .4s var(--ease); }
.is-article .card a:hover .card__name { color: var(--green); }
.is-article .card a:hover .card__name::after { transform: translateX(4px); }

/* ---------- 次の記事 ---------- */
.an { padding: calc(var(--gw) * 1.6) var(--side) calc(var(--gw) * 1.4); }
.an__next { position: relative; display: grid; align-content: end; min-height: clamp(300px, 44vh, 480px); padding: calc(var(--gw) * .9); overflow: hidden; background: var(--ink); color: #f2f4ef; text-decoration: none; isolation: isolate; }
.an__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .62; transform: scale(1.04); transition: transform 1.4s var(--ease), opacity .6s ease; }
.an__next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,20,23,0) 30%, rgba(19,20,23,.82)); }
.an__next:hover .an__img { transform: none; opacity: .78; }
.an__lb { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,244,239,.75); }
.an__t { margin-top: .25em; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(40px, 6vw, 104px); line-height: 1; letter-spacing: -.01em; }
.an__ja { margin-top: .9em; font-family: var(--serif); font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .14em; }
.an__go { position: absolute; right: calc(var(--gw) * .9); bottom: calc(var(--gw) * .9); display: grid; place-items: center; width: clamp(56px, 5vw, 84px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(242,244,239,.5); font-size: 1.4rem; transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease); }
.an__next:hover .an__go { background: #f2f4ef; color: var(--ink); border-color: #f2f4ef; transform: translateX(6px); }
.an__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2em; margin-top: 1.8em; }
.an__prev, .an__up { display: flex; flex-direction: column; gap: .3em; text-decoration: none; font-family: var(--latin); font-style: italic; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; transition: color .3s; }
.an__up { text-align: right; }
.an__prev small, .an__up small { font-family: var(--sans); font-style: normal; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.an__prev:hover, .an__up:hover { color: var(--green); }

/* ---------- 章の移動札（画面の下・JS で .smooth の外に置く） ---------- */
.dock { position: fixed; z-index: 45; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(19,20,23,.9); color: #f2f4ef; box-shadow: 0 14px 40px -12px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  translate: -50% 140%; opacity: 0; transition: translate .55s var(--ease), opacity .4s ease; font-size: .82rem; }
.dock.is-on { translate: -50% 0; opacity: 1; }
.dock button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; height: 40px; border-radius: 999px; }
.dock__arw { width: 40px; font-size: 1rem; transition: background-color .25s; }
.dock__arw:hover { background: rgba(255,255,255,.12); }
.dock__arw[disabled] { opacity: .3; cursor: default; background: none; }
.dock__cur { position: relative; display: flex !important; align-items: baseline; gap: .7em; padding: 0 1.1em; max-width: min(56vw, 360px); overflow: hidden; }
.dock__cur b { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 1.1rem; color: var(--leaf); }
.dock__cur span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 読んだ量：札の下の縁に細い光 */
.dock__bar { position: absolute; left: 18px; right: 18px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.dock__bar i { display: block; height: 100%; background: var(--leaf); transform-origin: left; transform: scaleX(0); }
.dock__list { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; border-radius: 18px; background: rgba(19,20,23,.94); box-shadow: 0 14px 40px -12px rgba(0,0,0,.45);
  opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity .3s, translate .3s var(--ease); min-width: 260px; }
.dock.is-open .dock__list { opacity: 1; translate: none; pointer-events: auto; }
.dock__list a { display: flex; gap: .9em; align-items: baseline; padding: .6em .8em; border-radius: 10px; color: inherit; text-decoration: none; line-height: 1.5; }
.dock__list a:hover, .dock__list a[aria-current="true"] { background: rgba(255,255,255,.1); }
.dock__list b { flex: none; font-family: var(--latin); font-style: italic; font-weight: 500; color: var(--leaf); }

/* ---------- 写真を画面いっぱいで見る ---------- */
.zv { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 64px 72px 24px; background: rgba(12,14,13,.94); color: #f2f4ef; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.zv.is-open { opacity: 1; pointer-events: auto; }
.zv img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; box-shadow: 0 30px 80px -30px #000; transform: scale(.97); transition: transform .45s var(--ease); }
.zv.is-open img { transform: none; }
.zv__cap { margin-top: 16px; max-width: 60em; font-size: .85rem; line-height: 1.7; text-align: center; color: rgba(242,244,239,.85); }
.zv button { all: unset; position: absolute; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(242,244,239,.35); font-size: 1.1rem; transition: background-color .25s, color .25s; }
.zv button:hover { background: #f2f4ef; color: var(--ink); }
.zv__x { top: 16px; right: 16px; }
.zv__p { left: 16px; top: 50%; translate: 0 -50%; }
.zv__n { right: 16px; top: 50%; translate: 0 -50%; }

@media (max-width: 1024px) {
  .ch__head, .ch .ch__body, .ch-lead .art, .art--tl { grid-column: 1 / 25; }
  .ch__pin { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .9em; padding: 0 0 1.4em; }
  .ch__no { font-size: 56px; }
  .ch__en { margin-top: 0; }
  .ch__h { flex-basis: 100%; }
}
@media (max-width: 767px) {
  .ah { padding-top: 112px; }
  .ah__main { padding-right: 0; }
  .ah__ja { position: relative; top: auto; right: auto; grid-column: 1 / 25; justify-self: start; margin: 1em 0 -22px; writing-mode: horizontal-tb; padding: .7em 1em; letter-spacing: .14em; }
  .ah__img { height: 46vw; min-height: 220px; margin-top: 0; }
  .ah--bg .ah__img { height: auto; min-height: 0; }
  .ah--bg .ah__ja { margin-bottom: 0; }
  .ch { padding-top: 64px; padding-bottom: 72px; }
  .tl::before, .tl.is-anim::after { left: 4.6em; }
  .tl__i { grid-template-columns: 3.6em 1fr; column-gap: 2em; padding: 1.2em 0; }
  .tl__i::after { left: calc(4.6em - 4px); top: 1.75em; }
  .tl__y { font-size: 24px; }
  .an__next { min-height: 340px; padding: 24px; }
  .an__go { right: 24px; bottom: 24px; }
  .an__t { padding-right: 64px; }
  .an__row { flex-wrap: wrap; }
  .zv { padding: 64px 12px 20px; }
  .zv__p, .zv__n { top: auto; bottom: 16px; translate: none; }
  .zv__cap { padding: 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ah__title .line > span, .ah__ja { transform: none; translate: none; opacity: 1; }
}

/* ==== Snugle Cage：節ごとの色の配分を見直し（10/20）
   全面が同じ薄緑（qino の地）だったのを、暖かい紙色＋深い森の緑の2系統に。
   緑は「選んでいる印」と番号だけに絞る。リズム：森（頭）→ 紙 → 紙 → 森（Detail）→ 紙 → 墨（問い合わせ） ==== */
.page-cage {
  --bg: #f2efe9;                  /* 紙：白い製品写真が沈まない暖かい白 */
  --bg2: #e9e4db;
  --ink-2: #4b4a45;
  --mute: #8a867d;
  --line: rgba(40, 34, 24, .16);
  --green: #2e5b42;
  --forest: #1a251f;              /* 頭の写真の森と同じ系統 */
  --on: var(--green);             /* 切り替えの「選んでいる印」 */
}
.page-cage .sncards .card a { background: rgba(255, 255, 255, .7); }
.page-cage .snf button:hover { border-color: var(--green); }
.page-cage .snf button.is-on, .page-cage .snf .snf__view button.is-on { background: var(--on); border-color: var(--on); }
.page-cage .sntab__pill, .page-cage .sntab__list:not(.is-js) button[aria-selected="true"] { background: var(--on); }
.page-cage .snf__view, .page-cage .sntab__list { background: rgba(40, 34, 24, .06); }
/* Detail：深い森の地に白い写真の札を浮かせる */
.page-cage .sndh { background: var(--forest); color: #ecebe5; --ink: #ecebe5; --ink-2: #b4bab2; --mute: #8e978f; --line: rgba(255, 255, 255, .16); }
.page-cage .sndh .sec__en { color: #8e978f; }
.page-cage .sndh__n { color: #a8c2a6; }
.page-cage .sndh__t em { border-color: #a8c2a6; color: #a8c2a6; }
.page-cage .sndh__ph { box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); }
/* 問い合わせ：真っ黒でなく、頭と同じ森の墨 */
.page-cage .page-cta { background: #131915; }
.page-cage .page-cta .contact-card:hover { color: #a8c2a6; }

/* ==== 切り替えのアニメーション（10/20）：絞り込み・表示・タブは、選んだ札へ緑の印がすべる（main.js の .snsw） ==== */
.snf__row, .snf__view { position: relative; }
.snsw { position: absolute; z-index: 0; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); border-radius: 999px; background: var(--on, var(--ink)); transform: translate(var(--x, 0), var(--y, 0)); transition: transform .6s cubic-bezier(.34, 1.45, .5, 1), width .6s cubic-bezier(.34, 1.45, .5, 1), height .6s var(--ease); pointer-events: none; }
.is-sw > button { position: relative; z-index: 1; }
.page-cage .snf .is-sw > button.is-on, .snf .is-sw > button.is-on { background: transparent; border-color: transparent; }
.snf button, .sntab__list button { transition: background .3s, color .45s, border-color .3s, transform .2s; }
.snf button:active, .sntab__list button:active { transform: scale(.95); }
.snf__count b { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .snsw { transition: none; } }

/* ==== 問い合わせの2枚（Snugle Cage・10/20）
   札まるごと押せる・右に丸いボタン・番号は読みやすい直立の数字・「こちらから」→「メールフォーム」
   PC の TEL は押すと番号をコピー（main.js の [data-copy]）。スマホはそのまま発信 ==== */
.cc-row { gap: 16px; border: 0; }
.cc-row .cc { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l go" "v go" "h go"; align-items: center; column-gap: 24px; row-gap: .35em; padding: clamp(24px, 2.6vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .02); transition: background .45s var(--ease), border-color .45s var(--ease), color .4s; }
.cc-row .cc + .cc { padding-left: clamp(24px, 2.6vw, 40px); border-left: 1px solid var(--line); }
.cc-row .cc:hover, .cc-row .cc:focus-visible { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .34); color: inherit; outline: none; }
.cc .contact-card__label { grid-area: l; font-size: .82rem; letter-spacing: .06em; color: var(--ink-2); }
.cc__value { grid-area: v; display: flex; align-items: baseline; gap: .5em; font-family: "IBM Plex Sans", var(--sans); font-weight: 300; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.15; letter-spacing: .03em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.cc__value small { font-size: .36em; font-weight: 500; letter-spacing: .16em; color: var(--ink-2); transform: translateY(-.35em); }
.cc__value--ja { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2vw, 32px); letter-spacing: .1em; }
.cc__hint { grid-area: h; font-size: .74rem; letter-spacing: .06em; color: #8e978f; min-height: 1.4em; }
.cc__hint::after { content: attr(data-touch); }
@media (hover: hover) and (pointer: fine) { .cc__hint::after { content: attr(data-desk); } }
.cc.is-copied .cc__hint::after { content: attr(data-done); color: #a8c2a6; }
.cc__go { grid-area: go; display: grid; place-items: center; width: clamp(52px, 4.4vw, 68px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .34); transition: background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); }
.cc__go svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.cc:hover .cc__go, .cc:focus-visible .cc__go { background: #ecebe5; border-color: #ecebe5; color: #131915; transform: scale(1.06); }
.cc:hover .cc__go svg[viewBox] path[d^="M5"], .cc:focus-visible .cc__go path[d^="M5"] { transform: translateX(2px); }
.cc:active .cc__go { transform: scale(.94); }
@media (max-width: 900px) {
  .cc-row { grid-template-columns: 1fr; gap: 12px; }
  .cc-row .cc, .cc-row .cc + .cc { padding: 22px 20px; border-left: 1px solid var(--line); }
  .cc__value { font-size: clamp(24px, 7vw, 32px); }
}
/* 番号が丸ボタンと並ぶと 1280 幅で入らない → 丸は右上、番号は札の幅いっぱい */
.cc-row .cc { grid-template-areas: "l go" "v v" "h h"; align-items: start; }
.cc__go { align-self: start; margin-bottom: -.4em; }
.cc__value { font-size: clamp(22px, 1.9vw, 34px); letter-spacing: .01em; }

/* ==== お問い合せフォーム（10/20・4版目）：誌面型（左に斜体の番号・右に下線の欄）
   地の色は3案を data-bg で切り替え：light（紙・既定）／mix（02 だけ森）／dark（全部森）。試しは ?bg=mix など
   色はすべて変数（--fg は "R, G, B" の形で、線や薄い字は rgba(var(--fg), .xx)） ==== */
.ct, .ct [data-tone] {
  --bgc: #f2efe9; --fg: 26, 30, 27; --acc: #2e5b42; --on: #f2efe9; --bad: #a5432f; --field: transparent;
}
.ct[data-bg="dark"], .ct[data-bg="mix"] #cage, .ct[data-bg="dark"] [data-tone] {
  --bgc: #17211b; --fg: 232, 233, 227; --acc: #a8c2a6; --on: #17211b; --bad: #d98a73;
}
.page-contact .ct { --ctl: clamp(220px, 28%, 340px); background: var(--bgc); color: rgb(var(--fg)); --ink: rgb(var(--fg)); --line: rgba(var(--fg), .16); }
.page-contact .ct .lp__aside { display: none; }
.page-contact .ct .lp__main { grid-column: 3 / 23; }
@media (max-width: 1024px) { .page-contact .ct .lp__main { grid-column: 1 / -1; } }
/* フォームの見出し（h2）：説明文と注意書きの代わり・大きさは .sec__ja と同じ（10/20） */
.page-contact .ct__title { margin: 0 0 0 var(--ctl); font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.5vw, 40px); line-height: 1.6; letter-spacing: .03em; color: rgb(var(--fg)); }
.ct-form { margin-top: clamp(40px, 5vw, 72px); }
/* 節：左に番号と題・右に欄。mix の 02 は画面の端まで森を伸ばす */
.ct-g { position: relative; padding: clamp(40px, 4.4vw, 64px) 0 clamp(40px, 4.4vw, 64px) var(--ctl); border-top: 1px solid rgba(var(--fg), .16); background: var(--bgc); color: rgb(var(--fg)); }
.ct-g + .ct-g { padding-top: clamp(40px, 4.4vw, 64px); border-top: 1px solid rgba(var(--fg), .16); }
.ct[data-bg="mix"] #cage { border-top-color: transparent; box-shadow: 0 0 0 100vmax var(--bgc); clip-path: inset(0 -100vmax); }
.ct[data-bg="mix"] #cage + .ct-g { border-top-color: transparent; margin-top: -1px; position: relative; z-index: 1; }
.ct-g__h { position: absolute; left: 0; top: clamp(40px, 4.4vw, 64px); width: calc(var(--ctl) - 40px); display: flex; flex-direction: column; align-items: flex-start; gap: .6em; margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1.25vw, 19px); letter-spacing: .06em; line-height: 1.6; color: rgb(var(--fg)); }
.ct-g__h span { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(44px, 4.2vw, 72px); line-height: .9; letter-spacing: 0; color: var(--acc); }
/* 欄の名前：小さく・必須は点＋文字だけ */
.ct-f { position: relative; margin-bottom: 2.2em; }
.page-contact .ct .ct-f__l { display: flex; align-items: baseline; gap: .8em; font-size: .8rem; letter-spacing: .08em; color: rgba(var(--fg), .74); transition: color .3s; }
.ct-f:focus-within .ct-f__l { color: rgb(var(--fg)) !important; }
.ct__req { margin: 0; padding: 0; background: none; color: var(--acc); font-size: .68rem; letter-spacing: .1em; }
.ct__req::before { content: "● "; font-size: .6em; vertical-align: .25em; }
/* 欄：下線だけ・押すと左から色の線が伸びる */
.ct-f input, .ct-f textarea, .ct-f select { margin-top: .35em; padding: .7em 0 .8em; border: 0; border-bottom: 1px solid rgba(var(--fg), .3); border-radius: 0; background: transparent; color: rgb(var(--fg)); font-size: 1rem; caret-color: var(--acc); transition: border-color .3s; }
.ct-f input::placeholder, .ct-f textarea::placeholder { color: rgba(var(--fg), .34); }
.ct-f input:hover, .ct-f textarea:hover, .ct-f select:hover, .ct-f input:focus, .ct-f textarea:focus, .ct-f select:focus { outline: none; border-color: rgba(var(--fg), .55); box-shadow: none; }
.ct-f:not(:has(textarea[name="Page01:13"]))::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); pointer-events: none; }
.ct-f:has(.ct-f__msg)::after { bottom: 1.9em; }
.ct-f:focus-within::after { transform: none; }
.ct-f input:user-invalid { border-color: var(--bad); }
.ct-f select option { background: var(--bgc); color: rgb(var(--fg)); }
.ct-sel::after { right: .2em; color: rgba(var(--fg), .5); }
.ct-f input:-webkit-autofill { -webkit-text-fill-color: rgb(var(--fg)); box-shadow: 0 0 0 100px var(--bgc) inset; }
.ct-g#message .ct-f textarea { margin-top: 0; padding: 1em 1.1em; border: 1px solid rgba(var(--fg), .3); border-radius: 4px; background: rgba(var(--fg), .03); line-height: 1.9; }
.ct-g#message .ct-f textarea:focus { border-color: var(--acc); }
.ct-row { gap: 0 clamp(24px, 3vw, 48px); }
.ct-f__msg { display: block; min-height: 1.4em; margin-top: .55em; font-size: .72rem; letter-spacing: .06em; }
.ct-f__msg[data-state="bad"] { color: var(--bad); }
.ct-f__msg[data-state="ok"] { color: var(--acc); }
.ct-f__msg[data-state="ok"]::before { content: "✓ "; }
/* 選ぶ札：細い線の丸札。選ぶと地と逆の色で塗る */
.ct-sub { margin: 2.2em 0 .9em; font-size: .8rem; letter-spacing: .08em; color: rgba(var(--fg), .74); }
.ct-g__h + .ct-sub { margin-top: 0; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chips span { display: inline-flex; align-items: center; padding: .55em 1.1em; border: 1px solid rgba(var(--fg), .24); border-radius: 999px; background: transparent; color: rgb(var(--fg)); font-size: .84rem; letter-spacing: .03em; transition: background .35s var(--ease), color .35s, border-color .35s; }
.ct-chips span::before { content: none; }
.ct-chips label:hover span { border-color: rgba(var(--fg), .6); }
.ct-chips input:checked + span { background: rgb(var(--fg)); border-color: rgb(var(--fg)); color: var(--on); }
.ct-chips label:active span { transform: scale(.96); }
.ct-chips input:focus-visible + span { outline: 1px solid var(--acc); outline-offset: 3px; }
/* 送信：サイト共通の丸ボタン（.snbtn と同じ寸法）・中央 */
.ct-send { display: flex; flex-direction: column; align-items: center; gap: 1.4em; margin-left: 0; padding: 0; border: 0; }
.ct-submit { display: inline-flex; align-items: center; padding: .95em 2.6em; border: 1px solid rgb(var(--fg)); border-radius: 999px; background: rgb(var(--fg)); color: var(--on); font: inherit; font-size: .88rem; letter-spacing: .06em; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ct-submit:hover { background: var(--acc); border-color: var(--acc); }
.ct-submit:focus-visible { outline: 1px solid var(--acc); outline-offset: 4px; }
.ct-reset { display: block; margin: 0; color: rgba(var(--fg), .5); font-size: .76rem; }
@media (max-width: 760px) {
  .page-contact .ct { --ctl: 0px; }
  .ct-g__h { position: static; width: auto; flex-direction: row; align-items: baseline; gap: .8em; margin-bottom: 1.6em; }
  .ct-g__h span { font-size: 40px; }
}
/* 3案を見比べる小さな切り替え（?bg= を付けたときだけ出す） */
.ct-bgsw { position: fixed; z-index: 90; left: 50%; bottom: 20px; translate: -50% 0; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(19, 20, 23, .86); backdrop-filter: blur(8px); font-size: .76rem; }
.ct-bgsw a { padding: .5em 1.1em; border-radius: 999px; color: #e8e9e3; text-decoration: none; letter-spacing: .06em; }
.ct-bgsw a.is-on { background: #e8e9e3; color: #131417; }
/* ---- 10/20：フォームを画面のまん中の箱に（参考：角丸の白い箱・ほぼ見えない影）
   箱の中は誌面型のまま（左に番号）。地は箱より一段暗い1色 ---- */
.ct { --page: #ebe7df; --card: #fbfaf7; --pad: clamp(24px, 5vw, 80px); }
.ct[data-bg="dark"] { --page: #121a15; --card: #17211b; }
.page-contact .ct { background: var(--page); --ctl: clamp(170px, 25%, 260px); }
.page-contact .ct .lp__main { grid-column: 1 / -1; width: 100%; max-width: 1080px; margin: 0 auto; box-sizing: border-box; padding: var(--pad); border: 1px solid rgba(var(--fg), .06); border-radius: 24px; background: var(--card); box-shadow: 0 1px 2px rgba(40, 34, 24, .03), 0 40px 80px -48px rgba(40, 34, 24, .28); }
.ct[data-bg="dark"] .lp__main { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.ct-g { background: var(--card); }
.ct[data-bg="mix"] #cage { background: #17211b; box-shadow: 0 0 0 var(--pad) #17211b; clip-path: inset(0 calc(var(--pad) * -1)); }
.ct-f input:-webkit-autofill { box-shadow: 0 0 0 100px var(--card) inset; }
.ct[data-bg="mix"] #cage .ct-f input:-webkit-autofill { box-shadow: 0 0 0 100px #17211b inset; }
.ct-f select option { background: var(--card); }
@media (max-width: 760px) {
  /* 上の --ctl: clamp(…) が 760px 以下の --ctl: 0 を上書きしていた（スマホで欄が154pxに潰れる・10/20 修正） */
  .page-contact .ct { padding-left: 10px; padding-right: 10px; --ctl: 0px; }
  .page-contact .ct .lp__main { border-radius: 16px; --pad: 22px; }
}

/* 10/20 脱AIっぽさ（design-audit 44点）
   ・特大の斜体セリフを減らす。SNUGLE は立体へ（index の Google Fonts に立体 400/500 を追加）
   ・SNUGLE まわりの字間を空けた大文字ラベルをやめる
   ・明るい地の .sec__en は 2.75:1 だったので濃くする（下層ページ用） */
.shop__brand { letter-spacing: .02em; text-transform: none; font-size: 1rem; }
.shop__brand b { font-style: normal; font-weight: 400; font-size: clamp(44px, 5vw, 84px); letter-spacing: 0; }
/* 学名なので斜体は残す（二名法の慣例）。大きさだけ落とす */
.boelen__title { font-weight: 400; font-size: clamp(36px, 3.6vw, 60px); letter-spacing: 0; }
.sec__en { color: #5f645e; }

/* 10/20 脱AIっぽさ その2
   ・使用可能カードは単色に（ブランド色が4色並ぶと差し色が散る）。ロゴは白の濃淡だけで描く
   ・Morelia boeleni は学名なので斜体のまま、見出しの大きさを 40px 未満に
   ・小さすぎる字（フッター・お問い合せの札）と、スマホで押しにくいリンクを直す */
.pcard--visa, .pcard--master, .pcard--id, .pcard--paypal { background: linear-gradient(135deg, #2b2d33, #131417); }
.pcard__chip { background: linear-gradient(135deg, #8a8d86, #55585a 60%, #7d807a); }
.pcard--master .pcard__brand i { background: rgba(255,255,255,.85); }
.pcard--master .pcard__brand i + i { background: rgba(255,255,255,.45); mix-blend-mode: normal; opacity: 1; }
.pcard--paypal .pcard__brand { color: rgba(255,255,255,.6); }
.boelen__title { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.15; }
.ft__small { font-size: 12px; }
.cc .contact-card__label { font-size: 12px; }
.pcard__name { font-size: max(12px, .78vw); }
.notice__contact dd a { display: inline-block; padding: 11px 0; }
/* 見出しの段差：トップの節見出しを一段大きく（全段 1.25倍未満だった）。下層ページは触らない */
/* 1025px 以上は節見出しの列が 26.7vw なので、9字（営業変更のお知らせ）と「CAGE ショールーム」が1行に収まる 2.6vw に。それ未満は列が全幅 */
.info .sec__ja, .shop .sec__ja, .pay .sec__ja { font-size: 34px; line-height: 1.4; }
@media (min-width: 1025px) { .info .sec__ja, .shop .sec__ja, .pay .sec__ja { font-size: min(2.6vw, 44px); white-space: nowrap; } }
.boelen__title { font-size: clamp(24px, 2vw, 29px); }
.boelen__text .btn, .pay__note { font-size: max(12px, .9rem); }
.ft address a { display: inline-block; padding: 11px 0; }
.notice__body p { max-width: 38em; }
.ft__links a { display: inline-block; padding: 11px 0; }
.pay__tag { background: var(--ink); color: #e9ece6; }

/* 10/20 使用可能カード：一覧 .payl（旧サイトのロゴ gif を等倍で。拡大するとぼけるので伸ばさない） */
.payl { grid-column: 10 / 25; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.payl__row { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); }
.payl__logo { flex: none; width: 86px; height: 56px; display: grid; place-items: center; background: #fff; border-radius: 8px; }
.payl__logo img { display: block; }
.payl__logo--wide { width: 214px; height: 96px; }
.payl__name { font-family: "IBM Plex Sans", var(--sans); font-size: 1.05rem; letter-spacing: .02em; }
.payl__text { display: grid; gap: .4em; }
.payl__note { font-size: max(12px, .9rem); color: var(--ink-2); line-height: 1.8; }
.payl__row--on { margin-top: 12px; padding: 20px; background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 1024px) { .payl { grid-column: 1; } }
@media (max-width: 560px) {
  .payl__row--on { flex-direction: column; align-items: flex-start; }
}
.payl__logo--wide { width: auto; height: auto; background: none; border-radius: 0; } /* gif の地が白なので箱は要らない（箱の中の箱になる） */
.payl__logo--wide { width: 170px; justify-items: start; } /* PayPal 2024 の SVG。地に直接置く */


/* ================= ABOUT MORELIA の輪（10/20・ヒーローの直後） =================
   6枚を円に並べ、.ring__track（4画面ぶん）を進むと回る。いちばん上の1枚だけ色を戻し、題を輪のまん中に出す。
   写真は 700px 幅なので大きくしない */
.ring { background: var(--ink); color: #e9ece6; padding-top: calc(var(--gw) * 2.4); --w: clamp(120px, 13vw, 210px); }
.ring__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding: 0 var(--side); }
.ring__title { font-family: var(--latin); font-style: italic; font-weight: 400; font-size: clamp(40px, 6vw, 104px); line-height: 1; }
.ring__all { font-size: .8rem; letter-spacing: .08em; color: rgba(233,236,230,.75); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .2em; transition: color .3s; }
.ring__all:hover { color: #fff; }
.ring__track { height: 400vh; height: 400svh; }
.ring__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.has-smooth .ring__pin { position: relative; } /* 慣性スクロール中は main.js が translate で留める */
.ring__wheel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: 0; padding: 0; list-style: none; }
.ring__wheel a { position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: 3 / 4; translate: -50% -50%; filter: grayscale(1) brightness(.5); transition: filter .6s; }
.ring__wheel a.is-on { filter: none; }
.ring__wheel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ring__mid { position: relative; z-index: 2; max-width: 520px; padding: 0 var(--side); text-align: center; pointer-events: none; }
.ring__no { font-size: .7rem; letter-spacing: .12em; color: #8f948c; font-variant-numeric: tabular-nums; }
.ring__t { margin-top: .3em; font-family: var(--latin); font-size: clamp(28px, 3.4vw, 56px); line-height: 1.1; }
.ring__d { margin: .6em auto 0; max-width: 30em; font-size: .82rem; line-height: 1.8; color: rgba(233,236,230,.7); }
@media (max-width: 760px) { .ring { --w: 28vw; } .ring__d { display: none; } }

/* お知らせ：本文と連絡先はたたむ */
.notice__more { margin-top: 1.6em; }
.notice__more summary { cursor: pointer; font-size: .9rem; color: var(--ink-2); list-style: none; display: inline-flex; align-items: center; gap: .6em; padding: 11px 0; }
.notice__more summary::-webkit-details-marker { display: none; }
.notice__more summary::after { content: "+"; font-size: 1.1rem; line-height: 1; transition: transform .4s var(--ease); }
.notice__more[open] summary::after { transform: rotate(45deg); }


/* ================= 電話・メールの札（10/20・案A） =================
   メールが主役（明るい面・幅広）、電話は線だけ。アイコンは封筒と電話、字の組みは2枚でそろえる */
.ccx { grid-template-columns: 1.25fr 1fr; gap: 16px; border-top: 0; }
.ccx__c { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4em 24px; padding: clamp(24px, 2.8vw, 44px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, .18); color: inherit; text-decoration: none; transition: background .4s, border-color .4s, transform .4s var(--ease); }
.ccx__c > :not(.ccx__go) { grid-column: 1; }
.ccx__c--main { background: #ecebe5; color: #131417; border-color: #ecebe5; }
.ccx__c--main:hover { transform: translateY(-3px); }
.ccx__c--sub:hover, .ccx__c--sub:focus-visible { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .34); outline: none; color: inherit; }
.ccx__lab { font-size: .8rem; letter-spacing: .06em; opacity: .7; }
.ccx__val { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.55vw, 30px); white-space: nowrap; letter-spacing: .04em; line-height: 1.3; color: inherit; text-decoration: none; }
.ccx__val--num { font-family: "IBM Plex Sans", var(--sans); font-weight: 300; letter-spacing: .03em; font-variant-numeric: lining-nums tabular-nums; }
.ccx__cover { position: absolute; inset: 0; border-radius: inherit; }
.ccx__addr { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: .5em; margin-top: .6em; padding: .4em .9em; border: 1px solid currentColor; border-radius: 999px; font-size: .82rem; letter-spacing: .03em; color: inherit; text-decoration: none; opacity: .75; transition: opacity .3s; }
.ccx__addr:hover { opacity: 1; }
.ccx__addr svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ccx__addr.is-copied::after { content: "コピーしました"; margin-left: .3em; color: #2e5b42; }
.ccx__go { grid-column: 2; grid-row: 1 / span 4; display: grid; place-items: center; width: clamp(52px, 4.4vw, 68px); aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; transition: background .4s, color .4s, border-color .4s; }
.ccx__go svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ccx__c--main .ccx__go { background: #131417; color: #ecebe5; border-color: #131417; }
.ccx__c--sub .ccx__go { border-color: rgba(255, 255, 255, .34); }
.ccx__c--sub:hover .ccx__go { background: #ecebe5; color: #131417; border-color: #ecebe5; }
.ccx .cc__hint { grid-area: auto; }
@media (max-width: 900px) { .ccx { grid-template-columns: 1fr; gap: 12px; } .ccx__c { padding: 22px 20px; } }

/* 10/20：電話・メールの札と CAGE ショールームの間を詰める（.sec の上下 3列ぶん＋3列ぶん → 1.4＋1.4） */
.info { padding-bottom: calc(var(--gw) * 1.4); }
.info + .shop { padding-top: calc(var(--gw) * 1.4); }
@media (max-width: 1024px) { .info { padding-bottom: 48px; } .info + .shop { padding-top: 48px; } }
/* 10/20：暗い面どうしの境目（輪→お知らせ→ショールーム→…）が小数の位置で終わり、body の明るい地が 1px の線で透ける。
   後ろの面から上へ 2px 墨を伸ばして潰す */
.ring + .sec, .info + .sec { box-shadow: 0 -2px 0 var(--ink); }
.ring { position: relative; box-shadow: 0 -2px 0 var(--ink); }

/* ---------- 10/20：ベーレンの記事（boeleni_howtokeep）02〜04 ----------
   02 写真は千鳥の2列で穴が空いていた → 横一列で高さをそろえる（--r＝写真の横÷縦。切り抜かない）
   03 数字は大きく・ケージの目安と MB-D60 の写真
   04 書籍ページ（shop/books/）と同じ立体の本＋仕様＋釦 */
.jrow { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 18px); margin-top: 1.6em; }
.jrow + .jrow { margin-top: clamp(10px, 1.2vw, 18px); }
.jrow > figure { flex: var(--r) 1 calc(var(--r) * 9rem); min-width: 0; }
.jrow a { display: block; text-decoration: none; overflow: hidden; }
.jrow img { display: block; width: 100%; height: auto; transition: transform 1s var(--ease); }
.jrow a:hover img { transform: scale(1.03); }
.jrow figcaption { margin-top: .6em; font: italic 500 .95rem/1.4 var(--latin); color: var(--ink-2); }
.art .jrow + p, .art .jrow + h3 { margin-top: 1.8em; }

#tokucho .art h3, #shiiku .art h3 { margin-top: 3em; padding: 0 0 .7em; font-size: clamp(20px, 1.75vw, 27px); color: var(--ink); }

.art-temp { gap: 0; border-top: 0; background: color-mix(in srgb, var(--green) 7%, transparent); border-radius: 14px; }
.art-temp div, .art-temp div + div { padding: 1.2em 1.4em; border-bottom: 0; }
.art-temp div + div { border-left: 1px solid var(--line); }
.art-temp dt { letter-spacing: .06em; }
.art-temp dd { margin-top: .3em; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.15; color: var(--green); white-space: nowrap; }
.art-temp dd small { margin-left: .15em; font: .85rem/1 var(--sans); color: var(--ink-2); }
.art-temp + p { margin-top: 1.4em; }
.art-data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(12px, 1.4vw, 20px); margin-top: 1.4em; align-items: stretch; }
.art-temp--2 { margin-top: 0; grid-template-columns: 1fr; }
.art-temp--2 div + div { border-left: 0; border-top: 1px solid var(--line); }
.art-temp--2 dd small { margin: 0 .1em; }
.art-cage { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; }
.art .art-cage { border: 0; }
.art-cage img { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: 10px; transition: transform .8s var(--ease); }
.art-cage:hover img { transform: scale(1.04); }
.art-cage span { padding: .8em 1.1em 1em; font-size: .78rem; color: var(--mute); }
.art-cage b { display: block; font: italic 500 1.05rem/1.4 var(--latin); color: var(--ink); }

.myth { border-top: 0; display: grid; gap: 12px; }
.myth > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 1.6em; padding: 1.6em 1.8em; border: 0; border-radius: 14px; background: var(--bg); }
.myth dt { align-items: flex-start; font-size: 1.1rem; line-height: 1.6; }
.myth dt::before { flex: none; margin-top: .05em; }
.myth dd { margin-top: 0; font-size: .95rem; }

.steps { gap: 10px; border-top: 0; padding-left: 0; list-style: none; }
.art .art-data + p, .art .steps + p, .art .myth + p { margin-top: 1.6em; }
.steps li { grid-template-columns: 3.2em 1fr; padding: 1.1em 1.4em 1.1em 1.1em; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--green) 7%, transparent); }
.steps li::before { content: counter(st, decimal-leading-zero); font-size: 1.6rem; line-height: 1.2; }

.abook { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: .4em;
  padding: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 56px); border-radius: 28px;
  background: radial-gradient(ellipse 70% 80% at 28% 50%, #fff 0, #f4f7f2 55%, #e9eee6 100%); }
.abook__book { position: relative; display: grid; place-items: center; padding: 1rem 0 2.2rem; perspective: 1400px; }
.abook__book .book3d { z-index: 1; --bw: clamp(170px, 15vw, 230px); --bd: 28px; transform: rotateY(24deg) rotateX(2deg); }
.abook__book .book3d__front { box-shadow: 26px 26px 46px -18px rgba(19, 20, 23, .4); }
.abook__book:hover .book3d { transform: rotateY(-8deg) translateY(-8px); }
.abook__floor { position: absolute; bottom: .6rem; width: 62%; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(19, 20, 23, .26), transparent); filter: blur(4px); }
.abook__kicker { font: italic 500 1.1rem/1 var(--latin); }
.abook__kicker a { color: var(--green); text-decoration: none; }
.art .abook__title { margin: .5em 0 0; padding: 0; font: 500 clamp(26px, 2.6vw, 40px)/1.3 var(--serif); letter-spacing: .03em; }
.art .abook__title::before, .art .abook__title::after { content: none; }
.abook__title a { color: inherit; text-decoration: none; }
.abook__title a:hover { color: var(--green); }
.abook__author { margin-top: .5em; font: italic 500 1rem/1.5 var(--latin); color: var(--ink-2); }
.abook__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1em; padding: 0; list-style: none; }
.abook__tags li { padding: .25em .9em; border: 1px solid var(--line); border-radius: 99px; font-size: .74rem; color: var(--ink-2); }
.art .abook__tx { margin-top: 1.2em; font-size: .88rem; line-height: 2; color: var(--ink-2); }
.abook .bspec.is-detail { margin-top: 1.4em; font-size: .84rem; }
.abook .bspec.is-detail > div { padding: .6em 0; }
.abook .bspec .is-price dd { font-size: 1.6rem; }
.abook__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6em; }
.art .abook__cta a { border-bottom: 1px solid var(--line); }
.art .abook__cta a.is-solid { border-color: var(--ink); }

@media (max-width: 900px) {
  .abook { grid-template-columns: 1fr; text-align: left; }
  .art-data { grid-template-columns: 1fr; }
  .art-cage img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .myth > div { grid-template-columns: 1fr; gap: .9em; padding: 1.3em 1.2em; }
  .art-temp div + div { border-left: 0; border-top: 1px solid var(--line); }
  .jrow > figure { flex-basis: calc(var(--r) * 6rem); }
  .abook { padding: 28px 20px; border-radius: 20px; }
  .abook__cta .bpill.is-lg { min-width: 0; flex: 1; }
}

/* 10/20：お問い合わせフォームの「書籍の札」（?book=slug のときだけ） */
.ct-book { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 1.2em; align-items: start; margin-bottom: clamp(24px, 3vw, 40px);
  padding: 1.2em 1.3em; border: 1px solid rgba(var(--fg, 0, 0, 0), .16); border-radius: 14px; scroll-margin-top: 110px; }
.ct-book[hidden] { display: none; }
.ct-book__img { width: 60px; height: auto; aspect-ratio: 152 / 227; object-fit: cover; border-radius: 1px 3px 3px 1px; box-shadow: 0 10px 18px -10px rgba(19, 20, 23, .45); }
.ct-book__k { font-size: .72rem; letter-spacing: .08em; color: rgba(var(--fg, 0, 0, 0), .55); }
.ct-book__t { margin-top: .3em; font: 500 clamp(18px, 1.5vw, 22px)/1.4 var(--serif); letter-spacing: .03em; }
.ct-book__m { margin-top: .2em; font: italic 500 .95rem/1.5 var(--latin); color: rgba(var(--fg, 0, 0, 0), .7); }
.ct-book__chips { margin-top: 1em; }
.ct-book__x { width: 2.2em; height: 2.2em; border: 1px solid rgba(var(--fg, 0, 0, 0), .2); border-radius: 50%; background: none; color: inherit; font-size: .95rem; cursor: pointer; }
.ct-book__x:hover { background: rgb(var(--fg, 0, 0, 0)); color: var(--bgc, #fff); }
.ct-g[hidden], .toc li[hidden] { display: none; }

/* 10/20：フッターの Access／お問い合わせ／Instagram は丸い絵の釦に（字は aria-label と title） */
.ft__links { gap: 10px; align-items: center; }
.ft__links a { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: inherit; transition: background .3s, color .3s, border-color .3s; }
.ft__links a:hover, .ft__links a:focus-visible { background: #e9ece6; border-color: #e9ece6; color: var(--ink); }
.ft__links svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


/* ---------- 10/20：フッター作り直し（tools/footer.mjs）----------
   地はヒーローの森を1枚にした静止画（パララックスなし）。上は墨で前の面とつなぎ、下ほど濃くして字を読ませる */
.ft { position: relative; isolation: isolate; overflow: hidden; background: #0f1411; color: #eef1ea;
  padding: clamp(72px, 9vw, 150px) var(--side) 28px; --line: rgba(255, 255, 255, .2); }
.ft__bg { position: absolute; inset: 0; z-index: -1; }
.ft__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ft__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 20, 17, .92) 0%, rgba(15, 20, 17, .55) 30%, rgba(15, 20, 17, .5) 55%, rgba(12, 16, 13, .9) 88%, #0c100d 100%); }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: end; }
.ft__en { font: italic 500 clamp(18px, 1.6vw, 24px)/1.3 var(--latin); color: rgba(238, 241, 234, .78); }
.ft__catch { margin-top: .4em; font: 500 clamp(28px, 3.4vw, 54px)/1.35 var(--serif); letter-spacing: .04em; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.ft__cta { display: inline-flex; align-items: center; gap: 1.4em; margin-top: 1.8em; padding: 1em 1.4em 1em 1.7em; border-radius: 999px;
  background: #eef1ea; color: #131417; font-size: .9rem; letter-spacing: .06em; text-decoration: none; transition: background .4s var(--ease), color .4s var(--ease); }
.ft__cta::after { content: "→"; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #131417; color: #eef1ea; transition: transform .4s var(--ease); }
.ft__cta:hover { background: var(--green); color: #fff; }
.ft__cta:hover::after { transform: translateX(4px); }
.ft__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em; }
.ft__h { padding-bottom: .8em; margin-bottom: .6em; border-bottom: 1px solid var(--line); font: italic 500 1.05rem/1 var(--latin); color: rgba(238, 241, 234, .6); }
.ft__col ul { list-style: none; margin: 0; padding: 0; }
.ft__col a { display: flex; flex-direction: column; padding: .55em 0; color: inherit; text-decoration: none; }
.ft__col .en { font: 500 .95rem/1.3 var(--latin); letter-spacing: .04em; transition: transform .4s var(--ease); }
.ft__col .ja { margin-top: .15em; font-size: .7rem; color: rgba(238, 241, 234, .55); }
.ft__col a:hover .en { transform: translateX(6px); }
.ft .ft__big { margin-top: clamp(48px, 6vw, 110px); font-size: 13.4vw; line-height: .9; text-shadow: 0 2px 40px rgba(0, 0, 0, .3); }
.ft__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(20px, 2.4vw, 36px); padding-top: 22px; border-top: 1px solid var(--line); }
.ft__bar address { font-style: normal; font-size: .82rem; color: rgba(238, 241, 234, .75); }
.ft__bar .ft__links { margin: 0 0 0 auto; padding: 0; list-style: none; }
.ft__bar .ft__links a { width: 44px; height: 44px; border-color: rgba(255, 255, 255, .28); background: rgba(15, 20, 17, .35); }
.ft .ft__copy { flex-basis: 100%; margin: 0; padding: 0; border: 0; font-size: 11.5px; color: rgba(238, 241, 234, .5); }
@media (max-width: 900px) {
  .ft__top { grid-template-columns: 1fr; align-items: start; }
  .ft .ft__big { font-size: 15.5vw; }
}
@media (max-width: 560px) {
  .ft__bar .ft__links { margin-left: 0; }
  .ft__cta { margin-top: 1.4em; }
}
/* 10/20 夕：上段（一言・釦・メニュー）を撤去して最小限に。森を見せる余白を上にとる */
.ft { padding-top: clamp(140px, 16vw, 260px); }
.ft .ft__big { margin-top: 0; }
.ft__bg::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(19, 20, 23, .75) 10%, rgba(15, 20, 17, .35) 34%, rgba(15, 20, 17, .45) 60%, rgba(12, 16, 13, .92) 92%, #0c100d 100%); }
/* 10/20 夕：スマホは住所・絵の釦・著作権をまん中にそろえる */
@media (max-width: 560px) {
  .ft__bar { flex-direction: column; justify-content: center; text-align: center; gap: 16px; }
  .ft__bar .ft__links { margin: 0; justify-content: center; }
  .ft .ft__copy { flex-basis: auto; }
}

/* about のお問い合わせ：札を見出しの高さにそろえる */
.page-cta .ccx { margin-top: 0; align-self: start; }

/* ==========================================================
   10/20 Ivan：Snugle のラインナップを通販の商品札らしく
   ・写真は札の上いっぱい。縦長のケージ（MV など）も切れないよう contain で収める
   ・品番を大きく、寸法は小さく、価格をはっきり
   ・「詳細を見る」は札の幅いっぱいの太い墨の丸ボタン
   ========================================================== */
.sncards { gap: 22px; }
.sncards .card a, .page-cage .sncards .card a { padding: 0; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid rgba(19, 20, 23, .07); box-shadow: 0 1px 2px rgba(19, 20, 23, .04); }
.sncards .card a:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 2px 4px rgba(19, 20, 23, .05), 0 26px 44px -22px rgba(19, 20, 23, .38); }
.sncards .card__img { position: relative; aspect-ratio: 1 / 1; padding: 0; border-radius: 0; background: #f3f3ef; }
.sncards .card__img img { position: absolute; inset: 12%; width: 76%; height: 76%; max-height: none; object-fit: contain; mix-blend-mode: multiply; } /* 写真の白地を札の地に溶かす */
.sncards .card a:hover .card__img img { transform: scale(1.04); }
.sncards .card__depth { left: 12px; top: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(19, 20, 23, .08); }
.sncards .card__name, .sncards .card__size, .sncards .card__note, .sncards .card__price { padding: 0 20px; }
.sncards .card__name { margin-top: 18px; font-family: "IBM Plex Sans", var(--sans); font-size: 1.12rem; font-weight: 500; letter-spacing: .02em; }
.sncards .card__size { margin-top: .35em; font-size: .78rem; letter-spacing: .04em; color: var(--mute); }
.sncards .card__note { margin-top: .5em; font-size: .78rem; line-height: 1.7; color: var(--ink-2); }
.sncards .card__price { margin-top: .6em; margin-bottom: 18px; font-size: 1.85rem; }
.sncards .card a::after { content: "詳細を見る　→"; align-self: stretch; margin: auto 16px 16px; padding: 1.15em 1em; border-radius: 999px; background: var(--ink); color: var(--bg); text-align: center; font-size: .9rem; font-weight: 500; letter-spacing: .06em; line-height: 1; }
.sncards .card a:hover::after { background: var(--green); color: #fff; }
@media (max-width: 640px) {
  .sncards { gap: 10px; }
  .sncards .card a, .page-cage .sncards .card a { padding: 0; border-radius: 14px; }
  .sncards .card__img { padding: 0; border-radius: 0; }
  .sncards .card__name, .sncards .card__size, .sncards .card__note, .sncards .card__price { padding: 0 12px; }
  .sncards .card__name { margin-top: 12px; font-size: .9rem; }
  .sncards .card__size, .sncards .card__note { font-size: .66rem; }
  .sncards .card__price { font-size: 1.25rem; margin-bottom: 14px; }
  .sncards .card a::after { display: block; margin: auto 10px 10px; padding: 1em .5em; font-size: .74rem; letter-spacing: .04em; } /* 10/20 スマホでも出す */
}


/* 10/20 Ivan：機種の詳細（引き出し）の問い合わせボタン。2つを縦に重ね、文字はまん中。
   中身が長いときも押せるよう、引き出しの下端に貼りつける */
.sndr__cta { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 10px; margin: 1.8em -40px -36px; padding: 18px 40px 24px; background: linear-gradient(to bottom, transparent, var(--bg) 18px); }
.sndr__btn { display: flex; align-items: center; justify-content: center; gap: .8em; min-height: 58px; padding: .9em 1.4em; border-radius: 999px; text-align: center; text-decoration: none; font-size: .95rem; font-weight: 500; letter-spacing: .04em; line-height: 1.35; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.sndr__btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sndr__btn span { display: grid; }
.sndr__btn small { font-size: .68rem; font-weight: 400; letter-spacing: .02em; opacity: .7; }
.sndr__btn--main { background: var(--ink); color: #f2f4ef; }
.sndr__btn--main:hover { background: var(--green); transform: translateY(-2px); }
.sndr__btn--tel { border: 1px solid rgba(19, 20, 23, .22); color: var(--ink); font-family: "IBM Plex Sans", var(--sans); font-variant-numeric: tabular-nums; }
.sndr__btn--tel:hover { border-color: var(--ink); background: #fff; }
@media (max-width: 800px) {
  .sndr__cta { margin: 1.6em -22px -28px; padding: 16px 22px calc(18px + env(safe-area-inset-bottom)); }
  .sndr__btn { min-height: 54px; font-size: .9rem; }
}


/* ==========================================================
   10/20 Ivan：Snugle の特長6行。番号は外し、動きをサイトの作法に合わせ直す
   ・入るとき：下の罫が左から引かれ → 英字が下から覗くように上がる（.lp__title と同じ）→ 見出し・本文 → 写真は .px と同じ下からの切り抜き
   ・触れたとき：白い面・灰色→カラーの演出はやめ、写真が少し寄り、英字が緑に（.tyg__name と同じ）
   ========================================================== */
.snfr { grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.7fr) clamp(120px, 11vw, 170px); grid-template-areas: "en h p ph"; border-bottom: 0; }
.snfr::before { content: none; }
.snfr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease); }
.snfr[data-reveal] { opacity: 1; transform: none; }
.snfr__en { clip-path: inset(-20% -10% 100% -10%); transform: translateY(40%); transition: clip-path 1s var(--ease) .15s, transform 1s var(--ease) .15s, color .4s; }
.snfr:hover .snfr__en { translate: none; }
.snfr__h, .snfr__p { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.snfr__h { transition-delay: .3s; }
.snfr__p { transition-delay: .4s; }
.snfr__ph { clip-path: inset(18% 0 0 0); opacity: 0; transition: clip-path 1.2s var(--ease) .35s, opacity .6s ease .35s; }
.snfr__ph img { filter: none; opacity: 1; transform: none; transition: transform .9s var(--ease); }
.snfr.is-in::after { transform: none; }
.snfr.is-in .snfr__en { clip-path: inset(-20% -10% -20% -10%); transform: none; }
.snfr.is-in .snfr__h, .snfr.is-in .snfr__p { opacity: 1; transform: none; }
.snfr.is-in .snfr__ph { clip-path: inset(0 0 0 0); opacity: 1; }
@media (hover: hover) {
  .snfr:hover .snfr__en { color: var(--green); }
  .snfr:hover .snfr__ph img { transform: scale(1.06); }
}
@media (max-width: 900px) {
  .snfr { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "en ph" "h ph" "p p"; }
}
@media (prefers-reduced-motion: reduce) {
  .snfr::after, .snfr.is-in::after { transform: none; }
  .snfr__en, .snfr__h, .snfr__p, .snfr__ph { clip-path: none; opacity: 1; transform: none; transition: none; }
}

/* ==========================================================
   10/20 Ivan：品番の見かた。上の特長6行（.snfr）と同じ組みと動き
   ・列：品番（英字の大見出し）｜タイプ名｜向いているヘビ｜機種を見る（写真の位置）
   ・入るとき：罫が左から → 品番が下から覗く → 文 → ボタン
   ・行ごと押せる（main.js：その品番で上の一覧を絞り込む）
   ========================================================== */
.sntypes { margin-bottom: calc(var(--gw) * .4); }
.sntypes .tbl { min-width: 0; font-size: inherit; }
.sntypes thead { display: none; }
.sntypes .tbl tbody { display: block; }
.sntypes .tbl tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.7fr) clamp(120px, 11vw, 170px); align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: clamp(16px, 1.8vw, 24px) 0; cursor: pointer; }
.sntypes .tbl th, .sntypes .tbl td { padding: 0; border: 0; width: auto; white-space: normal; }
.sntypes tr[data-reveal] { opacity: 1; transform: none; }
.sntypes .tbl tbody tr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease); }
.sntypes .tbl tbody th { display: flex; align-items: center; gap: .6em; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(30px, 3.3vw, 58px); line-height: 1; letter-spacing: 0; clip-path: inset(-20% -10% 100% -10%); transform: translateY(40%); transition: clip-path 1s var(--ease) .15s, transform 1s var(--ease) .15s, color .4s; }
.sntypes__code { font: inherit; }
.sntypes__new { padding: .2em .7em; border-radius: 999px; border: 1px solid currentColor; color: var(--green); font: 500 .62rem/1.4 "IBM Plex Sans", var(--sans); font-style: normal; letter-spacing: .14em; }
.sntypes__la { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: clamp(16px, 1.25vw, 20px); letter-spacing: .04em; color: var(--ink); }
.sntypes .tbl td:nth-of-type(2) { font-size: .86rem; line-height: 1.95; color: var(--ink-2); }
.sntypes__la, .sntypes .tbl td:nth-of-type(2), .sntypes__go { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.sntypes__la { transition-delay: .3s; }
.sntypes .tbl td:nth-of-type(2) { transition-delay: .4s; }
.sntypes__go { justify-self: stretch; transition-delay: .5s; }
.sntypes__go button { width: 100%; padding: 1em 1em; border: 1px solid rgba(19, 20, 23, .22); border-radius: 999px; background: none; color: var(--ink); font: 500 .82rem/1 var(--sans); letter-spacing: .06em; cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.sntypes__go button::after { content: "　→"; }
.sntypes .tbl tbody tr.is-in::after { transform: none; }
.sntypes tr.is-in th { clip-path: inset(-20% -10% -20% -10%); transform: none; }
.sntypes tr.is-in .sntypes__la, .sntypes tr.is-in td:nth-of-type(2), .sntypes tr.is-in .sntypes__go { opacity: 1; transform: none; }
@media (hover: hover) {
  .sntypes tbody tr:hover th { color: var(--green); }
  .sntypes tbody tr:hover .sntypes__go button { background: var(--ink); border-color: var(--ink); color: var(--bg); }
}
@media (max-width: 900px) {
  .sc-h3:has(+ .sntypes) { display: block; }
  .sc-h3:has(+ .sntypes) small { display: block; margin-top: .7em; font-size: .84rem; line-height: 1.8; color: var(--ink-2); }
  /* スマホ：左に品番（NEW はその下）、右にタイプ名（小さく）と説明、右端は丸い矢印だけ。行ごと押せる */
  .sntypes .tbl tbody tr { grid-template-columns: 3.6rem minmax(0, 1fr) 36px; grid-template-areas: "code la go" "code desc go"; column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px 0; }
  .sntypes .tbl tbody th { grid-area: code; flex-direction: column; align-items: flex-start; gap: .35em; font-size: 34px; }
  .sntypes__new { font-size: .5rem; padding: .15em .55em; }
  .sntypes__la { grid-area: la; padding-top: 2px; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 15px; letter-spacing: .01em; color: var(--ink-2); }
  .sntypes .tbl td:nth-of-type(2) { grid-area: desc; font-size: .88rem; line-height: 1.75; color: var(--ink); }
  .sntypes__go { grid-area: go; align-self: center; }
  .sntypes__go button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; font-size: 0; }
  .sntypes__go button::after { content: "→"; font-size: .9rem; line-height: 1; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .sntypes .tbl tbody tr::after { transform: none; }
  .sntypes .tbl tbody th, .sntypes__la, .sntypes .tbl td:nth-of-type(2), .sntypes__go { clip-path: none; opacity: 1; transform: none; transition: none; }
}

/* 写真のない要約（Taxonomic History）：下の章と同じ 24 列にのせる。10/21 夜に組み直し：
   本文の列に和題、その下に英題（欧文の斜体）、さらに下に一言。左の章番号の列は空けておく */
.is-article .sum--noimg { display: grid; grid-template-columns: repeat(24, 1fr); align-items: start; padding: calc(var(--gw) * 1.5) var(--side) 0; }
.is-article .sum--noimg .sum__tx { display: contents; }
.is-article .sum--noimg .sum__name { grid-column: 9 / 23; grid-row: 2; margin-top: .5em; padding-top: 0; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.3; letter-spacing: 0; }
.is-article .sum--noimg .sum__h { grid-column: 9 / 23; grid-row: 1; margin-top: 0; font-size: clamp(30px, 3vw, 52px); line-height: 1.35; letter-spacing: .04em; }
.is-article .sum--noimg .sum__h span { display: inline-block; }
.is-article .sum--noimg .sum__body { grid-column: 9 / 23; grid-row: 3; margin-top: 1.1em; }
.is-article .sum--noimg .sum__body > p:first-child { color: var(--ink-2); line-height: 1.8; }
.is-article .sum--noimg + .ch { padding-top: calc(var(--gw) * 1.4); }
@media (max-width: 900px) {
  .is-article .sum--noimg { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 0; }
  .is-article .sum--noimg .sum__name, .is-article .sum--noimg .sum__h, .is-article .sum--noimg .sum__body { grid-column: 1; grid-row: auto; padding-top: 0; }
  .is-article .sum--noimg .sum__h { order: -1; }
  .is-article .sum--noimg .sum__name { margin-top: .5em; }
  .is-article .sum--noimg .sum__h { margin-top: 0; font-size: clamp(26px, 7vw, 34px); word-break: auto-phrase; text-wrap: balance; }
  .is-article .sum--noimg .sum__body { margin-top: .8em; }
  .is-article .sum--noimg + .ch { padding-top: 48px; }
}

/* 表現型の各ページ（Regular〜Normal Siblings の9枚）：頭より下を組み直した（10/21）
   ・左に型の一覧（写真つき・いまの型は緑）、右に本文と写真。旧サイトの写真は 340px 前後なので2列のまま、拡大しすぎない幅
   ・2枚にまたがる説明（.gal__cap）は、その2枚の下に区切りとして置く
   ・前後の移動の帯は外した（10/21）。スマホは一覧を本文の下に 3×3 の写真で出す */
.lp--type { column-gap: 0; padding-bottom: calc(var(--gw) * 2.4); }
.lp--type .lp__aside { grid-column: 2 / 7; grid-row: 1; }
.lp--type .lp__main { grid-column: 9 / 22; grid-row: 1; }
.lp--type .lp__lead { margin-top: 0; }
.lp--type .lp__lead p { font-family: var(--serif); font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 2.15; letter-spacing: .03em; }
.lp--type .gal { margin-top: clamp(36px, 3.4vw, 56px); gap: 30px 22px; }
.lp--type .gal .ph { overflow: hidden; border-radius: 3px; background: #dfe3dc; }
.lp--type .gal figcaption { margin-top: .75em; font-size: .8rem; line-height: 1.7; color: var(--ink-2); }
.lp--type .gal__cap { margin-top: -.9em; padding-bottom: .4em; font-size: .8rem; color: var(--ink-2); }
.lp--type .gal__wide .ph { width: auto; }
.lp--type .gal__wide img { width: 100%; }
.lp--type .dream { margin-top: 1.6em; color: var(--green); }

.lp--type .toc { font-size: .84rem; line-height: 1.4; }
.lp--type .toc__h { margin-bottom: 1.2em; font-family: var(--latin); font-style: italic; font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.lp--type .toc ol { display: grid; gap: 4px; }
.lp--type .toc li::before { content: none; }
.lp--type .toc a { flex: 1; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 14px; padding: 5px 8px 5px 5px; border-radius: 4px; color: var(--ink-2); transition: background .3s, color .3s; }
.lp--type .toc a:hover { text-decoration: none; background: rgba(41,106,70,.07); color: var(--ink); }
.lp--type .toc a[aria-current="page"] { font-weight: 500; text-decoration: none; background: rgba(41,106,70,.1); color: var(--green); }
.tnav__ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--ink); }
.tnav__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lp--type .toc a:hover .tnav__ph img { transform: scale(1.08); }
.lp--type .toc a:not([aria-current]) .tnav__ph img { filter: saturate(.75); }


@media (max-width: 1024px) {
  .lp--type { grid-template-columns: 1fr; }
  .lp--type .lp__main { grid-column: 1; }
  .lp--type .lp__aside { display: block; grid-column: 1; grid-row: 2; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
  .lp--type .toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .lp--type .toc a { grid-template-columns: 1fr; gap: 8px; padding: 0; background: none; font-size: .74rem; line-height: 1.4; }
  .lp--type .toc a:hover, .lp--type .toc a[aria-current="page"] { background: none; }
  .lp--type .toc a[aria-current="page"] .tnav__ph { outline: 2px solid var(--green); outline-offset: 2px; }
}
@media (max-width: 900px) {
  .lp--type .gal { gap: 22px 10px; }
  .lp--type .gal figcaption, .lp--type .gal__cap { font-size: .74rem; }
}
/* 表現型ページの終わりの「一覧へ」：サイト共通の丸ボタン（.bpill）を左向きの矢印で */
.lp--type .lp__back { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: clamp(56px, 5vw, 88px); }
.bpill.is-back { flex-direction: row-reverse; justify-content: flex-end; }
.bpill.is-back::after { content: "←"; }
.bpill.is-back:hover::after { transform: translateX(-4px); }
@media (max-width: 1024px) { .lp--type .lp__back { grid-row: 3; } }
/* 型の一覧の小さな写真と type.html の札：Banana は縦長の写真でヘビの頭が下にあるので、下寄りで切る */
.tnav__ph img[src*="banana/banana.jpg"], .tyg__ph img[src*="banana/banana.jpg"] { object-position: 50% 88%; }
/* Banana：左の写真の下に説明と The dream again!! を続けて置く（間は詰める・10/21） */
.lp--type .gal--banana .gal__col { display: flex; flex-direction: column; align-self: stretch; }
.lp--type .gal--banana .gal__cap { margin-top: .75em; padding-bottom: 0; }
.lp--type .gal--banana .dream { margin-top: .5em; line-height: 1.2; }

/* 10/21 旧サイトの小窓・別ページだった写真（History の #founder #father・shop/breed_hatch2.html）
   元の写真が 230〜640px しかないので、枠を元の大きさ近くまでに留めて拡大しすぎない */
#founder, #father { scroll-margin-top: 96px; }
.hist-ph__h { max-width: 980px; margin: 0 auto; font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 500; }
.hist-ph__h + .stag { max-width: 980px; margin-inline: auto; }
.hist-ph__h ~ .hist-ph__h { margin-top: calc(var(--gw) * 2); }
.figs--hatch { max-width: 956px; margin-inline: auto; row-gap: 28px; }
.figs--hatch .ph img { display: block; width: 100%; height: auto; }
.stag .ph:has(> img.is-native) { background: none; }
.stag .ph img.is-native { display: block; width: auto; max-width: 100%; margin-inline: auto; }
/* 10/21 breed_hatch2：要約の下と写真の上の余白（200px＋200px）が空きすぎ → 写真を要約のすぐ下に */
.sum:has(+ #photos .figs--hatch) { padding-bottom: clamp(40px, 5vw, 72px); }
#photos:has(.figs--hatch) { padding-top: 0; }

/* 品種ページの写真の横送り（.gcar・JS が .gal から組む・10/22 Ivan）
   高さをそろえて幅は写真なり。元の写真は幅 340px 前後なので、引き伸ばしすぎない高さに */
.gcar { --gh: clamp(220px, 23vw, 320px); margin-top: clamp(36px, 3.4vw, 56px); }
.gcar__track { display: flex; gap: clamp(12px, 1.2vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; padding-bottom: 4px; outline: none; }
.gcar__track::-webkit-scrollbar { display: none; }
.gcar__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.gcar__track.is-drag .ph { pointer-events: none; }
.gcar__track:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 6px; }
.gcar__s { flex: none; display: flex; flex-direction: column; width: min-content; scroll-snap-align: start; }
.gcar__s .ph { display: block; height: var(--gh); overflow: hidden; border-radius: 10px; background: #dfe3dc; }
.gcar__s img { display: block; width: auto; max-width: none; height: 100%; user-select: none; transition: transform 1s var(--ease); }
.gcar__s .ph:hover img { transform: scale(1.04); }
.gcar__s figcaption { margin-top: .8em; font-size: .8rem; line-height: 1.7; color: var(--ink-2); }
.gcar__bar { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.gcar__line { flex: 1; height: 1px; margin-right: 14px; background: var(--line); overflow: hidden; }
.gcar__line i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.gcar__btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), opacity .3s; }
.gcar__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gcar__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.gcar__btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 760px) {
  .gcar { --gh: 220px; }
  .gcar__s { width: 78vw; }
  .gcar__s img { width: 100%; object-fit: cover; }
}
/* 止めて横へ流す版（.is-pin・広い画面・10/22） */
.gcar.is-pin { --gh: min(54vh, 440px); position: relative; }
.gcar.is-pin .gcar__frame { will-change: transform; clip-path: inset(-40px -100vw -40px 0); }
.gcar.is-pin.is-moved .gcar__frame { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.gcar.is-pin .gcar__track { overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; }
.gcar.is-pin .gcar__s { --v: 1; transform: translate3d(calc((1 - var(--v)) * 30px), calc((1 - var(--v)) * 40px), 0) scale(calc(.86 + var(--v) * .14)) rotate(calc((1 - var(--v)) * 2.5deg)); transform-origin: 0 100%; opacity: calc(.15 + var(--v) * .85); }
.gcar.is-pin .gcar__s img { transform: scale(calc(1.18 - var(--v) * .18)); }
.gcar.is-pin .gcar__s .ph:hover img { transform: scale(1.04); }
.gcar.is-pin .gcar__s figcaption { opacity: calc(var(--v) * 1.6 - .6); }