@charset "UTF-8";

/* ================================================================
   株式会社Logic - service.css
   事業内容ページ専用スタイル
================================================================ */

/* ── page-hero（背景画像）のフォーカス位置 ──
   ※ 共通側（common.css の .page-hero__bg）は center（中央固定）。
     このページだけ top 25%・left 75%（縦は上から25%、横は左から75%）にしたいので上書きする。 */
.page-service .page-hero__bg {
    background-position: top 25% left 75%;
}

/* ================================================================
   セクション見出しの装飾（ページ共通）
   ※ このページは全セクションを同じ形で揃える。
     形＝対角分割の三角2つ。ヘッダー・ドロワー・フッター・
     トップの Service と同じマーク（定義は common.css の
     .c-mark-triangles）。
   ※ 色だけ背景に合わせて反転する。
     明るい背景：濃 = var(--color-title)        / 淡 = rgba(13, 13, 13, 0.3)
     暗い背景　：濃 = rgba(245, 244, 242, 0.85) / 淡 = rgba(245, 244, 242, 0.35)
   ※ 対象は共通の .section-head__label。
     イントロ・対応地域・01/02（見出し）すべて同じ三角マーク。
================================================================ */

.page-service .section-head__label {
    --label-mark: var(--mark-size);
    /* ※ 暗転前の既定は明るい背景向け（淡 = 墨黒30%）で、
         対応地域・イントロの2セクションだけを
         下のルールで白系に反転させていた。
         全面暗転で全セクションが暗い地になったので、
         既定側を白系に入れ替える。
       ※ これにより下の2つの上書きは同値になるが、
         明るいセクションを戻したときのために残してある。 */
    --mark-ink: rgba(245, 244, 242, 0.85);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* 暗背景セクション（対応地域）だけ白系に反転する。 */
.page-service .section--dark .section-head__label {
    --mark-ink: rgba(245, 244, 242, 0.85);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* イントロ（.sec-lead）も黒い帯の上に乗るので白系に反転する。
   ※ .sec-lead に .section--dark は付けていない。共通側に背景色を
     塗られると帯のリビールが見えなくなるため。そのぶんここで指定する。
   ※ 詳細度 0-3-0。上の .page-service .section-head__label（0-2-0）より強い。 */
.page-service .sec-lead .section-head__label {
    --mark-ink: rgba(245, 244, 242, 0.85);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* ※ common.css の .section--dark .section-head__label::before が
     background-color を塗るので transparent で打ち消す。
     詳細度は同じだが、ページCSS は common.css の後に
     読み込まれるのでこちらが勝つ。 */
.page-service .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(to bottom right,
            transparent 50%,
            var(--mark-ink) 50%),
        linear-gradient(to top left,
            transparent 50%,
            var(--mark-ink-sub) 50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* ================================================================
   イントロ
   ※ レイアウト（黒いL字帯＋2カラム＋写真2枚のずらし重ね）は
     common.css の .sec-lead が持つ。recruit ページと共用。
   ※ 列の比率を変えたい場合はここで --lead-col-div /
     --lead-col-gap を上書きする（帯の幅も自動で追従する）。
   ※ 写真の寄せ量を変えたい場合は .sec-lead__figure に対して
     --lead-img-offset を上書きする。
================================================================ */

/* ── 本文カラムの右上のイラスト装飾 ──
   ※ 仕組み（位置・重なり順）は common.css の .sec-lead__illust が持つ。
     recruit ページと共用。
   ※ 大きさをこのページだけ変えたい場合は、
     .sec-lead__illust に対して --lead-illust-w をここで上書きする。
     現在は既定（96〜176px）のまま。 */

/* ── 帯の色 ──
   ※ background-color ではなく --lead-band-ink を変える。
     このセクションは「面がL字に降りてくる」演出なので、
     セクションに背景色を塗るとリビールが見えなくなる。
     （common.css 側にも同じ注意書きがある）

   ── ※重要※ 半透明にしないこと ──
   指定は #1A1A1A の不透明度 0.95 相当だが、
   rgba() ではなく「合成後の色」を不透明で置いている。

       26 × 0.95 + 245 × 0.05 ≒ 37  →  #252525
       （245 は地のオフホワイト #F5F4F2）

   rgba で半透明にすると、このセクションに仕込まれている
   「重なりで継ぎ目を隔す」仕組みと衝突する。
   重なる箇所は2つあり、どちらもアルファが二重に乗って
   そこだけ濃い線になる。
       1. 縦棒の幅の +1px（写真の下に潜り込んでいる）
          → 写真の左端に縦の濃い線が出る
       2. 横棒の左端の -2px（縦棒に潜り込んでいる）
          → L字の角が黒くなる
   不透明なら重なっても同色なので何も起きない。
   濃さを変えるときも rgba に戻さず、合成後の値を計算して
   ここに入れること。

   ※ 地の色（.sec-lead の background-color）を変えたときは、
     上の計算をやり直してこの値を更新する。
   ※ 写真の隅に残る正方形（--lead-figure-bg）は
     帯の色を参照しているので自動で追従する。 */
.page-service .sec-lead {
    /* ※ 暗転前は #1A1A1A をオフホワイトの地（#F5F4F2）の上に
         0.95 で乗せた合成色として #252525 を入れていた。
         地が黒（#0D0D0D）になったのでその計算は意味を失う。
         地より一段明るい面として黒スケールに乗せ直す。
       ※ 上の「半透明にしないこと」は引き続き有効。
         --black-* はすべて不透明なのでそのまま使える。 */
    --lead-band-ink: var(--black-6);
}

/* ── 写真のトリミング基準（このページだけ）──
   object-fit: cover で切り落とすとき、どこを残すかを決める。
   1枚目（ウレタン）… 左端基準
   2枚目（ロックウール）… 右端基準
   ※ ※重要※ 作業員は 1枚目が右寄り、2枚目が左寄りに写っている。
     基準をその反対側に置くことで、切り落ちは人物の
     いない側から起き、作業員が枠内に残る。
     ※ 以前は逆（1枚目＝右 / 2枚目＝左）にしていたが、
       それだと人物が枠の外へ押し出されて見切れた。
     ※ 写真を差し替えたときは、被写体の位置を見て
       この2行を見直すこと。
   ※ ※重要※ 割り当ては :nth-child で見ている。
     HTML の並び順を入れ替えると基準も入れ替わる。
   ※ 画面幅によらず常時この基準。縦積み（1024〜1599px）に
     なっても値は変えない。
   ※ 詳細度 0-2-1。共通側（.sec-lead__image、0-1-0）より強い。 */
.page-service .sec-lead__figure .sec-lead__image:nth-child(1) {
    object-position: right 10% top 50%;
}

.page-service .sec-lead__figure .sec-lead__image:nth-child(2) {
    object-position: left 10% top 50%;
}

/* ── 1024px未満：写真2枚の左右（並び順）を入れ替える ──
   ※ 〜1023px は .sec-lead__figure が2カラム（左右並び）なので、
     order で1枚目と2枚目の置き場所を入れ替える。
     1枚目（ウレタン）が右、2枚目（ロックウール）が左になる。
   ※ トリミング基準（上の object-position）は DOM 位置の
     :nth-child で当てているので、order で並べ替えても
     各写真に正しい基準が付いたまま動く。
   ※ 1024px以上は下のブロックで order を戻す。
     1024〜1599px（縦積み）・1600px以上（左右並び）は
     元の順序（1枚目→2枚目）に保つ。 */
.page-service .sec-lead__figure .sec-lead__image:nth-child(1) {
    order: 2;
}

.page-service .sec-lead__figure .sec-lead__image:nth-child(2) {
    order: 1;
}

@media (min-width: 1024px) {
    .page-service .sec-lead__figure .sec-lead__image:nth-child(1),
    .page-service .sec-lead__figure .sec-lead__image:nth-child(2) {
        order: 0;
    }
}

/* ※ 不透明に戻したので、共通側の重なり（横棒の -2px）を
     打ち消す必要はない。以前は半透明にしていたため
     角が二重に濃くなり、ここで突き合わせに変えていた。
     重なりは丸め誤差の継ぎ目を隔すために必要なものなので、
     共通側のままにしてある。 */

/* ================================================================
   サービス詳細（共通）
================================================================ */

/* ── セクションの地 ──
   01（ウレタン）と 02（ロックウール）を同じ面に揃える。
   ※ 値はトップの .index-dark-block（index.css）と同じ
     --color-bg-raise（#111111）。ページ背景（#0D0D0D）より
     4階調明るい面で、サイト内の「一段浮かせたブロック」と
     揃えてある。
   ※ ※重要※ 01 は HTML 側に .section--light（#1F1F1F）を
     持っている。ここの詳細度（0-1-0）と同値だが、
     service.css は common.css の後に読まれるので後勝ちする。
     読み込み順を変えるときは注意。
   ※ 上下で面を分けたい場合は、どちらかを
     #urethane / #rockwool で個別に上書きする。 */
.page-service .service-detail {
    background-color: var(--color-bg-raise);
}

/* ── 01（ウレタン）と 02（ロックウール）の境目を詰める ──
   隣り合う２つの事業ブロックの間隔（01の下余白＋02の上余白）を
   それぞれ半分にして近づける。
   ※ .section の上下余白は base = --spacing-xxl（5.5rem）、
     768px以上 = --spacing-3xl（8rem）。両段とも半分にする。
   ※ id セレクタ（詳細度 1-0-0）なので .section 側より強く、
     読み込み順に依存せず上書きできる。
   ※ 片側だけ／別の量にしたいときは下の calc の割る数を変える。 */
#urethane {
    padding-bottom: calc(var(--spacing-xxl) / 2);
}

#rockwool {
    padding-top: calc(var(--spacing-xxl) / 2);
}

@media (min-width: 768px) {
    #urethane {
        padding-bottom: calc(var(--spacing-3xl) / 2);
    }

    #rockwool {
        padding-top: calc(var(--spacing-3xl) / 2);
    }
}

