@charset "utf-8";
/* ==========================================================================
   KOBORELの森 — style.css

   ベースサイト（Panasonic World）の実装値を原本CSSから抽出して移植したもの。
   数値・比率・組版はほぼ原本どおりで、色だけを森のグリーンに差し替えている。
   移植元の値は各ブロックのコメントに残してある。

   ブレークポイントは data/site.json の breakpoint が唯一の正。
   ビルド時に 900 が置換される（原本と同じ 900px）。
   ========================================================================== */

/* --------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 原本: Noto Sans JP + font-feature-settings:"palt" + antialiased */
  font-family: var(--font-jp);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  font-size: var(--text-body);
  line-height: 1;              /* 原本と同じ。行間はコンポーネント側で指定する */
  letter-spacing: .06em;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 18px; background: var(--surface); color: var(--ink);
  border-radius: 999px; box-shadow: var(--shadow-soft);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 欧文ディスプレイ（原本 termina の代替） */
.dsp { font-family: var(--font-dsp); font-weight: 600; font-feature-settings: "palt"; }

/* --------------------------------------------------------- 立体表現（原本の l-btn-bg を移植） */
/* 原本 -black: background:#2E2E36;
        box-shadow: 0 4px 8px #31313326, inset 4px 4px 4px #8f93b033, inset -4px -4px 4px #0d0d0d;
        border: 1px solid rgba(255,255,255,.8) */
.knob {
  background: var(--ink-deep);
  box-shadow:
    0 4px 8px rgba(36, 42, 37, .15),
    inset 4px 4px 4px rgba(143, 169, 140, .20),
    inset -4px -4px 4px rgba(13, 13, 13, 1);
  border: 1px solid rgba(255, 255, 255, .8);
}
/* 原本 -white: background:#FFF; border:1px solid #DDEDFA; box-shadow: inset 0 3px 4px #ffffff40 */
.knob.-light {
  background: var(--surface);
  border: 1px solid var(--forest-200);
  box-shadow: 0 4px 8px rgba(36, 42, 37, .12), inset 0 3px 4px rgba(255, 255, 255, .25);
}

/* --------------------------------------------------------- header */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 100;   /* メニュー(90)より上。開いたまま閉じられなくならないように */
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 24px; pointer-events: none;
}
.hd > * { pointer-events: auto; }

/* 原本 .l-logo: position fixed / top 0 / left 24px / 219x136 /
   background #fff / box-shadow 0 2px 2px #31313326 / border-radius 0 0 20px 20px
   （上は画面に接し、下だけ角丸）。img は width 171px。 */
.hd__logo {
  position: fixed; top: 0; left: 24px; z-index: 2;
  width: 219px; height: 136px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: 0 2px 2px rgba(36, 42, 37, .15);
  border-radius: 0 0 20px 20px;
  text-decoration: none;
}
/* 2026-08-17 ロゴ差し替え。新ロゴは横長（3.50:1 ← 2.97:1）で、同じ幅だと
   高さが2割低く見えるため 171px → 188px に広げて見た目の大きさを揃えた。
   枠219px に対する左右余白は 15.5px。 */
.hd__logo img { width: 188px; height: auto; }

.hd__right { display: flex; align-items: center; gap: 12px; }

/* 進捗（原本には無い追加要素。原本のピル形状とサイズ感に合わせてある） */
.prog {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
}
.prog__label { font-size: 11px; letter-spacing: .12em; color: var(--ink-muted); line-height: 1.6; }
.prog__count {
  font-family: var(--font-dsp); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--forest-700);
}
.prog__dots { display: flex; gap: 2px; align-items: center; }
/* めぐった森は葉で示す。未訪問は薄い輪郭だけ、訪問済みは色が入る。 */
.prog__leaf { display: block; width: 15px; height: 15px; color: var(--line); }
.prog__leaf svg { width: 100%; height: 100%; }
.prog__leaf svg path:first-child { fill: currentColor; transition: fill var(--dur-base) var(--ease-standard); }
.prog__leaf.is-visited { color: var(--forest-500); }

/* メニューボタン：原本 80px 円（SP 70px） */
.menuBtn {
  position: relative; width: 80px; height: 80px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff;
  transition: transform var(--dur-fast) var(--ease-overshoot), box-shadow var(--dur-fast) var(--ease-overshoot);
}
.menuBtn:hover { transform: translateY(-2px); }
.menuBtn:active {
  box-shadow: inset 4px 4px 4px var(--forest-500), inset -4px -4px 4px rgba(0, 3, 14, .25);
}
.menuBtn__icon { display: grid; gap: 5px; width: 26px; }
.menuBtn__icon i { display: block; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease-standard); }
.menuBtn__label { font-family: var(--font-dsp); font-weight: 500; font-size: 10px; letter-spacing: .02em; }
body.is-menu-open .menuBtn__icon i:first-child { transform: translateY(3.25px) rotate(20deg); }
body.is-menu-open .menuBtn__icon i:last-child { transform: translateY(-3.25px) rotate(-20deg); }

/* --------------------------------------------------------- menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg); overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
body.is-menu-open .menu { opacity: 1; visibility: visible; }
body.is-menu-open .prog { opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.menu__inner {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 128px 0 80px;
}

/* 原本 .l-menu-con: background #fff / radius 20px / width 91.6666vw / max 1320px / padding-bottom 60px */
.menu__panel {
  width: 91.6666666667vw; max-width: 1320px;
  background: var(--surface); border-radius: 20px;
  padding-bottom: 60px;
  display: flex; flex-direction: column; align-items: center;
}
/* 原本 .l-menu-con > .g: width 90.909% / margin-top min(4.1666vw, 60px) */
.menu__g { width: 90.9090909%; margin-top: min(4.1666666667vw, 60px); }

/* 原本 .l-menu-head: flex / space-between / margin-bottom 20px */
.menu__head { display: flex; flex-direction: row; justify-content: space-between; gap: 20px; margin-bottom: 20px; }

/* 原本 .l-menu-head-title: width 74.58% / height 72px の吹き出し */
.menu__pill {
  width: 74.5833333%; height: 72px;
  display: flex; align-items: center; gap: 15px;
  padding-left: 40px; border-radius: 12px;
  background: var(--bg-sub);
}
.menu__pill .en { font-family: var(--font-dsp); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: var(--forest-700); }
.menu__pill i { width: 2px; height: 16px; border-radius: 1px; background: var(--line); }
.menu__pill .ja { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }

/* 原本 .l-menu-head > .home: width 23.75% / height 64px / radius 40px / 押しボタンの内側シャドウ */
/* 緑の丸ボタン。森一覧の「KOBORELの森にもどる」と、右パネルの CTA が同じもの。
   幅だけ置き場所ごとに違うので、見た目はここで共有して幅だけ別に指定する。 */
.menu__home, .cta__btn {
  height: 64px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 0 12px 0 32px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 40px;
  background: var(--forest-700);
  box-shadow: inset 4px 4px 4px var(--forest-500), inset -4px -4px 4px var(--forest-900);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-overshoot);
}
.menu__home { width: 23.75%; }
.menu__home:hover, .cta__btn:hover { transform: translateY(-2px); }
.menu__home span, .cta__btn span { font-size: 15px; font-weight: 600; letter-spacing: .08em; color: #fff; }
.menu__home i, .cta__btn i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--forest-700); font-size: 11px; font-style: normal;
  border: 1px solid var(--forest-200); box-shadow: inset 0 3px 4px rgba(255,255,255,.25);
}

.menu__list {
  --mgap: 20px;
  display: grid; gap: var(--mgap);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* 原本 .l-menu-list-item: height 380px / radius 20px / overflow hidden */
.mcard {
  position: relative; display: block;
  height: 380px; padding: 30px 32px;
  border-radius: 20px; overflow: hidden;
  background: var(--tint);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-overshoot),
              box-shadow var(--dur-fast) var(--ease-overshoot),
              background-color var(--dur-slow) var(--ease-standard);
}
/* 島の絵ができるまで。以前はここに森ごとの色で針葉樹を描いていたが、
   絵柄が二度変わって落ち着かないので、白いカードで待つ（world.js が付け、
   menu-art.js が島を入れたときに外す）。 */
/* 白い板の上に白いカードなので、輪郭が消えて文字だけが浮く。
   髪の毛ほどの線で枠だけ残す（島が入ったら消える）。 */
