@charset "UTF-8";

/* ================================================================
   株式会社Logic - common.css
   全ページ共通スタイル
================================================================ */

:root {
    /* ================================
       黒のスケール（暗い順・9段）
       ※ 黒地基調だと「背景・面・境界」を近い明度で
         積み重ねることになるので、都度ベタ書きすると
         すぐに破綻する。使う黒はここに集約する。
       ※ 段の間隔は暗い側を細かく、明るい側を粗く取っている。
         人の目は暗部の差に敏感なので、等間隔にすると
         暗い側だけ差がつきすぎる。
       ※ 下の --color-* はこのスケールへの別名。
         色を変えるときはスケール側ではなく別名側を差し替える。
         スケールを直接参照していいのは、意味を持たない
         装飾（L字・帯・地紋など）だけ。
    ================================ */
    --black-1: #000000;
    /* 純黒：締め。セクションの底 */
    --black-2: #080808;
    /* 純黒のわずかに上。大面積を沈めるとき */
    --black-3: #0D0D0D;
    /* ベース背景 */
    --black-4: #171717;
    /* ベースからわずかに浮かせる面 */
    --black-5: #1F1F1F;
    /* 一段明るいセクション背景 */
    --black-6: #282828;
    /* カード・パネルの面 */
    --black-7: #333333;
    /* カードのホバー・入力欄 */
    --black-8: #404040;
    /* 境界線を実線で引くとき */
    --black-9: #525252;
    /* 無効状態・スケール上で最も明るい黒 */

    /* ================================
       カラー（モノトーン基調・黒地に白）
       ※ --color-accent は未確定のため仮値。決定後この1行を差し替える。
       ※ 背景の明度は3段で持つ。真っ黒一色にすると
         セクションの切れ目が消えて、スクロールしても
         同じところを循環しているように見える。
           --color-bg       black-3  ベース
           --color-bg-light black-5  一段明るい
           --color-bg-dark  black-1  締め
    ================================ */
    --color-primary: var(--black-3);
    /* 墨黒：メインカラー */
    --color-primary-dark: var(--black-1);
    /* 純黒：締め用 */
    --color-secondary: var(--black-6);
    /* 黒に近いグレー（セクション背景） */
    --color-accent: #8C8C8C;
    /* アクセント（仮） */
    --color-text: #D8D5D0;
    /* 本文テキスト */
    --color-sub-text: #C9C6C1;
    /* 本文よりわずかに淡いテキスト。
       ※ --color-text（#D8D5D0）と --color-text-light（#8E8B86）の
         間を埋める位置づけだが、本文との差は8階調しかない。
         大きく落としたいときは --color-text-light を使う。 */
    --color-title: #FFFFFF;
    /* 見出しテキスト */
    --color-text-light: #8E8B86;
    /* 補足・薄めテキスト */
    --color-text-inverse: #F5F4F2;
    /* 暗背景上のテキスト
       ※ 暗転後もここは白のまま。「暗い背景に乗る文字」という
         意味のトークンなので、全面暗転でむしろ出番が増える。
         反転させると .section--dark が黒地に黒になる。 */
    --color-bg: var(--black-3);
    /* ページ背景（ベース） */
    --color-bg-raise: #111111;
    /* ベースからごくわずかに浮かせる面の色。
       ※ 使い先：SERVICE/WORKS の暗色ブロック（.index-dark-block）、
         新着情報（.index-news）、ヘッダー（.header）、
         モバイルメニュー（.drawer）。
         ※ ヘッダーは透過度が必要なため rgba(17,17,17,0.95) と
           展開して持っている。ここを変えたら向こうも直すこと。
       ※ 9段スケールの --black-3（#0D0D0D）と --black-4（#171717）の
         間にあたる値。スケールに段が無いのでここで直接持つ
         （段を増やすと --black-4 以降の番号を振り直すことになるため）。
       ※ 片方だけ別の濃さにしたくなったら、そのセクション側で
         background-color を直接上書きする。 */
    --color-bg-light: var(--black-5);
    /* 一段明るいセクション背景（旧オフホワイト枠） */
    --color-bg-dark: var(--black-1);
    /* 一段暗いセクション背景（締め） */
    --color-surface: var(--black-6);
    /* カード・パネルの面。背景から一段浮かせるとき */
    --color-surface-hover: var(--black-7);
    /* 上記のホバー・フォーム入力欄 */
    --color-border: rgba(255, 255, 255, 0.15);
    /* ボーダー */
    --color-border-dark: rgba(255, 255, 255, 0.16);
    /* 暗背景上のボーダー */

    /* ================================
       フォント
    ================================ */
    --font-family: 'Noto Sans JP', sans-serif;
    /* 本文 */
    --font-heading: 'Noto Sans JP', sans-serif;
    /* 見出し
       ※ 以前は Shippori Mincho B1（明朝）。英字をテクノ系
         （Orbitron / Chakra Petch）にしたことで明朝が浮いたため、
         ロゴの方向に合わせてゴシックに揃えた。
       ※ 戻す場合は下の行に差し替える（header.php で読み込み済み）。
       --font-heading: 'Shippori Mincho B1', serif;
       ※ 現在は --font-family と同じ書体。見出しと本文の差は
         ウェイトと字間でつける。 */
    --font-en: 'Chakra Petch', 'Noto Sans JP', sans-serif;
    /* 英字全般（ナビ・ラベル・日付・ボタンなど）
       ※ Chakra Petch は 700 が上限。小さい文字しか使わないので
         300〜700 の範囲で足りる。 */
    --font-en-display: 'Orbitron', 'Noto Sans JP', sans-serif;
    /* トップの大見出し専用
       ※ ロゴ（横長のスクエア）に一番近い骨格。
         ただし字幅が広く 400 未満がないため、
         ナビや小さいラベルには使わない。 */

    --body-font-size-sp: 1rem;
    --body-font-size-pc: clamp(1rem, 1.6vw, 1.0625rem);
    --body-line-height-sp: 1.9;
    --body-line-height-pc: 2;
    --body-letter-spacing: 0.06em;

    /* Orbitron（--font-en-display）で組む大見出しの字間。
       ※ 使い先（4箇所）。字間を変えるときはこの1行だけを直す。
           .section-head--swap .section-head__title
             … 全セクションの英字見出し（common.css）
           .index-service__headline-line
             … SERVICE の大見出し（index.css）
           .index-service__en
             … 事業内容カードの Urethane / Rockwool（index.css）
           .index-strengths .section-head--swap .section-head__title
             … 1024px以上の縦書き英字（index.css）
       ※ Orbitron は字幅が広いので、日本語見出し（0.1em）や
         本文（--body-letter-spacing ＝ 0.06em）より狭く取る。
       ※ 小さい英字（ナビ・ラベル・日付などの --font-en）は対象外。
         あちらは 0.14〜0.24em と別の基準で組んでいる。 */
    --display-letter-spacing: 0.04em;

    /* ================================
       角丸（高級感重視のため最小限）
    ================================ */
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* ================================
       落ち影
    ================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);

    /* ================================
       トランジション（基本はこれを使う）
    ================================ */
    --transition: 0.25s ease;

    /* ================================
       スペーシング
    ================================ */
    --spacing-xxs: 0.5rem;
    --spacing-xs: 0.75rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 5.5rem;
    --spacing-3xl: 8rem;

    /* ================================
       セクション幅
       ※ .section__inner は sm(576) → content(768) → xl(1280) の3段階。
         切り替わりは 768px / 1024px。
       ※ md / narrow / lg は 別箇所用の予備値。
    ================================ */
    --section-width-sm: 576px;
    --section-width-content: 768px;
    --section-width-md: 720px;
    --section-width-narrow: 880px;
    --section-width-lg: 1024px;
    /* ※ 3段階の最大値。以前は 1320px。
         ※ 参照元はこの変数経由なので自動で追従する。
           .section__inner（1024px以上）/ .footer__bottom（同）/
           強みの縦棒の太さ（index.css の --strengths-band-w）など。
         ※ 各CSSのコメントに残っている「1320px」の記述は
           変更前の数字。値を参照しているので動作に影響はない。
         ※ --header-width（1720px）は別系統。ヘッダーと FV の
           内容幅なのでこことは連動しない。 */
    --section-width-xl: 1280px;

    /* ================================
       ヘッダー幅（＝FVの内容幅）
       ※ .header__inner の max-width と、トップFVの
         .fv__inner / .fv__logo が同じ値を参照する。
         FVのタイトル・ロゴの左端をヘッダーのロゴと
         揃えるため、必ず一元管理する。
         幅を変えるときはこの1行だけを直す。
    ================================ */
    --header-width: 1720px;

    /* ================================
       セクション左右余白
       ※ 余白は外側（.section 等）が持ち、
         内側の __inner は max-width だけを担う（r-doboku と同方式）。
         余白を変えるときはこの変数だけを直す。
       ※ 1.5 → 2 → 3 → 4rem の4段階。
    ================================ */
    --section-pad-x: 1.5rem;

    /* ================================
       ヘッダー高さ
    ================================ */
    --header-height: 4.5rem;

    /* ================================
       ヘッダー左右余白
       ※ .header__inner の padding とハンバーガーの right の両方が
         この値を参照する。ボタンは .header__inner の外に
         fixed で置いているため、別々に書くとズレる。
         余白を変えるときはここだけを直す。
    ================================ */
    --header-padding-inline: 0.75rem;

    /* ================================
       写真のグレースケール量
       ※ コンテンツとして見せる写真は --photo-grayscale、
         背景として敷く写真（採用・ページヒーロー）は
         --photo-grayscale-bg。
       ※ 施工実績だけは別値を持つ（--photo-grayscale-works）。
         他より一段強くして写真のバラつきを押さえている。
         トップのセクションと一覧ページの両方が参照するので、
         ズレないようここで一元管理する。
    ================================ */
    --photo-grayscale: 10%;
    --photo-grayscale-works: 15%;
    --photo-grayscale-bg: 100%;
    /* ┴─ 下層ページヒーロー（.page-hero__bg）専用。
       ※ --photo-grayscale-bg とは別に持つ。あちらはトップの採用セクション背景（.index-recruit__bg）と共用しているため、
         こちらを変えると向こうまで影響する。page-hero だけ調整したいときは必ずこの変数を使うこと。 */
    --page-hero-grayscale: 50%;

    /* ================================
       新着情報の項目上端に引く2色ラインの、黒い部分の長さ。
       ※ トップの新着情報（index.css）と一覧ページ（news.css）の
         両方で使うので、ズレないようここで一元管理する。
    ================================ */
    --news-line-accent: 2.5rem;
}

@media (min-width: 576px) {
    :root {
        --section-pad-x: 2rem;
    }
}

@media (min-width: 768px) {
    :root {
        /* ※ ベース 4.5rem → ここ 5rem → 1024px以上 6rem の3段階。
             ※ 以前は 768〜1023px もベースの 4.5rem のままで、
               1024px で一気に 5.75rem まで上がっていた。
               途中 5.5rem を経て 5rem に落ち着いた。
             ※ この値を参照している箇所は自動で追従する。
               ヘッダーの高さ、scroll-margin-top（アンカーの
               位置合わせ）、WIPセクションの上パディングなど。
             ※ ※重要※ 1024px 側の定義をこれより前に移さないこと。
               同詳細度なので後勝ち。順番を入れ替えると
               1024px以上でも 5rem のままになる。 */
        --header-height: 5rem;
        --header-padding-inline: 1rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-height: 6rem;
        --header-padding-inline: 1.5rem;
        --section-pad-x: 3rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --section-pad-x: 4rem;
    }
}

/* ================================================================
   リセット・ベース
================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    /* border-box：padding・border が幅の内側に収まる → レイアウト計算がシンプルになる */
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    /* 縦方向のバウンスを無効化 */
}

/* Chrome のスクロール復元による初回表示ずれを防ぐ */
html:not(.js-ready) {
    scroll-behavior: auto;
}

html {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 14px;
}

/* ----------------------------------------------------------------
   375px未満：375px幅でレイアウトして縮小表示する
   ※ 極小端末向けに個別の調整をしなくて済むよう、
     ページ全体を scale で縮める（r-doboku と同方式）。
---------------------------------------------------------------- */
@media (max-width: 374px) {
    html {
        width: 375px;
        transform-origin: top left;
        transform: scale(calc(100vw / 375));
    }

    /* position: fixed の要素は縮小後の座標系に合わせてサイズを戻す
       ※ html に transform がかかると fixed の基準が html になるため */
    .header,
    .drawer {
        width: 375px;
    }

    .drawer {
        height: calc(100dvh / (100vw / 375));
    }

    /* ページトップ・ハンバーガーは縮小後の画面端に来るよう位置を戻す */
    .pagetop {
        right: calc(1rem / (100vw / 375));
        bottom: calc(1rem / (100vw / 375));
    }

    .hamburger {
        right: calc(var(--header-padding-inline) / (100vw / 375));
    }
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--body-font-size-sp);
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--body-line-height-sp);
    letter-spacing: var(--body-letter-spacing);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    /* 横方向のバウンスを無効化 */
    touch-action: pan-y;
    /* タッチ操作を縦スクロールのみに限定 */
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
    body {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
    }
}

/* ドロワー展開中は背面スクロールを止める */
body.menu-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-heading);
    /* ※ 見出しをゴシック（--font-family と同じ書体）にしたので、
         本文との差をウェイトでつける。明朝の頃は 600。 */
    font-weight: 700;
    color: var(--color-title);
    line-height: 1.6;
    letter-spacing: 0.08em;
}

p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    /* inline 要素の下の隙間を消す */
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ================================================================
   汎用ユーティリティ
================================================================ */

.u-br-sp {
    display: inline;
}

@media (min-width: 768px) {
    .u-br-sp {
        display: none;
    }
}

.u-br-pc {
    display: none;
}

@media (min-width: 768px) {
    .u-br-pc {
        display: inline;
    }
}

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

/* ================================================================
   共通セクション部品
================================================================ */

/* セクション本体が上下・左右の余白を持つ。
   ※ 左右は --section-pad-x（1.25 → 1.5 → 2.5rem）。 */
.section {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    padding-inline: var(--section-pad-x);
}

@media (min-width: 768px) {
    .section {
        padding-top: var(--spacing-3xl);
        padding-bottom: var(--spacing-3xl);
    }
}

/* 固定ヘッダー分の着地オフセット。
   ※ 別ページから ?to=ID で遷移してきたときや、
     ページ内アンカーを踏んだときの着地位置を
     ヘッダーに潜り込まないようずらす。
   ※ ***重要*** オフセットはここだけで持つ。
     animation.js は scrollIntoView() を呼ぶだけで、
     ヘッダー高さの引き算はしない。
     以前は JS 側で getBoundingClientRect から引いていたが、
     CSSとJSの2箇所でオフセットを持つと二重にかかってズレる。
   ※ 対象は id を持つセクションだけに絞る。
     [id] 全部にかけると、フォームの入力欄にフォーカスが
     移ったときのスクロールまで影響する。
   ※ .sec-lead / .sec-wip は .section と併用するので下の1本で拾える。
     .sec-cta だけ .section を持たないので別途並べてある。 */
.section[id],
.sec-cta[id] {
    scroll-margin-top: var(--header-height);
}

/* 内側は最大幅と中央寄せだけを担う（余白は親側に移行済み）
   ※ モバイルファースト（min-width）で段階的に広げる。3段階。
     ベース：576 → 768以上：800 → 1024以上：1320
   ※ 1024px時点では左右余白を引いた 928px が実幅になるため、
     1320 は上限として効き、そこまでは画面幅に応じて伸びる。 */
.section__inner {
    width: 100%;
    max-width: var(--section-width-sm);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .section__inner {
        max-width: var(--section-width-content);
    }
}

@media (min-width: 1024px) {
    .section__inner {
        max-width: var(--section-width-xl);
    }
}

/* セクション見出し（英字ラベル + 日本語見出しの2段構成） */
.section-head {
    /* ※ 下の余白は全ブレークポイント共通で 2.5rem。
         以前は SP 2rem → 768px以上 3rem の2段だった。
       ※ 2.5rem に対応する --spacing-* が無いので実値。
         --spacing-md（2rem）と --spacing-lg（3rem）の中間。
       ※ 広い画面だけ空けたい場合は @media (min-width: 768px) で
         この1行を上書きする。
       ※ セクション側で個別に打ち消している箱
         （例：.index-service__head-top）はここの影響を受けない。 */
    margin-bottom: 2.5rem;
}

