/* ============================================================
   表紙＝ヘッダー・メニュー・写真の出方・次の実績（2026-10-15 見本6版目・10/16 Version 9 をサイトへ組み込んだ物。正本はこの site/motion.css）
   本人 10/15 4時台:「ラルゴのサイトはドーンとヘッダーになってて、その下に説明…上の端っこに何もない」
   「メニューが写真の中にあったり、左側にずっとあったり」「写真が入ってくる時のカットイン」「Next Project」「この矢印」。
   6版目（本人 10/15 19時半〜20時の4点）:
     表紙の写真に文字を重ねない。現場名・紹介文は写真の下。写真の上はメニューだけ（下へ続く矢印も写真の下・10/16）
       （「写真の中にこのなんか文字がかかってきて、写真が見えなくなるのは良くない」）
     線は、写真の入る場所に先に走り、入ってきた写真が隠す。走り終えた線は残らない
       （「線はさ、写真で隠れるんだよ、最終的に」「どうでもいいところに線がなんか方眼のように入ってるだけやん」）
     矢印はマウスについてこない。止まったまま、ゆっくり下へ（次の実績は右へ）動いて向きを知らせる。下向きは写真の下の文字の行の右の端
     間取りの LED の帯を外す（光る額縁は残す）
   LARGO の作品ページを0.05秒ごとに測った値（2026-10-15 22時台）: 写真の枠の上の辺に横の線が左から右へ2秒、
   左右の辺に縦の線が上から下へ1.8秒（右は0.5秒遅れ）で走り抜け、写真は枠の中を下から上がる（1.5秒・強くゆっくり止まる）。
   ロゴの形・全画面の幕・開くたびの約4秒の演出・慣性のスクロールは借りない。
   html の印で切り替える（見本で選ぶ所）:
     data-lang   mix=英語を大きく・日本語を小さく / ja=日本語だけ / en=英語だけ
     data-lines  plan=間取り（図面がある現場だけ）＋写真が入る時の線 / guide=写真が入る時の線だけ / none=どちらも出さない
     data-paint  on=英字の塗り / off=塗らない
   ============================================================ */

:root {
  --menu-room: clamp(168px, 14vw, 216px);   /* パソコンで左に止めるメニューの場所。中身はここより右から始める */
  --ease-out: cubic-bezier(.22, .94, .44, 1);  /* 出る: ゆっくり止まる（LARGO の写真と同じ） */
  --ease-text: cubic-bezier(.2, .36, .12, 1);  /* 文字が横から寄る */
  --ease-line: cubic-bezier(.7, 0, .3, 1);     /* 線が走る・表紙が開く（LARGO の線と同じ） */
  --ease-in: cubic-bezier(.55, .055, .675, .19);/* 消える: 速く */
  --cut-line: rgba(22, 21, 18, .34);           /* 写真が入る時の線（紙白・灰の地） */
  --plan-ink: rgba(22, 21, 18, .62);           /* 間取りの線（図として読ませる） */
  --paint-line: rgba(22, 21, 18, .3);          /* 英字の塗りの輪郭（紙白の地） */
  --paint-fill: rgba(22, 21, 18, .3);
  --on-photo: #f2efe9;                         /* 写真の上の文字（メニュー） */
  --on-photo-2: rgba(242, 239, 233, .86);
  --scrim: 14 14 15;
}
:root[data-ground="gray"] { --paper: #e3e0d9; --paper-2: #dbd8d0; --accent: #076c74; --paint-line: rgba(255, 255, 255, .95); --paint-fill: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root[data-ground="gray"]:not([data-theme="light"]) { --paper: #2a2825; --paper-2: #34322f; --accent: #62cbd1; --field: #33312e; }
}
:root[data-ground="gray"][data-theme="dark"] { --paper: #2a2825; --paper-2: #34322f; --accent: #62cbd1; --field: #33312e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cut-line: rgba(240, 237, 231, .34); --plan-ink: rgba(240, 237, 231, .7); --paint-line: rgba(240, 237, 231, .32); --paint-fill: rgba(240, 237, 231, .32); }
}
:root[data-theme="dark"] { --cut-line: rgba(240, 237, 231, .34); --plan-ink: rgba(240, 237, 231, .7); --paint-line: rgba(240, 237, 231, .32); --paint-fill: rgba(240, 237, 231, .32); }

/* ---------- 言葉の出し分け（メニュー・次の実績・見出し） ---------- */
:root[data-lang="ja"] .t-en { display: none !important; }
:root[data-lang="en"] .t-ja { display: none !important; }

/* ============================================================
   メニュー（パソコン: 左に止める / 1199px以下: 上の帯と Menu）
   ============================================================ */
