@charset "UTF-8";

/* ================================================================
   株式会社Logic - index.css
   トップページ専用スタイル
================================================================ */

/* ================================================================
   FV（ファーストビュー）
================================================================ */

.fv {
    /* ── キャッチコピーの登場の時間 ──
       ※ ※重要※ ここ（セクション）に持たせるのが要点。
         キャッチ（.fv__catch）とロゴ（.fv__inner）は兄弟なので、
         キャッチ側に定義するとロゴから読めない
         （カスタムプロパティは下にしか継承しない）。
       ※ --fv-catch-end はキャッチが全部開き切る時刻。
         ロゴ（.fv__logo-img）の animation-delay がこれを参照して、
         キャッチが終わってから立ち上がる。
       ※ ベース（〜575px）は 2行で、行が順に開くので
         ワイプ 2本分を見る（0.35 + 1.1 × 2 ＝ 2.55s）。
         576px以上は 1行になるので 1本分（1.45s）。
         切り替えは下の 576px ブロックで行う。
       ※ 行数を変えたときはこの乗数（× 2）と
         .fv__catch-line:nth-child(2) の遅延を必ずセットで見直すこと。 */
    /* ※ ワイプの長さは 2s。
         上のコメント内の計算例（0.35 + 1.1 × 2 ＝ 2.55s）は
         初期の数字。現在は下のとおり。
           ベース（〜575px・2行）・・・ 0.35 + 2 × 2 ＝ 4.35s
           576px以上（1行）・・・・・ 0.35 + 2 　　＝ 2.35s
       ※ 長さの変更はこの1行だけ。
         2行目の待ち時間とロゴの遅延はここから計算しているので
         自動で追従する。 */
    --fv-catch-dur: 2s;
    --fv-catch-delay: 0.35s;
    /* ※ キャッチは常に 1行なので、完了時刻はワイプ 1本分。
         0.35 + 2 ＝ 2.35s。
       ※ 以前はベースが 2行だったので × 2 し、
         576px以上で 1本分に戻す上書きを持っていた。
         1行に統一したのでここだけになった。
       ※ 2行に戻すときは × 2 を復活させ、
         .fv__catch-line:nth-child(2) の遅延もセットで戻すこと。 */
    --fv-catch-end: calc(var(--fv-catch-delay) + var(--fv-catch-dur));

    position: relative;
    height: var(--fv-height, 100svh); /* JS初回設定の固定値。JS実行前のフォールバックは100svh */
    min-height: 667px;  /* SP：極小端末での最低保証高さ */
    max-height: 720px;  /* SP：縦長端末で伸びすぎないよう上限 */
    display: flex;
    /* ※ ※重要※ 以前はキャッチ・ロゴをそれぞれ絶対配置し、
         top の値で縦位置を合わせていた。
         下寄せにするのに top の数値を手で合わせる必要はないので、
         キャッチ・ロゴの2つだけを通常フローに戻し、
         この flex でまとめて下寄せにしている。
       ※ .fv__bg / .fv__overlay / .fv__scroll は引き続き
         絶対配置。背景とスクロール表示は重ねる対象なので
         フローに戻す必要がない。
       ※ キャッチ・FV内容（.fv__inner）・スクロールの3つが
         .fv の直子で、そのうちキャッチと .fv__inner の2つだけが
         通常フローに乗る。間隔は gap で取る。 */
    flex-direction: column;
    justify-content: flex-end;
    /* ※ ※重要※ キャッチ（.fv__catch）は絶対配置に戻したので、
         この gap は実質 .fv__inner（ロゴ）の下には何も続かない。
         フローに乗る直子が .fv__inner だけになったため。
         実害はないので残してあるが、キャッチを再び
         通常フローに戻すときのための値として残してある。 */
    gap: var(--spacing-md);
    /* ※ 下寄せにしたので、FV下端に直接張り付かないよう
         余白を取る。スクロールインジケーター（.fv__scroll）は
         bottom: 0 の絶対配置なのでこの影響を受けない。 */
    padding-bottom: var(--spacing-xl);
    overflow: hidden;
    background-color: var(--color-bg-dark);
}

@media (min-width: 576px) {
    .fv {
        max-height: 813px;
    }
}

@media (min-width: 768px) {
    .fv {
        min-height: 812px;
        max-height: 900px;
    }
}

@media (min-width: 1024px) {
    .fv {
        max-height: 1080px;
    }
}

/* スライドの入れ物。
   ※ z-index を付けてスタッキング文脈を作るのが重要。
     これがないと中のスライドの z-index がオーバーレイと
     直接比較され、オーバーレイを越えて前に出てしまう。
     入れ物ごと z-index: 1 に閉じ込めば、中での重なり順は
     自由に使いながら、全体としては常にオーバーレイ（2）の下になる。 */
.fv__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

/* ----------------------------------------------------------------
   FV背景スライド（5枚クロスフェード）
   ―― 重ね方の考え方 ――
   全枚を同じ位置に重ね、opacity だけで入れ替える。
   ※ JS は --active を付け外しするだけ。
     古い画像がフェードアウトし、新しい画像が同時に
     フェードインする。下地（.fv の背景色）が一瞬透けるのを
     避けるため、フェードは ease-in-out で中間を厚くとる。

   ※ Ken Burns は全スライドに常時かける。
     active の付け外しで transform がリセットされず、
     切り替え時の跳ねが出ない（r-doboku と同方式）。
---------------------------------------------------------------- */
.fv__bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #1A1A1A; /* 画像未配置時のフォールバック */
    opacity: 0;
    transition: opacity 2s ease-in-out;
    will-change: opacity;
    animation: fvKenBurns 10s ease-in-out infinite alternate;
}

/* 今見えている画像 */
.fv__bg-slide--active {
    opacity: 1;
}

/* 背景画像（ブレークポイント共通・1セット5枚）
   ※ 枚数を変えるときは index.php の HTML（.fv__bg-slide）と
     prefetch の行も合わせること。
     JS（index.js）は slides.length で回しているので変更不要。
   ※ トリミングの基準は共通側の background-position: center。
     写真ごとに変えたい場合だけ、下のように個別で上書きする。 */
.fv__bg-slide--01 { background-image: url('../images/fv-01.webp'); }
.fv__bg-slide--02 { background-image: url('../images/fv-02.webp'); }
.fv__bg-slide--03 { background-image: url('../images/fv-03.webp'); }
.fv__bg-slide--04 { background-image: url('../images/fv-04.webp'); }
.fv__bg-slide--05 { background-image: url('../images/fv-05.webp'); }

/* 2枚目だけ、左から85%・上から35%の位置を基準に切り抜く。 */
.fv__bg-slide--02 { background-position: left 85% top 35%; }

@keyframes fvKenBurns {
    from { transform: scale(1);    }
    to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .fv__bg-slide {
        transition: none;
        animation: none;
    }
}

/* グラデーションオーバーレイ（#1A1A1A）
   上から下へ 0.75 → 0.5 → 0.25 と薄くなっていく1層構成。
   上部を濃くしてヘッダー（最上部では背景透明）の
   白文字と、左に置いたタイトルの可読性を確保する。

   暗さを変えるときは下の変数（アルファ値）だけを触る。

   ※ 重なり順：.fv__bg（1）< このオーバーレイ（2）< .fv__inner（3） */
.fv__overlay {
    --fv-overlay-top:    0.75;  /* 上端：ヘッダー背面 */
    --fv-overlay-middle: 0.5;   /* 中間（50%地点） */
    --fv-overlay-bottom: 0.25;  /* 下端：ロゴ・スクロール表示背面 */

    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom,
        rgba(26, 26, 26, var(--fv-overlay-top))    0%,
        rgba(26, 26, 26, var(--fv-overlay-middle)) 50%,
        rgba(26, 26, 26, var(--fv-overlay-bottom)) 100%);
}

/* ── FVの内容ブロック（ロゴのみ）──
   ※ 縦位置は FV の上から --fv-top（既定 62.5%）。
     絶対配置で直接指定するので、上下寄せは使わない。
     ※ transform は使わない。ロゴの上端が 62.5% 地点に来る。
       中心を 62.5% に合わせたい場合は translateY(-50%) を足す。
   ※ 左右の位置と幅は従来どおり。left / right: 0 と
     margin-inline: auto で中央に置き、幅の計算で
     ヘッダーのロゴと左端を揃える。
   ※ ロゴの大きさは --fv-logo-w の1行で決まる。
   ※ ※注意※ --fv-logo-w に「%」を使わないこと。
     % は参照するプロパティごとに基準が違う
     （width なら親の幅、font-size なら親の文字サイズ）。
     この値を font-size などで使い回すと意図しない値になるので、
     vw で持たせてある。 */
.fv__inner {
    /* ※ 以前は min(76vw, 26rem) → min(50vw, 26rem)。
         今回下限 15rem（240px）を足した。
       ※ max() で包むことで、極小端末（480px以下）で
         50vw が 15rem を下回るのを防ぐ。
         480px なら 50vw ≡ 240px （＝15rem）だから。
       ※ 上限（26rem）は維持。 */
    --fv-logo-w: max(15rem, min(50vw, 26rem));

    /* ※ ※重要※ 以前は position: absolute; top: var(--fv-top) で
         縦位置を数値直接指定していた（--fv-top: 75%）。
         .fv の flex-direction: column; justify-content: flex-end で
         下寄せにしたので、通常フローに戻してある。
       ※ z-index は保つ。.fv__bg（1）・.fv__overlay（2）は
         引き続き絶対配置なので、通常フローに乗ったこの要素を
         前面に出すにはこの1行が必須。
       ※ 左右の位置と幅は従来どおり。left / right: 0 と
         margin-inline: auto は不要になった（ブロック要素の
         margin-inline: auto だけで中央になる）が、width の
         計算式はヘッダーのロゴと左端を揃えるためのまま持つ。
       ※ ロゴの大きさは --fv-logo-w の1行で決まる。
       ※ ※注意※ --fv-logo-w に「%」を使わないこと。
         % は参照するプロパティごとに基準が違う
         （width なら親の幅、font-size なら親の文字サイズ）。
         この値を font-size などで使い回すと意図しない値になるので、
         vw で持たせてある。 */
    z-index: 3;  /* オーバーレイ（2）より前面 */
    width: min(100% - 2.5rem, var(--header-width));
    margin-inline: auto;
    color: var(--color-text-inverse);
}

@media (min-width: 768px) {
    .fv__inner {
        /* ── ロゴ幅（768px以上）──
           ※ 上限は 44rem から段階的に下げてきて、現在 28.5rem（456px）。
             キャッチコピーを主役にする方針で縮めた経緯がある。
           ※ min() なので 45vw が効くのは 1013px 未満だけで、
             それ以上は上限側（28.5rem）が勝つ。
             切り替わる幅は「上限 ÷ 0.45」で求まるので、
             上限を変えたらこの数字も直すこと。
           ※ 表示高さは幅 ÷ 3.49（元画像 1167 × 334）。
             768px で約 99px / 上限時の 456px なら約 131px。
           ※ ベース（〜767px）は上の .fv__inner が別に持っている。
             SPも変えるときはそちらを見ること。 */
        --fv-logo-w: min(45vw, 28.5rem);

        width: min(100% - 5rem, var(--header-width));
    }
}

/* ── キャッチコピー（FVの上下左右中央）──
   ※ 縦位置は --fv-catch-top（既定 50%）の1行で決まる。
     transform: translateY(-50%) で中心をその地点に合わせているので、
     ロゴ（.fv__inner の --fv-top: 62.5% が上端）とは別の基準。
     ※ 両方の間隔を調整するときはこの2つを見ること。
   ※ 横は左揃え。幅の式を .fv__inner と同じにしてあるので、
     ロゴ画像・ヘッダーのロゴと左端が揃う。
     中央寄せにする場合は text-align: center を足す。
   ※ z-index はオーバーレイ（2）より前面の 3。
   ※ pointer-events は切らない。選択できる本文として扱う。 */
.fv__catch {
    /* ※ ※重要※ キャッチだけ絶対配置に戻して、FVの画面中央に固定。
         ロゴ（.fv__inner）は引き続き通常フローで .fv の
         justify-content: flex-end により下寄せ。キャッチだけ
         別系統の位置指定になったので、両者の間隔は
         .fv の gap では決まらない（キャッチは直子ではあるが
         絶対配置なので flex の流れから外れる）。
       ※ transform: translateY(-50%) で中心を --fv-catch-top
         （既定 50%）地点に合わせる。 */
    --fv-catch-top: 50%;

    position: absolute;
    top: var(--fv-catch-top);
    left: 0;
    right: 0;
    z-index: 3;
    width: min(100% - 2.5rem, var(--header-width));
    margin-inline: auto;
    transform: translateY(-50%);
    color: var(--color-text-inverse);
}

@media (min-width: 768px) {
    .fv__catch {
        width: min(100% - 5rem, var(--header-width));
    }
}

/* ※ p なので h1〜h6 の基本指定が届かない。書体とウェイトをここで補う。
   ※ ベース（〜575px）は br で2行、576px以上は下のブロックで
     br を消して1行にする。
   ※ ※重要※ 上限（1.5rem ＝ 24px）は上げすぎないこと。
     576px で1行（15文字）になるので、字間（0.14em）込みで
     約410px。使える幅（576 - 左右 2rem = 512px）に対して
     約100px の余裕。文言を長くするとこの余裕が減る。
     white-space: nowrap は使わない（溢れると横スクロールが出る）。
   ※ 写真の上に乗るので落ち影を一枚入れる。
     オーバーレイは中間地点で 0.5 なので、明るい写真だと
     これが無いと輪郭が溶ける。不要ならこの1行を削る。
   ※ 登場は「左から右へのワイプ」。
     文字は一切動かず、見えている範囲だけが右へ広がる。
     ※ 背景写真が Ken Burns でゆっくり拡大しているので、
       文字まで動かすと画面内の動きが2系統になって散る。
     ※ 見出しの帯アニメ（maskSweep）と同じ方向性だが、
       帯を使わないぶん一段静か。
     ※ クリップの上下は 0 なので、アセンダ・ディセンダは欠けない。
   ※ Philosophy（.index-about__catch）と採用（.index-recruit__catch）の
     キャッチも同じ動き。速さを変えるときはあちらもセットで見直すこと。
   ※ ※重要※ アニメはここ（p）に付ける。親の .fv__catch は
     translateY(-50%) を持っているので、向こうに付けると位置が飛ぶ。
   ※ ロゴ（.fv__logo-img）は 0.55s から。こちらが開いている
     途中で重なるので、順番をはっきり見せたい場合は
     向こうの遅延を伸ばす。 */
.fv__catch-text {
    /* ※ ※重要※ 上の2つの変数（--fv-catch-dur / --fv-catch-delay）の
         定義は .fv 側へ移した。ロゴ（.fv__logo-img）が
         完了時刻を参照する必要があり、キャッチとロゴは
         兄弟なので共通の親に持たせないと読めないため。
         値を変えるときは .fv の定義を触る。 */
    font-family: var(--font-heading);
    font-weight: 700;
    /* ── 1行の幅を画面幅の割合で決める ──
       キャッチは句読点を除いて 13文字。
       字間（0.14em）込み 1文字が約 1.14em を占めるので、
         1行の幅 = font-size × 約 17.1
       逆に解くと font-size = 目標の幅 ÷ 17.1。
       ※ ベース：画面幅の 90%を占める → 90 ÷ 17.1 = 5.26vw
         375px で約 19.7px / 575px で約 30.2px。
         （以前は 85%（4.97vw）、さらに前は 75%（4.39vw）。）
       ※ 768px以上：90% → 5.26vw（下のブロック）。ベースと同じ割合に揃えた。
       ※ ※重要※ 文言の文字数を変えたときはこの除数（17.1）を
         計算し直すこと。字間（letter-spacing）を変えたときも同じ。
       ※ ※重要※ 必ず 1行に保つことが前提。
         2行に割れると「1行の幅」という前提が崩れる。
         white-space: nowrap で確実に折り返さないようにしてある。
         font-size を画面幅の90%に自動追従させているので、
         通常は桁からはみ出さないが、字幅の実測が
         計算（除数 17.1）より広い場合はワイドでフォールドすると
         この分だけ横スクロールが出得る。375px幅で必ず確認すること。
       ※ 下限 1.375rem（22px）。極小端末で 5.26vw が
         1.375rem を下回るのを防ぐ。約418px なら 5.26vw ≡ 22px なので、
         418px 以下で下限が効く計算になる（以前は1.25rem・380px以下）。
         下限が効く幅では「1行の幅が画面幅の90%」の前提が崩れるので、
         極端に狭い端末だけの保険として見ること。
       ※ 使える幅は親（.fv__catch）の min(100% - 2.5rem, --header-width)。
         ベースは左右 2.5rem を引いた値なので、90% は余裕が少ない。
         375px で使える幅 335px に対し必要幅約337px（余裕はほぼない）。
         ※重要※ この幅では字幅の実測が計算よりわずかに広いだけで
         折り返す可能性がある。必ず375px幅で確認すること。
         折り返す場合は 90% を下げること。 */
    font-size: max(1.375rem, 5.26vw);
    letter-spacing: 0.14em;
    line-height: 2;
    white-space: nowrap;
    /* ※ text-shadow は廃止した。以前は
         0 2px 12px rgba(0, 0, 0, 0.45) で落ち影を入れていた。
       ※ 元々は背景写真の上に乗るための可読性対策で、
         オーバーレイ（中間地点で 0.5）だけでは明るい写真で
         輪郭が溶けるのを補完していた。写真との相性で
         可読性が落ちる場合はこの1行を復活させること。 */
    /* ※ 左右中央。
       ※ width: fit-content との併用が前提。ブロックのままだと
         幅が親いっぱいなので auto にしても中央にならない。
       ※ ワイプは左→右のまま。fit-content で箱を文字幅に
         絞ってあるので、中央に置いても文字の左端から
         右端まで正確に走る。 */
    width: fit-content;
    margin-inline: auto;
    clip-path: inset(0 100% 0 0);
    animation: fvCatchWipe var(--fv-catch-dur) cubic-bezier(0.65, 0, 0.35, 1) var(--fv-catch-delay) forwards;
}

@keyframes fvCatchWipe {
    to { clip-path: inset(0 0 0 0); }
}

/* ── 行は全幅で横に並ぶ（1行統一）──
   ※ 以前はベースを block で 2行にし、行ごとに順に
     ワイプさせていた。文字サイズを「1行の幅が画面幅の
     何%」で決める方式に変えたので、1行に統一した。
   ※ 伴って以下も不要になった。
       ・行側の clip-path / animation（ワイプは p 側が担う）
       ・.fv__catch-line:nth-child(2) の animation-delay
       ・576px での inline-block への切り替え
       ・body.splash-active での行側の一時停止
     2行に戻すときはこの4つをセットで復活させること。
   ※ ※重要※ HTML側で 2つの span の間を改行せずに
     書いてある（index.php）。改行すると間に空白が残る。 */
.fv__catch-line {
    display: inline-block;
}

/* ※ 以前ここにあった 576px ブロックは廃止した。
     br を消す→行を inline-block にする→ワイプを p 側に戻す、
     という 3世代分の切り替えが入っていたが、
     全幅 1行に統一したのですべて不要になった。
     行の display とワイプは上のベース側が持つ。
   ※ --fv-catch-end の 576px 上書きも不要。
     常に 1行なので .fv の定義（delay + dur）だけで決まる。 */

