/* =========================================================
   single-gallery.css — GALLERY 詳細ページ用スタイル（コメント全面再作成版 / 動画対応版）
   ---------------------------------------------------------
   このCSSが担当すること
   - ギャラリー詳細の全体レイアウト（画像/テキスト 2カラム + SP 1カラム）
   - 画像側の sticky 表示と、JS(transform) スクロール演出の受け皿
   - パンくず（罫線・余白・固定ヘッダー回避）
   - 画像内キャプション（ガラスブラー + 1行横並びタイトル/説明）
   - Xシェアボタンの見た目（幕がせり上がるホバー）
   - Prev/Next、Related（Splide）周辺の見た目
   - ライトボックス時のスクロールロック補助
   - フェード/スライドインの軽量ユーティリティ

   依存/前提
   - :root の --stickyTop（固定ヘッダー高）と --sbw（スクロールバー幅）は
     common.js 側がセットする前提（未設定時は 0px で安全に動作）。
   - Related は Splide のDOM構造に準拠（.splide__track/.splide__list/.splide__slide 等）。
   - 画像キャプションは single-gallery.php が .gal-cap / .gal-cap__* を出力する前提。
   - ★動画対応：
     - 画像列（.gal-images__inner）内に <video> / 画像 / プレースホルダが混在しても、
       “高さは inner.scrollHeight を基準”に JS が動作する設計。
     - CSS 側は video を img と同じ “カード” として扱えるように最小限の補助を行う
       （object-fit / display / width など）。

   重要な設計方針
   - “黒帯”を廃止し、キャプションはフロストガラス（backdrop-filter）へ。
   - 右端UIの「スクロールバー下への潜り」を回避するため、
     100vw ではなく (100vw - --sbw) を使う箇所がある。
   ========================================================= */


/* =========================================================
   1) ルート変数 / ページ背景
   ---------------------------------------------------------
   - ここで定義するのは「ギャラリー詳細専用のトークン」
   - 背景を紙色で統一し、演出時の黒露出を防ぐ
   ========================================================= */
:root{
  --paper:     #e6e5df;                     /* 全体の紙色（基調） */
  --edge-gap:  clamp(16px, 4vw, 48px);      /* Prev/Next/Related の左右余白 */
  --rel-gap:   clamp(10px, 1.8vw, 18px);    /* Related カード間隔（フォールバック用） */
  --divider:   rgba(0,0,0,.12);             /* 罫線（薄い区切り） */
  /* --stickyTop は共通JSから上書きされる想定（未設定時は 0px） */
}

/* 背景は常に紙色。途中で “地” が見えないようにする */
html,
body{
  background: var(--paper);
}


/* =========================================================
   2) フルブリード（画面端まで伸ばす）ユーティリティ
   ---------------------------------------------------------
   - .gal-bleed は「中央基準で左右へ広げる」お決まりの構文
   - 右端のUIがスクロールバーに潜らないよう、幅は (100vw - --sbw)
   ========================================================= */
.gal-bleed{
  position:relative;
  left:50vw;
  right:50vw;
  margin-left:-50vw;
  margin-right:-50vw;
  width:calc(100vw - var(--sbw, 0px));  /* 画面幅 - スクロールバー幅 */
}


/* =========================================================
   3) パンくず
   ---------------------------------------------------------
   - 固定ヘッダーと重ならないよう margin-top で押し下げ
   - 罫線は疑似要素で「画面端まで」引く
   - 上罫線は非表示（下罫線のみ残す）
   ========================================================= */
.gal-breadcrumb{
  background: var(--paper);
  margin-top: var(--stickyTop, 0px);  /* 固定ヘッダー高ぶんの押し下げ */
  transition: none;                   /* レイアウト変化時のチラつき抑止 */

  position: relative;                 /* 罫線の基準 + 前面に置く */
  z-index: 3;
}

/* 上下罫線（幅は 100vw ではなく 100vw - sbw に統一して潜りを防ぐ） */
.gal-breadcrumb::before,
.gal-breadcrumb::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%) translateZ(0);
  width:calc(100vw - var(--sbw, 0px));
  height:1px;
  background: var(--divider, rgba(0,0,0,.12));
  pointer-events:none;
}
.gal-breadcrumb::before{ top:0; }
.gal-breadcrumb::after { bottom:0; }

/* 上側の区切り線は使わない（下だけ残す） */
.gal-breadcrumb::before{
  display:none;
}

.gal-bc{
  list-style:none;
  margin:0;

  /* パンくずの“行としての余白”はここで決まる */
  padding:45px 18px 45px;

  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  line-height:1.6;
}