.section-head__label {
    /* ラベル装飾（塗りつぶし正方形）の一辺。
       ※ ::before / ::after の両方から参照するため、親側で定義する。
         疴似要素同士は継承関係にないので、::before の中に書くと
         ::after 側（中央寄せセクション）から参照できない。 */
    --label-mark: var(--mark-size-solid);

    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

/* 英字ラベル左の装飾：塗りつぶし正方形。
   ※ サイズを変えるときは上の --label-mark だけを触る。 */
.section-head__label::before {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    background-color: var(--color-text-light);
    flex-shrink: 0;
    line-height: 1;
}

.section-head__title {
    font-size: clamp(1.5rem, 5.5vw, 1.875rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .section-head__title {
        font-size: clamp(1.875rem, 3vw, 2.5rem);
    }
}

.section-head__text {
    margin-top: var(--spacing-sm);
    color: var(--color-text-light);
}

/* 暗背景セクション上の見出し */
.section--dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.section--dark .section-head__title {
    color: var(--color-text-inverse);
}

.section--dark .section-head__label,
.section--dark .section-head__text {
    color: rgba(245, 244, 242, 0.66);
}

.section--dark .section-head__label::before {
    background-color: rgba(245, 244, 242, 0.4);
}

/* オフホワイト背景セクション */
.section--light {
    background-color: var(--color-bg-light);
}

/* ================================================================
   セクション見出しの入れ替え（.section-head--swap）

   共通の .section-head は
     英字ラベル（小・装飾つき）→ 日本語見出し（大）
   の2段構成だが、--swap を付けた見出しだけ
     日本語（小・装飾つき）→ 英字（大）
   に入れ替える。

   利用箇所：
     ・共通CTA（includes/contact.php）… 全ページ
     ・トップの Philosophy / Service / Works / Strengths / Recruit / News

   ※ もとは index.css に置いていたが、共通CTA が全ページで
     --swap を使うため common.css へ移した。index.css を読まない
     サブページでは英字の書体（--font-en-display ＝ Orbitron）が
     当たらず、本文書体のまま表示されていた。

   ※ CSSで順番や大きさをひっくり返すのではなく、
     HTML側で中身のテキストを入れ替えてある。
     __label =「上の小さい行」/ __title =「下の大きい行」という
     見た目の役割は共通CSSのままなので、
       ・文字サイズ（英字がこれまでの日本語見出しと同じ大きさ）
       ・疑似要素の装飾（日本語側に付く）
       ・帯アニメの順番（上→下）
       ・暗背景（.index-dark-block）での色分け
     がすべてそのまま効く。ここでは書体まわりだけを
     言語に合わせて上書きする。
   ※ 見出しの主役は英字だが、h2 は日本語側（__label）に残してある。
     そのため __title 側は p になり、h1〜h6 の基本指定（見出し色）が
     届かないので、書体と色をここで補う。

   ※ ※重要※ このブロックは .section--dark / .section--light より
     後ろに置くこと。__title の色（--color-title）が
     .section--dark .section-head__title と同じ詳細度（0-2-0）なので、
     前に出すと暗背景セクションで色が入れ替わる。
   ※ 各ページ側の上書き（.index-service__head-top /
     .index-strengths .section-head--swap など）は
     common.css より後に読まれるのでこれまでどおり効く。
================================================================ */

/* 上段：日本語（小）。大きさ・装飾・余白は共通の __label のまま。
   ※ 日本語見出しはサイト全体で揃えているので、
     ここも --font-heading を使う。下段の英字（__title）は
     --font-en-display。 */
.section-head--swap .section-head__label {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    /* 共通側の uppercase を戻す。
       そのままだと「Logicの強み」が「LOGICの強み」になる。 */
    text-transform: none;
}

/* 日本語は line-height: 1 だと、帯アニメの切り取り枠
   （.section-head__label-text の overflow: hidden）で
   濁点やハネが欠ける。padding で上下に余裕を取り、
   同じ分を負のマージンで相殺して見た目の位置を変えない。
   ※ このファイル後方の .js-lines__line と同じ考え方。 */
.section-head--swap .section-head__label-text {
    padding-block: 0.24em;
    margin-block: -0.24em;
}

/* 下段：英字（大）。font-size は共通の __title をそのまま使うので
   これまでの日本語見出しと完全に同じ大きさになる。
   ※ line-height を 1.7 → 1.2 に絞るのは、英大文字の1行だと
     上下に無駄な余白が出るため。
   ※ 全大文字にはしない。頭文字だけ大文字（HTMLの表記のまま）。 */
.section-head--swap .section-head__title {
    font-family: var(--font-en-display);
    letter-spacing: var(--display-letter-spacing);
    line-height: 1.2;
    color: var(--color-title);
}

/* ※ 表示順は HTML 順のまま。
     日本語（__label・小・装飾つき）→ 英字（__title・大）。
   ※ 一度は order で英字を上に入れ替えていたが、
     日本語が上、英字が下の順に戻してある。
     入れ替えたい場合はここに
         .section-head--swap { display: flex; flex-direction: column; align-items: flex-start; }
         .section-head--swap .section-head__title { order: 1; }
         .section-head--swap .section-head__label { order: 2; margin-top: var(--spacing-xs); margin-bottom: 0; }
     を足す（帯アニメの発火順は HTML 順のままなので、
     見た目は「下の行→上の行」の順に帯が通る点に注意）。 */

/* ── 見出しの登場（.js-reveal 付与時） ──
   画像と同じマスクスライド（帯が左→右に通過）で現れる。
   ラベル→タイトル→補足文 の順に 0.08s 差で入る。 */
.section-head.js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* 帯の範囲をテキスト幅に限定する。
   h2 / p はブロック要素なので、放置するとカラム幅いっぱいに
   帯が伸び、文字のない余白まで遮られてしまう。

   width: fit-content で内容幅に収める。
   ※ inline-block ではなく fit-content を使う理由：
     ブロックのままなので、タイトルと補足文が同じ行に並んだり、
     HTMLの改行が半角スペースとして隔間になったりしない。
     margin や text-align の振る舞いも従来のまま。
   ※ 改行（<br>）を含む見出しは「最も長い行」の幅に揃う。 */
/* ※ .js-lines を併用する見出しは帯アニメの対象外にする。
     両方かかると color: transparent や overflow が衝突し、
     立ち上がりアニメが見えなくなる。 */
.section-head.js-reveal .section-head__title:not(.js-lines),
.section-head.js-reveal .section-head__text {
    position: relative;
    width: fit-content;
    overflow: hidden;
}

/* ラベルは元々 inline-block なのでそのままでよい */
.section-head.js-reveal .section-head__label-text {
    position: relative;
    overflow: hidden;
}

/* ラベルは横棒（::before）ごと隠さないよう、
   中の .section-head__label-text に帯をかける。
   横棒は別途 scaleX で左から描かれる。 */
.section-head__label-text {
    display: inline-block;
    line-height: 1;
}

/* 通過する帯
   ※ 帯の色は「背景に対して見える色」でなければ意味がない。
     暗転前は白地に --color-primary（墨黒）の帯だったが、
     全面暗転した現在は黒地に黒帯で完全に見えなくなるため、
     既存の .section--dark 側の指定に合わせて白帯に統一した。
     （下の .section--dark 向けの上書きは同値になるが、
       背景を戻したときのために残してある） */
.section-head.js-reveal .section-head__title:not(.js-lines)::after,
.section-head.js-reveal .section-head__text::after,
.section-head.js-reveal .section-head__label-text::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--color-text-inverse);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* 帯が通り過ぎるまで文字は隠す */
.section-head.js-reveal .section-head__label,
.section-head.js-reveal .section-head__title:not(.js-lines),
.section-head.js-reveal .section-head__text {
    color: transparent;
}

/* ラベルの正方形：中心から弾けるように現れる。
   ※ 横線だった頃は scaleX で左から伸ばしていたが、
     正方形では横に伸びる動きが不自然なため scale にする。
   ※ ※重要※ ::after も対象にすること。
     中央揃えの見出し（共通CTA・施工実績・事業内容）は
     左右対称に装飾を置いているので、::before だけを
     対象にすると右の装飾がアニメを外れ、
     最初から出たままになる。
   ※ ::after に content を持たせていない箇所では箱ができないので、
     この指定があっても何も起きない（無害）。 */
.section-head.js-reveal .section-head__label::before,
.section-head.js-reveal .section-head__label::after {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.section-head.js-reveal.is-revealed .section-head__label::before,
.section-head.js-reveal.is-revealed .section-head__label::after {
    transform: scale(1);
}

.section-head.js-reveal.is-revealed .section-head__label {
    color: var(--color-text-light);
    transition: color 0s linear 0.28s;
}

.section-head.js-reveal.is-revealed .section-head__title:not(.js-lines) {
    color: var(--color-title);
    transition: color 0s linear 0.36s;
}

.section-head.js-reveal.is-revealed .section-head__text {
    color: var(--color-text-light);
    transition: color 0s linear 0.44s;
}

/* 暗背景セクション上の文字色（帯も背景に合わせて白抜きに） */
.section--dark .section-head.js-reveal .section-head__title::after,
.section--dark .section-head.js-reveal .section-head__text::after,
.section--dark .section-head.js-reveal .section-head__label-text::after {
    background-color: var(--color-text-inverse);
}

.section--dark .section-head.js-reveal.is-revealed .section-head__label,
.section--dark .section-head.js-reveal.is-revealed .section-head__text {
    color: rgba(245, 244, 242, 0.66);
}

.section--dark .section-head.js-reveal.is-revealed .section-head__title {
    color: var(--color-text-inverse);
}

/* 帯のスイープ（0.08s差で順に） */
.section-head.js-reveal.is-revealed .section-head__label-text::after {
    animation: maskSweep 0.56s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.section-head.js-reveal.is-revealed .section-head__title:not(.js-lines)::after {
    animation: maskSweep 0.56s cubic-bezier(0.65, 0, 0.35, 1) 0.08s forwards;
}

.section-head.js-reveal.is-revealed .section-head__text::after {
    animation: maskSweep 0.56s cubic-bezier(0.65, 0, 0.35, 1) 0.16s forwards;
}

@media (prefers-reduced-motion: reduce) {

    .section-head.js-reveal .section-head__label,
    .section-head.js-reveal .section-head__text {
        color: var(--color-text-light);
    }

    .section-head.js-reveal .section-head__title {
        color: var(--color-title);
    }

    .section--dark .section-head.js-reveal .section-head__label,
    .section--dark .section-head.js-reveal .section-head__text {
        color: rgba(245, 244, 242, 0.66);
    }

    .section--dark .section-head.js-reveal .section-head__title {
        color: var(--color-text-inverse);
    }

    .section-head.js-reveal .section-head__label::before,
    .section-head.js-reveal .section-head__label::after {
        transform: scale(1);
        transition: none;
    }

    .section-head.js-reveal .section-head__title:not(.js-lines)::after,
    .section-head.js-reveal .section-head__text::after,
    .section-head.js-reveal .section-head__label-text::after {
        display: none;
        animation: none;
    }
}

/* ================================================================
   共通装飾マーク（.c-mark--*）
   セクション見出しのラベル、ドロワー、フッター、CTA など
   複数箇所で使う小さな図形をここに集める。

   使い方：装飾を付けたい要素に .c-mark 系のクラスを与えるか、
         @extend 代わりにセレクタを並列で追記する。

   ※ 外形はすべて --mark-size（0.625rem）に揃える。
     ただし塗りつぶし正方形だけは面積100%で他より重く見えるため、
     --mark-size-solid（0.5rem）に落として見た目の重さを揃えている。
     （他は三角2つ＝面積50%、O字＝51%、帯3本＝60%程度）
     数値をきっちり揃えたい場合は --mark-size-solid を --mark-size と同値にする。
   ※ 色は currentColor ではなく変数で持つ。
     見出しの帯アニメ中は親が color: transparent になるため、
     currentColor だと装飾まで消えてしまう。
================================================================ */

:root {
    --mark-size: 0.625rem;
    /* 基準：面積50〜60%の装飾（三角2つ・O字ブロック・帯3本）用 */
    --mark-size-solid: 0.5rem;
    /* 面積100%の装飾（塗りつぶし正方形・帯2本）用。
       べた塗りは同じ外形だと明らかに重く見えるため一段落とす。 */
    --mark-size-mid: 0.625rem;
    /* L字＋四角用。
       ※ 2×2のマス目で描くので、必ず偶数pxにすること。
         マス（外形÷2）が端数になると、隣り合うマスの境界で
         アンチエイリアスが二重にかかって左下の角が濁る。
         0.625rem = 10px → マス 5px。 */
}

/* ■ 三角2つ（右上＝濃 / 左下＝淡）
   Service セクション、ドロワーの Service、フッターの Service で共用。
   ※ 色は --mark-ink（濃）/ --mark-ink-sub（淡）で上書きする。 */
.c-mark-triangles {
    width: var(--mark-size);
    height: var(--mark-size);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(to bottom right,
            transparent 50%,
            var(--mark-ink, rgba(245, 244, 242, 0.85)) 50%),
        linear-gradient(to top left,
            transparent 50%,
            var(--mark-ink-sub, rgba(245, 244, 242, 0.35)) 50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* ■ 塗りつぶし正方形
   Philosophy / Company / Outline / Access / Greeting などの既定装飾、
   フッターの Company、ドロワーの Company で共用。
   ※ これだけ --mark-size-solid。上のコメント参照。 */
.c-mark-solid {
    width: var(--mark-size-solid);
    height: var(--mark-size-solid);
    flex-shrink: 0;
    line-height: 1;
    background-color: var(--mark-ink, rgba(245, 244, 242, 0.66));
    background-image: none;
}

/* ■ 枠だけの正方形（中央が穴）
   Contact 系。共通CTA・フッター・ドロワーで共用。 */
.c-mark-frame {
    width: var(--mark-size);
    height: var(--mark-size);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image: none;
    border: 2px solid var(--mark-ink, rgba(245, 244, 242, 0.66));
}

/* ■ O字ブロック（2×2の四隅）
   Works、Recruit、ドロワーの Works / Recruit で共用。
   ※ 四隅を個別に色分けできるよう、マスごとに変数を分けている。
     全部同色にしたい場合は --mark-ink だけ指定すればよい。 */
.c-mark-oblock {
    --oblock-gap: 0.125rem;
    --oblock-cell: calc((var(--mark-size) - var(--oblock-gap)) / 2);

    width: var(--mark-size);
    height: var(--mark-size);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink-tl, var(--mark-ink, rgba(245, 244, 242, 0.6))) 0 0),
        linear-gradient(var(--mark-ink-tr, var(--mark-ink, rgba(245, 244, 242, 0.6))) 0 0),
        linear-gradient(var(--mark-ink-bl, var(--mark-ink, rgba(245, 244, 242, 0.6))) 0 0),
        linear-gradient(var(--mark-ink-br, var(--mark-ink, rgba(245, 244, 242, 0.6))) 0 0);
    background-size: var(--oblock-cell) var(--oblock-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* ■ O字ブロック：左上と右下だけ濃い版（Recruit 用）
   Works と同じ形なので、色の振り分けで区別する。
   ※ .c-mark-oblock と併用する（class="c-mark-oblock c-mark-oblock--diag"）。
     右上・左下だけを --mark-ink-sub に振り、左上・右下は
     --mark-ink のまま残す。
   ※ ヘッダのナビ・ドロワーの Recruit も同じ見た目だが、
     あちらは疑似要素でクラスが使えないため個別に変数を書いている。
     実要素で使える箇所（パンくず等）はこのクラスを足すだけでよい。 */
.c-mark-oblock--diag {
    --mark-ink-tr: var(--mark-ink-sub, rgba(245, 244, 242, 0.35));
    --mark-ink-bl: var(--mark-ink-sub, rgba(245, 244, 242, 0.35));
}

/* ■ 帯2本積み（上＝濃 / 下＝淡）
   Strengths で使用。隙間なしで積むので濃淡で分割を見せる。 */
.c-mark-bars2 {
    --bars2-bar: calc(var(--mark-size-solid) / 2);

    width: var(--mark-size-solid);
    height: var(--mark-size-solid);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink, rgba(245, 244, 242, 0.85)) 0 0),
        linear-gradient(var(--mark-ink-sub, rgba(245, 244, 242, 0.35)) 0 0);
    background-size: 100% var(--bars2-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left bottom;
}

/* ■ 帯2本積み（上＝濃 / 下＝淡・隙間あり）
   Company 系で使用。以下4箇所。
       ・Philosophy セクションのラベル
       ・ヘッダのナビ（hover / 現在ページの装飾）
       ・ドロワーの Company
       ・フッターの Company
     いずれも疑似要素（::before）なのでクラスを付けられず、
     形の指定は各箇所に転記している。
     ただし色は4箇所とも --mark-ink / --mark-ink-sub を参照するよう
     揃えてあるので、色を変えるときは各箇所の
     変数2行だけを触ればよい。
     形（隙間・外形）を変えるときは5箇所をセットで見直すこと。
   ※ .c-mark-bars2（Strengths）とは濃淡の向きも同じなので、
     隙間の有無だけが違い（あちらは隣接）。
     区別を強めたい場合は隙間を広げるか、濃淡の差を変える。
   ※ 外形は --mark-size-solid。帯2本は面積が大きいので、
     塗りつぶし正方形と同じ一段小さい外形に揃える。
   ※ 隙間を引いた残りを2等分するので、
     外形が奇数pxになると帯の高さが端数になり輪郭がにじむ。
     0.5rem = 8px、隙間 2px → 帯 3px で割り切れる。 */
.c-mark-bars2-alt {
    --bars2alt-gap: 2px;
    --bars2alt-bar: calc((var(--mark-size-solid) - var(--bars2alt-gap)) / 2);

    width: var(--mark-size-solid);
    height: var(--mark-size-solid);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink, rgba(245, 244, 242, 0.85)) 0 0),
        linear-gradient(var(--mark-ink-sub, rgba(245, 244, 242, 0.35)) 0 0);
    background-size: 100% var(--bars2alt-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left bottom;
}

/* ■ 帯3本積み
   News で使用。幅3本＋隙隓2つで正方形になる。 */
.c-mark-bars3 {
    --bars3-gap: 0.125rem;
    --bars3-bar: calc((var(--mark-size) - var(--bars3-gap) * 2) / 3);

    width: var(--mark-size);
    height: var(--mark-size);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink, rgba(245, 244, 242, 0.66)) 0 0),
        linear-gradient(var(--mark-ink, rgba(245, 244, 242, 0.66)) 0 0),
        linear-gradient(var(--mark-ink, rgba(245, 244, 242, 0.66)) 0 0);
    background-size: 100% var(--bars3-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left center,
        left bottom;
}

/* ■ L字＋右上の四角
   ドロワーの Top、ヘッダの Top で使用。
   ※ L字は border-left と border-bottom で描く。
     3マスを並べる方式だとマス＝外形÷2に固定され、
     Lを細くするとマス同士が離れて繋がらなくなる。
     border なら線幅を自由にしながら、ブラウザが
     1つのパスとして描くので左下の角に継ぎ目が出ない。
   ※ 線幅・四角は必ず整数pxで持つこと。
     端数にすると輪郭がピクセルに乗らずにじむ。
     外形（--mark-size-mid）も偶数pxを維持すること。
     中央寄せの translate(-50%) が半ピクセルになると
     図形全体がぼやける。
   ※ 右上の四角はL字から2px離れる値にしてある。
     外形 - 線幅 - 四角 = 2 になるように揃えると隙間が均一になる。 */
.c-mark-lblock {
    --lblock-cell: 3px;
    --lblock-chip: 5px;

    width: var(--mark-size-mid);
    height: var(--mark-size-mid);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    border-left: var(--lblock-cell) solid var(--mark-ink, rgba(245, 244, 242, 0.85));
    border-bottom: var(--lblock-cell) solid var(--mark-ink, rgba(245, 244, 242, 0.85));
    background-image: linear-gradient(var(--mark-ink-sub, rgba(245, 244, 242, 0.45)) 0 0);
    background-size: var(--lblock-chip) var(--lblock-chip);
    background-repeat: no-repeat;
    background-position: right top;
}

/* ■ 正方形＋チェック
   共通CTAの Notice で使用。枠の中にチェックを1本描く。
   ※ チェックは ::before に border-right / border-bottom だけを残し、
     45度回した長方形。他のマークと違って内側に図形を
     持つため、疑似要素ではなく実要素（span）に付けること。
   ※ 外形は他のマークより大きめ。小さいとチェックが
     枠に接してつぶれるので、--mark-size を別途上書きして使う。
   ※ 線幅・寸法は整数pxで持つこと。端数にするとにじむ。 */
.c-mark-check {
    --check-w: 4px;
    --check-h: 7px;
    --check-line: 2px;

    position: relative;
    width: var(--mark-size);
    height: var(--mark-size);
    flex-shrink: 0;
    line-height: 1;
    background-color: var(--mark-ink, rgba(245, 244, 242, 0.66));
}

.c-mark-check::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--check-w);
    height: var(--check-h);
    border-right: var(--check-line) solid var(--mark-ink-sub, var(--color-text-inverse));
    border-bottom: var(--check-line) solid var(--mark-ink-sub, var(--color-text-inverse));
    /* 回転後は見た目の重心が下に寄るので、
       縦方向だけ少し引き上げて枠の中心に見せる。 */
    transform: translate(-50%, -60%) rotate(45deg);
}

/* ================================================================
   共通矢印（シェブロン）
   「＞」形の矢印。テキストの「→」ではなくCSSで描く。
   ※ currentColor なので親の文字色に自動で追従する。
   ※ 使い方：<span class="c-arrow" aria-hidden="true"></span>
     左向きにしたい場合は .c-arrow--back を付ける。

   ※ 各箱所の矢印（.btn__arrow 等）もここでまとめて形を定義し、
     個別CSS側ではホバー時の動きだけを指定する。
================================================================ */

.c-arrow,
.btn__arrow,
.cta-group__title-arrow,
.index-service__all-arrow,
.index-news__all-arrow,
.index-service__more-arrow,
.index-works__all-arrow,
.drawer__link-arrow {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    flex-shrink: 0;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
}

/* 左向き（一覧へ戻る等）
   ※ ※重要※ 上辺と左辺を残して rotate(-45deg)。
     この組み合わせではじめて左向きの「＜」になる。
     ※ 以前は下辺と左辺を残していたため、
       回した結果が「∨」に近い形になり、
       下向きに見えていた。
   ※ 右向き（上の共通定義）は上辺と右辺を残して
     rotate(45deg)。左右で対称になる。 */
.c-arrow--back,
.btn__arrow--back {
    border-top: 1px solid currentColor;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid currentColor;
    transform: rotate(-45deg);
}

/* ================================================================
   共通ボタン

   ※ 以降、リンクやボタンの反応は :hover ではなく
     :is(:hover, :active) で指定する。
     スマホにはホバーが無いため、タップ中（:active）にも
     同じ変化を出して押したことが分かるようにする。
     ※ :is() は引数のうち最も高い詳細度を取るが、
       :hover と :active は同じ詳細度なので影響はない。
================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0 2rem;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn:is(:hover, :active) {
    background-color: transparent;
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* 矢印本体の形は上の共通定義を使う。
   ここではホバー時の動きだけを指定する。 */
.btn:is(:hover, :active) .btn__arrow {
    transform: rotate(45deg) translate(2px, -2px);
}