.site-head .tone { transition: color .4s ease, background-color .4s ease; }
@media (max-width: 1199px) { .site-head .tone { transition: none; } }
.site-brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: 16px; letter-spacing: .08em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav .item { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 44px; min-height: 44px; padding-block: 2px; }
.site-nav .item .t-en { font: 400 clamp(22px, 1.9vw, 30px)/1.1 var(--num); letter-spacing: -.02em; }
.site-nav .item .t-ja { font-size: 13px; line-height: 1.5; letter-spacing: .1em; color: var(--note); }
:root[data-lang="ja"] .site-nav .item .t-ja { font-size: 20px; font-weight: 700; letter-spacing: .08em; color: inherit; }
/* 今いるページは下線（色だけで示さない）。乗せると線が右へ抜け、左から引き直す（LARGO の数: 消える0.3秒・伸びる0.6秒） */
.u { position: relative; display: inline-block; padding-bottom: 4px; }
.u::before, .u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
}
:root:not([data-lang="ja"]) .site-nav .t-ja.u::before, :root:not([data-lang="ja"]) .site-nav .t-ja.u::after,
:root:not([data-lang="ja"]) .curtain-nav .t-ja.u::before, :root:not([data-lang="ja"]) .curtain-nav .t-ja.u::after { display: none; }
:root:not([data-lang="ja"]) .site-nav .t-ja.u, :root:not([data-lang="ja"]) .curtain-nav .t-ja.u { padding-bottom: 0; }
.item[aria-current="page"] .u::before { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) {
  .site-nav .item:hover .u::before { transform: scaleX(0); transform-origin: right center; transition: transform .3s var(--ease-in); }
  .site-nav .item:hover .u::after { transform: scaleX(1); transform-origin: left center; transition: transform .6s var(--ease-text) .1s; }
}
.site-nav .site-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap;
}
/* 乗せると、サイトのほかのボタンと同じ水色になって少し沈む（2026-09-27 本人「カーソルを合わせた時に…水色」「ボタンがこう沈む」） */
.site-nav .site-cta, .curtain-cta { box-shadow: 0 3px 0 rgba(14, 14, 15, .18); transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease; }
.site-nav .site-cta:hover, .curtain-cta:hover { background: var(--accent-on-dark); color: var(--dark); transform: translateY(2px); box-shadow: 0 1px 0 rgba(14, 14, 15, .18); }
.site-nav .site-cta:active, .curtain-cta:active { transform: translateY(3px); box-shadow: none; }
.site-menu-btn { display: none; }

/* ---------- パソコン: 同じメニューを2枚重ね、後ろが写真や暗い欄の所だけ白い層を見せる（境目でも字が欠けない） ---------- */
@media (min-width: 1200px) {
  .head-layer { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
  .head-layer .site-brand, .head-layer .site-nav, .head-layer .theme-toggle { pointer-events: auto; }
  .head-layer .site-brand { position: absolute; left: 32px; top: 24px; }
  .head-layer .site-nav { position: absolute; left: 32px; top: 96px; display: grid; justify-items: start; gap: 24px; }
  .head-layer .site-nav ul { display: grid; gap: 8px; }
  .head-layer .theme-toggle { position: absolute; right: 24px; top: 24px; margin: 0; }
  .head-photo .site-brand, .head-photo .site-nav a, .head-photo .theme-toggle { color: var(--on-photo); }
  .head-photo .site-nav .t-ja { color: var(--on-photo-2); }
  :root[data-lang="ja"] .head-photo .site-nav .t-ja { color: var(--on-photo); }
  .head-photo .site-nav .site-cta { background: var(--on-photo); color: var(--dark); }
  .head-photo .site-nav .site-cta:hover { background: var(--accent-on-dark); color: var(--dark); }
  .head-photo .theme-toggle:hover { color: #fff; background: rgba(242, 239, 233, .14); }
  /* JS が測るまで: ページの一番上は写真なので白い層を見せる */
  .js .head-base { clip-path: inset(0 0 100% 0); }
  html:not(.js) .head-photo { display: none; }
  /* 中身はメニューの場所より右から（画面が広い時は今の中央寄せのまま。狭い時だけ左を空ける） */
  .wrap, .hbody { padding-left: max(var(--pad), calc(var(--menu-room) - max(0px, (100vw - 1240px) / 2))); }
}

/* ---------- 1199px以下: 上の帯（写真の上は透明・写真を過ぎたら地の色）と Menu ---------- */
@media (max-width: 1199px) {
  .head-photo { display: none; }
  .head-base { display: contents; }
  .site-head {
    position: fixed; z-index: 40; left: 0; right: 0; top: 0;
    display: flex; align-items: center; gap: 4px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 16px; height: calc(64px + env(safe-area-inset-top, 0px));
    background: transparent;
  }
  .site-head.is-solid { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .site-brand { margin-right: auto; }
  .js .site-nav { display: none; }
  .site-head .theme-toggle { margin: 0; }
  .js .site-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 8px 12px;
    border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 16px/1 var(--num); letter-spacing: .02em; cursor: pointer;
  }
  :root[data-lang="ja"] .site-menu-btn { font: 700 15px/1 var(--sans) !important; letter-spacing: .06em !important; }
  /* 写真の上（JS が帯ごと付け外し） */
  .site-head .on-dark, .site-head .site-brand.on-dark, .site-head .site-menu-btn.on-dark, .site-head .theme-toggle.on-dark { color: var(--on-photo); }
  .site-head .theme-toggle.on-dark:hover { background: rgba(242, 239, 233, .14); }
  /* JavaScript が無い時: 帯の下にそのまま並べる */
  html:not(.js) .site-head { position: absolute; flex-wrap: wrap; height: auto; }
  html:not(.js) .site-nav { width: 100%; }
  html:not(.js) .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
}

/* ---------- スマホの幕（Menu） ---------- */
.site-curtain {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px calc(32px + env(safe-area-inset-bottom, 0px)) 16px;
  background: var(--dark); color: var(--on-photo); overflow-y: auto;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .5s var(--ease-in), visibility 0s linear .5s;
}
.site-curtain.is-open { transform: none; visibility: visible; transition: transform .7s cubic-bezier(.52, .08, .18, 1), visibility 0s; }
.curtain-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.curtain-head .site-brand { color: var(--on-photo); }
.curtain-close {
  min-width: 64px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--on-photo); font: 600 16px/1 var(--num); letter-spacing: .02em; cursor: pointer;
}
:root[data-lang="ja"] .curtain-close { font: 700 15px/1 var(--sans); }
.curtain-nav { position: relative; margin-top: 48px; display: grid; gap: 16px; padding-right: 8px; }
.curtain-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.curtain-nav a { color: var(--on-photo); text-decoration: none; }
.curtain-nav .item { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 48px; min-height: 48px; justify-content: center; }
.curtain-nav .item .t-en { font: 400 40px/1.1 var(--num); letter-spacing: -.02em; }
.curtain-nav .item .t-ja { font-size: 13px; letter-spacing: .1em; color: var(--on-photo-2); margin-top: 4px; }
:root[data-lang="ja"] .curtain-nav .item .t-ja { font-size: 28px; font-weight: 700; color: var(--on-photo); letter-spacing: .06em; margin-top: 0; }
.curtain-cta { justify-self: start; margin-top: 24px; display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--on-photo); color: var(--dark) !important; font-weight: 700; }
.site-curtain .rise { opacity: 0; transform: translateY(40px); }
.site-curtain.is-open .rise { opacity: 1; transform: none; transition: opacity .6s ease calc(.25s + var(--i, 0) * 60ms), transform 1.1s var(--ease-text) calc(.25s + var(--i, 0) * 60ms); }
:root.curtain-lock, :root.curtain-lock body { overflow: hidden; }
@media (min-width: 1200px) { .site-curtain { display: none; } }
:root:not([data-lang="ja"]) .site-menu-btn .t-ja, :root:not([data-lang="ja"]) .curtain-close .t-ja { display: none; }