.service-detail__head {
    display: flex;
    align-items: flex-start;
    /* gap はベース 1.25rem → 475px以上 1.5rem → 768px以上 2rem の3段。
       ※ 1.25rem に対応する --spacing-* が無いので実値。
         475px・768px 側は下のメディアクエリで上げる。 */
    gap: 1.25rem;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    /* ── 下線：全幅の細線（白15%）＋左端の短い白線 ──
       ※ 新着情報の詳細（news.css の .news-detail__title）・
         一覧のカード・トップの新着情報と同じ二色二本構成。
         border では2色に分けられないので background で描く。
       ※ 短い白線の横幅は見出し幅の 10%（このセクションだけの指定）。
         news-detail 等は --news-line-accent（common.css の :root、2.5rem固定）
         を使うが、ここは幅に対する割合で持つ。
       ※ 短い線は白・2px、全幅の線は白15%・1px。
         太さの差で重なりを見せる。 */
    background-image:
        linear-gradient(var(--color-text-inverse) 0 0),
        linear-gradient(var(--color-border) 0 0);
    background-size:
        10% 2px,
        100% 1px;
    background-repeat: no-repeat;
    background-position:
        left bottom,
        left bottom;
}

@media (min-width: 475px) {
    .service-detail__head {
        gap: var(--spacing-sm);
    }
}