/* パンくずは「色は継承」「装飾は後段のリンク共通に集約」 */
.gal-bc__item a{
  color: inherit;
  text-decoration:none;
}

/* 区切り文字 */
.gal-bc__item + .gal-bc__item::before{
  content:" > ";
  color:#999;
  margin-right:4px;
}

/* 現在地は少し薄め */
.gal-bc__item.is-current{
  color:#666;
}


/* =========================================================
   4) メイン（画像/テキスト 2カラム）
   ---------------------------------------------------------
   - PC: 2カラム Grid、画像とテキストをそれぞれ sticky
   - 画像側は JS が .gal-images__inner を transform する前提
   - 背景は紙色で揃え、境界の違和感を消す
   ========================================================= */
.gal-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
  gap:0;

  /* .gal-bleed と同一要素に付く想定。
     width:100vw をここで持つと “後勝ち” で .gal-bleed を潰すため 100% にする。 */
  width:100%;

  /* sticky が完走できるだけの最低高（ヘッダー分も含める） */
  min-height: calc(100vh + var(--stickyTop, 0px));
}

.gal-split__panel{
  padding:0;
  margin:0;
}

/* 両パネルを同じ row に固定（左右入れ替えでも落ちない） */
.gal-split__panel--images,
.gal-split__panel--text{
  grid-row: 1;
}


/* ---------------------------------------------------------
   4-A) 画像側パネル
   --------------------------------------------------------- */
.gal-split__panel--images{
  position:relative;
  background: var(--paper);
}

/* sticky の外枠。ここが “ビューポート” になり、中身がJSで動く */
.gal-images{
  position:sticky;
  top: var(--stickyTop, 0px);
  height: calc(100vh - var(--stickyTop, 0px));
  overflow:hidden;
  background: var(--paper);

  /* ★追加（今回）：
     - no-image（.gal-noimg）を 4:3 の「板」として中央配置するため、
       親（ビューポート）を flex で中央寄せできるようにする。
     - 通常時（画像/動画があるとき）は、子（.gal-images__inner）が通常フローで
       上から積まれるため、この指定がレイアウトを壊さない。 */
  display:flex;
}

/* 上端の微妙な境界や 1px のズレを紙色マスクで馴染ませる */
.gal-images::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:8px;
  pointer-events:none;
  background: linear-gradient(to bottom, var(--paper) 0%, rgba(230,229,223,0.0) 100%);
  -webkit-mask-image: -webkit-linear-gradient(top, #000, rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,0));
}

/* JS transform の頻度が高い想定。最適化ヒントだけ出す */
.gal-images__inner{
  will-change:transform;

  /* ★追加（今回）：
     - 親（.gal-images）が flex になったことで、inner が縮まないよう保険。
     - 画像/動画がある通常ケースでは、従来通り「横幅いっぱい」で動作。 */
  width:100%;
}

/* figure：キャプションを “画像内下辺” に貼るため relative + はみ出し防止 */
.gal-img{
  margin:0;
  position:relative;
  overflow:hidden;
}

/* 画像 */
.gal-img img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:0;
}

/* =========================================================
   ★動画対応（今回）
   ---------------------------------------------------------
   - .gal-img の中に video が混在しても “同じカード” として扱う。
   - ポスター/サムネの見え方が img と揃うように object-fit を適用。
   - autoplay/controls の有無は HTML 側に委譲（CSSでは見た目だけ整える）。
   ========================================================= */
.gal-img video{
  display:block;
  width:100%;
  height:auto;            /* “縦横比はソースに従う” を基本にし、黒帯を出さない */
  object-fit:cover;       /* ポスターやフレームを “面” で揃える（必要な環境で効く） */
  border-radius:0;
  background:#000;        /* 読み込み中の地が見えても “黒板” に統一 */
}

/* video が controls を持つとき、下端にUIが出るためキャプションと干渉し得る。
   - キャプションは pointer-events:none なので操作の妨げにはならないが、
     視覚的に重なる場合は HTML 側でキャプションを出さない/位置を変える設計が望ましい。
   - CSS 側では “重なっても破綻しない” よう最小限の保険だけ。 */
.gal-img video[controls]{
  outline: none;
}