@media (min-width: 768px) {
    .fv__catch-text {
        /* ※ 以前は clamp(1.5rem, 3vw, 2.5rem)（24〜40px）。
             ロゴ（--fv-logo-w）を一段小さくしたのに合わせて、
             こちらを上げて主役にしている。
             ロゴ幅との比は約 17.6倍 → 約 11〜12倍。
           ※ ※重要※ 上限（3.5rem ＝ 56px）の根拠。
             キャッチは 15文字で、字間（0.14em）込み
             1文字が約 1.14em を占める。よって 1行に必要な幅は
             font-size × 約 17.1。
             56px なら約 957px。上限に達する 1400px での
             使える幅は 1320px なので収まる。
             文言を長くしたときはこの計算をやり直すこと。
             white-space: nowrap は使わない（溢れると横スクロールが出る）。
           ※ 768px の境で 24px → 約 30.7px の段差が出る。
             ベースの上限が 24px なので、こちらの vw の係数を
             上げると必ず生じる。消したい場合は 3.5vw
             （768px で 26.9px）まで下げる。
           ※ ベース（〜767px）は据え置き。576〜767px は
             1行 15文字に対して使える幅が 512px しかなく、
             余裕が約 100px だけなので上げると折り返す。 */
        /* ※ 画面幅の 65% を占めるサイズ。
             65 ÷ 17.1 = 3.8vw（除数の根拠はベース側のコメント）。
               768px で約 29px / 1440px で約 55px。
           ※ 上限 4rem（64px）は安全弁。上限なしだと 1920px で
             約 73px になり、1行に必要な幅（約 1248px）が
             画面の 65%（1248px）と同じになって余裕が消える。
             字幅の実測が計算よりわずかに広いだけで折り返すので、
             64px で止めている（1707px 以降が上限）。
           ※ 以前は clamp(1.5rem, 4vw, 3.5rem)。 */
        /* ※ 画面幅の 90% を占めるサイズ。ベースと同じ割合に揃えた。
             90 ÷ 17.1 = 5.26vw（除数の根拠はベース側のコメント）。
               768px で約 40.4px / 1440px で約 75.7px。
           ※ 上限 3.25rem（52px）は維持。
             52px に達するのは約 989px以降（それ以降は上限固定）。
             52px なら 1行に必要な幅は約 889px。
           ※ 以前は 85%（4.97vw）上限 3.25rem、その前は 65%（3.8vw）
             上限 4rem・3.5rem、さらに前は clamp(1.5rem, 4vw, 3.5rem)。 */
        font-size: min(5.26vw, 3.25rem);
    }
}

/* スプラッシュが出ている間はロゴと同じく止めておく。
   ※ 止めないと黒幕の裏で再生され、幕が明けた頃には
     最初から置かれている状態になる。
   ※ JS無効時の保険は index.php の noscript にある。 */
body.splash-active .fv__catch-text {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .fv__catch-text {
        clip-path: none;
        animation: none;
    }
}

/* ── ロゴ（h1）──
   ※ キャッチコピーを廃止したので、h1 の役割をこちらに移してある。
   ※ 幅・位置の指定は持たない。親（.fv__inner）に乗るだけ。
   ※ line-height: 0 は h1 の既定行高（1.6）が画像の下に
     余白を作るのを消すため。 */
.fv__logo {
    line-height: 0;
}

/* ※ 登場はキャッチコピーと同じフェードアップ。
     ※ 順番はキャッチ（0.35s）→ ロゴ（0.55s）。
       入れ替えるときは .fv__catch-text の遅延と
       必ずセットで直すこと。
   ※ 幅は親が持つ --fv-logo-w。 */
.fv__logo-img {
    /* ※ ※重要※ 上のコメントにある「0.55s」は古い。
         現在はキャッチが全部開き切ってから登場する。
         遅延は .fv が持つ --fv-catch-end。
           ベース（〜575px）・・・2行なので 2.55s
           576px以上・・・1行なので 1.45s
       ※ 順番を変えるときは .fv の --fv-catch-end を触る。
         ここに直接秒数を書くと、行数が変わったときに
         キャッチとの順序が崩れる。
       ※ キャッチと重ならせたい（以前の見え方に戻したい）場合は
         var(--fv-catch-end) を 0.55s に戻す。
       ※ 幅は親が持つ --fv-logo-w。 */
    display: block;
    width: var(--fv-logo-w);
    height: auto;
    opacity: 0;
    /* ※ 上のコメントの 2.55s / 1.45s は初期（ワイプ 1.1s）の数字。
         現在は 4.35s（2行）/ 2.35s（1行）から始まる。 */
    animation: fvFadeUp 0.9s ease var(--fv-catch-end) forwards;
}

/* スプラッシュが出ている間はアニメを止めておく。
   ※ 止めないと黒幕の裏で勝手に再生され、幕が明けた頃には
     ロゴが最初から置かれている状態になる。
     （スプラッシュは約4秒、このアニメは 0.35 + 0.9 = 1.25秒）
   ※ body.splash-active はトップページに付き、
     スプラッシュのJSが退場と同時に外す（index.js の hide()）。
     外れた瞬間に遅延（0.35s）から再生が始まるので、
     黒幕がフェードアウトしていく中でロゴが立ち上がる。
   ※ animation-play-state なので時間指定は一箇所のまま。
     遅延やイージングを変えるときは上の1行だけを触ればよい。
   ※ 2回目以降はJSが即 splash-active を外すので、
     体感では従来どおり即座に始まる。
   ※ ※重要※ JS無効時の保険は index.php の noscript にある。
     あれが無いとロゴが opacity: 0 のまま残る。 */
body.splash-active .fv__logo-img {
    animation-play-state: paused;
}

@keyframes fvFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    /* ※ 以前は opacity: 1。少し沈ませて 0.9 にした。 */
    to   { opacity: 0.9; transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
    .fv__logo-img {
        /* ※ 以前は 1。アニメの終点（fvFadeUp）と同じ 0.9 に揃える。 */
        opacity: 0.9;
        transform: none;
        animation: none;
    }
}

/* スクロールインジケーター */
.fv__scroll {
    position: absolute;
    right: 1.25rem;
    bottom: 0;
    z-index: 3;  /* オーバーレイ（2）より前面 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .fv__scroll {
        right: 2.5rem;
    }
}

.fv__scroll-text {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    color: rgba(245, 244, 242, 0.7);
    writing-mode: vertical-rl;
}

.fv__scroll-line {
    position: relative;
    display: block;
    width: 1px;
    height: 4rem;
    background-color: rgba(245, 244, 242, 0.24);
    overflow: hidden;
}

.fv__scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-text-inverse);
    animation: fvScrollLine 2.2s ease-in-out infinite;
}

@keyframes fvScrollLine {
    0%   { transform: translateY(-100%); }
    60%  { transform: translateY(100%);  }
    100% { transform: translateY(100%);  }
}

@media (prefers-reduced-motion: reduce) {
    .fv__scroll-line::after {
        animation: none;
    }
}

/* ================================================================
   セクション見出しの入れ替え（.section-head--swap）
   トップの Service / Works / Strengths / News の4セクションで使う。

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

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

/* ※ ※重要※ このブロックの定義本体は common.css へ移した。
     共通CTA（includes/contact.php）が全ページで --swap を使っており、
     index.css を読まないサブページで英字の書体
     （--font-en-display ＝ Orbitron）が当たらなかったため。
     探すときは common.css の同名見出しブロックを見ること。
   ※ 上の説明は仕組みの覚え書きとして残してある。
   ※ index.css 側での個別の上書き
     （.index-service__head-top / .index-strengths .section-head--swap など）
     はこのファイルの各セクションに残してあり、
     common.css より後に読まれるのでこれまでどおり効く。 */

/* ================================================================
   英字見出し（.section-head__title）の大きさ
   Philosophy / Strengths / Recruit / News の4つを揃える。
   共通CTA（Contact）も同じ値を common.css 側に持たせてあるので、
   変えるときは向こうの .sec-cta__head .section-head__title も
   必ずセットで直すこと。

   ※ 共通側の既定（.section-head__title）は
     24〜30px → 768px以上 30〜40px。英字を見出しの主役にしている
     --swap のセクションでは小さいのでここで引き上げる。

   ※ 2段階にしてある。
       ベース      32〜42px
       1024px以上  42〜60px
     ※ SPで 1024px 側の下限（3rem）を使わないのは、
       Orbitron は字幅が広く、375px 端末だと
       「Philosophy」（10文字）が入り切らず折り返すため。
     ※ 1023px で 42px、1024px で約 43px なので
       切り替わりの段差はほぼ出ない。

   ※ Strengths は 1024px以上だけ別の規則
     （.index-strengths .section-head--swap .section-head__title、0-3-0）を
     既に持っているので、ここではベースだけを与える。
     縦書き用の padding-block / margin-block も向こうが持つ。

   ※ Service（.index-service__headline）と Works（グリッドのセル内）は
     対象外。前者は別の大見出し、後者は幅の制約が強いため。
   ※ 詳細度は 0-2-0。font-size を与えている他の規則
     （共通の .section-head__title、0-1-0）より強いので、
     メディアクエリの順番に関係なく勝つ。
================================================================ */
.index-about .section-head__title,
.index-strengths .section-head__title,
.index-recruit .section-head__title,
.index-news .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
}

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

/* ================================================================
   キーワードの流れる帯（マーキー）
   FVの直下。黒地に白文字。
   ※ 途切れなくループする仕組み：
     同じリストを2つ横に並べ、帯全体（__track）を
     -50% だけ動かす。リスト1つ分ちょうど進んだところで
     先頭に戻るので、継ぎ目が見えない。
   ※ 速さは --marquee-duration、語句の間隔は --marquee-gap を触る。
     キーワードを増やすと幅が伸びて体感速度が上がるので、
     増やしたときは duration も伸ばす。
   ※ 区切りの装飾は共通クラス .c-mark-lblock（L字＋右上の四角）を
     HTML側で直接使う。ヘッダー・ドロワーの Top と同じ形。 */

.index-marquee {
    --marquee-duration: 50s;
    --marquee-gap: 2.5rem;

    overflow: hidden;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding-block: 0.875rem;
}

@media (min-width: 768px) {
    .index-marquee {
        --marquee-gap: 3.5rem;

        padding-block: 1rem;
    }
}

/* ※ width: max-content で中身の実幅を持たせる。
     これがないと親幅に収まってしまい、-50% が
     リスト1つ分と一致しなくなる。 */
.index-marquee__track {
    display: flex;
    width: max-content;
    animation: marqueeScroll var(--marquee-duration) linear infinite;
}

.index-marquee__list {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* 語句と区切りをひとつの項目にまとめる。
   ※ 英字は --font-en（Chakra Petch）、日本語はその
     フォールバック（Noto Sans JP）が自動で当たる。 */
.index-marquee__item {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
    flex-shrink: 0;
    padding-left: var(--marquee-gap);
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1;
    white-space: nowrap;
}

@keyframes marqueeScroll {
    from { transform: translateX(0);     }
    to   { transform: translateX(-50%);  }
}

/* ※ 動きを減らす設定では流しない。
     リストは2つとも横に並んだままだが、
     帯の overflow: hidden で入り切らない分は見えない。 */
@media (prefers-reduced-motion: reduce) {
    .index-marquee__track {
        animation: none;
    }
}

/* ================================================================
   ご挨拶 / 理念
================================================================ */

/* ── 背景の帯（アイキャッチ） ──
   セクションの上端から下へ、面がゆっくり降りてくる。
   ※ 参考：r-doboku の .js-band。向こうは斜め（skew -12deg）だが、
     Logic は装飾をすべて直角で組んでいるので、まっすぐな面にしてある。

   ※ 仕組みは clip-path。帯は最初から最終位置に置いておき、
     inset() の下側だけを 100% → 0% に戻して「開く」。
     transform で動かさないので、帯がセクション外へはみ出したり、
     レイアウトを押し広げたりしない。

   ※ 見た目は下の4つの変数だけで決まる。
     --about-band-w    幅（画面幅に対する割合）
     --about-band-x    左端の位置（マイナスで画面外へ逃がす）
     --about-band-ink  色
     --about-band-dur  開き切るまでの時間

   ※ 開始の合図（.is-revealed）は .js-band を付けた要素に
     animation.js が付ける。HTML側は <section> に .js-band を足すだけ。 */
.index-about {
    --about-band-w: 100%;
    /* ※ 単位は必ず付けること（値がゼロでも）。
         下の L字の横棒が calc() の中で % と足し算するので、
         単位なしの 0 だと型エラーで calc 全体が無効になる
         （left が auto に落ちて幅０で消える）。 */
    --about-band-x: 0px;
    --about-band-ink: var(--color-bg-dark);
    --about-band-dur: 1.6s;

    /* PCの2カラムの溝と比率。
       ※ 帯の幅（--about-band-w）がこの2つを参照して
         写真の左端を割り出すので、グリッドと共用する。
       ※ --about-col-div は左右の比の合計。
         1024〜1439px は 1 : 1 なので 2。
         1440px以上だけ下で 1 : 0.85（合計 1.85）に戻す。
         比率を変えるときはここだけを触れば、
         グリッドと帯の両方が同時に追従する。 */
    --about-col-gap: var(--spacing-xl);
    --about-col-div: 2;

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

    /* 本文・見出しの登場を待たせる時間。
       縦帯が降り切ったらすぐに出す。
       ※ 横棒（1024px以上）の完了は待たない。
         横棒が伸びている途中で文字が出てくる形になる。
       ※ ラベルと見出しは同じタイミングで出す。 */
    --about-text-delay: var(--about-band-dur);

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

/* PC（1024px〜）：本文と写真の2カラムになるので、
   帯を左半分に絞って本文カラムの台座にする。
   ※ SP・タブレットは1カラムなので幅100%。
     中途半端な幅にすると、本文の途中に縦の境目が入って読みにくくなる。 */
@media (min-width: 1024px) {
    .index-about {
        /* ── このセクションだけの例外 ──
           左右のパディングをセクション側では持たず、
           本文ブロック（.index-about__body）に持たせる。
           ※ 写真を画面右端まで伸ばすため。
             セクションにパディングを持たせると、
             写真側で負のマージンを使って打ち消すことになり、
             帯の幅の計算もパディングを引いて足し戻す式になる。
           ※ 1023px以下は1カラムなので共通の .section のまま。 */
        padding-inline: 0;

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

        /* 横棒の上端＝写真の下端。
           写真は本文と同じ高さまで伸びているので、
           その下端はグリッドの下端（＝セクションの
           内容領域の下端）と一致する。
           つまり横棒の高さをセクション下余白と同値にすれば、
           上端が写真の下端にぴったり揃う。
           ※ .section の padding-bottom（768px〜は --spacing-3xl）を
             変えたときはここも合わせること。
           ※ 末尾の 1px は縦帯（--about-band-w）と同じ丸め誤差対策。
             1px 高くして写真の下端に潜り込ませ、境目の白い筋を消す。
             ※ この値を参照している箇所は他に無いので単独で完結する。 */
        --about-band-foot-h: calc(var(--spacing-3xl) + 1px);
    }

    /* 左右の余白は本文ブロックが持つ。
       ※ 左は他セクションの本文左端と揃える。
       ※ 右は溝（--about-col-gap）が分け目になるので不要。
         ただし広い画面（1440px〜）だけは下で左右対称にする。 */
    .index-about__body {
        padding-left: var(--section-pad-x);
    }
}

/* 広い画面では本文の右にも同じ余白を入れ、
   文字が写真側に寄りすぎないようにする。
   ※ 1440px はここだけの区切り。
     --section-pad-x の段階（1200px）や
     .section__inner の上限（1320px）とは別なので、
     揃える場合は三者をまとめて見直すこと。
   ※ 列幅（--about-col-div）は変わらないので、
     帯の幅と写真の左端はそのまま。
     本文の実幅だけが余白分狭くなる。 */
@media (min-width: 1440px) {
    /* 広い画面だけ左カラムを広く取る（左 1 : 右 0.85）。
       ※ 帯の幅もこの値を参照しているので自動で追従する。 */
    .index-about {
        --about-col-div: 1.85;
    }

    .index-about__body {
        padding-right: var(--section-pad-x);
    }
}

.index-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--about-band-x);
    width: var(--about-band-w);
    height: 100%;
    background-color: var(--about-band-ink);
    /* ※ 登場アニメは廃止した。最初からL字の黒が出ている。
         以前は clip-path: inset(0 0 100% 0) から
         inset(0 0 0 0) へ transition で開いていた。
         戻すときは下の ::after とセットで復活させること。
       ※ アニメをやめたので、--about-band-dur /
         --about-band-foot-dur / --about-band-foot-delay /
         --about-text-delay は未使用になっている。 */
    pointer-events: none;
}

/* ── L字の横棒（下辺） ──
   縦の帯が降り切るのを待って、その足元から右へ伸びる。
   縦（::before）＋横（::after）でLの字を書く。

   ※ 左端は縦帯の右端に合わせる（同色なので 1px 重ねて
     小数点誤差の継ぎ目を消している）。
     幅100%で左端から描くと、縦帯に隠れている間は
     伸びているのが見えず、動きの前半が無駄になる。

   ※ 仕組みは縦帯と同じ clip-path。最初から最終位置に置き、
     inset() の右側だけを 100% → 0% に戻して「開く」。
     transform で動かさないのでレイアウトを押し広げない。

   ※ 高さは --about-band-foot-h。セクション下の余白
     （PCは 8rem）の内側に収まる値にしておくと、
     本文・写真に重ならない。 */
.index-about::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(var(--about-band-x) + var(--about-band-w) - 2px);
    right: 0;
    height: var(--about-band-foot-h);
    background-color: var(--about-band-ink);
    /* ※ 登場アニメは廃止（上の ::before と同じ）。
         以前は clip-path: inset(0 100% 0 0) から
         inset(0 0 0 0) へ transition で開いていた。 */
    pointer-events: none;
}

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

   ※ 幅の上限（max-width）は 1024px 以上だけ外してある（下のブロック）。
     他のセクションは 576 → 800 → 1320px の3段階。
     Philosophy も 1023px以下は同じ 576 → 800px で、
     1024px以上だけ左右のパディング内いっぱいまで広げる。
     ※ 左右の余白自体は .section 側が持っているので、
       文字が画面端に張り付くことはない。 */
.index-about .section__inner {
    position: relative;
    z-index: 1;
}

/* 幅の上限を外すのは 1024px 以上だけ。
   ※ 1023px以下は他のセクションと同じ 576 → 800px に揃える。
   ※ 1024px以上で none にするのは、共通側の 1320px を打ち消して
     画面幅いっぱいまで広げるため。
   ※ 帯の幅（--about-band-w）は「グリッド幅＝セクション幅」を
     前提に計算している。この前提は
       ・ここの max-width が none
       ・セクションの padding-inline が 0
     の両方が揃って初めて成立する。
     片方だけ戻すと帯と写真の位置がずれるので、
     必ずセットで扱うこと。 */
@media (min-width: 1024px) {
    .index-about .section__inner {
        max-width: none;
    }
}

/* ※ 帯の登場アニメを廃止したので、
     動きを減らす設定向けの上書きも不要になっている。
     以前はここで clip-path を全開にして transition を止めていた。 */

/* ── 帯の上に乗る文字を反転色にする ──
   帯を黒にしたので、Philosophy の文言はすべて白系に切り替える。

   ※ 帯（::before）はセクション上端から塗り始めるため、
     本文が現れる頃には下地が黒くなっている。
     白文字が白背景に出る瞬間は生まれない。

   ※ PCは帯が左カラム（写真の左端まで）、
     SP・タブレットは幅100%。
     文言はすべて左カラムに入っているので、
     どちらの幅でも黒地の上に乗る。

   ※ 濃度は採用（RECRUIT）セクションと揃えてある。
     見出し 1／本文 0.8／ラベル 0.66。

   ※ 帯を明るい色に戻すときは、--about-band-ink と
     このブロックをセットで戻すこと。 */
.index-about {
    /* セクションの地。
       ※ 暗転前は「文字色と同じ値（オフホワイト）」にして、
         帯が降り切るまで文字を地に溶かしていた。
         黒地のサイトではそれが真っ白な面として出てしまううえ、
         帯の登場アニメ自体も廃止したので、
         ページ背景に合わせるだけでよくなった。
       ※ 1024px以上は帯が左カラムまでなので、
         右半分（写真周り）はこの地色が見える。 */
    background-color: var(--color-bg);
    color: var(--color-text-inverse);
}