/* ※ ※重要※ 左向きは左へ滑らせる。
     translate の値は rotate をかけた後の坐標系で
     解釈される。--back は rotate(-45deg) なので、
         translate( 2px, -2px) → 画面上では右下
         translate(-2px,  2px) → 画面上では左上
     になる。
     ※ 以前は右向きと同じ translate(2px, -2px) を
       使っていたため、左向きの矢印が右へ動いていた。 */
.btn:is(:hover, :active) .btn__arrow--back {
    transform: rotate(-45deg) translate(-2px, 2px);
}

/* 白抜きボタン（暗背景用） */
.btn--outline {
    background-color: transparent;
    border-color: rgba(245, 244, 242, 0.5);
    color: var(--color-text-inverse);
}

.btn--outline:is(:hover, :active) {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* 四隅L字の白抜きボタン（.btn--frame）
   平時：外周の枠線と、その外側にずれた対角のL字（左上・右下）。
   ホバー：① L字が伸びて外側の枠に閉じる → ② 面が左→右に塗られる。

   ※ .btn--outline とは併用しない。どちらも背景と枠線を
     自分で持つので、両方付けるとホバーが打ち消し合う。
     使い方は class="btn btn--frame"。

   ※ 形は強みカードの四隅L字装飾と同じ文法。
     ただしあちらは背景レイヤー8枚で描いているのに対し、
     ここは ::before（左上）/ ::after（右下）の border で描く。
     対角の2つだけなので疑似要素の数で足りる。

   ※ ※重要※ 塗りつぶしは疑似要素を増やさず、
     background-image（単色のグラデーション）の
     background-size を 0% → 100% に伸ばして作っている。
     疑似要素は L字で2つとも埋まっているため。
     この方式なら overflow: hidden が要らない。
     ※ だから background-color ではなく background-size を動かす。
       background-color を使うと面が一気に入って左→右にならない。

   ※ ※重要※ 順番は transition-delay で作る。
     ホバー時：L字（0sから）→ 面（線の完了後から）
     解除時：面（0sから）→ L字（面の完了後から）と逆順。
     逆順にしないと、離したときに面が残ったまま線が縮む。
     基本状態側とホバー側の両方に transition を書くのはそのため。

   ※ 文字色は塗りの真ん中で切り替える（遅延つきの 0s）。
     見出しの帯アニメ（.section-head）と同じ手法。
     塗りの途中はどこかの半分が地と同色になるので、
     塗りの時間（--frame-dur-fill）は短く保つこと。

   ※ 平時から外周の枠線があるので、背景写真の上でも
     押せる範囲が伝わる。

   ※ 見た目と速さは下の7つの変数だけで決まる。
     ※ --frame-ink-on と --frame-fill を同色にすると、塗り切った後に
       枠線が面に溶けてベタの白い面になる。
       枠を残したい場合は --frame-fill を一段暗くする。 */
.btn--frame {
    --frame-corner: 1.375rem;
    --frame-offset: 0.5rem;
    --frame-line: 1px;
    --frame-ink: rgba(245, 244, 242, 0.5);
    --frame-ink-on: rgba(245, 244, 242, 1);
    --frame-fill: rgba(245, 244, 242, 1);
    --frame-dur-line: 0.3s;
    --frame-dur-fill: 0.2s;

    position: relative;
    background-color: transparent;
    background-image: linear-gradient(var(--frame-fill) 0 0);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    border-color: var(--frame-ink);
    color: var(--color-text-inverse);
    transition:
        background-size var(--frame-dur-fill) ease 0s,
        border-color var(--frame-dur-line) ease var(--frame-dur-fill),
        color 0s linear calc(var(--frame-dur-fill) / 2);
}

/* ※ 絶対配置の基準は padding box。
     .btn は透明な border を 1px 持ったままなので、
     L字はその内側に並ぶ。
   ※ pointer-events は切る。ボタン本体のクリックを奪わない。
   ※ ここの遅延（--frame-dur-fill）は「解除時に面の後から縮む」分。
     ホバー時の遅延 0s は下の :hover 側で上書きする。 */
.btn--frame::before,
.btn--frame::after {
    content: '';
    position: absolute;
    width: var(--frame-corner);
    height: var(--frame-corner);
    pointer-events: none;
    transition:
        width var(--frame-dur-line) ease var(--frame-dur-fill),
        height var(--frame-dur-line) ease var(--frame-dur-fill),
        border-color var(--frame-dur-line) ease var(--frame-dur-fill);
}

.btn--frame::before {
    top: calc(var(--frame-offset) * -1);
    left: calc(var(--frame-offset) * -1);
    border-top: var(--frame-line) solid var(--frame-ink);
    border-left: var(--frame-line) solid var(--frame-ink);
}

.btn--frame::after {
    right: calc(var(--frame-offset) * -1);
    bottom: calc(var(--frame-offset) * -1);
    border-right: var(--frame-line) solid var(--frame-ink);
    border-bottom: var(--frame-line) solid var(--frame-ink);
}

/* ※ 面は線が描き切ってから（--frame-dur-line 後）入る。
   ※ transform: none で共通側の浮き上がり（translateY(-2px)）を止める。
     線と面の2段の動きと重なると焦点が散る。
   ※ 詳細度 0-2-0。共通の .btn:is(:hover, :active)（0-1-0）より強い。 */
.btn--frame:is(:hover, :active) {
    background-size: 100% 100%;
    border-color: var(--frame-ink-on);
    color: var(--color-primary);
    transform: none;
    transition:
        background-size var(--frame-dur-fill) ease var(--frame-dur-line),
        border-color var(--frame-dur-line) ease 0s,
        color 0s linear calc(var(--frame-dur-line) + var(--frame-dur-fill) / 2);
}

/* ※ L字が伸びて外側の枠を閉じる。
     ::before（上辺＋左辺）と ::after（下辺＋右辺）が
     同じ外形まで伸びるので、2つ合わせて完全な長方形になる。
   ※ 外形は「ボタンの幅＋ずれ幅×2」。
     絶対配置の基準が padding box なので、
     左上（-offset, -offset）から右下（100%+offset）までを
     覆うにはこの値になる。
     ※ --frame-offset を変えると両方に効くので、
       この式は触らなくてよい。
   ※ 結果として内側（.btn の border）と外側の2重の枠になる。
     1本にしたい場合は .btn--frame:is(:hover, :active) の
     border-color を transparent にする。 */
.btn--frame:is(:hover, :active)::before,
.btn--frame:is(:hover, :active)::after {
    width: calc(100% + var(--frame-offset) * 2);
    height: calc(100% + var(--frame-offset) * 2);
    border-color: var(--frame-ink-on);
    transition:
        width var(--frame-dur-line) ease 0s,
        height var(--frame-dur-line) ease 0s,
        border-color var(--frame-dur-line) ease 0s;
}

@media (prefers-reduced-motion: reduce) {

    .btn--frame,
    .btn--frame:is(:hover, :active),
    .btn--frame::before,
    .btn--frame::after,
    .btn--frame:is(:hover, :active)::before,
    .btn--frame:is(:hover, :active)::after {
        transition: none;
    }
}

/* ================================================================
   ヘッダー
================================================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 100;
    /* ※ --color-bg-raise（#111111）の 95%。
         SERVICE/WORKS ブロック・新着情報と同じ地に揃えている。
       ※ ※重要※ 透過度が必要なので変数（hex）はそのまま使えず、
         rgba で展開して持っている。--color-bg-raise を変えたときは
         この行の RGB も合わせること。
       ※ 以前は rgba(26, 26, 26, 0.92)（#1A1A1A の 92%）。 */
    background-color: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--transition);
}

/* ページ最上部：背景を消して直下のビジュアルに溶け込ませる。
   トップは FV（.fv）、下層ページはページヒーロー（.page-hero）に重なる。

   ※ 条件を body のクラス（.page-index など）ではなく :has() で持つ理由。
     この演出が成立するのは「ヘッダーの直下が暗いビジュアルで始まる」
     ページだけ。逆に明るい地の上で透過させると白文字が読めなくなる。
     テスト環境の制作中表示（includes/wip.php → .sec-wip）は
     ページヒーローごとオフホワイトの面に差し替わるので、
     クラスで判定していると WIP のページまで透過してしまう。
     :has() なら「暗いヒーローが実際に出力されているか」で決まるので、
     WIP のときは自動で外れ、ページを増やしたときも列挙し直さずに済む。
   ※ 条件を足すときは .fv / .page-hero と同じく
     「ヘッダー直下に来る暗いビジュアル」のクラスだけを並べること。
   ※ 詳細度は :has() の引数のうち最も高いもの（クラス1つ）で数えるので、
     以前の body.page-index... と同じ。他の指定との強弱は変わらない。
   ※ ドロワー展開中は背景を戻す（メニューとの境目を残すため）。 */
body:has(.fv, .page-hero).is-header-top:not(.menu-open) .header {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ※ 下端の区切り線はここ（.header__inner）に引く。
     border ではなく ::after を使うのは、
     border が要素の外側に描かれて高さ計算に影響するため。 */
.header__inner {
    position: relative;
    width: min(100%, var(--header-width));
    height: 100%;
    margin-inline: auto;
    padding-inline: var(--header-padding-inline);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__inner::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    transition: background-color var(--transition);
}

body:has(.fv, .page-hero).is-header-top:not(.menu-open) .header__inner::after {
    background-color: transparent;
}

/* 左側ブロック（ロゴ＋ナビ） */
.header__main {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
}

.header__logo-img {
    width: auto;
    /* ヘッダー高さの60%を占める（--header-height の変更に追従する） */
    height: calc(var(--header-height) * 0.6);
    /* ※ ロゴが黒基調の場合、黒背景で見えなくなるため白に反転させる。
       白抜きロゴ（背景透過）を用意できたらこの1行を削除する。 */
    filter: brightness(0) invert(1);
}

/* PCナビ */
.header__nav {
    display: none;
}

@media (min-width: 1024px) {
    .header__nav {
        display: block;
        height: 100%;
        margin-left: auto;
    }
}

/* 各項目を等幅に揃える。
   ※ 項目間の gap は取らず、幅の中で文字を中央寄せにする。
     こうしないと下線の長さが項目ごとに変わる。
   ※ 幅は一番長い Company / Service が収まる値。 */
.header__nav-list {
    --nav-item-width: 6rem;

    /* ※ 共通装飾（.c-mark-*）はこの3つの変数から寸法を取る。
         ※ 以前は既定より一回り大きく（12px）していたが、
           文字に対して装飾が重く見えたため一回り落とし、
           :root の既定と同じ 10px に戻してある。
         ※ 3つの比率関係（面積補正）は既定と同じに保ってある。 */
    --mark-size: 0.625rem;
    --mark-size-mid: 0.625rem;
    /* ※ 塗りつぶし正方形（Company）の値。
         :root の比率（0.5 / 0.625 = 0.8）だとこのサイズでは
         落としすぎて小さく見えるので、ヘッダだけ少し戻す。 */
    --mark-size-solid: 0.5625rem;

    display: flex;
    align-items: stretch;
    height: 100%;
}

.header__nav-item {
    display: flex;
}

/* リンクをヘッダ全高に伸ばす。
   ※ 装飾は絶対配置で浮かせるので、テキストの中央揃えは従来のまま。 */
.header__nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-item-width);
    height: 100%;
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--color-text-inverse);
    transition: color var(--transition);
}

/* ※ 以前はホバー・現在ページを下線（::after）で示していたが廃止した。
     代わりに英字の上に出る装飾そのものを目印にする。

   装飾は実要素を置かず ::before を絶対配置する。
   ※ レイアウトの流れから外れるので、出てもテキスト位置が動かない。
   ※ 幅・高さ・背景は下の .c-mark-* 併用セレクタで与える。
     ここでは位置と表示切り替えだけを持つ。
   ※ リンクの上端（top: 0）を基準にし、
     隠れているときは上に逃がしておいて、
     ホバーで上から降りてくる動きにする。
     --nav-mark-top が表示時の上端からの距離。 */
.header__nav-link::before {
    --nav-mark-top: 0.8125rem;
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.45);

    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    opacity: 0;
    transform: translate(-50%, 0);
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: none;
}

/* 現在ページ：控えめに出す。
   ホバー：現在ページより少し濃くして反応を見せる。
   ※ ホバーを後に書くこと。同じ詳細度なので、
     先に書くと現在ページをホバーしたときに濃くならない。 */
.header__nav-link.is-active::before {
    opacity: 0.7;
    transform: translate(-50%, var(--nav-mark-top));
}

.header__nav-link:is(:hover, :active)::before,
.header__nav-link:focus-visible::before {
    opacity: 0.9;
    transform: translate(-50%, var(--nav-mark-top));
}

/* 形は共通定義（.c-mark-*）をそのまま使う。
   ※ 疑似要素にはクラスを付けられないので、
     セレクタを並列で追記して形を引き込む。
     形を変えるときは common の .c-mark-* を直せばここも追従する。 */
.header__nav-item:nth-child(1) .header__nav-link::before {
    --lblock-cell: 3px;
    --lblock-chip: 5px;

    width: var(--mark-size-mid);
    height: var(--mark-size-mid);
    border-left: var(--lblock-cell) solid var(--mark-ink);
    border-bottom: var(--lblock-cell) solid var(--mark-ink);
    background-image: linear-gradient(var(--mark-ink-sub) 0 0);
    background-size: var(--lblock-chip) var(--lblock-chip);
    background-repeat: no-repeat;
    background-position: right top;
}

.header__nav-item:nth-child(2) .header__nav-link::before {
    width: var(--mark-size);
    height: var(--mark-size);
    background-image:
        linear-gradient(to bottom right,
            transparent 50%,
            var(--mark-ink) 50%),
        linear-gradient(to top left,
            transparent 50%,
            var(--mark-ink-sub) 50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.header__nav-item:nth-child(3) .header__nav-link::before,
.header__nav-item:nth-child(5) .header__nav-link::before {
    --oblock-gap: 0.125rem;
    --oblock-cell: calc((var(--mark-size) - var(--oblock-gap)) / 2);

    width: var(--mark-size);
    height: var(--mark-size);
    background-image:
        linear-gradient(var(--mark-ink-tl, var(--mark-ink)) 0 0),
        linear-gradient(var(--mark-ink-tr, var(--mark-ink)) 0 0),
        linear-gradient(var(--mark-ink-bl, var(--mark-ink)) 0 0),
        linear-gradient(var(--mark-ink-br, var(--mark-ink)) 0 0);
    background-size: var(--oblock-cell) var(--oblock-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* Company：帯2本積み（上＝濃 / 下＝淡・隙間あり）
   ※ .c-mark-bars2-alt と同形。ドロワー・フッター・Philosophy と揃えてある。
   ※ 隙間を他箇所と同じ 2px に揃えるため、外形をここだけ
     10px（0.625rem）に上げている。
     ヘッダの --mark-size-solid は 9px なので、
     そのまま隙間 2px を引くと帯が 3.5px の端数になり、
     輪郭がピクセルに乗らずにじむ。
     10px なら （10 - 2）/ 2 = 4px で割り切れる。
   ※ 外形は他の装飾（--mark-size）と同じ 10px になるが、
     隙間分を引いて面積は小さいので見た目の重さは揃う。 */
.header__nav-item:nth-child(4) .header__nav-link::before {
    --nav-mark: 0.625rem;
    --nav-bars-gap: 2px;
    --nav-bars-bar: calc((var(--nav-mark) - var(--nav-bars-gap)) / 2);

    width: var(--nav-mark);
    height: var(--nav-mark);
    background-image:
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink-sub) 0 0);
    background-size: 100% var(--nav-bars-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left bottom;
}

/* Recruit の O字ブロックだけ、左上と右下を白、残り2つをグレーにする。
   ※ Works も同じ O字ブロックなので、色の振り分けで区別する。
     （トップページの各セクションと同じ作り分け） */
.header__nav-item:nth-child(5) .header__nav-link::before {
    --mark-ink-tr: rgba(245, 244, 242, 0.35);
    --mark-ink-bl: rgba(245, 244, 242, 0.35);
}

/* Contact：枠だけの正方形（中央が穴）
   ※ .c-mark-frame と同形。ドロワー・フッター・共通CTA の
     Contact と揃えてある。
   ※ お問い合わせをナビの1項目に統合したのに合わせて追加した。
     以前は右端の独立ボタン（.header__contact-btn::before）が
     同じ装飾を持っていた。
   ※ 他のマークと違って背景ではなく border で描くので、
     淡い側（--mark-ink-sub）は使わない。 */
.header__nav-item:nth-child(6) .header__nav-link::before {
    width: var(--mark-size);
    height: var(--mark-size);
    border: 2px solid var(--mark-ink);
}

/* ※ 下線（.header__nav-link::after）は廃止した。
     ヘッダ下端の区切り線は .header__inner::after 側で引いているので
     そちらはそのまま。 */

/* ヘッダー右側アクション */
.header__actions {
    display: none;
}

@media (min-width: 1024px) {
    .header__actions {
        display: flex;
        align-items: stretch;
        height: 100%;
        /* 白ブロックを画面右端まで届かせる。
           ※ .header__inner の padding-inline を打ち消す。 */
        margin-right: calc(var(--header-padding-inline) * -1);
        flex-shrink: 0;
    }
}

/* お問い合わせボタン（アイコン + 下にラベルの縦並び）
   ※ ヘッダ右端を白で塗りつぶして抹きにする（aramakikogyo と同方式の反転）。
     背景が白なので、アイコンは黒版を使い、文字色も墓黒にする。
   ※ ページ最上部（ヘッダ透過時）だけは下の例外指定で
     背景を消し、白アイコン・白文字に戻す。
   ※ ナビと違い、下線（ホバー・アクティブ）は付けない。 */
.header__contact-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 100%;
    padding-inline: var(--spacing-md);
    background-color: var(--color-bg);
    color: var(--color-primary);
    transition: background-color var(--transition), color var(--transition);
}

/* ※ 右上の角に、ドロワーの Contact と同じ装飾（枠だけの正方形）を置く。
   ※ ナビと揃えて、ホバー・現在ページのときだけ上から降りてくる。
   ※ このボタンは背景が白なので、枠は墨黒にする。
     ページ最上部（ヘッダ透過時）だけ下の例外指定で白に戻す。
   ※ 角からの余白は --contact-mark-inset で調整する。 */
.header__contact-btn::before {
    --contact-mark-inset: 0.5rem;

    content: '';
    position: absolute;
    top: 0;
    right: var(--contact-mark-inset);
    width: var(--mark-size);
    height: var(--mark-size);
    border: 2px solid var(--color-primary);
    opacity: 0;
    transform: translateY(0);
    transition: opacity var(--transition), transform var(--transition), border-color var(--transition);
    pointer-events: none;
}

.header__contact-btn.is-active::before {
    opacity: 0.7;
    transform: translateY(var(--contact-mark-inset));
}

.header__contact-btn:is(:hover, :active)::before,
.header__contact-btn:focus-visible::before {
    opacity: 0.9;
    transform: translateY(var(--contact-mark-inset));
}

/* ページ最上部：暗いビジュアルに重なるので白枠に切り替える */
body:has(.fv, .page-hero).is-header-top:not(.menu-open) .header__contact-btn::before {
    border-color: rgba(245, 244, 242, 0.66);
}

/* ホバー：紙飛行機アイコンだけを少し上に上げる */
.header__contact-btn:is(:hover, :active) .header__contact-icon {
    transform: translateY(-0.25rem);
}

/* ページ最上部：塗りつぶしをやめて直下のビジュアルに溶け込ませる */
body:has(.fv, .page-hero).is-header-top:not(.menu-open) .header__contact-btn {
    background-color: transparent;
    color: var(--color-text-inverse);
}

.header__contact-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    transition: transform var(--transition);
}

/* 白版・黒版を同じ位置に重ね、背景に合わせて切り替える */
.header__contact-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity var(--transition);
}

.header__contact-icon-img--white {
    position: absolute;
    inset: 0;
    opacity: 0;
}