/* =========================================================
   ★動画カード（.gal-vid）対応（今回の改修ポイント）
   ---------------------------------------------------------
   背景：
   - single-gallery.php は動画を <figure class="gal-vid"> として出力し、
     画像と同様に <figcaption class="gal-cap ..."> を内包する場合がある。
   - しかし従来CSSは .gal-img を “カード（position:relative / overflow:hidden）”
     として定義している一方、.gal-vid は未定義のため、
     .gal-cap の absolute 配置が期待通り “動画内下辺” に固定されないことがあった。
   - また、動画は controls とオーバーレイ帯が被るため、要件として
     「動画のタイトル帯（キャプション帯）を消したい」。

   ここでは：
   1) .gal-vid を .gal-img と同等のカードとして定義（将来の復帰にも耐える）
   2) ただし要件により、動画のキャプション帯（.gal-cap / .gal-cap--video）は非表示にする
   ========================================================= */

/* 1) 動画を “画像カード同等” の箱として扱う（位置基準 + はみ出し防止） */
.gal-vid{
  margin:0;
  position:relative;  /* .gal-cap の absolute 基準をこの figure に固定 */
  overflow:hidden;    /* controls/帯/動画のはみ出しを抑止 */
}

/* 動画プレイヤー（class はテンプレ出力に合わせる） */
.gal-vid__player{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  background:#000;
  border-radius:0;
  outline:none;
}

/* 2) ★要件：動画のタイトル帯は controls と被るので消す */
.gal-vid .gal-cap,
.gal-vid .gal-cap--video{
  display:none;
}


/* =========================================================
   4-B) 画像内キャプション（フロストガラス）
   ---------------------------------------------------------
   目的
   - 画像内の下辺に「タイトル + 説明（キャプション）」を載せる
   - 黒いグラデ帯ではなく、やさしいガラス板で読ませる

   表示仕様
   - 1行横並び（タイトル / キャプション）
   - 改行や複数段落が入っても “表示は必ず1行” に整形
   - 長い場合は … で省略

   クリック/操作
   - 画像クリック（ライトボックス）を邪魔しないため pointer-events:none
   ========================================================= */
.gal-cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  /* 画像内に収める余白（PCは可変、SPは後段で詰める） */
  padding: clamp(12px, 1.6vw, 18px) clamp(12px, 1.8vw, 20px);

  /* フォールバック：backdrop-filter 非対応時は明るい半透明の板 */
  background: rgba(255,255,255,.72);

  /* 文字は暗色で統一（背景が明るい環境でも読める） */
  color:#0f1720;

  /* ほんのり境界と影（重くしない） */
  border-top: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 -10px 30px rgba(0,0,0,.08);

  /* クリックを画像側に透過 */
  pointer-events:none;
  user-select:none;

  transform: translateZ(0);
}

/* 対応ブラウザではガラス（ぼかし + 彩度）へ切替 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .gal-cap{
    background: rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    border-top: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 -12px 34px rgba(0,0,0,.10);
  }
}

/* 横並び 1 行（ellipsis が効くように min-width:0 を入れる） */
.gal-cap__inner{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap: 10px;
  min-width:0;
}