/* ── ラベル装飾：帯2本積み（上＝濃 / 下＝淡・隙間あり）──
   ※ Company の目印として、ヘッダー・ドロワー・フッターの
     Company と揃える。このセクションは会社紹介の役割
     （「会社概要を見る」への導線）なので、共通の既定装飾
     （塗りつぶし正方形）ではなく Company の形を使う。
     形の定義は common.css の .c-mark-bars2-alt と同じ。
     形を変えるときは5箇所をセットで見直すこと。
   ※ 外形を --mark-size-solid に落とすのは、
     帯2本は面積が大きく他より重く見えるため。
   ※ 色は --mark-ink（濃）/ --mark-ink-sub（淡）で持つ。
     他の3箇所と同じ変数名なので、色を変えるときは
     各箇所のこの2行を探せばよい。
   ※ currentColor は使わない。帯アニメ中は親が
     color: transparent になるため、装飾まで消える。
   ※ background-color: transparent を明示するのは、
     共通側の塗りつぶし指定（--color-text-light）を消すため。
     これがないと隙間の2pxにグレーの下地が覚く。
   ※ 共通側はこの装飾を scale(0) → scale(1) で弾けさせる。
     transform をここで上書きしないこと。 */
.index-about .section-head__label {
    --label-mark: var(--mark-size-solid);
    --about-bars-gap: 2px;
    --about-bars-bar: calc((var(--mark-size-solid) - var(--about-bars-gap)) / 2);
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

.index-about .section-head__label::before {
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink-sub) 0 0);
    background-size: 100% var(--about-bars-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left bottom;
}

/* ── キャッチコピー ──
   見出しから外し、本文グループ（__body-text）の先頭に置いてある。
   ※ 英字見出し（.section-head__title）より小さく、
     本文（約16px）よりははっきり大きい中間の位置。
   ※ p なので h1〜 h6 の基本指定が届かない。
     書体とウェイトをここで補う。
   ※ 2行を塊として見せたいので行間を絞る。
   ※ 以前は .index-about__title として .section-head の中にあり、
     大見出しサイズだった。英字に主役を譲ったので落としてある。 */
.index-about__catch {
    font-family: var(--font-heading);
    font-weight: 700;
    /* ※ 24〜28px。700px 以降は上限（28px）で頭打ち。
       ※ 以前は 20〜22px →（768px以上）22〜28px の2段だったが、
         ベースを 28px まで伸ばすと 767px（28px）→ 768px（22px）で
         縮む逆転が起きるので、768px の上書きを廃止した。
       ※ 傾きが 4vw なのは採用側の折り返し対策。
         採用（.index-recruit__catch）は 576px以上で1行（18文字）に
         なり、使える幅 512px に対して余裕が小さい。
         4.4vw だと 576px で 25px まで上がって収まらない。
       ※ 採用と同値。片方を変えるときはもう一方もセットで見直すこと。
       ※ 1024px以上だけ下で傾きを緩める（2カラムで左が半分幅になるため）。 */
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--color-text-inverse);
    /* ※ 下の本文（__text）との間隔。
         以前は --spacing-sm（1.5rem）だった。
       ※ 採用（.index-recruit__catch）は 1rem。
         こちらは下が段落グループ（.index-about__texts）なので
         少し広く取っている。揃えるときは向こうも合わせること。 */
    margin-bottom: 1.25rem;
}

/* 768px以上：1カラムのまま幅が広がるので 32px まで伸ばす。
   ※ 採用（.index-recruit__catch）と同値。
     片方を変えるときはもう一方もセットで見直すこと。
   ※ 768px 時点では 28px。ベースの上限と連続するので
     境での段差は出ない。 */
@media (min-width: 768px) {
    .index-about__catch {
        font-size: clamp(1.75rem, 3vw, 2rem);
    }
}

/* 1024px以上：2カラムになって左カラムが半分幅（約432px）に落ちる。
   ※ ※重要※ ここだけは小さくなる（1023px の約31px → 1024px で 26px）。
     左カラムに1行（14文字）を収める上限が約28px なので、
     ベースのままだと折り返す。
     段差を消したい場合は 768px 側の上限を下げるか、
     2カラムの比率（--about-col-div）を見直す。
   ※ 上限は同じ 32px。1455px 以降で追いつく。
   ※ 採用（.index-recruit__catch）にこの上書きは無い。
     あちらは幅 40rem の1カラムなので狭くならない。 */
@media (min-width: 1024px) {
    .index-about__catch {
        font-size: clamp(1.625rem, 2.2vw, 2rem);
    }
}

/* 行の切り取り枠の余白をこのセクションだけ差し替える。
   ※ 採用（.index-recruit__catch .js-lines__line）と同値。
     共通側の padding-block: 0.12em / margin-block: -0.12em を
     両方とも 0 に戻し、行間は行高（line-height: 1.6）だけで取る。
   ※ ※注意※ padding-block を 0 にすると、切り取り枠
     （overflow: hidden）が文字の上下すれすれになる。
     文言に濁点やハネの強い字を入れたときは確認すること。
   ※ 詳細度 0-2-0。共通の .js-lines__line（0-1-0）より強い。 */
.index-about__catch .js-lines__line {
    padding-block: 0;
    margin-block: 0;
}

/* 576px以上は改行しない。1行につなげる。
   ※ 以前は br を display: none で消していたが、登場アニメを
     採用と同じ .js-lines に揃えたので、br ではなく
     .js-lines__line を inline-block にして横に並べる。
     共通の行送りアニメは行ごとの切り取り枠が必要なので、
     span を br に置き換えられない。
   ※ inline-block なら overflow: hidden が効くので、
     1行になっても下からの立ち上がりはそのまま残る。
     （inline にすると切り取りが効かないので不可）
   ※ ※重要※ HTML側で 2つの span の間を改行せずに書いてある
     （index.php）。改行すると間に空白が残る。
   ※ 幅は足りる。最も狭い 576px で字間込み約370px（使える幅 512px）、
     1024px以上の2カラム時でも約400px（左カラム 約432px）。
   ※ 採用（.index-recruit__catch）と同じ境・同じ手法。 */
@media (min-width: 576px) {
    .index-about__catch .js-lines__line {
        display: inline-block;
    }
}

/* ── キャッチコピーの登場（Philosophy / 事業内容 / 採用 共通）──
   FV（.fv__catch-text）と同じ「左から右へのワイプ」。
   文字は一切動かず、見えている範囲だけが右へ広がる。

   ※ 以前は共通の .js-lines（行ごとに下から立ち上がる）だったが、
     FV に合わせて差し替えた。
   ※ 発火は .is-revealed。animation.js が
     .js-lines を持つ要素に付ける。
     ※ 事業内容（.index-service__catch）は行送りアニメを
       使っていないが、検知のフックとして .js-lines を
       HTML側で付けてある（index.php）。

   ※ Philosophy / 採用は span の構造（.js-lines__line）を
     そのまま使う。576px以上で inline-block にして1行に
     つなげる仕組みがこれに依存しているため。
   ※ ※重要※ 中身の動き（translateY）は打ち消す。
     残すと2つの動きが重なる。
   ※ ※重要※ 切り取り枠（overflow: hidden）も外す。
     ワイプは clip-path が担うので不要。
     padding-block を 0 にしているぶん、残すと
     濁点やハネが欠けることがある。

   ※ 速さは FV と同値（1.1s / cubic-bezier(0.65, 0, 0.35, 1)）。
     片方を変えるときはもう一方もセットで見直すこと。
   ※ FV は animation（読み込み直後に再生）、こちらは transition
     （スクロールで .is-revealed が付いたら再生）と仕組みが違う。 */
/* ※ ※重要※ 検知対象（.js-lines を持つ p）自身には clip-path を掛けない。
     クリップで描画が消えた要素は IntersectionObserver が拾わず、
     is-revealed が付かないまま永久に閉じたままになる。
     同じ理由が SERVICE の大見出しにもある
     （.index-service__headline-wrap のコメント参照）。
     このサイトのリビールはすべて「検知する要素」と
     「隠す要素」を分けてある。

   ※ なのでクリップは内側の「行」に掛ける。
     Philosophy / 採用 … .js-lines__line
     事業内容         … 直下の span（行ごとに分けてある）

   ※ 幅は fit-content。ブロックのままだと行末の空白まで
     クリップが走り、文字が出切ってからも動いているように見える。
   ※ 2行目は少し遅らせて、左→右・上→下の順に読ませる。
   ※ 閉じた状態は :not(.is-revealed) の1本だけで持つ。
     「閉じる」と「開く」を2本に分けると、詳細度を
     一箇所間違えただけで開かなくなる。 */
/* ※ ※重要※ 上のコメントにある「閉じた状態は :not(.is-revealed) の
     1本だけで持つ」方式は廃止した。
     :not() だけで持つと、is-revealed が付いた瞬間に宣言ごと消えて
     clip-path が初期値の none に戻る。inset() ⇄ none は CSS の仕様上
     補間できない組み合わせなので transition が離散扱いになり、
     ワイプせずにパッと切り替わってしまう。
     （FV の .fv__catch-text が動いているのは、あちらが @keyframes で
       inset(0 100% 0 0) → inset(0 0 0 0) と両端とも inset で
       書いてあるため）
   ※ そのため閉じ（基本状態）と開き（.is-revealed）の2本に分け、
     両端とも inset() で持たせている。
     詳細度は 閉じ 0-2-0 / 開き 0-3-0 なので、後者が必ず勝つ。
     セレクタを足すときはこの前後関係を崩さないこと。
   ※ 速さは FV と同値（1.1s / cubic-bezier(0.65, 0, 0.35, 1)）。
     片方を変えるときはもう一方もセットで見直すこと。 */
/* ※ ※重要※ 事業内容（.index-service__catch）はこの登場アニメの
     対象から外した。上の説明に出てくる事業内容への言及は
     すべて過去の構成なので読み飛ばすこと。
     現在の対象は Philosophy（.index-about__catch）と
     採用（.index-recruit__catch）の2つだけ。 */
.index-about__catch .js-lines__line,
.index-recruit__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);
}

.index-about__catch.is-revealed .js-lines__line,
.index-recruit__catch.is-revealed .js-lines__line {
    clip-path: inset(0 0 0 0);
}

/* ※ 2行のときの 2行目の待ち時間。
     上のワイプと同じ 1.1s にしてあるので、
     1行目が開き切ってから 2行目が動き始める。
     （以前は 0.3s で、両行が重なって動いていた）
   ※ ※重要※ ワイプの長さを変えたらここも必ず同じ値にすること。
     短いと 1行目が出切る前に 2行目が始まり、
     長いと途中で間が空く。
   ※ 3行以上にするときは nth-child(3) に calc(1.1s * 2) と
     倒していけば同じ順送りになる。 */
/* ※ ※重要※ 上のコメントの「1.1s」は古い。現在は 1.5s。
     ワイプと同値なので、1行目が開き切ってから 2行目が動き始める
     （2行のときの全体は 1.5 × 2 ＝ 3s）。
   ※ FV（.fv の --fv-catch-dur）は 2s でこことは別値。
     FV は導入としてじっくり見せ、こちらはスクロールの
     流れを止めない、という意図で分けてある。
     上の「FV と同値」の記述も古いので読み飛ばすこと。 */
.index-about__catch .js-lines__line:nth-child(2),
.index-recruit__catch .js-lines__line:nth-child(2) {
    transition-delay: 1.5s;
}

.index-about__catch .js-lines__line,
.index-recruit__catch .js-lines__line {
    overflow: visible;
}

.index-about__catch .js-lines__line > span,
.index-recruit__catch .js-lines__line > span {
    transform: none;
    transition: none;
}

/* ── 1行になっているときは全体を一続きにワイプする ──
   576px以上は .js-lines__line（事業内容は直下の span）を
   inline-block にして1行につなげているが、クリップが
   行ごとに掛かったままだと、1行に見えていても内部では
   2箇所で別々にワイプが走る。文字数が違うと短い方が
   先に開き終わるので、継ぎ目が見えてしまう。
   ※ そこで 1行のときは行側のクリップを止め、
     行をまとめて包む .js-lines__inner にクリップを移す。
     左端から右端まで一筆で開くので FV と同じ見え方になる。

   ── なぜラッパーが要るか ──
   ※ クリップを p（.index-about__catch など）に直接掛けられない。
     p は .js-lines を持つ IntersectionObserver の検知対象で、
     クリップで描画が消えた要素は拾われず、is-revealed が
     付かないまま永久に閉じたままになる。
     詳しくは上の「検知対象には clip-path を掛けない」を参照。
   ※ .js-lines__inner は common.css には無い。
     このワイプのためだけに index.php で足した入れ物なので、
     定義はここにしか無い。
   ※ 行（.js-lines__line）はこのラッパーの子になるが、
     common.css 側はすべて子孫セレクタなので
     一枚深くなってもそのまま効く。
     :nth-child(2)（上の遅延）もラッパー内で数え直されるだけなので
     2行目を指すまま。 */
/* ※ 使い先は Philosophy（.index-about__catch）と
     採用（.index-recruit__catch）の2つだけ。
     事業内容（.index-service__catch）は登場アニメをやめたので
     このラッパーを持たない（index.php 側も外してある）。
     上の説明に出てくる事業内容への言及は過去の構成。 */
.js-lines__inner {
    display: block;
}

@media (min-width: 576px) {
    /* 行側のクリップを止める。
       ※ 閉じと開きの両方を打ち消す必要がある。
         片方だけだと is-revealed が付いた時点で
         詳細度の高い方が inset を当てにくる。 */
    .index-about__catch .js-lines__line,
    .index-about__catch.is-revealed .js-lines__line,
    .index-recruit__catch .js-lines__line,
    .index-recruit__catch.is-revealed .js-lines__line {
        clip-path: none;
        transition: none;
    }

    /* 代わりにラッパーを開く。速さ・イージングは行側と同値。
       ※ width: fit-content は必須。ブロックのままだと行末の
         空白までクリップが走り、文字が出切ってからも
         動いているように見える。 */
    .index-about__catch .js-lines__inner,
    .index-recruit__catch .js-lines__inner {
        width: fit-content;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .index-about__catch.is-revealed .js-lines__inner,
    .index-recruit__catch.is-revealed .js-lines__inner {
        clip-path: inset(0 0 0 0);
    }
}

/* ※ 開き側（.is-revealed、0-3-0）も一緒に打ち消す。
     基本状態（0-2-0）だけ none にしても、is-revealed が付いた時点で
     詳細度の高い方が inset(0 0 0 0) を当てにくる。
     結果は全開なので見た目は同じだが、意図を明示するため両方書く。
   ※ このブロックは上の2本より後ろに置くこと。
     同詳細度は後勝ちなので、前に移すと打ち消せなくなる。 */
@media (prefers-reduced-motion: reduce) {

    .index-about__catch .js-lines__line,
    .index-recruit__catch .js-lines__line,
    .index-about__catch.is-revealed .js-lines__line,
    .index-recruit__catch.is-revealed .js-lines__line,
    .index-about__catch .js-lines__inner,
    .index-recruit__catch .js-lines__inner,
    .index-about__catch.is-revealed .js-lines__inner,
    .index-recruit__catch.is-revealed .js-lines__inner {
        clip-path: none;
        transition: none;
    }
}

/* ※ 見出し（英字の Philosophy）は共通の登場アニメをそのまま使う。
     帯が左→右に横切り、その後を追って文字が現れる。
     他セクション（Works / Strengths / Recruit / News / 共通CTA）と同じ。
   ※ 以前はここで
         .index-about .section-head.js-reveal .section-head__title
         .index-about .section-head.js-reveal .section-head__title::after
     の2本を使って打ち消していた。
     セクション全体に黒帯が降りてくる演出があった頃の名残で、
     帯と文字が同時に動くとお互いを打ち消すため止めていた。
     その帯アニメ自体を廃止したので、打ち消す理由が無くなった。
   ※ 下のラベル（日本語「会社概要」）も同じく共通側に戻してある。 */

/* ラベル（日本語「会社概要」）も共通の登場アニメをそのまま使う。
   左の装飾が弾け → 帯が横切り → 文字が現れる。
   ※ 以前はここで 3本（文字色 / ::before の scale /
     __label-text::after の maskSweep）を打ち消していたが、
     セクションの帯アニメを廃止したので不要になった。

   ※ 色だけは共通の既定（--color-text-light）ではなく、
     暗背景向けの白系に上書きする。
     採用・暗色ブロックと同値（濃度 0.66）。
   ※ ※重要※ 上書きは is-revealed 側だけにすること。
     基本側（.section-head.js-reveal .section-head__label）にも書くと
     共通の color: transparent を潰してしまい、
     帯が通る前から文字が見えてしまう。
   ※ transition は書かない。共通側の
     transition: color 0s linear 0.28s（帯の後に現れる遅延）を残す。 */
.index-about .section-head.js-reveal.is-revealed .section-head__label {
    color: rgba(245, 244, 242, 0.66);
}

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

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

/* ── 文字の登場をL字の後に回す ──
   帯と同時に文字が出るとお互いを打ち消すので、
   L字が描き終わるまで待たせる。

   ※ 共通側（common.css）の見出しアニメは4つの部品でできている。
     遅延を入れ損ねるとそこだけ先に動いてしまうので、
     4つすべてに揃えてかける。
       1. ラベル左の正方形（scale）
       2. ラベルの帯（maskSweep）
       3. ラベルの文字色（帯の後に現れる）
       4. 見出しの行送り（.js-lines）

   ※ 3 は共通側で既に 0.28s の遅延を持っているので、
     その分を足して順番を保つ。

   ※ 本文（__text）とリンク（__link）には
     登場アニメを付けていないので対象外。 */
.index-about__grid {
    display: grid;
    gap: var(--spacing-lg);
}

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

/* ※ 以前は本文ブロックの右上にロゴ装飾（.index-about__logo）を
     絶対配置していたが削除した（画像ファイルは残してある）。
     伴って .index-about__body の position: relative と
     子要素の z-index: 1 も不要になった。
   ※ 戻すときは下の3つをセットで復活させること。
       1. .index-about__body の position: relative（絶対配置の基準）
       2. .index-about__logo の z-index: 0
       3. 兄弟要素の z-index: 1（見出し・本文を前面に出す）
     どれか1つでも欠けるとロゴが文字の上に乗るか、
     完全に隠れる。
   ※ 1440px以上でロゴの右端を内側に寄せていた上書きも削除済み。 */

/* 段落のまとまり。
   ※ 段落間の間隔は p の margin ではなくここの gap で取る。
     margin だと最後の段落の下にも余白が残り、
     下のボタン（.index-about__link の margin-top）と
     二重になる。
   ※ 段落を増減しても CSS は触らなくてよい。 */
.index-about__texts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.index-about__text {
    color: rgba(245, 244, 242, 0.8);
}

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

/* 見た目は共通の .btn / .btn--outline に任せ、
   ここは本文カラムの右端に寄せる指定だけを持つ。
   ※ 採用（RECRUIT）の .index-recruit__button と同じ考え方。
   ※ inline-flex のままだと margin-left: auto が効かないので flex にする。
     width: fit-content を併用するのは、ブロックのままだと
     幅がカラムいっぱいに伸びて右寄せにならないため。 */
.index-about__link {
    display: flex;
    width: fit-content;
    margin-top: var(--spacing-md);
    margin-left: auto;
}

/* ※ ホバーの見た目は common.css の .btn--frame が持つ。
     以前はここで
         .index-about__link.btn--outline:is(:hover, :active)
     に「面をごく薄い白で満たして枠線を白に上げる」指定を
     書いていたが、HTML を .btn--frame に差し替えたので
     セレクタが一致しなくなり削除した。
   ※ このボタンだけ別のホバーにしたい場合は
     .index-about__link.btn--frame:is(:hover, :active) で上書きする。
   ※ 採用（.index-recruit__button）も同じ手順で差し替え済み。 */

/* 矢印の動きは共通側（.btn:is(:hover, :active) .btn__arrow）に任せる。
   ※ translate(2px, -2px) は rotate(45deg) をかけた後の座標系での値なので、
     画面上は真横（右）へ約2.8px 滑る動きになる。上には跳ねない。
   ※ 以前右上へ跳ねて見えたのは、ボタン本体の translateY(-2px) と
     重なっていたため。そちらは上のブロックで止めてある。 */

/* ── 写真の入れ物 ──
   写真2枚を単純に縦に並べる。
   ※ 以前は箱を作って 2枚を斜めにずらして重ね、
     3枚目（複製）の不透明度で前後を入れ替えていた。
     重なりをやめたので、下の仕組みをすべて外してある。
         --about-swap-dur（入れ替え周期）
         --about-img-offset（内側への寄せ量）
         --about-figure-bg（隅に残る正方形の色）
         絶対配置・z-index・@keyframes aboutSwapFade
         index.php の --02-front の img
     戻すときはこの5つをセットで復活させること。
   ※ 間隔は gap で取る。
   ※ ※重要※ align-content は持たないこと。
     1024px以上で行を minmax(0, 1fr) にして本文に
     高さを揃えるので、start を残すと行が上寄せに
     固定されて伸びなくなる。

   ── 並び方の切り替わり ──
       〜1023px    横並び（2列）
       1024〜1599   縦積み（2行）… 右カラムが半分幅になるため
       1600px〜     横並び（2列）… 右カラムが再び広くなるため
     ※ 切り替えるときは grid-template-columns と
       grid-template-rows を必ず両方戻すこと。
       片方だけ残ると2×2 のグリッドになり、
       空の行・列が場所を占める。 */
.index-about__figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* ※ 写真2枚の間隔。2段階（ベース 1rem → 1024px以上 1.5rem）。
         ベースの 1rem に対応する --spacing-* の段が無いため
         ここだけ実値で持っている。 */
    gap: 1rem;
}