/* ============================================================
   表紙（実績の詳細・トップ）: ページの一番上が写真。上に帯を置かない。
   写真の上に置くのはメニューだけ。現場名・紹介文と下へ続く矢印は写真の下に置く。
   写真の高さは、最初の画面に写真の下の現場名まで入るよう、画面の高さから200px（スマホは216px）引く。
   ============================================================ */
.cover { position: relative; background: var(--paper); color: var(--ink); }
.cover-media { position: relative; height: calc(100vh - 200px); height: calc(100svh - 200px); min-height: 400px; overflow: hidden; background: var(--dark); }
@media (max-width: 720px) { .cover-media { height: calc(100vh - 216px); height: calc(100svh - 216px); min-height: 360px; } }
.cover-photo { position: absolute; inset: 0; margin: 0; }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 写真の上のメニューを読ませる陰（左のメニューの所と上の所だけ。白い壁の上でも小さい字が4.5:1を割らない濃さ） */
.cover-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--scrim) / .66) 0, rgb(var(--scrim) / .6) calc(var(--menu-room) * .8), rgb(var(--scrim) / 0) calc(var(--menu-room) * 2)),
    linear-gradient(180deg, rgb(var(--scrim) / .4) 0, rgb(var(--scrim) / 0) 160px);
}
@media (max-width: 1199px) {
  .cover-media::after { background: linear-gradient(180deg, rgb(var(--scrim) / .72) 0, rgb(var(--scrim) / .56) 72px, rgb(var(--scrim) / 0) 156px); }
}
/* 開いた時だけ、写真の入る所に先に引かれる線（写真が左右に開いて隠し、最後は消える） */
.cover-seam { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--on-photo); opacity: 0; transform-origin: 50% 0; pointer-events: none; }

/* ---------- 表紙の無いページ（経歴・サービス・相談 など）: 止めたメニューと上の帯に、ページの見出しが隠れないよう下げる ---------- */
main > .phead:first-child { padding-top: calc(124px + env(safe-area-inset-top, 0px)); }