@media (min-width: 768px) {
    .service-detail__head {
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }
}

/* 1024px以上は短い白線の割合を下げる。
   ※ 画面が広がると見出しの幅も広がり、同じ割合だと
     白線が長くなりすぎるため 7.5% に絞る。
   ※ background-size は1プロパティで全レイヤーを持つので、
     幅を変えるときも二本まとめて書き直す（二本目は全幅のまま）。 */
@media (min-width: 1024px) {
    .service-detail__head {
        background-size:
            7.5% 2px,
            100% 1px;
    }
}

.service-detail__num {
    font-family: var(--font-en);
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .service-detail__num {
        font-size: 3.5rem;
    }
}

/* ── 01/02 の見出し（共通 .section-head--swap に乗せる）──
   ※ 帯スイープの登場・日本語小＋英字大の組みはすべて
     common.css の .section-head / --swap が持つ。ここでは
     .service-detail__head の番号（.service-detail__num）との
     レイアウトの突合だけを調整する。
   ※ 共通 .section-head の margin-bottom: 2.5rem は、番号の横に
     並ぶ head-body では不要なので打ち消す。
   ※ 英字タイトルの大きさだけ 01/02 のサブ見出し向けに
     一段小さく据え置く（下の .service-detail__title）。 */
.service-detail__head-body.section-head {
    margin-bottom: 0;
}

/* 英字タイトルの大きさだけ、トップレベルのセクション見出しより
   一段小さくする（01/02 はサブ見出しなので階層を保つ）。
   ※ 書体（Orbitron）・字間・色は共通 --swap 側に任せる。 */
.service-detail__head-body .service-detail__title {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
}

@media (min-width: 768px) {
    .service-detail__head-body .service-detail__title {
        font-size: clamp(1.75rem, 3vw, 2.25rem);
    }
}

/* ベース（〜1023px）は本文ブロックと写真の縦積み。 */
.service-detail__grid {
    display: grid;
    gap: var(--spacing-lg);
}

/* ================================================================
   1024px以上：写真の高さを本文（.service-detail__body）に揃える

   2列×1行のグリッドにし、
       本文（__body）｜写真（__media）
   と並べる。写真は比率を持たず、行の高さ＝本文の高さを
   そのまま受け取るので、文末と写真の下端が揃う。

   ※ ※重要※ align-items は stretch（初期値）にすること。
     start にすると写真が行の高さに伸びない。

   ※ ※重要※ 写真の aspect-ratio は auto に戻す。
     比率が残っているとそちらが行の高さを決めてしまい、
     本文に揃わない。写真の中身は絶対配置なので
     高さを持たず、行の高さをそのまま受け取る。

   ※ 列の入れ替え（--reverse）は grid-column で行う。
     order でも同じ結果になるが、01 と並べて読むときに
     どちらの列に入るかが一目で分かるので列番号で書いている。

   ※ 以前は本文の下に強みのリスト（__points）を置き、2行目に
     回して写真の下端より下に伸ばしていた。本文の言い換えに
     なっていたので削除し、1行に戻してある。
     （__body を display: contents で外す必要もなくなった）
================================================================ */

@media (min-width: 1024px) {
    .service-detail__grid {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--spacing-xl);
    }

    .service-detail__body {
        grid-column: 1;
        grid-row: 1;
    }

    .service-detail__media {
        grid-column: 2;
        grid-row: 1;
        /* ※ 高さは行（＝本文）に揃える。
             比率を外す指定はここには書かない。
             .service-detail__figures 本体の宣言がこの先に
             あるので、ここで aspect-ratio を書いても
             後勝ちで上書きされる（詳細度は同じ 0-1-0、
             メディアクエリは詳細度を上げない）。
             実際の打ち消しは .service-detail__figures の
             宣言より後ろにある 1024px のブロックで行う。 */
    }
}

/* 画像を左に配置するバリエーション
   ※ ※重要※ 列の比率は上の .service-detail__grid と
     必ずセットで見直すこと。片方だけ変えると
     01 と 02 で写真の幅が揃わなくなる。
     現在は両方とも 1 : 1 なので値は同じ。 */