/* 左：タイトル（短く強く・長い場合は省略） */
.gal-cap__title{
  flex: 0 1 40%;
  min-width: 0;

  font-size: clamp(12px, 1.2vw, 14px);
  font-weight:700;
  line-height:1.25;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 右：説明（残り幅・必ず 1 行・省略） */
.gal-cap__desc{
  flex: 1 1 60%;
  min-width: 0;

  font-size: clamp(11px, 1.1vw, 13px);
  line-height:1.25;
  opacity:.92;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 説明が空なら、詰まりを防ぐため非表示 */
.gal-cap__desc:empty{
  display:none;
}

/* 説明内の改行要素は「表示だけ 1 行」に整形（HTMLは壊さない） */
.gal-cap__desc br{
  display:none;
}
.gal-cap__desc p{
  display:inline;
  margin:0;
}
.gal-cap__desc p + p::before{
  content:" ";
}


/* =========================================================
   4-B-2) 画像が無い場合のプレースホルダ（no-image）
   ---------------------------------------------------------
   ★今回の調整要件：
   - 「no-image の背景の大きさは 4:3 にしたい」
   - これまで：width/height 100% でビューポート全面に伸びていた
   - これから：4:3 の“板”として固定し、ビューポート内で中央配置する
   ========================================================= */
.gal-noimg{
  /* 4:3 の箱（＝背景ブロック） */
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;

  /* sticky ビューポート内で上下左右中央 */
  margin: auto;

  display:grid;
  place-items:center;

  background:#111;
  color:#888;
  font-size:14px;
  letter-spacing:.08em;
}

/* =========================================================
   ★追加（今回）：パスワード保護時の “ロック no-image 枠”
   ---------------------------------------------------------
   single-gallery.php 側が、未解除（post_password_required）の場合に
   <div class="gal-noimg is-locked">...lock svg...</div>
   を出力するため、その見た目をここで定義する。
   - 背景：グレー（要件）
   - 中央：大きめのロックアイコン
   - SVG は currentColor で統一し、色はここで制御する
   ========================================================= */
.gal-noimg.is-locked{
  background:#d7d7d7;     /* “no-image 枠の背景グレー” */
  color:#333;             /* ロックアイコン（文字）の色 */
  letter-spacing:0;       /* LOCKED 表示のときの字間を通常に戻す */
}

/* SVGロックアイコン用（a_legend_svg_icon の class 指定を想定） */
.gal-noimg.is-locked .gal-noimg__icon{
  width: clamp(56px, 8vw, 96px);
  height: auto;
  display:block;
  opacity:.95;
}

/* SVG の塗り/線を currentColor に固定して色をCSSで一元管理 */
.gal-noimg.is-locked .gal-noimg__icon *{
  fill: currentColor;
  stroke: currentColor;
}

/* SVGが無い環境向けのフォールバック文字（LOCKED） */
.gal-noimg.is-locked .gal-noimg__text{
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight:800;
  letter-spacing:.08em;
}


/* ---------------------------------------------------------
   4-C) テキスト側パネル
   --------------------------------------------------------- */
.gal-split__panel--text{
  position:sticky;
  top: var(--stickyTop, 0px);
  height: calc(100vh - var(--stickyTop, 0px));
  overflow:hidden;
  background: var(--paper);
  color:#111;
}

/* テキスト側の縦レイアウト（メタ→タイトル→本文→タグ…） */
.gal-text{
  display:flex;
  flex-direction:column;
  height:100%;

  /* ★改修（今回）：
     - そもそも本文ブロック全体の左右余白が小さく、左右どちら配置でも「窮屈」に見えていた。
     - ここは “配置に関係なく効くベース余白” なので、まず基礎体力として厚くする。
     - 要件：現状より約1.5倍、左右の“息苦しさ”を解消する。
     - 以降の .is-img-left / .is-img-right は「片側だけ極端に薄くしない」方向で整える。 */
  padding: clamp(48px, 5.2vw, 88px); /* ★提案A：上左右の余白を確実に増やす（min/max を底上げ） */

  gap: clamp(14px, 1.9vw, 22px);
}

/* 画像側に寄る方の余白を少し厚くして読みやすくする */
.is-img-left  .gal-text{
  padding-left:  clamp(60px, 7vw, 120px); /* ★提案A：外側（左）を強化 */

  /* ★改修（今回）：
     - 画像が左（= .is-img-left）でテキストが右カラムのとき、
       “外側（右端）” の余白が薄すぎて窮屈に見えるケースがあった。
     - 右（外側）もベース並みに確保して「左右どちらでも狭い」を解消する。 */
  padding-right: clamp(42px, 5.2vw, 88px); /* ★提案A：内側（右）も底上げして窮屈さを解消 */
}
.is-img-right .gal-text{
  padding-right: clamp(60px, 7vw, 120px); /* ★提案A：外側（右）を強化 */

  /* ★改修（今回）：
     - 画像が右（= .is-img-right）でテキストが左カラムのとき、
       “外側（左端）” の余白が薄すぎて本文が張り付いて見えていた。
     - 左（外側）もベース並みに確保して、左右どちら配置でも余白感を統一する。 */
  padding-left:  clamp(42px, 5.2vw, 88px); /* ★提案A：内側（左）も底上げして窮屈さを解消 */
}


/* =========================================================
   4-D) メタ行（カテゴリ / 編集 / 閲覧数）
   ---------------------------------------------------------
   - 1行に詰めるが、狭いときは wrap して崩れない
   ========================================================= */
.gal-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 6px 12px;
  flex-wrap:wrap;
}

/* カテゴリ群は基本的に左側で伸びる */
.gal-meta .gal-cats{
  flex:1 1 auto;
}

/* 編集リンク：小さなピル */
.gal-edit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  margin-left:auto;
  font-size:11px;
  line-height:1.3;
  border-radius:9999px;
  border:1px solid #ddd;
  background:#fff;
  color:#555;
  text-decoration:none;
  white-space:nowrap;
}
.gal-edit:hover,
.gal-edit:focus-visible{
  background:#f5f5f5;
  color:#222;
}

/* 閲覧数：数字の桁ズレを抑え、横幅が暴れないようにする */
.gal-views{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  font-size:11px;
  line-height:1.3;
  color:#777;
  white-space:nowrap;
}
.gal-views__icon{
  font-size:14px;
  line-height:1;
}
.gal-views__count{
  font-variant-numeric: tabular-nums;
  font-weight:600;
}
.gal-views__unit{
  font-size:10px;
  opacity:.75;
}