/* ---------- 現場名・担当・時期（実績の詳細。表紙の写真の下） ---------- */
.cover-info { position: relative; max-width: 1240px; margin-inline: auto; padding: 32px var(--pad) 0; }
.cover-info .kind { display: block; font: 600 13px/1.2 var(--num); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.cover-info h1 { margin-top: 12px; font-size: clamp(24px, 2.5vw, 36px); font-weight: 700; line-height: 1.35; letter-spacing: .02em; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.cover-info h1 .seg { display: inline-block; }
.cover-info .work-meta { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 16px; font-size: 16px; line-height: 1.8; }
.cover-info .work-meta > div { display: flex; gap: 12px; align-items: baseline; }
.cover-info .work-meta dt { font-size: 13px; letter-spacing: .06em; color: var(--note); }
.cover-info .work-meta dd { color: var(--text); }
.cover-info .work-meta .num { font-family: var(--num); letter-spacing: .04em; font-feature-settings: "tnum" 1; }
:root[data-lang="ja"] .cover-info .kind { display: none; }
@media (min-width: 1200px) { .cover-info { padding-left: max(var(--pad), calc(var(--menu-room) - max(0px, (100vw - 1240px) / 2))); } }   /* 左に止まるメニューの右から */
@media (max-width: 720px) {
  .cover-info { padding: 24px var(--pad) 0; }
  .cover-info h1 { font-size: 24px; }
  .cover-info .work-meta { gap: 0 24px; margin-top: 8px; }
}
.work-detail .detail-wrap { padding-top: 96px; }
@media (max-width: 720px) { .work-detail .detail-wrap { padding-top: 72px; } }

/* ---------- トップの表紙: 写真だけを一番上に置き、紹介文・数字・ボタンは写真の下へ ---------- */
.hero.hero-split { display: block; min-height: 0; overflow: visible; background: var(--paper); color: var(--ink); }
.hero.hero-split::after { content: none; }
.hero-split .cover-photo img { object-position: center 60%; }
/* パソコンは見出しが2行と大きいので、写真を280px低くして、最初の画面に見出しの2行目まで入れる（200pxでは2行目が画面の下端で半分に切れた） */
@media (min-width: 721px) { .hero-split .cover-media { height: calc(100vh - 280px); height: calc(100svh - 280px); } }
.hero-split .hbody { margin-top: 0; padding-block: 48px; }
.hero-split .kick { color: var(--accent); }
.hero.hero-split h1 { color: var(--ink); }
.hero.hero-split .sub { color: var(--text); }
.hero.hero-split .sub2 { color: var(--note); }
.hero-split .stats > div { border-left-color: var(--line-strong); }
.hero-split .stats .k { color: var(--note); }
.hero.hero-split .row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 32px; }   /* ボタンは数字の下に左揃え（右端に離すと押す物を探させる） */
.hero.hero-split .btn.main { background: var(--ink); color: var(--paper); }
.hero.hero-split .btn.ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.hero.hero-split .btn.main:hover, .hero.hero-split .btn.ghost:hover { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--dark); }
.hero.hero-split :focus-visible { outline-color: var(--accent); }