/* ※ 元画像は 640×800（＝4 / 5 の縦位置）。
     横並びだと1枚あたりが半分幅になるので、
     元画像と同じ 4 / 5 で使うと切り落ちが最小になり、
     縦長の2枚並びとしても収まりがよい。
     ※ 以前は縦積みだったので 4 / 3（横長）に切っていた。
       横並びで 4 / 3 のままだと、幅の狭いセルに
       横長写真が入って帯のように見える。
     ※ 1024px以上はこの比率を外し、高さを本文に揃える。
   ※ 切り落ち方が気になる場合は object-position を追加する。 */
.index-about__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(var(--photo-grayscale));
}

/* ── 写真2枚の並び順 ──
   ※ 1023px以下の横並びのときだけ1枚目を右、
     2枚目を左に置く。HTML順（写真1 → 写真2）は触らない。
   ※ 1024px以上は縦積みに戻るので、下の 1024px ブロックで
     order を打ち消して HTML順（写真1が上）に戻している。
     1600px以上の横並びでもそのまま HTML順。
     あちらも入れ替えたい場合は 1600px 側にも
     同じ order を書く。
   ※ --01 / --02 のクラスは HTML 側に残してある。
     片方だけトリミングを変えたいときなどにも使える。 */
.index-about__image--01 {
    order: 2;
}

.index-about__image--02 {
    order: 1;
}

/* ※ 写真の入れ替えアニメ（aboutSwapFade）は廃止した。
     2枚を重ねなくなったので、前後を入れ替える意味がない。
     @keyframes・--02-front の img・z-index・
     prefers-reduced-motion の上書きもまとめて削除済み。
     写真には動きが一切無くなったので、
     動きを減らす設定向けの配慮も不要になっている。 */

/* PC（1024px〜）：写真2枚の合計高さを左の本文に揃える。

   仕組み：
     1. グリッドの align-items: stretch（.index-about__grid 側）で
        figure が行の高さ（＝左の本文）いっぱいに伸びる。
     2. figure を 1fr 1fr の2行グリッドにし、
        与えられた高さを 2枚で均等に分け合う。
     3. 画像側の aspect-ratio を外し、height: 100% で
        行の高さをそのまま受け取る。

   ※ ※重要※ align-content: start を打ち消すこと。
     残していると行が上寄せに固定され、
     1fr が伸びずに高さが揃わない。
   ※ ※重要※ 画像の aspect-ratio を auto に戻すこと。
     比率が残っているとそちらが優先され、
     行の高さと一致しない。
   ※ 本文が短いときの下限を min-height で保険に持たせる。
     これがないと写真が潰れることがある。

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

   ── なぜ height: 0 が必要か ──
   ※ ※重要※ align-items: stretch は「低い方を高い方に揃える」
     だけで、「figure を本文に合わせる」指定ではない。
     行の高さは「本文と figure のうち高いほう」で決まるので、
     写真が背高くなれば行ごと伸びて永久に揃わない。
     （画面が広いほど写真の実寸が大きくなるので、
       1200px 付近から顕著になる）
   ※ height: 0 にすると figure は行の高さ計算に「0」として
     参加するので、行の高さは本文だけで決まる。
     そのうえで min-height: 100% が確定した行の高さを受け取る。
   ※ min-height: 20rem は min-height: 100% と競合するので外してある。

   ── 高さの内訳 ──
   写真列の高さ = 本文の高さ + --spacing-3xl（8rem）
   ※ margin-top の飛び出し分だけ本文より高くなる。
     「上端まで伸ばす」と「本文と同じ高さ」は両立しないので、
     完全に揃えたい場合は margin-top を削除する。
   ※ 下は伸ばさない。下余白はL字の横棒
     （--about-band-foot-h）が使う場所なので、
     埋めると帯が写真に重なる。
   ※ .section の padding-top（768px〜は --spacing-3xl）を
     変えたときはここも合わせること。 */
@media (min-width: 1024px) {
    .index-about__figure {
        /* ※ minmax(0, 1fr) なのは、行が既定で「中身の
             最小サイズを下回らない」ため。生の 1fr だと
             写真の実寸高さが下限になって縮めない。
           ※ ※重要※ ベースの2列を 1列に戻すこと。
             戻さないと 2×2 のグリッドになり、2枚が1行目に
             入って2行目が空のまま高さの半分を占める。 */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        height: 0;
        /* ※ ※重要※ 飛び出し分（margin-top）を足すこと。
             100% だけだと本文と同じ高さしか確保されず、
             上に 8rem 上げた分だけ下端が手前で終わって
             写真の下に空白が残る。
           ※ margin-top を変えるときはここもセットで直すこと。 */
        min-height: calc(100% + var(--spacing-3xl));
        margin-top: calc(var(--spacing-3xl) * -1);
        /* ※ 縦積みになるので上下の間隔を一段広げる。 */
        gap: var(--spacing-sm);
    }

    /* ※ ※重要※ 子の height: 100% は親の height を参照する。
         親が height: 0 / min-height: 100% の形なので、
         子から見た親の height は 0 に解決され得る。
         行（minmax(0, 1fr)）の高さを確実に受け取るには、
         高さではなく伸縮で埋める。
       ※ align-self / justify-self の既定は stretch なので、
         height / width を auto に戻すだけで行と列を埋める。
         height: 100% を残すとそちらが優先されて 0 になる。
       ※ min-height: 0 は写真の実寸が下限になるのを防ぐため。
         これが無いと行を押し広げる。 */
    .index-about__image {
        height: auto;
        min-height: 0;
        align-self: stretch;
        aspect-ratio: auto;
        /* ※ ベースで入れ替えた順番を HTML順に戻す。
             縦積みなので写真1が上、写真2が下になる。 */
        order: 0;
    }
}

/* 1600px以上：写真2枚を横並びにする。
   ※ 右カラムが十分に広くなるので、縦積みだと1枚あたりが
     横長になりすぎて写真が帯のように見える。
     横に割れば1枚あたりが縦長になり、左の本文との
     均衡も取れる。
   ※ 行・列の役割が入れ替わるだけで、高さの仕組み
     （height: 0 / min-height / margin-top）はそのまま使える。
   ※ ※重要※ grid-template-rows を auto に戻すこと。
     minmax(0, 1fr) の2行が残っていると、1行目に2枚が
     入り、2行目が空のまま高さの半分を占める。
   ※ 列も minmax(0, 1fr)。写真の実寸幅が下限になるのを防ぐ。
   ※ 1440px以上で列比が 1 : 0.85 に変わる（--about-col-div）ので、
     切り替えをこれより手前にする場合は右カラムの
     実幅を見て判断すること。 */
@media (min-width: 1600px) {
    .index-about__figure {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto;
    }

    /* 横並びに戻ると1枚あたりの幅が狭くなり、
       中央基準（object-position の既定）では左右が
       均等に切り落とされる。左から65%・上から50%の位置を
       基準にして、写真の右寄りに写っている被写体を残す。
       ※ 書き方は FV の background-position（left 85% top 35%）と揃えてある。
         右端いっぱいにしたい場合は left 100%（＝right と同義）。
       ※ 2枚とも同じ基準。片方だけ変えたいときは
         .index-about__image--01 / --02 で個別に上書きする。
       ※ 1599px以下は既定（中央）のまま。 */
    .index-about__image {
        object-position: left 65% top 50%;
    }
}

/* ================================================================
   強み（STRENGTHS）
================================================================ */

/* ── 背景のL字装飾（アイキャッチ） ──
   下のラベル装飾（左下の濃いL＋右上の淡いL）を
   そのままセクション全体まで引き伸ばしたもの。
   2つのLが向かい合い、中央に地の色が四角く残る。

   ※ 仕組みもラベル装飾と同じ「背景グラデーションで棒を描く」方式。
     1つのLにつき縦棒と横棒の2枚を重ね、
     background-size を 0% → 100% にして伸ばす。
     transform を使わないのでレイアウトを押し広げない。

   ※ 伸びる向きは background-position の基準角で決まる。
     形は左下＋右上のままで、描き出しだけを
     四本とも左上寄りに揃えてある。
     縦棒は上から下へ、横棒は左から右へ伸びる。

   ※ 地（--black-3 ＝ #0D0D0D）に対して、
     2本とも同じ色（--black-4 ＝ #171717）で描き始め、
     描き終わったら両方とも地と同じ --black-3 へ収束させる。
     つまり「L字が描かれ、そのまま地に溶けて消える」動き。
     ※ 静止状態ではL字は見えない。登場演出だけの存在。
       残したい場合は --strengths-band-ink-end を
       地以外の値（例：--black-4）にすればよい。
     ※ 収束先を地と同値に保つ限り、地の色を変えたときは
       --strengths-band-ink-end も必ず合わせること。
     ※ 左下と右上で濃淡を付けたい場合は
       --strengths-band-ink-sub だけを変える。
       現在は2本とも同値なので階調差は無い。
     ※ ※重要※ 色の遷移は縦棒・横棒を別レイヤーで
       描いているL字の角でも問題にならない。
       両方が同じ終点色へ同じ時間で向かうので、
       角の重なりは常に同色であり続ける。
     ※ 暗転前は地が #F5F4F2 で、地より暗いグレー2色
       （#E4E2DE / #F0EFED）を置きっぱなしにしていた。
     濃さを変えるときは下の3つの変数だけを触る。

   ※ 色は必ず不透明で持つこと。縦棒と横棒を
     別の背景レイヤーで描いているため、半透明だと
     Lの角で二重に重なってそこだけ濃くなる（ラベル装飾と同じ注意点）。

   ※ 開始の合図（.is-revealed）は .js-band を付けた要素に
     animation.js が付ける。HTML側は <section> に .js-band を足すだけ。 */
.index-strengths {
    /* セクションの地（上から下への勾配）。
       ※ 下端をページ背景（--color-bg ＝ #0D0D0D）と同値にして
         次の採用セクションへ継ぎ目なくつなげている。
         上端だけ一段浮かせて、上のご挨拶との境を出す。
       ※ ※重要※ 下のL字装飾は「描き終わったら地に溶けて消える」
         作りなので、収束先はこの2つの変数を参照している。
         地を変えるときは .is-revealed::before / ::after も
         自動で追従するので、この2行だけを直せばよい。 */
    --strengths-bg-top:    var(--color-bg-raise);   /* 上端：#111111 */
    --strengths-bg-bottom: var(--black-3);          /* 下端：#0D0D0D */

    --strengths-band-ink:     var(--black-4);       /* 左下：描き始め */
    --strengths-band-ink-sub: var(--black-4);       /* 右上：描き始め（現在は左下と同値） */

    /* 色が収束するまでの時間と、描き終わってからの間。
       ※ 描き終わる前に溶け始めると、伸びる途中で
         先端が薄くなって「描いている」感が死ぬ。
         必ず --strengths-band-dur 分は待つこと。
       ※ 右上Lは --strengths-band-delay だけ遅れて始まるので、
         そちらの遅延には同じ分を足す。 */
    --strengths-band-fade: 0.9s;
    --strengths-band-hold: 0.35s;

    /* セクションの地。上から下へ #111111 → #0D0D0D。
       ※ HTML側に .section--light（--color-bg-light ＝ #1F1F1F）を
         付けてあるが、それだとL字の描き始め（#171717）より
         明るくなり、L字が地に埋もれる。ここで上書きする。
       ※ background-color も同じ下端色で持つ。
         .section--light の塗りを確実に打ち消すため。
       ※ 色の変更は上の --strengths-bg-top / -bottom だけを触る。
       ※ 詳細度は .section--light と同じ 0-1-0。
         index.css が common.css より後に読まれるので勝つ。
         読み込み順を変えるときは注意。 */
    background-color: var(--strengths-bg-bottom);
    background-image: linear-gradient(to bottom,
        var(--strengths-bg-top) 0%,
        var(--strengths-bg-bottom) 100%);
    /* 縦棒の太さ＝画面端から本文の左端までの距離。
       ※ .section__inner は max-width を持つ（576 → 800 → 1320px）ので、
         上限に達した後は画面を広げるほど余白が増える。
         パディング固定だと帯が本文から離れていくため、
         「余った幅の半分」と比べて大きい方を採る。
       ※ 100% は ::before / ::after 側で解釈されるのでセクションの幅。
       ※ 本文幅が上限に達する前（狭い画面）は
         引き算がマイナスになるので、max() でパディング側が勝つ。
       ※ 段階値（--section-width-*）を変えたときは
         下のメディアクエリも合わせること。 */
    --strengths-band-w: max(
        var(--section-pad-x),
        calc((100% - var(--section-width-sm)) / 2)
    );
    /* 横棒の太さ＝上下パディング。
       ※ .section の padding-block は 768px以上で --spacing-3xl に変わるので、
         下のメディアクエリで合わせている。 */
    --strengths-band-h: var(--spacing-xxl);
    --strengths-band-dur: 2s;
    --strengths-band-delay: 0.25s;                  /* 右上Lの遅れ */

    position: relative;
}

@media (min-width: 768px) {
    .index-strengths {
        --strengths-band-w: max(
            var(--section-pad-x),
            calc((100% - var(--section-width-content)) / 2)
        );
        --strengths-band-h: var(--spacing-3xl);
    }
}

@media (min-width: 1024px) {
    .index-strengths {
        --strengths-band-w: max(
            var(--section-pad-x),
            calc((100% - var(--section-width-xl)) / 2)
        );
    }
}

.index-strengths::before,
.index-strengths::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    /* 初期状態：棒の長さを 0% にして見えなくしておく。
       ※ 太さ側（rem）は固定、長さ側だけを % で動かす。
         単位を揃えておくと補間が確実になる。 */
    background-size:
        var(--strengths-band-w) 0%,
        0% var(--strengths-band-h);
    pointer-events: none;
}

/* 左下のL（濃いめ）：左辺＋下辺
   ※ 形は左下だが、描き出しは左上に揃える。
     縦棒（左辺）は left top 基準で上から下へ、
     横棒（下辺）は left bottom 基準で左から右へ。
     どちらも左端から始まるので、
     左上から線が降り、下端で右へ曲がる見え方になる。
   ※ 色の収束は transition で行う。描画自体は
     background-size の @keyframes なので、同じ要素で
     アニメーションとトランジションを併用できる
     （動かすプロパティが違うので衝突しない）。 */
.index-strengths::before {
    /* 左下のLを前面にする。
       ※ 2つのLは左上と右下の角で重なる。
         指定がないと DOM順で ::after（淡）が上になり、
         濃いLが角で途切れて見える。 */
    z-index: 1;
    background-image:
        linear-gradient(var(--strengths-band-ink), var(--strengths-band-ink)),   /* 左辺（縦棒） */
        linear-gradient(var(--strengths-band-ink), var(--strengths-band-ink));   /* 下辺（横棒） */
    background-position:
        left top,
        left bottom;
    transition: background-image var(--strengths-band-fade) ease
                calc(var(--strengths-band-dur) + var(--strengths-band-hold));
}

/* 描き終わったら地の色へ。
   ※ .is-revealed は描画開始と同時に付くので、
     待ち時間は上の transition-delay が担う。
   ※ 描画アニメ（animation）はこの後ろで
     .is-revealed::before にまとめて指定している。
     同じセレクタを二度書くと後勝ちで片方が消えるので、
     プロパティが違っても一つのルールにまとめること。 */
.index-strengths.is-revealed::before {
    background-image:
        linear-gradient(var(--strengths-bg-top), var(--strengths-bg-bottom)),
        linear-gradient(var(--strengths-bg-bottom), var(--strengths-bg-bottom));
}

/* 右上のL（薄め）：右辺＋上辺
   ※ こちらも描き出しを左上寄りに揃える。
     横棒（上辺）は left top 基準で左から右へ、
     縦棒（右辺）は right top 基準で上から下へ。
     上辺が左から伸び、右端で下へ曲がる見え方になる。
   ※ ※重要※ 遅延に --strengths-band-delay を足すこと。
     こちらは描き始めがその分だけ遅いので、
     左下Lと同じ遅延にすると描き終わる前に溶け始める。
   ※ 終点色は左下Lと同じ --strengths-band-ink-end。
     これにより、両方が重なる左上・右下の角でも
     遷移中の色差が問題にならない。 */
.index-strengths::after {
    z-index: 0;
    background-image:
        linear-gradient(var(--strengths-band-ink-sub), var(--strengths-band-ink-sub)),   /* 右辺（縦棒） */
        linear-gradient(var(--strengths-band-ink-sub), var(--strengths-band-ink-sub));   /* 上辺（横棒） */
    background-position:
        right top,
        left top;
    transition: background-image var(--strengths-band-fade) ease
                calc(var(--strengths-band-dur) + var(--strengths-band-delay) + var(--strengths-band-hold));
}

.index-strengths.is-revealed::after {
    background-image:
        linear-gradient(var(--strengths-bg-top), var(--strengths-bg-bottom)),
        linear-gradient(var(--strengths-bg-top), var(--strengths-bg-top));
}

/* ── 描き順：一筆でLを書くように順番に伸ばす ──
   ※ background-size の2つのレイヤーを別々のタイミングで
     動かしたいが、transition はプロパティ単位でしかかからず、
     レイヤーごとに時間差を付けられない。
     @keyframes なら中間地点で片方だけを伸ばし切った状態を
     作れるので、こちらを使う。

   ※ 左下のL：縦棒（左辺）が上から下へ → 下端まで来たら
     横棒（下辺）が左から右へ。
   ※ 右上のL：横棒（上辺）が左から右へ → 右端まで来たら
     縦棒（右辺）が上から下へ。

   ※ イージングは区間ごとに指定する。
     前半は加速して終わり、後半はその速さから減速へ入るので、
     角で速度が途切れず一筆に見える。 */
@keyframes strengthsBandLB {
    0% {
        background-size:
            var(--strengths-band-w) 0%,
            0% var(--strengths-band-h);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }

    50% {
        background-size:
            var(--strengths-band-w) 100%,
            0% var(--strengths-band-h);
        animation-timing-function: cubic-bezier(0, 0, 0.1, 1);
    }

    100% {
        background-size:
            var(--strengths-band-w) 100%,
            100% var(--strengths-band-h);
    }
}

@keyframes strengthsBandRT {
    0% {
        background-size:
            var(--strengths-band-w) 0%,
            0% var(--strengths-band-h);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }

    50% {
        background-size:
            var(--strengths-band-w) 0%,
            100% var(--strengths-band-h);
        animation-timing-function: cubic-bezier(0, 0, 0.1, 1);
    }

    100% {
        background-size:
            var(--strengths-band-w) 100%,
            100% var(--strengths-band-h);
    }
}

/* ※ --strengths-band-dur はL字1本を描き切るまでの合計時間。
     縦棒と横棒でその半分ずつを使う。
   ※ forwards で描き終わった状態を保持する。
   ※ ※重要※ 色の収束（background-image の transition）も
     同じ .is-revealed::before / ::after に付いているが、
     上のブロックで先に宣言してある。
     同じセレクタを分けて書いても、宣言する
     プロパティが違えば両方とも適用される
     （animation と background-image は衝突しない）。 */
.index-strengths.is-revealed::before {
    animation: strengthsBandLB var(--strengths-band-dur) forwards;
}