/* カテゴリの見た目（リンクだが色は統一して後段のリンク装飾に任せる） */
.gal-cats{
  font-size:12px;
  color:#666;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.gal-cat{
  color: inherit;
  text-decoration:none;
}
.gal-cat.is-empty{
  color:#aaa;
}


/* =========================================================
   4-E) タイトル / 本文 / タグ / 日付
   ========================================================= */
.gal-title{
  font-size:clamp(22px,3.2vw,36px);
  line-height:1.25;
  font-weight:700;
  margin:0;
}

/* タイトルと本文の距離を確保（読み始めが詰まらないように） */
.gal-title + .gal-content{
  margin-top: clamp(12px, 2.6vw, 36px);
}

/* 本文：行間を広げて“詰まり”を解消。末尾は last-child で余白を詰める */
.gal-content{
  flex:1 1 auto;
  overflow:hidden;
  line-height: 1.95;

  /* ★改修（今回）：本文のフォントサイズを Gallery 詳細ページ内で確実に底上げする
     - これまで：font-size 指定が無く、共通CSS/ブラウザ既定に依存していた
     - 目的：記事本文（.gal-content）だけを読みやすく大きくし、他要素（メタ/タグ等）へ波及させない
     - 設計：clamp() で “最小/流動/最大” を持たせ、PC〜TB で自然に増えるようにする */
  font-size: clamp(16px, 1.05vw, 19px);
}

/* 段落間の余白（読みやすさの主調整ポイント） */
.gal-content p{
  line-height: 1.95;
  margin: 0 0 1.35em;
}

/* リスト類も行間だけ揃えておく */
.gal-content li{
  line-height: 1.95;
}

/* ブロックの先頭/末尾だけ余白を詰める（レイアウトが伸びすぎない） */
.gal-content > *:first-child{ margin-top:0; }
.gal-content > *:last-child { margin-bottom:0; }


/* =========================================================
   4-F) Xシェアボタン
   ---------------------------------------------------------
   - 通常：透明 + 枠
   - hover/focus：黒い幕が下からせり上がり、文字/アイコンが白へ反転
   - SVG は currentColor に追従させ、反転の取りこぼしを防ぐ
   ========================================================= */
.gal-xshare{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  /* flex-column の中で横に伸びすぎないようにする */
  align-self:flex-start;
  width:fit-content;
  max-width:100%;

  padding:10px 18px;
  border-radius:9999px;

  background:transparent;
  color:#333;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.45);

  letter-spacing:.02em;

  user-select:none;
  -webkit-tap-highlight-color: transparent;

  /* 幕演出のために必要 */
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* 幕（下→上）。文字は上に残るよう z-index を分離する */
.gal-xshare::before{
  content:"";
  position:absolute;
  inset:0;
  background:#111;
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
  z-index:0;
}

/* ボタンの中身は常に幕より上 */
.gal-xshare > *{
  position:relative;
  z-index:1;
}

.gal-xshare__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}

/* SVG の塗り/線を currentColor に固定し、反転を確実に同期 */
.gal-xshare__icon svg{
  display:block;
  fill: currentColor;
  stroke: currentColor;
}

.gal-xshare__text{
  font-size:13px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}

/* hover/focus：幕を上げて反転 */
.gal-xshare:hover,
.gal-xshare:focus-visible{
  color:#fff;
  border-color:#111;
}
.gal-xshare:hover::before,
.gal-xshare:focus-visible::before{
  transform: translateY(0);
}

.gal-xshare:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

/* タグ群 */
.gal-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.gal-tag{
  display:inline-block;
  font-size:12px;
  color:#333;
  text-decoration:none;
  border:1px solid #ddd;
  padding:4px 8px;
  border-radius:12px;
}
.gal-tag.is-empty{
  color:#aaa;
  border-color:#eee;
}

.gal-date{
  font-size:12px;
  color:#666;
}


/* =========================================================
   5) 共通リンク装飾（ドット下線）
   ---------------------------------------------------------
   - visited/hover でも色は “周囲と同じ” を維持
   - ボタン系（.gal-edit / .gal-xshare）は装飾対象から除外
   ========================================================= */
.gal-breadcrumb .gal-bc__item a,
.gal-content a:not(.gal-tag),
.gal-text a:not(.gal-tag):not(.gal-edit):not(.gal-xshare),
.gal-cats .gal-cat{
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-decoration-thickness: .06em;
  text-underline-offset: .15em;
  text-decoration-skip-ink: auto;
  transition: color .2s ease, text-underline-offset .2s ease;
}

