/* ALSMA トップページの見本 v3
   記号: 動かない一点（作品は描き変えず、画面の同じ位置・同じ大きさのまま）／名札／朱の三角の「提案用」／号とmm
   文字組は実在の日本語サイトの実測（notes/2026-10-15-type-teardown.md）に合わせた。和文ゴシック 1 系統＋欧文 1 系統、
   和欧の間に空白を書かず text-autospace に任せ、見出しは文節で折り返す。本文は Aru の基準どおり 17px 以上。 */

:root {
  --ink: #1B1814;
  --ink-2: #4A453F;
  --gray: #77716A;
  --line: #DDD8D0;
  --soft: #F3F0EB;
  --sorter: #E6E3DE;
  --red: #EA5334;
  --jp: "YakuHanJP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --en: "Helvetica Neue", Helvetica, Arial, "YakuHanJP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --side: clamp(24px, 6vw, 90px);
  --pad: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--jp); font-weight: 400; color: var(--ink); background: #fff;
  letter-spacing: .02em; line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; text-autospace: normal;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
.ph { display: inline-block; }
.num { font-family: var(--en); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mk { width: 1.1em; height: 1em; color: var(--red); flex: none; }

/* ---------- ボタン（角のない札の形） ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid var(--ink); font-size: 14px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; font-feature-settings: "palt"; transition: background-color .3s ease, color .3s ease; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #3A342D; border-color: #3A342D; }
.btn-line { background: rgba(255, 255, 255, .7); color: var(--ink); }
.btn-line:hover { background: #fff; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }

/* ---------- ヘッダー ---------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px; padding: 0 var(--side); display: flex; align-items: center; gap: 40px; transition: background-color .3s ease, box-shadow .3s ease; }
.hd.is-solid { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-mark { width: 24px; height: 22px; color: var(--red); }
.logo span { font-family: var(--en); font-size: 15px; font-weight: 500; letter-spacing: .32em; color: #5A5650; }
.hd-nav { display: flex; gap: 32px; margin-left: auto; }
.hd-nav a { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .3s ease; }
.hd-nav a:hover { color: var(--ink); }
.hd-cta { display: flex; gap: 10px; }
.hd-cta .btn { height: 40px; }

/* ---------- 1. 固定区間の舞台 ---------- */
.stage { position: relative; }
.stage-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--sorter); }
.stage-pin::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 5; height: 110px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.lights { position: absolute; inset: 0; background: #0c0a08; opacity: .66; pointer-events: none; }
.scene { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; will-change: transform, clip-path; }
.room { position: absolute; inset: 0; overflow: hidden; }
.room > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.room:not(:first-child) { clip-path: inset(0 0 0 100%); }
.seam { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 36px; margin-left: -36px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20, 14, 8, 0), rgba(20, 14, 8, .16) 85%, rgba(255, 255, 255, .5) 100%); }

/* ファーストビューの文字（左下にまとめる） */
.intro { position: absolute; left: var(--side); bottom: clamp(48px, 10vh, 96px); width: min(560px, calc(100% - 2 * var(--side))); }
.intro-lead { max-width: 460px; }
.intro-title { font-size: clamp(34px, 3.4vw, 50px); font-weight: 600; line-height: 1.3; letter-spacing: .02em; }
.intro-lead { margin-top: 18px; font-size: 17px; line-height: 1.9; letter-spacing: .03em; color: var(--ink-2); }
.intro-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* 作品（描き変えない一点）と、壁に落ちる影 */
.art-shadow { position: absolute; z-index: 2; left: calc(var(--ax) - var(--aw) / 2); top: calc(var(--ay) - var(--ah) / 2); width: var(--aw); height: var(--ah); background: rgba(28, 20, 12, .42); filter: blur(14px); pointer-events: none; }
.art3d { position: absolute; z-index: 3; left: calc(var(--ax) - var(--aw) / 2); top: calc(var(--ay) - var(--ah) / 2); width: var(--aw); height: var(--ah); perspective: 2400px; }
.art-box { position: absolute; inset: 0; transform-style: preserve-3d; }
.face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.f-front { inset: 0; transform: translateZ(calc(var(--ad) / 2)); }
.f-back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--ad) / 2)); background: #CDBFA6; overflow: hidden; }
.f-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .14)); }
.f-side { background: url("../../assets/v3/linen.jpg") center / 240px; }
.f-side::after { content: ""; position: absolute; inset: 0; background: rgba(40, 30, 20, .28); }
.f-right, .f-left { top: 0; height: 100%; width: var(--ad); left: calc(50% - var(--ad) / 2); }
.f-right { transform: rotateY(90deg) translateZ(calc(var(--aw) / 2)); }
.f-left { transform: rotateY(-90deg) translateZ(calc(var(--aw) / 2)); }
.f-top, .f-bottom { left: 0; width: 100%; height: var(--ad); top: calc(50% - var(--ad) / 2); }
.f-top { transform: rotateX(90deg) translateZ(calc(var(--ah) / 2)); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--ah) / 2)); }
.f-bottom::after { background: rgba(40, 30, 20, .45); }