body:has(.fv, .page-hero).is-header-top:not(.menu-open) .header__contact-icon-img--white {
    opacity: 1;
}

body:has(.fv, .page-hero).is-header-top:not(.menu-open) .header__contact-icon-img--black {
    opacity: 0;
}

.header__contact-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}

/* ================================================================
   ハンバーガーボタン
================================================================ */

/* ※ ドロワー（z-index: 110）より前面に出すため、
   ヘッダーの子ではなく fixed で独立配置し、z-index を上に取る。
   （親に z-index があるとスタッキング文脈に閉じ込められて前面に出ないため） */
.hamburger {
    position: fixed;
    top: 0;
    right: var(--header-padding-inline);
    height: var(--header-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ※ 線3本と下のラベルの間隔。近すぎると線の一部に見えるので少し離す。 */
    gap: 0.5rem;
    z-index: 130;
    transition: opacity var(--transition), visibility var(--transition);
}

@media (min-width: 1024px) {
    .hamburger {
        display: none;
    }
}

/* 線3本のラッパー（高さを固定して×変形時もラベルを動かさない） */
.hamburger__lines {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.125rem;
}

.hamburger__line {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.hamburger__line:nth-child(1) {
    top: 0;
}

.hamburger__line:nth-child(2) {
    top: 50%;
}

.hamburger__line:nth-child(3) {
    top: 100%;
}

.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: translateY(0.5625rem) rotate(45deg);
}

.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: translateY(-0.5625rem) rotate(-45deg);
}

/* ボタン下のラベル（お問い合わせボタンと揃える）
   Menu / Close を重ねて配置し、幅の広い方に合わせて位置を固定する */
.hamburger__label {
    position: relative;
    display: grid;
    place-items: center;
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--color-text-inverse);
    white-space: nowrap;
}

.hamburger__label-text {
    grid-area: 1 / 1;
    /* ※ 線3本の×変形（.hamburger__line の transform）と同じ
         0.35s / cubic-bezier(0.16, 1, 0.3, 1) に揃えてある。
         共通の --transition（0.25s ease）ではないのは、
         ボタン内で線と文字の動きを一致させるため。
         線側の秒数を変えるときはこちらも合わせる。 */
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hamburger__label-text--close {
    opacity: 0;
}

.hamburger.is-active .hamburger__label-text--open {
    opacity: 0;
}

.hamburger.is-active .hamburger__label-text--close {
    opacity: 1;
}

/* ================================================================
   モバイルメニュー（1024px未満）
   ※ 以前は右から出るドロワーだったが、
     全画面表示＋上から下へ降りる形に変更した。
     クラス名は .drawer のまま（HTML / JS と共有しているため）。
================================================================ */

.drawer {
    /* ※ ヘッダー（z-index: 100）の下に置く。
         こうするとメニューを開いてもロゴとヘッダーの
         区切り線が残る（ヘッダーの背景色をメニュー開中に
         戻す既存の指定とも意図が合う）。
       ※ ページトップボタン（90）より上、
         ハンバーガー（130）より下。 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 95;
    /* ※ ヘッダー・SERVICE/WORKS ブロック・新着情報と同じ
         --color-bg-raise（#111111）。以前は #1A1A1A のベタ書き。
       ※ ヘッダーは同じ色を 95% で透かしているので、
         メニューを開いたときに上下で地が揃う。
         （区切りは .header__inner::after の1pxの線が担う） */
    background-color: var(--color-bg-raise);
    /* ※ パネル自体は動かさず、幕が上から下りるように開く。
         面ごとスライドさせるより動きが静かで、
         中身の順次登場（下のスタガー）と重なって奥行きが出る。
         ※ clip-path で隠しても要素はその場に残るので、
           閉じている間は visibility で確実に無効化する。
           閉じるときは幕が上がり切ってから消す（遅延 0.65s）。 */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition:
        clip-path 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.65s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.drawer.is-open {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition:
        clip-path 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

@media (min-width: 1024px) {
    .drawer {
        display: none;
    }
}

/* ※ 余白はここ（__inner）が持ち、幅の上限は内側の
     __container が持つ。セクション（.section / .section__inner）と
     同じ役割分担に揃えてある。 */
.drawer__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* ※ 左右は他セクションと同じ --section-pad-x に揃える。
         上はヘッダーの下から始まるようヘッダー高さ分を足す。 */
    padding: calc(var(--header-height) + var(--spacing-lg)) var(--section-pad-x) var(--spacing-xl);
}

/* 幅の上限と中央寄せだけを担う。
   ※ タブレット幅（〜1023px）でリンクが横に伸びすぎないようにする。 */
.drawer__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
}

.drawer__list {
    display: flex;
    flex-direction: column;
}

.drawer__item {
    border-bottom: 1px solid var(--color-border-dark);
}

/* ※ ホバー・タップ時に反応するのは右端の矢印だけにする。
     以前は opacity を落としつつ padding-left で行ごと
     右にずらしていたが、行が動くのをやめた。
     opacity も外すのは、親にかけると子の矢印まで
     一緒に薄くなり、矢印側の白への変化と打ち消し合うため。 */
.drawer__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9375rem 0.25rem;
    color: var(--color-text-inverse);
}

/* ── 現在ページ（.is-active）──
   日本語ラベルを白に上げて現在地を示す。
   ※ 英字ラベル（.drawer__link-en）は .drawer__link の color を
     継承して元から白なので、差が出るのは
     通常時に 0.6 まで落としてある日本語側だけ。
   ※ 以前は左端に縦バーを出していたが削除済み。
   ※ .is-active の付与は header-nav.php の is_active() が行う。
   ※ 詳細度は 0-2-0。下の .drawer__link-ja（0-1-0）より強いので、
     この位置に置いても後勝ちで消されない。 */
.drawer__link.is-active .drawer__link-ja {
    color: var(--color-text-inverse);
}

/* 項目右端の矢印。形は common の共通定義（上記）に任せ、
   ここでは大きさ・位置・ホバー時の動きだけを指定する。
   ※ ドロワーはタップ領域が広く文字も大きいので、
     共通サイズ（0.4375rem）だと負ける。一回り大きくする。 */
.drawer__link-arrow {
    width: 0.625rem;
    height: 0.625rem;
    border-top-width: 1.5px;
    border-right-width: 1.5px;
    margin-left: auto;
    color: rgba(245, 244, 242, 0.6);
    transition: transform var(--transition), color var(--transition);
}

.drawer__link:is(:hover, :active) .drawer__link-arrow {
    color: var(--color-text-inverse);
    transform: rotate(45deg) translate(2px, -2px);
}

/* ドロワー項目の装飾（.drawer__link-en::before）
   ※ トップページの各セクションで使っている装飾を、対応する項目に割り当てる。
     Top     … L字＋右上の四角（この項目専用）
     Service … 対角分割の三角2つ（.index-service__head と同じ）
     Works   … O字ブロック2×2（.index-works__center と同じ）
     Company … 塗りつぶし正方形（common の既定装飾と同じ）
     Recruit … O字ブロック・左上と右下が白（.index-recruit__label と同じ）
     Contact … 枠だけの正方形（共通CTA・フッターの Contact と同じ）
   ※ .drawer__link::before は現在ページの縦バーで使っているので、
     装飾は英字ラベル側の ::before に持たせる。
   ※ 一辺は --drawer-mark で共通化する。サイズを変えるときはここだけを触る。
   ※ min-width は装飾と gap を含めた幅になるので、
     日本語ラベルの左端を揃えるために少し広げてある。 */
.drawer__link-en {
    --drawer-mark: var(--mark-size);

    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-en);
    font-size: 1.0625rem;
    letter-spacing: 0.14em;
    min-width: 7rem;
}

.drawer__link-en::before {
    content: '';
    width: var(--drawer-mark);
    height: var(--drawer-mark);
    flex-shrink: 0;
    line-height: 1;
    background-repeat: no-repeat;
}

/* Top：左の縦棒と下の横棒を左下で交差させた1本のL字＋右上の四角。
   ※ L字（白）と右上の四角（グレー）で濃淡を分け、
     別のパーツであることを読み取れるようにする。
   ※ 形の定義は common.css の .c-mark-lblock と揃えてある。 */
.drawer__item:nth-child(1) .drawer__link-en {
    --drawer-mark: var(--mark-size-mid);
    --drawer-cell: 3px;
    --drawer-chip: 5px;
}

.drawer__item:nth-child(1) .drawer__link-en::before {
    border-left: var(--drawer-cell) solid var(--color-text-inverse);
    border-bottom: var(--drawer-cell) solid var(--color-text-inverse);
    background-image: linear-gradient(rgba(245, 244, 242, 0.45) 0 0);
    background-size: var(--drawer-chip) var(--drawer-chip);
    background-position: right top;
}

/* Service：右上（濃）と左下（淡）に分かれる対角分割の三角2つ */
.drawer__item:nth-child(2) .drawer__link-en::before {
    background-image:
        linear-gradient(to bottom right,
            transparent 50%,
            rgba(245, 244, 242, 0.85) 50%),
        linear-gradient(to top left,
            transparent 50%,
            rgba(245, 244, 242, 0.35) 50%);
    background-size: 100% 100%;
}

/* Works：四隅に4マスのO字ブロック（.c-mark-oblock と同じ寸法） */
.drawer__item:nth-child(3) .drawer__link-en {
    --drawer-gap: 0.125rem;
    --drawer-cell: calc((var(--mark-size) - var(--drawer-gap)) / 2);
}

.drawer__item:nth-child(3) .drawer__link-en::before {
    background-image:
        linear-gradient(rgba(245, 244, 242, 0.6) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.6) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.6) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.6) 0 0);
    background-size: var(--drawer-cell) var(--drawer-cell);
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* Company：帯2本積み（上＝濃 / 下＝淡・隙間あり）
   ※ .c-mark-bars2-alt と同形。値を変えるときは両方を合わせること。
   ※ Strengths の .c-mark-bars2 とは隙間の有無で区別する。
   ※ 色は --mark-ink（濃）/ --mark-ink-sub（淡）で持つ。
     ドロワーは .drawer__link-en 側に変数が無いのでここで定義する。 */
.drawer__item:nth-child(4) .drawer__link-en {
    --drawer-mark: var(--mark-size-solid);
    --drawer-bars-gap: 2px;
    --drawer-bars-bar: calc((var(--mark-size-solid) - var(--drawer-bars-gap)) / 2);
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

.drawer__item:nth-child(4) .drawer__link-en::before {
    background-image:
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink-sub) 0 0);
    background-size: 100% var(--drawer-bars-bar);
    background-position:
        left top,
        left bottom;
}

/* Recruit：O字ブロック。左上と右下だけ白、残り2つはグレー */
.drawer__item:nth-child(5) .drawer__link-en {
    --drawer-gap: 0.125rem;
    --drawer-cell: calc((var(--mark-size) - var(--drawer-gap)) / 2);
}

.drawer__item:nth-child(5) .drawer__link-en::before {
    background-image:
        linear-gradient(var(--color-text-inverse) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.35) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.35) 0 0),
        linear-gradient(var(--color-text-inverse) 0 0);
    background-size: var(--drawer-cell) var(--drawer-cell);
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* Contact：枠だけの正方形（中央が穴）。
   ※ ここだけ border で描くので background-image は使わない。 */
.drawer__item:nth-child(6) .drawer__link-en::before {
    border: 2px solid rgba(245, 244, 242, 0.66);
}

.drawer__link-ja {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: rgba(245, 244, 242, 0.6);
}

.drawer__foot {
    margin-top: var(--spacing-xl);
}

/* ── 中身の順次登場（スタガー） ──
   幕が下りるのを追うように、項目が1つずつ下から立ち上がる。
   ※ 幕だけだと面が動くだけで平板に見える。
     この遅延が入ることで奥行きが出る。
   ※ 遅延は .is-open 側だけに付ける。
     基本側（閉じた状態）に付けると、閉じるときにも
     順番待ちが発生してもたつく見える。閉じは一斉に戻す。
   ※ 刻みは 0.06s。全体の長さを変えるときは
     下の transition-delay の値をまとめて調整する。 */
.drawer__item,
.drawer__foot {
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer.is-open .drawer__item,
.drawer.is-open .drawer__foot {
    opacity: 1;
    transform: translateY(0);
}

.drawer.is-open .drawer__item:nth-child(1) {
    transition-delay: 0.15s;
}

.drawer.is-open .drawer__item:nth-child(2) {
    transition-delay: 0.21s;
}

.drawer.is-open .drawer__item:nth-child(3) {
    transition-delay: 0.27s;
}

.drawer.is-open .drawer__item:nth-child(4) {
    transition-delay: 0.33s;
}

.drawer.is-open .drawer__item:nth-child(5) {
    transition-delay: 0.39s;
}

.drawer.is-open .drawer__item:nth-child(6) {
    transition-delay: 0.45s;
}

.drawer.is-open .drawer__foot {
    transition-delay: 0.53s;
}

@media (prefers-reduced-motion: reduce) {

    .drawer,
    .drawer.is-open {
        transition: visibility 0s linear;
    }

    .drawer__item,
    .drawer__foot,
    .drawer.is-open .drawer__item,
    .drawer.is-open .drawer__foot {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

/* ※ 以前は justify-content: space-between で電話ブロックを
     画面下端まで押し下げていたが、端末の高さで
     間隔が変わってしまうのでやめた。
     現在はナビの直下に続け、間隔は .drawer__foot の
     margin-top だけで取る。
   ※ フォームボタンを廃止し、電話番号の1ブロックだけにした。
   左寄せだと広い余白の中で孤立して見えるので中央に置く。
   ※ width: fit-content を併用するのは、ブロックのままだと
     リンク領域が横幅いっぱいに広がるため。 */
.drawer__tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    color: var(--color-text-inverse);
    transition: opacity var(--transition);
}

.drawer__tel:is(:hover, :active) {
    opacity: 0.7;
}

.drawer__tel-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: rgba(245, 244, 242, 0.6);
}

.drawer__tel-num {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-en);
    font-size: 1.25rem;
    letter-spacing: 0.06em;
}

/* 電話アイコン（共通CTA の .cta-box__icon と同じ素材）。
   ※ 番号の文字サイズに揃えたいので rem ではなく em で持たせる。 */
.drawer__tel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.drawer__tel-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 電話番号の下の注意書き。
   ※ ※重要※ .drawer__tel（a）の外、.drawer__foot の直下に置く。
     a の中に入れると発信のタップ領域に含まれ、
     注意書きを押しても電話が発信されてしまう。
   ※ 共通CTA の .cta-notice__text（営業目的のお電話はご遠慮ください）
     と同じ性格の文言。サイズも揃えて 0.75rem。
   ※ 濃さはラベル（.drawer__tel-label の 0.6）より一段落とす。
     導線本体より目立たせないため。
   ※ リンクのホバー（opacity 0.7）には連動しない。
     外に出してあるので、ここだけ濃さが固定される。 */
.drawer__tel-note {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    line-height: 1.8;
    text-align: center;
    color: rgba(245, 244, 242, 0.5);
}

/* ── 576px以上：中身を一段大きく戻す ──
   ※ ベース（〜575px）を一段小さくしてあるので、
     ここで本来の大きさに戻す。
     狭い端末では項目6つ＋電話ブロックが縦に並ぶので、
     元のサイズだと画面を使い切って窐屈に見える。
   ※ ※重要※ max-width は使わない（サイトの方針）。
     ベースを小さい値で持ち、min-width で戻す形にしている。
   ※ 値を変えるときはベース側とセットで見直すこと。
       .drawer__link            padding  0.9375rem → 1.125rem
       .drawer__link-en         17px → 18px / min-width 7 → 7.5rem
       .drawer__link-ja         12px → 13px
       .drawer__link-arrow      10px → 11px
       .drawer__tel-num         20px → 22px */
@media (min-width: 576px) {
    .drawer__link {
        padding: 1.125rem 0.25rem;
    }

    .drawer__link-en {
        font-size: 1.125rem;
        min-width: 7.5rem;
    }

    .drawer__link-ja {
        font-size: 0.8125rem;
    }

    .drawer__link-arrow {
        width: 0.6875rem;
        height: 0.6875rem;
    }

    .drawer__tel-num {
        font-size: 1.375rem;
    }
}

/* ※ 全画面表示に変えたので、背景を暗くするオーバーレイは不要。
     メニューが画面全体を覆うため、見えないうえに
     クリックを奪ってリンクを押せなくなる。
   ※ HTML（header-nav.php）と JS（animation.js）は触らず、
     表示だけを止めてある。要素ごと消す場合は
     .drawer-overlay の div と overlay 関連の処理をあわせて削除する。 */
.drawer-overlay {
    display: none;
}

/* ================================================================
   下層ページヒーロー
================================================================ */

.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* ※ 20rem = 320px（html の font-size は 16px 固定）。
       ※ 以前はベース 15rem（240px）、768px以上で 22.5rem（360px）の
         2段階だった。全幅で 320px に揃えたので上書きを外してある。
         広い画面でもう一段高くしたい場合は
         @media (min-width: 768px) の上書きを戻す。
       ※ 1024px以上では中身の実高さ（ヘッダー分 5.75rem ＋
         __inner の上下パディング 4rem×2 ＋ 見出し）が
         290px 前後になるので、320px との差はわずか。
         見出しが2行になるページでは下限を超えて伸びる。 */
    min-height: 400px;
    padding-top: var(--header-height);
    padding-inline: var(--section-pad-x);
    background-color: var(--color-bg);
    overflow: hidden;
}

@media (min-width: 576px) {
    .page-hero {
        min-height: 480px;
    }
}

@media (min-width: 1024px) {
    .page-hero {
        min-height: 600px;
    }
}

@media (min-width: 1440px) {
    .page-hero {
        min-height: 720px;
    }
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(var(--page-hero-grayscale));
}

/* グラデーションオーバーレイ。
   ※ 色は #0D0D0D（--color-bg）。
     濃さの段階（上端 0.3 → 中間 0.5 → 下端 0.7）は page-hero 固有の値。
   ※ 見出しは .page-hero__inner が z-index: 1 を持つので、
     このオーバー（z-index: auto）より必ず上に乗る。
   ※ 濃さを変えるときは下の3つのアルファ値だけを触る。 */
.page-hero::after {
    --hero-overlay-top: 0.3;
    --hero-overlay-mid: 0.5;
    --hero-overlay-bottom: 0.7;

    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom,
        rgba(13, 13, 13, var(--hero-overlay-top)) 0%,
        rgba(13, 13, 13, var(--hero-overlay-mid)) 50%,
        rgba(13, 13, 13, var(--hero-overlay-bottom)) 100%);
    pointer-events: none;
}

/* ※ 幅の上限は持たない。
     以前は .section__inner と同じ3段階の max-width
     （576 → 800 → 1320）を持っていたが、見出しを画面幅いっぱいに
     広げる方針に変えたため外してある。
   ※ 左右余白は親（.page-hero）の padding-inline: var(--section-pad-x) が持つ。
     ※重要※ ここに padding-inline を書かないこと。
     親の分と二重になって左右余白が倍（1200px以上で 8rem）になる。
     「余白は外側、幅の上限は内側」という
     .section / .section__inner と同じ役割分担に揃えてある。
   ※ margin-inline: auto も不要になったので外してある
     （上限が無ければ中央寄せの意味がない）。
   ※ 本文セクションと左右を揃え直したくなったときは、
     max-width: var(--section-width-sm) と margin-inline: auto を戻し、
     768px（800）・1024px（1320）の段階も併せて復活させる。 */
/* 英字ラベル（ウォーターマーク）を入れる flex コンテナ。
   ※ FVのロゴ（.fv__inner）と同じ位置――
     セクションの左下――に揃える。
   ※ 日本語タイトル（.page-hero__title）はこの中にあるが
     position: absolute でフローから外れているので、
     この flex には実質ラベル1つだけが乗る。 */
.page-hero__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-inline: var(--section-pad-x);
    padding-block: var(--spacing-lg);
    gap: var(--spacing-md);
}