.index-strengths.is-revealed::after {
    animation: strengthsBandRT var(--strengths-band-dur) var(--strengths-band-delay) forwards;
}

/* 見出し・カードはL字より前面に置く。
   ※ 重なり順は 淡いL（0）< 濃いL（1）< 本文（2）。 */
.index-strengths .section__inner {
    position: relative;
    z-index: 2;
}

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

    .index-strengths::before,
    .index-strengths::after,
    .index-strengths.is-revealed::before,
    .index-strengths.is-revealed::after {
        background-size:
            var(--strengths-band-w) 100%,
            100% var(--strengths-band-h);
        animation: none;
        /* ※ 色の収束も即時にする。
             収束先が地と同値なので、結果的に
             L字は最初から見えない状態になる。 */
        transition: none;
    }
}

/* ラベル装飾：L字を2つ向かい合わせて正方形に見せる。
   左下の L（左辺＋下辺、濃）と右上の L（右辺＋上辺、淡）を
   対角に重ねる。上の背景のL字装飾と、
   カードの隅に入れたL字装飾の両方と形が揃う。
   ※ 疑似要素1つで描くため、border ではなく
     背景グラデーション4枚（縦棒・横棒 × 2組）で組む。
   ※ 線幅は整数pxで持つこと。端数にすると輪郭がにじむ。
   ※ Lの線の長さ（--strengths-arm）は外形と同じ値にする。
     短くすると対角に隙間ができる。
   ※ 右上Lの淡い方は半透明にしないこと。
     縦棒と横棒を別の背景レイヤーで描いているため、
     半透明だと角で二重に重なってそこだけ濃くなる。
     rgba(245, 244, 242, 0.35) を地（#0D0D0D）の上に
     乗せた相当色（#5F5F5E）を直接指定する。
     ※ 暗転前は rgba(13, 13, 13, 0.3) を #F5F4F2 に乗せた #B2B1B0 だった。
     ※ ※重要※ セクションの背景色を変えたらこの色も計算し直すこと。
       地が #080808 の頃は #5B5B5A、#1F1F1F の頃は #6C6C6B、
       #161616 の頃は #646463。 */
.index-strengths .section-head__label {
    --label-mark: var(--mark-size);
    --strengths-line: 3px;
    --strengths-arm: var(--mark-size);
    --mark-ink: var(--color-title);
    --mark-ink-sub: #5F5F5E;
}

.index-strengths .section-head__label::before {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink) 0 0),           /* 左下L：左辺（濃） */
        linear-gradient(var(--mark-ink) 0 0),           /* 左下L：下辺（濃） */
        linear-gradient(var(--mark-ink-sub) 0 0),       /* 右上L：右辺（淡） */
        linear-gradient(var(--mark-ink-sub) 0 0);       /* 右上L：上辺（淡） */
    background-size:
        var(--strengths-line) var(--strengths-arm),
        var(--strengths-arm) var(--strengths-line),
        var(--strengths-line) var(--strengths-arm),
        var(--strengths-arm) var(--strengths-line);
    background-repeat: no-repeat;
    background-position:
        left bottom,
        left bottom,
        right top,
        right top;
}

/* ================================================================
   1024px〜：見出しを右端に縦書きで置く
   カードを左、見出しを右に並べる。
   見出しの中では英字（大）が右、日本語（小）がその左。

   ※ 1023px 以下はこれまでどおりの横書き・縦積み。
     狭い画面で縦書きにすると見出しだけで
     画面の高さを使い切ってしまうため。

   ※ writing-mode: vertical-rl はブロック方向が右→左になるので、
     flex の column 軸もそのまま右→左に並ぶ。
     order で英字を先（＝右）に出す。
   ※ 縦書きでは align-items は「上下揃え」になる。
     flex-start で上揃え。
================================================================ */
@media (min-width: 1024px) {

    /* HTML順は「見出し → カード」。
       見た目は逆なので列を明示する。
       ※ 列を入れ替えるだけなので、読み上げは
         見出しが先のまま保たれる。 */
    .index-strengths .section__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--spacing-xl);
        align-items: start;
    }

    .index-strengths .section-head {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
    }

    .index-strengths__list {
        grid-column: 1;
        grid-row: 1;
    }

    .index-strengths .section-head--swap {
        writing-mode: vertical-rl;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    /* 英字（右・大）。
       ※ 縦に長く伸びるので、横書き時より大きく取れる。
         カードの高さに対して長すぎるとこぼれるので、
         文字数を変えるときはこの値も見直すこと。
       ※ ※重要※ line-height を 1 にしないこと。
         縦書きでは行ボックスが「横幅」になるので、
         1 だと g のディセンダと S / t / h のアセンダが
         入り切らず左右で切れる。
       ※ 帯アニメの切り取り枠（.section-head.js-reveal 側の
         overflow: hidden）もあるので、padding で上下（縦書きでは
         左右）に余裕を取り、同じ分を負のマージンで相殺して
         見た目の位置を変えない。common.css の
         .js-lines__line と同じ手法。 */
    .index-strengths .section-head--swap .section-head__title {
        order: 1;
        font-size: clamp(3rem, 5vw, 4.5rem);
        line-height: 1.15;
        letter-spacing: var(--display-letter-spacing);
        padding-block: 0.08em;
        margin-block: -0.08em;
    }

    /* 日本語（左・小）。
       ※ 装飾マーク（::before）は flex の先頭なので、
         縦書きでは文字の上に並ぶ。 */
    .index-strengths .section-head--swap .section-head__label {
        order: 2;
        margin-bottom: 0;
    }
}

.index-strengths__list {
    display: grid;
    /* ※ カード間の間隔は全ブレークポイント共通で 3rem。
         以前は 2rem →（768px以上）3rem の2段だった。
       ※ 768px以上は2列になるので、この値は列間の溝も兼ねる。 */
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .index-strengths__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* カード本体は padding を持たない。
   上のイラストをカード幅いっぱいに出したいので、
   余白はテキスト側（__body）に持たせる。 */
.index-strengths__item {
    position: relative;
    display: flex;
    flex-direction: column;
    /* ※ 面は塗らない。セクションの地（--black-3）をそのまま見せ、
         カードの輪郭はこの枠線だけで示す。
       ※ 枠線の色は共通CTA（.cta-group）と同じ --color-border
         （rgba(255,255,255,0.15)）。サイト内の「面を塗らない箱」で
         揃えてあるので、変えるときは両方を見ること。
       ※ 写真（__figure）は枠の内側いっぱいに出る。
         余白を入れたい場合は __figure 側に padding を持たせる。
       ※ 面を塗る場合は background-color: var(--color-secondary); を
         ここに足す。 */
    border: 1px solid var(--color-border);
    color: var(--color-text-inverse);
}

/* 上部の写真（4 / 3）
   ※ カード幅いっぱいに出す。カード本体が padding を
     持たず、余白をテキスト側（__body）に持たせているのは
     このため。
   ※ 幅を変えるときは --strengths-figure-w だけを触る。
     100%未満にすれば margin-inline: auto で中央寄せになる
     （以前は 85% で内側に寄せていた）。
   ※ 登場アニメはカード全体（.index-strengths__item の .js-reveal）
     が担うので、ここには付けない。 */
.index-strengths__figure {
    --strengths-figure-w: 100%;

    width: var(--strengths-figure-w);
    margin-inline: auto;
    overflow: hidden;
}

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

/* テキスト側。
   ※ flex: 1 で残りの高さを卸す。こうするとテキスト量が
     違ってもカードの背景高さが揃う（グリッドの stretch を活かす）。
   ※ 四辺とも同じ余白を取る。
     以前は上だけ 0 にしていた。写真が85%幅で中央寄せだった頃は
     写真の下に自然な隔たりができていたが、
     カード幅いっぱい（100%）にしたことで
     写真の下辺に連番が直接接するようになったため。
   ※ 写真を再び内側に寄せる（--strengths-figure-w を 100%未満）
     場合は、ここの上余白を 0 に戻すことを検討する。 */
.index-strengths__body {
    flex: 1;
    /* ※ 四辺に余白を取る。カードに枠線を付けたので、
         左右を 0 にすると文字が枠に張り付く。
       ※ 写真（__figure）は幅100%で枠の内側いっぱいに出るので、
         写真の端とテキストの端はこの余白分だけずれる。
         揃えたい場合は padding-inline を 0 に戻す。 */
    padding: var(--spacing-md);
}

/* ※ 上下を 3rem に広げるのは 1024px以上だけ。
     768〜1023px はベースの四辺 2rem（--spacing-md）のままにする。
     ※ この帯域は 2列になった直後でカード幅が一番狭い
       （コンテナ 800px の半分）。上下に 3rem 取ると
       テキストの入る領域が狭くなりすぎる。
     ※ 境を戻すときはこの 1024px を 768px に直すだけでよい
       （ベースの規則は触らない）。
     ※ ※重要※ ベースの padding を変えると 768〜1023px も
       一緒に変わる。この帯域を独立させたい場合は
       768px ブロックを起こして値を明示する。 */
@media (min-width: 1024px) {
    .index-strengths__body {
        /* ※ 左右は 2rem（--spacing-md）のまま、上下だけ 3rem に広げる。
             左右も 3rem にすると、枠いっぱいに出る写真と
             テキストの左右のずれが大きくなりすぎる。 */
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

/* ── カードの四隅にL字の装飾を置く ──
   1つの疑似要素（::before）に背景グラデーションを8枚重ね、
   四隅にそれぞれ「横棒＋縦棒」を配置してL字を4つ描く。
   ※ 以前は左下（::before）と右上（::after）の2つだけで、
     対角に置いて斜めに囲う見せ方だった。
     疑似要素は2つしか持てないので、四隅にするには
     背景レイヤーで描く方式に切り替える必要がある。
     セクション背景のL字装飾やラベルのマークと同じ手法。
   ※ カードの外側に、辺に沿わせて置く。
     飛び出し量（--strengths-corner-out）を線幅と同じ値にすると、
     縦棒が左辺のすぐ外、横棒が下辺のすぐ外に揃い、
     隅を外から包む形になる。離したい場合はこの値を大きくする。
     ※ カードに border を戻す場合は、その分をこの値に足すこと。
       絶対配置の基準は padding box なので、border の分だけ内側にずれる。
     セクションの地（#0D0D0D）の上に塗る。
     ※ 暗転前はカードと同じ #1A1A1A を使い、白い地の上で
       「カードの角が外へ延びた」ように見せていた。
       黒地ではカード色（#1C1C1C）と地の差が6階調しか無く
       装飾がほぼ消えるので、スケール上で最も明るい
       --black-9 に上げて「枠」として見せる形に変えている。
       カードと同化させたい場合は var(--color-secondary) に戻す。
   ※ 線の長さは --strengths-corner、太さは --strengths-corner-w。
   ※ 上側の2つは写真の角に重なる。z-index で前面に出してある。
   ※ カード側に overflow: hidden を付けないこと（切り落ちる）。
   ※ クリックを奪わないよう pointer-events は切っておく。 */
/* ※ ※廃止※ 上の説明の四隅L字装飾は取りやめた。
     伴って変数（--strengths-corner / -w / -out / -ink）も削除済み。
     戻すときは下の値で変数を定義し直し、
     さらに下の ::before もセットで復活させること。
         --strengths-corner:     2.5rem   （768px以上 3.5rem）
         --strengths-corner-w:   4px
         --strengths-corner-out: var(--strengths-corner-w)
         --strengths-corner-ink: var(--black-9) */

/* 四隅のL字。
   ※ inset をマイナスにしてカードより一回り大きい箱を作り、
     その四隅に棒を置く。こうすると棒がカードの辺の
     すぐ外側に並び、隅を外から包む形になる。
   ※ レイヤーは8枚。隅ごとに「横棒 → 縦棒」の順で並べてある。
     background-image / -size / -position の3つは
     必ず同じ順番を保つこと。一行ずれると形が崩れる。
   ※ 隅では横棒と縦棒が --strengths-corner-w 四方形分だけ
     重なるが、同色の不透明なので問題ない。
     ※ ※重要※ だから --strengths-corner-ink に
       半透明を使わないこと。隅だけ二重に濃くなる。
   ※ 寸法は整数pxになる値を保つこと。
     2.5rem = 40px / 3.5rem = 56px / 線幅 4px なので端数は出ない。 */
/* ※ ※廃止※ 上の説明の ::before（四隅のL字）は削除した。
     カードの面（background-color）も外してあるので、
     カードは写真とテキストだけになる。
   ※ .index-strengths__item の position: relative は残してある。
     絶対配置の基準なので、戻すときにそのまま使える。
   ※ 戻す場合はこの位置に ::before を書き、
     背景レイヤー8枚（隅ごとに横棒→縦棒）を
     background-image / -size / -position で同じ順に並べる。 */

.index-strengths__num {
    display: block;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    letter-spacing: 0.24em;
    color: rgba(245, 244, 242, 0.66);
    margin-bottom: var(--spacing-xs);
}

.index-strengths__title {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-xs);
}

@media (min-width: 768px) {
    .index-strengths__title {
        font-size: 1.5rem;
    }
}

.index-strengths__text {
    font-size: 0.9375rem;
    color: rgba(245, 244, 242, 0.72);
}

/* ================================================================
   事業内容（SERVICE）＋施工実績（WORKS）を囲む暗色ブロック
   上は薄い黒、下に行くほど濃くなり #1A1A1A に沈む（4段階）。
   ※ 濃さを変えるときは下の4つの変数（アルファ値）を触る。
================================================================ */

.index-dark-block {
    /* ブロックの地。
       ※ 以前は rgba(26,26,26,…)（#1A1A1A）の4段グラデーションだったが、
         ページ背景（#0D0D0D）に寄せたことで濃淡が出なくなるため
         単色に置き換えた。
       ※ 値は common.css の --color-bg-raise（#111111）。
         新着情報（.index-news）と共用しているので、
         濃さを変えると両方に効く。ここだけ変えたい場合は
         下の background-color を別の値で上書きする。
       ※ ページ背景より4階調明るく、中のパネル
         （--service-panel-bg = #0D0D0D）がわずかに沈む関係。
       ※ グラデーションに戻す場合は、以前の
         --dark-block-1〜4（0.95 / 0.975 / 0.985 / 1）を
         linear-gradient とセットで復活させる。 */

    /* SERVICE のパネルと WORKS のグリッドで共用する地色。
       暗色ブロックより沈ませて面を分ける。
       ※ 元は .index-service__list に置いていたが、
         WORKS 側からも参照するのでブロック直下へ引き上げた。
       ※ --color-bg-raise（#111111）との差は9階調。
         以前は --black-3（#0D0D0D・差4階調）だったが、
         面の分かれ目を強めるため --black-2 に下げた。
       ※ ページ背景（#0D0D0D）よりも暗いので、
         パネルがページ全体の中で最も沈んだ面になる。 */
    --service-panel-bg: var(--black-2);

    background-color: var(--color-bg-raise);
    color: var(--color-text-inverse);
}

/* ── ブロック内の見出し・テキストを白系に揃える ──
   ※ .section--dark を外したため、その分をここで補う。 */
.index-dark-block .section-head__title {
    color: var(--color-text-inverse);
}

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

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

/* 見出しの帯アニメ（マスクスライド）も背景に合わせて白抜きに */
.index-dark-block .section-head.js-reveal .section-head__title:not(.js-lines)::after,
.index-dark-block .section-head.js-reveal .section-head__text::after,
.index-dark-block .section-head.js-reveal .section-head__label-text::after {
    background-color: var(--color-text-inverse);
}

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

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

@media (prefers-reduced-motion: reduce) {
    .index-dark-block .section-head.js-reveal .section-head__label,
    .index-dark-block .section-head.js-reveal .section-head__text {
        color: rgba(245, 244, 242, 0.66);
    }

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

/* ── service → works の間隔 ──
   この2つは背景が地続きなので、向かい合う padding が
   二重になって空白が目立つ（既定で SP 11rem / PC 16rem）。
   実値で小さく抜き、合計 SP 3rem / PC 4rem に詰めている。
   ※ .index-dark-block 内に限定し、ブロック外の
     セクションには影響させない。
   ※ ここだけは意図的にトークン（--spacing-*）を使わず、
     実値で持っている。セクションの標準余白とは
     連動させず、この境目だけを独立して調整するため。
   ※ 上下で値が揃っていることが前提なので、
     変えるときは必ず2つセットで直すこと。 */
.index-dark-block .index-service {
    padding-bottom: 1.5rem;
}

.index-dark-block .index-works {
    padding-top: 1.5rem;
}

@media (min-width: 768px) {
    .index-dark-block .index-service {
        padding-bottom: 2rem;
    }

    .index-dark-block .index-works {
        padding-top: 2rem;
    }
}

/* ================================================================
   事業内容（SERVICE）
================================================================ */

/* ── 右上のイラスト装飾 ──
   ※ .section__inner を基準に絶対配置する。
     .index-service ではなく __inner を基準にするのは、
     右端を見出し・カードの右端と揃えるため。
     セクション基準にすると左右パディングの分だけ外側に出る。
   ※ 画像は 1:1。高さは auto で良い。
   ※ 透過PNGの白線画なので、暗背景にそのまま乗せられる。
     色の反転処理は不要。
   ※ 装飾なのでクリックと選択を奪わない。
   ※ 大きさは --service-illust-w の1行で決まる。 */
/* ※ 以前はここに右上のイラスト装飾（.index-service__illust）を
     絶対配置していたが、ローポリ調のイラストを使わない
     方針に合わせて削除した（画像ファイル自体は残してある）。
   ※ position: relative は残してある。現時点では基準にする
     絶対配置の子は無いが、別の装飾を置くときに必要になる。
     不要と判断したらこのブロックごと消していい。 */
.index-service .section__inner {
    position: relative;
}

/* ── 見出し（上段：日本語／下段：英字3行）──
   ※ 英字の大きさと行の並び方は従来のまま。
     行間は line-height だけで決まる。
   ※ 行頭のさげ幅は --headline-indent-1 / -3。
     現在は 0 で全行左揃え。階段状にする場合は % を入れる。
   ※ z-index: 1 は上のイラスト（0）より前面に出すため。
     英字3行（最大 6.5rem）は右に伸びることがあるので、
     重なったときに文字側を優先させる。 */
.index-service__head {
    /* 英字大見出し（SERVICE）の大きさ。
       ※ 共通の既定（.section-head__title ＝ 24〜30px → 768px以上 30〜40px）の
         およそ2倍。セクションの主役として他より一段大きく取る。
           ベース      48〜60px
           1024px以上  60〜80px
       ※ 他のセクションの英字見出し
         （Philosophy / Strengths / Recruit / News / Contact）は約1.5倍
         （32〜42px → 42〜60px）。定義はこのファイル上部の
         「英字見出しの大きさ」ブロックと common.css の
         .sec-cta__head .section-head__title。
         全体の比率を見直すときはそちらもセットで見ること。
       ※ 切り替えの境は 1024px。他のセクションと揃えてある。
         1023px で 60px、1024px で約 61px なので段差は出ない。
       ※ ※注意※ SPの下限（3rem ＝ 48px）はこれ以上上げないこと。
         Orbitron は字幅が広く、375px 端末だと「SERVICE」が
         左右の余白（各1.5rem）の内側に収まらなくなる。
         行は white-space: nowrap なので、溢れると横にはみ出す。 */
    --headline-size: clamp(3rem, 9vw, 3.75rem);
    --headline-indent-1: 0;
    --headline-indent-3: 0;

    position: relative;
    z-index: 1;
    /* 中央配置。
       ※ 見出しが SERVICE の1語になったので、左揃えだと
         右側が大きく空く。施工実績（.index-works__head）と
         同じく中央に置く。
       ※ 下の英字は .index-service__headline-line が block なので
         これだけで中央に来る。ラベル側は flex なので
         別途 justify-content: center が要る。
       ※ 階段状の字下げ（--headline-indent-1 / -3）とは
         併用しないこと。中央揃えに字下げを足すと軸がぶれる。 */
    text-align: center;
}

@media (min-width: 1024px) {
    .index-service__head {
        --headline-size: clamp(3.75rem, 6vw, 5rem);
    }
}

/* 上段：日本語タイトル。
   ※ .section-head .section-head--swap .js-reveal を HTML 側で付け、
     帯アニメ（マスクスイープ）と書体の上書きを共通側に任せている。
     強み（STRENGTHS）の日本語ラベルと同じ挙動になる。
   ※ 共通の .section-head は下余白（--spacing-lg / xl）を持つので、
     ここで打ち消して英字との間隔を --spacing-sm に揃える。 */
.index-service__head-top {
    margin-bottom: var(--spacing-sm);
}

.index-service__head-top.section-head {
    margin-bottom: var(--spacing-sm);
}

/* ※ 表示順は HTML 順のまま（日本語 → 英字）。
     一度は order で英字を上に入れ替えていたが、
     他セクションと同じく日本語が上の順に戻してある。
     入れ替えたい場合は .index-service__head を
     flex-direction: column にして order を与える。 */

/* 下段：英字3行を左、一覧リンクを右端に振り分ける。
   ※ リンクは英字ブロックの下端に揃える。
     Specialties の下辺とリンクの下線が揃う。
   ※ 英字側は折り返さないので、
     狭い幅ではリンクが押されて縮む。
     flex-shrink: 0 で守ってある。 */
.index-service__head-main {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

@media (min-width: 768px) {
    .index-service__head-main {
        gap: var(--spacing-md);
    }
}

/* 日本語ラベルの微調整。
   ※ 書体・大文字化の戻しは .section-head--swap 共通側が持つので、
     ここではサイズと下余白だけを上書きする。
   ※ color は指定しないこと。帯アニメは
     color: transparent → 本来の色 という切り替えで成立しているので、
     固定色を当てると文字が最初から見えて帯が効かなくなる。
     暗背景用の白は .index-dark-block 側が与える。 */
.index-service__head-top .section-head__label {
    /* 装飾（対角分割の三角2つ）の一辺。
       ※ 共通の --mark-size（10px）だと、隣の日本語（15〜18px）に
         対して小さく見えるので、このラベルだけ一段大きく取る。
       ※ 整数pxで持つこと。端数にすると対角の分割線がにじむ。
         0.75rem = 12px。 */
    --label-mark: 0.75rem;

    font-size: clamp(0.9375rem, 3.4vw, 1.125rem);
    margin-bottom: 0;
    /* ※ .section-head__label は flex なので、親の text-align: center
         だけでは中央に来ない。ここで揃える。
         施工実績（.index-works__head .section-head__label）と同じ扱い。
       ※ 装飾（::before）は左側にしか無いので、厳密には
         「マーク＋文字」の塊が中央に来る形になる。
         左右対称にしたい場合は、施工実績と同じく
         ::after にも content を持たせて三角を反転させる。 */
    justify-content: center;
}

/* ※ 切り取り枠の上下余裕（padding-block / 負の margin-block）は
     .section-head--swap 共通側が持つので、ここでは書かない。 */

/* ── ラベル左の装飾：対角分割の三角2つ ──
   ※ Service の目印として、ドロワー・フッター・カード見出しと揃える。
     形の定義は common.css の .c-mark-triangles と同じ。
   ※ 共通の ::before は塗りつぶし正方形（--mark-size-solid）なので、
     外形を --label-mark に戻してから上書きする。
   ※ 色は currentColor ではなく直接指定すること。
     帯アニメ中は親が color: transparent になるため、
     currentColor だと装飾まで消える。
   ※ 共通側はこの装飾を scale(0) → scale(1) で弾けさせる。
     transform をここで上書きしないこと。 */
/* 共通部分。
   ※ ::after には content が無いのでここで与える。
     flex-shrink と line-height も同様に、::before 側は
     共通ルールが持っているが ::after は素なので明示する。
   ※ background-color: transparent は .index-dark-block 側の
     上書き（rgba(245,244,242,0.4)）を打ち消すため。
     詳細度が同じなので、このルールがファイル上で
     後ろにあることが条件。順番を入れ替えないこと。 */
.index-service__head-top .section-head__label::before,
.index-service__head-top .section-head__label::after {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 左右とも同じ向き。濃い三角が右下、淡い三角が左上。
   ※ 一度は右側を左右反転させて鏡像にしていたが、
     マークの向きはサイト共通で揃える方針に戻した。
     ドロワー・フッター・カード見出しの Service マークと
     同じ形になる。
   ※ 反転させたい場合は ::after だけを
         to bottom right → to bottom left
         to top left    → to top right
     に入れ替える。 */
.index-service__head-top .section-head__label::before,
.index-service__head-top .section-head__label::after {
    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%);
}

/* ── 帯アニメは共通側に任せる ──
   ※ HTML 側で .section-head .section-head--swap .js-reveal を付けているので、
     common.css の見出しアニメがそのまま効く。
     強み（STRENGTHS）の日本語ラベルと同じ挙動。
   ※ 帯の白抜き化は .index-dark-block 側が持つので、
     ここで個別に再現する必要はない。 */

/* 下段：英字3行の大見出し。
   ※ p を display: contents にしてレイアウトから外し、
     3行の span をラッパー直下の項目として直に並べる。 */
.index-service__headline-wrap {
    display: block;
}

.index-service__headline {
    display: contents;
}

.index-service__headline-line {
    display: block;
    font-family: var(--font-en-display);
    font-size: var(--headline-size);
    font-weight: 900;
    line-height: 0.9;
    /* ※ 以前は -0.01em（詰め気味）だったが、
         他の英字見出しと揃えて共通の値にした。
       ※ ※重要※ この行は white-space: nowrap とセットで見ること。
         字間を広げると SP で左右の余白を超えやすくなる。 */
    letter-spacing: var(--display-letter-spacing);
    color: var(--color-text-inverse);
    white-space: nowrap;
}

.index-service__headline-line--1 { padding-left: var(--headline-indent-1); }
.index-service__headline-line--3 { padding-left: var(--headline-indent-3); }

/* ※ News の見出しも同じく、左に見出し・右に一覧リンクの横並び。 */
.index-news__head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

@media (min-width: 768px) {
    .index-news__head {
        gap: var(--spacing-md);
    }
}

.index-news__head .section-head {
    margin-bottom: 0;
}

/* 一覧への導線（Service / News / Works で共用）。
   下線は2色。左端の一定長だけ白で、残りは淡い白。
   ホバーで白い部分が右へ伸びて全幅になる。
   ※ 新着情報の各項目（.index-news__link）と同じ仕組み。
     ただし白い部分の長さだけは割合（25%）で持つ。
   ※ 淡い線は background-image、白い線は ::before。
     background-size を動かすより width を動かす方が確実で滑らか。
   ※ ※重要※ position: relative は必須（::before の基準）。
   ※ 以前は border-bottom の1本線＋ホバーで opacity を落とす形だった。
   ※ 矢印は currentColor なので color に追従する。 */
.index-service__all,
.index-news__all,
.index-works__all {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 0.5rem;
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    /* ※ 平時は少し落とした白。ホバーで完全な白に上げる。
         共通CTA（.cta-group__title）と同じ考え方。
       ※ 矢印は currentColor なのでこの色に追従する。
         下線は追従しない（淡い線は --color-border、
         白い線は ::before で別に持っている）。 */
    color: rgba(245, 244, 242, 0.7);
    background-image: linear-gradient(var(--color-border) 0 0);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    white-space: nowrap;
    transition: color var(--transition);
}

/* 左端の白い線。ホバーで右へ伸びる。
   ※ 長さは導線の幅の 25%。
     新着情報の各項目（.index-news__link）は固定長
     （--news-line-accent ＝ 2.5rem）だが、こちらは
     文言の長さで幅が変わるので割合で持つ。
     （「一覧を見る」と「実績一覧」で幅が違うため）
   ※ % の基準は親の padding box。
     親に position: relative が必要（上の共通ルールで付与済み）。 */
.index-service__all::before,
.index-news__all::before,
.index-works__all::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25%;
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.1, 1);
}

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

    .index-service__all::before,
    .index-news__all::before,
    .index-works__all::before {
        transition: none;
    }
}

/* ※ Service / News は見出しと横並びなので、
     下端に揃えて狭い幅でも縮めないようにする。
   ※ Works は中央揃えの縦積みなので含めない。
     含めると右寄せになって見出しとの軸がずれる。 */
.index-service__all,
.index-news__all {
    align-self: flex-end;
    flex-shrink: 0;
}

/* Service は暗色ブロック内なので白抜きにする。
   ※ News は白背景なので墓黒のまま。 */
/* ※ 上の説明のうち「News は白背景なので墨黒のまま」は暗転前の話。
     現在は両方とも黒地なので、白抜きの指定は
     上の共通ルールに一本化した（Service だけを白にしていた
     ここの上書きは削除済み）。
   ※ 片方だけ色を変えたいときは、ここで
     .index-service__all / .index-news__all を個別に上書きする。 */

.index-service__all:is(:hover, :active)::before,
.index-news__all:is(:hover, :active)::before,
.index-service__all:focus-visible::before,
.index-news__all:focus-visible::before {
    width: 100%;
}

.index-service__all:is(:hover, :active),
.index-news__all:is(:hover, :active),
.index-service__all:focus-visible,
.index-news__all:focus-visible {
    color: var(--color-text-inverse);
}

.index-service__all:is(:hover, :active) .index-service__all-arrow,
.index-news__all:is(:hover, :active) .index-news__all-arrow {
    transform: rotate(45deg) translate(2px, -2px);
}

.index-service__list {
    display: grid;
    /* ※ カード間の間隔は 3rem →（1024px以上）4rem。
         以前は 2rem →（768px以上）4rem の2段だった。
       ※ 上の見出しとの間隔（margin-top）の境は 768px なので、
         gap とは切り替わる位置が違う。 */
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
    .index-service__list {
        margin-top: var(--spacing-xl);
    }
}

@media (min-width: 1024px) {
    .index-service__list {
        gap: var(--spacing-xl);
    }
}

/* ── カード本体 ──
   SP（〜767px）：写真を上、暗色パネルを下に積む。
   ※ HTML順は panel → figure なので、SPだけ order で写真を先頭に出す。 */
.index-service__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.index-service__figure {
    order: -1;
    overflow: hidden;
    background-color: rgba(245, 244, 242, 0.08);
}

/* ── PC（768px〜）：左に暗色パネル・右に写真の2分割 ──
   ※ 768〜1023px はコンテナが800pxと狭いので、パネル側を
     広く取って 45 : 55。英字見出しとキャッチの折り返しを防ぐ。
   ※ 1024px以上はコンテナが広がるので 36 : 64 に戻し、
     写真側を主役にする。
   ※ min-height はパネルの中身が短いときの下限。
     パネルが伸びればそちらが優先される。 */
@media (min-width: 768px) {
    .index-service__card {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: stretch;
        min-height: 24rem;
    }

    .index-service__figure {
        order: 0;
    }
}

@media (min-width: 1024px) {
    .index-service__card {
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
        min-height: 28rem;
    }
}

/* 02（偶数）は左右を入れ替え、交互に並べてリズムを作る。
   ※ HTML順は panel → figure なので、偶数側を order で反転させる。
   ※ カラム比は奇数側の左右をそのまま入れ替える。 */
@media (min-width: 768px) {
    .index-service__item:nth-child(even) .index-service__card {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .index-service__item:nth-child(even) .index-service__panel {
        order: 2;
    }

    .index-service__item:nth-child(even) .index-service__figure {
        order: 1;
    }
}

@media (min-width: 1024px) {
    .index-service__item:nth-child(even) .index-service__card {
        grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    }
}

/* ── 暗色パネル ──
   上段（連番・見出し）と下段（キャッチ・本文・リンク）を
   space-between で上下に振り分け、参考レイアウトの間隔を作る。 */
.index-service__panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    /* ※ 四辺とも 2rem（--spacing-md）。
         ※ 以前はベースだけ左右を 1.5rem（--spacing-sm）に絞り、
           576px以上で四辺 2rem に戻していた。
           狭い端末で本文の行長を稼ぐためだったが、
           左右も 2rem に揃えたので 576px の上書きは不要になり削除した。
       ※ 768px以上は下のブロックで 3rem（--spacing-lg）に広がる。 */
    padding: var(--spacing-md);
    background-color: var(--service-panel-bg);
}

@media (min-width: 768px) {
    .index-service__panel {
        justify-content: space-between;
        /* ※ 以前は --spacing-xl（4rem）。
             左右分割でパネルが狭くなる帯域なのに
             上段（見出し）と下段（キャッチ以下）の間が
             開きすぎていたため詰めた。
             途中 2.5rem を経て 3rem（--spacing-lg）に落ち着いた。
           ※ ベースの 2rem は --spacing-md のまま。
           ※ padding と同じ --spacing-lg。上下の余白と
             上下段の隔きが揃う。別の値にするときは
             両方を見比べて決めること。
           ※ justify-content: space-between と併用なので、
             カードに余裕があるときはこの値ではなく
             振り分け後の隔きが見える。この gap は
             「これ以上は詰めない」下限として働く。 */
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }
}

/* ── 見出し・キャッチ・本文のまとまり ──
   ※ .index-service__panel-head には規則を持たせていない。
     単なるブロックの入れ物で、パネルの
     justify-content: space-between（768px以上）の相手に
     なることだけが役割。中の間隔は下の margin で取る。
   ※ 以前は見出し（__name）と本文の箱（__panel-body）が
     パネル直下の兄弟だったので、この間隔は
     パネルの gap が担っていた。見出しを箱の中に
     入れたので gap が届かなくなり、同値を margin で与え直す。
   ※ 値はパネルの gap と同じ。どちらかを変えるときは
     見出し下とボタン上の隔きがそろわなくなるので
     必ず両方を見比べること。 */
.index-service__name {
    margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
    .index-service__name {
        margin-bottom: var(--spacing-lg);
    }
}

/* 英字（大）＋和文（小）の2段見出し。h3 の中を span で積む。 */
.index-service__en {
    /* 見出し左上の装飾（一辺 --card-mark の正方形）。
       ※ ::before から参照するので親側で定義する。
       ※ --card-mark-top は正方形の上辺を大文字の上端に揃えるための
         微調整値。line-height: 1 のとき、行ボックス上端から
         キャップハイトの頭までが約 0.12em 下がるため、その分を足す。
         位置がずれたらこの1行だけを触る。 */
    --card-mark: 0.625rem;
    --card-mark-top: 0.12em;
    --card-mark-gap: 0.75rem;

    /* ※ ::before を絶対配置するための基準。
         装飾をレイアウトの流れから外すので、
         display は block のままでよい。 */
    position: relative;
    display: block;
    font-family: var(--font-en-display);
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--display-letter-spacing);
    color: var(--color-text-inverse);
}