@media (min-width: 1024px) {
    .service-detail__grid--reverse {
        grid-template-columns: 1fr 1fr;
    }

    .service-detail__grid--reverse .service-detail__body {
        grid-column: 2;
    }

    .service-detail__grid--reverse .service-detail__media {
        grid-column: 1;
    }
}

/* ※ 本文は --color-sub-text。
     body の既定（--color-text）よりわずかに落としてある。
     暗転で値は反転したが（#333333 → #C9C6C1）、
     「本文より一段弱い」という関係はそのまま保たれている。
   ※ 下の strong は --color-title（白）なので、
     本文を一段落とすことで強調との差が広がる。
     ※ 値を変えるときは強調側との差を見ながら調整すること。 */
.service-detail__text {
    color: var(--color-sub-text);
    margin-bottom: var(--spacing-sm);
}

/* ── 本文中のキーワード強調 ──
   ※ イントロの .sec-lead__text strong（common.css）と同じ考え方。
     ウェイトを 500 に上げる。
   ※ こちらは明るい面（白 / オフホワイト）の上なので、
     不透明度を上げる処理は不要。
   ※ 色は見出しと同じ --color-title（#0D0D0D）。
     本文（--color-text = #2B2B2B）との差は30階調程度なので、
     中間色を挖んでも体感できない。サイトで一番濃い色に揃える。
     ※ イントロ側も「本文と同じ基色で不透明度を 1.0 に戻す」
       ＝最も濃い状態にしてあるので、考え方が揃う。
   ※ 600 以上にしないのは、見出し（h2 / h3 = 700）との
     階層を保つため。色を揃えた分、差はウェイトでつける。 */
.service-detail__text strong {
    font-weight: 500;
    color: var(--color-title);
}

/* ※ 末尾の下余白は落とす。
     グリッドアイテムの中ではマージンが外に抜けないので、
     残しておくと .service-detail__body の高さに 1.5rem 分が
     乗り、写真の下端が文末より下にずれる。 */
.service-detail__body .service-detail__text:last-child {
    margin-bottom: 0;
}

/* ================================================================
   01 / 02 の写真：右上→左下の対角線で2枚に切り分ける

   1つの箱に写真2枚を重ね、clip-path で三角に切り出す。
       1枚目 … 左上の三角（左上・右上・左下の3点）
       2枚目 … 右下の三角（右上・右下・左下の3点）
   2つで箱をちょうど埋めるので、境目は右上と左下を結ぶ
   対角線1本になる。

   ※ 分割の向きはこのページの装飾マーク
     （Service の三角2つ / common.css の .c-mark-triangles）と同じ。
     ページ内で同じ形を繰り返す意図。

   ※ 三角の頂点に箱の角（0 / 100%）をそのまま使っているので、
     箱の比率を変えても境目は必ず角と角を結ぶ。

   ※ ※重要※ 三角の割り当ては :nth-child で見ている。
     HTML の並びを入れ替えると、どちらの写真がどちらの
     三角に入るかも入れ替わる。

   ※ 以前は 4/3 の写真を2枚、576px以上で横並び・
     1024px以上で縦積みにしていた。切り分けに変えたので
     グリッドの指定はすべて外してある。
================================================================ */

/* ── 分割位置（この1つで線と2枚のクリップが同時に動く）──
   グラデーション上の位置（0%〜100%）で持つ。
   50% が対角線ちょうど。0% が左上の角、100% が右下の角。
   ※ @property で型を登録しているのは、custom property は
     そのままでは transition が効かないため。
     登録すると <percentage> として補間され、
     線とクリップが1つの値で滑らかに動く。
   ※ ※重要※ @property は入れ子にできない。
     メディアクエリの中に書かないこと。
   ※ 非対応ブラウザでは補間されずパッと切り替わるだけで、
     形自体は正しいまま。 */

/* ── 写真を包む入れ物 ──
   ※ ※重要※ 1024px以上のグリッド配置はこの箱が受ける。
     内側の .service-detail__figures は flex: 1 で
     この箱の高さを埋める。
   ※ 切り替えタブ（.service-detail__tabs）はこの箱の中に置くが、
     絶対配置でフロー外に出して重ねるので高さは取らない。
     フローの子は .service-detail__figures だけなので、
     flex: 1 で写真が箱の全高を使える。
   ※ キャプション等を写真の下に追加するときもこの箱の中に置く。 */
.service-detail__media {
    display: flex;
    flex-direction: column;
    /* ※ 切り替えタブ（.service-detail__tabs）を絶対配置で重ねる基準。
         タブをこの箱の高さから外し、写真（.service-detail__figures）が
         flex: 1 で全高を使えるようにする（1024px以上で本文と
         高さを揃えたとき、タブ分だけ写真が縮むのを防ぐ）。 */
    position: relative;
}