@media (min-width: 1024px) {
    .page-hero__inner {
        padding-block: var(--spacing-xl);
    }
}

/* 英字ラベル：大きなウォーターマークとして左下に表示。
   ※ FVのロゴと同じ位置（セクションの左下）に揃えてある。
   ※ 書体はトップの英字大見出しと同じ --font-en-display（Orbitron）。
     recruit の .recruit-entry__watermark と同じ考え方。
   ※ 濃さは白12%。装飾なので薄く、読み上げの主役は
     日本語タイトル（h1）に譲る。
   ※ クリックと選択を奪わない（装飾のため）。
   ※ 狭い画面でタイトルと重なっても良いよう、
     flex-shrink で縮むようにしてある（改行はさせない）。 */
.page-hero__label {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-en-display);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 700;
    letter-spacing: var(--display-letter-spacing);
    line-height: 1;
    text-transform: uppercase;
    color: rgba(245, 244, 242, 0.24);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    /* ※ FVのロゴ（.fv__logo-img）と同じフェードアップ。
         色の不透明度（rgba の 0.12）とは別に、
         要素自体の opacity を 0 → 1 で動かす。
         到達点の opacity: 1 でも、色のアルファが 0.12 なので
         見た目は変わらない。
       ※ 遅延は 0.3s。FVのようなキャッチコピーの完了待ちはないので、
         ページ読み込み後すぐに立ち上がる。 */
    opacity: 0;
    animation: heroLabelFadeUp 0.9s ease 0.3s forwards;
}

@keyframes heroLabelFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero__label {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

@media (min-width: 768px) {
    .page-hero__label {
        font-size: clamp(2.25rem, 6vw, 6rem);
    }
}

/* 日本語タイトル：ページ全体の上下左右中央に絶対配置。
   ※ 基準は .page-hero（position: relative）。__inner の
     flex 配置（ラベルの右寄せ）とは独立させる。
   ※ 以前より一段大きく。英字ウォーターマークを背景寄りに
     退がらせた分、こちらを本文の主役として引き上げてある。 */
.page-hero__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    white-space: nowrap;
    font-size: 2rem;
    letter-spacing: 0.12em;
    color: var(--color-text-inverse);
}

@media (min-width: 576px) {
    .page-hero__title {
        font-size: 2.25rem;
    }
}

@media (min-width: 768px) {
    .page-hero__title {
        font-size: 2.75rem;
    }
}

@media (min-width: 1200px) {
    .page-hero__title {
        font-size: 3rem;
    }
}

@media (min-width: 1440px) {
    .page-hero__title {
        font-size: 3.25rem;
    }
}

/* ================================================================
   パンくずリスト
================================================================ */

.breadcrumb {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg);
    padding-inline: var(--section-pad-x);
}

/* ※ 幅の上限は持たない（ページヒーローと同じ方針）。
     左右余白は親（.breadcrumb）の padding-inline が持つ。
   ※ ※重要※ ここに padding-inline を書かないこと。親の分と
     二重になって左右余白が倍になる。
   ※ ヒーローとセットで扱うこと。片方だけ幅の上限を戻すと、
     見出しとパンくずの左端がズレる。 */
.breadcrumb__inner {
    width: 100%;
    padding-block: 0.875rem;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

/* 項目。リンク（または現在ページ）と区切り記号を横並びにする。
   ※ 以前は block のまま中身を inline で流していたが、
     左にマークを置くと縦位置が揃わないため flex にした。 */
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
}

/* ※ 区切り記号は文字なので --color-border（白14%）だと薄すぎる。
     罫線と違って面ではなくグリフで見せるため、
     項目名より一段落とした程度の濃さにする。
   ※ margin-left はマークとテキストの gap（0.4375rem）より広く取る。
     内側（マーク～テキスト）より外側（項目間）を広くしないと、
     マークが隣の項目に属して見えて読みにくくなる。 */
.breadcrumb__item:not(:last-child)::after {
    content: '<';
    margin-left: 0.625rem;
    color: rgba(245, 244, 242, 0.35);
}

/* マーク＋テキストを1単位に見せる */
.breadcrumb__link,
.breadcrumb__current {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.breadcrumb__link {
    transition: color var(--transition);
}

/* ※ 暗転前は墨黒（--color-primary）で「濃くして強調する」
     表現だった。黒地では最も明るい色が同じ役割を担うので
     白に反転する。地の文字は --color-text-light なので、
     白にすることで濃淡の関係がそのまま保たれる。 */
.breadcrumb__link:is(:hover, :active) {
    color: var(--color-title);
}

.breadcrumb__current {
    color: var(--color-title);
}

/* パンくず内の装飾マーク。
   形は上の .c-mark-*（共通装飾マーク）が持つ。
   ここでは背景に合わせた色だけを上書きする。
   ※ 暗転後は .c-mark-* の既定（白系）と同じ土俵なので、
     上書きは濃淡の調整だけの役割になっている。
   ※ 濃淡を2階調で見せるマーク（三角2つ・帯2本・L字）は
     --mark-ink（濃）/ --mark-ink-sub（淡）の2変数で決まるので、
     色を調整するときはこの2行だけを直せば全マークに効く。
   ※ 外形（--mark-size 系）は変更しないこと。
     各マークは「外形から隙間を引いた残りが整数pxになる」値で
     設計されているため、ここで縮めると帯やマスが端数になって
     輪郭がにじむ（例：帯3本を 8px にすると 1.333px）。
   ※ --mark-ink-sub は、暗背景版の既定と同じ 0.35 に揃えている。
     暗転前は白地用に墨黒の30%（rgba(13,13,13,0.3)）を
     入れていたが、黒地では淡い側が完全に消える。
     濃淡の差を強めたい・弱めたいときはこのアルファ値を触る。

   ── 以下は暗転前（白背景時）の設計メモ。参考として残す ──
   ※ .c-mark-* の既定色は暗背景用の白系なので、
     この上書きがないと白地に白で見えなくなる。
   ※ 濃淡を2階調で見せるマーク（三角2つ・帯2本・L字）は
     --mark-ink（濃）/ --mark-ink-sub（淡）の2変数で決まるので、
     色を調整するときはこの2行だけを触れば全マークに効く。
   ※ 外形（--mark-size 系）は変更しないこと。
     各マークは「外形から隙間を引いた残りが整数pxになる」値で
     設計されているため、ここで縮めると帯やマスが端数になって
     輪郭がにじむ（例：帯3本を 8px にすると 1.333px）。
     パンくずの文字は 0.75rem(12px) でマークは 10px なので、
     フッターのナビ見出し（13px : 10px）とほぼ同じ比率に収まる。 */
/* ※ --mark-ink-sub に --color-border（#DEDCD8）を当てると、
     白地では淡い側がほぼ見えなくなる。
     暗背景版の 0.85 / 0.35 と同じくらいの濃淡比になるよう、
     墨黒の 30% を使う（白地でおよそ #B3B3B3 相当）。
     濃淡の差を強めたい・弱めたいときはこのアルファ値を触る。 */
.breadcrumb__mark {
    --mark-ink: var(--color-text-light);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);

    transition: background-color var(--transition), border-color var(--transition);
}

/* 現在ページのマークは濃くする。
   ※ テキスト側が --color-text-light → --color-primary で
     濃淡をつけているので、マークもそれに追従させる。 */
.breadcrumb__current .breadcrumb__mark {
    --mark-ink: var(--color-title);
}

.breadcrumb__link:is(:hover, :active) .breadcrumb__mark {
    --mark-ink: var(--color-title);
}

/* ================================================================
   ページ下部の背景ブロック（.page-bottom）
   共通CTA（includes/contact.php）とフッターを1枚の写真で包む。

   ※ 開始タグは includes/contact.php、閉じタグは includes/footer.php。
     CTAを読み込まないページ（contact.php 等）では footer.php が
     自前で開くので、どのページでも必ず対になる。

   ※ 中身（.sec-cta / .footer）の背景色は下で透明にしている。
     どちらも黒ベタを持っていたので、そのままだと写真が完全に隠れる。

   ※ 写真とオーバーレイは疑似要素で敷く。要素を増やさずに済み、
     includes 側のマークアップが div 1つで済む。
   ※ isolation: isolate で z-index を閉じ込める。これが無いと
     中身の z-index: 1 がページ全体のスタッキング文脈に出て、
     他の固定要素との前後関係に影響しうる。
================================================================ */

.page-bottom {
    position: relative;
    isolation: isolate;
    /* ※ ※重要※ 地色を敷いておく。
         写真（::before）とオーバーレイ（::after）は
         どちらも inset: 0 の絶対配置なので、
         画面を縮小したときなどに坐標が端数になると
         オーバーレイの上端が 1px 足りず、
         そこだけ写真が細く視いて白っぽい線に見える。
         直前のセクションとの境目で目立つ。
       ※ 値はオーバーレイの基色（#0D0D0D）と同じ。
         隙が出ても同色なので見えない。
       ※ --color-bg を変えたときはここも合わせること
         （下の ::after の rgba とセット）。 */
    background-color: var(--color-bg);
}

/* 背景写真。
   ※ グレースケール量は他の背景写真（採用・ページヒーロー）と
     同じ --photo-grayscale-bg を参照する。 */
.page-bottom::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/bottom-bg.webp');
    background-size: cover;
    background-position: center;
    filter: grayscale(var(--photo-grayscale-bg));
}

/* 上から下へ濃くなるオーバーレイ。
   ※ 下へ行くほど濃くするのは、フッターに小さい文字が
     集中するため。上（CTA）は写真を見せ、
     下（フッター）は読みやすさを優先する。
   ※ 基色は #0D0D0D（--color-bg と同値）。
     最上端を不透明にして、直前のセクションと地続きに見せる。
     ※ ※重要※ #111111（--color-bg-raise）ではないこと。
       トップの新着情報（.index-news）はベタ塗りではなく
       #111111 → #0D0D0D の上下グラデーションなので、
       CTA と接する下端は #0D0D0D まで落ち切っている。
       #111111 にすると4階調明るい板が突然始まる形になり、
       境目が線として残る。
     ※ 下層ページで CTA の直前に来るセクションもたいてい
       --color-bg なので、#0D0D0D なら全ページで継ぎ目が消える。
     ※ --color-bg を変えたときはここの rgba も直すこと
       （rgba は数値でしか書けないため参照できない）。
   ※ 最上端（0%）は不透明。そこから 10% で 0.35 まで開き、
     写真が現れる。10% を詰めると継ぎ目が固くなり、
     伸ばすと写真の見える範囲が減る。
   ※ 濃さを変えるときは下の4つのアルファ値だけを触る。
     採用セクション（.index-recruit__overlay）と同じ持ち方。 */
.page-bottom::after {
    --bottom-overlay-1: 1;
    /* 最上端：直前のセクションとの継ぎ目 */
    --bottom-overlay-2: 0.35;
    /* 10%地点：CTAの頭 */
    --bottom-overlay-3: 0.7;
    /* 60%地点 */
    --bottom-overlay-4: 0.9;
    /* 下端：コピーライト */

    content: '';
    position: absolute;
    inset: 0;
    /* 上端だけ 1px 外へ出す。
       ※ ズーム（画面の拡大・縮小）時にサブピクセル丸めで、
         この ::after の上端が写真（::before）の上端より 1px 下がり、
         そこだけ写真が細く覗いて白っぽい線に見える。
         上端を -1px にして写真の上端を必ず覆う。
       ※ 最上端（--bottom-overlay-1）は不透明の #0D0D0D なので、
         直前のセクションへ 1px はみ出しても地色と同色で見えない。 */
    top: -1px;
    background: linear-gradient(to bottom,
        rgba(13, 13, 13, var(--bottom-overlay-1)) 0%,
        rgba(13, 13, 13, var(--bottom-overlay-2)) 10%,
        rgba(13, 13, 13, var(--bottom-overlay-3)) 60%,
        rgba(13, 13, 13, var(--bottom-overlay-4)) 100%);
}

/* 中身は写真より前面に置く。
   ※ 疑似要素に z-index を持たせていないので、
     こちらに z-index: 1 を与えるだけで前後が決まる。 */
.page-bottom>* {
    position: relative;
    z-index: 1;
}

/* ================================================================
   共通CTAセクション（includes/contact.php）
================================================================ */

/* ※ 背景色は .page-bottom の写真に譲る。
     以前は --color-bg-dark（純黒）を塗っていたので、
     残していると写真が完全に隠れる。 */
.sec-cta {
    background-color: transparent;
    color: var(--color-text-inverse);
    padding-block: var(--spacing-xxl);
    padding-inline: var(--section-pad-x);
}

@media (min-width: 768px) {
    .sec-cta {
        padding-block: var(--spacing-3xl);
    }
}

.sec-cta__inner {
    width: 100%;
    max-width: var(--section-width-sm);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .sec-cta__inner {
        max-width: var(--section-width-content);
    }
}

@media (min-width: 1024px) {
    .sec-cta__inner {
        max-width: var(--section-width-lg);
    }
}

/* ── 2グループ構成（Direct Contact / Mail Contact） ── */
/* ── セクション見出し（中央）──
   ※ 下の2グループが左右均等なので、見出しも中央に置いて
     軸を揃える。施工実績（.index-works__head）と同じ扱い。
   ※ .section-head__label は flex なので、text-align だけでは
     中央に来ない。justify-content で揃える。
   ※ 帯アニメの帯は width: fit-content で内容幅になるため、
     margin-inline: auto で中央に戻す必要がある。 */
.sec-cta__head {
    text-align: center;
}

.sec-cta .sec-cta__head .section-head__label {
    /* 外形を --mark-size-solid（8px）から --mark-size（10px）へ上げる。
       ※ 枠線は 2px のままなので、中央の穴が 4px → 6px に広がる。
       ※ 穴だけを広げようと枠線を細くすると、フッター・ドロワーの
         Contact（2px）と太さが揃わなくなるので、外形側を変える。
       ※ 共通の .c-mark-frame（枠だけの正方形）も --mark-size を使うので、
         これでそちらやフッターの Contact（--footer-mark: 0.625rem）と
         同寸になる。
       ※ 外形は整数pxを保つこと。端数にすると枠線がにじむ。 */
    --label-mark: var(--mark-size);

    justify-content: center;
}

/* 英字見出し。
   ※ 大きさはトップの Philosophy / Strengths / Recruit / News と揃えてある。
     向こうの定義は index.css の「英字見出しの大きさ」ブロック。
     値を変えるときは必ず両方をセットで直すこと。
       ベース      32〜42px
       1024px以上  42〜60px
     ※ SPで下限を 3rem にしないのは、Orbitron の字幅が広く
       狭い端末で折り返すため（Contact は7文字だが、
       揃え先の Philosophy に合わせている）。
   ※ 帯アニメの帯は width: fit-content で内容幅になるため、
     margin-inline: auto で中央に戻す必要がある。 */
.sec-cta__head .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .sec-cta__head .section-head__title {
        font-size: clamp(2.625rem, 4.2vw, 3.75rem);
    }
}

/* ラベル左右の装飾：枠だけの正方形（中央が穴）。
   ※ Contact の目印として、ヘッダー・ドロワー・フッターの
     Contact と揃える。共通の既定（塗りつぶし正方形）を上書きする。
   ※ 見出しが中央揃えなので、左だけに装飾があると
     文字の中心と装飾込みの中心がずれる。右（::after）にも
     同じ形を置いて左右対称にする。
     施工実績（.index-works__head）と同じ扱い。
   ※ ::after には共通側の content もサイズ指定も無いので、
     ここで一式与える。外形は親が持つ --label-mark。
   ※ border で描くので background-color は消す。
     これがないと中央の穴が埋まる。
   ※ 共通側はこの装飾を scale(0) → scale(1) で弾けさせる。
     ::before / ::after の両方が対象なので、ここで
     transform を上書きしないこと。 */
.sec-cta .sec-cta__head .section-head__label::before,
.sec-cta .sec-cta__head .section-head__label::after {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image: none;
    border: 2px solid rgba(245, 244, 242, 0.66);
}

/* ※ 以前はここで右の装飾（::after）に弾ける動きを
     個別に足していたが削除した。
     共通側（.section-head.js-reveal .section-head__label::before, ::after）
     が両方を対象にするようになったため。
   ※ 施工実績・事業内容の左右対称な装飾も同じ共通側で動く。 */

.sec-cta__groups {
    display: grid;
    gap: var(--spacing-lg);
    max-width: var(--section-width-sm);
    margin-inline: auto;
}

/* グループ全体がリンク。
   ※ カードの面（.cta-box の background-color）を外したので、
     グループの範囲はこの枠線で示す。
   ※ ※重要※ ここに padding を持たせないこと。
     見出し（__title）の下線を枠の全幅に伸ばすため、
     内側の余白は __title と __boxes がそれぞれ持つ。
     ここで持つと下線が左右 1.5rem 分短くなる。
     （上下も同様。上は __title、下は最後の .cta-box が持つ）
   ※ ホバーは枠線の色だけを上げる（下の :hover 参照）。
     面は塗らない方針なので transition も border-color だけ。 */
.cta-group {
    display: block;
    border: 1px solid var(--color-border);
    color: inherit;
    transition: border-color var(--transition);
}

@media (min-width: 768px) {
    .sec-cta__groups {
        /* 左（電話・FAX）：右（メールフォーム）＝1 : 1。
           ※ 以前は 1.1fr 1fr で左を少し広くしていたが、
             2つの境目が画面の中央からずれるため均等にした。 */
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
        max-width: none;
        /* 左右のグループを同じ高さに揃える */
        align-items: stretch;
    }

    .cta-group {
        display: flex;
        flex-direction: column;
    }

    /* 見出しの下をボックスで埋める */
    .cta-group__boxes {
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .sec-cta__groups {
        gap: var(--spacing-lg);
    }
}

/* グループ見出し左の装飾。
   ※ 1つ目（Direct Contact）：真ん中に穴のある正方形。
     2つ目（Mail Contact）：縦線3本を横並びにした正方形。
   ※ 共通の寸法は --cta-mark。 */
.cta-group__title {
    --cta-mark: 0.625rem;
    /* 装飾全体の一辺 */

    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: rgba(245, 244, 242, 0.7);
    /* ※ 上・左右の余白はここが持つ（親の .cta-group は無し）。
         下線（border-bottom）を枠の全幅に伸ばすため。
         親側で余白を持つと線が左右 1.5rem 分短くなる。
       ※ margin-bottom は 0。線の下の間隔は
         最初の .cta-box が持つ上余白（1.25rem）に任せる。 */
    padding: 1rem var(--spacing-sm);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border-dark);
    transition: color var(--transition);
}

/* 見出しをリンクにする場合（左の Direct Contact）。
   ※ p と同じ見た目に揃える。a は既定で inline なので、
     上の flex 指定を効かせるにはここで幅を与える。 */
.cta-group__title--link {
    width: 100%;
}

.cta-group__title::before {
    content: '';
    width: var(--cta-mark);
    height: var(--cta-mark);
    flex-shrink: 0;
    line-height: 1;
}

/* 1つ目：枠だけの正方形（中央が穴） */
.cta-group:nth-child(1) .cta-group__title::before {
    border: 2px solid rgba(245, 244, 242, 0.66);
}

/* 2つ目：封筒。塗りつぶしの正方形の上半分に、
   頂点が下を向いた三角形（フラップ）を明るい色で乗せる。
   ※ 下地は background-color（0.35）、
     三角形は背景グラデーション2枚（0.85）。
     上半分を左右に2分割し（background-size: 50% 50%）、
     それぞれのタイルを対角線で半分に塗ると、
     2枚合わせて「上辺が底・中央が頂点」の三角形になる。
   ※ 濃淡の2階調で形を見せるのは、
     フッターの Service マーク（対角分割の三角形2つ）と同じ手法。
     0.85 と 0.35 もそちらに揃えてある。
   ※ ※重要※ この装飾は必ず正方形にすること。
     to top right などの方向指定は、ボックスが正方形のときだけ
     分割線が角と角を正確に結ぶ。
     以前は横長（12×9px）にしていたため分割線が角からずれ、
     さらに細い斜線2本で描いていたので形が潰れていた。
   ※ 大きさは --cta-mark だけで決まる（width / height 共用）。 */