/* 英字タイトル左上の装飾：SERVICEラベルと同じ対角分割の三角2つ。
   ※ 描き方は .index-service__head .section-head__label::before と同じ。
     色・向きを揃えたいときは両方を同時に直す。
   ※ 絶対配置でテキストの流れから外し、左外側にぶら下げる。
     こうすると英字・和文の左端は揃ったまま、装飾だけが左に出る。
   ※ ぶら下げ幅 = --card-mark + --card-mark-gap。
     パネルの padding（SP: 2rem / PC: 3rem）に収まる値にすること。 */
.index-service__en::before {
    content: '';
    position: absolute;
    top: var(--card-mark-top);
    left: calc((var(--card-mark) + var(--card-mark-gap)) * -1);
    width: var(--card-mark);
    height: var(--card-mark);
    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;
}

/* ※ 768px 付近はパネルが狭いので、下限を小さめに取って
     英字が折り返さないようにする。 */
@media (min-width: 768px) {
    .index-service__en {
        font-size: clamp(1.75rem, 3.4vw, 3.25rem);
    }
}

.index-service__ja {
    display: block;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: rgba(245, 244, 242, 0.72);
}

.index-service__catch {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: var(--color-text-inverse);
    margin-bottom: 1.25rem;
}

@media (min-width: 1024px) {
    .index-service__catch {
        font-size: 1.25rem;
    }
}

/* 意味の区切りで改行を固定したいので、行を span で分けてブロック化する */
.index-service__catch span {
    display: block;
}

/* 576〜767px だけ改行しない（1行につなげる）。
   ※ この帯域はまだ1カラムでパネルが広く、
     2行に割ると右側が大きく空くため。
   ※ ※重要※ max-width は使わない（サイトの方針）。
     min-width を 2本並べ、後勝ちで 768px 以上を
     block に戻すことで同じ結果にしている。
     ※ だから下の 768px ブロックをこれより前に移さないこと。
       順番を入れ替えると 768px以上でも改行しなくなる。
   ※ span 間の改行・インデントは、前後が日本語なので
     ブラウザ側で削除される（間に空白は入らない）。 */
@media (min-width: 576px) {
    .index-service__catch span {
        display: inline-block;
    }
}

@media (min-width: 768px) {
    .index-service__catch span {
        display: block;
    }
}

.index-service__text {
    /* ※ 全幅で 0.95rem。
         ※ 以前はベースだけ 0.925rem で、768px以上は
           0.875rem に落としていた（左右分割でパネルが
           狭くなるため）。境で本文の大きさが変わるのを
           やめ、全幅で揃えた。その後 0.925 → 0.95rem。
         ※ 幅で変えたい場合は下に 768px ブロックを起こして
           font-size を与える。
         ※ 768〜1023px が一番窓屈。本文の内容幅が約264px なので、
           ここを上げると行数が増えてカードが伸びる。 */
    font-size: 0.95rem;
    line-height: 2;
    color: rgba(245, 244, 242, 0.66);
    /* ※ 下マージンは持たない。
         以前は margin-bottom: var(--spacing-md)（2rem）で
         ボタン（__more）との間隔を取っていたが、
         ボタンを __panel-head の外に出したので
         その役割はパネルの gap（ベース 2rem / 768px以上 3rem）と
         space-between に移った。
       ※ ここに下マージンを戻すと、箱の中に余白が残って
         ボタンとの間が二重になる。 */
}

/* ※ パネル内の他の要素は左揃えなので、この導線だけ右端に寄せる。
   ※ inline-flex のままだと margin-left: auto が効かないので、
     flex にしてから右へ送る。width: fit-content を併用するのは、
     ブロックのままだと幅がパネルいっぱいに伸びて
     右寄せにならないため（.index-about__link と同方式）。 */
.index-service__more {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: fit-content;
    margin-left: auto;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--color-text-inverse);
}

/* 円形の矢印ボタン。
   ※ common.css の共通矢印（斜め45度の線）とは別物なので、
     軸（::before）と矢じり（::after）をここで自前で描く。
   ※ 大きさは --service-btn を触る。 */
.index-service__more-btn {
    --service-btn: 2.125rem;

    /* 四隅L字装飾（.index-service__more-frame）の寸法・色・速さ。
       ※ 子から参照するので親であるここに定義する。
       ※ カスタムプロパティは下にしか継承されないので、
         子（__more-frame）側に書くとこのボタンから読めない。 */
    --more-corner: 0.75rem;
    --more-offset: 6px;
    --more-line: 1px;
    --more-ink: rgba(245, 244, 242, 0.45);
    --more-ink-on: rgba(245, 244, 242, 1);
    --more-dur-line: 0.3s;
    --more-dur-fill: 0.25s;

    position: relative;
    display: inline-block;
    width: var(--service-btn);
    height: var(--service-btn);
    flex-shrink: 0;
    border: var(--more-line) solid var(--more-ink);
    /* ※ セクションの装飾がすべて角のある形なので、
       ここも円ではなく正方形の枠で揃える。 */
    /* ※ 面はL字が枠を閉じてから入る。遅延はホバー側で与える。
         ここ（基本状態）の遅延 0s は「解除時は面が先に戻る」分。
       ※ color も一緒に変える。矢印は currentColor なので、
         面が白になると同時に墨黒へ切り替わる。 */
    transition:
        background-color var(--more-dur-fill) ease 0s,
        border-color var(--more-dur-fill) ease 0s,
        color var(--more-dur-fill) ease 0s;
}

/* 矢印の軸 */
.index-service__more-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.75rem;
    height: 1px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
}

/* 矢じり：正方形の上辺と右辺だけ残して45度回転させる */
.index-service__more-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.3125rem;
    height: 0.3125rem;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translate(-5%, -50%) rotate(45deg);
}