/* UAの visited/hover 色を打ち消し、統一感を保つ */
.gal-breadcrumb .gal-bc__item a:visited,
.gal-breadcrumb .gal-bc__item a:hover,
.gal-breadcrumb .gal-bc__item a:focus-visible,
.gal-content a:not(.gal-tag):visited,
.gal-content a:not(.gal-tag):hover,
.gal-content a:not(.gal-tag):focus-visible,
.gal-text a:not(.gal-tag):not(.gal-edit):not(.gal-xshare):visited,
.gal-text a:not(.gal-tag):not(.gal-edit):not(.gal-xshare):hover,
.gal-text a:not(.gal-tag):not(.gal-edit):not(.gal-xshare):focus-visible,
.gal-cats .gal-cat:visited,
.gal-cats .gal-cat:hover,
.gal-cats .gal-cat:focus-visible{
  color: inherit;
}

/* hover/focus は “下線の位置だけ” を動かして気配を出す */
.gal-breadcrumb .gal-bc__item a:hover,
.gal-breadcrumb .gal-bc__item a:focus-visible,
.gal-content a:not(.gal-tag):hover,
.gal-content a:not(.gal-tag):focus-visible,
.gal-text a:not(.gal-tag):not(.gal-edit):not(.gal-xshare):hover,
.gal-text a:not(.gal-tag):not(.gal-edit):not(.gal-xshare):focus-visible,
.gal-cats .gal-cat:hover,
.gal-cats .gal-cat:focus-visible{
  text-underline-offset: .22em;
}


/* =========================================================
   6) 画像左右入れ替え（PCの2カラム用）
   ---------------------------------------------------------
   - .is-img-left / .is-img-right によって列を入れ替えるだけ
   ========================================================= */
.is-img-left  .gal-split__panel--images{ grid-column:1 / 2; }
.is-img-left  .gal-split__panel--text  { grid-column:2 / 3; }
.is-img-right .gal-split__panel--images{ grid-column:2 / 3; }
.is-img-right .gal-split__panel--text  { grid-column:1 / 2; }


/* =========================================================
   7) Prev / Next ナビゲーション
   ---------------------------------------------------------
   - 2カラムで左右に配置（SPでは縦積み）
   - hover でサムネを軽く拡大
   ========================================================= */
.gal-adj{
  margin-top: clamp(24px, 5vw, 64px);
  padding-left: var(--edge-gap);
  padding-right: var(--edge-gap);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:none;
}

.gal-adj__item{
  display:grid;
  align-items:stretch;
  text-decoration:none;
  color:#111;
  min-height: clamp(120px, 22vh, 220px);
  border:1px solid #ddd;
  border-radius:12px;
  overflow:hidden;
  background: var(--paper);
}

/* 片側が無い場合の無効化（クリック不可） */
.gal-adj__item[aria-disabled="true"]{
  pointer-events:none;
  cursor:default;
}

/* PCで左右並びのとき、中央の二重線を避ける */
.gal-adj__prev{
  border-right:none;
}

/* Prev と Next で「サムネとタイトルの位置」を逆にする */
.gal-adj__prev{ grid-template-columns: 0.35fr 0.65fr; }
.gal-adj__next{ grid-template-columns: 0.65fr 0.35fr; }

.gal-adj__thumb{
  width:100%;
  height:100%;
  background:#000;
  overflow:hidden;
}

.gal-adj__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
  will-change: transform;
}

/* hover/focus：サムネをほんの少し拡大 */
.gal-adj__item:hover .gal-adj__thumb img,
.gal-adj__item:focus-visible .gal-adj__thumb img{
  transform: scale(1.06);
}

.gal-adj__title{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 16px;
  font-weight:600;
  line-height:1.35;
}

/* PC での配置補助（片側のみの場合もレイアウトを保つ） */
@media (min-width: 961px){
  .gal-adj__prev{ grid-column: 1; }
  .gal-adj__next{ grid-column: 2; }

  .gal-adj.is-single{
    grid-template-columns: 1fr 1fr;
  }

  .gal-adj.is-both  .gal-adj__prev{ border-right:none; }
  .gal-adj.is-single .gal-adj__prev{ border-right:none; }
}


/* =========================================================
   8) Related（Splide）
   ---------------------------------------------------------
   - トラックの transition は CSS で入れない（drag:'free' の追従性を優先）
   - 左右の端ボタンは “紙色グラデ” を敷いて視認性を確保
   ========================================================= */
.gal-rel{
  padding:12px 0 24px;
  background: var(--paper);
}

