@charset "UTF-8";

/* ================================================================
   株式会社Logic - works.css
   施工実績ページ専用スタイル
   ※ PKOBO-News01（work/）の出力に合わせたスタイル
================================================================ */

/* ================================================================
   セクション見出しの装飾（ページ共通）
   ※ このページは全セクションを同じ形で揃える。
     形＝O字ブロック（2×2）。ヘッダー・ドロワー・
     トップの Works と同じマーク（定義は common.css の
     .c-mark-oblock）。4マスとも同じ濃さで描く。
     （採用ページの O字ブロックは左上・右下だけ濃い。色で区別する）
   ※ セクションを暗背景（#1A1A1A）にしたので、トップと同じく白系で描く。
   ※ サイズ調整は --works-cell / --works-gap を触る。
     外形 = マス2つ + 隙間1つ。
     0.625rem(10px) - 0.125rem(2px) = 8px → マス4px。
     マスが端数にならない値を保つこと（にじみ防止）。
================================================================ */

.page-works .section-head__label {
    --works-gap: 0.125rem;
    --works-cell: calc((var(--mark-size) - var(--works-gap)) / 2);
    --label-mark: var(--mark-size);
    --mark-ink: var(--color-text-inverse);
}

.page-works .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),
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink) 0 0);
    background-size: var(--works-cell) var(--works-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* ================================================================
   セクションの背景
   ※ HTML側に section--dark を付けて、見出し・ラベル・
     帯アニメの色処理を共通側（common.css）に任せている。
     ここでは背景色だけを差し替える。
   ※ section--dark の既定は --color-bg-dark（#0D0D0D）。
     そのままだと下に続く共通CTA（同じ #0D0D0D）と同色になって
     境目が消えるので、一段明るい --color-secondary（#1A1A1A）にする。
     下へ進むほど濃くなる流れになる。
================================================================ */

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

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

/* ── セクションの地（上から下への勾配）──
   上端 #111111 → 下端 #0D0D0D。
   ※ トップの強み（index.css の .index-strengths）や
     事業内容の対応地域（service.css の .service-area）と
     同じ持ち方。
   ※ 下端をページ背景（--color-bg ＝ #0D0D0D）と同値にして
     次の共通CTA へつなげる。
   ※ 色を変えるときは下の2つの変数だけを触る。
   ※ background-color も下端色で持つ。
     HTML 側の .section--dark（--color-bg-dark ＝ #000000）を
     確実に打ち消すため。
   ※ 以前は --color-bg-light（#1F1F1F）の単色だった。 */
.works-list.section--dark {
    --works-bg-top: var(--color-bg-raise);
    /* 上端：#111111 */
    --works-bg-bottom: var(--black-3);
    /* 下端：#0D0D0D */

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

/* ================================================================
   パンくず（このページだけ暗背景に揃える）
   ※ 共通の .breadcrumb は白地・暗色文字。このページは
     ページヒーロー（黒）→ パンくず → 一覧（#1A1A1A）と続くので、
     白のままだと途中に明るい帯が入って浮く。
   ※ 一覧と同じ #1A1A1A にして、ページヒーローの下から
     ひと続きの暗い面に見せる。
   ※ 白に戻す場合はこのブロックをまるごと削ればよい。
================================================================ */

/* ※ 共通の .breadcrumb も全面暗転で黒地になったので、
     このブロックの役割は「白地を暗くする」から
     「一覧セクションと同じ明度に揃える」に変わっている。
   ※ ※重要※ 上の .works-list.section--dark の
     「上端の色」（--works-bg-top）と必ず同じ値に保つこと。
     一覧は上から下への勾配なので、揃える先は下端ではなく上端。
     ずれるとパンくずと一覧の境目に段差が見える。
   ※ 以前は --color-bg-light（#1F1F1F）。一覧を勾配にした際に
     #111111 へ揃え直した。 */
.page-works .breadcrumb {
    background-color: var(--color-bg-raise);
    border-bottom-color: var(--color-border-dark);
}

.page-works .breadcrumb__list {
    color: rgba(245, 244, 242, 0.66);
}

/* ※ 区切り記号は文字なので、罫線用の --color-border-dark（白16%）
     だと薄すぎる。共通側（common.css）と同じ 0.35 に揃える。 */
.page-works .breadcrumb__item:not(:last-child)::after {
    color: rgba(245, 244, 242, 0.35);
}

.page-works .breadcrumb__current,
.page-works .breadcrumb__link:is(:hover, :active) {
    color: var(--color-text-inverse);
}

/* ※ マークの色も反転する。形の定義は common.css の .c-mark-* のまま。 */
.page-works .breadcrumb__mark {
    --mark-ink: rgba(245, 244, 242, 0.66);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

.page-works .breadcrumb__current .breadcrumb__mark,
.page-works .breadcrumb__link:is(:hover, :active) .breadcrumb__mark {
    --mark-ink: var(--color-text-inverse);
}

.works-list__body {
    margin-top: var(--spacing-lg);
}

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

/* ※ カード間の隔たり。枠線とパディングを外して
     カードが写真そのものになったので、以前より詰めてある。
     （以前：ベース 2rem / 1024px以上 3rem）
   ※ 1024px 以上でも 576px 以上の値（2rem）をそのまま使う。
     3列になってカードが小さくなるので、さらに広げると
     タイルとしてのまとまりが失われる。 */
.works-list__list {
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 576px) {
    .works-list__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

@media (min-width: 1024px) {
    .works-list__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* カードは写真そのもの。枠線もパディングも、
   写真の外に出す要素も持たない。
   タイトルは左上のバッジ、枚数は右下の表示として写真に重ねる。
   ※ 以前は下にサブ画像を並べていたので .works-list__item に
     flex column ＋ gap を持たせていたが、並べるものが
     無くなったのでルールごと外した。
     カードの高さが写真の正方形だけで決まるので、
     行ごとの高さが必ず揃う。
   ※ 2枚目以降のリンク（.works-list__gallery）は hidden なので
     場所を取らない。スタイルも不要。 */

/* メイン写真の入れ物。
   ※ position: relative はバッジ（.works-list__badge）を
     左上に絶対配置するための基準。
   ※ .js-mask（帯リビール）は付けていない。
     common.css の .js-mask > * { opacity: 0 } は JS が
     .is-revealed を付けるまで中身を隠すため、リビールが
     発火しないと黒い箱のまま残る。CMS画像は「確実に出る」ことを
     優先し、r-doboku と同じくマスクなしにしている。
   ※ 背景色は遅延読み込みの待ち時間に見える色。
   ※ 比率は 1 / 1（正方形）。下の img 側と必ず揃えること。
     片方だけ変えると、画像が箱からはみ出すか余白が残る。 */
.works-list__figure {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary);
    aspect-ratio: 1 / 1;
}

/* 写真を包むリンク（ライトボックスのトリガー）。
   ※ 箱いっぱいに広げて、写真のどこを押しても開くようにする。 */
.works-list__link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ※ グレースケールはトップの施工実績セクション
   （.index-works__image）と同じ変数を参照する。
   値の定義は common.css の :root。
   ※ ホバーで彩度を戻す。一覧が色を抜いてあるので、
     「押せる」合図として十分に働く。 */
.works-list__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: grayscale(var(--photo-grayscale-works));
    transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.works-list__link:is(:hover, :focus-visible) img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* 画像が登録されていない記事のプレースホルダー（OGP画像を流用）。
   ※ 目的はカードの高さを揃えることなので目立たせない。
     実際の施工写真と区別できるよう、彩度を落として一段沈ませる。 */
.works-list__figure--placeholder img {
    filter: grayscale(100%);
    opacity: 0.4;
}

/* ================================================================
   タイトルバッジ（写真の左上に重ねる）
   ※ 要素は h3。見出しの階層（h1 施工実績 → h2 施工実績 → h3 各件）を
     保つため、見た目がバッジでも見出しのまま扱う。
     common.css の h1〜h6 の基本指定（太さ700・見出し色）を
     ここで上書きする。
   ※ 角は落とさない。このサイトは装飾をすべて直角で組んでいる。
   ※ 位置は写真の角にぴったり寄せる（top / left ともに 0）。
     内側に浮かせたい場合は両方に同じ値を入れる。
   ※ タイトルは工事名のみを登録する運用だが、長めの工事名でも
     写真幅の内側に収まるよう max-width で折り返させる。
================================================================ */

.works-list__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    max-width: calc(100% - 1.5rem);
    padding: 0.4375rem 0.875rem;
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: var(--color-text-inverse);
    background-color: var(--black-1);
    /* ※ 写真全面がリンクなので、バッジがクリックを奪わないようにする。 */
    pointer-events: none;
}

@media (min-width: 768px) {
    .works-list__badge {
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
    }
}

/* ================================================================
   枚数表示（写真の右下に重ねる）
   ※ 2枚以上登録されている記事にだけ出す。
     「押せば続きが見られる」ことだけを伝える表示なので、
     カード内に写真そのものは並べない。
     以前は写真の下に小さなサムネイルを並べていたが、
       ・52〜72px では何の写真か判別できない
       ・サブ画像がある記事だけカードが背高くなり行が崩れる
       ・ライトボックスの前後送りと役割が重複する
     の3点で外した。
   ※ 位置はバッジ（左上）の対角。強みのL字や
     施工実績のO字ブロックと同じ、このサイトが
     繰り返している対角の型に乗せる。
   ※ 見た目はバッジと揃える（黒地・白文字・直角）が、
     主従を付けるため一段小さくする。
================================================================ */

.works-list__count {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* ※ アイコンと数字を横に並べ、中心を揃える。 */
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    /* ※ 数字だけの表示になったので英字フォントに寄せる。
         パンくずやラベルと同じ語彙になる。 */
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: rgba(245, 244, 242, 0.7);
    background-color: var(--black-1);
    /* ※ ホバーでアイコンと数字だけを明るくする。
         opacity ではなく color を動かすのは、
         opacity だと黒地のチップまで薄くなって
         写真が透けてしまうため。
       ※ アイコンは background-color: currentColor なので、
         color を動かせば数字とまとめて追従する。 */
    transition: color var(--transition);
    /* ※ 写真全面がリンクなので、クリックを奪わないようにする。
         自分ではホバーを受け取れないので、
         下の :has() でリンク側の状態を拾っている。 */
    pointer-events: none;
}

/* ※ 写真のホバー（彩度復帰・拡大）と同じ契機で動かす。
     .works-list__count は .works-list__link の兄弟なので、
     親側で :has() を使ってリンクの状態を見る。
   ※ :focus-visible も含めるので、キーボード操作でも反応する。
     .works-list__figure:hover だけだとフォーカスで変わらない。 */
.works-list__figure:has(.works-list__link:is(:hover, :focus-visible)) .works-list__count {
    color: var(--color-text-inverse);
}

/* 写真アイコン
   ※ 素材は単色シルエットのSVGを mask で抜く。
     色はここの background-color で決まるので、
     素材側の色は何でもよく、数字と必ず同じ色になる。
   ※ <img> や background-image で置くと色が素材に固定される。
     将来この表示を明るい背景に置いたとき、
     素材を作り直さずに済むよう mask にしてある。
   ※ サイズは em で持つ。font-size を変えても
     アイコンだけ取り残されない。
     1em だと実寸 12px で、レンズの同心円が潰れるので
     1.2em（約14px）にしてある。
   ※ -webkit- 付きを併記するのは、iOS Safari の
     古いバージョンが接頭辞なしの mask-* を見ないため。
   ※ 素材未配置の間はこのボックスが空のままになる。
     数字の左に 1em 分の隔たりが見えるだけで、
     レイアウトは崩れない。 */
.works-list__count::before {
    content: '';
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    background-color: currentColor;
    mask-image: url('../images/pic.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url('../images/pic.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* 読み上げ用の単位
   ※ アイコンは装飾なので読み上げられない。
     数字だけだと「4」としか読まれないため、
     単位を見た目上だけ隠して添える。
   ※ common.css に同等のユーティリティ（.u-sr-only など）が
     ある場合は、このブロックを消してそちらに寄せてよい。
   ※ display: none や visibility: hidden は使わない。
     それらは読み上げも対象外になる。 */
.works-list__count-unit {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    .works-list__count {
        font-size: 0.8125rem;
        padding: 0.375rem 0.875rem;
    }
}

/* ================================================================
   実績0件の表示（公開中の記事が1件も無いとき）
   ※ works.php が一覧（#newsWrap）の代わりにこのブロックを出す。
     CMSで1件でも公開すれば自動で一覧に切り替わる。
   ※ 以前は .works-list__list:empty::before で文言を出していたが、
     ul の中に改行・インデント（空白のテキストノード）が残るため
     :empty が一致せず、何も表示されていなかった。
     PHP側の分岐に改めたので、そのルールは削除した。
   ※ 形と文言は YMG（ymg/assets/css/works.css の .works-empty）に揃えている。
     罫線の箱に、アイコン付きの1行目と、一段小さく薄い2行目。
     YMG との違いは次の2点。
       ・最大幅は 768px（--section-width-content）。YMG は 576px。
       ・色は暗い地向けの白系を最初から持つ。
         （YMG はファイル末尾の上書きで白系にしている）
   ※ 474px以下は左揃え、475px以上で中央揃え（下の分岐）。
     狭い幅では文言が折り返すので、中央揃えだと行頭がそろわず読みにくい。
     475px はこの案内だけの分岐（YMG と同じ値）。サイト共通の値ではない。
   ※ 角は落とさない（サイト全体が直角）。
================================================================ */

.works-list__empty {
    /* ※ 幅の上限は 768px（--section-width-content）。
         一覧の幅（1024px以上で 1280px）いっぱいに広がると
         文言に対して箱が間延びするので、絞って中央に置く。 */
    max-width: var(--section-width-content);
    margin-inline: auto;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border-dark);
    text-align: left;
}

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

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

/* お知らせのアイコン（icon-information-thin-a.png）
   ※ 文字の一部として行の中に置く（inline-block）。
     色は currentColor で塗る（マスク）ので、文言と必ず同じ色になる。
     マスクは画像の透明度だけを見るので、素材側の色は何でもよい。
   ※ YMG（icon-information-thin-square.png）と同じ仕組み。
     素材を差し替えるときは -webkit-mask と mask の2行をセットで直すこと。
   ※ 以前は素材が無かったので、四角い枠に i の SVG を data URI で書いていた。
     トップの新着情報（index.css の .index-news__empty-icon）はまだ SVG のまま。
   ※ 縦の位置は、箱を1行分の高さ（1lh）にして行の上端に揃え、
     アイコンを上下中央に描いて合わせる。
     1lh 未対応のブラウザ向けに、手前で 2em（＝親の line-height: 2）を書いている。
   ※ 大きさ・間隔は YMG と同じ値。 */
.works-list__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('../images/icon-information-thin-a.png') center / 1.25em 1.25em no-repeat;
    mask: url('../images/icon-information-thin-a.png') center / 1.25em 1.25em no-repeat;
}

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

/* ================================================================
   ライトボックス（写真の拡大表示）
   土台は assets/js/works.js が body 直下に1つだけ生成する。

   ※ 角は落とさない。このサイトは装飾をすべて直角で組んでいる。
   ※ 閉じるボタンと矢印は CSS で描く（画像・アイコンフォントを使わない）。
     矢印の形は共通のシェブロン（border 2辺を 45度回転）と同じ手法。
   ※ 拡大中の写真はグレースケールをかけない。
     一覧は色を抜いているが、拡大は現場を見せる場なので実色にする。
   ※ 重なり順：カーソル（9999）より下、ハンバーガー（130）より上。
================================================================ */

.lightbox {
    --lb-dur: 0.3s;

    /* ── 大きさに関わる値はここにまとめる ──
       ※ 以前は padding-block（3rem）と max-height の引き算（10rem）を
         別々に書いていたため、片方を変えるともう片方も
         手で直す必要があった。両方がこの変数を参照するようにしてあるので、
         サイズを変えるときはこの3行だけを触ればよい。

       --lb-pad  写真の上下に空ける余白。
                 閉じるボタン（2.75rem）と枚数表示を逃がす場所。
                 ※ 2.75rem 未満にすると写真の上にボタンが乗る。
       --lb-meta キャプションと gap の見込み。
                 ※ キャプションが2行になる運用なら増やす。
       --lb-w    写真の横幅の上限。
       --lb-ratio 拡大枠の縦横比を数値で持ったもの（横 ÷ 縦）。
                 ※ 下の aspect-ratio と必ずセットで直すこと。
                   高さから横幅を逆算するのに使っているので、
                   片方だけ変えると縦方向に収まらなくなる。
                   4 / 3 なら 4 ÷ 3 = 1.3333。 */
    --lb-pad: 3rem;
    --lb-meta: 4rem;
    --lb-w: 70rem;
    --lb-ratio: 1.3333;

    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-pad-x);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lb-dur) ease, visibility var(--lb-dur) ease;
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

/* 背景。クリックで閉じる（JS側で data-lb-close を見ている）。 */
.lightbox__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(13, 13, 13, 0.92);
}

.lightbox__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(100%, var(--lb-w));
    /* ※ 閉じるボタンと枚数表示を上下に逃がす分の余白。 */
    padding-block: var(--lb-pad);
    /* 少し下から上がってくる。
       ※ .sec-lead の帯と同じイージングを使って揃えてある。 */
    transform: translateY(1.25rem);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.is-open .lightbox__inner {
    transform: translateY(0);
}

/* ※ width: 100% は必須。親が align-items: center なので、
     これがないと中身の幅に縮む。
     下の __image は 100% をこの箱に対して解決する。 */
.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
}