/* 四隅L字装飾（対角の2つ）。
   共通ボタンの .btn--frame（会社概要を見る・採用情報を見る）と
   同じ文法を、この小さい正方形にも適用する。

   ※ ※重要※ 専用の span（index.php）を使う。
     __more-btn の ::before / ::after は矢印（軸と矢じり）で
     埋まっているので、装飾は別の箱に持たせる。

   ※ .btn--frame と違って、ホバーで枠を閉じたり
     面を左→右に塗ったりはしない。
     34px の箱では塗りが一瞬で終わって演出にならないため。
     ホバーの反応は従来どおり、面が薄く光って枠線が白に上がる形。
     L字もそれに合わせて色だけ上がる。

   ※ inset をマイナスにしてボタンより一回り大きい箱を作り、
     その左上と右下にL字を置く。
   ※ クリックを奪わないよう pointer-events は切る。
   ※ 寸法は下の3つの変数で決まる。ボタンの大きさ
     （--service-btn ＝ 34px）を変えたときはこちらも見直すこと。 */
.index-service__more-frame {
    position: absolute;
    inset: calc(var(--more-offset) * -1);
    pointer-events: none;
}

/* ※ ここの遅延（--more-dur-fill）は「解除時に面の後から縮む」分。
     ホバー時の遅延 0s は下のホバー側で上書きする。 */
.index-service__more-frame::before,
.index-service__more-frame::after {
    content: '';
    position: absolute;
    width: var(--more-corner);
    height: var(--more-corner);
    transition:
        width var(--more-dur-line) ease var(--more-dur-fill),
        height var(--more-dur-line) ease var(--more-dur-fill),
        border-color var(--more-dur-line) ease var(--more-dur-fill);
}

.index-service__more-frame::before {
    top: 0;
    left: 0;
    border-top: var(--more-line) solid var(--more-ink);
    border-left: var(--more-line) solid var(--more-ink);
}

.index-service__more-frame::after {
    right: 0;
    bottom: 0;
    border-right: var(--more-line) solid var(--more-ink);
    border-bottom: var(--more-line) solid var(--more-ink);
}

/* ── 写真 ──
   PCではグリッドの stretch で figure の高さが確定するため、
   画像は height: 100% で面いっぱいに伸ばせる。 */
.index-service__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(var(--photo-grayscale));
    /* ※ 拡大・縮小は共通トランジション（--transition = 0.25s ease）に揃える。 */
    transition: transform var(--transition);
}

@media (min-width: 768px) {
    .index-service__image {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* ── ホバー拡大の transition を取り戻す ──
   ※ 画像は .js-mask の直下にあるため、common.css の
       .js-mask.is-revealed > * { transition: opacity 0s linear 0.28s; }
     に transition ごと上書きされてしまう。
     詳細度が 0-2-0 と .index-service__image（0-1-0）より強いので、
     画像が表示された時点で拡大・縮小が即時切り替えになる。
   ※ ここで「マスク後の表示（opacity）」と
     「ホバーの拡大（transform）」の両方をまとめて指定し、
     詳細度で勝たせる。
   ※ 0.28s / 0.36s は common.css の .js-mask 側の値。
     あちらを変えたときはここも合わせる。 */
.index-service__figure.is-revealed > .index-service__image {
    transition: opacity 0s linear 0.28s, transform var(--transition);
}

/* 02（data-delay="1"）は画像の表示タイミングだけを後ろにずらす */
.index-service__figure[data-delay="1"].is-revealed > .index-service__image {
    transition: opacity 0s linear 0.36s, transform var(--transition);
}

/* トリミングの基準位置。
   object-fit: cover で切り落とすときに、どこを残すかを決める。
   ※ 01（奇数）は写真が右カラムなので右端、
     02（偶数）は左カラムなので左端に寄せる。 */
.index-service__item:nth-child(odd) .index-service__image {
    object-position: right center;
}

.index-service__item:nth-child(even) .index-service__image {
    object-position: left center;
}

.index-service__card:is(:hover, :active) .index-service__image {
    transform: scale(1.04);
}

/* ※ 面はL字が枠を閉じてから（--more-dur-line 後）白に切り替わる。
     共通ボタンの .btn--frame と違って左→右のスイープはしない。
     34px の箱では塗りが一瞬で終わって演出にならないため。
   ※ color を墨黒にすることで、矢印（currentColor）も同時に反転する。
     ラベル（View Urethane）は親にあるので白のまま。 */
.index-service__card:is(:hover, :active) .index-service__more-btn {
    background-color: var(--more-ink-on);
    border-color: var(--more-ink-on);
    color: var(--color-primary);
    transition:
        background-color var(--more-dur-fill) ease var(--more-dur-line),
        border-color var(--more-dur-fill) ease var(--more-dur-line),
        color var(--more-dur-fill) ease var(--more-dur-line);
}

/* ※ L字が伸びて外側の枠を閉じる。
     親（__more-frame）がすでに inset で一回り大きい箱なので、
     100% に伸ばすだけで完全な長方形になる。
     （.btn--frame は疑似要素をボタン直下に置いているので
       calc(100% + ずれ幅×2) が必要だったが、こちらは不要。）
   ※ 結果として内側（ボタンの border）と外側の2重の枠になる。
     .btn--frame と同じ見え方。 */
.index-service__card:is(:hover, :active) .index-service__more-frame::before,
.index-service__card:is(:hover, :active) .index-service__more-frame::after {
    width: 100%;
    height: 100%;
    border-color: var(--more-ink-on);
    transition:
        width var(--more-dur-line) ease 0s,
        height var(--more-dur-line) ease 0s,
        border-color var(--more-dur-line) ease 0s;
}

@media (prefers-reduced-motion: reduce) {
    .index-service__image,
    .index-service__figure.is-revealed > .index-service__image,
    .index-service__figure[data-delay="1"].is-revealed > .index-service__image,
    .index-service__card:is(:hover, :active) .index-service__image {
        transform: none;
        transition: none;
    }
}

/* ================================================================
   施工実績（WORKS）
   見出しと画像4枚をグリッドで組む。
   ベースは2列×3行、768px以上は3列×2行。
================================================================ */

/* ベース（〜767px）：2列 × 3行。
     [ 01 ][ 見出し ]
     [ 02 ][ 見出し ]  ← 見出しは右列で2行分
     [ 03 ][   04   ] */
.index-works__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    background-color: var(--service-panel-bg);
}

@media (min-width: 768px) {
    .index-works__grid {
        /* 3列 × 2行。
           [ 01 ][ 見出し（2列分） ]
           [ 02 ][ 03 ][ 04 ] */
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .index-works__grid {
        gap: 1rem;
    }
}

/* 見出しブロック
   ベース：右列で1・2行目を使う（左列に 01 と 02 が並ぶ）
   ※ 背景色はカードと同じ --color-secondary。
     暗ブロックのグラデーションよりわずかに明るいので、
     画像に囲まれた見出しが面として立ち上がる。
     地に埋もれさせたい場合はこの1行を外す。 */
.index-works__head {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-sm);
}

@media (min-width: 768px) {
    .index-works__head {
        /* 1行目の右側、2列分を使う */
        grid-column: 2 / 4;
        grid-row: 1;
        /* 上下は 4rem、左右は 3rem。 */
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .index-works__head {
        /* 幅が広がるので上下をさらに取る。 */
        padding-block: 6rem;
    }
}

.index-works__head .section-head {
    margin-bottom: var(--spacing-sm);
}

/* 英字見出し（Works）の大きさ。
   ※ 共通の既定の約1.5倍。Philosophy / Strengths / Recruit / News /
     Contact と同じ値にしてある（揃え先はこのファイル上部の
     「英字見出しの大きさ」ブロックと common.css の
     .sec-cta__head .section-head__title）。
       768〜1023px  42px
       1024px以上   42〜60px
   ※ ※重要※ 767px以下は共通の既定のままにすること。
     この見出しは 2列グリッドの右列（画面の半分）に入るので、
     他セクションと同じベース値を当てるとセルを押し広げる。
     768px以上は 3列中 2列分の幅になるので余裕ができる。
   ※ 768〜1023px は 7vw が常に上限を超えるので実質 42px 固定。
     clamp のまま書いてあるのは、他セクションと
     見比べやすい形を保つため。 */
@media (min-width: 768px) {
    .index-works__head .section-head__title {
        font-size: clamp(2rem, 7vw, 2.625rem);
    }
}

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

/* 中央揃えなのでラベルの装飾は左右対称に出す */
.index-works__head .section-head__label {
    justify-content: center;
}

/* 見出しのマスク帯は width: fit-content で内容幅になっているため、
   このセクションだけは左寄せにならないよう中央に戻す */
.index-works__head .section-head__title,
.index-works__head .section-head__text {
    margin-inline: auto;
}

/* 施工実績のラベル装飾だけをテトリスO字ブロック（2×2）にする。
   ※ 他セクションは common.css の塗りつぶし正方形1つのまま。
   ※ 疴似要素1つに背景グラデーションを4枚重ね、
     四隅に配置して4マスを描く（要素を増やさない）。
   ※ サイズ調整は --works-cell / --works-gap を触る。 */
.index-works__head .section-head__label {
    --works-gap:  0.125rem;
    --works-cell: calc((var(--mark-size) - var(--works-gap)) / 2);
    --label-mark: var(--mark-size);
}

.index-works__head .section-head__label::before,
.index-works__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:
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0);
    background-size: var(--works-cell) var(--works-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
    color: rgba(245, 244, 242, 0.4);
}

/* 一覧リンク
   ※ リンク本体は親（.index-works__head）。
     これは見た目だけの導線なので span。
   ※ 見た目（2色の下線・書体・余白）は
     .index-service__all / .index-news__all と同じ共通ルールが持つ。
     探すときはこのファイル上部の「一覧への導線」ブロックを見る。
   ※ 以前はここで border-bottom の1本線と
     控えめの白（0.7）→ ホバーで完全な白、を持っていた。 */

/* ブロックのどこに触れても導線が反応する。
   ※ 白い線が右へ伸びて全幅になる。 */
.index-works__head:is(:hover, :active) .index-works__all::before,
.index-works__head:focus-visible .index-works__all::before {
    width: 100%;
}

.index-works__head:is(:hover, :active) .index-works__all,
.index-works__head:focus-visible .index-works__all {
    color: var(--color-text-inverse);
}

.index-works__head:is(:hover, :active) .index-works__all-arrow {
    transform: rotate(45deg) translate(2px, -2px);
}

/* 画像セル
   ※ 暗背景上なので、画像未読み込み時の下地も明るめのグレーにする
   ※ 見出しと同じ行に入るセルは、見出しの高さに合わせるため
     後で aspect-ratio: auto に上書きしている。
     ここの比率が効くのは見出しと並ばないセルだけ。 */
.index-works__cell {
    display: block;
    overflow: hidden;
    background-color: rgba(245, 244, 242, 0.08);
    aspect-ratio: 1 / 1;
}

/* ※ グレースケールは施工実績専用の値を使う。
   他セクション（--photo-grayscale）より一段強い。
   値の定義は common.css の :root。
   一覧ページ（works.css）も同じ変数を参照する。 */
.index-works__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(var(--photo-grayscale-works));
}

/* ── セルの4分割（2×2） ──
   施工実績のラベル装飾（O字ブロック）と同じ、
   正方形を四隅に分けた形。

   ※ 分割するのは 03 だけで固定。
     画面幅で変わるのはグリッド上の位置だけなので、
     HTMLを重複させずに済む。
   ※ 隔間は外側のグリッド（gap）とは別で、
     --works-split-gap で独立して持つ。
   ※ .js-mask の帯（::after）はセル全体を覆うので、
     4枚まとめて一度に現れる。 */
.index-works__cell {
    --works-split-gap: 0.25rem;
}

.index-works__cell--03 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--works-split-gap);
}

/* ── ベース（〜767px）：2列 × 3行 ──
   [ 01 ][ 見出し ]
   [ 02 ][ 見出し ]
   [ 03 ][   04   ]
   ※ 01・02 は見出しの高さを分け合うので、
     aspect-ratio を外して行の高さに合わせる。
     比率を残すとそちらが優先され、見出し側と高さが揃わない。
   ※ ベースでは 03 を 2×2 の4分割にする。 */
.index-works__cell--01 {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: auto;
    height: 100%;
}

.index-works__cell--02 {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: auto;
    height: 100%;
}

/* ベースでは 03（4分割）を左列の3行目に置く。 */
.index-works__cell--03 {
    grid-column: 1;
    grid-row: 3;
}

.index-works__cell--04 { grid-column: 2; grid-row: 3; }

/* ── 768px〜：3列 × 2行 ──
   [ 01 ][ 見出し（2列分） ]
   [ 02 ][ 03 ][ 04 ]
   ※ 01 は見出しと同じ行なので、高さを行に合わせる。
     下段の3枚は標準の 4 / 3 に戻す。 */
@media (min-width: 768px) {
    .index-works__cell--01 {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: auto;
        height: 100%;
    }

    /* 768px以上は 03（4分割）を下段の左端に移し、
       02 をその右へ送る。
       ※ 分割するセル自体は変えず、位置だけを入れ替える。 */
    .index-works__cell--02 {
        grid-column: 2;
        grid-row: 2;
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .index-works__cell--03 {
        grid-column: 1;
        grid-row: 2;
    }

    .index-works__cell--04 { grid-column: 3; grid-row: 2; }
}

/* ================================================================
   採用（RECRUIT）
================================================================ */

.index-recruit {
    position: relative;
    overflow: hidden;
    color: var(--color-text-inverse);
}

/* 背景写真。
   ※ ベース（〜767px）はやや右寄りの上部を基準に切り抜く。
     SPは箱が縦長になり、cover で上下が大きく切り落ちるため。
   ※ 768px以上は中央基準に戻す。
   ※ グレースケール量は common.css の :root で一元管理。 */
.index-recruit__bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/recruit-bg.webp');
    background-size: cover;
    background-position: 55% top;
    filter: grayscale(var(--photo-grayscale-bg));
}

@media (min-width: 768px) {
    .index-recruit__bg {
        background-position: center;
    }
}

/* 上から下へ薄くなっていくオーバーレイ。
   ※ 以前は左→右に濃くして右の縦書きタイトル側を暗くしていた。
   ※ 濃さを変えるときは下の4つの変数（アルファ値）だけを触る。
     段階の持ち方は .index-dark-block と同じ。 */
.index-recruit__overlay {
    --recruit-overlay-1: 1;    /* 上端：不透明 */
    --recruit-overlay-2: 0.6;  /* 33%地点 */
    --recruit-overlay-3: 0.5;  /* 66%地点 */
    --recruit-overlay-4: 0.4;  /* 下端：最も薄い */

    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(13, 13, 13, var(--recruit-overlay-1))   0%,
        rgba(13, 13, 13, var(--recruit-overlay-2))  33%,
        rgba(13, 13, 13, var(--recruit-overlay-3))  66%,
        rgba(13, 13, 13, var(--recruit-overlay-4)) 100%);
}

.index-recruit .section__inner {
    position: relative;
    z-index: 1;
}

/* ── 見出しブロック ──
   ラベル → 見出し → 本文 → ボタンを縦に積む。全幅共通。

   ※ 幅の上限を持つのはここだけ。
     中の見出し・本文・ボタンはすべてこの幅を共有するので、
     本文の折り返し位置とボタン（margin-left: auto）の右端が
     自動で揃う。子要素に個別の max-width を持たせないこと。
     （以前は __head が 40rem、__text が 34rem と二重に持っていた）

   ※ 36rem の根拠：見出し2行目「継ぐべき技がここに」（9文字）が
     最大サイズ（3.5rem）で1行に収まる下限（約34rem）に
     余裕を足した値。これより狭めると見出しが折り返し、
     .js-lines の2行構成が崩れる。
     見出しの文言や font-size を変えるときはこの値も見直すこと。

   ※ この幅は JOIN US にはかからない。
     JOIN US は __head の弟要素なのでコンテナ幅いっぱいに広がる。 */
.index-recruit__head {
    max-width: 40rem;
}

/* ── 帯アニメの色を暗背景向けに合わせる ──
   ※ 共通側（common.css）の既定は明るい背景前提で、
     帯が墨黒（--color-primary）、リビール後の文字が
     グレー（--color-text-light）になる。
     このセクションは暗い背景写真の上なので、両方とも沈む。
   ※ 事業内容の「2つの専門工事」（.index-dark-block 内）と
     同じ見え方に揃える。帯は白抜き、文字は白系。
   ※ 値も .index-dark-block 側と同じ。
     あちらを変えたときはここも合わせること。 */
.index-recruit .section-head.js-reveal .section-head__label-text::after {
    background-color: var(--color-text-inverse);
}

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

/* ラベル左の装飾も背景に合わせて白系に。
   ※ このセクションの装飾は O字ブロック（背景グラデーション四枚）なので、
     共通側の background-color は使わない。色は ::before 側で持っている。 */
@media (prefers-reduced-motion: reduce) {
    .index-recruit .section-head.js-reveal .section-head__label {
        color: rgba(245, 244, 242, 0.66);
    }
}

/* ラベルのラッパー。
   ※ 帯アニメを共通側に任せるため .section-head を付けている。
   ※ 以前は共通側の下余白を margin-bottom: 0 で打ち消していたが、
     Philosophy など他セクションと間隔を揃えるため、
     共通側の値（SP 2rem / 768px以上 3rem）をそのまま使う形に戻した。
     再び打ち消したい場合は下の1本を復活させる。
     （詳細度 0-2-0 なので共通側の .section-head より強い）
         .index-recruit__label-wrap.section-head { margin-bottom: 0; }
   ※ 日本語ラベルと英字見出しの間隔は
     .index-recruit__label の margin-bottom が持つ（ここではない）。 */

/* ラベル装飾：施工実績と同じ O字ブロック（2×2）。
   ※ 左上と右下だけ白、残り2つはグレーにする。
     マスごとに色を変えるため、currentColor ではなく
     グラデーションごとに直接色を指定する。
   ※ サイズ調整は --recruit-cell / --recruit-gap を触る。
   ※ color は指定しないこと。帯アニメは
     color: transparent → 本来の色 の切り替えで成立しているので、
     固定色を当てると文字が最初から見えて帯が効かなくなる。
   ※ 見出しの上に置く小さな英字ラベル。 */