.mcard.-blank { background: #fff; box-shadow: inset 0 0 0 1px rgba(36, 42, 37, .08); }
.mcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.mcard.-hub { grid-column: span 2; }
/* グループ会社の森は2列ぶんの幅がある。絵の枠まで広げると、島だけ大きく写って
   ほかの森と揃わない（枠に対する割合で寄せているので、枠が広いほど大きくなる）。
   枠は**1列ぶん**に留めて、右に寄せる。左は文字の場所として空ける。
   1列ぶん ＝ 半分から、すき間の半分を引いたぶん。 */
.mcard.-hub .mcard__art,
.mcard.-hub .mcard__live {
  left: auto; right: 30px; width: calc(50% - var(--mgap) / 2);
}
.mcard__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.mcard__head { position: relative; display: flex; align-items: center; gap: 10px; }
/* カードの見出しのマーク。総合ページのピン・下部のボタンと同じ絵。 */
.mcard__mark { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; color: var(--c); }
.mcard__mark svg { width: 100%; height: 100%; display: block; }
/* カードの絵を3Dの島に差し替えたとき。
   cover で敷き詰めると建物のアップになる。島は1つのまとまりなので、
   切り抜かずに全体を置く（contain）。
   書き出しは 3D 側が空を描かずに返すので（alpha: true）、
   島だけが森の地色の上に浮いて見える。 */
img.mcard__art {
  /* 島は1つのまとまり。切り抜かず丸ごと置く。
     見出し（上）と一言（下）のあいだに収める。文字に重ならない高さで止める。 */
  object-fit: contain; object-position: center center;
  inset: 10% 0 auto 0; height: 72%;
  transition: scale var(--dur-slow) var(--ease-standard);
}
.mcard:hover img.mcard__art { scale: 1.04; }
/* さわっているあいだだけ、絵を生きた島に差し替える（menu-art.js）。
   置き場所は img と同じ（上10% / 高さ72% ＝ 下は18%）。
   縦に広いほど、背の高い島（つながる森の風車）を引かずに済む＝台が小さくならない。
   ★canvas を裸で置かないこと。3D側の mount は canvas ではなく**親**を採寸する。
     裸だと親＝カード全体を測り、絵より背の高い枠で描いて縦に伸びる。
   ★指と輪を通さないこと。3D側の操作がカードのリンクとページの縦スクロールを
     横取りする（canvas の上でホイールを回すと島が寄る）。 */
.mcard__live { position: absolute; inset: 10% 0 18% 0; pointer-events: none; }
.mcard__live canvas { width: 100%; height: 100%; display: block; }
.mcard__no { font-family: var(--font-dsp); font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--c); }
.mcard__name { font-size: 20px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.mcard__copy {
  position: absolute; left: 32px; bottom: 30px; right: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.mcard__copy span {
  background: var(--c); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .08em; line-height: 1.5;
  padding: .1em .4em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mcard__seen {
  position: absolute; top: 30px; right: 32px;
  font-family: var(--font-dsp); font-size: 10px; letter-spacing: .1em; color: var(--ink-faint);
}

/* 原本 .l-menu-bottom: 白枠の外。パネル2枚（各 49.24% / 240px / #fff / radius 20px）。
   主役ではないので白枠の外に置き、面積も抑える。 */
.menu__bottom {
  width: 91.6666666667vw; max-width: 1320px;
  display: flex; flex-direction: row; justify-content: space-between; gap: 20px;
  margin: 20px 0;
}
.menu__card {
  width: 49.2424242%; min-height: 240px;
  background: var(--surface); border-radius: 20px;
  padding: 45px 40px 40px;
  display: flex; flex-direction: column; gap: 24px;
}
.menu__card-ttl { font-family: var(--font-dsp); font-weight: 600; font-size: 20px; color: var(--ink); }
.menu__card-links { display: flex; flex-direction: column; gap: 12px; }
.menu__card-links.-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.menu__card-links a {
  font-size: 13px; letter-spacing: .06em; color: var(--ink-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.menu__card-links a:hover { color: var(--forest-700); }

/* --------------------------------------------------------- opening */
.op {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 32px 20px; text-align: center;
  /* 背景はイラスト。読み込み前・非対応時はこの絵から拾った色のグラデーションが出る。 */
  background:
    image-set(url("/assets/img/op-bg.webp") type("image/webp")) center / cover no-repeat,
    linear-gradient(180deg, #bcdaf5 0%, #d7e9f8 42%, #b5d19e 100%);
  transition: opacity var(--dur-slow) var(--ease-standard), visibility var(--dur-slow);
}
.op.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

/* サイト内から戻ってきたときはオープニングを出さない。
   JS で消すと最初の描画に間に合わず、幕が一瞬見える。
   判定は config.js（head で同期読み）が html に付ける。 */
html.skip-op .op { display: none; }
html.skip-op body.is-opening .world { opacity: 1; transform: none; }
html.skip-op body.is-opening .world__stage { transform: none; }

/* 背景の絵の上で、雲がずっと湧いて流れている層。
   押した瞬間に雲が現れるのではなく、もともと流れていたものが
   増えて向かってくる、という繋がりを作るためのもの。
   雲の絵は遷移と同じ（背景から抜いたもの）なので質感が揃う。 */
.op__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.op__cloud {
  position: absolute; top: var(--y); left: 0; width: var(--w);
  opacity: 0;
  animation: cloud-drift var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}
.op__cloud img { display: block; width: 100%; height: auto; }

/* 横へ流れながら、ゆっくり上がって・少し育って・消える */
@keyframes cloud-drift {
  0%   { transform: translate3d(var(--x0), 0, 0) scale(var(--s0)); opacity: 0; }
  9%   { opacity: var(--o); }
  87%  { opacity: var(--o); }
  100% { transform: translate3d(var(--x1), var(--ry), 0) scale(var(--s1)); opacity: 0; }
}

.op__inner { display: grid; justify-items: center; gap: 28px; max-width: 660px; position: relative; }
.op__tagline { font-size: 13px; line-height: 1.8; letter-spacing: .16em; color: var(--forest-700); }
.op__logo { line-height: 0; }
.op__logo img { width: min(52vw, 460px); height: auto; }
.op__texts { font-size: 14px; line-height: 2.4; letter-spacing: .08em; color: var(--ink-muted); }
/* 森ができるまでの入口ボタン。読み込み中であることはボタンの中に出す。
   幅は文言で変わるが、切り替わるのは一度だけなので固定しない
   （固定すると、長いほうに合わせた余白が完成後もずっと残る）。 */
.op__enter[disabled] { cursor: default; opacity: .72; }
.op__enter[disabled]:hover { transform: none; }
.op__enter .op__spin { display: none; }
.op__enter.-loading .op__spin {
  display: block; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: op-spin 760ms linear infinite;
}
.op__enter.-loading .btn__arrow { display: none; }
@keyframes op-spin { to { rotate: 360deg; } }
html.is-static .op__enter.-loading .op__spin { animation: none; }

/* 丸ボタン（原本の押しボタン意匠） */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 34px; border-radius: 999px;
  color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  transition: transform var(--dur-fast) var(--ease-overshoot);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { box-shadow: inset 4px 4px 4px var(--forest-500), inset -4px -4px 4px rgba(0, 3, 14, .25); }
.btn.-light { color: var(--forest-900); }
.btn__arrow { transition: transform var(--dur-base) var(--ease-overshoot); }
.btn:hover .btn__arrow { transform: translateX(4px); }


/* ==========================================================================
   雲をぬける演出 — 空へ上がり、雲を突き抜けてワールドに着く

   原本 Panasonic World と同じ作り方をしている。
   平面で拡大するのではなく、perspective を張った空間に雲を置き、
   translateZ で手前へ動かす。奥行きがあるので

     ・遠くの雲は小さくゆっくり、近づくほど加速して大きくなる（1/(p−z)）
     ・画面の端にある雲ほど外へ逃げていく（perspective-origin が中心）

   という見え方が自動的に出る。ここが「拡大しているだけ」との差になる。

   雲の絵は OP 背景のイラストから切り出したもの（assets/img/cloud/）。
   描き起こしていないので、背景と質感がずれない。
   ========================================================================== */
.through {
  position: fixed; inset: 0; z-index: 130;
  pointer-events: none; overflow: hidden;
  opacity: 0; visibility: hidden;
}

/* 奥行きの箱。--p を小さくするほど遠近が強い（原本は 300px） */
.through__space {
  position: absolute; inset: 0;
  --p: 320px;
  perspective: var(--p);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* 上へ抜けるにつれて、空が深くなる。
   背景のイラストは雲の多い淡い空なので、そのままだと白い雲が沈んで見えない。
   ここで一段濃い青を敷くと、抜けてくる雲がはっきり立つ。
   色はイラストの空の実測値（上 rgb(186,217,245)）を彩度側へ寄せたもの。 */
.through__sky {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, #6ea9d8 0%, #9cc9e8 46%, #cfe4f4 100%);
}

/* 雲の中に入っている数百 ms だけ、視界が白く飛ぶ。
   ワールドへの差し替えはこの白のなかで起きるので、切り替わりが見えない。 */
.through__glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%,
    #fff 0%, rgba(255, 255, 255, .92) 42%, rgba(214, 234, 250, .55) 100%);
}

.through__cloud {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--w);
  opacity: 0;
  will-change: transform, opacity, filter;
}
.through__cloud img { display: block; width: 100%; height: auto; }

/* ---- 再生 ---- */
.through.-go { opacity: 1; visibility: visible; }
.through.-go .through__sky { animation: through-sky 1710ms linear forwards; }
.through.-go .through__glow { animation: through-glow 1710ms linear forwards; }
.through.-go .through__cloud {
  animation: cloud-through var(--dur) linear forwards;   /* 等速で進む。加速は遠近が作る */
  animation-delay: var(--delay);
}

/* 風景がまだ画面にある間は敷かない（青い膜がかかって見えるため）。
   風景が引いてから濃くなり、白飛びが始まる前に引く。 */
@keyframes through-sky {
  0%, 10% { opacity: 0; }
  25%     { opacity: .94; }
  46%     { opacity: .94; }
  64%     { opacity: 0; }
  100%    { opacity: 0; }
}
/* いちばん厚い雲の中にいる一瞬だけ光る。早く立ち上げると全体が白っぽくなる。 */
@keyframes through-glow {
  0%, 24% { opacity: 0; }
  36%     { opacity: .94; }
  50%     { opacity: .82; }
  82%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* 奥（--z0）から、視点の直前（--z1）まで一直線に通り過ぎる。
   --p=320px に対し --z1=266px なので、抜ける瞬間は約6倍の大きさになる。
   拡大でぼやける分は、そのまま速度によるぶれとして blur に乗せる。 */
@keyframes cloud-through {
  0% {
    transform: translate(-50%, -50%) translateZ(var(--z0)) rotate(var(--r)) scaleX(var(--f));
    opacity: 0; filter: blur(0);
  }
  10%  { opacity: var(--o); }
  80%  { opacity: var(--o); filter: blur(1.5px); }
  100% {
    transform: translate(-50%, -50%) translateZ(var(--z1)) rotate(var(--r)) scaleX(var(--f));
    opacity: 0; filter: blur(9px);
  }
}

/* オープニングの絵は、前へ出ながら下へ抜ける。
   視線が地上から空へ上がっていく見え方になる（雲は上空にある）。

   ここで絵を薄くしてはいけない。透けた向こうにワールドが出てしまい、
   風景と島が二重に見える。絵は不透明のまま動かし、上に重なる
   .through__sky と雲で覆い隠す（.through は .op より上のレイヤー）。
   絵を消すのは白飛びのなかで走る reveal()（.is-gone）の仕事。 */
.op.-through {
  transition: transform 900ms cubic-bezier(.5, 0, .78, .72);
  transform: scale(1.34) translateY(9%);
}
.op.-through .op__inner {
  transition: transform 520ms var(--ease-standard), opacity 300ms var(--ease-standard);
  transform: scale(1.1) translateY(-4%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .through, .through.-go { display: none; }
  .op__cloud { animation: none; opacity: var(--o); }
  .op.-through, .op.-through .op__inner { transition: opacity 200ms linear; transform: none; }
}

/* --------------------------------------------------------- world */
.world {
  position: relative;
  height: 100vh; height: 100dvh;      /* 総合ページの主役はビジュアル。画面いっぱいに使う */
  background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky) 60%, var(--fog) 100%);
  overflow: hidden;
  /* 雲を抜けたあと、白飛びが引くのに合わせて浮かび上がる。 */
  transition: opacity 900ms var(--ease-standard);
}
body.is-opening .world { opacity: 0; }

/* 「少し大きい状態から等倍へ戻る」は .world ではなく内側の stage に掛ける。
   .world を拡大すると、はみ出した分が文書のスクロール範囲に加算されて
   縦スクロールバーが出てしまい、その幅ぶん（15px）レイアウトが横にずれる。
   stage は .world の overflow:hidden に切り取られるので、これが起きない。 */
.world__stage { transition: transform 1150ms var(--ease-standard); }
body.is-opening .world__stage { transform: scale(1.07); }

/* 逃げ道。トランジションが進まない環境（タブが裏、極端な省電力、
   一部の組み込みブラウザ）では opacity:0 のまま取り残される。
   app.js が着地後にこのクラスを付けて、必ず見える状態に落ち着かせる。 */
.world.is-arrived { opacity: 1; transition: none; }
.world.is-arrived .world__stage { transform: none; transition: none; }

/* 動きを減らす設定では、幕を出さずに素直に切り替える */
@media (prefers-reduced-motion: reduce) {
  .world { transition: opacity 240ms linear; }
  .world__stage, body.is-opening .world__stage { transition: none; transform: none; }
}
.world__stage { position: absolute; inset: 0; }
.world__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.world__hint {
  position: absolute; left: 50%; bottom: 86px; translate: -50% 0;
  font-size: 11px; letter-spacing: .12em; color: var(--ink-muted);
  background: rgba(255, 255, 255, .7); padding: 7px 18px; border-radius: 999px;
  pointer-events: none;
}


/* トップに置く実物の島。位置とサイズは world.js が project() から毎フレーム書き込む。 */
.world__island {
  position: absolute; z-index: 2; display: block;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard);
  cursor: pointer;
}
.world__island.is-ready { opacity: 1; }
/* 他の森は丸い台に建物を1棟載せている。実物の島も同じ見え方に揃える。
   3D 側は代表の棟だけを描くので（world-island.js の soloBuilding）、
   切り抜きは要らない。台は world.js が 2D で描いたものが下に見える。 */
.world__island canvas {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 8px 14px rgba(60, 80, 60, .18));
}
.world__island:hover canvas { filter: drop-shadow(0 12px 22px rgba(36, 42, 37, .24)); }
/* ラベルは 2D の他の森と同じ見た目に揃える */
.world__island-label {
  position: absolute; left: 50%; bottom: 4%; translate: -50% 0;
  white-space: nowrap;
  font-family: var(--font-dsp); font-weight: 600; font-size: 13px; letter-spacing: .04em;
  color: var(--forest-900);
  background: rgba(255, 255, 255, .82); padding: 6px 12px; border-radius: 13px;
}

/* DOM 側の森リスト。canvas に閉じないための必須導線を、
   ビジュアルを覆わないコンパクトなボタン列にしたもの。 */
.world__nav { position: absolute; inset: auto 0 0 0; z-index: 3; }
.world__nav-inner {
  display: flex; gap: 8px; align-items: center;
  padding: 14px clamp(16px, 3vw, 40px) 22px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.world__nav-inner::-webkit-scrollbar { display: none; }

.fbtn.-all { display: none; }
.fbtn {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  height: 42px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-overshoot),
              box-shadow var(--dur-fast) var(--ease-overshoot),
              background-color var(--dur-fast) var(--ease-standard);
}
.fbtn:hover, .fbtn.is-hot { transform: translateY(-3px); box-shadow: var(--shadow-lift); background: #fff; }
/* 森のマーク。色の点だけだと、どの森かは名前を読まないと分からない。
   総合ページの島のピンと同じ絵にして、見ただけで結びつくようにした。 */
.fbtn__mark {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--c);
}
.fbtn__mark svg { width: 100%; height: 100%; display: block; }
.fbtn__name { font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1; }
/* 訪問済みは点の外側にリングを足す（色を変えずに状態だけ足す） */
.fbtn__seen { font-size: 0; }
/* 訪問済み。マークに輪を付けると形が濁るので、背に淡い丸を敷く。 */
.fbtn.is-seen .fbtn__mark {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border-radius: 50%; padding: 2px; box-sizing: content-box;
  margin: -2px;
}

/* ==========================================================================
   森詳細ページ — 原本 .p-detail の移植
   ========================================================================== */
.detail {
  position: relative; background: var(--bg); overflow-x: hidden;
  /* パネル（右カラム）全体の縮尺。1 = 原本どおりの寸法。
     画面に対して大きすぎたので 0.8 に落としてある。余白・見出し・角丸が等倍で縮む。 */
  --ps: .8;
}

/* 原本: position:fixed; width:50vw; height:100svh; max-width:720px */
.detail__image {
  position: fixed; top: 0; left: 0;
  width: 50vw; height: 100vh; height: 100svh;   /* 原本は max-width:720px。世界を広く見せるため上限なし */
  background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky) 55%, var(--forest-200) 100%);
  overflow: hidden;
}
.detail__image canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ハイブリッド: 下層 2D の上に透明な WebGL レイヤーを重ねる */
.detail__gl {
  z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .9s var(--ease-standard);
}
.detail__gl.is-ready { opacity: 1; }
/* GLB が乗ったら下層は不要になるので静かに引く */
.detail__image.-has-model #forest-canvas { opacity: 0; transition: opacity .9s var(--ease-standard); }

/* 原本: position:fixed; bottom:32px; left:24px; gap:32px */
.detail__stamp {
  position: fixed; bottom: 32px; left: 24px; z-index: 3;
  display: flex; flex-direction: row; align-items: center; gap: 32px;
}
.detail__stamp-no { display: flex; flex-direction: row; align-items: flex-end; color: var(--forest-700); }
.detail__stamp-no .a { font-family: var(--font-dsp); font-weight: 600; font-size: 12px; line-height: 1; }
.detail__stamp-no .b { font-family: var(--font-dsp); font-weight: 500; font-size: 38px; line-height: 1; translate: 0 5px; letter-spacing: .02em; }
.detail__stamp-line { width: 2px; height: 48px; background: #fff; border-radius: 1px; }
.detail__stamp-name { font-size: 20px; line-height: 1.4; font-weight: 700; letter-spacing: .1em; color: var(--forest-900); }

/* 原本: width:calc(50% - 20px); max-width:640px; margin-top:80px; margin-left:calc(50% + 20px) */
.detail__con {
  position: relative; z-index: 2;
  /* 原本は 640px 上限。--ps ぶん縮める。 */
  width: calc(50% - 20px); max-width: calc(640px * var(--ps));
  /* 原本は margin-top 80px。
     進捗ピルはメニューボタン(80px)に対して中央寄せなので下端が 86px。
     そこから 30px 空ける。 */
  margin-top: 116px; margin-left: calc(50% + 20px);
  padding-bottom: 1px;
}

/* 原本 .p-detail-con-fv と同じ白カード（radius 40 / bg #fff）。
   下に続くセクションのカードと見た目を揃える。 */
.fv {
  width: 100%; background: var(--surface); border-radius: calc(40px * var(--ps));
  padding: calc(80px * var(--ps)) calc(90px * var(--ps)) 0 calc(80px * var(--ps));
  margin-bottom: calc(134px * var(--ps));
}

/* 原本 .p-detail-sub: termina 600 / 10px / #dcd7c4 */
.fv__sub { font-family: var(--font-dsp); font-weight: 600; font-size: 10px; letter-spacing: .1em; color: var(--sand); }

/* 原本 .p-detail-ttl: flex column / gap 6px / margin-top 30px
   > .item  padding 6px 10px 10px / overflow hidden
   > .bg    background #2853C2 / border-radius 4px
   > .txt   Noto Sans JP 700 / min(2.7777vw,40px) / ls .08em / lh 1 / #fff */
.fv__ttl { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fv__ttl .item { position: relative; padding: 6px 10px 10px; overflow: hidden; }
.fv__ttl .bg { position: absolute; inset: 0; background: var(--forest-700); border-radius: 4px; }
.fv__ttl .txt {
  position: relative; display: inline-block; color: #fff;
  font-weight: 700;
  /* 原本は min(2.7777vw, 40px) 固定。原稿の桁数が原本より多いため、
     パネルの実寸から必要サイズを逆算する項を足して溢れを防ぐ。
     （con = min(50vw - 20px, 640px)、左右パディング 80 + 90 = 170px） */
  font-size: calc(min(calc(2.7777777778vw * var(--ps)), calc(40px * var(--ps)),
               calc((50vw * var(--ps) - 156px) / var(--fv-div, 10))) * var(--fit, 1));
  letter-spacing: .08em; line-height: 1; white-space: nowrap;
}

/* 原本 .p-detail-cat: width min(33.33vw,480px) / background #F5F4F0 / radius 8px / margin-top 40px */
.cat {
  width: 100%;   /* 原本は min(33.33vw,480px)。カードを縮めたので内寸に追従させる */
  display: flex; flex-direction: row;
  background: var(--paper); border-radius: 8px; overflow: hidden;
  margin-top: calc(40px * var(--ps));
  /* 高さは中身に追従させる（旧: 全森 138px 固定）。
     項目数の少ない森で上下に空行ぶんの余白が出て間延びしていたため、
     行数ぶんの高さ（項目 38px × 行数 + 上下パディング 12px × 2）にフィットさせる。 */
  height: auto;
}
/* 原本 > .left: 縦書き / background #2E2E36 / 13px / ls .2em */
.cat__left {
  width: min(2.7777777778vw, 40px); height: auto;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--ink-deep); color: #fff;
  font-weight: 600; font-size: min(.9027777778vw, 13px); letter-spacing: .2em;
  writing-mode: vertical-rl; text-align: center;
}
.cat__right { display: flex; flex-direction: row; align-items: center;
  flex-wrap: wrap; align-content: center;   /* 行が少ない森は中央に寄せる */
  /* 箱の高さを中身に合わせたぶん、上下の余白はここで確保する。
     12px だと1行の森（なおす森）で文字が枠に貼りつき、詰まって見えた。 */
  padding: 20px 0; flex: 1 1 auto; min-width: 0; }
/* 原本は項目数ごとの固定幅（4件=110px…）だが、それは内寸 480px 前提の値。
   パネルを縮めて内寸が 340px になったので、中身の幅に合わせて折り返す方式に変えた。 */
.cat__item {
  display: flex; align-items: center; justify-content: center;
  width: auto; height: 38px; padding: 0 16px; flex-shrink: 0;
  font-weight: 600; font-size: min(.8333333333vw, 12px); letter-spacing: .12em;
  color: var(--ink); white-space: nowrap; text-align: center; line-height: 1.4;
}
.cat__item:not(:last-child) { border-right: #fff 1px solid; }
.cat__item:last-child { border-right: none; }
/* 件数で字を縮めない。以前は5件以上の森だけ 9.5px にしていたが、
   ふれあう森とグループ会社の森だけ字が小さく、他の森と揃わなかった。
   縮めるのは字ではなく、箱の高さのほう（3行ぶんで固定した）。 */




/* 原本 .p-detail-tag: 下線 1px #e6e6e6 / margin 25px 0 63px / padding-bottom 12px
   > .left  12px 600 ls .06em / 右に 1px 罫
   > .item  12px 400 / radius 2px / background #edf2f5 / padding 4px 6px */
.tag {
  width: 100%;   /* 同上。下のカードと右端を揃える */
  display: flex; flex-direction: row; align-items: stretch;
  margin-top: 25px; padding-bottom: 12px;
  /* 罫の下は 20px。次がロゴでも本文でも同じにする（原本は63px）。 */
  border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.tag__left {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; line-height: 1.7; letter-spacing: .06em; color: var(--ink);
  border-right: 1px solid var(--line); padding: 10px 20px 10px 13px; white-space: nowrap;
}
.tag__right { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 20px; padding: 5px 0; }
.tag__item {
  font-size: 12px; line-height: 1.7; letter-spacing: .06em; color: var(--ink);
  padding: 4px 6px; border-radius: 2px; background: var(--bg-sub);
}

/* 原本 .p-detail-block: width 33.33vw / max 480px
   h3  Noto Sans JP 600 / 28px / lh 42px / ls .08em */
.block { width: 100%; }   /* 同上 */
.block h3 { font-weight: 600; font-size: calc(28px * var(--ps)); line-height: calc(42px * var(--ps)); letter-spacing: .08em; margin-bottom: 32px; }
.block h3.-accent { color: var(--forest-700); }
.block p { font-size: 14px; line-height: 1.8; letter-spacing: .06em; color: var(--ink); }
.block p + p { margin-top: 1.6em; }

/* 原本 .p-detail-more: termina 700 12px + 4px ドット3つ */
.more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; margin-top: 25px; translate: 5px 38px;
}
.more span { font-family: var(--font-dsp); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--forest-700); }
.more .dot { display: flex; flex-direction: column; align-items: center; margin-top: 24px; gap: 8px; }
.more .dot i { width: 4px; height: 4px; border-radius: 50%; background: var(--forest-700); }

/* 原本 .p-detail-sec: 白カード radius 40px / padding 143px 90px 120px 80px / margin-bottom 120px */
.card {
  position: relative; width: 100%;
  background: var(--surface); border-radius: calc(40px * var(--ps));
  padding: calc(143px * var(--ps)) calc(90px * var(--ps)) calc(120px * var(--ps)) calc(80px * var(--ps));
  margin-bottom: calc(120px * var(--ps));
  overflow: hidden;
}
.card.-flat { padding: 0; margin-bottom: 0; background: none; overflow: visible; }
.card.-rec { margin-top: calc(50px * var(--ps)); padding: calc(80px * var(--ps)); background: var(--forest-900); color: #fff; }

/* 原本 .p-detail-sec-ttl: margin-bottom 63px / .-one で margin-top -62px
   .sub  termina 600 10px #2853c2
   h2    Noto Sans JP 700 36px / lh 46.8px / ls .08em / margin-top 10px
   .line 2px：先頭 40px の青バー(radius 2px) + 残り #e6e6e6 */
.cardttl { width: 100%; margin-bottom: calc(63px * var(--ps)); margin-top: calc(-62px * var(--ps)); }
.cardttl .sub { font-family: var(--font-dsp); font-weight: 600; font-size: 10px; letter-spacing: .1em; color: var(--forest-700); }
.cardttl h2 { font-weight: 700; font-size: calc(36px * var(--ps)); line-height: calc(46.8px * var(--ps)); letter-spacing: .08em; margin-top: 10px; }
.cardttl .line { width: 100%; height: 2px; display: flex; flex-direction: row; gap: 10px; margin-top: 12px; }
.cardttl .line i:first-child { width: 40px; height: 100%; background: var(--forest-700); border-radius: 2px; }
.cardttl .line i:last-child { height: 100%; background: var(--line); border-radius: 2px; flex-grow: 1; }

/* 原本 .p-detail-pkup: absolute top 82px right 81px / 右寄せ
   ラベル termina 600 12px / 分子 termina 500 28px / 分母 termina 600 13px #b4c4ed */
.pkupno {
  position: absolute; top: calc(82px * var(--ps)); right: calc(81px * var(--ps));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.pkupno .lbl { font-family: var(--font-dsp); font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--forest-700); }
.pkupno .cnt { display: flex; flex-direction: row; align-items: flex-end; }
.pkupno .a { font-family: var(--font-dsp); font-weight: 500; font-size: 28px; color: var(--forest-700); translate: -5px 0; }
.pkupno .b { font-family: var(--font-dsp); font-weight: 600; font-size: 13px; color: var(--forest-300); translate: 0 -5px; }

/* Pick Up 本体 */
.pkup { display: grid; gap: calc(40px * var(--ps)); }
.pkup__item { display: grid; gap: 12px; }
.pkup__meta { display: flex; align-items: baseline; gap: 12px; }
.pkup__no { font-family: var(--font-dsp); font-weight: 600; font-size: 12px; color: var(--forest-500); }
.pkup__label { font-size: 12px; line-height: 1.8; letter-spacing: .12em; color: var(--ink-muted); }
.pkup__title { font-weight: 700; font-size: calc(24px * var(--ps)); line-height: calc(38.4px * var(--ps)); letter-spacing: .08em; }
/* グループの森：番号を大きくし、会社名を番号の横に並べる（英語ラベルは非表示） */
.pkup__meta.-co { align-items: baseline; gap: 14px; }
.pkup__meta.-co .pkup__no { font-size: calc(30px * var(--ps)); line-height: 1; }
.pkup__co { font-weight: 700; font-size: calc(22px * var(--ps)); line-height: 1.3; letter-spacing: .06em; }
.pkup__text { font-size: 14px; line-height: 1.8; letter-spacing: .06em; color: var(--ink); }


/* 箇条書き — 前のサイトの features / list を受ける器。
   原本の .p-detail-block .panel の点リストに寸法を合わせてある。 */
.bullets { display: grid; gap: 6px; margin-top: 14px; }
.bullets li {
  position: relative; padding-left: 18px;
  font-size: 13px; line-height: 1.6; letter-spacing: .06em; color: var(--ink);
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--forest-500);
}
.pkup__item .bullets { margin-top: 16px; }


/* 本文が未支給のゾーン（指示書: van）。創作せず、未支給であることを出す。 */
.pkup__text.-tbd { color: var(--ink-faint); font-style: normal; }

/* 人 */
.voice { display: grid; gap: 14px; padding: 40px; border-radius: 8px; background: var(--paper); }
.voice__text { font-weight: 600; font-size: 20px; line-height: 1.9; letter-spacing: .08em; color: var(--forest-900); }
.voice__who { font-size: 12px; line-height: 1.8; letter-spacing: .1em; color: var(--ink-muted); }

/* 次の森 */
.next { display: grid; gap: 16px; margin-bottom: 120px; }
.next__label { font-family: var(--font-dsp); font-weight: 600; font-size: 10px; letter-spacing: .18em; color: var(--ink-faint); }
.next__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.next__item {
  position: relative; display: grid; gap: 6px;
  padding: 28px 30px; border-radius: 8px; background: var(--surface);
  box-shadow: var(--shadow-soft); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-overshoot), box-shadow var(--dur-fast) var(--ease-overshoot);
}
.next__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.next__dir { font-family: var(--font-dsp); font-weight: 600; font-size: 10px; letter-spacing: .14em; color: var(--c, var(--ink-faint)); }
.next__name { font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.next__no { font-family: var(--font-dsp); font-size: 11px; line-height: 1.8; letter-spacing: .06em; color: var(--ink-faint); }
/* 前後の森のマーク。右端に薄く置く。どの森へ行くのかを字だけでなく絵でも示す。
   色は行き先の森のもの（--c が線、--tint が地）。文字と重ならない位置に固定する。 */
.next__item.-mark { padding-right: 92px; }
.next__mark {
  position: absolute; top: 50%; right: 24px; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tint, var(--bg-sub)); color: var(--c, var(--forest-700));
  transition: scale var(--dur-base) var(--ease-overshoot);
}
.next__mark svg { width: 26px; height: 26px; display: block; }
.next__item:hover .next__mark { scale: 1.08; }
@media (max-width: 900px) {
  .next__item.-mark { padding-right: 76px; }
  .next__mark { width: 44px; height: 44px; right: 18px; }
  .next__mark svg { width: 22px; height: 22px; }
}

.next__item.-cta { background: var(--forest-700); box-shadow: var(--shadow-lift); }
.next__item.-cta .next__name { color: #fff; }
.next__item.-cta .next__dir, .next__item.-cta .next__no { color: rgba(255, 255, 255, .7); }

/* 採用バンド */
.rec { display: grid; gap: 18px; justify-items: start; }
.rec h2 { font-weight: 700; font-size: 28px; line-height: 42px; letter-spacing: .08em; }
.rec p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .78); max-width: 34em; }