/* ── 拡大した写真 ──
   4 / 3 の枠に固定し、中を写真で埋め尽くす。
   ※ 比率を変えるときは --lb-ratio の1行だけを直す。
     横幅の計算も同じ値を参照するので自動で追従する。
   ※ ※重要※ 横幅を min() で決めている。
     「横に使える幅」と「縦に使える高さ×比率」の小さい方を取れば、
     どちらの制約にも収まる。
     height: auto にして aspect-ratio から高さを導かせるのが要点。
     width と height を両方確定させると、max-height でクランプされたときに
     比率が崩れる。
   ※ 引き算は .lightbox の変数を参照する。
     padding-block を変えてもここは自動で追従する。
   ※ object-fit: cover なので写真は枠を埋め尽くす。
     ※ ※注意※ 4 / 3 と違う比率の写真は切り抜かれる。
       とくに縦位置の写真は上下が大きく落ちる。
       拡大表示なので、切られた部分はどこでも見られなくなる。
       写真全体を見せたい場合は contain に戻す（余った側に
       地色が見える）。
     ※ 切り抜きの基準は既定の中央。寄せを変えるなら
       object-position を追加する。
   ※ background-color は遅延読み込みの待ち時間に見える色。
     cover にしたので、読み込み後は写真に覚われて見えない。
   ※ 枚数を送っても枠の大きさが変わらないので、
     写真ごとにモーダルが伸び縮みしない。 */