/* ── 写真2枚の並び ──
   ※ 〜1023px：横並び（2列）
     1024px〜：縦並び（1列）… 本文との2カラムになり
                 写真側が半分幅に落ちるため。
   ※ 切り替えるときは grid-template-columns と
     grid-template-rows を必ず両方セットで戻すこと。

   ※ ※重要※ 以前は1つの箱に写真2枚を重ね、clip-path で
     右上→左下の対角線に切り分けていた。
     あわせて下の仕組みを廃止してある。
         --figures-ratio / --figures-line-w / --figures-line-ink
         --figures-split（分割位置）と @property の型登録
         --figures-overlap（継ぎ目を隠す重なり）
         --figures-a / -b / -a2 / -b2（クリップ頂点の計算）
         :has() を使ったホバーでの分割線スライド
         ::after の境目の線
     戻すときは上記をまとめて復元すること。
   ※ 写真の自動送り（.service-detail__slider）はそのまま残してある。 */
.service-detail__figures {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

    /* 上の値からクリップの頂点を割り出す。
       ※ 5点のうち使わない点は隣に重なって潰れるので、
         三角のときも長方形のときも同じ5点で書ける。
         頂点の数が変わらないので clip-path が補間できる。
       ※ すべて % なので、箱の縦横比が変わっても
         分割線は必ず対角線と平行になる（一次変換なので
         平行な直線は平行のまま写る）。
       ※ a / b が1枚目（左上側）、a2 / b2 が2枚目（右下側）。 */
    /* 継ぎ目を隠すための重なり量（分割位置と同じ％換算）。
       ※ ※重要※ 1枚目だけをこの分だけ広げ、2枚目の下に
         潜り込ませる。切り口をぴったり突き合わせると、
         双方のアンチエイリアスが半透明どうしで接し、
         あいだから箱の地色（--color-primary）が細く覟いて
         斜めの階段状のムラに見える。
       ※ 見えている境目は常に2枚目の切り口（＝分割線の位置）。
         1枚目のはみ出しは常に2枚目の下に隠れるので、
         多少大きくても見た目には影響しない。
         （2枚は DOM 順で 2枚目が上に描かれる）
       ※ .sec-lead の帯が縦棒を +1px 重ねているのと同じ考え方。
       ※ ガタガタが残るときはまずこの値を大きくする。 */

/* ── ホバー：線を向こう側へ送り出す ──
   ホバーした側が広がり、反対側が押し出される。
   線は対角線と平行のまま、斜めにスライドして角へ抜ける。
   ※ :has() を使うのは、子（figure）のホバーで
     親が持つ変数を変える必要があるため。
     変数は下にしか伝わらないので、子側では線（親の ::after）を
     動かせない。
   ※ クリップは当たり判定も切り抜くので、三角の見えている
     範囲だけがホバーを拾う。広がった後はそちらが箱全体を
     占めるので、ポインタを動かしても状態が奇れない。
   ※ 2枚の領域は常に裏表なので重ならない。
     だから z-index で前後を入れ替える必要はない。 */

/* ※ ※重要※ 1024px 以上は比率を使わず、高さを本文
     （.service-detail__body）に揃える。
   ※ この指定は必ず .service-detail__figures の宣言より
     「後ろ」に置くこと。
     セレクタは同じので詳細度も同じ 0-1-0、
     メディアクエリは詳細度を上げないので、
     先に書くと aspect-ratio: var(--figures-ratio)（＝4/3）に
     後勝ちで戻される。 */
/* 1024px以上：写真2枚を縦並び（1列）にし、
   高さを左の本文（.service-detail__body）に揃える。
   ※ 本文との2カラムになり写真側が半分幅に落ちるので、
     横並びのままだと1枚あたりが細くなりすぎる。
   ※ ※重要※ grid-template-columns を 1列に戻し、
     grid-template-rows を2行にする。必ず両方セットで。
     片方だけだと 2×2 のグリッドになる。
   ※ minmax(0, 1fr) なのは、行が既定で「中身の最小サイズを
     下回らない」ため。生の 1fr だと写真の実寸高さが
     下限になって縮めない。
   ※ flex: 1 は親（.service-detail__media）の高さを埋めるため。
     親は flex-direction: column なのでこれで行の高さを受け取る。 */
@media (min-width: 1024px) {
    .service-detail__figures {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        flex: 1;
        min-height: 0;
    }
}

/* 1280px以上：写真2枚を再び横並び（2列）に戻す。
   ※ 1024～1279px は縦積みだが、1280px以上は
     .section__inner の上限（--section-width-xl）が効き始めて
     写真側の実幅にも余裕が出るため、再び横並びにする。
   ※ grid-template-rows を 1行に戻すのを忘れないこと。
     行数を 2 のままにすると 2×2 のグリッドになる。
   ※ figure 自体（aspect-ratio: auto ・ min-height: 0）は
     1024pxのブロックで既に指定済みなのでここでは触らない。 */
@media (min-width: 1300px) {
    .service-detail__figures {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }
}


/* ── 2つの領域 ──
   ※ 詳細度 0-2-0。共通の .js-mask（position: relative、0-1-0）を
     確実に上書きするため、親を含めた形で書いている。
   ※ clip-path はスタッキング文脈を作るので、
     .js-mask::after（帯のスイープ）は領域の中に収まる。
   ※ ※重要※ 頂点は常に5つ。三角のときは使わない点が
     隣に重なって潰れるだけで、数は変わらない。
     数を揃えているから clip-path が補間され、
     分割線が角度を保ったまま平行にスライドする。
   ※ 頂点の値は親の --figures-a / -b / -a2 / -b2。
     すべて --figures-split から導かれるので、
     形を変えるときはそちらを見ること。 */
/* ── 写真1枚分の枠 ──
   ※ 詳細度 0-2-0。共通の .js-mask（position: relative、0-1-0）を
     確実に上書きするため、親を含めた形で書いている。
   ※ 中身（.service-detail__slider と写真）が絶対配置なので、
     この枠側が位置の基準と高さを持つ。
   ※ 〜1023px は aspect-ratio で自分の高さを持ち、
     1024px以上は行（minmax(0, 1fr)）の高さを受け取る。
   ※ ※重要※ 以前は position: absolute; inset: 0 で
     2枚を同じ箱に重ね、clip-path で三角に切り分けていた。
     グリッドのセルに並べる方式に変えたので、
     絶対配置と clip-path は廃止した。 */
.service-detail__figures .service-detail__figure {
    position: relative;
    overflow: hidden;
    /* 遅延読み込みの待ち時間に見える色。 */
    background-color: var(--color-primary);
    /* 〜1023px のときの形。
       ※ 1024px以上は下のブロックで auto に戻し、
         行の高さ（＝本文の半分）を受け取る。 */
    aspect-ratio: 4 / 5;
}

@media (min-width: 1024px) {
    .service-detail__figures .service-detail__figure {
        /* ※ 比率が残っているとそちらが高さを決めてしまい、
             本文に揃わない。 */
        aspect-ratio: auto;
        min-height: 0;
    }
}

/* 1枚目：左上側（split が 50% のとき左上の三角）
   左上 → 上辺 → 右辺 → 下辺 → 左辺
   ※ split 100% で箱全体、split 0% で消える。 */

/* 2枚目：右下側（1枚目を180度回した形）
   ※ split 0% で箱全体、split 100% で消える。 */

/* ── 境目の線 ──
   ※ linear-gradient の角キーワード（to bottom right）は、
     「色の境目が右上と左下の角を通る線と重なる」よう
     角度が決まる（CSSの仕様）。箱が正方形でなくても
     50% の位置はちょうど対角線に乗る。
     .c-mark-triangles も同じ仕組みで三角2つを描いている。
   ※ z-index は三角より上。三角は clip-path で
     スタッキング文脈を作るが z-index は auto（＝0）なので、
     3 にしておけば帯のスイープよりも必ず前面に来る。
   ※ クリックと選択を奴わない。 */

/* ── 写真のセット切り替えタブ ──
   写真の外・すぐ下に右寄せで並べる。
   ※ 形は横長の細いバー。サイト共通の方針に合わせて直角で揃えてある
     （丸いドットは使わない）。
   ※ 押せる領域はバーより大きく取る（タップしやすさの確保）。
     バー本体は ::before で描き、ボタン自体は透明な当たり判定として使う。
   ※ 2セット目が未支給のときは PHP 側でタブごと出さないので、
     ここで非表示を扱う必要はない。 */
.service-detail__tabs {
    /* ※ media の高さを取らないよう、フロー外（絶対配置）で
         写真の右下に重ねる。基準は親（.service-detail__media、
         position: relative）。疑似要素と同じ乗せ方。
       ※ bottom は -2rem。写真の外（下）に飛び出す形。 */
    position: absolute;
    right: 0;
    bottom: -2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.service-detail__tab {
    /* バー本体の寸法。変えるときはこの2つを触る。 */
    --tab-w: 1.5rem;
    --tab-h: 2px;

    display: flex;
    align-items: center;
    justify-content: center;
    /* 当たり判定。バーは細いので、上下に余裕を取る。 */
    width: var(--tab-w);
    height: 1.25rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

/* バー本体。
   ※ 平時は控えめ、アクティブで白に点灯する。
   ※ 色は地に合わせて白系の rgba で持つ。
     01（.section--light）も 02（素の .section）も暗い地なので
     同じ値で良い。 */
.service-detail__tab::before {
    content: '';
    display: block;
    width: 100%;
    height: var(--tab-h);
    background-color: rgba(245, 244, 242, 0.35);
    transition: background-color var(--transition);
}

.service-detail__tab:is(:hover, :active)::before {
    background-color: rgba(245, 244, 242, 0.6);
}

.service-detail__tab.is-active::before {
    background-color: var(--color-text-inverse);
}

/* ── 写真 ──
   ※ トリミングの基準位置は下の2つの object-position。
     左側（1枚目）は左端から25%、
     右側（2枚目）は右端から25%。どちらも縦は中央。
     端に寄せ切らず少し内側に戻して、
     両端が切れすぎないようにしている。
     ※ 01（ウレタン）と 02（ロックウール）の両方に効く。
       セクションごとに分けたい場合は #urethane / #rockwool を
       前に付けて上書きする。
   ※ aspect-ratio は箱側（--figures-ratio）が持つので、
     画像自身には持たせない。 */
.service-detail__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* グレースケール量はサイト共通の値を参照する。
       定義は common.css の :root（--photo-grayscale = 35%）。
       トップの事業内容カード（.index-service__image）・
       強み（.index-strengths__image）と同じ値になる。
       ※ 濃さを変えるときはここではなく :root を直すこと。
       ※ 施工実績だけは別値（--photo-grayscale-works）を持つ。 */
    filter: grayscale(var(--photo-grayscale));

    /* ※ filter はトランジションに入れない。
         ホバーで濃さを変えないのはトップと同じ考え方で、
         写真の色味は固定。
       ※ transform も外してある。ホバーでの拡大を廃止したので、
         動くのは自動送りの切り替え（opacity）だけ。 */
    transition: opacity 0.5s ease;
}

/* 1枚目（左側）：左端から25%・中央
   ※ 3値構文の left 25% center と同値。
     ブラウザ間の解釈ブレを避けるため2値で書いている
     （このファイルの .sec-lead__image 側と同じ方針）。 */
.service-detail__figure:nth-child(1) .service-detail__image {
    object-position: 25% center;
}

/* 2枚目（右側）：右端から25%・中央
   ※ 3値構文の right 25% center と同値。
     右から25% ＝ 左から75% なので 75% と書く。 */
.service-detail__figure:nth-child(2) .service-detail__image {
    object-position: 75% center;
}

/* ── スライドの入れ物 ──
   ※ ※重要※ 写真を直に figure の下に置かないこと。
     figure は .js-mask なので、common.css の
         .js-mask.is-revealed > * { opacity: 1; transition: opacity 0s ... }
     が「直下の子」を強制的に表示させる。
     写真を直下に置くと、帯が通ったあと全枚が同時に見えて
     切り替えが成立しない。
     この箱を1枚挟むことでマスクの対象はこの箱だけになり、
     中の写真は自分たちで不透明度を管理できる。
     r-doboku の .service-group__slider と同じ考え方。 */
.service-detail__slider {
    position: absolute;
    inset: 0;
}

/* スライドの切り替え
   ※ 全枚を同じ位置に重ね、.is-active の1枚だけを見せる。
     付け外しは assets/js/service.js（5秒ごとの自動送り）。
   ※ 不透明度と拡大の transition は
     .service-detail__image 本体が持つ。 */
.service-detail__image.is-active {
    opacity: 1;
    z-index: 2;
}

/* 直前まで見せていた写真。次の写真が乗り切るまで真下に残す。
   ※ ※重要※ 出入りを同時にさせないための指定。
     両方を 0.5 秒で入れ替えると途中でどちらも半透明になり、
     重ねても不透明にならない（1 - 0.5 × 0.5 = 0.75）。
     残りの25%から箱の地色（--color-primary）が覚いて、
     切り替わるたびに一瞬暗く沈む。
   ※ 不透明のまま真下に置いておけば、上でフェードインする
     写真が乗り切るまで地色は出ない。
   ※ .is-prev を外すのは JS（FADE_MS 後）。外れた時点では
     上が不透明なので、消えても見えない。 */
.service-detail__image.is-prev {
    opacity: 1;
    z-index: 1;
}

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

    .service-detail__image {
        transition: none;
    }


    /* ※ 写真の自動送り自体を止めるのは service.js 側。
         同じ prefers-reduced-motion を matchMedia で見ている。
         （タイマーを回さないので 1枚目が出たままになる） */
}

/* ================================================================
   対応地域（AREA）
================================================================ */

/* ── セクションの地（上から下への勾配）──
   上端 #111111 → 下端 #0D0D0D。
   ※ トップの強み（index.css の .index-strengths）と同じ持ち方。
     上の 02（ロックウール・#111111）から継ぎ目なく始まり、
     下端をページ背景（--color-bg ＝ #0D0D0D）と同値にして
     次の共通CTA へつなげている。
   ※ 色を変えるときは下の2つの変数だけを触る。
   ※ background-color も下端色で持つ。
     HTML 側の .section--dark（--color-bg-dark ＝ #000000）を
     確実に打ち消すため。
   ※ 詳細度 0-2-0。.section--dark（0-1-0）より強いので
     読み込み順に依存せずに勝つ。 */
.page-service .service-area {
    --area-bg-top: var(--color-bg-raise);
    /* 上端：#111111 */
    --area-bg-bottom: var(--black-3);
    /* 下端：#0D0D0D */

    /* 背景写真（area-bg.webp）の上に勾配のオーバーレイを重ねる。
       ※ 写真は ::before、オーバーレイは ::after で敷く。
         中身（.section__inner）は z-index: 1 で前面に出す。
         ※ 疑似要素を背面送り（z-index 負）にしないのは、
           HTML側の .section--dark（#000000）が背面を覆って
           写真が消えるのを避けるため。.page-bottom と同じ方式。
       ※ isolation: isolate で z-index を閉じ込める（.page-bottom と同じ）。
       ※ 地色は不透明の --area-bg-bottom（#0D0D0D）を敷いておき、
         .section--dark（#000000）を確実に打ち消す。
       ※ グレースケール量は背景写真共通の --photo-grayscale-bg。 */
    position: relative;
    isolation: isolate;
    background-color: var(--area-bg-bottom);
}

/* 背景写真。 */
.page-service .service-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/area-bg.webp');
    background-size: cover;
    /* ※ 768px未満は写真を右寄り（72.5% center）にする。
         狭い画面で切り落としたときに見せたい側を右に寄せる。
       ※ 768px以上は下のブロックで既定（center）に戻す。 */
    background-position: 72.5% center;
    filter: grayscale(var(--photo-grayscale-bg));
}