/* 裏に貼るラベル（物の絵として描く。読ませる文は名札の側に出す） */
.tag { position: absolute; z-index: 1; background: #FBFAF6; color: #2A2622; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); font-size: calc(var(--aw) * .024); line-height: 1.5; letter-spacing: .02em; padding: .7em .9em; display: flex; flex-direction: column; font-feature-settings: "palt"; }
.tag b { font-weight: 700; letter-spacing: .06em; }
.tag-gallery { left: 12%; top: 15%; width: 33%; font-family: var(--en); transform: rotate(-.6deg); }
.tag-alsma { right: 11%; top: 21%; width: 29%; border-top: .35em solid var(--red); transform: rotate(.4deg); }
.tag-alsma p { display: flex; align-items: center; gap: .4em; margin-bottom: .3em; font-size: 1.3em; }
.pencil { position: absolute; left: 14%; bottom: 13%; font-family: var(--en); font-size: calc(var(--aw) * .026); color: rgba(60, 54, 48, .55); letter-spacing: .08em; transform: rotate(-1.2deg); }

/* 名札（右下。作品の情報は変わらず、目的・空間の行だけが替わる） */
.label { position: absolute; z-index: 4; right: var(--side); bottom: clamp(48px, 10vh, 96px); width: var(--lb-w, 284px); padding: 20px 22px 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .07); font-feature-settings: "palt"; }
.lb-artist { font-size: 15px; font-weight: 600; letter-spacing: .03em; line-height: 1.5; }
.lb-artist span, .doc-artist span { margin-left: .8em; font-family: var(--en); font-weight: 400; font-size: 14px; letter-spacing: .02em; color: var(--gray); }
.lb-work { margin-top: 2px; font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.lb-spec { margin-top: 4px; font-size: 14px; line-height: 1.7; letter-spacing: .03em; color: var(--ink-2); }
.lb-var { position: relative; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); overflow: hidden; }
.lb-room { position: absolute; left: 0; right: 0; top: 12px; display: flex; flex-direction: column; gap: 6px; opacity: 0; }
.lb-room[data-room="gallery"] { position: relative; top: 0; opacity: 1; }
.lb-room div { display: grid; grid-template-columns: 3em 1fr; column-gap: 10px; }
.lb-room dt { font-size: 14px; font-weight: 500; color: var(--gray); line-height: 1.7; }
.lb-room dd { font-size: 14px; line-height: 1.7; }
.lb-back-title { font-size: 14px; font-weight: 600; line-height: 1.7; }
.lb-back-text { margin-top: 4px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.lb-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.lb-foot span { font-size: 14px; color: var(--gray); margin-right: 8px; }
.lb-use { display: flex; align-items: center; gap: 6px; font-weight: 600; }

/* 出どころの表示（1 色のまま形で区別：塗り＝ギャラリー、輪＝作家） */
.src { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-family: var(--en); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-2); }
.src::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--red); }
.src-g::before { background: var(--red); }

.scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%); }
.scroll-cue span { display: block; width: 1px; height: 48px; background: linear-gradient(var(--ink-2), rgba(0, 0, 0, 0)); }