.lightbox__image {
    display: block;
    width: min(100%, calc((100dvh - var(--lb-pad) * 2 - var(--lb-meta)) * var(--lb-ratio)));
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--color-secondary);
}

.lightbox__caption {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-align: center;
    color: rgba(245, 244, 242, 0.8);
}

.lightbox__count {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    color: rgba(245, 244, 242, 0.5);
}

/* ── 閉じるボタン（×）──
   ※ 2本の線を疑似要素で描いて交差させる。
     ハンバーガーの×と同じ線幅（2px）に揃えてある。 */
.lightbox__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    transition: opacity var(--transition);
}

.lightbox__close::before,
.lightbox__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.375rem;
    height: 2px;
    background-color: var(--color-text-inverse);
}

.lightbox__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.lightbox__close:is(:hover, :focus-visible) {
    opacity: 0.6;
}

/* ── 前後送り ──
   ※ 形は共通のシェブロンと同じ手法（border 2辺＋回転）。
     ここだけ大きいので共通定義は使わず自前で描く。
   ※ タップ領域を確保するため、ボタン自体は広く取っておく。 */
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 4rem;
    transition: opacity var(--transition);
}

.lightbox__nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 0.875rem;
    border-top: 2px solid var(--color-text-inverse);
    border-right: 2px solid var(--color-text-inverse);
}

.lightbox__nav--prev {
    left: 0;
}

.lightbox__nav--prev::before {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.lightbox__nav--next {
    right: 0;
}

.lightbox__nav--next::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__nav:is(:hover, :focus-visible) {
    opacity: 0.6;
}

/* ※ 1枚だけのときは JS が hidden を付ける。
     button は既定で hidden が効くが、上で position を
     与えているので明示的に消す。 */
.lightbox [hidden] {
    display: none;
}

/* 拡大中は背面のスクロールを止める。
   ※ ドロワーの .menu-open とは別に持つ。兼用すると
     メニューを閉じたときにライトボックス側のロックまで外れる。 */
.lightbox-open {
    overflow: hidden;
}

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

    .lightbox,
    .lightbox__inner {
        transition: none;
    }

    .lightbox__inner {
        transform: none;
    }

    .works-list__figure img,
    .works-list__link:is(:hover, :focus-visible) img {
        transition: none;
        transform: none;
    }

    .works-list__count {
        transition: none;
    }
}