@media (min-width: 768px) {
    .page-service .service-area::before {
        background-position: center;
    }
}

/* 上から下への勾配オーバーレイ（recruit の .recruit-entry と同じ配分）。
   ※ 上が薄く下が濃い。上端 0.4 → 33% 0.5 → 66% 0.6 → 98%/100% 不透明。
     写真は上ほど見え、下端は不透明の #0D0D0D で下の共通CTAへ繋ぐ。
   ※ 98% で不透明に到達させ、下端付近を平らにして
     小数点丸めで隙が出る幅をなくす（recruit と同じ）。
   ※ 濃さを変えるときは下の4つのアルファ値だけを触る（recruit と同じ持ち方）。 */
.page-service .service-area::after {
    --area-overlay-1: 0.4;
    /* 上端：最も薄い（写真が一番見える） */
    --area-overlay-2: 0.5;
    /* 33%地点 */
    --area-overlay-3: 0.6;
    /* 66%地点 */
    --area-overlay-4: 1;
    /* 下端：不透明。下の共通CTA（#0D0D0D）へ繋ぐ */

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

/* 中身は写真・オーバーレイより前面に置く。 */
.page-service .service-area > .section__inner {
    position: relative;
    z-index: 1;
}

/* 英字見出し（Area）の大きさを下層ページ共通の大きめに揃える。
   ※ works.php の施工実績一覧（.page-works .section-head__title）と同値。
     recruit のエントリー・company・news などとも揃う。
     ベース      32〜42px
     1024px以上  42〜60px
   ※ 共通の既定（.section-head__title）0-1-0より強い詳細度で上書きする。 */
.page-service .service-area .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
}

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