.cta-group:nth-child(2) .cta-group__title {
    --cta-mark: 0.75rem;
}

.cta-group:nth-child(2) .cta-group__title::before {
    background-color: rgba(245, 244, 242, 0.35);
    background-image:
        linear-gradient(to top right, transparent 50%, rgba(245, 244, 242, 0.85) 50%),
        linear-gradient(to top left, transparent 50%, rgba(245, 244, 242, 0.85) 50%);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position:
        left top,
        right top;
}

/* 矢印は見出しの色に追従させる（形は共通定義） */
.cta-group__title-arrow {
    margin-left: auto;
}

/* グループをホバーしたときの演出 */
.cta-group:is(:hover, :active) .cta-group__title-arrow {
    transform: rotate(45deg) translate(2px, -2px);
}

.cta-group:is(:hover, :active) .cta-group__title {
    color: var(--color-text-inverse);
}

/* ホバーは枠線を一段明るくする。
   ※ 面を塗らない代わりの反応。平時 0.15 → ホバー 0.3 の2倍。
     1px の枠なので、この幅でも変化は十分に伝わる。
     強めたい場合は 0.3 を上げる。
   ※ ※重要※ 基色は平時の --color-border（rgba(255,255,255,0.15)）と
     揃えて純白。オフホワイト（245,244,242）と混ぜると、
     不透明度を上げたときに色味がわずかに転ぶ。 */
.cta-group:is(:hover, :active) {
    border-color: rgba(255, 255, 255, 0.3);
}

.cta-group__boxes {
    display: flex;
    flex-direction: column;
    /* ※ 左右の余白はここが持つ。上の __title と同値にして
         見出しと中身の左端を揃える。
       ※ 上下は持たない。各 .cta-box の padding-block が担う。
       ※ TEL / FAX 間の区切り線はこの内側に収まるので、
         見出しの全幅の線とは長さが変わる。
         「見出しの仕切りは全幅 / 内側の区切りは短く」という
         階層を意図している。揃えたい場合はここの
         padding-inline を外し、各 .cta-box 側に移す。 */
    padding-inline: var(--spacing-sm);
}

/* TEL / FAX は隔間を開けず、区切り線で一括りに見せる
   ※ 区切り線は「同じ性格の情報が並列で並ぶ」ことを示すもの。
     Mail Form と Notice は導線とその補足という主従関係なので、
     右グループだけ線を外して2枚を一つの面として見せる。 */
.cta-group__boxes--stack .cta-box+.cta-box {
    border-top: 1px solid var(--color-border);
}

/* ※ 上の説明にある「右グループだけ線を外す」指定は削除した。
     Mail Form と Notice の間にも、左グループ（TEL / FAX）と
     同じ区切り線を引く。左右で見た目が揃う。
   ※ 戻す場合はここに次の1本を書く。
         .cta-group:nth-child(2) .cta-group__boxes--stack .cta-box+.cta-box {
             border-top: none;
         } */

/* 2枚で高さを分け合う（右のフォームと揃えるため） */
@media (min-width: 768px) {
    .cta-group__boxes--stack .cta-box {
        flex: 1;
        justify-content: center;
    }
}

/* カードの面。
   ※ 塗らない。.page-bottom の背景写真をそのまま透かす。
     ホバーでも変えないので、transition からも
     background-color を外してある。
   ※ 以前は --color-surface（#282828）で一段浮かせていた。
     面を戻す場合は background-color: var(--color-surface); を
     ここに書き、transition にも background-color を戻す。
   ※ さらに以前（暗転前）は --color-text-inverse の白地だった。 */
.cta-box {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    /* ※ 左右は 0。内側の余白は親（.cta-group）の
         padding が一本で持つ。両方で持つと
         見出しとボックスの中身で左端がずれる。
       ※ 下の 1.5rem はグループの下余白を兼ねる。
         .cta-group 側の padding を変えるときはセットで見直すこと。 */
    padding-block: 1.25rem 1.5rem;
    text-align: left;
    color: var(--color-text);
    transition: transform var(--transition);
}

/* ※ 以前は右が1枚だったので height: 100% で左2枚分に伸ばしていたが、
     Notice を追加して両方とも2枚になったため不要になった。
     高さの分け合いは上の --stack 側の指定（flex: 1）が担う。 */

/* ※ カードの面はホバーでも変えない。
     反応は見出し（.cta-group__title）の色変化と矢印の移動が担う。
   ※ 以前は下の2本でカードの面を明るくしていた。
         .cta-box--tel:is(:hover, :active)      { background-color: ...; }
         .cta-group:is(:hover, :active) .cta-box { background-color: ...; }
     戻す場合は .cta-box 側の平時の面とセットで復活させること。
     平時が透明のままホバーだけ塗ると、触れた瞬間に
     面が出現して逆に目立つ。
   ※ 左グループは見出しと TEL が別リンクなので、
     復活させるときは必ず2本セットで扱うこと。
     片方だけだと触れる場所で反応が変わる。 */

.cta-box__en {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    /* ※ カードの面を外して背景写真の上に直接乗るので、
         固定色（--color-text-light ＝ #8E8B86）ではなく
         白の rgba で持つ。見出し（.cta-group__title）と同じ 0.7。
       ※ 基色はサイト共通のオフホワイト（245,244,242）。 */
    color: rgba(245, 244, 242, 0.7);
}

.cta-box__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cta-box__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.cta-box__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cta-box__body {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    flex: 1;
    min-width: 0;
}

.cta-box__label {
    font-family: var(--font-en);
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--color-title);
}

/* メールフォーム側は日本語なので本文フォント・小さめに */
.cta-box--form .cta-box__label {
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.cta-box__note {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(245, 244, 242, 0.7);
}

/* ■■ Notice（メールフォームの下）■■
   フォームの用途をチェックで示し、下に注意書きを置く。
   ※ カードが暗い地（--color-surface）になったので、
     マークは共通側の既定どおり白系を使う。
     淡い側（--mark-ink-sub）はカードの面色に合わせる。
     暗転前はこの2つが逆（濃＝墨黒 / 淡＝オフホワイト）だった。
   ※ 外形も共通の --mark-size（10px）だとチェックが枠に
     接してつぶれるため、ここだけ大きく取る。 */
.cta-notice__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cta-notice__item {
    --mark-size: 0.875rem;
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: var(--color-surface);

    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: var(--color-title);
}

/* 注意書き。上の項目とは性格が違うので、
   細い罫線で区切って一段落落とす。 */
.cta-notice__text {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1.8;
    color: rgba(245, 244, 242, 0.7);
}

/* ================================================================
   リードセクション（.sec-lead）
   下層ページの先頭ブロック。
   黒いL字の帯＋2カラム＋写真2枚のずらし重ね。
   現在の利用箇所：service.php のイントロ / recruit.php の Now Hiring。

   ※ ここに置いてあるのは「仕組み」だけ。
     色・マーク・列の比率・文言は各ページのCSSに持たせる。
     将来ページごとに構造が分かれたときは、
     そのページが .sec-lead を使うのをやめればよい。

   ※ 共通化してある理由は見た目を揃えるためではなく、
     帯の幅の計算が
         ・セクションの padding-inline: 0
         ・.section__inner の max-width: none
     の両方と連動していて、片方だけ戻すと帯と写真の
     位置がズレるため。この仕組みを複数ファイルに
     転記するのを避けたい。

   ※ トップの Philosophy（index.css の .index-about）は
     これを使っていない。あちらはロゴ装飾・写真の入れ替え
     アニメ・ボタンを持ち、セクションの役割も違うので
     意図的に別実装のままにしてある。

   使い方：
     <section class="section sec-lead js-band">
       <div class="section__inner">
         <div class="sec-lead__grid">
           <div class="sec-lead__body">
             <div class="section-head js-reveal">...</div>
             <p class="sec-lead__text">...</p>
           </div>
           <div class="sec-lead__figure">
             <img class="sec-lead__image sec-lead__image--01" ...>
             <img class="sec-lead__image sec-lead__image--02" ...>
             <img class="sec-lead__image sec-lead__image--02-front" ...>
           </div>
         </div>
       </div>
     </section>

   ※ ラベル装飾の色は各ページで白系に反転させること（帯が黒なため）。
   ※ .section--dark は付けない。共通側に背景色を塗られると
     帯のリビールが見えなくなる。
================================================================ */

.sec-lead {
    /* ── 帯（L字）の見た目を決める4つ ── */
    --lead-band-w: 100%;
    /* ※ 単位は必ず付けること（値がゼロでも）。
         下のL字の横棒が calc() の中で % と足し算するので、
         単位なしの 0 だと型エラーで calc 全体が無効になる。 */
    --lead-band-x: 0px;
    /* ※ 暗転前は白い地に対する黒帯だった。黒地では
         --color-bg-dark（純黒）だとページ背景（#0D0D0D）と
         ほぼ同色で帯が見えない。一段明るい面に置き換える。
       ※ ページ側で上書きしている場合はそちらが優先される
         （service.css は --black-6）。 */
    --lead-band-ink: var(--color-bg-light);
    --lead-band-dur: 1.6s;

    /* PCの2カラムの溝と比率。
       ※ 帯の幅（--lead-band-w）がこの2つを参照して写真の左端を
         割り出すので、グリッドと共用する。
       ※ --lead-col-div は左右の比の合計。1 : 1 なら 2。
         ページ側で上書きすれば、グリッドと帯の両方が同時に追従する。 */
    --lead-col-gap: var(--spacing-xl);
    --lead-col-div: 2;

    /* L字の横棒（下辺）。
       ※ 1023px以下は縦の帯が幅100%（＝1カラム）なので伸びる先がない。
         高さ0にして描かない。
       ※ delay は縦の帯が降り切る少し手前。0.2s 重ねることで、
         一筆でLを書いたように繋がる。 */
    --lead-band-foot-h: 0;
    --lead-band-foot-dur: 1s;
    --lead-band-foot-delay: calc(var(--lead-band-dur) - 0.2s);

    position: relative;
    /* 帯を画面外へ逃がしたときに横スクロールが出ないよう切り落とす。
       ※ overflow: hidden でなく clip にするのは、hidden が
         スクロールの入れ物を作り、アンカーへのスクロール位置が
         ずれることがあるため。 */
    overflow: clip;

    /* リビール前の下地。
       ※ 暗転前は「文字色と同じ値」にして、帯が届くまで
         文字を地に溶かしていた（白地に白文字）。
         全面暗転した今その値（#F5F4F2）をそのまま使うと、
         黒いページの中に真っ白な面が出て、帯が降りるまで
         そこだけ白く光る。下地はページ背景に合わせ、
         文字は白のまま出しておく。
       ※ この変更で「帯が届くまで文字が見えない」効果は失われる。
         文字を隠したい場合は、下で止めてある .js-reveal を
         .sec-lead 向けに復活させる方が筋がよい。
         下地の色で隠す方法は黒地では成立しない。 */
    background-color: var(--color-bg);
    color: var(--color-text-inverse);
}

/* PC（1024px〜）：本文と写真の2カラムになるので、
   帯を左半分に絞って本文カラムの台座にする。
   ※ SP・タブレットは1カラムなので幅100%。
     中途半端な幅にすると本文の途中に縦の境目が入って読みにくくなる。 */
@media (min-width: 1024px) {
    .sec-lead {
        /* ── このセクションだけの例外 ──
           左右のパディングをセクション側では持たず、
           本文ブロック（.sec-lead__body）に持たせる。
           ※ 写真を画面右端まで伸ばすため。 */
        padding-inline: 0;

        /* 縦棒の右端＝写真の左端。
           パディングが無いのでグリッド幅＝セクション幅。
           左カラム幅＋溝 をそのまま帯の幅にすればよい。
           ※ 末尾の 1px は丸め誤差対策。セクション幅が奇数pxのとき
             割り算に 0.5px の端数が出、帯の右端と写真の左端が
             逆方向に丸められて間に地色の筋が残る。
             1px 伸ばして写真の下に潜り込ませ、筋を消す。
           ※ ※重要※ 下の横帯（::after）の左端はこの値を参照して
             位置を決めている。ここを増やすと横帯も一緒に右へ動くので、
             角の重なりを保つため ::after の -2px と必ずセットで扱うこと。 */
        --lead-band-w: calc((100% - var(--lead-col-gap)) / var(--lead-col-div) + var(--lead-col-gap) + 1px);

        /* 横棒の上端＝写真の下端。
           写真は本文と同じ高さまで伸びているので、その下端は
           グリッドの下端（＝セクション内容領域の下端）と一致する。
           つまり横棒の高さをセクション下余白と同値にすれば、
           上端が写真の下端にぴったり揃う。
           ※ .section の padding-bottom（768px〜は --spacing-3xl）を
             変えたときはここも合わせること。 */
        --lead-band-foot-h: calc(var(--spacing-3xl) + 1px);
    }

    /* 左右の余白は本文ブロックが持つ。
       ※ 左は他セクションの本文左端と揃える。
       ※ 右は溝（--lead-col-gap）が分け目になるので不要。 */
    .sec-lead__body {
        padding-left: var(--section-pad-x);
    }

    /* 幅の上限を外すのは 1024px 以上だけ。
       ※ 帯の幅は「グリッド幅＝セクション幅」を前提に計算している。
         この前提は
           ・ここの max-width が none
           ・セクションの padding-inline が 0
         の両方が揃って初めて成立する。
         片方だけ戻すと帯と写真の位置がずれるので、必ずセットで扱うこと。 */
    .sec-lead .section__inner {
        max-width: none;
    }
}

/* ── 縦の帯 ──
   ※ 帯は最初から最終位置に置いておき、clip-path の下側だけを
     100% → 0% に戻して「開く」。transform で動かさないので、
     帯がセクション外へはみ出したりレイアウトを押し広げたりしない。
   ※ 開始の合図（.is-revealed）は .js-band を付けた要素に
     animation.js が付ける。HTML側は <section> に .js-band を足すだけ。 */
.sec-lead::before {
    /* ※ 帯の描画を止めてある（content を外すと疑似要素自体が生成されない）。
         ※ 幅の計算式（--lead-band-w）は 1024px 以上で写真を
           画面右端まで伸ばすレイアウトの前提になっているので
           残してある。変数ごと消さないこと。
         ※ 帯を戻すときは下の content を復活させる。下の ::after（横棒）と
           必ずセットで扱うこと。 */
    /* content: ''; */
    position: absolute;
    top: 0;
    left: var(--lead-band-x);
    width: var(--lead-band-w);
    height: 100%;
    background-color: var(--lead-band-ink);
    /* 初期状態：上端で潰して見えなくしておく */
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--lead-band-dur) cubic-bezier(0.4, 0, 0.1, 1);
    pointer-events: none;
}

.sec-lead.is-revealed::before {
    clip-path: inset(0 0 0 0);
}

/* ── L字の横棒（下辺）──
   縦の帯が降り切るのを待って、その足元から右へ伸びる。
   ※ 左端は縦帯の右端に合わせる（同色なので 1px 重ねて
     小数点誤差の継ぎ目を消している）。幅100%で左端から描くと、
     縦帯に隠れている間は伸びているのが見えず動きの前半が無駄になる。 */
.sec-lead::after {
    /* ※ 上の ::before（縦棒）と同じく描画を止めてある。
         戻すときは両方の content をセットで復活させること。 */
    /* content: ''; */
    position: absolute;
    bottom: 0;
    left: calc(var(--lead-band-x) + var(--lead-band-w) - 2px);
    right: 0;
    height: var(--lead-band-foot-h);
    background-color: var(--lead-band-ink);
    /* 初期状態：右端を左に寄せて見えなくしておく */
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--lead-band-foot-dur) cubic-bezier(0.4, 0, 0.1, 1) var(--lead-band-foot-delay);
    pointer-events: none;
}

.sec-lead.is-revealed::after {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {

    .sec-lead::before,
    .sec-lead::after {
        clip-path: inset(0 0 0 0);
        transition: none;
    }
}

/* 本文・写真は帯より前面に置く。
   ※ ::before / ::after に z-index を持たせていないので、
     こちらに z-index: 1 を与えるだけで前後が決まる。 */
.sec-lead .section__inner {
    position: relative;
    z-index: 1;
}

/* ── 帯の上に乗る文字を反転色にする ──
   ※ 濃度はトップの Philosophy・採用セクションと揃えてある。
     見出し 1／本文 0.8／ラベル 0.66。 */
/* ── 英字見出しの大きさ ──
   トップの Philosophy / Strengths / Recruit / News と揃えてある。
   向こうの定義は index.css の「英字見出しの大きさ」ブロック、
   共通CTA（Contact）はこのファイルの .sec-cta__head 側。
   値を変えるときは3箇所をセットで見直すこと。
     ベース      32〜42px
     1024px以上  42〜60px
   ※ 共通側の既定（.section-head__title）は 24〜30px → 768px以上 30〜40px。
     英字を見出しの主役にしている --swap のセクションでは
     小さいのでここで引き上げる。
   ※ 詳細度 0-2-0。共通の .section-head__title（0-1-0）より強いので、
     メディアクエリの順番に関係なく勝つ。 */
.sec-lead .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
    color: var(--color-text-inverse);
}

@media (min-width: 1024px) {
    .sec-lead .section-head__title {
        font-size: clamp(2.625rem, 4.2vw, 3.75rem);
    }
}

/* ── キャッチコピー ──
   ※ Philosophy（.index-about__catch）と同じ位置づけ。
     英字見出し（.section-head__title）より小さく、
     本文（.sec-lead__text）よりははっきり大きい中間の位置。
   ※ p なので h1〜 h6 の基本指定が届かない。
     書体とウェイトをここで補う。
   ※ 登場は .js-lines（行ごとのワイプ）。
     各行を .js-lines__line で包む必要がある。
     仕組みは下の .index-about__catch の登場ブロック（index.css）と同じ。 */
.sec-lead__catch {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--color-text-inverse);
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .sec-lead__catch {
        font-size: clamp(1.75rem, 3vw, 2rem);
    }
}

@media (min-width: 1024px) {
    .sec-lead__catch {
        font-size: clamp(1.625rem, 2.2vw, 2rem);
    }
}

.sec-lead__catch .js-lines__line {
    padding-block: 0;
    margin-block: 0;
}

@media (min-width: 576px) {
    .sec-lead__catch .js-lines__line {
        display: inline-block;
    }
}

/* ── キャッチコピーの登場（左→右のワイプ）──
   Philosophy（.index-about__catch）・採用（.index-recruit__catch）と
   同じ仕組み。仕組みの詳細は index.css の同名ブロックのコメントを参照。
   ※ .js-lines（検知対象）には clip-path を掛けず、
     内側の行（.js-lines__line）に掛ける。 */