.gal-rel__title{
  margin:0 16px 10px;
  font-size:20px;
}

/* Splide の外枠。左右余白は edge-gap で統一 */
.gal-rel__viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  padding-left: var(--edge-gap);
  padding-right: var(--edge-gap);
  box-sizing: border-box;
}

/* 初期化前後で見え方が変わらないようにする */
.gal-rel__viewport.splide{
  visibility: visible;
}

/* スライド列（Splide の list） */
.gal-rel__track{
  display:flex;
  gap: 0;
  will-change:transform;
}

/* カード本体（リンク） */
.gal-rel__card{
  position:relative;
  display:block;
  width:100%;
  text-decoration:none;
  color:inherit;
}

.gal-rel__thumb{
  width:100%;
  background:#000;
  overflow:hidden;
  aspect-ratio:3/2;
}
.gal-rel__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* hover で下からメタ情報がせり上がる */
.gal-rel__overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  transform:translateY(100%);
  background:#333;
  color:#fff;
  padding:10px 12px;
  transition:transform .25s ease;
}
.gal-rel__card:hover .gal-rel__overlay{
  transform:translateY(0);
}

.gal-rel__cat{
  font-size:12px;
  opacity:.85;
}
.gal-rel__ttl{
  font-size:14px;
  font-weight:600;
  margin-top:4px;
}
.gal-rel__date{
  font-size:12px;
  opacity:.8;
}

/* 端ナビ（Splide の arrow も兼ねる） */
.gal-rel__btn{
  appearance:none;
  border:none;
  background:#0000;
  color:#000;
  position:absolute;
  top:0;
  bottom:0;
  width:56px;
  cursor:pointer;
  z-index:5;
  pointer-events: auto;
}