/* ---------- 開いた時（約1.5秒・止めない・動きを減らす設定では出さない） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .cover-seam { animation: seam 1.3s var(--ease-line) both; }
  .js .cover-photo { animation: cover-open 1.1s var(--ease-line) .45s both; }
  .js .cover-photo img { animation: cover-settle 2.8s var(--ease-out) .45s both; }
  .js .site-head .tone { animation: fade-up .8s var(--ease-text) calc(.55s + var(--i, 0) * 70ms) backwards; }   /* 出終わったら動きの指定を残さない（乗せた時の沈みが効くように） */
  .js .cover-info > * { animation: text-in 1s var(--ease-text) calc(1.1s + var(--i, 0) * 80ms) both; }
  .js .hero-split .hbody > * { animation: fade-up 1s var(--ease-text) calc(1.1s + var(--i, 0) * 90ms) both; }
}
@keyframes seam { 0% { opacity: 1; transform: scaleY(0); } 40% { opacity: 1; transform: scaleY(1); } 70% { opacity: .9; } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cover-open { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes cover-settle { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes text-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drift-down { 0%, 100% { transform: none; } 50% { transform: translateY(8px); } }
@keyframes drift-right { 0%, 100% { transform: none; } 50% { transform: translateX(12px); } }

/* ============================================================
   写真が入る時の線（LARGO の作品ページを測って当てた）
   写真の枠の上の辺に横の線が左から右へ、左右の辺に縦の線が上から下へ走り抜ける。
   写真は枠の中を下から（縦長は横から）入ってきて線を隠し、走り終えた線は枠の外へ抜けるので、最後は何も残らない。
   画面の下から1割入ったら is-in。下へ戻って画面から出たら外す（もう一度出直す）。
   形: <figure class="cut-frame"><span class="cut"><i>横</i><i>左</i><i>右</i></span><a 写真の枠><img></a></figure>
   ============================================================ */
.cut-frame { position: relative; }
.cut {
  --cl: 32px; --cr: 32px; --ct: 32px;   /* 線が写真の外へはみ出す長さ（左・右・上） */
  position: absolute; z-index: 0; top: calc(var(--ct) * -1); left: calc(var(--cl) * -1); right: calc(var(--cr) * -1); bottom: 0;
  overflow: hidden; pointer-events: none;
}
.cut i { position: absolute; display: block; background: var(--cut-line); }
.cut i:nth-child(1) { left: 0; right: 0; top: var(--ct); height: 1px; transform: translateX(-101%); }   /* 写真の上の辺 */
.cut i:nth-child(2) { top: 0; bottom: 0; left: var(--cl); width: 1px; transform: translateY(-101%); }   /* 写真の左の辺 */
.cut i:nth-child(3) { top: 0; bottom: 0; right: var(--cr); width: 1px; transform: translateY(-101%); }  /* 写真の右の辺 */
.cut-frame > :not(.cut) { position: relative; z-index: 1; }   /* 写真の枠は線の上。写真が来た所から線が隠れる */
.cut-frame .detail-photo-link, .cut-frame .work-photo, .cut-frame .next-photo { background: transparent; }
:root[data-lines="none"] .cut, html:not(.js) .cut { display: none; }
/* 縦長2枚の間（24px）は、線が隣の写真の下へ入り込まないよう半分ずつ */
.row-tall-pair > .cut-frame:nth-child(1) .cut { --cr: 12px; }
.row-tall-pair > .cut-frame:nth-child(2) .cut { --cl: 12px; }
@media (max-width: 720px) {
  .cut { --cl: 12px; --cr: 12px; --ct: 12px; }
  .row-tall-pair > .cut-frame:nth-child(1) .cut { --cr: 4px; }
  .row-tall-pair > .cut-frame:nth-child(2) .cut { --cl: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .rv { --rise: 160px; --dl: 0s; }
  /* 写真: 線より0.1秒遅れて（LARGO と同じ）、枠の中を下から上がる（枠の外へははみ出さない）。入る前は消しておき、上がりながら0.4秒で見せる。
     乗せた時に少し大きくなる手ざわりは transform のまま残す */
  .js .rv .cut-frame > :not(.cut) > img { opacity: 0; translate: var(--fx, 0px) var(--rise); transition: translate .3s var(--ease-in), opacity .3s var(--ease-in), transform .6s ease; }
  .js .rv.is-in .cut-frame > :not(.cut) > img { opacity: 1; translate: 0 0; transition: translate 1.5s var(--ease-out) calc(var(--dl) + .1s), opacity .4s var(--ease-out) calc(var(--dl) + .1s), transform .6s ease; }
  /* 線: 先に走り出す（写真は枠の下の方から上がるので、写真が届く前に角と辺に線が見える）。戻る時は見えない所で一瞬で戻す */
  .js .rv .cut i { transition: none; }
  .js .rv.is-in .cut i:nth-child(1) { transform: translateX(101%); transition: transform 2s var(--ease-line) var(--dl); }
  .js .rv.is-in .cut i:nth-child(2) { transform: translateY(101%); transition: transform 1.8s var(--ease-line) var(--dl); }
  .js .rv.is-in .cut i:nth-child(3) { transform: translateY(101%); transition: transform 1.8s var(--ease-line) calc(var(--dl) + .45s); }
  /* 縦長は横から（左の写真は左から、右の写真は右から）。2枚目は少し遅れて */
  .js .rv.row-tall-pair > .cut-frame:nth-child(1), .js .rv.row-tall-l > .cut-frame { --fx: -120px; --rise: 0px; }
  .js .rv.row-tall-pair > .cut-frame:nth-child(2), .js .rv.row-tall-r > .cut-frame { --fx: 120px; --rise: 0px; }
  .js .rv.row-tall-pair > .cut-frame:nth-child(2) { --dl: .27s; }
  /* 本物のページの「下の写真は入った時に出す」（detail.js の wait）は、この動きに置き換える */
  .js .rv .detail-photo.wait { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .js .rv { --rise: 96px; }
  .js .rv.row-tall-pair > .cut-frame:nth-child(1), .js .rv.row-tall-l > .cut-frame { --fx: -64px; }
  .js .rv.row-tall-pair > .cut-frame:nth-child(2), .js .rv.row-tall-r > .cut-frame { --fx: 64px; }
}
.detail-gallery { position: relative; }
.detail-gallery > .detail-row { z-index: 1; }

/* ---------- 間取り（図面がある現場だけ・写真の段の前）----------
   2026-10-15 本人「スクリーンがどこにあるとか、カーテンがどうなってるとか…見えてるとこ以外は何があるとか」。
   2026-10-16 本人「入れるならさ、もっとおしゃれにかっこよくスマートにしろ」、
   「番号でさ、これは何、これは何ってさ、連動してさ、見えるようにさ」「丸1スクリーンとかさ」「間取りと工夫って間取り図だけでよくね」。
   形: 図の上は番号だけ。横（スマホは下）に番号と名前。名前か図の番号を指すと、図のその所と番号が青緑になり、ほかは薄くなる（押すと止まる）。
   描き方: 壁だけ墨で塗り、ほかは細い線。赤は光る額縁の1本だけ。天井の LED の帯・寸法・住所・説明の文は載せない。 */
:root {
  --pl-wall: #2b2a27;                  /* 壁・スクリーン */
  --pl-line: rgba(22, 21, 18, .5);     /* 家具・カーテン */
  --pl-soft: rgba(22, 21, 18, .2);     /* 棚・水回り・扉の開き */
  --pl-red: #b8332a;                   /* 光る額縁 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pl-wall: #d9d4cb; --pl-line: rgba(240, 237, 231, .5); --pl-soft: rgba(240, 237, 231, .2); --pl-red: #ff6a52; }
}
:root[data-theme="dark"] { --pl-wall: #d9d4cb; --pl-line: rgba(240, 237, 231, .5); --pl-soft: rgba(240, 237, 231, .2); --pl-red: #ff6a52; }

/* パソコン: 図は左（2〜8列）、見出しと番号の名前は右（10〜12列）。右の塊は図の高さの真ん中に置く */
.plan-block { display: none; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: 24px; margin-bottom: 96px; }
:root[data-lines="plan"] .plan-block { display: grid; }
.plan-figure { grid-column: 2 / 9; grid-row: 1 / 5; align-self: center; min-width: 0; }
.plan-head { grid-column: 10 / 13; grid-row: 2; display: grid; gap: 8px; margin-bottom: 24px; }
.plan-keys { grid-column: 10 / 13; grid-row: 3; }
.plan-view { position: relative; }
.plan-view.is-port { display: none; }
.plan-svg { display: block; width: 100%; height: auto; overflow: visible; }
.plan-svg g, .plan-svg path { transition: opacity .4s ease, fill .4s ease, stroke .4s ease, stroke-width .4s ease; }
.pl-wall { fill: var(--pl-wall); fill-rule: evenodd; }
.pl-opening { fill: var(--paper); }
.pl-glass { fill: none; stroke: var(--pl-soft); stroke-width: .6; }
.pl-zone { fill: transparent; }
.pl-zone path + path { display: none; }
.pl-storage path, .pl-fixture path, .pl-door path { fill: none; stroke: var(--pl-soft); stroke-width: .6; }
.pl-recline { display: none; }
.pl-furniture path { fill: var(--paper); stroke: var(--pl-line); stroke-width: .7; stroke-linejoin: round; }
.pl-screen path { fill: var(--pl-wall); }
.pl-projector path { fill: var(--pl-soft); }
.pl-curtain path { fill: none; stroke: var(--pl-line); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.pl-frame path { fill: none; stroke: var(--pl-red); stroke-width: 1.6; }
/* 図の上の番号（横の名前の番号と同じ形）。指しやすいよう、見た目の外に 44px の当たり */
.plan-marks { position: absolute; inset: 0; pointer-events: none; }
.pl-mark {
  position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font: 600 11px/1 var(--num); box-shadow: 0 0 0 3px var(--paper);
  pointer-events: auto; cursor: pointer; transition: opacity .3s ease, background-color .3s ease, color .3s ease;
}
.pl-mark::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
/* 見出しと、番号と名前 */
.plan-kicker { margin: 0; font: 600 13px/1.4 var(--num); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
:root[data-lang="ja"] .plan-kicker { display: none; }
.plan-head h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--ink); }   /* 本文16pxの1.25倍 */
.plan-keys { list-style: none; margin: 0; padding: 0; display: grid; }
.plan-key {
  display: flex; align-items: center; gap: 16px; width: calc(100% + 12px); min-height: 44px; margin-left: -12px; padding: 0 12px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; letter-spacing: .06em; text-align: left;
  cursor: pointer; transition: background-color .2s ease, color .3s ease;
}
.plan-key .no { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 11px/1 var(--num); letter-spacing: 0; transition: background-color .3s ease, color .3s ease, opacity .3s ease; }
.plan-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.plan-key[aria-pressed="true"] { background: var(--hover-tint); }
/* 指した番号: 図のその所と番号を青緑にし、ほかを薄くする（色だけで変え、大きさは変えない） */
.plan-block.is-hl :is(.pl-zone, .pl-storage, .pl-fixture, .pl-door, .pl-furniture, .pl-screen, .pl-projector, .pl-curtain, .pl-frame) > path:not(.is-on) { opacity: .2; }   /* 壁・窓は薄くしない（スマホの回した図は全体が1つの組に入るので、層の組を名指しする） */
.plan-block.is-hl .pl-mark:not(.is-on) { opacity: .3; }
.plan-block.is-hl .plan-key:not(.is-on) { color: var(--note); }
.plan-block.is-hl .plan-key:not(.is-on) .no { opacity: .4; }
.plan-key.is-on { color: var(--ink); }
.pl-mark.is-on, .plan-key.is-on .no { background: var(--accent); color: var(--on-accent); }
.plan-svg path.is-on { stroke: var(--accent); }
.pl-furniture path.is-on { fill: color-mix(in srgb, var(--accent) 16%, var(--paper)); stroke-width: 1.2; }
.pl-screen path.is-on { fill: var(--accent); }
.pl-curtain path.is-on { stroke-width: 2.2; }
.pl-storage path.is-on, .pl-fixture path.is-on, .pl-door path.is-on { stroke-width: 1.2; }
/* 画面に入ったら: 壁→カーテンを引く→家具→番号、の順に出る（下へ戻ってまた入ると出直す） */
@media (prefers-reduced-motion: no-preference) {
  .js .plan-block :is(.pl-wall, .pl-opening, .pl-glass, .pl-screen) { opacity: 0; }
  .js .plan-block.is-in :is(.pl-wall, .pl-opening, .pl-glass, .pl-screen) { opacity: 1; transition: opacity .6s ease; }
  .js .plan-block .pl-curtain path { stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: none; }
  .js .plan-block.is-in .pl-curtain path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-line) .4s; }
  .js .plan-block :is(.pl-furniture, .pl-projector, .pl-storage, .pl-fixture, .pl-door, .pl-frame) { opacity: 0; transform: translateY(8px); }
  .js .plan-block.is-in :is(.pl-furniture, .pl-projector, .pl-storage, .pl-fixture, .pl-door, .pl-frame) { opacity: 1; transform: none; transition: opacity .7s ease .8s, transform 1s var(--ease-out) .8s; }
  .js .plan-block .pl-mark { opacity: 0; }
  .js .plan-block.is-in .pl-mark { opacity: 1; transition: opacity .5s ease calc(1.5s + var(--i, 0) * 60ms); }
  .js .plan-block :is(.plan-head, .plan-keys) { opacity: 0; transform: translateY(16px); }
  .js .plan-block.is-in :is(.plan-head, .plan-keys) { opacity: 1; transform: none; transition: opacity .8s ease .3s, transform 1.2s var(--ease-text) .3s; }
  /* 図が出終わった後の、番号を指した時の浮き沈みは速く */
  .js .plan-block.is-in.is-done .plan-svg :is(g, path) { transition: opacity .3s ease, fill .3s ease, stroke .3s ease, stroke-width .3s ease; }
  .js .plan-block.is-in.is-done .pl-mark { transition: opacity .3s ease, background-color .3s ease, color .3s ease; }
}
/* スマホ: 見出し→図（縦長に回した物）→番号と名前（2列） */
@media (max-width: 720px) {
  .plan-block { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin-bottom: 64px; }
  .plan-head, .plan-figure, .plan-keys { grid-column: 1; grid-row: auto; }
  .plan-view.is-land { display: none; }
  .plan-view.is-port { display: block; max-width: 420px; margin-inline: auto; }
  .plan-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 24px; }
}

/* ---------- 英字の塗り（3版目にあった物）: 写真を見進めるほど、右の余白の縦の英字が上から塗られる ---------- */
.paint-side { display: none; position: absolute; top: 0; bottom: 0; right: 0; width: calc((100% - 264px) / 12); pointer-events: none; z-index: 0; }
:root[data-paint="on"] .paint-side { display: block; }
.paint-text {
  position: sticky; top: 14vh; display: block; margin-left: auto; writing-mode: vertical-rl;
  font: 400 clamp(56px, 6vw, 96px)/1.25 var(--num); letter-spacing: -.02em; white-space: nowrap;   /* 行の高さ1.25: y・p の下の部分まで塗る */
  color: transparent; -webkit-text-stroke: 1px var(--paint-line);
  background: linear-gradient(to bottom, var(--paint-fill) 0 var(--p, 0%), transparent var(--p, 0%) 100%);
  -webkit-background-clip: text; background-clip: text;
}
@media (max-width: 720px) { .paint-side { display: none !important; } }
:root[data-paint="on"]:not([data-lang="ja"]) .home .sec-head h2 .en {
  color: transparent; -webkit-text-stroke: 1px var(--ink);
  background: linear-gradient(90deg, var(--ink) 0 var(--p, 0%), transparent var(--p, 0%) 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ============================================================
   次の実績（Next Project）: 大きな文字・下線を引く・次の現場の写真（文字は写真の左。写真に重ねない）
   ============================================================ */
.next-work { position: relative; padding-block: 96px; }
.next-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 32%); gap: 24px 48px; align-items: end; color: var(--ink); text-decoration: none; }
.next-head { display: grid; gap: 12px; min-width: 0; }
.next-head .small { font-size: 13px; letter-spacing: .12em; color: var(--note); }
:root[data-lang="ja"] .next-head .small { display: none; }
.next-big { position: relative; justify-self: start; max-width: 100%; padding-bottom: 16px; overflow: hidden; }
.next-big .t-en { display: block; font: 400 clamp(48px, 8.2vw, 136px)/1 var(--num); letter-spacing: -.045em; white-space: nowrap; }
.next-big .t-ja { display: none; }
:root[data-lang="ja"] .next-big .t-ja { display: block; font-size: clamp(40px, 6vw, 88px); font-weight: 900; line-height: 1.1; letter-spacing: .02em; }
.next-big::before, .next-big::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
.next-work.is-in .next-big::before { transform: scaleX(1); transition: transform 1.2s var(--ease-line) .35s; }
/* 次の現場の名前と、右へ進む矢印（止まったまま、ゆっくり右へ2回） */
.next-name { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.next-arrow { flex: none; width: 48px; height: 16px; overflow: visible; transition: transform .6s var(--ease-text); }
.next-arrow path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (hover: hover) {
  .next-link:hover .next-big::before { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .3s var(--ease-in); }
  .next-link:hover .next-big::after { transform: scaleX(1); transition: transform .6s var(--ease-text) .1s; }
  .next-link:hover .next-photo img { transform: scale(1.04); }
  .next-link:hover .next-arrow { transform: translateX(10px); }
}
.next-frame { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.next-frame .cut { --cl: 24px; --cr: 24px; --ct: 24px; }
.next-photo { display: block; overflow: hidden; border-radius: var(--radius); }
.next-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s cubic-bezier(.41, .12, .26, .97); }
.next-more { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 48px; }
.next-more a.text { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; font-size: 13px; }
.next-more a.text:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .js .next-work .next-big > * { transform: translateY(60%); opacity: 0; }
  .js .next-work.is-in .next-big > * { transform: none; opacity: 1; transition: transform 1.5s var(--ease-text), opacity .8s linear; }
  .js .next-work .next-name, .js .next-work .next-head .small { opacity: 0; }
  .js .next-work.is-in .next-name, .js .next-work.is-in .next-head .small { opacity: 1; transition: opacity .8s ease .5s; }
  .js .next-work.is-in .next-arrow { animation: drift-right 2.2s ease-in-out 1.6s 2; }
  /* 次の現場の写真は右から入る（次へ進む向き） */
  .js .next-work .next-frame { --fx: 120px; --rise: 0px; --dl: .2s; }
}
@media (max-width: 720px) {
  .next-work { padding-block: 96px 64px; }
  .next-link { grid-template-columns: minmax(0, 1fr); }
  .next-frame { grid-column: 1; grid-row: auto; }
  .next-frame .cut { --cl: 12px; --cr: 12px; --ct: 12px; }
  .js .next-work .next-frame { --fx: 64px; }
}

/* ============================================================
   トップ: 見出しの英語を大きく（mix・en の時）・実績の写真（名前は写真の下）
   ============================================================ */
:root:not([data-lang="ja"]) .home .sec-head h2 .en {
  font: 400 clamp(56px, 7.2vw, 112px)/1 var(--num); letter-spacing: -.045em; text-transform: none; color: var(--ink); margin-bottom: 16px;
}
:root:not([data-lang="ja"]) .home .sec-head h2 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; }
:root[data-lang="ja"] .home .sec-head h2 .en { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .home .sec-head h2 .en { clip-path: inset(0 0 100% 0); transform: translateY(24px); }
  .js .home .sec-head.is-in h2 .en { clip-path: inset(0 0 -10% 0); transform: none; transition: clip-path 1.2s var(--ease-line), transform 1.5s var(--ease-out); }
}
/* ============================================================
   世界観の決まり（全ページ共通・2026-10-16 スレッド その7。正本は docs/世界観と決まり.md）
   しんのすけさんの仕事机: 灰色の紙の上に、本人が引いた図面の線と、本人が撮った完成写真を置く。
   - 地は全ページ同じ灰（html の data-ground="gray"・scripts/site_menu.py が付ける）。色は写真だけ
   - 塗った帯・箱をやめ、区切りは細い墨の線。角は丸めない（丸いのは押せる物＝ボタンだけ）
   - 英字は「大きな形」（ページ名・トップの段の名前・種類名）と「小さな札」（大文字・青緑）の2つだけ
   - 写真の上に文字を置かない。写真を押すと、一覧とトップはその現場へ・詳細は拡大
   ============================================================ */
:root { --radius: 0px; --rule: rgba(22, 21, 18, .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rule: rgba(240, 237, 231, .3); } }
:root[data-theme="dark"] { --rule: rgba(240, 237, 231, .3); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 帯と箱は塗らない: 一段濃い面の帯は、上の細い墨の線に。カードは上の線と番号だけ */
.sec.tint { background: transparent; border-top: 1px solid var(--rule); }
.card, .tint .card { background: transparent; border-radius: 0; padding: 24px 0 0; border-top: 1px solid var(--rule); }
.cards { gap: 40px 32px; }
/* 札（押せない言葉）は四角い枠。押せる物（丸いボタン）と見分けがつく */
.tags li, .tint .tags li { background: transparent; border: 1px solid var(--rule); border-radius: 0; padding: 6px 12px; }

/* ページの頭: 英字のページ名は大きな形（トップの段の名前と同じ大きさ・字詰め）、日本語の題はその下 */
:root:not([data-lang="ja"]) .phead .en { font: 400 clamp(56px, 7.2vw, 112px)/1 var(--num); letter-spacing: -.045em; text-transform: none; color: var(--ink); }
main > .phead:first-child { padding-bottom: 64px; }
.wrap.narrow { max-width: 1240px; }   /* 本文の左の端はどのページも同じ線にそろえる（行の長さだけ 760px に） */
.wrap.narrow > * { max-width: 760px; }   /* 頭の文と次の区切りの線を詰めない（まとまりの間は中の2倍以上） */
.lead b { color: inherit; }   /* 見出しの中の強調は太さだけ。色は写真だけが持つ */
:root:not([data-lang="ja"]) .phead h1 { margin-top: 16px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; line-height: 1.35; letter-spacing: .02em; }
:root[data-lang="ja"] .phead .en { display: none; }

/* 写真が入る時の線を、詳細・トップ以外の写真にも（経歴の4つの絵・サービスの写真） */
.ph-frame { display: block; }
.ph-frame > .work-photo, .ph-frame > .ph { display: block; overflow: hidden; }
.ph-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 実績の写真のリンク（トップの Works・実績一覧）: 写真の下に文字。押すとその現場のページへ ---------- */
.work-link { display: block; color: inherit; text-decoration: none; }
.work-link .work-photo { aspect-ratio: 16 / 9; background: var(--paper-2); }
.work-link img { transition: transform .6s var(--ease-out), translate 1.5s var(--ease-out), opacity .4s ease; }
.work-link .cap { display: block; padding-top: 16px; }
@media (hover: hover) {
  .work-link:hover img { transform: scale(1.03); }
  .work-link:hover .kind-name, .work-link:hover .place { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
.work-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .js .rv .cap { opacity: 0; translate: 0 12px; }
  .js .rv.is-in .cap { opacity: 1; translate: 0 0; transition: opacity .8s ease calc(var(--dl, 0s) + .7s), translate 1s var(--ease-out) calc(var(--dl, 0s) + .7s); }
}

/* トップの Works: 6つの種類。写真の下は種類と、その種類が何か・どう使うか */
.top-works { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.top-work .cut { --cl: 12px; --cr: 12px; --ct: 16px; }
.top-work .kind-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); word-break: keep-all; }   /* 「・」の後でだけ折る */
.top-work .kind-desc, .kind-desc { word-break: auto-phrase; text-wrap: pretty; }   /* 言葉の切れ目で折る（対応するブラウザだけ） */
.top-work .kind-desc { display: block; margin-top: 8px; font-size: 16px; line-height: 1.8; color: var(--text); }
@media (max-width: 1000px) { .top-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .top-works { grid-template-columns: 1fr; gap: 48px; }   /* 説明の文は本文と同じ16pxで読ませるので、スマホは1列 */
  .top-work .cut { --cl: 5px; --cr: 5px; --ct: 8px; }
}

/* ---------- 動きを減らす設定: 全部止めて、最初から見せる（走る線は出さない） ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-head *, .cover *, .hero *, .rv, .rv *, .next-work *, .site-curtain, .site-curtain * { animation: none !important; transition: none !important; }
  .site-nav .site-cta:hover, .site-nav .site-cta:active, .curtain-cta:hover, .curtain-cta:active { transform: none; }
  .cut { display: none; }
  .next-work .next-big::before { transform: none; }
  .plan-block *, .plan-block { transition: none !important; }   /* 最初から全部見える（隠す指定は動きを減らさない設定の時だけ）。番号で浮かべるのは動きでないので残す */
}