/* 未確定の注記 */
.note {
  padding: 24px 28px; border-radius: 8px; background: var(--paper); line-height: 2;
  border-left: 3px solid var(--forest-500);
  font-size: 13px; line-height: 2; color: var(--ink-muted);
  display: grid; gap: 4px; margin-bottom: 40px;
}
.note strong { color: var(--ink); font-weight: 700; }

/* INDEX ボタン（原本の円形フローティング） */
.indexBtn {
  position: fixed; top: 118px; right: 24px; z-index: 61;
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--forest-900); text-decoration: none;
  font-family: var(--font-dsp); font-weight: 500; font-size: 10px; letter-spacing: .02em;
  transition: transform var(--dur-fast) var(--ease-overshoot);
}
.indexBtn:hover { transform: translateY(-2px); }
.indexBtn i { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; }


/* --------------------------------------------------------- 島3D（ふれあう森） */
/* 位置は onPins が毎フレーム画面px で渡してくる。見た目だけこちらで持つ。 */
.pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* 島のピン。閉じているときは丸だけ。声を出すと、丸ごと上へ持ち上がって
   1枚の板になる（左上にアイコン＋サービス名、その下に心の声）。
   板の下のしっぽが、どの建物の声かを指す。組み方は総合ページのピンと同じ。 */
