:root{
    --snow:#F5F4F1;
    --snow-deep:#EDEAE3;
    --ink:#201F1D;
    --ink-soft:#4B473F;
    --stone:#8A8478;
    --line:#DEDAD2;
    --taupe:#CBC0B6;
    --taupe-soft:#E1D9CE;
    --coral:#EE8066;
    --coral-soft:#F5C4B5;
    --dark:#2A2825;
    --radius:2px;
    /* 「図面のように見せる」コンセプト(design-brief 13章)のトークン。
       フェーズ1の対象(ヘッダー・メニュー・ヒーロー・ABOUT)ではこちらだけを使い、
       --snow / --coral / --taupe 系は使わない。 */
    --paper:#FAFAF7;
    --sumi:#111111;
    --marker:#D4F23C;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  /* スムーススクロールはLenis(js/main.js)側が担うため、ここでは
     scroll-behavior:smoothを付けない(両方が効くとrAFで動かすLenisと
     ブラウザネイティブの平滑スクロールが競合してカクつく)。 */

  body{
    background:var(--paper);
    color:var(--sumi);
    font-family:'Zen Maru Gothic', sans-serif;
    font-weight:400;
    line-height:2;
    letter-spacing:.03em;
    -webkit-font-smoothing:antialiased;
  }

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

  h1,h2,h3,.brand{
    font-family:'Zen Kaku Gothic New', sans-serif;
    font-weight:500;
  }

  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  ul{ list-style:none; }
  /* 単語の途中で行が折り返されるのを防ぐための汎用ユーティリティ
     (例: 「定期調査」が「定期調」「査」のように分かれるのを防ぐ) */
  .line-nowrap{ white-space:nowrap; }

  .wrap{ max-width:1140px; margin:0 auto; padding:0 32px; }

  /* reveal-on-scroll */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:.12s; }
  .reveal-delay-2{ transition-delay:.24s; }
  .reveal-delay-3{ transition-delay:.36s; }

  /* ---------------- Header (全幅の帯として画面上端に固定) ---------------- */

  /* ロゴ・ナビ・menuを、浮いたボタン(ピル)ではなく、紙色の帯の中に収める。
     下辺は墨の1px線(図面の枠線)。背後がスクロールで透けすぎないよう、
     不透明度.94+軽いぼかし。高さは64px固定(ヒーローの寸法線ラベルがこの下に
     収まるよう、64pxを超えないこと)。 */
  header{
    position:fixed; top:0; left:0; right:0; z-index:70;
    display:flex; justify-content:space-between; align-items:center;
    height:64px; padding:0 32px; gap:24px;
    background:rgba(250,250,247,.94);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--sumi);
    transition:background .4s ease, border-color .4s ease;
  }

  /* ロゴとサービス一覧(.hero-strip)を横並びにするラッパー。この2つを
     1つのflexアイテムとしてまとめることで、menuボタン(右端)との
     space-betweenは保ったまま、ロゴのすぐ右にサービス一覧を続けられる。 */
  .header-left{
    display:flex; align-items:center; gap:36px;
    flex:1 1 auto; min-width:0; /* menuボタンの手前で縮み、ナビがmenuの下に潜り込まない */
  }
  #menu-toggle{ flex:none; }

  .corner-link{
    display:flex; align-items:center; gap:10px;
    font-size:.66rem; letter-spacing:.22em; color:var(--sumi);
    background:transparent; border:none; cursor:pointer;
    font-family:'Zen Maru Gothic', sans-serif;
    padding:0;
    transition:color .35s ease;
  }

  .corner-logo-link{
    padding:0;
  }
  .corner-logo{ height:28px; width:auto; display:block; }

  .menu-icon{ width:20px; height:14px; position:relative; }
  .menu-icon span{
    position:absolute; left:0; right:0; height:1px; background:currentColor;
    transition:transform .3s ease, opacity .3s ease;
  }
  .menu-icon span:nth-child(1){ top:0; }
  .menu-icon span:nth-child(2){ top:6px; }
  .menu-icon span:nth-child(3){ top:12px; }
  #menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  #menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2){ opacity:0; }
  #menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .site-menu{
    position:fixed; inset:0; z-index:65;
    background:var(--sumi); color:var(--paper);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:56px;
    transform:translateY(-100%);
    transition:transform .55s cubic-bezier(.65,0,.2,1);
  }
  .site-menu.open{ transform:translateY(0); }
  .site-menu ul{ display:flex; flex-direction:column; align-items:center; gap:30px; }
  .site-menu a{
    font-family:'Zen Kaku Gothic New', sans-serif;
    font-size:clamp(1.4rem, 4vw, 2.1rem);
    letter-spacing:.1em; color:var(--paper);
    position:relative;
  }
  .site-menu a::after{
    content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
    background:var(--marker); transform:scaleX(0); transition:transform .3s ease;
  }
  .site-menu a:hover::after{ transform:scaleX(1); }
  .site-menu-logo{ height:30px; width:auto; filter:brightness(0) invert(1); opacity:.85; }

  /* ---------------- Hero ---------------- */

  /* .hero-pin(写真アニメーション)と#about(SERVICE)をまとめて包み、
     hero-content(文言)をこの範囲全体にわたって画面に留めておくための
     外枠。--hero-fg-rgbの既定値もここに置き、.hero(スクロールキュー等)と
     hero-content-pin(文言)の両方へ継承させる。 */
  .hero-about-pin{
    position:relative;
    --hero-fg-rgb:17,17,17; /* 紙の上が前提。900px以下だけmain.jsが明色へ補間する */
  }

  /* hero-content(社名・キャッチコピー・説明文)をヒーローからSERVICEの
     終わりまで画面に固定表示するためのラッパー。height:0のsticky要素に
     することで、.hero-pinの写真アニメーションが基準にするwindow.scrollYの
     値をずらさずに(=ページ全体のスクロール量を増やさずに)固定できる。
     sticky要素は「containing blockの下端がtopで指定した位置まで
     せり上がってきた時点」で固定が外れる仕様なので、実際に文字が
     見える位置(=下のtransformで持ち上げる分)とこのtop値を揃えておく
     必要がある。ここをtop:0のままにして見た目の位置だけtransformで
     ずらすと、SERVICE終わり(containing blockの下端)が画面最上部まで
     来ないと固定が外れず、PROJECTセクションと重なって見えてしまう。
     pointer-events:noneは、この上に重なっている間もSERVICEセクションの
     カードなどをクリックできるようにするため。 */
  .hero-content-pin{
    position:sticky; top:calc(38vh - 80px); height:0; overflow:visible;
    z-index:6; pointer-events:none;
  }

  .hero-pin{
    position:relative;
    /* 500px covers the name->catchcopy text fade (see main.js); the
       remaining budget is a hold so the lattice photo reveal (also 500-
       700px, see main.js) finishes and the catchcopy sits fully visible for
       a moment before the next section scrolls up over the hero. */
    height:calc(100vh + 900px);
  }

  .hero{
    position:sticky;
    top:0;
    height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:120px 0 76px;
    overflow:hidden;
    /* explicitly transparent (overriding the generic `section{background}`
       rule below, since .hero is itself a <section>) - the photo behind it
       is a separate, permanently fixed layer (see .hero-slideshow) that
       must show through this box while it's pinned. Once the hero scrolls
       away past the pin, this transparency also lets the still-fixed photo
       show through until the next section's own opaque background rises
       to cover it. */
    background:none;
  }

  /* Solid fallback layer behind the photo (see .hero-slideshow's clip-path):
     shows through the mullion of the lattice "porthole" (and everywhere
     outside it) until the window has expanded to cover the full screen.
     Same fixed/negative-z-index setup as .hero-slideshow, one layer further
     back, so it's covered the same way once later sections' opaque
     backgrounds scroll up over it. Matches the #about (ABOUT) section's
     background so the color reads as continuous with it. */
  .hero-bg{
    position:fixed; inset:0; width:100%;
    z-index:-2;
    /* 紙+方眼(80px、墨6%)。#aboutも同じ背景をfixedで重ね、継ぎ目を消す */
    background-color:var(--paper);
    background-image:
      linear-gradient(rgba(17,17,17,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17,17,17,.06) 1px, transparent 1px);
    background-size:80px 80px;
  }

  /* Lives outside .hero-pin in the markup (a sibling right before it) so
     .hero's overflow:hidden can't clip it. position:fixed + a negative
     z-index keep it pinned behind the whole page for good, not just for
     the hero's pinned scroll budget - subsequent sections' opaque
     backgrounds progressively cover it as they scroll up over it. */
  .hero-slideshow{
    position:fixed; inset:0; width:100%;
    z-index:-1; overflow:hidden;
    opacity:0;
    animation:hero-photo-fade-in 2s ease .2s forwards;
    /* Starts as a small square "porthole" in the center of the screen;
       main.js grows it as the page scrolls and moves its center to follow
       the mouse, until it comfortably covers the full viewport, revealing
       the whole photo as a 2x2 lattice (格子窓) of panes. This plain square
       (no mullion) is just the pre-JS/no-JS fallback shape - main.js
       overrides it inline with the real lattice path once it runs. */
    clip-path:inset(calc(50% - 9vmin) calc(50% - 9vmin) calc(50% - 9vmin) calc(50% - 9vmin));
    -webkit-clip-path:inset(calc(50% - 9vmin) calc(50% - 9vmin) calc(50% - 9vmin) calc(50% - 9vmin));
  }
  @keyframes hero-photo-fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  .hero-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0;
    transition:opacity 2.6s ease;
    filter:grayscale(1) contrast(1.05);
  }
  .hero-slide.is-active{ opacity:1; z-index:2; }
  .hero-slide.is-zooming{ animation:hero-slide-zoom 13s ease-out forwards; }
  @keyframes hero-slide-zoom{
    from{ transform:scale(1); }
    to{ transform:scale(1.12); }
  }

  /* 暗いスクリムはデスクトップでは廃止(文字は写真の外=紙の上にあるため)。
     写真が全面になる900px以下だけ、下のメディアクエリで復活させる。 */
  .hero-photo-note{
    display:none;
    position:absolute; inset:0; z-index:3;
  }

  /* 縦位置は親のhero-content-pinのsticky top値で決まる(その値と揃えて
     おくことで、SERVICE終わりで正しく固定が外れる - 詳細は上のコメント
     参照)。ここでは元の水平方向の微調整(+70px)だけを残している。 */
  .hero-content{ position:relative; z-index:2; padding:0 32px; max-width:620px; }
  /* 窓は画面の中央〜右(左30.6%〜)に収まるので、左の余白に文言を置く。
     最大幅=窓の左端-24px(padding 32pxx2を含む)。 */
  @media (min-width:901px){
    .hero-content{ max-width:calc(30.56vw - 24px); }
  }

  /* 画面右側・縦方向は画面中央を起点に、下部近くまで届く縦長のバーの
     上部分に、「SCROLL」を横書きの文字を90°回転させた形で配置する */
  .hero-scroll-cue{
    position:absolute; right:3%; top:36%; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:44px;
    color:rgba(var(--hero-fg-rgb), .75);
  }
  .hero-scroll-cue span:not(.hero-scroll-bar){
    display:inline-block;
    transform:rotate(90deg);
    font-size:.85rem; letter-spacing:.4em;
  }
  .hero-scroll-bar{
    width:1px; height:min(26vh, 200px); background:rgba(var(--hero-fg-rgb), .3);
    position:relative;
  }
  /* small dot that travels down the bar from top to bottom, pauses briefly
     at the bottom, then jumps back to the top to repeat */
  .hero-scroll-bar::after{
    content:""; position:absolute; top:0; left:50%; width:6px; height:6px;
    margin-left:-3px; margin-top:-3px; border-radius:50%;
    background:var(--marker); box-shadow:0 0 0 1px var(--sumi); animation:hero-scroll-fall 1.6s ease-in-out infinite;
  }
  @keyframes hero-scroll-fall{
    0%{ top:0%; }
    60%{ top:100%; }
    100%{ top:100%; }
  }

  /* サービス一覧。ロゴの真横に並ぶ#site-headerの一部で、ヘッダーの帯とともに
     ページ全体で画面上端に固定表示される。帯は常に紙色なので、文字は常に墨。 */
  .hero-strip{
    min-width:0;
    display:flex; align-items:center; gap:32px; overflow-x:auto;
    white-space:nowrap;
  }
  .hero-strip a{
    font-size:.76rem; letter-spacing:.06em; color:var(--sumi);
    display:inline-flex; align-items:center; gap:10px;
    transition:color .35s ease;
  }
  .hero-strip a span{ color:var(--marker); -webkit-text-stroke:.6px var(--sumi); font-size:.55rem; }
  .hero-strip a:hover{ color:var(--sumi); opacity:.6; }
  .hero-strip::-webkit-scrollbar{ height:0; }

  .eyebrow{
    font-size:.68rem; letter-spacing:.3em; color:rgba(17,17,17,.6);
    display:inline-block;
  }
  /* overrides the default .eyebrow color above - scoped to hero-content
     only, so it tracks --hero-fg-rgb like the rest of the hero text instead
     of the fixed taupe used elsewhere (e.g. the CONTACT section). */
  .hero-content .eyebrow{ font-family:var(--mono); color:rgba(var(--hero-fg-rgb), .8); transition:color .4s ease; }

  .hero-content h1{
    margin-top:20px;
    font-size:clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight:500;
    line-height:1.7;
    letter-spacing:.02em;
    color:rgba(var(--hero-fg-rgb), .94);
    transition:color .4s ease;
  }
  .hero-content h1 .line-nowrap{ white-space:nowrap; }

  .hero-sub{
    /* vwベースでレスポンシブに(emだとfont-sizeが大きくなるほど幅も一緒に
       広がってしまい、特に.hero-content{max-width:none}になる900px以下では
       行が長く伸びすぎてSERVICEの写真列に文字がめり込み、「域」などが写真に
       重なって見切れて見える原因になっていた)。画面が狭くなるほど60vwに
       沿って縮み、420pxを超えて広がることはないので、どの画面幅でも
       写真列に届かない。 */
    margin-top:16px; max-width:clamp(240px, 60vw, 420px); color:rgba(var(--hero-fg-rgb), .58);
    font-size:clamp(1rem, 2.2vw, 1.3rem); letter-spacing:.03em;
    transition:color .4s ease;
  }
  /* hero-subの各行(index.html側で意図した箇所に手動で<br>を入れている)を
     それぞれ必ず1行で収め、途中で折り返させない。max-width(420px上限)
     より行の内容の方が広いことがあるが、写真列まではまだ余裕があるので
     素直にオーバーフローさせて1行を保つ。620px以下ではmax-widthがさらに
     狭くなり1行に収める余地がなくなるため、通常の折り返しに戻す
     (.hero h1 .line-nowrapと同じ考え方)。 */
  .hero-sub-line{ white-space:nowrap; }
  @media (max-width:620px){
    .hero-sub-line{ white-space:normal; }
  }

  /* SERVICEセクションの明るい背景(--snow)に重なっている間は、写真の上を
     前提にした明るい文字色(--hero-fg-rgbが白寄りに変化済み)のままだと
     読めなくなるため、濃い色に切り替える。main.jsがscrollYを見て
     .hero-pinの高さを超えたタイミングでこのクラスを付け外しする。 */
  .hero-content-pin.is-on-light .eyebrow{ color:rgba(17,17,17,.75); }
  .hero-content-pin.is-on-light h1{ color:rgba(17,17,17,.94); }
  .hero-content-pin.is-on-light .hero-sub{ color:rgba(17,17,17,.7); }

  /* 見出し(h1)と説明文(hero-sub)を同じグリッドセルに重ね、opacityの
     クロスフェードだけで入れ替える。grid-area:1/1で両方を同じマスに
     置くことで、絶対配置のtop計算をせずに済み、テキストの折返し高さが
     変わってもコンテナは自然に大きい方に合わせて広がる。
     既定(is-on-lightが付く前=ヒーロー画面)は見出しを表示、説明文は
     非表示。 */
  .hero-catch-swap{ display:grid; }
  .hero-catch-swap > *{ grid-area:1 / 1; transition:opacity .5s ease, color .4s ease; }
  .hero-catch-swap h1{ opacity:1; }
  .hero-catch-swap .hero-sub{ opacity:0; }
  /* #aboutの上端がこのテキストに到達しis-on-lightが付いたら入れ替える
     (発火条件はmain.js onScroll内のis-on-light判定と共通)。 */
  .hero-content-pin.is-on-light .hero-catch-swap h1{ opacity:0; }
  .hero-content-pin.is-on-light .hero-catch-swap .hero-sub{ opacity:1; }

  .hero-text-swap{ position:relative; min-height:200px; }
  .hero-text-state{
    position:absolute; top:0; left:0; right:0;
  }
  .hero-text-main{
    /* 最初は非表示。窓が拡大しきる手前(進行度70〜95%)に、main.jsが
       opacityを0→1にして左の余白へフェードインさせる(逆マスクは廃止)。 */
    opacity:0;
  }
  .hero-text-name h1{
    margin-top:20px;
    font-size:clamp(2.2rem, 4.4vw, 3.2rem);
    font-weight:300;
    white-space:nowrap;
    width:max-content; /* 窓との接触判定(main.js)が文字の実幅で効くように */
    /* main.js toggles this to 0 the instant the lattice window's bounding
       box touches the heading (see renderHeroLattice), so the name vanishes
       outright rather than being eaten away pane by pane. */
    transition:opacity .25s ease;
  }
  /* タイプで打ったような登場演出(.type-textで囲った文字に使う汎用
     クラス。ヒーローの社名はページ読み込み時に、ABOUT/PROJECTの大見出し
     はスクロールで画面に入った時に、それぞれmain.js側で再生される)。
     各文字はopacity:0で待機し、main.jsが1文字ずつsetTimeoutでis-typedを
     付与したタイミングで一気に不透明度1へ切り替わる - transitionを
     指定していないので、フェードではなくタイプライターの1打鍵のように
     パッと現れる(CSSのtransition/animation-delayでも組めるが、非常に
     短いdelayでの発火がブラウザによって不安定だったため、確実な
     setTimeoutにしている)。 */
  .type-char{ opacity:0; }
  .type-char.is-typed{ opacity:1; }
  /* 最後の文字が打ち終わると同時にmain.jsがis-blinkingを付与し、カーソル
     が現れて点滅を始める(それより前はopacity:0のまま見えない)。 */
  .type-cursor{
    display:inline-block; width:2px; height:.85em; margin-left:2px;
    background:currentColor; vertical-align:-.05em;
    opacity:0;
  }
  .type-cursor.is-blinking{
    opacity:1;
    animation:type-cursor-blink 1s step-end infinite;
  }
  @keyframes type-cursor-blink{ 0%, 100%{ opacity:1; } 50%{ opacity:0; } }

  .btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--marker); color:var(--sumi);
    padding:16px 34px; font-size:.82rem; letter-spacing:.12em;
    border-radius:var(--radius);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-primary:hover, .btn-primary:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 12px 26px -10px rgba(0,0,0,.5);
  }
  .btn-primary:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; }

  /* ---------------- Section shared ---------------- */

  /* opaque background so each section visually covers the fixed hero photo
     as it scrolls up over it (sections that need a different shade already
     set their own background inline/via rule and simply override this). */
  section{
    padding:104px 0; position:relative;
    background-color:var(--paper);
    background-image:
      linear-gradient(rgba(17,17,17,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17,17,17,.06) 1px, transparent 1px);
    background-size:80px 80px;
    background-attachment:fixed;
  }

  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    margin-bottom:70px; padding-bottom:26px;
    border-bottom:1px solid var(--sumi);
  }
  .section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.3rem); line-height:1.5; }
  .section-head .num{ font-size:.72rem; letter-spacing:.2em; color:var(--sumi); font-family:var(--mono); }
  .section-head .cap{ font-size:.8rem; color:rgba(17,17,17,.7); max-width:24em; text-align:right; }

  /* SERVICE(#about)・PROJECT(#project)セクションは文字を全体的に大きく */
  #about .section-head h2,
  #project .section-head h2,
  #staff .section-head h2,
  #faq .section-head h2{ font-size:clamp(1.8rem, 3vw, 2.2rem); }
  /* 「SERVICE」「02 — PROJECT」ラベルは極端に大きい見出しとして扱う。
     ウェイトを軽くし、横幅の45%程度を占めるくらいまでサイズを拡大 */
  #about .section-head .num,
  #project .section-head .num,
  #staff .section-head .num,
  #faq .section-head .num{
    font-size:clamp(3.4rem, 8vw, 8rem); font-weight:300; letter-spacing:.06em; line-height:1;
    margin-bottom:8px; display:block;
  }
  /* 見出し直下の区切り線は非表示に */
  #about .section-head,
  #project .section-head,
  #staff .section-head,
  #faq .section-head{ border-bottom:none; padding-bottom:0; }

  /* SERVICE・PROJECTセクションは1140pxの中央寄せ制限を外し、
     画面の横幅いっぱいに広げる(左右の余白 .wrap のpaddingのみ維持) */
  #about .wrap,
  #project .wrap,
  #staff .wrap,
  #faq .wrap{ max-width:none; }

  /* SERVICEセクション: 見出し「SERVICE 業務内容について」を左半分、
     業務内容リストを右半分に2カラムで配置する */
  #about .about-layout{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  }
  #about .section-head{ margin-bottom:0; }
  /* 「SERVICE / 業務内容について」の文言は、業務内容リスト(右カラム)を
     スクロールしている間、画面の下から約30%の高さ(=上から70%)に
     留まって流れていかないようにする。左カラムを右カラムと同じ高さまで
     伸ばしてスクロール可能な「のりしろ」を確保し、そのなかでテキストを
     sticky指定で固定する(top値はvh単位=ビューポート基準なので、
     画面のどの高さでも常に「下から30%」の位置になる。900px以下では
     通常のフローに戻す) */
  @media (min-width:901px){
    #about .about-layout{ align-items:stretch; }
    #about .section-head{ display:block; }
    #about .section-head > div{ position:sticky; top:70vh; }
  }
  /* 右カラムが狭くなる分、業務内容カード内のレイアウトも
     900px以下の表示（.service-rowが1カラムに折り返す幅）に合わせて調整する */
  #about .service-row{ grid-template-columns:1fr; gap:20px; padding:28px 0; }
  #about .service-row-visual{ order:-1; height:220px; margin-top:0; }
  #about .service-row-title{ white-space:normal; }
  #about .service-row-num{ font-size:clamp(2.6rem, 4vw, 4rem); }

  /* ---------------- Service list ---------------- */

  .service-list{
  }

  .service-row{
    display:grid; grid-template-columns:1fr 420px; gap:48px; align-items:start;
    padding:32px 0;
  }

  .service-row-header{
    display:flex; align-items:baseline; gap:32px; flex-wrap:wrap;
  }
  .service-row-num{
    font-family:'Zen Kaku Gothic New', sans-serif; font-size:clamp(3.5rem, 7vw, 6.5rem); color:var(--sumi);
  }
  /* SERVICEセクション: 番号を各項目の画像の上に重ねて表示する */
  .service-row-visual .service-row-num{
    position:absolute; left:24px; bottom:16px; z-index:2;
    line-height:1; color:var(--paper);
    text-shadow:0 4px 20px rgba(20,19,17,.55), 0 1px 6px rgba(20,19,17,.4);
  }
  /* タイトルは番号・タグとは別の行に、折り返さない1行で表示する
     (flex-basis:100%でheader内の新しい行へ強制的に送る) */
  .service-row-title{
    flex-basis:100%;
    font-size:clamp(1.4rem, 2vw, 2rem); line-height:1.3; color:var(--sumi);
    white-space:nowrap;
    transition:color .3s ease;
  }
  .service-row:hover .service-row-title, .service-row:focus-visible .service-row-title{ color:var(--sumi); }

  .service-row-detail{
    margin-top:22px;
  }
  .service-row-detail p{ color:rgba(17,17,17,.78); font-size:1.05rem; max-width:34em; margin-bottom:18px; }

  .service-row-visual{
    position:relative;
    height:340px; margin-top:48px; background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    color:var(--sumi);
    transition:color .3s ease;
    overflow:hidden;
  }
  .service-row-visual svg{ width:52%; height:52%; position:relative; z-index:1; }
  .service-row-visual.has-photo{ padding:0; }
  .service-row-photo{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(.15);
  }
  .service-row:hover .service-row-visual, .service-row:focus-visible .service-row-visual{ color:var(--sumi); }
  /* .service-row-visual自体のtransition(color .3s、ホバー用)は.reveal
     (opacity/transform .9s)と同じ詳細度(クラス1つ)なので、後にあるこちらの
     宣言が丸ごと上書きしてしまい、ABOUTの写真がフワッと現れず一瞬で
     切り替わって見えていた。両方を合成した専用ルールで上書きし直す。 */
  .service-row-visual.reveal{
    transition:color .3s ease, opacity .9s ease, transform .9s ease;
  }

  /* 写真にカーソルを重ねると、暗いスクリムごしに「詳しく見る」を
     中央に表示する。.service-row-num(z-index:2)より前面に出すため
     z-indexを3に。行全体が<a>なので、写真だけでなく行のどこを
     ホバー/フォーカスしても表示される(既存の.service-row:hoverと同じ
     トリガー条件)。 */
  .service-row-hover{
    position:absolute; inset:0; z-index:3;
    display:flex; align-items:center; justify-content:center;
    background:rgba(20,19,17,.45);
    color:var(--paper); font-size:.85rem; letter-spacing:.08em;
    opacity:0; transition:opacity .3s ease;
  }
  .service-row:hover .service-row-hover, .service-row:focus-visible .service-row-hover{ opacity:1; }

  /* ---------------- Project gallery ---------------- */

  /* #project自体をスクロール1000px分だけ画面上端に固定表示させる。
     sticky要素は「containing blockの下端がtopで指定した位置まで
     せり上がってきた時点」で固定が外れる仕様(hero-content-pinと同じ
     考え方)だが、外枠(.project-pin)の高さがauto(padding-bottomなど
     から計算される値)のままだとこのブラウザではsticky自体が効かなく
     なる不具合があるため、高さは固定pxで明示する必要がある。#projectの
     高さはレスポンシブ/フィルタ操作で変わるため、実際の値はmain.jsの
     sizeProjectPinで都度計算してinline styleに設定している。 */
  .project-pin{ position:relative; }
  #project{ position:sticky; top:0; }
  /* 画面が低いときも固定表示中に#project全体が収まるよう、上下の余白・見出し・
     カードの高さを画面の高さ(vh)に合わせて詰める。上端は固定ヘッダー(64px)の下。
     それでも収まらない場合だけ、main.jsが固定位置をずらす。 */
  @media (min-width:901px){
    #project{ padding:88px 0 40px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
    #project > .wrap{ width:100%; }
    #project .section-head{ margin-bottom:clamp(20px, 4.5vh, 40px); }
    #project .section-head .num{ font-size:clamp(3.4rem, min(8vw, 14vh), 8rem); }
    #project .filter-row{ margin-bottom:clamp(16px, 3vh, 32px); }
    #project .project-card{ height:clamp(200px, calc(100vh - 430px), 320px); }
  }

  .filter-row{ display:flex; gap:14px; margin-bottom:48px; flex-wrap:wrap; }
  .filter-btn{
    font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--sumi);
    border:1px solid var(--sumi); padding:9px 20px; border-radius:0;
    background:transparent; cursor:pointer; transition:all .25s ease;
  }
  .filter-btn:hover, .filter-btn:focus-visible{ background:rgba(212,242,60,.45); }
  .filter-btn.active{ background:var(--marker); border-color:var(--sumi); color:var(--sumi); }

  /* project-gridは表示域(はみ出した後半3枚をoverflow:hiddenで隠すだけの
     枠)、project-trackが実際に6枚を横1列に並べる帯本体。
     trackの幅は表示域の200%なので、6枚それぞれをtrack自身の1/6
     (=表示域の1/3)にすれば、前半3枚がちょうど表示域いっぱいに収まり、
     後半3枚は右側にはみ出た状態になる。隠れている後半3枚を見せる
     translateXの制御はmain.js側(#projectの固定表示スクロールに連動)。 */
  .project-grid{ overflow:hidden; }
  /* --n = カードの総数(main.jsが数えて設定。未設定でも6件前提で動く)。
     表示域には3枚ぶん見え、残りは右にはみ出す: 幅=n/3x100%、1枚=(幅-隙間)/n。 */
  .project-track{ display:flex; gap:8px; width:calc(var(--n, 6) / 3 * 100%); }
  .project-card{
    position:relative; overflow:hidden;
    background:var(--paper); border:1px solid var(--sumi);
    display:block; cursor:pointer;
    flex:0 0 calc((100% - (var(--n, 6) - 1) * 8px) / var(--n, 6));
    height:320px;
  }
  .project-card-photo{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); }
  .project-card .overlay{
    position:absolute; inset:0; background:linear-gradient(0deg, rgba(17,17,17,.86) 0%, rgba(17,17,17,0) 60%);
    display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
    opacity:0; transition:opacity .35s ease;
  }
  .project-card:hover .overlay, .project-card:focus-visible .overlay{ opacity:1; }
  .overlay .p-name{ color:var(--paper); font-size:.9rem; font-family:'Zen Kaku Gothic New', sans-serif; }
  .overlay .p-tag{ color:rgba(250,250,247,.8); font-size:.68rem; letter-spacing:.1em; margin-top:6px; }
  .overlay .p-no{ color:var(--paper); font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; margin-bottom:6px; }
  .project-card[data-cat]{ transition:opacity .35s ease, transform .35s ease; }
  .project-card.hide{ display:none; }

  /* ---------------- Staff ---------------- */

  .staff-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .staff-card{
    border:1px solid var(--sumi); background:var(--paper);
    padding:0; overflow:hidden; position:relative;
  }
  .staff-photo{ aspect-ratio:3/4; background:#EBEBE6; border-bottom:1px solid var(--sumi); position:relative; }
  .staff-photo svg{ position:absolute; inset:0; width:100%; height:100%; }
  .staff-photo svg *{ stroke:var(--sumi); } /* 仮置きシルエットの線色(HTML属性より優先) */
  .staff-info{ padding:20px 22px 26px; }
  .staff-info .role{
    font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--sumi);
    background:linear-gradient(transparent 55%, var(--marker) 55%); padding:0 .2em;
  }
  .staff-info h3{ font-size:1rem; margin-top:8px; }
  .staff-info .msg{
    font-size:.8rem; color:rgba(17,17,17,.7); margin-top:12px;
    max-height:0; overflow:hidden; transition:max-height .4s ease, margin-top .4s ease;
  }
  .staff-card:hover .msg, .staff-card:focus-within .msg{ max-height:120px; margin-top:12px; }

  /* ---------------- CTA ---------------- */

  .cta{ text-align:center; background:var(--sumi); color:var(--paper); border-radius:0; }
  .cta .wrap{ padding:100px 32px; }
  .cta .eyebrow{ color:rgba(250,250,247,.75); font-family:var(--mono); }
  .cta .sheet-tag{ color:var(--paper); display:block; margin-bottom:18px; }
  .cta .sheet-tag::before{ background:var(--paper); }
  .cta h2{ font-size:clamp(1.8rem, 4vw, 2.6rem); margin:22px 0 26px; color:var(--paper); }
  .cta p{ color:rgba(250,250,247,.75); max-width:30em; margin:0 auto 40px; font-size:.9rem; }
  .cta .btn-primary{ background:var(--marker); color:var(--sumi); }
  .cta-contact-row{ margin-top:36px; display:flex; justify-content:center; gap:48px; flex-wrap:wrap; font-size:.8rem; color:rgba(250,250,247,.7); }
  .cta-contact-row strong{ display:block; color:var(--paper); font-family:var(--mono); font-size:.95rem; margin-top:6px; font-weight:400; }

  /* ---------------- Footer ---------------- */

  footer{
    padding:56px 0 40px;
    background-color:var(--paper);
    background-image:
      linear-gradient(rgba(17,17,17,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17,17,17,.06) 1px, transparent 1px);
    background-size:80px 80px;
    background-attachment:fixed;
  }
  .footer-grid{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
    font-family:var(--mono); font-size:.76rem; color:rgba(17,17,17,.7); padding-top:26px;
    border-top:1px solid var(--sumi); /* 家形の区切り線は廃止(図面の線に統一) */
  }

  /* ---------------- News toast (à la reference site) ---------------- */

  .news-toast{
    position:fixed; right:20px; bottom:20px; z-index:80;
    max-width:300px;
    background:var(--paper);
    border:1px solid var(--sumi);
    border-radius:2px;
    padding:16px 38px 16px 16px;
    box-shadow:0 18px 40px -16px rgba(17,17,17,.4);
    transition:opacity .3s ease, transform .3s ease;
  }
  .news-toast.hidden{ opacity:0; transform:translateY(12px); pointer-events:none; }
  .toast-inner{ display:flex; align-items:center; gap:12px; }
  .toast-label{
    display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; color:var(--sumi);
    background:linear-gradient(transparent 50%, var(--marker) 50%); padding:0 .3em; margin-bottom:4px;
  }
  .toast-link{ font-size:.8rem; color:var(--sumi); line-height:1.5; }
  .toast-link:hover{ background:linear-gradient(transparent 62%, var(--marker) 62%); }
  .toast-close{
    position:absolute; top:6px; right:8px; width:22px; height:22px;
    background:none; border:none; color:var(--sumi); font-size:1rem; line-height:1; cursor:pointer;
  }
  .toast-close:hover{ opacity:.6; }

  /* ---------------- Responsive ---------------- */

  @media (max-width:900px){
    /* ロゴ横に並べるだけの余白がなくなる幅からは非表示にする。
       同じリンクはハンバーガーメニュー(.site-menu)側に既にあるため、
       情報が失われるわけではない。 */
    .hero-strip{ display:none; }
    .service-row{ grid-template-columns:1fr; gap:20px; }
    .service-row-visual{ order:-1; }
    /* SERVICEセクションも、この幅からは見出しとリストを1カラムに戻す */
    #about .about-layout{ grid-template-columns:1fr; gap:40px; }
    .staff-grid{ grid-template-columns:repeat(2, 1fr); }
    /* hero-content is centered/full-width on mobile rather than left-aligned,
       so the scrim darkens from the bottom instead of the desktop's left-side gradient */
    .hero-photo-note{ display:block; background:linear-gradient(0deg, rgba(20,19,17,.75) 0%, rgba(20,19,17,.3) 45%, rgba(20,19,17,.05) 75%); }
    .hero-content{ max-width:none; }
  }
  @media (max-width:620px){
    .wrap, .hero-content{ padding-left:22px; padding-right:22px; }
    .hero h1 .line-nowrap{ white-space:normal; }
    section{ padding:92px 0; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .section-head .cap{ text-align:left; }
    .staff-grid{ grid-template-columns:1fr; }
    /* 狭い画面では1行に収まらないため、折り返しを許可する */
    .service-row-title{ white-space:normal; }
    .news-toast{ left:16px; right:16px; max-width:none; bottom:16px; }
  }

  /* ==================================================================
     Service detail pages (services/*.html)
     ================================================================== */

  .service-hero{
    padding:160px 0 0;
  }
  .service-hero .wrap{ padding-bottom:64px; }
  .service-breadcrumb{
    display:flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:rgba(17,17,17,.6);
    margin-bottom:28px;
  }
  .service-breadcrumb a{ color:var(--sumi); }
  .service-breadcrumb a:hover{ background:linear-gradient(transparent 62%, var(--marker) 62%); }
  .service-hero-num{
    font-size:clamp(3.4rem, 9vw, 7rem); font-weight:300; letter-spacing:.06em; color:var(--sumi);
    display:block; line-height:1; margin-bottom:8px;
  }
  .service-hero h1{
    font-size:clamp(1.9rem, 4.2vw, 2.8rem); line-height:1.5; max-width:16em;
  }
  .service-hero-lede{
    margin-top:24px; max-width:36em; color:rgba(17,17,17,.78); font-size:.95rem;
  }
  .service-hero-photo{
    width:100%; aspect-ratio:16/8; object-fit:cover; display:block;
    filter:grayscale(1) contrast(1.05); border:1px solid var(--sumi);
  }
  /* サービス詳細ページの画像を .wrap 内に収めて全幅表示をやめる */
  .service-hero-photo--inline{
    margin-top:40px; border-radius:0;
  }

  .service-section{ padding:96px 0; }
  .service-section-head{ margin-bottom:48px; }
  .service-section-head .num{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--sumi); display:block; margin-bottom:14px;
  }
  .service-section-head h2{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); }

  .service-feature-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
    background:var(--sumi); border:1px solid var(--sumi);
  }
  .service-feature{
    background:var(--paper); padding:36px;
  }
  .service-feature h3{
    font-size:1.02rem; margin-bottom:14px; display:flex; align-items:center; gap:14px;
  }
  .service-feature h3 span{
    flex:none; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--marker); border:1px solid var(--sumi);
    font-family:var(--mono); font-size:.72rem; font-weight:500; line-height:1; color:var(--sumi);
  }
  .service-feature p{ color:rgba(17,17,17,.78); font-size:.88rem; }

  .service-other-list{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  }
  .service-other-card{
    display:block; border:1px solid var(--sumi); padding:28px; background:var(--paper);
  }
  .service-other-card .service-other-num{
    font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; color:var(--sumi); display:block; margin-bottom:10px;
  }
  .service-other-card h3{
    font-size:1rem; display:inline;
    background:linear-gradient(var(--marker), var(--marker)) 0 100% / 0 .32em no-repeat;
    transition:background-size .4s ease;
  }
  .service-other-card:hover h3, .service-other-card:focus-visible h3{ background-size:100% .32em; }

  @media (max-width:760px){
    .service-hero{ padding-top:130px; }
    .service-feature-grid{ grid-template-columns:1fr; }
    .service-other-list{ grid-template-columns:1fr; }
  }

  /* ==================================================================
     「図面のように見せる」フェーズ1 (design-brief 13章)
     対象: ヒーローの図面レイヤー・ABOUT。フェーズ2(PROJECT以降)は上の各ルールに反映済み。
     ================================================================== */

  /* ---- ヒーローの図面レイヤー(寸法線・バルーン・凡例・タイトルブロック) ----
     fixedで窓(写真)と同じ位置に固定し、main.jsのrenderHeroLatticeが毎フレーム
     窓の矩形から座標を更新する。#about(z-index:2)が下から覆いかぶさる。
     z-index:1は.hero(auto)の上に出してバルーンをクリック可能にするため。
     #aboutが画面上端に達したらmain.jsがvisibility:hiddenにして、PROJECT以降に
     被らないようにしている。 */
  .hero-drawing{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    font-family:var(--mono); color:var(--sumi);
    transition:opacity .4s ease;
  }
  .hero-drawing.is-faded{ opacity:0; }
  .hero-dim{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .hero-dim .dim, .hero-dim .frame{ stroke:var(--sumi); stroke-width:1; fill:none; }
  /* 線は描画アニメ(pathLength=1のstroke-dashoffset)。読み込み後、写真の
     フェードインに少し遅れて引かれる。reduced-motionでは描画済みで止まる。 */
  .hero-dim .dim{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:dim-draw 1.2s ease 1.2s forwards;
  }
  .hero-dim .frame{ opacity:0; animation:dim-fade .8s ease 1s forwards; }
  .hero-dim text{
    font-size:11px; letter-spacing:.08em; fill:var(--sumi);
    opacity:0; animation:dim-fade .8s ease 2s forwards;
  }
  @keyframes dim-draw{ to{ stroke-dashoffset:0; } }
  @keyframes dim-fade{ to{ opacity:1; } }

  /* 窓が拡大しきった(進行度92%〜)ら出す要素 */
  .hero-balloons a, .hero-legend, .hero-titleblock{
    opacity:0; transition:opacity .6s ease;
  }
  .hero-drawing.is-final .hero-balloons a,
  .hero-drawing.is-final .hero-legend,
  .hero-drawing.is-final .hero-titleblock{ opacity:1; }

  /* バルーン: 窓の上の丸数字(蛍光塗り)。セクション案内のリンクを兼ねる */
  .hero-balloons a{
    position:absolute; pointer-events:none;
    width:28px; height:28px; border-radius:50%;
    background:var(--marker); border:1px solid var(--sumi);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:500; line-height:1; color:var(--sumi);
  }
  .hero-drawing.is-final .hero-balloons a{ pointer-events:auto; }
  .hero-balloons a:hover{ background:var(--sumi); color:var(--marker); }
  .hero-balloons .b1{ left:calc(var(--win-l) + var(--win-w) * .12); top:calc(var(--win-t) + var(--win-h) * .2); }
  .hero-balloons .b2{ left:calc(var(--win-l) + var(--win-w) * .5);  top:calc(var(--win-t) + var(--win-h) * .55); }
  .hero-balloons .b3{ left:calc(var(--win-l) + var(--win-w) * .84); top:calc(var(--win-t) + var(--win-h) * .28); }

  /* 凡例: 窓の下辺、縮尺ラベル(S=1:xx)の右隣に左寄せ(右下の角はタイトルブロックが占める) */
  .hero-legend{
    position:absolute;
    left:calc(var(--win-l) + 84px); top:calc(var(--win-t) + var(--win-h) + 12px);
    display:flex; gap:20px; font-size:11px; letter-spacing:.06em; white-space:nowrap;
  }
  .hero-legend span{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; margin-right:6px; border-radius:50%;
    background:var(--marker); border:1px solid var(--sumi); font-size:9px;
  }

  /* タイトルブロック: 窓(写真)の右下の角に重ねる。ブロックの右下角を、窓の右下角から
     18pxだけ外へはみ出させる(図面の枠に押された印のように、角をまたぐ)。窓の矩形は
     main.jsの updateDrawing が --win-l/t/w/h に毎フレーム入れている。 */
  .hero-titleblock{
    position:absolute; width:220px;
    left:calc(var(--win-l) + var(--win-w) + 18px);
    top:calc(var(--win-t) + var(--win-h) + 18px);
    transform:translate(-100%, -100%);
    border:1px solid var(--sumi); background:var(--paper);
    font-size:10px; letter-spacing:.08em;
  }
  .hero-titleblock .tb-name{
    padding:6px 10px; border-bottom:1px solid var(--sumi);
    font-family:'Zen Kaku Gothic New', sans-serif; font-size:.78rem; letter-spacing:.1em; line-height:1.6;
  }
  .hero-titleblock .tb-row{ display:grid; grid-template-columns:auto 1fr auto; }
  .hero-titleblock .tb-row > span{ padding:5px 8px; line-height:1.5; }
  .hero-titleblock .tb-row > span + span{ border-left:1px solid var(--sumi); }

  /* キャッチコピー「守りつづける。」の蛍光下線(文字色は変えない) */
  .mk{ background:linear-gradient(transparent 52%, var(--marker) 52%); padding:0 .1em; }

  @media (max-width:900px){
    /* 寸法線は上辺のみ。バルーン・凡例・タイトルブロックは出さない */
    #dim-left, #dim-left-a, #dim-left-b, #dim-left-text,
    .hero-balloons, .hero-legend, .hero-titleblock{ display:none; }
  }

  /* ---- ABOUT: 紙+方眼、凡例形式のサービス一覧 ---- */
  #about{
    z-index:2;
    background-color:var(--paper);
    background-image:
      linear-gradient(rgba(17,17,17,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17,17,17,.06) 1px, transparent 1px);
    background-size:80px 80px;
    background-attachment:fixed; /* 固定背景(.hero-bg)と方眼が同じ位置で続く */
    color:var(--sumi);
  }
  #about .section-head .num{ color:var(--sumi); }
  .sheet-tag{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--sumi);
    margin-bottom:14px;
  }
  .sheet-tag::before{
    content:""; display:inline-block; width:28px; height:1px; background:var(--sumi);
    vertical-align:middle; margin-right:10px;
  }

  #about .service-row{ border-top:1px solid var(--sumi); }
  #about .service-row:last-child{ border-bottom:1px solid var(--sumi); }
  #about .service-row-header{ align-items:center; gap:16px; flex-wrap:nowrap; }
  /* 丸数字バルーン(蛍光塗り)。写真の上ではなく、サービス名の左に置く */
  #about .service-row-num,
  #about .service-row-visual .service-row-num{
    position:static; flex:none;
    width:40px; height:40px; border-radius:50%;
    background:var(--marker); border:1px solid var(--sumi);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:.8rem; font-weight:500; line-height:1;
    color:var(--sumi); text-shadow:none;
  }
  #about .service-row-title{
    flex-basis:auto; color:var(--sumi);
    background:linear-gradient(var(--marker), var(--marker)) 0 100% / 0 .32em no-repeat;
    transition:background-size .4s ease;
    padding-bottom:.05em;
  }
  #about .service-row:hover .service-row-title,
  #about .service-row:focus-visible .service-row-title{
    color:var(--sumi); background-size:100% .32em;
  }
  #about .service-row-detail p{ color:rgba(17,17,17,.78); }
  #about .service-row-visual{ background:var(--paper); border:1px solid var(--sumi); }
  #about .service-row-photo{ filter:grayscale(1) contrast(1.05); }
  #about .service-row:hover .service-row-visual,
  #about .service-row:focus-visible .service-row-visual{ color:var(--sumi); }
  #about .service-row-hover{ background:rgba(17,17,17,.5); color:var(--paper); font-family:var(--mono); }

  /* 左余白に収めるため、デスクトップのキャッチコピーは小さめに。.hero-content h1
     (後ろで宣言)より詳細度を上げて確実に効かせる。 */
  @media (min-width:901px){
    /* 1行の最長は9文字(「「ここに住みたい」」)。左余白(窓の左端=30.6vw、寸法線は
       その24px手前)に収まる範囲で最大限大きく: 9文字x2.25vw=20.25vw+左余白32px < 30.6vw-24px。 */
    .hero-content .hero-catch-swap h1{ font-size:clamp(1.35rem, 2.25vw, 2.5rem); line-height:1.6; }
  }

  /* ロゴはモノクロ表示(紙と墨のなかで色が浮かないように)。元画像は
     コーラル・タウプ・黒なので、グレー化+コントラストで濃淡を保つ。
     全画面メニュー内のロゴは別ルール(.site-menu-logo、白反転)のまま。 */
  .corner-logo{ filter:grayscale(1) contrast(1.35); }

  /* 巨大ラベル(ABOUT / PROJECT)は細いゴシックのまま。.section-head .num を
     等幅にしたため、フェーズ1の見た目を保つよう明示する。 */
  #about .section-head .num,
  #project .section-head .num,
  #staff .section-head .num,
  #faq .section-head .num{ font-family:'Zen Kaku Gothic New', sans-serif; }

  /* 写真はふだんモノクロ、ホバー(キーボードのフォーカス含む)でカラーに戻る。
     ABOUTは行全体が<a>、PROJECTはカード全体が<a>なので、写真だけでなく
     行・カードのどこに触れても切り替わる。 */
  #about .service-row-photo,
  .project-card-photo,
  .service-hero-photo{ transition:filter .6s ease; }
  #about .service-row:hover .service-row-photo,
  #about .service-row:focus-visible .service-row-photo,
  .project-card:hover .project-card-photo,
  .project-card:focus-visible .project-card-photo,
  .service-hero-photo:hover{ filter:none; }

  /* ABOUTのホバー暗幕は、カラーに戻った写真が沈まないよう薄くし、
     「詳しく見る」は文字の影で読ませる */
  #about .service-row-hover{
    background:rgba(17,17,17,.14);
    text-shadow:0 1px 8px rgba(17,17,17,.6), 0 0 2px rgba(17,17,17,.5);
  }

  /* スタッフは1名のみ: 3列グリッドではなく、写真(左)+紹介(右)の横長カード1枚。
     1名しかいないので一言メッセージはホバーを待たず常時表示(タッチ端末でも読める)。 */
  .staff-grid--single{ grid-template-columns:minmax(0, 640px); }
  .staff-grid--single .staff-card{
    display:grid; grid-template-columns:auto 1fr; align-items:stretch;
  }
  .staff-grid--single .staff-photo{ width:128px; aspect-ratio:4/5; min-height:0; align-self:start; margin:28px 0 28px 28px; border:1px solid var(--sumi); }
  .staff-grid--single .staff-info{ padding:24px 28px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
  .staff-grid--single .staff-info h3{ font-size:1.2rem; margin-top:8px; }
  .staff-grid--single .staff-info .msg{ max-height:none; margin-top:12px; font-size:.85rem; text-wrap:pretty; }
  /* メッセージは4段落。段落の間は1行ぶん空ける */
  .staff-info .msg p + p{ margin-top:1em; }
  @media (max-width:620px){
    .staff-grid--single .staff-card{ grid-template-columns:1fr; }
    .staff-grid--single .staff-photo{ width:auto; aspect-ratio:4/3; min-height:0; align-self:stretch; margin:0; border:none; border-bottom:1px solid var(--sumi); }
    .staff-grid--single .staff-info{ padding:26px 24px 30px; }
  }

  /* ABOUT冒頭の紹介文(900px以下専用)。デスクトップではヒーローが同じ文を出す。
     狭い画面ではヒーロー側の説明文(.hero-sub)を出さず、こちらを通常の段落として読ませる。 */
  .about-intro{ display:none; }
  @media (max-width:900px){
    .hero-sub{ display:none; }
    .about-intro{
      display:block; margin-top:24px; max-width:34em;
      font-size:1rem; line-height:2; color:rgba(17,17,17,.78);
    }
  }

  /* 全画面メニューを開いている間は、帯を透明にして文字・ロゴを紙色に反転
     (暗い墨のオーバーレイの上で読めるように)。main.jsが header.menu-open を付け外しする。 */
  header.menu-open{
    background:transparent; border-bottom-color:rgba(250,250,247,.25);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  header.menu-open .corner-link,
  header.menu-open .hero-strip a{ color:var(--paper); }
  header.menu-open .corner-logo{ filter:brightness(0) invert(1); }
  @media (max-width:620px){
    header{ padding:0 22px; }
  }

  /* ヘッダーの帯にナビが収まる幅の調整。1200px以下は間隔を詰め、1040px以下は
     ナビ一覧を隠す(同じリンクは全画面メニューにある)。900px以下の既存ルールと併用。 */
  @media (max-width:1200px){
    .header-left{ gap:24px; }
    .hero-strip{ gap:20px; }
  }
  @media (max-width:1040px){
    .hero-strip{ display:none; }
  }

  /* ==================================================================
     スマートフォン対応(900px以下)
     ================================================================== */

  /* PROJECT: 横スクロールの固定表示(幅118pxの細い短冊になり、物件名もホバーでしか
     見えなかった)をやめ、縦に流れる2列のグリッドにする。物件名・所在地は
     ホバーを待たず、写真の下に常に表示。main.jsの sizeProjectPin / onProjectScroll も
     900px以下では固定・平行移動をしない。 */
  @media (max-width:900px){
    #project{ position:relative; }
    .project-grid{ padding:0 32px; }
    .project-track{
      display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
      width:100%; transform:none !important;
    }
    .project-card{ flex:none; height:auto; display:flex; flex-direction:column; }
    .project-card-photo{ height:auto; aspect-ratio:3/4; }
    .project-card .overlay{
      position:static; inset:auto; background:none; opacity:1;
      padding:10px 10px 14px; gap:2px;
    }
    .project-card .overlay .p-no,
    .project-card .overlay .p-name{ color:var(--sumi); }
    .project-card .overlay .p-tag{ color:rgba(17,17,17,.7); font-size:.72rem; margin-top:2px; }
    .project-card .overlay .p-no{ margin-bottom:2px; }
  }
  @media (max-width:620px){
    .project-grid{ padding:0 22px; }
  }

  /* タップしやすい大きさ(目安44px)。タッチ端末(pointer:coarse)と900px以下に適用 */
  @media (max-width:900px), (pointer:coarse){
    #menu-toggle{ padding:14px 8px; margin-right:-8px; }
    .corner-logo-link{ padding:8px 0; }
    .filter-btn{ min-height:44px; }
    .news-toast{ padding-right:48px; }
    .toast-close{ width:44px; height:44px; top:0; right:0; font-size:1.2rem; }
    .toast-link{ display:inline-block; padding:6px 0; }
  }

  /* 電話番号のリンク(CONTACT)。見た目は文字のまま、ホバー/フォーカスで蛍光の下線 */
  .cta-contact-row a{ color:inherit; }
  .cta-contact-row a:hover, .cta-contact-row a:focus-visible{
    background:linear-gradient(transparent 62%, rgba(212,242,60,.55) 62%);
  }

  /* 小さな文字の底上げ(900px以下で、最小12px=.75rem)。デスクトップは据え置き。 */
  @media (max-width:900px){
    .corner-link,
    .eyebrow, .hero-content .eyebrow,
    .sheet-tag,
    .section-head .num,
    .overlay .p-no, .project-card .overlay .p-tag,
    .staff-info .role,
    .toast-label,
    .service-other-card .service-other-num,
    .service-breadcrumb{ font-size:.75rem; }
    .hero-dim text{ font-size:12px; }
  }

  /* スタッフ写真(イラスト)。枠いっぱいにcoverで敷く。元画像は正方形で人物が中央にあるため、
     縦長の枠(PC)では左右が、横長の枠(スマホ)では上下が切れる。顔が切れないよう縦位置は上寄せ。
     イラストの地色(タウプ)は元のまま表示(写真のようなモノクロ化はしない)。 */
  .staff-photo img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 30%; display:block;
  }

  /* ==================================================================
     実績の詳細ページ(projects/*.html、tools/build_projects.py で生成)
     ヒーロー部分は .service-hero 系のクラスを流用している。
     ================================================================== */

  .project-lede{ margin-top:24px; max-width:40em; }
  .project-lede p{ color:rgba(17,17,17,.78); font-size:.95rem; }
  .project-lede p + p{ margin-top:1em; }

  /* 概要(建設地・用途・構造・完成・区分)。墨の枠の中に項目を並べる */
  /* 1項目=1行(左にラベル、右に内容、行ごとに罫線)。項目数が何個でも、列数に左右されず
     枠線が途切れたり、1項目だけ浮いたりしない(以前は2列グリッドで折り返して崩れた)。 */
  .project-spec{
    margin-top:32px; border:1px solid var(--sumi); background:var(--paper);
  }
  .project-spec > div{
    display:grid; grid-template-columns:6.5em minmax(0, 1fr); column-gap:16px; align-items:baseline;
    padding:11px 18px; border-bottom:1px solid var(--sumi);
  }
  .project-spec > div:last-child{ border-bottom:none; }
  /* 写真のない実績(1カラム)では、枠が幅いっぱいに広がらないよう上限を付ける */
  .service-hero-grid--solo .project-spec{ max-width:560px; }
  .project-spec dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:rgba(17,17,17,.65); line-height:1.7; }
  .project-spec dd{ font-size:.95rem; color:var(--sumi); line-height:1.7; margin:0; }

  .project-section{ padding:72px 0 24px; }
  .project-text{ max-width:44em; }
  .project-text p{ color:rgba(17,17,17,.78); font-size:.92rem; }
  .project-text p + p{ margin-top:1em; }

  .project-figures{ display:grid; gap:16px; margin-top:36px; }
  .project-figures--1{ grid-template-columns:1fr; }
  .project-figures--2{ grid-template-columns:repeat(2, 1fr); }
  .project-text + .project-figures{ margin-top:36px; }
  .service-section-head + .project-figures{ margin-top:0; }
  .project-figure{ margin:0; }
  .project-figure img{
    width:100%; display:block; aspect-ratio:4/3; object-fit:cover;
    border:1px solid var(--sumi);
    filter:grayscale(1) contrast(1.05); transition:filter .6s ease;
  }
  .project-figure:hover img{ filter:none; }
  .project-figure figcaption{
    margin-top:8px; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; color:rgba(17,17,17,.7);
  }
  @media (max-width:760px){
    .project-figures--2{ grid-template-columns:1fr; }
    .project-section{ padding:56px 0 16px; }
  }

  /* ==================================================================
     サービス/実績の詳細ページ上部: 左=テキスト、右=写真の2カラム(案A)
     以前は文字だけの狭い列の下に全幅の写真があり、1画面目に写真が入らなかった。
     tools/build_projects.py も同じ構造を出力する。
     ================================================================== */
  .service-hero-grid{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:56px; align-items:start;
  }
  .service-hero-grid--solo{ grid-template-columns:minmax(0, 1fr); }
  /* 2カラムでは列が約510pxなので、巨大ラベルは一回り小さく */
  .service-hero-grid .service-hero-num{ font-size:clamp(2.6rem, 5.2vw, 4.4rem); }
  .service-hero-photo--side{
    margin:0; aspect-ratio:4/3; object-fit:cover; /* 追従(sticky)はしない: 通常どおりスクロールで流れる */
  }
  @media (max-width:900px){
    .service-hero-grid{ grid-template-columns:minmax(0, 1fr); gap:28px; }
    /* 狭い画面では写真を先頭に(縦積み) */
    .service-hero-photo--side{ order:-1; aspect-ratio:16/10; }
  }

  /* 詳細ページの見出し: 1文字ずつのspanで作っているため、そのままだと文字の途中で折り返す。
     keep-allで文字間の折り返しを禁止し、「・」の後ろ(<wbr>)でだけ折り返す。
     万一1区切りが列幅を超える場合はoverflow-wrapで救済。 */
  .service-hero h1{ word-break:keep-all; overflow-wrap:anywhere; }

  /* ==================================================================
     追加した説明コンテンツ: よくあるご質問(FAQ)、事務所概要、サービスの基礎知識・チェックリスト
     ================================================================== */

  /* FAQ: <details> のアコーディオン(JS不要)。Qは蛍光バルーン、開閉は+/− */
  .faq-list{ margin-top:48px; max-width:880px; border-top:1px solid var(--sumi); }
  .faq-item{ border-bottom:1px solid var(--sumi); }
  .faq-item summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
    padding:20px 6px; font-family:'Zen Kaku Gothic New', sans-serif; font-size:1.05rem; font-weight:500;
    line-height:1.7; transition:background .25s ease;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:"+"; margin-left:auto; flex:none; font-family:var(--mono); font-size:1.3rem; line-height:1; }
  .faq-item[open] summary::after{ content:"−"; }
  .faq-item summary:hover, .faq-item summary:focus-visible{ background:rgba(212,242,60,.18); }
  .faq-item summary:focus-visible{ outline:2px solid var(--sumi); outline-offset:-2px; }
  .faq-q{
    flex:none; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--marker); border:1px solid var(--sumi);
    font-family:var(--mono); font-size:.8rem; font-weight:500; line-height:1;
  }
  .faq-a{ padding:0 6px 26px 54px; }
  .faq-a p{ color:rgba(17,17,17,.78); font-size:.92rem; max-width:44em; }

  /* 事務所概要(STAFFセクションの下)。表の見た目は .project-spec を流用 */
  .office-info{ margin-top:72px; max-width:880px; }
  .office-info .project-spec{ margin-top:16px; }
  .office-info a{ color:inherit; }
  .office-info a:hover{ background:linear-gradient(transparent 62%, rgba(212,242,60,.55) 62%); }

  /* サービス詳細の「基礎知識」「新潟の気候」: 罫線で区切った2列の読み物ブロック */
  .service-notes{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 48px; }
  .service-note{ border-top:1px solid var(--sumi); padding:22px 0 28px; }
  .service-note h3{ font-size:1.02rem; margin-bottom:12px; }
  .service-note p{ color:rgba(17,17,17,.78); font-size:.88rem; }

  /* 「こんな方におすすめです」のチェックリスト */
  .service-checklist{ max-width:44em; border-top:1px solid var(--sumi); }
  .service-checklist li{
    position:relative; padding:16px 0 16px 44px; border-bottom:1px solid var(--sumi);
    font-size:.95rem; line-height:1.8;
  }
  .service-checklist li::before{
    content:""; position:absolute; left:4px; top:50%; width:20px; height:20px; margin-top:-10px;
    border-radius:50%; background:var(--marker); border:1px solid var(--sumi);
  }

  @media (max-width:760px){
    .service-notes{ grid-template-columns:1fr; }
    .faq-item summary{ font-size:1rem; padding:18px 4px; }
    .faq-a{ padding:0 4px 22px 4px; }
    .office-info{ margin-top:56px; }
  }

  /* ---------------- ページ遷移: 右から左へ開く(js/page-transition.js) ----------------
     出発側(.page-leave): 紙色のパネルが右から滑り込んで画面を覆う。
     到着側(.page-enter): 画面を覆った状態から、パネルが左へ抜けていく。
     パネルはクリックを通さず、時間が来れば画面外に残るだけ。 */
  html.page-leave::after,
  html.page-enter::before{
    content:""; position:fixed; inset:0; z-index:10000; pointer-events:none;
    background:var(--paper); border-left:1px solid var(--sumi);
  }
  html.page-enter::before{ border-left:0; border-right:1px solid var(--sumi); }
  html.page-leave::after{ animation:page-cover .42s cubic-bezier(.65,0,.35,1) forwards; }
  html.page-enter::before{ animation:page-uncover .5s cubic-bezier(.65,0,.35,1) forwards; }
  @keyframes page-cover{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
  @keyframes page-uncover{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

  /* ---------------- 実績詳細: 写真の拡大表示(js/main.js) ---------------- */
  .is-zoomable{ cursor:zoom-in; }
  .is-zoomable:focus-visible{ outline:2px solid var(--sumi); outline-offset:3px; }
  html.lightbox-open{ overflow:hidden; }
  .lightbox{
    position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center;
    background:rgba(17,17,17,.94); opacity:0; transition:opacity .25s ease; cursor:zoom-out;
  }
  .lightbox[hidden]{ display:none; }
  .lightbox.is-open{ opacity:1; }
  .lightbox-img{
    max-width:min(92vw, 1600px); max-height:86vh; width:auto; height:auto; object-fit:contain;
    background:var(--paper); border:1px solid var(--paper); cursor:zoom-out;
  }
  .lightbox-close, .lightbox-nav{
    position:absolute; background:transparent; border:1px solid rgba(250,250,247,.6); color:var(--paper);
    font-family:var(--mono); line-height:1; cursor:pointer; transition:background .2s ease, color .2s ease;
  }
  .lightbox-close:hover, .lightbox-nav:hover,
  .lightbox-close:focus-visible, .lightbox-nav:focus-visible{ background:var(--marker); color:var(--sumi); border-color:var(--marker); }
  .lightbox-close{ top:16px; right:16px; width:48px; height:48px; font-size:1.6rem; }
  .lightbox-nav{ top:50%; transform:translateY(-50%); width:48px; height:64px; font-size:2rem; }
  .lightbox-prev{ left:16px; }
  .lightbox-next{ right:16px; }
  .lightbox-nav[hidden]{ display:none; }
  .lightbox-count{
    position:absolute; bottom:16px; left:0; right:0; text-align:center; margin:0;
    font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; color:rgba(250,250,247,.8);
  }
  @media (max-width:900px){
    .lightbox-img{ max-width:100vw; max-height:78vh; border-left:0; border-right:0; }
    .lightbox-nav{ top:auto; bottom:12px; transform:none; width:48px; height:48px; }
    .lightbox-prev{ left:16px; }
    .lightbox-next{ right:16px; }
  }

  /* ---------------- STAFF + FAQ: 1セクション。左半分=見出し、右半分=内容 ----------------
     STAFF(見出し|スタッフ紹介+事務所概要)と FAQ(見出し|質問)を上下に並べ、各ブロックは
     ABOUT と同じく「左に見出し、右に内容」。見出しはそのブロックの内容を通り過ぎる間、
     画面の上部(固定ヘッダーの下、top:96px)に固定される。900px以下は縦積み(固定なし)。 */
  .staff-faq{ display:grid; gap:120px; }
  .sf-col{ min-width:0; }
  @media (min-width:901px){
    .sf-col{
      display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:64px; align-items:start;
    }
    .sf-col > .section-head{ grid-column:1; grid-row:1 / span 10; align-self:stretch; margin-bottom:0; display:block; }
    .sf-col > .section-head > div{ position:sticky; top:96px; }
    .sf-col > :not(.section-head){ grid-column:2; min-width:0; }
    .sf-col .faq-list{ margin-top:0; }
  }
  @media (max-width:900px){
    .staff-faq{ gap:96px; }
    .sf-col .section-head{ margin-bottom:24px; }
  }

  /* ヒーローの窓(クリックで拡大。js/main.js) */
  html.hero-window-hover{ cursor:pointer; }

  /* スマートフォンではスクロール案内(SCROLL)を表示しない */
  @media (max-width:900px){ .hero-scroll-cue{ display:none; } }

  /* スマートフォンでは、ヒーロー以外の写真を最初からカラーで表示する */
  @media (max-width:900px){
    .project-card-photo, .service-row-photo, #about .service-row-photo,
    .service-hero-photo, .project-figure img{ filter:none; }
  }