.index-recruit__label {
    --recruit-gap:  0.125rem;
    --recruit-cell: calc((var(--mark-size) - var(--recruit-gap)) / 2);
    --recruit-mark: var(--mark-size);
    --label-mark: var(--mark-size);

    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* ※ 日本語になったので英字書体と uppercase を外す。
         書体・ウェイト・字間は .section-head--swap 共通側が
         持つので、ここではサイズと余白だけを見る。 */
    font-size: 0.8125rem;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

/* ※ content とサイズは共通側（.section-head__label::before）が持つので、
     ここでは四隅の塗り分けだけを上書きする。
   ※ transform は触らないこと。共通側が scale(0) → scale(1) で
     この装飾を弾けさせる。 */
.index-recruit__label::before {
    width: var(--recruit-mark);
    height: var(--recruit-mark);
    background-color: transparent;
    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(--recruit-cell) var(--recruit-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* ── キャッチコピー ──
   見出しから外し、本文グループ（__body-text）の先頭に置いてある。
   ※ 英字見出し（.section-head__title）より小さく、
     本文（約16px）よりははっきり大きい中間の位置。
     Philosophy の .index-about__catch と同値に揃えてある。
   ※ p なので h1〜 h6 の基本指定が届かない。
     書体とウェイトをここで補う。
   ※ .js-lines の行送りアニメは共通側が持つ。
     .js-lines__line の overflow: hidden が切り取り枠なので、
     ここで overflow を触らないこと。
   ※ 以前は .index-recruit__title として大見出しサイズ
     （最大 3.5rem）だった。英字に主役を譲ったので落としてある。 */
.index-recruit__catch {
    font-family: var(--font-heading);
    font-weight: 700;
    /* ※ 24〜28px。700px 以降は上限（28px）で頭打ち。
       ※ 以前は 20〜22px →（768px以上）22〜28px の2段だったが、
         768px の境で縮む逆転が起きるので上書きを廃止した。
       ※ ※重要※ 傾きを 4.4vw に戻さないこと。
         576px以上は1行（18文字）になり、576px 時に使える幅は
         512px。4.4vw だとその地点で 25px まで上がり、
         実幅約500px で収まらなくなる。
       ※ Philosophy（.index-about__catch）と同値。
         片方を変えるときはもう一方もセットで見直すこと。
       ※ こちらは 1024px 以上の上書きを持たない。
         親（.index-recruit__head）が幅 36rem の1カラムなので、
         広い画面でもカラム幅が狭くならないため。 */
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--color-text-inverse);
    /* ※ 下の本文（__text）との間隔。
         以前は --spacing-sm（1.5rem）だった。
       ※ Philosophy（.index-about__catch）と同値。
         片方を変えるときはもう一方もセットで見直すこと。 */
    margin-bottom: 1rem;
}

/* 768px以上：1行に必要な幅が確保できるので 32px まで伸ばす。
   ※ ※重要※ 767px以下は .section__inner の上限が 576px なので、
     __head の 40rem（640px）は効かず 576px 止まりになる。
     そこで 32px にすると 18文字で約634px となり収まらない。
     ベース側の上限（28px）は上げないこと。
   ※ 32px に届くのは 1067px 以降。768px 時点では 28px なので
     ベースの上限と連続し、境での段差は出ない。
   ※ Philosophy（.index-about__catch）の 768px 側と同値。 */
@media (min-width: 768px) {
    .index-recruit__catch {
        font-size: clamp(1.75rem, 3vw, 2rem);
    }
}

/* 行の切り取り枠の余白をこのセクションだけ差し替える。
   ※ 共通側（common.css の .js-lines__line）は
     padding-block: 0.12em / margin-block: -0.12em で
     「上下に余裕を取って同じ分を相殺する」形。
     ここではその両方を 0 に戻す。
   ※ ※注意※ padding-block を 0 にすると、切り取り枠
     （overflow: hidden）が文字の上下すれすれになる。
     行間（1.8）があるので通常は欠けないが、
     文言に濁点やハネの強い字を入れたときは確認すること。
   ※ 行間は行高（line-height: 1.8）だけで取る。
     以前はここに margin-bottom: 1.25rem を置いていたが、
     576px以上で inline-block になると 1行の下にも乗って
     二重に見えたため、親（.index-recruit__catch）の
     margin-bottom に一本化した。
   ※ 詳細度 0-2-0。共通の .js-lines__line（0-1-0）より強い。 */
.index-recruit__catch .js-lines__line {
    padding-block: 0;
    margin-block: 0;
}

/* 576px以上は改行しない。1行につなげる。
   ※ Philosophy（.index-about__catch br）・FV（.fv__catch-text br）と
     同じ境。こちらだけ br ではなく .js-lines__line を
     inline-block にして横に並べる。
     共通の行送りアニメ（.js-lines）は行ごとの切り取り枚が
     必要なので、span を br に置き換えられないため。
   ※ inline-block なら overflow: hidden が効くので、
     1行になっても下からの立ち上がりはそのまま残る。
     （inline にすると切り取りが効かないので不可）
   ※ ※重要※ HTML側で 2つの span の間を改行せずに書いてある
     （index.php）。改行すると間に空白が残る。
   ※ 詳細度 0-2-0。共通の .js-lines__line（0-1-0）より強い。
   ※ 幅の余裕は大きくない。親（.index-recruit__head）の
     上限が 36rem（576px）で、文字が最大（28px）のとき
     18文字×字間込みで約554px。文言を伸ばすと折り返す。 */
@media (min-width: 576px) {
    .index-recruit__catch .js-lines__line {
        display: inline-block;
    }
}

/* ── 見出しの登場 ──
   ※ 共通の .js-lines（common.css）をそのまま使う。
     行ごとの枠で切り取り、中身の span を下から押し上げる方式。
     事業内容の英字見出し（Logic / Two / Specialties）と同じ挙動になる。
   ※ 以前はここで clip-path 方式に差し替えていた（縦書き時の名残）。
     その上書きを外したので、遅延も共通側に任せる
     （全行が揃って同時に立ち上がる）。
   ※ .js-lines__line の overflow: hidden が切り取り枠なので、
     ここで overflow を触らないこと。触ると隠れなくなる。 */

/* 本文。
   ※ 行長の上限は親（.index-recruit__head）が持つ。
     ここに max-width を書かないこと。二重になり、
     本文の右端とボタンの右端がずれる。 */
.index-recruit__text {
    color: rgba(245, 244, 242, 0.8);
}

/* ── 巨大英字（JOIN US）──
   見出しブロックの下に縦積みで置く。
   ※ 絶対配置は使わない。通常フローに乗せるので、
     この要素の高さがそのままセクションの高さに加わる。
     重なりが起きないので z-index の調整も不要。
   ※ line-height を 0.8 に絞って、大文字の上下に出る
     無駄な行間を削っている。
   ※ 右揃え。左の見出し・本文と対角になるよう配置する。
   ※ 文字色は薄めの白。フローに乗せて本文と重ならなくなったので、
     背面に沈めていた頃より濃めに取っている。
     濃さは --recruit-deco-ink の1行で調整する。
   ※ user-select: none。装飾なので選択させない。
   ※ nowrap は必須。「JOIN US」が2行に割れると高さが倍になる。
     入り切らない幅ではセクションの overflow: hidden が切る。
   ※ 全幅で常時表示する。小さい画面では font-size の下限
     （3rem）が効き、幅に対して大きくなりすぎない。 */
.index-recruit__deco {
    --recruit-deco-ink: rgba(245, 244, 242, 0.12);
    /* ※ 大きさは recruit.php の ENTRY（.recruit-entry__watermark）と揃えてある。
         片方を変えるときはもう一方もセットで見直すこと。
       ※ 値を鍵変数化してあるのは 768px以上で別値に切り替えるため。 */
    --deco-watermark-size: clamp(3.5rem, 16vw, 6rem);

    display: block;
    margin-top: var(--spacing-md);
    /* ※ 右側にセクションの横パディング（--section-pad-x）分だけ
         マイナスマージンを足し、右端をパディングの外側（画面端）まで
         飛び出させる。
       ※ --section-pad-x は common.css の :root で定義（1.5rem →
         576px以上 2rem → 1024px以上 3rem → 1200px以上 4rem）。
         値を参照しているので、各幅で自動で追従する。
       ※ .index-recruit .section__inner は左右の余白を
         .section 側（padding-inline）が持つ。この要素だけ
         その分を打ち消して右に飛び出す形になる。
       ※ 親（.index-recruit .section__inner）に
         overflow の指定はないが、.index-recruit 自体が
         overflow: hidden を持つので、はみ出しても
         セクション外に漏れて横スクロールにはならない。 */
    margin-right: calc(var(--section-pad-x) * -1);
    font-family: var(--font-en-display);
    font-size: var(--deco-watermark-size);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: right;
    color: var(--recruit-deco-ink);
    pointer-events: none;
    user-select: none;
}

@media (min-width: 768px) {
    .index-recruit__deco {
        --deco-watermark-size: clamp(6rem, 12vw, 10rem);
    }
}

/* 採用情報ボタン。
   ※ margin-left: auto で親（__head）の右端へ寄せる。
     幅の上限は親が1つだけ持っているので、
     本文の右端と自動で揃う。
   ※ 上の本文との間隔はここの margin-top で取る。
   ※ inline-flex のままだと margin-left: auto が効かないので flex にし、
     width: fit-content を併用して内容幅に抑える。 */
.index-recruit__button {
    display: flex;
    width: fit-content;
    margin-top: var(--spacing-md);
    margin-left: auto;
}

/* ※ ホバーの見た目は common.css の .btn--frame が持つ。
     以前はここで
         .index-recruit__button.btn--outline:is(:hover, :active)
     に「面をごく薄い白で満たして枠線を白に上げる」指定を
     書いていたが、HTML を .btn--frame に差し替えたので
     セレクタが一致しなくなり削除した。
   ※ このボタンだけ別のホバーにしたい場合は
     .index-recruit__button.btn--frame:is(:hover, :active) で上書きする。 */

/* 矢印の動きは共通側に任せる（Philosophy 側と同じ）。
   ※ 画面上は真横（右）へ滑る動きになる。 */

/* ================================================================
   新着情報（NEWS）
================================================================ */

/* 地をベースから一段浮かせる。
   ※ 本来は背景色を持たず body（--color-bg = #0D0D0D）を
     透かしていた。
   ※ 前後が採用・CTA と写真セクションに挙まれているので、
     ここを上げすぎると逆に浮く。--black-4 に留めて
     強み（--black-5 = #1F1F1F）より一段低く取っている。
   ※ さらに明るくするなら --black-5、戻すならこの1行を削除。 */
.index-news {
    /* ※ SERVICE/WORKS ブロック・ヘッダーと同じ --color-bg-raise（#111111）。
         ページ背景（#0D0D0D）より4階調明るく、一段浮く。
       ※ 上の説明にある --black-4（#171717）は変更前の値。
         途中 --black-2（#080808）で沈めていた時期もある。
       ※ ここだけ別の濃さにする場合は実値または
         --black-* を直接指定する（共通トークンを変えないこと）。 */
    /* ※ ※重要※ 上のコメントはベタ塗りだった頃の説明。
         現在は上→下のグラデーションに変えてある。
         上端は SERVICE/WORKS ブロック・ヘッダーと同じ
         --color-bg-raise（#111111）で一段浮かせ、
         下端でベース背景（--color-bg ＝ #0D0D0D）に溶け込む。
       ※ 濃さを変えるときは下の2つの変数だけを触る。
         共通トークン（--color-bg-raise など）は変えないこと。
       ※ background-color はグラデーションが描けない環境向けの下地。
         上端の色と揃えておく。
       ※ ベタ塗りに戻すときは background-image の1本を削る。 */
    --news-bg-top: var(--color-bg-raise);
    --news-bg-bottom: var(--color-bg);

    background-color: var(--news-bg-top);
    background-image: linear-gradient(to bottom,
        var(--news-bg-top)      0%,
        var(--news-bg-bottom) 100%);
}

/* ラベル装飾：横長の帯3本を積んで正方形に見せる。
   ※ 他セクションは common.css の塗りつぶし正方形1つ、
     施工実績は O字ブロック（2×2）。ここだけ 3本積み。
   ※ 背景グラデーションを3枚重ね、上・中央・下に配置する。
   ※ サイズ調整は --news-bar / --news-gap を触る。
     全体の一辺 = 幅3本 + 隔鎓2つ で正方形になる。 */
.index-news__head .section-head__label {
    --news-gap: 0.125rem;
    --news-bar: calc((var(--mark-size) - var(--news-gap) * 2) / 3);
    --label-mark: var(--mark-size);
}

.index-news__head .section-head__label::before {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0);
    background-size: 100% var(--news-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left center,
        left bottom;
    color: var(--color-text-light);
}

/* 見出し（+一覧リンク）を上、リストを下に積む１カラム構成。
   ※ 768px以上もこの構成のまま、リスト側を横並びに割る。 */
.index-news__grid {
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .index-news__grid {
        gap: var(--spacing-xl);
    }
}

.index-news__body {
    margin-top: 0;
}

/* ※ リスト上端の罫線は引かない。
   区切りは各項目の上に引く2色ラインで見せる。 */

/* ※ レイアウトと区切り線は中の .index-news__link が持つ。
   項目全体をリンクにしているため、
   クリック領域と見た目を一致させる。 */

/* 1段目：日付＋カテゴリバッジ＋New!、2段目：タイトル。
   ※ SP・PC共通の組み方にする。タイトルに flex-basis: 100% を持たせて
     2段目に落とし、日付とバッジは1段目に横並びで残す。
   ※ HTML順は 日付 → カテゴリ → タイトル → New! なので order で並べ替える。

   上端のグレーの線は背景で引く（全幅・1px）。
   黒い部分は ::before で別に描き、ホバーで幅を伸ばす。
   ※ 背景の background-size をアニメさせるより、
     要素の width を動かす方が確実で滑らか。
   ※ li の高さいっぱいに伸ばして、
     3カラム時でもセル全体を押せるようにする。 */
.index-news__link {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 0.5rem 0.75rem;
    height: 100%;
    padding-block: var(--spacing-sm);
    color: inherit;
    background-image: linear-gradient(var(--color-border) 0 0);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: left top;
}

/* アイキャッチの線。ホバー・押下で右に伸びる。
   ※ 長さの初期値は --news-line-accent（common.css）。
   ※ 暗転前は墨黒（--color-primary）だったが、黒地では
     背景と同色になって完全に消えるため白に反転した。
     全幅に引いている線が --color-border（白14%）と
     薄いので、そこにベタ白が乗って濃淡がつく。 */
.index-news__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--news-line-accent);
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.1, 1);
}

/* ※ a のときだけ反応させる。
     リンクの無い記事は span なので伸びない。 */
a.index-news__link:is(:hover, :active)::before,
a.index-news__link:focus-visible::before {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .index-news__link::before {
        transition: none;
    }
}

/* ── 768px〜：リストを3カラムの横並びにする ──
   ※ 列数はトップの表示件数（index.php の $config['dspNum'] = 3）に
     合わせてある。件数を変えるときはここも合わせる。
   ※ 各列の上にそれぞれ2色ラインが並ぶ。列の間は gap で切れるので
     区切りとしても働く。
   ※ 各項目の中身（日付・カテゴリ・タイトル）の並べ替えは、
     子要素の基本指定を上書きする必要があるため、
     このファイルの末尾にまとめて置いている。 */
@media (min-width: 768px) {
    .index-news__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
}

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

.index-news__item .up_ymd {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    flex-shrink: 0;
}

/* カテゴリバッジ：白地に黒文字。日付のすぐ右に置く。
   ※ 暗転前は「黒地に白文字」。そのままだと黒地に黒バッジで
     面が消え、白文字だけが浮いてバッジに見えなくなる。
   ※ 一覧・詳細ページ（news.css）も同じ指定なので、
     あちらを直すときはセットで合わせること。 */
.index-news__item .catName {
    order: 1;
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    background-color: var(--color-text-inverse);
    color: var(--black-3);
    flex-shrink: 0;
}

.index-news__item .title {
    order: 3;
    flex-basis: 100%;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
}

/* ※ ホバーの主な反応は上の白い線が伸びること。
     タイトルは一覧リンク（.index-news__all）と同じく、
     平時を少し落とした白にしてホバーで完全な白に上げる。
   ※ 以前は逆に opacity を 0.8 へ落としていた。
     暗背景では「明るくなる」方が反応として自然。
   ※ 平時の色は日付（--color-text-light）より明るく保つこと。
     タイトルが主役なので、平時から見出しとして
     読めている必要がある。 */
.index-news__item .title {
    color: rgba(245, 244, 242, 0.85);
    transition: color var(--transition);
}

a.index-news__link:is(:hover, :active) .title,
a.index-news__link:focus-visible .title {
    color: var(--color-text-inverse);
}

/* New! ラベル。
   ※ 暗転前は墨黒、つまり紙面上で最も濃い色だった。
     黒地では最も明るい色が同じ役割を担うので白に反転する。
     日付・タイトルより明るいので、一番先に目に入る。 */
.index-news__item .newMark {
    order: 2;
    display: inline-block;
    font-family: var(--font-en);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

/* ================================================================
   新着情報：件数が少ないとき（0件・1・2件）
   ※ 出し分けは index.php 冒頭の $newsCount / $newsColumns。
       0件      … リストの代わりに案内（.index-news__empty）
       1・2件  … 横長の行を縦に積む（.index-news__list--rows）
       3件      … これまで通り3列のカード
================================================================ */

/* ── 0件の案内 ──
   ※ 施工実績ページ（works.css の .works-list__empty）と同じ形・同じ値。
     変えるときはセットで直すこと。
     （共通部品にまとめる場合は common.css へ移す）
   ※ 474px以下は左揃え、475px以上で中央揃え。
     475px はこの案内だけの分岐で、サイト共通の値ではない。 */
.index-news__empty {
    /* ※ 幅は親いっぱい（施工実績ページは 768px で中央）。
         トップは見出しが左揃えなので、左端をそろえる。
         1・2件の行（.index-news__list--rows）も同じく全幅。 */
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border-dark);
    text-align: left;
}

@media (min-width: 475px) {
    .index-news__empty {
        text-align: center;
    }
}

.index-news__empty-title {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--color-text-inverse);
}

/* アイコン（四角い枠に i）。works.css の .works-list__empty-icon と同じ。
   ※ 形を変えるときは -webkit-mask と mask の2行をセットで直すこと。
   ※ height の 2em は 1lh 未対応ブラウザ向け（親の line-height: 2）。 */
.index-news__empty-icon {
    display: inline-block;
    width: 1.25em;
    height: 2em;
    height: 1lh;
    margin-right: 0.375em;
    vertical-align: top;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M3.75 3.75h16.5v16.5H3.75z'/%3E%3Cpath fill='%23000' d='M11.25 10.5h1.5v6.75h-1.5zM11.25 6.75h1.5v1.5h-1.5z'/%3E%3C/svg%3E") center / 1.25em 1.25em no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M3.75 3.75h16.5v16.5H3.75z'/%3E%3Cpath fill='%23000' d='M11.25 10.5h1.5v6.75h-1.5zM11.25 6.75h1.5v1.5h-1.5z'/%3E%3C/svg%3E") center / 1.25em 1.25em no-repeat;
}

.index-news__empty-text {
    font-size: 0.875rem;
    line-height: 2;
    color: rgba(245, 244, 242, 0.66);
}

/* ── 1・2件：横長の行 ──
   ※ 767px以下はもともと縦積みなので何も変えない。
   ※ 768px以上は3列のグリッドを解いて、全幅の行を縦に積む。
     1行の中は「日付・カテゴリ・New! → タイトル」の横並び。
     カードのときはタイトルが2段目に落ちるが、行では同じ段に並べる。
   ※ 上端の線（背景の全幅線＋ホバーで伸びる白線）はそのまま使う。
     行を積むと行間の区切りになる。最後の行だけ下端にも線を引いて閉じる。
   ※ 詳細度はすべて基本指定より1段強い（順番に依存しない）。 */
@media (min-width: 768px) {
    /* ※ 幅は親いっぱい（全幅）。見出しと左端をそろえる。
       ※ 1件のときは、日付とタイトルの右側に線だけが長く伸びる。
       ※ 試したもの（どちらもやめた）
           ・768px で中央に置く … 左揃えの見出しと左端がずれて浮いて見えた。
           ・1024px以上で見出しを左、お知らせを右に並べる。 */
    .index-news__list.index-news__list--rows {
        display: block;
    }

    /* ※ align-items: baseline で、日付・バッジ・タイトルの
         文字の下端をそろえる（文字サイズがそれぞれ違うため）。
       ※ 上下の余白はカードより少し詰める。
         行は横に長いので、同じ余白だと間延びして見える。 */
    .index-news__list--rows .index-news__link {
        flex-wrap: nowrap;
        align-items: baseline;
        padding-block: 1.25rem;
    }

    /* ※ 左の日付から少し離して、残りの幅をすべて使う。
       ※ min-width: 0 が無いと、長いタイトルが折り返さずに
         行からはみ出す。 */
    .index-news__list--rows .index-news__item .title {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: var(--spacing-xs);
    }

    /* ※ 日付の桁幅をそろえて、行ごとのタイトルの書き出し位置を合わせる。
         （カテゴリのバッジが付く記事があると、その行だけバッジ分ずれる） */
    .index-news__list--rows .index-news__item .up_ymd {
        font-variant-numeric: tabular-nums;
    }

    /* 最後の行だけ、下端にも同じ色の線を引いてリストを閉じる。
       ※ 上端の線（.index-news__link の背景）に2本目を足す形。
         色を変えるときは .index-news__link の背景とセットで。 */
    .index-news__list--rows .index-news__item:last-child .index-news__link {
        background-image:
            linear-gradient(var(--color-border) 0 0),
            linear-gradient(var(--color-border) 0 0);
        background-size: 100% 1px, 100% 1px;
        background-position: left top, left bottom;
    }
}

/* ※ 768px以上の並べ替えは上の基本指定に統合した。
   日付・バッジ・New! が1段目、タイトルが2段目で SP・PC共通。 */