/* 提案資料の 1 ページ（固定区間の最後に、作品と部屋がここへ収まる） */
.doc { position: absolute; z-index: 1; left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh); background: #fff; opacity: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 34px 80px rgba(40, 30, 20, .16); font-feature-settings: "palt"; }
.doc-head { position: absolute; left: 4.5%; right: 4.5%; top: 5%; display: flex; align-items: baseline; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.doc-kind { font-size: 14px; font-weight: 600; letter-spacing: .2em; }
.doc-title { font-size: 20px; font-weight: 600; }
.doc-title small { font-size: 14px; font-weight: 400; color: var(--gray); }
.doc-page { margin-left: auto; font-family: var(--en); font-size: 14px; color: var(--gray); }
.doc-page b { color: var(--ink); font-weight: 600; }
.doc-slot { position: absolute; left: var(--slot-l); top: var(--slot-t); width: var(--slot-w); height: var(--slot-h); background: var(--soft); }
.doc-body { position: absolute; left: var(--body-l); top: var(--slot-t); right: 4.5%; bottom: 5%; display: flex; flex-direction: column; }
.doc-artist { font-size: 15px; font-weight: 600; }
.doc-work { margin-top: 2px; font-size: 16px; font-weight: 500; letter-spacing: 0; }
.doc-spec { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.doc-dl { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.doc-dl div { display: grid; grid-template-columns: 5em 1fr; column-gap: 8px; }
.doc-dl dt { font-size: 14px; color: var(--gray); line-height: 1.7; }
.doc-dl dd { font-size: 14px; line-height: 1.7; }
.doc-names { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.doc-names div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-size: 14px; }
.doc-names span { width: 5em; color: var(--gray); }
.doc-names em { font-style: normal; color: var(--gray); }
.doc-names .src { margin-left: 0; }
.doc-use { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.doc-use .mk { margin-top: 3px; }

/* ---------- 章の見出し ---------- */
.sec-head { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.sec-title { font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; }
.sec-lead { margin-top: 20px; max-width: 34em; font-size: 17px; line-height: 1.85; color: var(--ink-2); }

/* ---------- 2. アート情報一覧（同じ縮尺の壁） ---------- */
.works { padding: 140px 0 120px; }
.wall-wrap { position: relative; max-width: 1440px; margin: 64px auto 0; padding: 0 var(--pad); display: flex; }
.ruler { position: relative; flex: none; width: 64px; height: var(--wall-h); }
.ruler i { position: absolute; right: 0; height: 1px; background: var(--gray); font-style: normal; }
.ruler i.is-long { width: 14px; }
.ruler i:not(.is-long) { width: 7px; background: #B9B3AA; }
.ruler b { position: absolute; right: 20px; transform: translateY(-50%); white-space: nowrap; font-family: var(--en); font-size: 13px; font-weight: 500; color: var(--gray); font-variant-numeric: tabular-nums; }
.ruler b.is-eye { color: var(--red); }
.wall { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wall::-webkit-scrollbar { display: none; }
.wall-in { position: relative; height: calc(var(--wall-h) + var(--cap-h)); }
.wall-face { position: absolute; left: 0; right: 0; top: 0; height: var(--wall-h); background: linear-gradient(180deg, #EEEAE3 0%, #F5F2ED 30%, #F2EEE8 100%); }
.wall-face::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #D8D0C4; }
.eye { position: absolute; left: 0; right: 0; height: 1px; background: var(--red); opacity: .55; }
.hung { position: absolute; }
.hung img { width: 100%; height: 100%; object-fit: cover; box-shadow: 4px 8px 14px rgba(40, 30, 20, .24), 0 1px 2px rgba(0, 0, 0, .2); }
.cap { position: absolute; top: calc(var(--wall-h) + 20px); font-size: 14px; line-height: 1.6; letter-spacing: .03em; color: var(--ink-2); font-feature-settings: "palt"; }
.cap b { display: block; color: var(--ink); font-weight: 600; }
.cap .t { display: block; color: var(--ink); font-weight: 500; letter-spacing: 0; }
.cap .nw { white-space: nowrap; }
.cap .src { display: flex; width: max-content; margin: 4px 0 0; font-family: var(--jp); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.works-legend { max-width: 1180px; margin: 28px auto 0; padding: 0 var(--pad); font-size: 14px; color: var(--gray); }
.works-legend .src { margin: 0 6px 0 0; }

/* ---------- 3. 提案資料ができるまで（スライド一覧の表示） ---------- */
.steps { padding: 130px 0; background: var(--sorter); }
.pages { max-width: 1180px; margin: 56px auto 0; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 36px; }
.pg { display: flex; flex-direction: column; gap: 16px; }
.pg-paper { position: relative; aspect-ratio: 1.414; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 8px 22px rgba(40, 30, 20, .08); overflow: hidden; }
.pg-cap { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; }
.pg-no { grid-row: span 2; font-family: var(--en); font-size: 15px; font-weight: 600; color: var(--gray); line-height: 1.5; }
.pg-name { font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .03em; }
.pg-text { margin-top: 6px; font-size: 17px; line-height: 1.85; color: var(--ink-2); }
.steps-note { max-width: 1180px; margin: 52px auto 0; padding: 0 var(--pad); font-size: 15px; color: var(--gray); }

/* スライドの中身（見た目だけ。文は下のキャプションで読む） */
.mini { position: absolute; inset: 7% 6%; display: flex; gap: 6%; font-size: 11px; line-height: 1.5; color: var(--ink-2); font-feature-settings: "palt"; }
.mini-room { position: relative; flex: 1.5; overflow: hidden; background: #ddd; }
.mini-room > img { width: 100%; height: 100%; object-fit: cover; }
.mini-art { position: absolute; box-shadow: 1px 2px 4px rgba(0, 0, 0, .25); }
.mini-txt { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mini-txt b { font-size: 12px; color: var(--ink); }
.mini-row { display: flex; gap: 6%; align-items: flex-end; width: 100%; }
.mini-row img { flex: 1; min-width: 0; box-shadow: 1px 2px 4px rgba(0, 0, 0, .2); }
.mini-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 10%; gap: 6px; font-size: 12px; }
.mini-cover .mk { width: 22px; height: 20px; }
.mini-cover b { font-size: 16px; color: var(--ink); }
.mini-lb { width: 64%; padding: 8px 10px; border: 1px solid var(--line); }

/* ---------- 4. 登録するとできること・導入の流れ ---------- */
.entry { max-width: 1280px; margin: 0 auto; padding: 140px var(--pad); }
.entry-cols { display: grid; grid-template-columns: 1fr 1fr; }
.entry-col { padding: 0 56px; display: flex; flex-direction: column; align-items: flex-start; }
.entry-col + .entry-col { border-left: 1px solid var(--line); }
.entry-who { font-size: 14px; font-weight: 600; color: var(--gray); letter-spacing: .04em; }
.entry-title { margin-top: 12px; font-size: 28px; font-weight: 600; line-height: 1.45; }
.entry-list { margin: 26px 0 36px; display: flex; flex-direction: column; gap: 10px; }
.entry-list li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.85; color: var(--ink-2); }
.entry-list li::before { content: ""; position: absolute; left: 0; top: .92em; width: 12px; height: 1px; background: var(--ink); }
.flow { margin: 96px 56px 0; padding-top: 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 200px 1fr; align-items: baseline; }
.flow-title { font-size: 20px; font-weight: 600; letter-spacing: .03em; }
.flow-list { display: flex; flex-wrap: wrap; gap: 14px 56px; }
.flow-list li { display: flex; align-items: baseline; gap: 12px; font-size: 17px; }
.flow-list .num { font-size: 15px; font-weight: 600; color: var(--gray); }

/* ---------- 5. 運営団体 ---------- */
.about { padding: 130px var(--pad); background: var(--soft); display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 620px); justify-content: center; column-gap: 80px; }
.about-kicker { font-size: 14px; font-weight: 600; color: var(--gray); letter-spacing: .1em; }
.about-name { margin-top: 12px; font-size: 28px; font-weight: 600; line-height: 1.5; }
.about-lead { margin-top: 20px; font-size: 17px; line-height: 1.9; color: var(--ink-2); }
.about-link { display: inline-block; margin-top: 28px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.about-dl { display: flex; flex-direction: column; }
.about-dl div { display: grid; grid-template-columns: 6em 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.about-dl div:last-child { border-bottom: 1px solid var(--line); }
.about-dl dt { font-size: 14px; font-weight: 600; color: var(--gray); padding-top: 3px; }
.about-dl dd { font-size: 17px; line-height: 1.85; }

/* ---------- フッター ---------- */
.ft { background: var(--ink); color: #fff; padding: 72px var(--pad) 56px; display: grid; grid-template-columns: auto 1fr; row-gap: 28px; align-items: center; }
.ft-statement { grid-column: 1 / -1; max-width: 34em; font-size: 17px; line-height: 1.9; color: #E8E3DC; margin-bottom: 16px; }
.logo-ft span { color: #CFC9C1; }
.ft-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 28px; }
.ft-nav a { font-size: 14px; color: #E8E3DC; }
.ft-note, .ft-copy { grid-column: 1 / -1; font-size: 14px; color: #A7A097; }
.ft-copy { margin-top: -14px; }

/* ---------- 幅の狭い PC ---------- */
@media (max-width: 1180px) {
  .hd-nav { display: none; }
  .hd-cta { margin-left: auto; }
}

/* ---------- スマホ・タブレット ---------- */
@media (max-width: 999px) {
  :root { --pad: 20px; }
  .hd { height: 56px; padding: 0 16px; gap: 12px; }
  .hd-cta .btn-line { display: none; }
  .hd-cta .btn { height: 36px; padding: 0 14px; font-size: 14px; }
  .logo span { font-size: 14px; }
  .intro { left: 20px; bottom: 28px; width: min(560px, calc(100% - 40px)); }
  .intro-title { font-size: 30px; line-height: 1.35; }
  .intro-lead { margin-top: 12px; font-size: 16px; line-height: 1.8; }
  .intro-cta { margin-top: 18px; gap: 8px; }
  .intro-cta .btn { height: 40px; padding: 0 14px; font-size: 14px; }
  .label { right: auto; left: 16px; bottom: 16px; width: min(560px, calc(100% - 32px)); padding: 14px 16px 12px; opacity: 0; }
  .lb-var { margin-top: 10px; padding-top: 10px; }
  .lb-room { top: 10px; gap: 2px; }
  .lb-foot { margin-top: 10px; padding-top: 8px; }
  .scroll-cue { display: none; }
  .sec-title { font-size: 22px; }
  .sec-lead { font-size: 16px; line-height: 1.8; }
  .works { padding: 96px 0 88px; }
  .wall-wrap { margin-top: 44px; padding-right: 0; }
  .ruler { width: 52px; }
  .ruler b { right: 12px; font-size: 12px; }
  .steps { padding: 96px 0; }
  .pages { grid-template-columns: 1fr; gap: 40px; }
  .pg-name { font-size: 17px; }
  .pg-text { font-size: 16px; }
  .entry { padding: 96px var(--pad); }
  .entry-cols { grid-template-columns: 1fr; gap: 64px; }
  .entry-col { padding: 0; }
  .entry-col + .entry-col { border-left: 0; border-top: 1px solid var(--line); padding-top: 56px; }
  .entry-title { font-size: 22px; }
  .flow { margin: 72px 0 0; grid-template-columns: 1fr; row-gap: 20px; }
  .flow-list { flex-direction: column; }
  .about { grid-template-columns: 1fr; padding: 96px var(--pad); row-gap: 40px; }
  .about-name { font-size: 22px; }
  .ft { grid-template-columns: 1fr; }
  .ft-nav { justify-content: flex-start; }
}

@media (max-width: 699px) {
  .doc-head { gap: 8px 12px; flex-wrap: wrap; padding-bottom: 8px; }
  .doc-title { font-size: 16px; }
  .doc-body { top: auto; left: 4.5%; bottom: 4%; height: var(--body-h); }
  .doc-dl div:last-child, .doc-spec { display: none; }
  .doc-dl { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .room:not(:first-child) { clip-path: none; }
}