.pin {
  position: absolute; transform: translate(-19px, -100%);   /* 19px = 丸の半径 */
  display: grid; grid-template-columns: auto; align-items: center;
  gap: 0; padding: 0; border-radius: 20px; text-align: left;
  background: rgba(255, 255, 255, 0);
  pointer-events: auto; cursor: pointer;
  transition: opacity .28s var(--ease-standard), scale .2s var(--ease-overshoot),
              background var(--dur-base) var(--ease-standard),
              padding var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
/* 丸はこの要素が持つ。.pin の背景にすると、開いたとき板と溶けて丸が消える。 */
.pin__mark {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--forest-700);
  box-shadow: 0 3px 12px rgba(36, 42, 37, .28);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              width var(--dur-base) var(--ease-standard),
              height var(--dur-base) var(--ease-standard);
}
.pin svg { width: 21px; height: 21px; }
/* 3D側の zones.js が持っている固有アイコン（みがく森の 💧🌸💆…）。
   絵文字は書体差でベースラインがずれるので、行送りを切って中央に置く。 */
.pin.-emoji .pin__mark { font-size: 18px; line-height: 1; }
.pin.off { opacity: 0; pointer-events: none; }
.pin:hover { scale: 1.08; }
.js .pins .pin .pin__mark { scale: 0; }