.sec-lead__catch .js-lines__line {
    width: fit-content;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.sec-lead__catch.is-revealed .js-lines__line {
    clip-path: inset(0 0 0 0);
}

/* 2行目の待ち時間。ワイプと同じ 1.5sにしてあるので、
   1行目が開き切ってから2行目が動き始める。 */
.sec-lead__catch .js-lines__line:nth-child(2) {
    transition-delay: 1.5s;
}

.sec-lead__catch .js-lines__line {
    overflow: visible;
}

.sec-lead__catch .js-lines__line > span {
    transform: none;
    transition: none;
}

@media (min-width: 576px) {
    /* 行側のクリップを止め、ラッパー（.js-lines__inner）を
       一つの単位としてワイプする。閉じ・開き両方を
       打ち消す必要がある（is-revealed が付いた時に
       詳細度の高い方が inset を当てにくるため）。 */
    .sec-lead__catch .js-lines__line,
    .sec-lead__catch.is-revealed .js-lines__line {
        clip-path: none;
        transition: none;
    }

    /* ※ ※重要※ .js-lines__inner は span なので既定は inline。
         inline のままだと width: fit-content が効かず、
         clip-path の基準も安定しない（行が途中で切れる）。
         必ず block にすること。
       ※ index.css 側にも同名の定義があるが、あちらは
         トップ専用で .sec-lead を使う下層ページには届かない。 */
    .sec-lead__catch .js-lines__inner {
        display: block;
        width: fit-content;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .sec-lead__catch.is-revealed .js-lines__inner {
        clip-path: inset(0 0 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sec-lead__catch .js-lines__line,
    .sec-lead__catch.is-revealed .js-lines__line,
    .sec-lead__catch .js-lines__inner,
    .sec-lead__catch.is-revealed .js-lines__inner {
        clip-path: none;
        transition: none;
    }
}

.sec-lead__text {
    color: rgba(245, 244, 242, 0.8);
    margin-bottom: var(--spacing-sm);
}

.sec-lead__text:last-child {
    margin-bottom: 0;
}

/* ── 本文中のキーワード強調 ──
   ※ ウェイトを上げ、あわせて不透明度を1.0に戻す。
     本文は 400 / 不透明度 0.8 なので、濃さだけでも十分浮き立つ。
   ※ ウェイトは 500。400 から1段階だけ上げる。
     600 以上にすると強調が強く出すぎ、700 だと
     見出し（h2 = 700）と同じ重さになって階層が崩れる。
   ※ ※重要※ 色は必ず「本文と同じ基色の rgba」で持つこと。
     このセクションは帯が降りてくるまで文字が地に溶けて
     見えない前提で作ってある。別の色を当てると、
     強調部分だけ帯の前からうっすら見えてしまう。
     下の .sec-lead--light 側の注意書きも参照。 */
.sec-lead__text strong {
    font-weight: 500;
    color: rgba(245, 244, 242, 1);
}

/* ── 共通の見出し登場アニメを打ち消す ──
   帯と同時に文字が動くとお互いを打ち消すので、見出しは
   最初から表示しておき、帯が降りてくることで現れる形にする。

   ※ common.css の見出しアニメは4つの部品でできている。
     打ち消し損なうとそこだけ先に動くので、すべてに指定する。
       1. ラベル左の装飾（::before の scale）
       2. ラベルの帯（.section-head__label-text::after の maskSweep）
       3. ラベルの文字色（transparent → 本来の色）
       4. 見出しの帯と文字色
   ※ 3・4 は共通側で is-revealed 側にも指定があり、同値の詳細度で
     後勝ちする。is-revealed を含む形でも書かないと効かない。 */
/* ── 見出しの登場は共通側に任せる ──
   帯が左→右に横切り、その後を追って文字が現れる。
   トップの Philosophy や他セクションと同じ動き。

   ※ 以前はここで共通の登場アニメを打ち消していた。
     セクションにL字の帯が降りてくる演出があった頃の名残で、
     帯と文字が同時に動くとお互いを打ち消すため止めていた。
     その帯自体を廃止したので、打ち消す理由が無くなった。
   ※ 文字色だけは暗背景向けに白系で持つ。
     ※ ※重要※ 上書きは is-revealed 側だけにすること。
       基本側にも書くと共通の color: transparent を潰してしまい、
       帯が通る前から文字が見えてしまう。 */
.sec-lead .section-head.js-reveal.is-revealed .section-head__title {
    color: var(--color-text-inverse);
}

/* ラベル（日本語）も共通の登場アニメをそのまま使う。
   左の装飾が弾け → 帯が横切り → 文字が現れる。
   ※ 色だけは共通の既定（--color-text-light）ではなく、
     暗背景向けの白系に上書きする（濃度 0.66）。
   ※ ※重要※ 上書きは is-revealed 側だけにすること。
     基本側にも書くと共通の color: transparent を潰してしまい、
     帯が通る前から文字が見えてしまう。
   ※ transition は書かない。共通側の
     transition: color 0s linear 0.28s（帯の後に現れる遅延）を残す。 */
.sec-lead .section-head.js-reveal.is-revealed .section-head__label {
    color: rgba(245, 244, 242, 0.66);
}

/* 動きを減らす設定でも色は白系のままにする。
   ※ 共通側は --color-text-light（#8E8B86）に戻すので、
     そのままだと暗い地の上で沈む。 */
@media (prefers-reduced-motion: reduce) {
    .sec-lead .section-head.js-reveal .section-head__label {
        color: rgba(245, 244, 242, 0.66);
    }
}

/* ※ 左の装飾の弾ける動きと、ラベルの帯（maskSweep）も
     共通側に任せる。
     以前はここで
         .sec-lead .section-head.js-reveal .section-head__label::before
         .sec-lead .section-head.js-reveal .section-head__label-text::after
     の2本を使って止めていたが、帯の演出を廃止したので廃止した。
   ※ 左の装飾の色・形は各ページCSSの
     .page-* .sec-lead .section-head__label が持つ。
     そちらに background 系を書くときは transform を触らないこと。
     共通側が scale(0) → scale(1) で弾けさせている。 */

/* ── 2カラム ── */
.sec-lead__grid {
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
    .sec-lead__grid {
        /* ※ 1fr 0.85fr でなく計算で書いているのは、帯の幅
             （--lead-band-w）が同じ値を参照して写真の左端に
             吸い付くようにするため。fr は calc() の中で使えず、
             帯側から逆算できない。 */
        grid-template-columns: calc((100% - var(--lead-col-gap)) / var(--lead-col-div)) 1fr;
        gap: var(--lead-col-gap);
        /* 写真の高さを左のテキストブロックに合わせるため、
           center でなく stretch で行いっぱいに伸ばす。 */
        align-items: stretch;
    }
}

/* 以下、旧方式（ずらし重ね）の残骨。実際のセレクタは後方の
   .sec-lead__figure（display: grid）で完全に上書きされるので
   実害はないが、未使用変数にリネーム済み。 */
.sec-lead__figure-legacy-unused {

    /* 写真を内側へ寄せる量。
       ※ この値がそのまま、左上と右下に残る空白の正方形の一辺になる。
       ※ 必ず「長さ」で持つこと。% にすると縦は高さの何%、
         横は幅の何% となり、箱の縦横比のぶんだけ歪む。 */
    --lead-img-offset-unused: 3rem;

    /* 隅に残る正方形の色（写真の下地）。
       ※ 帯と同じ色を参照しているので、帯の色を変えれば追従する。 */
    --lead-figure-bg-unused: var(--lead-band-ink);

    position: relative;
    background-color: var(--lead-figure-bg-unused);
    /* 中身が絶対配置だけになるので、箱側に高さを持たせる。
       ※ 〜767px は 1 / 1（正方形）。 */
    aspect-ratio: 1 / 1;
}

/* タブレット（768〜1023px）：まだ1カラムなので箱がコンテナ幅
   いっぱいまで広がる。この帯域だけ横長にする。
   ※ 事業内容カード・強みセクションと同じ 4 / 3。 */
@media (min-width: 768px) {
    .sec-lead__figure-legacy-unused {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 1024px) {
    .sec-lead__figure-legacy-unused {
        /* 中身が絶対配置だけなので、本文が短いときの下限を保険で持たせる。 */
        min-height: 20rem;

        /* 箱が大きくなるので、隅の正方形も大きく取る。 */
        --lead-img-offset: 5rem;

        /* 768px以上で持たせた 4 / 3 を外し、
           高さはグリッドの stretch（＝左の本文の高さ）に任せる。
           ※ 比率が残っているとそちらが優先されて高さが合わない。 */
        aspect-ratio: auto;

        /* 写真だけセクションの上パディングを打ち消し、
           セクションの上端まで伸ばす。
           ※ 下は伸ばさない。下余白はL字の横棒
             （--lead-band-foot-h）が使う場所なので、埋めると
             帯が写真に重なる。
           ※ .section の padding-top（768px〜は --spacing-3xl）を
             変えたときはここも合わせること。 */
        margin-top: calc(var(--spacing-3xl) * -1);
    }
}

/* ── 写真2枚の重ね合わせ ──
   2枚とも常時表示。箱より少し小さくして、1枚目を右上に、
   2枚目を左下に寄せてずらして重ねる。
   ※ 寄せる量は --lead-img-offset。縦横とも同じ長さだけ
     内側へ寄せるので、左上と右下に残る空白がちょうど正方形になる。
   ※ 一定時間ごとの前後入れ替えも Philosophy と同じ仕組みで入れてある
     （下の --02-front と leadSwapFade を参照）。
     入れ替えを止めたいページは、HTML から --02-front の img を
     1行削るだけでよい（CSS は触らなくてよい）。 */
.sec-lead__figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.sec-lead__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(var(--photo-grayscale));
}

@media (min-width: 1024px) {
    .sec-lead__figure {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        height: 0;
        min-height: calc(100% + var(--spacing-3xl));
        margin-top: calc(var(--spacing-3xl) * -1);
        gap: var(--spacing-sm);
    }

    .sec-lead__image {
        height: auto;
        min-height: 0;
        align-self: stretch;
        aspect-ratio: auto;
    }
}

@media (min-width: 1600px) {
    .sec-lead__figure {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto;
    }
}

/* ── トリミングの基準位置 ──
   object-fit: cover で切り落とすときに、どこを残すかを決める。
   ※ 01 は箱の右上に寄せてあるので右端、
     02 は左下に寄せてあるので左端を基準にする。
     写真の寄りと切り抜きの向きが揃うので、
     2枚が外側へ開くような見え方になる。
   ※ トップの事業内容カード（.index-service__image）と同じ考え方。
   ※ 02-front は 02 の複製なので、必ず同じ値に揃えること。
     ずれていると入れ替わる瞬間に絵柄が跨んで見える。 */

/* 1枚目：右上基準・前面 */
.sec-lead__image--01-unused {
    top: 0;
    right: 0;
    z-index: 2;
    object-position: right center;
}

/* 2枚目：左下基準・背面 */
.sec-lead__image--02-unused {
    bottom: 0;
    left: 0;
    z-index: 1;
    object-position: left center;
}

/* 2枚目の複製：同じ位置に重ね、前面側（z-index: 3）に置く。
   これだけを不透明度で出し入れする。
   ※ Philosophy（.index-about__image--02-front）と同じ仕組み。
     z-index は中間の値を持てないので、直接動かすと必ずパッと
     切り替わる。同じ写真を1枚目の前と後に置き、前側の不透明度を
     動かすことで滑らかに見せている。
   ※ HTML 側に --02 と同じ src の img をもう1枚、
     .sec-lead__image--02-front として置くこと。
     同じファイルなので読み込みは増えない。 */
.sec-lead__image--02-front-unused {
    bottom: 0;
    left: 0;
    z-index: 3;
    opacity: 0;
    /* ※ 上の --02 と必ず同じ値にすること。 */
    object-position: left center;
}

/* 一定時間ごとに前後を入れ替える。
   ※ 起動の合図はセクション側（.js-band）の .is-revealed を使う。
     帯が降り始めるのと同じタイミングで切り替えが回り出す。
   ※ 周期は --lead-swap-dur（.sec-lead__figure が持つ）。
     半分ごとに入れ替わるので、10s なら 5秒ごとの切り替えになる。 */
.sec-lead.is-revealed .sec-lead__image--02-front-unused2 {
    animation: leadSwapFade var(--lead-swap-dur) ease-in-out infinite;
}

/* 前半は前面側を消して1枚目を手前に、後半は出して2枚目を手前に見せる。
   ※ 初期表示は1枚目（--01）。
     逆にしたい場合は 0/40% と 50/90% の値を入れ替える。
   ※ 切り替わりの長さは 40→50% と 90→100% の各区間。 */
@keyframes leadSwapFade {

    0%,
    40% {
        opacity: 0;
    }

    50%,
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 動きを減らす設定では切り替えない。
   ※ 前面側の複製は透明のままなので、1枚目が手前に固定される。 */
@media (prefers-reduced-motion: reduce) {
    .sec-lead.is-revealed .sec-lead__image--02-front-unused3 {
        animation: none;
    }
}

/* ── 本文カラムの右上に置くイラスト装飾（任意）──
   使い方：.sec-lead__body の先頭に置く。
     <div class="sec-lead__body">
       <img class="sec-lead__illust" src="..." alt="" aria-hidden="true">
       <div class="section-head">...</div>
       ...
     </div>

   ※ ※重要※ .section__inner の直下（セクションの右上）には置けない。
     そこは写真ブロック（.sec-lead__figure）が全高を占めているうえ、
     向こうは position: relative なので描画順で上に来てしまい、
     イラストが完全に隠れる。
     （position 指定あり・z-index: auto と z-index: 0 は同じ層に入り、
       DOM順で後のものが上に描かれる）
     トップの .index-service は右上が空白なので成立しているが、
     このレイアウトには空いている右上がない。

   ※ トップの Philosophy がロゴ装飾（.index-about__logo）を
     本文カラムの右上に置いているのと同じ手法。

   ※ 下の3つはセットで初めて成立する。片方だけ外すと壊れる。
       1. .sec-lead__body の position: relative（絶対配置の基準）
       2. .sec-lead__illust の z-index: 0
       3. 兄弟要素の z-index: 1（見出し・本文を前面に出す）
     この仕組みをページごとに転記しないためにここに置いている。

   ※ 大きさは --lead-illust-w。ページ側で上書きできる。
     既定は 96〜176px。トップの事業内容（120〜256px）より控えめ。
     本文カラムは 1024px 以上で半分幅なので、
     256px のままだと見出しを飲み込む。
   ※ 装飾なのでクリックと選択を奪わない。
   ※ イラストを置かないページでも害はない
     （position: relative と z-index だけなので見た目に影響しない）。 */
.sec-lead__body {
    position: relative;
}

.sec-lead__illust {
    --lead-illust-w: clamp(6rem, 16vw, 11rem);

    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: var(--lead-illust-w);
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* 見出し・本文をイラストより前面に出す。
   ※ 位置指定のないブロック子要素は、z-index: 0 の
     位置指定要素より先に描かれる（つまり下になる）。
     文字を上に出すには明示的に持ち上げる必要がある。
   ※ Philosophy の .index-about__body > *:not(.index-about__logo) と同じ。 */
.sec-lead__body>*:not(.sec-lead__illust) {
    position: relative;
    z-index: 1;
}

/* ================================================================
   .sec-lead--light（明るい背景バリエーション）
   ※ 帯をオフホワイトにし、文字を通常の暗色に戻す。
     recruit.php の Now Hiring で使う。

   ※ 下地（リビール前の背景）は文字色と同じ値にする。
     基本形と同じ考え方で、帯が届くまで文字は地に溶けて
     見えない。ここでは文字が墨黒なので、下地も墨黒になる。
     つまり「黒い面にオフホワイトの帯がL字に降りてきて、
     その上に黒文字が浮かび上がる」動きになる。

   ※ 写真の隅に残る正方形（--lead-figure-bg）は帯と同色を
     参照しているので、自動でオフホワイトになる。

   ※ ラベル装飾の色は各ページCSS側で暗色に戻すこと。
     基本形は白系に反転させる前提なので、
     --light を使うページはその上書きを外すか戻す必要がある。
================================================================ */

.sec-lead--light {
    --lead-band-ink: var(--color-bg-light);

    /* 下地と文字色をともに墨黒にする。 */
    /* ※ 暗転前は下地と文字色をともに墨黒にし、
         オフホワイトの帯の上に黒文字を浮かべていた。
         --color-title が白に反転したので、このままだと
         下地が真っ白になる。基本形と同じ扱いに揃える。
       ※ 帯だけが --color-bg-light で一段明るいので、
         基本形（同じ値）との違いは実質無くなっている。
         明るい面のバリエーションを戻すときは、
         ここと下の文字色3つをセットで戻すこと。 */
    background-color: var(--color-bg);
    color: var(--color-text-inverse);
}

.sec-lead--light .section-head__title,
.sec-lead--light .section-head.js-reveal .section-head__title,
.sec-lead--light .section-head.js-reveal.is-revealed .section-head__title {
    color: var(--color-title);
}

/* ※ ※重要※ 本文・ラベルの色は、必ず「下地と同じ色の rgba」で持つ。
     --color-text（#2B2B2B）や --color-text-light（#6E6E6E）のような
     別の色を当てると、下地（#0D0D0D）と差が出るため
     帯が降りてくる前から文字がうっすら見えてしまう。

     同じ色の rgba なら、下地の上では合成結果が下地そのままに
     なるので完全に溶けて消える。そのうえでオフホワイトの帯が
     背に入った瞬間に、アルファ分の濃淡がそのまま
     見出し1／本文 0.8／ラベル 0.66 の階層になる。

   ※ 基本形（黒帯）も同じ仕組みで、あちらは
     rgba(245, 244, 242, 0.8 / 0.66) を使っている。
     下地の色を変えるときはこの rgba の基色も必ず揃えること。
   ※ --color-title は #0D0D0D。値を変えたときは
     下の rgba の3つの数字も合わせる。 */
.sec-lead--light .sec-lead__text {
    color: rgba(245, 244, 242, 0.8);
}

/* 強調も下地（墨黒）と同じ基色の rgba で不透明に戻す。
   ※ 基形（黒帯）側は rgba(245, 244, 242, 1)。
     下地の色を変えるときはこちらの基色も必ず揃えること。 */
.sec-lead--light .sec-lead__text strong {
    color: rgba(245, 244, 242, 1);
}

.sec-lead--light .section-head__label,
.sec-lead--light .section-head.js-reveal .section-head__label,
.sec-lead--light .section-head.js-reveal.is-revealed .section-head__label {
    color: rgba(245, 244, 242, 0.66);
}

/* ================================================================
   フッター
================================================================ */

.footer {
    /* ※ 背景色は .page-bottom の写真に譲る（上のブロック参照）。
         以前は --color-primary-dark（純黒）。 */
    background-color: transparent;
    color: var(--color-text-inverse);
    padding-inline: var(--section-pad-x);
}

.footer__inner {
    width: 100%;
    max-width: var(--section-width-sm);
    margin-inline: auto;
    padding-block: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ※ 幅の段階は .section__inner に揃える。
     576 → 768以上：800 → 1024以上：1320。
     揃っていないと 768〜1023px で本文と左右がズレる。 */
@media (min-width: 768px) {
    .footer__inner {
        max-width: var(--section-width-content);
    }
}

@media (min-width: 1024px) {
    .footer__inner {
        max-width: var(--section-width-xl);
        padding-block: var(--spacing-xxl);
        /* 左（ブランド）：右（ナビ）= 4:6。
           ※ flex だと .footer__brand の max-width が効いて
             比率通りにならないため grid で固定する。 */
        display: grid;
        grid-template-columns: 4fr 6fr;
        gap: var(--spacing-xl);
    }
}

.footer__brand {
    max-width: 28rem;
}

/* 1024px以上はグリッドの比率を優先させるため上限を外す。
   ※ 上の .footer__brand より後ろに書かないと上書きされる。 */
@media (min-width: 1024px) {
    .footer__brand {
        max-width: none;
    }
}

.footer__logo {
    display: inline-block;
    margin-bottom: var(--spacing-sm);
}

.footer__logo-img {
    width: 160px;
    height: auto;
    /* ※ ヘッダー同様、黒背景用に白反転させる */
    filter: brightness(0) invert(1);
}

.footer__address {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__address-item {
    font-size: 0.8125rem;
    line-height: 1.8;
    color: rgba(245, 244, 242, 0.66);
}

.footer__address-label {
    display: inline-block;
    min-width: 3rem;
    margin-right: 0.5rem;
    padding: 0.0625rem 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-align: center;
    border: 1px solid var(--color-border-dark);
    color: rgba(245, 244, 242, 0.8);
}

.footer__nav-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

@media (min-width: 576px) {
    .footer__nav-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ※ 各見出しの左に、対応するセクションと同じ装飾を置く。
     Service = 三角2つ（対角分割）
     Company = 帯2本積み（上＝濃 / 下＝淡・隙間あり）
     Contact = 枠だけの正方形（中央が穴） */
.footer__nav-title {
    --footer-mark: 0.625rem;
    /* 装飾全体の一辺 */

    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--color-text-inverse);
    padding-bottom: 0.625rem;
    margin-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border-dark);
}

.footer__nav-title::before {
    content: '';
    width: var(--footer-mark);
    height: var(--footer-mark);
    flex-shrink: 0;
    line-height: 1;
}

/* Service：右上→左下の対角線で2分割した三角2つ */
.footer__nav-col:nth-child(1) .footer__nav-title::before {
    background-image:
        linear-gradient(to bottom right,
            transparent 50%,
            rgba(245, 244, 242, 0.85) 50%),
        linear-gradient(to top left,
            transparent 50%,
            rgba(245, 244, 242, 0.35) 50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Company：帯2本積み（上＝濃 / 下＝淡・隙間あり）
   ※ .c-mark-bars2-alt と同形。値を変えるときは両方を合わせること。
   ※ ここだけ外形を一段小さくする。
     帯2本は面積が大きいので、他の装飾と見た目の重さを揃える。
   ※ 色は --mark-ink（濃）/ --mark-ink-sub（淡）で持つ。 */
.footer__nav-col:nth-child(2) .footer__nav-title {
    --footer-mark: var(--mark-size-solid);
    --footer-bars-gap: 2px;
    --footer-bars-bar: calc((var(--mark-size-solid) - var(--footer-bars-gap)) / 2);
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

.footer__nav-col:nth-child(2) .footer__nav-title::before {
    background-image:
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink-sub) 0 0);
    background-size: 100% var(--footer-bars-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left bottom;
}

/* Contact：枠だけの正方形（中央が穴） */
.footer__nav-col:nth-child(3) .footer__nav-title::before {
    border: 2px solid rgba(245, 244, 242, 0.66);
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.footer__nav-link,
.footer__nav-text {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: rgba(245, 244, 242, 0.66);
}

.footer__nav-link {
    transition: color var(--transition);
}

.footer__nav-link:is(:hover, :active) {
    color: var(--color-text-inverse);
}

/* 区切り線とコピーライトの幅は、上のコンテンツ（.footer__inner）に揃える。
   ※ 以前は線を画面幅いっぱいに引いていた（.footer の padding-inline を
     負のマージンで打ち消していた）が、コンテンツ幅に揃える方針に変更した。
     ※ max-width と負のマージンはどちらも margin-inline を使うため併用できない。
       全幅に戻す場合は max-width ・margin-inline: auto を外し、
       margin-inline: calc(var(--section-pad-x) * -1) と
       padding-inline: var(--section-pad-x) を戻す。
   ※ 幅の段階は .footer__inner と同じ。
     576 → 768以上：800 → 1024以上：1320。
     片方だけ変えると線とコンテンツの左右がズレるので、必ず両方を合わせること。 */
.footer__bottom {
    width: 100%;
    max-width: var(--section-width-sm);
    margin-inline: auto;
    border-top: 1px solid var(--color-border-dark);
}

@media (min-width: 768px) {
    .footer__bottom {
        max-width: var(--section-width-content);
    }
}

@media (min-width: 1024px) {
    .footer__bottom {
        max-width: var(--section-width-xl);
    }
}

/* ※ 幅の制限は親（.footer__bottom）が持つので、
     こちらは余白と文字の見た目だけを担う。 */
.footer__copyright {
    padding-block: 1.25rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-align: center;
    color: rgba(245, 244, 242, 0.5);
}

/* ================================================================
   ページトップボタン
================================================================ */

.pagetop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 90;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ※ 以前は --color-surface（#282828）。写真の上に重なることが多いので、
         一段沈めて背景に埋もれにくくしている。
       ※ ヘッダー・SERVICE/WORKS ブロック・新着情報・モバイルメニューと
         同じ --color-bg-raise。ページ内の「一段浮かせた面」を揃えている。 */
    background-color: var(--color-bg-raise);
    border: 1px solid var(--color-border-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition), background-color var(--transition), transform var(--transition);
}

@media (min-width: 768px) {
    .pagetop {
        right: 2rem;
        bottom: 2rem;
        width: 3.25rem;
        height: 3.25rem;
    }
}

.pagetop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ホバーで白抜きに反転させる。
   ※ 暗転前は「黒地 → 透明（白背景が透ける）」で反転していた。
     黒地では透明にすると背景と同化してボタンが消えるので、
     面を白で埋める形にする。下の矢印の border-color が
     --color-primary（墨黒）なので、これで黒い矢印になる。 */
.pagetop:is(:hover, :active) {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    transform: translateY(-2px);
}

.pagetop__arrow {
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 1px solid var(--color-text-inverse);
    border-right: 1px solid var(--color-text-inverse);
    transform: translateY(0.125rem) rotate(-45deg);
    transition: border-color var(--transition);
}

.pagetop:is(:hover, :active) .pagetop__arrow {
    border-color: var(--color-primary);
}

/* ================================================================
   スクロールリビール（animation.js）
   ※ 短距離・高速・直線的なイージングで「かっちり」見せる。
     ディレイは 0.08s 刻みで揃え、規則的に整列させる。
================================================================ */

.js-reveal {
    opacity: 0;
    transform: translateY(0.875rem);
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.1, 1), transform 0.45s cubic-bezier(0.4, 0, 0.1, 1);
}

.js-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 遅延バリエーション（0.08s刻み） */
.js-reveal[data-delay="1"] {
    transition-delay: 0.08s;
}

.js-reveal[data-delay="2"] {
    transition-delay: 0.16s;
}

.js-reveal[data-delay="3"] {
    transition-delay: 0.24s;
}

.js-reveal[data-delay="4"] {
    transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ================================================================
   画像リビール：マスクスライド
   帯が左→右へ通過し、その後を追うように画像が現れる。

   使い方：画像を包む要素に .js-mask を付ける。
     <div class="js-mask"><img ...></div>
   stagger は data-delay="1"～"4"（0.08s刻み）で指定する。
================================================================ */

.js-mask {
    position: relative;
    overflow: hidden;
}

/* 通過する帯 */
.js-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* 帯が通り過ぎるまで画像本体は隠す */
.js-mask>* {
    opacity: 0;
}

.js-mask.is-revealed>* {
    opacity: 1;
    transition: opacity 0s linear 0.28s;
}

.js-mask.is-revealed::after {
    animation: maskSweep 0.56s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* 左から伸びて右へ抜ける（中間点で origin を切り替える） */
@keyframes maskSweep {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left;
    }

    50.1% {
        transform: scaleX(1);
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

/* stagger（0.08s刻み） */
.js-mask[data-delay="1"].is-revealed::after {
    animation-delay: 0.08s;
}

.js-mask[data-delay="2"].is-revealed::after {
    animation-delay: 0.16s;
}

.js-mask[data-delay="3"].is-revealed::after {
    animation-delay: 0.24s;
}

.js-mask[data-delay="4"].is-revealed::after {
    animation-delay: 0.32s;
}

.js-mask[data-delay="1"].is-revealed>* {
    transition-delay: 0.36s;
}

.js-mask[data-delay="2"].is-revealed>* {
    transition-delay: 0.44s;
}

.js-mask[data-delay="3"].is-revealed>* {
    transition-delay: 0.52s;
}

.js-mask[data-delay="4"].is-revealed>* {
    transition-delay: 0.60s;
}

@media (prefers-reduced-motion: reduce) {

    .js-mask>*,
    .js-mask.is-revealed>* {
        opacity: 1;
        transition: none;
    }

    .js-mask::after,
    .js-mask.is-revealed::after {
        display: none;
        animation: none;
    }
}

/* ================================================================
   テキストリビール：下からの立ち上がり（animation.js）
   大きめの日本語見出し向け。全行が一つの塊として
   同時に下から押し上がって現れる。

   使い方：見出しに .js-lines を付け、各行を .js-lines__line で包む。
     <h2 class="js-lines">
       <span class="js-lines__line"><span>1行目</span></span>
       <span class="js-lines__line"><span>2行目</span></span>
     </h2>
   ※ <br> は不要（__line が block なので自動で改行される）。
   ※ 行を分けているのは、文字を切り取る枠を行単位にするため。
     遅延は付けず、全行をそろえて動かす。
   ※ 行数は何行でも可。
================================================================ */

/* 各行の枠。ここで文字を切り取るので overflow: hidden が必須。
   ※ 行の上下がギリギリだと明朝体のハネや濁点が欠けることがあるため、
     padding で余裕を取り、同じ分を margin の負値で相殺して
     見た目の行間を変えないようにしている。 */
.js-lines__line {
    display: block;
    overflow: hidden;
    padding-block: 0.12em;
    margin-block: -0.12em;
}

/* 内側の span を動かす。
   ※ __line 自身に transform をかけると、文字を切り取る枠ごと
     移動してしまい、隠れる効果が得られない。
     枠（__line）は固定し、中身だけを引き上げる。 */
.js-lines__line>span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-lines.is-revealed .js-lines__line>span {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .js-lines__line>span,
    .js-lines.is-revealed .js-lines__line>span {
        transform: none;
        transition: none;
    }
}

/* ================================================================
   コンテンツ制作中（includes/wip.php）
================================================================ */

/* ※ page-hero・パンくずごとWIPに置き換わるため、
     このセクションが固定ヘッダーの真下に来る。
     ヘッダー高さ分を上に足して潜り込みを防ぐ。 */
.sec-wip {
    padding-top: calc(var(--spacing-3xl) + var(--header-height));
    padding-bottom: var(--spacing-3xl);
    padding-inline: var(--section-pad-x);
    background-color: var(--color-bg-light);
    text-align: center;
}

.sec-wip__inner {
    width: 100%;
    max-width: var(--section-width-md);
    margin-inline: auto;
}

.sec-wip__icon {
    font-size: 2.5rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.sec-wip__text {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    letter-spacing: 0.14em;
    color: var(--color-title);
    margin-bottom: var(--spacing-xxs);
}

.sec-wip__sub {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* ================================================================
   カスタムカーソル（小さな四角＋外周の四角線）

   小さな塗り四角がポインタに即座に追従し、
   外周の四角線が少し遅れてついてくる。

   ※ JS（assets/js/cursor.js）が body に .has-cursor を付けたときだけ
     標準カーソルを消す。CSS単体で cursor: none にしないのは、
     JSが止まったりタッチ端末だった場合に
     カーソルが見えないままになるのを避けるため。

   ※ 形はサイト共通の方針に合わせて直角。角丸は使わない。

   ※ 色は mix-blend-mode: difference で反転させる。
     白地でも黒地（マーキー帯・SERVICE・WORKS）でも
     自動で見えるので、背景ごとに色を分ける必要がない。

   ※ 位置は translate でだけ動かす（left / top は使わない）。
     レイアウトを再計算させずに済む。 */

.cursor,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: difference;
    transition: opacity 0.3s, width 0.3s, height 0.3s;
    will-change: transform;
}

/* 内側の塗り四角 */
.cursor {
    --cursor-size: 6px;

    width: var(--cursor-size);
    height: var(--cursor-size);
    background-color: #FFFFFF;
}

/* 外周の四角線 */
.cursor-ring {
    --cursor-ring-size: 32px;

    width: var(--cursor-ring-size);
    height: var(--cursor-ring-size);
    border: 1px solid #FFFFFF;
}

/* JSが座標を入れ始めてから表示する。
   ※ これが無いと、初回描画時に左上（0, 0）に
     一瞬四角が見えてしまう。 */
.has-cursor .cursor,
.has-cursor .cursor-ring {
    opacity: 1;
}

/* 標準カーソルを消すのは、代替が確実に動いているときだけ。 */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor input,
.has-cursor textarea,
.has-cursor label {
    cursor: none;
}

/* 押せる場所に重なったら、中心と外周の両方を広げる。
   ※ transform は JS が位置のために使うので、
     大きさの変化は width / height で行う。
     両方を transform で扱うと JS の書き込みと衝突する。 */
.has-cursor.is-cursor-hover .cursor {
    --cursor-size: 10px;
}

.has-cursor.is-cursor-hover .cursor-ring {
    --cursor-ring-size: 40px;
}

/* 動きを減らす設定では使わない。
   ※ JS側でも初期化を見送るが、
     万一要素が残っても見えないようにしておく。 */
@media (prefers-reduced-motion: reduce) {

    .cursor,
    .cursor-ring {
        display: none;
    }

    .has-cursor,
    .has-cursor a,
    .has-cursor button,
    .has-cursor input,
    .has-cursor textarea,
    .has-cursor label {
        cursor: auto;
    }
}

/* ================================================================
   スプラッシュスクリーン（トップ・1セッション1回）

   r-doboku と同方式。sessionStorage で出し分ける。

   ※ r-doboku は背景が白だが、こちらは黒（#0D0D0D）にしている。
     FVが暗い写真なので、退場するときに色が飛ばず
     そのまま写真へ繋がる。白にすると一瞬フラッシュする。

   ※ z-index はヘッダーより上・カスタムカーソル（9999）より下。
================================================================ */

/* 表示中はスクロールを止める */
body.splash-active {
    overflow: hidden;
}

/* html 側にも掛けるのが要点。
   ※ このサイトは html { overflow-x: hidden } を敷いているため、
     body の overflow がビューポートに伝播しない
     （伝播するのは html が visible のときだけ）。
     r-doboku から body の1行だけ持ってくると、黒幕の裏で
     普通にスクロールできてしまい、退場したときに
     ページ途中から始まる。
   ※ overflow-y: visible は overflow-x: hidden との組み合わせで
     auto に計算されるので、元の状態に戻る。
   ※ :has() 非対応の古い環境ではこの行が無視されるだけで、
     不透明な黒幕は出るので見た目は崩れない。 */
html:has(body.splash-active) {
    overflow-y: hidden;
}

html.is-splashed:has(body.splash-active) {
    overflow-y: visible;
}

/* 表示済みならロックも解除する。
   ※ html 側の .is-splashed は header.php のインラインscriptが
     CSS適用前に付ける。これが無いと、サブページからトップへ
     戻ったときにスプラッシュが一瞬だけ見えてしまう。 */
html.is-splashed body.splash-active {
    overflow: visible;
}

.splash {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0D0D0D;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.splash.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 表示済み：CSS適用前から完全に消す */
html.is-splashed .splash {
    display: none;
}

/* ロゴの入れ物。
   ※ 比率は logo.png（830 x 310）に合わせてある。
     SVG（viewBox 400 x 160 ＝ 2.5）とは比率が違うので、
     SVG側を object-fit: contain でこの箱に収めている。
   ※ ※重要※ 同じ版面（400 x 160相当）でPNGを書き出し直したら、
     ここを 400 / 160 に戻して .splash__svg の object-fit を
     外すこと。その方が描画が大きく出て、
     PNGへの入れ替わりも1pxもズレない。 */
.splash__inner {
    position: relative;
    width: min(78vw, 460px);
    aspect-ratio: 830 / 310;
}

/* SVGとPNGを同じ位置に重ねる。
   ※ 入れ替わりは不透明度だけで行うので、
     両方とも絶対配置で重ねておく。
   ※ object-fit: contain で箱内に収めるので、
     比率が違っても中央基準で揃う。 */
.splash__svg,
.splash__png {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.splash__svg {
    display: block;
    overflow: visible;
}

/* 確定後に出すPNGロゴ。
   ※ 描画中は完全に透明。is-drawn で立ち上がる。 */
.splash__png {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.33, 0, 0.2, 1);
}

.splash.is-drawn .splash__png {
    opacity: 1;
}

/* ----------------------------------------------------------------
   ロゴSVG（index.php に PHP include でインライン展開している）

   ── 2段構え ──
   1) 描画フェーズ：全35本の輪郭を線でなぞる。
      全パスに pathLength="100" を付けてあるので、
      長短に関係なく同時に描き始めて同時に描き終わる。
   2) 確定フェーズ（.is-drawn）：全パスを白ベタで塗り、線を消す。
      線画から実体へ切り替わる。

   ※ PNGを重ねる方式にしていないのは、SVGとPNGで座標系が違うと
     切り替わる瞬間にロゴがズレるため。同じパスを線→塗りに
     変えるだけなら1pxもズレない。
---------------------------------------------------------------- */

/* 全パス共通：描画中は塗り無し。
   ※ 元データは fill="none"。確定フェーズでも塗らない（PNGに渡す）ので、
     ここでは何もしない。
   ※ 以前はここで白ベタに塗って確定させていた。
     PNG方式に戻したので塗りフェーズは廃止。
     塗りに戻す場合は下の2つを復活させ、
     .splash__png を index.php から外すこと。
       .splash__svg path { fill: rgba(255,255,255,0); transition: fill 1s ...; }
       .splash.is-drawn .splash__svg path { fill: rgba(255,255,255,1); }
*/

/* 書き出しデータの先頭に、全グリフを1本にまとめた重複パスが
   入っている（残り35本と同じ形）。線が二重になるので殺す。 */
.splash__svg .splash__hide {
    display: none;
}

/* 線でなぞるパス（重複パスを除く全35本）。
   ※ pathLength="100" を付けてあるので、実際のパス長に関係なく
     dasharray 100 で「ちょうど一周」になる。これが無いと
     短いパスが先に描き上がってバラつく。
   ※ stroke-linecap は butt 固定。round にすると破線の端に
     半円のキャップが付くため、長さゼロの初期状態でも
     各サブパスの始点に点が残る。中抜きを含めて
     サブパスが多いので、ロゴ全体が点々に見えてしまう。
   ※ dasharray を 1値（100）ではなく「100 200」にしているのが重要。
     1値だと「実線100・空白100」の繰り返しになるため、
     dashoffset を 100 より少しでも大きくすると空白がパス末尾の
     手前で尽き、次の実線が末尾に顔を出して点になる。
     空白を200に伸ばしておけば回り込まない。
   ※ dashoffset の 100.5 は丸め誤差対策の余分な0.5。
     上の空白200とセットで初めて安全になる。
   ※ 細かい文字が潰れて見えるようなら stroke-width を下げる。 */
.splash__svg .splash__path {
    stroke: #FFFFFF;
    stroke-width: 1;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-dasharray: 100 200;
    stroke-dashoffset: 100.5;
    animation: splashDraw 1.9s ease-in-out forwards;
    transition: stroke 0.8s ease 0.35s;
}

/* 確定と同時に線を引っ込める。
   ※ ※重要※ 上の transition に 0.35s の遅延を入れているのが要点。
     線とPNGを同じタイミングで入れ替えると、中間地点で
     両方が50%になる。同じ形を表すものが半分ずつなので
     そこでロゴが一番暗くなり、その後一気に戻る――
     この輝度のへこみが「バツっと切り替わった」感触になる。
     線側を後ろにずらすと、PNGが立ち上がる間は線が形を
     保ち続け、PNGが形を担えるようになってから線が消える。
   ※ 遅延を変えるときは .splash__png の長さ（1s）より
     短く保つこと。超えるとPNGが先に完成し、
     線だけが取り残されて二重輪郭に見える。
   ※ JS側の HOLD はこの完了時刻（0.35 + 0.8 = 1.15s）を
     下回らないこと。短いと確定し切る前に退場が始まる。 */
.splash.is-drawn .splash__svg .splash__path {
    stroke: rgba(255, 255, 255, 0);
}

@keyframes splashDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ずらしは入れていない。全35本が同時に描き始めて同時に終わる。
   ※ 完了の合図は Logic の「c」に付けた .splash__draw。
     全部同時に終わるのでどのパスでもいいが、1本に絞らないと
     animationend が35回飛んで無駄になる。
   ※ .splash__path--mark / --o / --g / --i / --dot / --c は
     SVG側に残してあるが、現在は対応する規則が無い。
     文字ごとにずらしたくなったら、ここに
     animation-delay を書けばそのまま使える。 */

/* 動きを減らす設定：描画を飛ばして完成形だけ出す。
   ※ JS側も同じ判定で即 finish() に落とす。 */
@media (prefers-reduced-motion: reduce) {

    .splash__png {
        opacity: 1;
        transition: none;
    }

    .splash__svg {
        display: none;
    }
}