.service-area__body {
    display: grid;
    gap: var(--spacing-lg);
    align-items: center;
}

/* ── リスト側の枠 ──
   ※ recruit のエントリー枠（.recruit-entry__box）と同じ、
     枠線だけ（背景なし・角は落とさない）。
   ※ 内側に余白を持たせる。ベース（576px未満）上下 2rem・左右 1.5rem、
     576px以上は全方向 2rem（recruit と同じ持ち方）。
   ※ 2rem = --spacing-md、1.5rem = --spacing-sm。 */
.service-area__list-wrap {
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--spacing-md) var(--spacing-sm);
    border: 1px solid var(--color-border);
}

@media (min-width: 576px) {
    .service-area__list-wrap {
        padding: var(--spacing-md);
    }
}

.service-area__figure {
    /* ※ 画像の実際の幅にフィットさせて中央寄せにする（display: flex + justify-content:
         center だと、figure 自体が全幅になり、下の L 字が画像の
         角ではなく figure の角（全幅の両端）に付いてしまうため）。
       ※ position: relative は L 字（::before / ::after）の基準になる。 */
    position: relative;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: var(--spacing-sm);
}

/* ── 四隅のL字装飾（::before 1個で background グラデーション 8枚を並べて描く）──
   ※ サイト内の他のL字・対角装飾（c-mark-lblock など）と
     同じ視覚言語。地図をフォーカスして見せる意図。
   ※ 四隅を一つの擬似要素（::before）で作るため、横線＋縦線の
     2枚1組×4隅 = 8枚の background-image を重ねている。
   ※ inset: -0.5rem で画像の外側に少し飛び出す（以前の
     対角版と同じオフセット）。
   ※ 色は白45%（rgba(245, 244, 242, 0.45)）、1px、一辺 1.5rem。
   ※ 装飾なのでクリックと選択を奪わない。 */