/* アイコンの登場 — 原本の p-detail-cat のアイコンと同じ作り。
   scale 0→1・回転 -90°→0 を、行き過ぎて戻るばねで。
   値は GSAP の Elastic.easeOut(振幅1, 周期0.35) を 5% 刻みで写したもの。
   CSS の transition では戻りが1回しか作れないので keyframes で持つ。
   ピンの箱は translate(-50%,-100%) で位置を取っているので、中身だけ回す。 */
@keyframes pin-pop {
  0%   { scale: 0;      rotate: -90deg; }
  5%   { scale: .5591;  rotate: -39.68deg; }
  10%  { scale: 1.1113; rotate: 10.01deg; }
  15%  { scale: 1.3185; rotate: 28.67deg; }
  20%  { scale: 1.2252; rotate: 20.27deg; }
  25%  { scale: 1.0393; rotate: 3.54deg; }
  30%  { scale: .9221;  rotate: -7.01deg; }
  35%  { scale: .9116;  rotate: -7.95deg; }
  40%  { scale: .9610;  rotate: -3.51deg; }
  45%  { scale: 1.0098; rotate: .89deg; }
  50%  { scale: 1.0282; rotate: 2.53deg; }
  55%  { scale: 1.0199; rotate: 1.79deg; }
  60%  { scale: 1.0035; rotate: .31deg; }
  65%  { scale: .9931;  rotate: -.62deg; }
  70%  { scale: .9922;  rotate: -.70deg; }
  75%  { scale: .9966;  rotate: -.31deg; }
  80%  { scale: 1.0009; rotate: .08deg; }
  85%  { scale: 1.0025; rotate: .22deg; }
  90%  { scale: 1.0018; rotate: .16deg; }
  95%  { scale: 1.0003; rotate: .03deg; }
  100% { scale: 1;      rotate: 0deg; }
}

.pins.-in .pin .pin__mark {
  animation: pin-pop 1.5s linear both;
  animation-delay: calc(var(--i, 0) * .15s);   /* 原本と同じ 0.15秒ずつ */
}
html.is-static .pins .pin .pin__mark { scale: 1; animation: none; }

/* 島が乗ったら 2D のプレースホルダは不要 */
.detail__image.-has-island { background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky) 60%, var(--forest-200) 100%); }

.island-back {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding: 11px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--forest-700);
  transition: transform var(--dur-fast) var(--ease-overshoot), box-shadow var(--dur-fast) var(--ease-overshoot);
}
.island-back:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
/* display を指定しているので hidden 属性を明示的に効かせる */
.island-back[hidden] { display: none; }


/* 中身はグリッドの升目に直接並べたいので、包みは器として数えない。 */
.pin__say { display: contents; }
.pin__word, .pin__voice { display: none; grid-column: 2; }
.pin__word {
  font-size: var(--text-sm); font-weight: 700; line-height: 1.5; letter-spacing: .04em;
  color: var(--forest-700);
}
.pin__voice {
  font-size: var(--text-xs); font-weight: 500; line-height: 1.7; letter-spacing: .04em;
  color: var(--ink-muted); max-width: 17em;
}

/* 出すのは一度に1つだけ。全部出すと島が読めない。
     ・アイコンにさわっているあいだ … その棟の声
     ・さわっていないあいだ        … 巡回で1つずつ（島スクリプトが -say-on を付け替える）
   寄っているあいだは消す（読む対象が右パネルに移るため）。 */
body:not(.is-zoomed) .pins.-in .pin.-says:hover,
body:not(.is-zoomed) .pins.-in .pin.-says:focus-visible,
body:not(.is-zoomed) .pins.-in .pin.-says.-say-on {
  grid-template-columns: auto 1fr; gap: 6px 12px;
  padding: 14px 20px 15px;
  /* しっぽのぶんだけ上へ持ち上げる。--pin-dx は、右端に近い棟で板を
     画面内へ寄せるぶん（島スクリプトが測って渡す）。 */
  transform: translate(calc(-26px + var(--pin-dx, 0px)), calc(-100% - 12px));
  background: var(--surface); box-shadow: var(--shadow-lift);
  scale: 1;
}
body:not(.is-zoomed) .pins.-in .pin.-says:hover .pin__word,
body:not(.is-zoomed) .pins.-in .pin.-says:focus-visible .pin__word,
body:not(.is-zoomed) .pins.-in .pin.-says.-say-on .pin__word,
body:not(.is-zoomed) .pins.-in .pin.-says:hover .pin__voice,
body:not(.is-zoomed) .pins.-in .pin.-says:focus-visible .pin__voice,
body:not(.is-zoomed) .pins.-in .pin.-says.-say-on .pin__voice { display: block; }
/* 声を出しているあいだは丸を森の色で塗る（総合ページのピンと同じ）。 */
body:not(.is-zoomed) .pins.-in .pin.-says:hover .pin__mark,
body:not(.is-zoomed) .pins.-in .pin.-says:focus-visible .pin__mark,
body:not(.is-zoomed) .pins.-in .pin.-says.-say-on .pin__mark {
  width: 32px; height: 32px; background: var(--forest-700); color: #fff; box-shadow: none;
}
body:not(.is-zoomed) .pins.-in .pin.-says:hover .pin__mark svg,
body:not(.is-zoomed) .pins.-in .pin.-says:focus-visible .pin__mark svg,
body:not(.is-zoomed) .pins.-in .pin.-says.-say-on .pin__mark svg { width: 17px; height: 17px; }
/* しっぽ。板の左下から出て、建物の頭を指す。 */
body:not(.is-zoomed) .pins.-in .pin.-says:hover::after,
body:not(.is-zoomed) .pins.-in .pin.-says:focus-visible::after,
body:not(.is-zoomed) .pins.-in .pin.-says.-say-on::after {
  content: ""; position: absolute; left: var(--tail-x, 18px); bottom: -6px;
  width: 16px; height: 16px; rotate: 45deg;
  background: var(--surface); border-radius: 3px;
}
/* さわっている棟が最前面。巡回中のものと重なっても隠れない。 */
.pin.-says:hover { z-index: 2; }
html.is-static .pin__say { transition: none; }

@media (max-width: 900px) {
  /* 画面が狭いと吹き出しが島を覆う。SP では出さない。 */
  .pin__say { display: none; }
}