/* “紙色→透明” グラデで、画像上でも矢印が見えるようにする */
.gal-rel__btn--edge.is-left {
  left:0;
  background:linear-gradient(90deg, var(--paper) 0%, #0000 70%);
}
.gal-rel__btn--edge.is-right{
  right:0;
  background:linear-gradient(270deg, var(--paper) 0%, #0000 70%);
}

/* 無効時は薄くしてクリックも抑制 */
.gal-rel__btn:disabled{
  opacity:.35;
  cursor:default;
}

/* 矢印は疑似要素で描画（大きめのクリック領域はボタン本体） */
.gal-rel__btn.is-left::before,
.gal-rel__btn.is-right::before{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:24px;
  font-weight:700;
  color:#333;
  content:"";
  width:44px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  pointer-events: none;
}
.gal-rel__btn.is-left::before { content:"‹"; }
.gal-rel__btn.is-right::before{ content:"›"; }


/* =========================================================
   9) ライトボックス表示時のスクロールロック補助
   ---------------------------------------------------------
   - body だけをロックし、右のガタつきは padding-right で吸収
   ========================================================= */
body.is-lightbox-open{
  overflow: hidden;
  padding-right: var(--sbw, 0px);
  overscroll-behavior: contain;
  touch-action: none;
}


/* =========================================================
   10) レスポンシブ
   ---------------------------------------------------------
   - 960px 以下：2カラム → 1カラム（sticky を解除して自然スクロールへ）
   - 560px 以下：余白やサイズをさらに最適化
   ========================================================= */
@media (max-width:960px){
  .gal-split{
    grid-template-columns:1fr;
  }
  .gal-split__panel--images,
  .gal-split__panel--text{
    grid-column:1 / -1;
  }

  .gal-split__panel--images,
  .gal-split__panel--text{
    grid-row:auto;
  }

  /* 画像側：sticky を解除して通常フローへ戻す */
  .gal-images{
    position:relative;
    top:auto;
    height:auto;
    overflow:visible;

    /* ★追加（今回）：
       SP では sticky を外すため、flex の中央寄せは不要。
       ただし display:flex のままだと inner の積み方が変わるため、
       SP ではブロックレイアウトに戻しておく。 */
    display:block;
  }
  .gal-images::before{
    display:none;
  }

  /* テキスト側：sticky を解除して通常フローへ戻す */
  .gal-split__panel--text{
    position:relative;
    height:auto;
    top:auto;
  }

  /* 左右入れ替えクラスは SP では意味がないので全て 1 カラムへ */
  .is-img-left  .gal-split__panel--images,
  .is-img-left  .gal-split__panel--text,
  .is-img-right .gal-split__panel--images,
  .is-img-right .gal-split__panel--text{
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* Prev/Next：縦積みにして読みやすく */
  .gal-adj{
    grid-template-columns:1fr;
  }
  .gal-adj__prev{
    border-right:none;
    border-bottom:1px solid #eee;
  }
  .gal-adj__next{
    border-right:none;
  }
  .gal-adj__prev,
  .gal-adj__next{
    grid-column:auto;
  }

  .gal-rel__card{
    width:100%;
  }

  /* ★追加（今回）：
     SP（1カラム）で no-image の 4:3 が “小さくなりすぎる/詰まる” 場合があるため、
     余白だけは自然に確保できるようにする（中央寄せは維持）。 */
  .gal-noimg{
    max-width: 100%;
  }
}

@media (max-width:560px){
  /* パンくず：余白と文字サイズを詰める */
  .gal-bc{
    padding:26px 12px 26px;
    font-size:12px;
  }

  /* テキスト側：全体の余白・間隔を詰める */
  .gal-text{
    /* ★改修（今回 / SP）：
       - SPでもベース余白が小さく「狭い」印象が出ていたため、最低値を引き上げる。
       - 要件：PCほどではないが、現状より約1.5倍を目安に余白を確保する。
       - ただし過剰に広げると“1画面あたり情報量”が落ちるため、PCより控えめにする。 */
    padding: clamp(30px, 7vw, 48px); /* ★提案A（SP）：上左右余白を確実に増やす */

    gap: clamp(12px, 2.6vw, 18px);
  }

  .gal-title{
    font-size:clamp(20px,5.8vw,28px);
  }
  .gal-title + .gal-content{
    margin-top: clamp(10px, 3vw, 22px);
  }

  /* ★改修（今回 / SP）：本文フォントサイズは SP で別clampを適用して暴れを抑える
     - PC用の vw 指定は SP だと変化が大きくなりがちなので、SPでは専用値にする */
  .gal-content{
    font-size: clamp(16px, 4.2vw, 18px);
  }

  /* 画像の左右位置に応じた余白は SP でも軽く反映 */
  .is-img-left  .gal-text{
    padding-left:  clamp(36px, 10vw, 60px); /* ★提案A（SP）：外側（左）を強化 */

    /* ★改修（今回 / SP）：
       - .is-img-left（テキストが右側に見える想定）のとき、右（外側）が薄すぎるため底上げ。 */
    padding-right: clamp(27px, 7vw, 48px); /* ★提案A（SP）：内側（右）も底上げ */
  }
  .is-img-right .gal-text{
    padding-right: clamp(36px, 10vw, 60px); /* ★提案A（SP）：外側（右）を強化 */

    /* ★改修（今回 / SP）：
       - .is-img-right（テキストが左側に見える想定）のとき、左（外側）が薄すぎるため底上げ。 */
    padding-left: clamp(27px, 7vw, 48px); /* ★提案A（SP）：内側（左）も底上げ */
  }

  /* Prev/Next：比率を少し変更して視認性を上げる */
  .gal-adj__prev{
    grid-template-columns: 0.45fr 0.55fr;
  }
  .gal-adj__next{
    grid-template-columns: 0.55fr 0.45fr;
  }

  .gal-rel__btn{
    width:48px;
  }

  /* キャプション：SPでは余白だけ詰める（1行仕様は維持） */
  .gal-cap{
    padding: 12px 12px;
  }

  /* 1行省略は明示的に維持（端末差で崩れないように） */
  .gal-cap__title,
  .gal-cap__desc{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* SPでもロックアイコンが大きすぎないように微調整 */
  .gal-noimg.is-locked .gal-noimg__icon{
    width: clamp(52px, 16vw, 86px);
  }
}


/* =========================================================
   11) 演出ユーティリティ（フェード / 下から出現）
   ---------------------------------------------------------
   - JS 側が .is-in を付与して発火する前提
   - prefers-reduced-motion では無効化
   ========================================================= */
.fx-fade{
  opacity:0;
  transition: opacity .6s ease;
  will-change: opacity;
}
.fx-fade.is-in{
  opacity:1;
}

.fx-up{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--fx-delay, 0ms);
  will-change: opacity, transform;
}
.fx-up.is-in{
  opacity:1;
  transform:none;
}

/* 動きを抑えたいユーザー向け：演出を無効化して “静的” にする */
@media (prefers-reduced-motion: reduce){
  .fx-fade,
  .fx-up{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  .gal-breadcrumb .gal-bc__item a,
  .gal-content a:not(.gal-tag),
  .gal-text a:not(.gal-tag):not(.gal-edit):not(.gal-xshare),
  .gal-cats .gal-cat{
    transition:none !important;
  }

  /* Xボタンの幕も即時に（動きによる気分不良を避ける） */
  .gal-xshare::before{
    transition:none !important;
  }
}