.service-area__figure::before {
    content: '';
    position: absolute;
    inset: -0.5rem;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0),
        linear-gradient(rgba(245, 244, 242, 0.45) 0 0);
    background-size:
        1.5rem 1px, 1px 1.5rem,
        1.5rem 1px, 1px 1.5rem,
        1.5rem 1px, 1px 1.5rem,
        1.5rem 1px, 1px 1.5rem;
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
    background-repeat: no-repeat;
}

.service-area__image {
    width: 100%;
    max-width: 12.5rem;
    height: auto;
    /* ※ area-kyushu.webp は元から白の線画（透過背景）なので、
         反転は不要。淡さだけ不透明度で残す。
       ※ 以前は黒い線画SVG（area-map.svg）を白抜きにするため
         brightness(0) invert(1) opacity(0.86) をかけていた。
         黒い素材に戻す場合はその3つを戻す。 */
    opacity: 0.86;
}

@media (min-width: 768px) {
    .service-area__image {
        max-width: 14rem;
    }
}

.service-area__lead {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 4.5vw, 1.375rem);
    letter-spacing: 0.1em;
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-sm);
}

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

.service-area__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: var(--spacing-sm);
}

.service-area__item {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--color-text-inverse);
    border: 1px solid var(--color-border-dark);
    transition: border-color var(--transition), background-color var(--transition);
}

.service-area__item:hover {
    border-color: rgba(245, 244, 242, 0.5);
    background-color: rgba(255, 255, 255, 0.04);
}

.service-area__note {
    font-size: 0.875rem;
    color: rgba(245, 244, 242, 0.66);
}