@media (max-width: 900px) {
  .pin { width: 32px; height: 32px; }
  .pin__mark { width: 32px; height: 32px; }
  .pin svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   島3Dを全面に敷き、その上にパネルを浮かせるレイアウト
   ・canvas は見えている枠と同じ大きさ。構図は camRule が決める
   ・パネルは右端から --panel-right ぶん内側
   ========================================================================== */
body[data-forest] {
  /* canvas は見えている枠と同じ大きさ。盛らない・ずらさない。
     構図は camRule が決める（docs/RULES.md）。ここでは決めない。 */
  --isl-w: 100vw;
  --isl-x: 0;
  /* パネルを右端に寄せて左の島3Dと重ならないようにする（旧160px→72px） */
  --panel-right: 72px;
}

/* 背景はビジュアルそのもの。ページ側の地色は敷かない。 */
body[data-forest] .detail { background: none; }
body[data-forest] .detail__image {
  position: fixed; top: 0; left: var(--isl-x);
  width: var(--isl-w); max-width: none;
  height: 100vh; height: 100dvh;
  z-index: 0; background: none;
}
body[data-forest] .detail__stamp { z-index: 3; }

/* パネルは右端から一定距離に浮かべる */
body[data-forest] .detail__con {
  position: relative; z-index: 2;
  width: calc(640px * var(--ps));
  max-width: calc(100vw - var(--panel-right) * 2);
  margin-left: auto;
  margin-right: var(--panel-right);
}

/* 島の下の帯に置く森の一言（シート①ヘッダー サブタイトル）。 */
.detail__stamp-sub {
  margin-left: 20px; padding: 7px 16px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; color: var(--ink);
}

/* --------------------------------------------------------- 棟えらびの帯（SPのみ）
   狭い画面では島を指で触らせない。ピンは小さすぎて狙えず、つまんで回すのも
   片手では扱いにくい。代わりに棟のアイコンを横に並べ、押したらその棟へ移る。
   行き先と戻り方はPCと同じ仕組みで、ここが足しているのは押す場所だけ。 */
.isletabs { display: none; }

@media (max-width: 900px) {
  .ft { padding-bottom: 16px; }
  .ft__inner { width: 91.4666666667vw; min-height: 0; padding: 32px 24px 24px; }
  .ft__links { justify-content: flex-start; }
  .mcard { height: 220px; padding: 24px; }
  /* 狭い画面ではカードが横長になる。島を右に寄せて、左に文字の場所をつくる。
     上は森名の行を避けて始める（森名は長いものがあり、右まで伸びてくる）。 */
  img.mcard__art { inset: 16% 4% auto auto; width: 52%; height: 74%; object-position: right center; }
  /* 撮る枠も同じ位置・同じ比に揃える（menu-art.js がこれを測って撮る）。
     ここを直し忘れると、絵だけ違う比で撮れて島が小さく写る。 */
  .mcard__live { inset: 16% 4% auto auto; width: 52%; height: 74%; }
  /* 狭い画面ではグループ会社の森も1列。2列ぶんの幅を前提にした逃がしは戻す
     （残すとこのカードの枠だけ狭くなり、島が小さく写る）。 */
  .mcard.-hub .mcard__art,
  .mcard.-hub .mcard__live { right: 4%; width: 52%; }
  .mcard__copy { left: 24px; right: 24px; bottom: 24px; }
  .mcard__copy span { font-size: 13px; }
  .op { background-image: image-set(url("/assets/img/op-bg-sp.webp") type("image/webp")); }
  .menu__list { grid-template-columns: 1fr; }
  .menu__inner { padding: 100px 0 48px; }
  .menu__panel { width: 100%; max-width: none; border-radius: 0; padding-bottom: 40px; }
  .menu__g { width: 91.4666667%; margin-top: 32px; }
  .menu__head { flex-direction: column; }
  .menu__pill, .menu__home { width: 100%; }
  .menu__pill { height: 60px; padding-left: 24px; }
  .menu__bottom { width: 91.4666667%; flex-direction: column; }
  .menu__card { width: 100%; min-height: 0; padding: 32px 24px; }
  .menu__card-links.-grid { grid-template-columns: 1fr; }
  .mcard.-hub { grid-column: auto; }
  body[data-forest] { --isl-w: 100vw; --isl-x: 0; --panel-right: 0px; }
  /* 島は上端から。下は棟えらびの帯までを島にする（帯は島の上に重なる）。 */
  body[data-forest] .detail__image { position: relative; height: 74vh; height: 74dvh; margin-top: 0; }
  /* No.〜森名の行も島の上に重ねる。ここに地色を敷くと、島が切れて灰色の帯になる。 */
  body[data-forest] .detail__stamp {
    position: relative; z-index: 5; margin: -44px 0 0; padding-bottom: 8px;
  }
  body[data-forest] .detail__stamp-sub { display: none; }   /* 狭い画面では出さない */
  /* 島の下端とページの地色が違うと、そこで色が切り替わって見える。
     空の色は 3D 側が塗っているので、島スクリプトが描かれた1ピクセルを読んで
     --isl-sky に渡してくる。それをページの地にも敷いて継ぎ目を無くす。 */
  body[data-forest] { background: var(--isl-sky, var(--bg)); }
  body[data-forest] .detail__con { width: 100%; max-width: none; margin: 12px 0 0; }

  .isletabs {
    position: absolute; inset: auto 0 52px 0; z-index: 4;   /* 下は No.〜森名の行のぶん空ける */
    display: flex; gap: 8px; align-items: center;
    padding: 10px clamp(12px, 4vw, 20px) 14px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .isletabs::-webkit-scrollbar { display: none; }
  .isletabs__b {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    height: 40px; padding: 0 14px 0 6px; border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px);
    color: var(--ink); box-shadow: var(--shadow-soft);
    transition: background var(--dur-fast) var(--ease-standard);
  }
  .isletabs__b.-all { padding: 0 16px; }
  .isletabs__m {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--forest-700); color: #fff; font-size: 14px;
  }
  .isletabs__m svg { width: 16px; height: 16px; display: block; }
  .isletabs__n { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
  .isletabs__b.-now { background: var(--forest-700); }
  .isletabs__b.-now .isletabs__n { color: #fff; }
  .isletabs__b.-now .isletabs__m { background: #fff; color: var(--forest-700); }
  /* 島そのものは触らせない。押す場所は帯だけにする（指で回すのをやめる）。 */
  body[data-forest] .detail__image { touch-action: pan-y; }
  body[data-forest] #forest-canvas { pointer-events: none; }
  /* ピンは帯に置き換わったので出さない。小さすぎて狙えない。 */
  body[data-forest] .pins { display: none; }
}

/* 総合ページのピン。マーク＋森の名前で、押すとその森へ入る。
   位置は 3D 側が onPins で毎フレーム返す画面座標。 */
.hpins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hpin {
  position: absolute; translate: -50% -100%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 7px; border-radius: 999px;
  /* 半透明。後ろの島が透けるので、島の上に置いても世界が切れて見えない。 */
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(8px);
  color: var(--ink);
  box-shadow: 0 3px 14px rgba(36, 42, 37, .16);
  text-decoration: none; white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  transition: opacity .3s var(--ease-standard), scale .2s var(--ease-overshoot);
}
/* 森の一言つき。ピンは建物の頭から上へ伸びるので、背が高くなっても伸びる先は空。
   建物には被らない（下に伸ばすと必ず被る）。 */
.hpin.-wide { align-items: flex-start; padding: 10px 18px 11px 10px; border-radius: 22px; }
.hpin__txt { display: grid; gap: 2px; }
.hpin__sub { font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: var(--c, var(--brand)); }
.hpins.-in .hpin {
  opacity: 1;
  transition-delay: calc(var(--i, 0) * .08s), 0s;
}
.hpin.off { opacity: 0; pointer-events: none; }
.hpin:hover { scale: 1.05; }
.hpin__mark {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--c, var(--brand)); color: #fff;
}
.hpin__mark svg { width: 18px; height: 18px; display: block; }
.hpin__name { font-weight: 700; font-size: 14px; letter-spacing: .04em; }
@media (max-width: 900px) {
  .hpin { padding: 5px 12px 5px 5px; gap: 6px; }
  .hpin.-wide { align-items: center; padding: 5px 12px 5px 5px; border-radius: 999px; }
  .hpin__mark { width: 24px; height: 24px; }
  .hpin__mark svg { width: 15px; height: 15px; }
  .hpin__name { font-size: 12px; }
  /* 狭い画面では一言を出さない。島が隠れる。 */
  .hpin__sub { display: none; }
  /* 7つ並べると名前が重なって読めない。えらんだ森の名前だけ出す。
     ほかはマークだけにして、島の場所は分かるようにしておく。 */
  .hpin .hpin__txt { display: none; }
  .hpin { padding: 5px; }
  .hpin.-now { padding: 5px 12px 5px 5px; }
  .hpin.-now .hpin__txt { display: grid; }
  .hpin.-now { z-index: 2; }
  /* えらんだ森の帯も色を変える。次に押すと入る、が分かるように。 */
  .fbtn.-now { background: var(--c); }
  .fbtn.-now .fbtn__name { color: #fff; }
  .fbtn.-now .fbtn__mark { color: #fff; }
  /* 全体へ戻る。えらんでいるあいだも、いつでも押せる場所に置く。 */
  /* 「森全体」も帯のひとつ。先頭に並べて、森と一緒に流れる。
     色だけ変えて、森ではないことを見せる。 */
  .fbtn.-all { display: inline-flex; background: var(--forest-700); }
  .fbtn.-all .fbtn__name { color: #fff; }
  /* ヒントは帯より上へ逃がす。帯は上の余白 32 ＋ ボタン 42 ＋ 下 44 ＝ 118px。
     1行で収める（2行になるとその上に伸びて島にかかる）。 */
  /* 3Dが出せなかったときの断り書き。狭い画面ではカードが下にあるので真ん中でよい。 */
  .isle-fail { left: 50%; top: 40%; }

  .world__hint { bottom: 128px; white-space: nowrap; max-width: 92vw; overflow: hidden;
                 text-overflow: ellipsis; }
}
html.is-static .hpin { opacity: 1; transition: none; }

/* ==========================================================================
   右パネルの追加分 — リード文 / 会社のロゴと写真 / 特徴・コース / CTA
   器は既にあるものを使う（.pkup__item / .bullets / .cta__btn）。
   ここで足すのは、置き場所と間合いだけ。
   ========================================================================== */
.fv__lead {
  margin-top: calc(20px * var(--ps));
  font-size: var(--text-md); font-weight: 700; line-height: 2;
  letter-spacing: .06em; color: var(--forest-700);
}
/* 罫からロゴまでは .tag の下余白（20px）が持つ。ここは下だけ持つ。
   ロゴが無い森では、この箱ごと消えて .tag の 20px がそのまま本文までの余白になる。 */
.fv__co { display: grid; gap: 14px; margin: 0 0 20px; }
/* display を書くと hidden 属性が効かなくなる。空の箱が余白だけ残していた。 */
.fv__co[hidden] { display: none; }
/* 対象会社のロゴ。ロゴの地色は各社ばらばらなので、同じ長方形に載せて揃える。
   1社なら1枚で全幅、2社以上は2列（グループ会社一覧と同じ並び）。
   列数は器が決める。件数で分岐しない（auto-fit が空の列を畳む）。 */
.colog { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.colog__item {
  display: grid; place-items: center; min-height: 110px; padding: 15px 20px;
  background: var(--co-bg, var(--paper)); border-radius: var(--radius-md);
}
/* 高さで頭を揃える。画像の縦横比はそのまま（object-fit: contain）。
   幅ではなく高さで止めるのは、横長のロゴも正方形のロゴも同じ大きさに見せるため。 */
.colog__item img { width: 100%; max-height: 76px; height: auto; object-fit: contain; }
/* ロゴが未取得の会社（買取大吉のロゴが無かった頃）。枠は同じで、中身が社名になる。 */
.colog__name { font-size: var(--text-sm); font-weight: 700; line-height: 1.7;
               letter-spacing: .04em; color: var(--ink); text-align: center; }
/* 対象会社が複数ある森（なおす森）。ロゴを横に3つ並べると社名しか分からないので、
   1社1行にしてロゴの右に「その会社が何を担うか」を置く。選ぶ前に役割が読める。 */
.colog.-notes { grid-template-columns: 1fr; gap: 10px; }
.colog.-notes .colog__item {
  grid-template-columns: 128px 1fr; place-items: center start;
  gap: 16px; min-height: 0; padding: 14px 18px;
}
.colog.-notes .colog__item img { max-height: 44px; }
.colog__note { font-size: 12px; line-height: 1.7; letter-spacing: .02em; color: var(--ink); }
@media (max-width: 900px) {
  .colog.-notes .colog__item { grid-template-columns: 1fr; place-items: start; gap: 10px; }
}
.fv__logo { display: block; }
.fv__logo img { max-width: 180px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.fv__photo { display: block; border-radius: var(--radius-md); overflow: hidden; }
.fv__photo img { width: 100%; height: auto; display: block; }

/* PICKUP の写真。会社の写真を持っている棟だけ出る。 */
.pkup__photo { display: block; border-radius: var(--radius-md); overflow: hidden; }
.pkup__photo img { width: 100%; height: auto; display: block; }

/* 本文からボタンまでは 20px。器の中の間隔（28px）とは別に、ここだけ決める。 */
.fv__zone { display: grid; gap: calc(28px * var(--ps)); margin-top: 20px; }
.fv__zone:empty { display: none; margin-top: 0; }
.fv__points { margin-top: calc(28px * var(--ps)); }
.fv__listttl {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; color: var(--ink);
}
/* 強みに添える一言（めぐる森の備考）。本体より一段落とす。 */
.fv__note { display: block; font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }
.fv__badge {
  font-size: var(--text-xs); line-height: 1.9; letter-spacing: .04em; color: var(--ink-muted);
  background: var(--paper); border-radius: var(--radius-sm); padding: 10px 14px;
}
.fv__cta { display: grid; gap: 12px; justify-items: start; }

.cta__btn { width: 100%; }
/* リンク先が未定のあいだ。押せないことを見た目で示す（飛び先の無いリンクを作らない）。 */
.cta__btn.-waiting { opacity: .45; cursor: default; }
.cta__btn.-waiting:hover { transform: none; }
/* 3Dが出せなかったときの断り書き。原因を画面に残す（見た目では区別がつかないため）。 */
.isle-fail {
  /* 右はカードで隠れるので、見えている左側の真ん中に置く。 */
  position: absolute; left: 26%; top: 46%; translate: -50% -50%; z-index: 6;
  display: grid; gap: 8px; justify-items: center; text-align: center;
  padding: 20px 26px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-soft);
  font-size: 13px; color: var(--ink-muted); max-width: 82%;
}
.isle-fail__t { font-weight: 700; color: var(--ink); }
.isle-fail__w { font-size: 11.5px; letter-spacing: .04em; }
.isle-fail__b {
  margin-top: 2px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12px; font-weight: 700; color: var(--forest-700); cursor: pointer;
}
.isle-fail__b:hover { background: var(--forest-200); }

/* 3Dが落ちたとき。canvas を残すと Safari では真っ黒な穴になる。
   canvas 自体は 3D 側の inline style が乗っているので JS で消す（island.js）。
   ここは、その上に立っているピンを片づける。 */
.is-island-lost .pin,
.is-island-lost .hpin { display: none; }

/* 島全体を見ているときだけ出す。棟に寄ると、同じ場所が棟のCTAに変わる。 */
.fv__home { margin-top: calc(28px * var(--ps)); }
body.is-zoomed .fv__home { display: none; }
/* 森の色を敷いた面（採用の帯）の上だけ、白く反転させる。
   地と同じ色のボタンは沈んで、押せるものに見えなくなる。 */
.cta__btn.-light { background: var(--surface); border-color: var(--forest-200);
  box-shadow: 0 4px 8px rgba(36, 42, 37, .12), inset 0 3px 4px rgba(255, 255, 255, .25); }
.cta__btn.-light span { color: var(--forest-900); }
.cta__btn.-light i { background: var(--forest-700); color: #fff; border-color: var(--forest-500); }

/* ==========================================================================
   森ページの下 — グループ会社一覧 と お知らせ

   どちらも普通のカード1枚。箱も並びも既にあるものを使う（docs/design.md）。
     会社の1マス … .next__item（--surface / 角丸8 / padding 28-30 / 影）
     並び       … .next__grid
     お知らせ1件 … .pkup__item（日付=.pkup__no / タグ=.pkup__label / 題=.pkup__title）
   ここで足すのは、ロゴ画像の置き場所だけ。
   ========================================================================== */
/* 2列 × n行。ロゴは横長のものが多いので、マスの余白を詰めて幅を回す。 */
.gcos__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
.gco { align-content: center; min-height: 92px; padding: 18px 14px; }
.gco__art { display: grid; place-items: center; width: 100%; }
.gco__art img { width: 100%; max-height: 52px; height: auto; object-fit: contain; }
/* ロゴが未取得のうちは社名。入ったら画像だけになる。 */
.gco__name { font-size: var(--text-sm); font-weight: 700; line-height: 1.7; letter-spacing: .04em;
             color: var(--ink); text-align: center; }

/* お知らせの1件。箱ごとリンクなので、押せることを色で示す。 */
.nws__item { text-decoration: none; }
.nws__item:hover .pkup__title { color: var(--forest-700); }
.nws__more { margin-top: calc(40px * var(--ps)); }

/* ---- 総合ページ右下のお知らせ ----
   最新の1件だけを細い帯で出す。島が主役なので、覆う面積を最小にする。
   幅を固定しないのは、3D側が「この帯のぶんだけ」空けてくれるから
   （home.js が実寸を測って渡す）。大きく取ると島が小さくなる。 */
.wnews {
  /* 森のピンより下。ふだんは 3D 側があおりでこのぶんを空けるので重ならないが、
     自分で島を回したあとは重なりうる。隠れて困るのは押せるほう（ピン）なので、
     そちらを上に通す。.hpins 自体は pointer-events:none なので、
     パネルのリンクは普通に押せる。 */
  position: absolute; z-index: 2;
  right: clamp(16px, 3vw, 40px); bottom: 104px;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  max-width: min(640px, 52vw);
  padding: 16px 16px 16px 24px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
}
.wnews__head { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.wnews__ttl { font-size: var(--text-md); font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.wnews__list { display: grid; gap: 10px; min-width: 0; }
.wnews__item { display: grid; gap: 4px; text-decoration: none; color: var(--ink); min-width: 0; }
.wnews__t {
  font-size: var(--text-sm); font-weight: 600; line-height: 1.6; letter-spacing: .04em;
  /* 見出しは1行で切る。長さで帯の高さが変わると、後ろの島の見え方まで変わる。 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.wnews__item:hover .wnews__t { color: var(--forest-700); }
/* 帯の中に入れるので小さくする。丸と字が食い合わないよう、字の右にも余白を取る。 */
.wnews__more { flex: 0 0 auto; width: auto; height: 52px; padding: 0 8px 0 22px; gap: 14px; }
.wnews__more span { font-size: var(--text-xs); }
.wnews__more i { width: 34px; height: 34px; font-size: 9px; }

/* 画面が狭いと島に重なる。お知らせはメニューと /news/ から辿れるので、出さない。 */
@media (max-width: 900px) { .wnews { display: none; } }

/* ---- 会社概要 / サービスから探す ----
   器は「このサイトについて」と同じ .doc__body。並びも既にあるものを使う
   （ロゴ＝.colog__item / チップ＝.tag__item / 箱ごとリンク＝.next__item）。
   ここで足しているのは、項目名と値を2列に並べる定義リストだけ。 */
.prof { display: grid; gap: 0; }
.prof__row { display: grid; grid-template-columns: 7em 1fr; gap: 16px;
             padding: 14px 0; border-bottom: 1px solid var(--line); }
.prof__row:last-child { border-bottom: 0; }
.prof dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; color: var(--ink-muted); }
.prof dd { margin: 0; font-size: var(--text-md); line-height: 1.9; letter-spacing: .04em; }
.doc__body > .colog__item { justify-self: start; min-width: min(320px, 100%); }

.svc { display: flex; flex-wrap: wrap; gap: 8px; }
.svc__item { text-decoration: none; transition: background var(--dur-fast) var(--ease-standard); }
.svc__item:hover { background: var(--tint, var(--bg-sub)); color: var(--c, var(--forest-900)); }

@media (max-width: 900px) {
  .prof__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

/* ---- お知らせ一覧ページ ----
   1件＝1枚。枠も箱も「このサイトについて」と同じ .doc / .doc__body を使う。
   ここで足しているのは、1枚に見出しが1つしか無い場合の間合いだけ。 */
.doc__body > .pkup__meta { align-items: baseline; }
.doc__body > .pkup__meta + h2 { margin-top: 0; }
/* お知らせは1枚あたり数行しかない。全幅の文書と同じ上下80pxだと空きすぎる。 */
.doc__body:has(> .nwsp__more) { padding-top: 60px; padding-bottom: 60px; }
/* 記事を読み終えたあとの「一覧へもどる」。
   本文のすぐ下に貼りつくと読み終わりが分からないので、間を空けて真ん中に置く。 */
.nwsp__more {
  justify-self: center; width: auto; min-width: 260px;
  margin-top: 40px;
}
/* 一覧の「詳細を見る」。ボタンではなく文字の導線にして、行の右端に寄せる。
   1件ずつに濃いボタンが並ぶと、見出しより先にボタンへ目が行ってしまうため。 */
.nwsp__link {
  justify-self: end; align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 4px 2px;
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em;
  color: var(--forest-700); text-decoration: none;
}
.nwsp__link::after { content: "→"; transition: transform .2s var(--ease-standard); }
.nwsp__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.nwsp__link:hover::after { transform: translateX(3px); }
.next__name.-sm { font-size: var(--text-md); line-height: 1.8; }

/* ページ送り。1ページに収まるうちは出さない（押せないものを置かない）。 */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.pager__nums { display: flex; align-items: center; gap: 6px; }
.pager__num, .pager__arrow {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: var(--radius-full); background: var(--surface); color: var(--ink);
  font-family: var(--font-dsp); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: .06em; text-decoration: none; box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-overshoot);
}
a.pager__num:hover, a.pager__arrow:hover { transform: translateY(-2px); }
.pager__num.-now { background: var(--forest-700); color: #fff; box-shadow: none; }
.pager__arrow.-off { opacity: .35; box-shadow: none; }
@media (max-width: 900px) {
  .doc__body:has(> .nwsp__more) { padding-top: 36px; padding-bottom: 36px; }
  /* 狭い画面では横幅いっぱい。中央寄せの指定はそのまま効く。 */
  .nwsp__more { width: 100%; min-width: 0; margin-top: 28px; }
  .pager { gap: 6px; flex-wrap: wrap; }
  .pager__num, .pager__arrow { min-width: 36px; height: 36px; padding: 0 10px; }
}
.nwsp__site { display: inline-block; justify-self: start;
              font-size: var(--text-sm); font-weight: 600; color: var(--forest-700); text-decoration: none; }
.nwsp__site:hover { text-decoration: underline; }
/* リンクで飛んできたとき、ヘッダーの下に隠れないように */
.doc__body[id] { scroll-margin-top: 120px; }

/* --------------------------------------------------------- doc pages */
.doc { max-width: 820px; margin: 0 auto; padding: 160px clamp(20px, 4vw, 40px) 100px; display: grid; gap: 40px; }
/* 狭い画面では、白いパネルの左右余白（80px）が本文を潰す。ヘッダーのぶんの上余白も詰める。 */
@media (max-width: 900px) {
  .doc { padding: 120px 16px 64px; gap: 24px; }
  .doc__body { padding: 32px 24px; border-radius: var(--radius-xl); }
  .doc__title { font-size: 28px; line-height: 1.5; }
  .doc__body h2 { font-size: 20px; line-height: 1.7; }
}
.doc__sub { font-family: var(--font-dsp); font-weight: 600; font-size: 10px; letter-spacing: .18em; color: var(--forest-700); }
.doc__title { font-weight: 700; font-size: 36px; line-height: 46.8px; letter-spacing: .08em; margin-top: 10px; }
.doc__line { width: 100%; height: 2px; display: flex; gap: 10px; margin-top: 12px; }
.doc__line i:first-child { width: 40px; background: var(--forest-700); border-radius: 2px; }
.doc__line i:last-child { flex-grow: 1; background: var(--line); border-radius: 2px; }
.doc__body { display: grid; gap: 26px; background: var(--surface); border-radius: 40px; padding: 80px; }
.doc__body h2 { font-weight: 700; font-size: 24px; line-height: 38.4px; letter-spacing: .08em; margin-top: 20px; }
.doc__body p { font-size: 14px; line-height: 1.8; }
.doc__body ul { display: grid; gap: 10px; }
.doc__body li { padding-left: 20px; position: relative; font-size: 14px; line-height: 1.8; }
.doc__body li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 4px; height: 4px; border-radius: 50%; background: var(--forest-500); }

/* --------------------------------------------------------- footer */
/* 原本 .l-footer>.inner: width calc(100% - 120px) / height 200px / radius 20px / bg #2e2e36。
   配色を緑黒にし、情報量を絞った（規約類はメニューへ移動）。 */
.ft { display: flex; justify-content: center; padding: 0 0 40px; position: relative; z-index: 4; }
.ft__inner {
  position: relative;
  width: calc(100% - 120px); max-width: 1320px; min-height: 200px;
  background: var(--footer-bg); border-radius: 20px;
  padding: 48px 40px 30px;
  display: grid; align-content: space-between;
}
.ft__logo { display: grid; gap: 4px; text-decoration: none; color: #fff; justify-items: start; }
.ft__logo-ja { font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.ft__logo-en { font-family: var(--font-dsp); font-weight: 600; font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.5); }
.ft__links { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: flex-end; margin-top: 24px; }
.ft__links a { font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.85); text-decoration: none; }
.ft__links a:hover { color: #fff; }
.ft__copy { font-family: var(--font-dsp); font-size: 10px; letter-spacing: .04em; color: rgba(255,255,255,.5); margin-top: 12px; }

/* ==========================================================================
   SP — 原本の @media all and (max-width: 900px) を移植
   ========================================================================== */
@media (max-width: 900px) {
  /* 原本: --detailInnerWidth = 82.9333333333vw (= 622/750) */
  :root { --inner: 82.9333333333vw; }

  .hd { padding: 14px 16px; }
  /* 原本 SP: left 16px / 156x96 / radius 0 0 16px 16px / img 120px */
  /* SP では画面の4割を占めていた。小さくして、下の見出しに被る量を減らす。 */
  .hd__logo { left: 12px; width: 128px; height: 78px; border-radius: 0 0 14px 14px; }
  .hd__logo img { width: 110px; } /* 2026-08-17 ロゴ差し替えに伴い 100px から拡大（枠128pxに対し左右余白9px） */
  .menuBtn { width: 70px; height: 70px; }
  .prog { height: 38px; padding: 0 14px; }
  .prog__label, .prog__dots { display: none; }
  .indexBtn { width: 70px; height: 70px; top: auto; bottom: 20px; right: 20px; }

  .world__stage { min-height: 54vh; }
  .world__nav { border-radius: 32px 32px 0 0; }
  .world__nav-inner { padding: 32px 20px 44px; }
  .world__nav-note { display: none; }
  .flist { grid-template-columns: 1fr 1fr; }

  /* 原本: image は 100vw / 80svh、con は margin-top 20px */
  /* 島は画面のいちばん上から。上に空きを作ると、そのぶん島が小さくなる。
     ヘッダーは島の上に浮いているので、島を上げても隠れない。 */
  .detail__image { position: relative; width: 100vw; max-width: none; height: 80vh; height: 80svh; margin-top: 0; }
  /* 森の名前はロゴ（fixed・高さ78px）の下へ逃がす。
     ここを詰めると、名前がロゴの裏に隠れる。 */
  .detail__stamp { position: relative; bottom: auto; left: auto; gap: 16px; padding-left: 15px; margin-top: 56px; }
  .detail__stamp-no .b { font-size: 30px; translate: 0 0; }
  .detail__stamp-line { display: none; }
  .detail__con { width: 100%; margin-left: 0; margin-top: 20px; }

  .fv { padding: 47px 0 0; border-radius: 32px; margin-bottom: 64px; display: flex; flex-direction: column; align-items: center; }
  .fv > * { width: var(--inner); }
  .fv__ttl { margin-top: 24px; gap: 5px; }
  .fv__ttl .item { padding: 6px 10px 8px; }
  .fv__ttl .txt { font-size: calc(min(30px, calc((82.9333333333vw - 20px) / var(--fv-div, 10))) * var(--fit, 1)); }
  /* SP は縦積み。高さは中身に任せる。
     PC の height:100px（2行ぶんの固定）を残したまま overflow:hidden が効いて、
     項目が切り落とされていた（ふれあう森は中身が 222px あった）。 */
  .cat { width: var(--inner); flex-direction: column; height: auto; }
  .cat__left {
    width: 100%; height: auto; padding: 9px 0; font-size: 12px;
    writing-mode: horizontal-tb; letter-spacing: .16em;
  }
  .cat__right {
    width: 100%; flex-wrap: wrap; align-content: flex-start;
    padding: 12px 16px; gap: 2px 0;
  }
  /* 2列。行の高さは文字に合わせる（固定にすると余白だらけになる）。
     長い項目は折り返してよい。 */
  .cat__item {
    width: 50%; height: auto; min-height: 30px; padding: 4px 8px 4px 0;
    font-size: 12px; letter-spacing: .04em; line-height: 1.5;
    justify-content: flex-start; text-align: left; white-space: normal;
  }
  .cat__item:not(:last-child) { border-right: none; }
  .tag { width: var(--inner); flex-direction: column; align-items: flex-start; margin-top: 24px; padding-bottom: 16px; margin-bottom: 20px; }
  .tag__left { border-right: none; padding: 0; }
  .tag__right { margin-left: 0; margin-top: 12px; padding: 0; gap: 8px 6px; }
  .block { width: var(--inner); max-width: none; }
  .block h3 { font-size: 24px; line-height: 36px; margin-bottom: 26px; }

  .card { border-radius: 32px; padding: 104px 0 64px; margin-bottom: 64px; display: flex; flex-direction: column; align-items: center; }
  .card > * { width: var(--inner); }
  .card.-rec { padding: 64px 0; margin-top: 32px; }
  .cardttl { width: var(--inner); margin-bottom: 48px; margin-top: -48px; }
  .cardttl h2 { font-size: 30px; line-height: 1.3; }
  .pkupno { top: 50px; right: 32px; gap: 6px; }
  .pkupno .a { font-size: 20px; }
  .pkupno .b { font-size: 11px; translate: 0 -2px; }
  .pkup { gap: 32px; }
  .pkup__title { font-size: 20px; line-height: 32px; }
  .voice { padding: 28px 24px; }
  .next { margin-bottom: 64px; }
  .doc { padding: 120px 20px 64px; }
  .doc__body { padding: 40px 24px; border-radius: 32px; }
  .doc__title { font-size: 30px; line-height: 1.3; }
}

@media (max-width: 520px) {
  .flist { grid-template-columns: 1fr; }
  .menuBtn__label { display: none; }
}


/* ==========================================================================
   モーション状態 — app.js が発火させる
   初期状態は .js が付いているときだけ作る（JS 無効でも本文は読める）
   ========================================================================== */

/* 見出しの行ごとリビール：下地が左からスライド → 少し遅れて文字 */
.js [data-reveal="ttl"] .bg,
.js [data-reveal="ttl"] .txt { transform: translateX(-102%); opacity: 0; }
[data-reveal="ttl"].is-in .bg {
  transform: none; opacity: 1;
  transition: transform .5s var(--ease-standard) calc(var(--i, 0) * 120ms),
              opacity .25s linear calc(var(--i, 0) * 120ms);
}
[data-reveal="ttl"].is-in .txt {
  transform: none; opacity: 1;
  transition: transform .55s var(--ease-standard) calc(var(--i, 0) * 120ms + 90ms),
              opacity .25s linear calc(var(--i, 0) * 120ms + 90ms);
}

/* ブロックの入場 */
.js [data-reveal="block"] { opacity: 0; translate: 0 24px; }
[data-reveal="block"].is-in {
  opacity: 1; translate: none;
  transition: opacity .6s var(--ease-standard), translate .6s var(--ease-standard);
}

/* セクション見出しの下線バーが伸びる */
.js [data-reveal="block"] .cardttl .line i { transform: scaleX(0); transform-origin: 0 50%; }
/* 原本は 1.5秒 Power3EaseInOut で、2本を同時に引く。
   ずらすと「2本ある」ことが目立ってしまうので、原本どおり揃える。 */
[data-reveal="block"].is-in .cardttl .line i {
  transform: none;
  transition: transform 1.5s cubic-bezier(.65, 0, .35, 1);
}

/* フロートホバー：rAF が --fx / --fy / --fr / --fs を毎フレーム更新する。
   transform ではなく個別プロパティを使う。ボタン側が transform を
   持っていることがあり（.pin の translate(-50%,-100%) など）、上書きすると壊れる。 */
[data-float] {
  translate: var(--fx, 0) var(--fy, 0);
  rotate: var(--fr, 0deg);
  scale: var(--fs, 1);
}
html.is-static [data-float] { translate: none; rotate: none; scale: 1; }

/* 動きを減らす設定のときは、初期状態そのものを無効化する */
html.is-static [data-reveal] .bg,
html.is-static [data-reveal] .txt,
html.is-static [data-reveal],
html.is-static [data-reveal] .cardttl .line i {
  transform: none !important; opacity: 1 !important; translate: none !important;
}

/* ページ遷移の幕は外した。切り替わりに違和感が出るため、素の遷移に戻している。
   経緯と数値は docs/decisions.md。 */

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}