/* =========================================================
   top_gallery.css  —  Gallery（Masters方式 / rAF巻き戻し）

   追加・調整のサマリ：
     - NEW/UPDATEの“太ピル型バッジ”を data-badge だけで表示（::after）
     - 画像＆テキストの余白は clip-path で内側に確保、黒幕は縮めない（::before）
     - ホバーで #333 の黒幕が下からスライドアップ
     - Gallery セクションを画面いっぱい（is-fullscreen）
       ┗ 見出しをフローに戻して帯は「残り高」使用（is-offset）→ はみ出し防止
     - 見出しサイズ＆位置は ABOUT と統一（--aboutPadTop / --aboutPadX 参照）
     - 「VIEW ALL」リンクは 2 本のテロップの“間”に中央配置
       ★ BLOG と同一体感へ：角丸（30px）、➡ 矢印スワップ、
         下からの塗りスライド（linear-gradient + background-size）
       ★ 塗り残り対策：満了時に高さを +2px 過塗りし、1pxの縫い目を解消
       ★ 新規：左右に “Photos / Illustrations” を筆記体で表示

   ビューポート安定化：
     - “フルスクリーン”は 100svh（安定） > --vh-stable > 1vh の順で min-height を決定
     - dvh は使用しない（URLバー出入りで再レイアウトが発生しやすいため）

   ★今回のモバイル対策：
     - **SP/タッチ環境では 1 画面フィットを完全解除**
     - `.is-fullscreen` の flex 配分を無効化し、`.gallery-marquee` を常に
       `height: var(--gmHeight)` で表示（セクションが 1 画面を超えてもOK）
   ---------------------------------------------------------
   運用メモ：
     - 帯の移動方向は HTML に data-direction="rtl|ltr" を付け、JSで参照。
     - トラック計測のため、カード間の余白は margin-right のみ（gap/padding を使わない）。
   ========================================================= */

/* ===== デザイントークン ===== */
:root{
  /* 帯（marquee）の見た目 */
  --gmHeight: 300px;                              /* PC基準（SPは後段で上書き） */
  --gmBg: #e6e5df;
  --gmColor: #f5f5f5;
  --gmBorder: 0px solid rgba(255,255,255,.15);    /* 上下ボーダー（必要なら値を入れる） */
  --gmMask: 32px;                                 /* 両端フェード幅 */

  /* カード寸法・間隔（※ 間隔は margin-right で作る） */
  --gmUnitW: clamp(240px, 38vw, 360px);           /* 1カードの幅 */
  --gmUnitGap: 24px;

  /* 角丸（0に統一。将来再有効化に備えトークンは残す） */
  --gmRadius: 0;

  /* キャプションの余白等（区切り線はオフ） */
  --gmCaptionPadY: 10px;
  --gmCaptionPadX: 12px;
  --gmCaptionBg: transparent;
  --gmCaptionDivider: 0;
  --gmTitleColor: #333;
  --gmTitleSize: .95rem;
  --gmMetaColor: #333;
  --gmMetaSize: .75rem;

  /* 方向（任意：data-direction が最優先。JS側が参照） */
  --gmDirection: rtl;

  /* ホバー演出・余白制御 */
  --gmHoverBg: #333;               /* 下からせり上がる黒幕の色 */
  --gmHoverSlideMs: 320ms;         /* せり上がり時間 */
  --gmInnerPad: 10px;              /* ★“画像とテキストだけ”に付与（黒幕は縮めない） */
  --gmHoverTitleColor: #f5f5f5;
  --gmHoverMetaColor:  #d0d0d0;
  --gmHoverImageAlpha: 0;          /* 画像上の薄い黒膜の濃度（0=無し）。ホバーで上書き */

  /* バッジ（NEW/UPDATE） */
  --gmBadgeTop: 8px;
  --gmBadgeLeft: 8px;
  --gmBadgePadX: 10px;
  --gmBadgeH: 24px;
  --gmBadgeRadius: 999px;
  --gmBadgeFont: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gmBadgeLS: .08em;
  --gmBadgeZ: 3;                   /* 黒幕/画像より前面 */
  --gmBadgeText: #fff;
  --gmBadgeNewBg: #ff3b62;         /* NEW：ビビッド */
  --gmBadgeUpdateBg: #1e88e5;      /* UPDATE：視認性の高いブルー */
  --gmBadgeShadow: 0 6px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);

  /* 帯どうしの間隔（フルスクリーン時の上下間） */
  --gmBandGap: 18px;

  /* ===== View All（BLOGと同体感） ===== */
  --galCtaFill: #333;
  --galCtaText: #333;
  --galCtaTextHover: #fff;
  --galCtaArrowDist: .7em;
  --galCtaMs: 320ms;

  /* ===== 左右ラベル用（筆記体） ===== */
  --galScriptFont:
    "Snell Roundhand",
    "Segoe Script",
    "Brush Script MT",
    "Lucida Handwriting",
    "Dancing Script",
    "Allura",
    "Great Vibes",
    cursive;
  --galScriptColor: #222;
  --galScriptSize: clamp(1rem, 2.4vw, 1.25rem);
}

/* ===== セクション周り（背景はサイト基調色に合わせる） ===== */
.top-gallery{ position: relative; background: #e6e5df; }

/* ===== 見出し：ABOUT と同サイズ・同座標 ===== */
.top-gallery__header{
  position: absolute;
  top:  var(--aboutPadTop, 50px);   /* ABOUT 側の変数を利用（未定義時はフォールバック） */
  left: var(--aboutPadX, 40px);
  z-index: 2;
  padding: 0; margin: 0;
  pointer-events: none;            /* 背面の操作を邪魔しない。必要なら auto に */
}
.top-gallery__title{
  font-size: 5.5rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.2;
  margin: -10px 0 5px; color: #333; text-align: left;
}
.top-gallery__lead{
  display: block; font-size: 1rem; font-weight: 400; color: #666;
  margin-top: 5px; letter-spacing: .03em;
}

/* ===== 帯（ビューポート） ===== */
.gallery-marquee{
  position: relative; width:100%; height:var(--gmHeight);
  overflow:hidden; background:var(--gmBg); color:var(--gmColor);
  border-top:var(--gmBorder); border-bottom:var(--gmBorder);

  /* 両端のフェードで“出入り”を自然に */
  -webkit-mask-image:linear-gradient(to right,
      transparent 0, #000 var(--gmMask),
      #000 calc(100% - var(--gmMask)), transparent 100%);
          mask-image:linear-gradient(to right,
      transparent 0, #000 var(--gmMask),
      #000 calc(100% - var(--gmMask)), transparent 100%);
}

/* 横に流れるトラック（※ gap/padding は使わない） */
.gallery-marquee__track{
  position:absolute; left:0; top:0; height:100%;
  display:inline-flex; align-items:stretch; white-space:nowrap;
  will-change:transform; transform:translate3d(0,0,0);
  visibility:hidden;                               /* 初期化まで不可視（チラつき防止） */
  pointer-events:auto;
}

/* 1カード（右マージンで間隔を作る） */
.gallery-marquee__unit{
  flex:0 0 var(--gmUnitW); width:var(--gmUnitW); height:100%;
  margin-right:var(--gmUnitGap);
}

/* ===== カード本体（外枠） ===== */
.gm-link{
  display:grid; grid-template-rows: 1fr auto; height:100%;
  border-radius: var(--gmRadius); overflow: hidden; background: transparent;
  text-decoration: none; color: inherit; position: relative; /* ::before/::after の基点 */
}
.gm-link[aria-disabled="true"]{ cursor: default; }

/* 黒幕（アンダーレイ）— ホバーで下からせり上げ */
.gm-link::before{
  content:""; position:absolute; inset: 0; background: var(--gmHoverBg);
  transform: translateY(100%); transition: transform var(--gmHoverSlideMs) ease; z-index: 0;
}

/* 目立つバッジ（data-badge で NEW/UPDATE） */
.gm-link::after{ content: none; }
.gm-link[data-badge]::after{
  content: attr(data-badge);
  position: absolute; top: var(--gmBadgeTop); left: var(--gmBadgeLeft);
  display: inline-flex; align-items:center; justify-content:center;
  height: var(--gmBadgeH); padding: 0 var(--gmBadgePadX);
  border-radius: var(--gmBadgeRadius); background: var(--gmBadgeUpdateBg); color: var(--gmBadgeText);
  font: var(--gmBadgeFont); letter-spacing: var(--gmBadgeLS); text-transform: uppercase;
  box-shadow: var(--gmBadgeShadow); z-index: var(--gmBadgeZ); pointer-events: none;
  will-change: transform; transform-origin: left top;
}
.gm-link[data-badge="new"]::after{
  background: var(--gmBadgeNewBg); animation: gm-badge-breathe 1200ms ease-in-out infinite;
}
/* マークアップ方式のバッジにも対応（任意） */
.gm-badge{
  position: absolute; top: var(--gmBadgeTop); left: var(--gmBadgeLeft);
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--gmBadgeH); padding: 0 var(--gmBadgePadX); border-radius: var(--gmBadgeRadius);
  background: var(--gmBadgeUpdateBg); color: var(--gmBadgeText);
  font: var(--gmBadgeFont); letter-spacing: var(--gmBadgeLS); text-transform: uppercase;
  box-shadow: var(--gmBadgeShadow); z-index: var(--gmBadgeZ); pointer-events: none;
}
.gm-badge.is-new{ background: var(--gmBadgeNewBg); animation: gm-badge-breathe 1200ms ease-in-out infinite; }
.gm-badge.is-update{ background: var(--gmBadgeUpdateBg); }
@keyframes gm-badge-breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }

/* =========================================================
   ★追加：NSFWバッジ（マークアップ出力方式）を“確実に見せる”
   ---------------------------------------------------------
   前提：
     - index.php 側で <span class="gm-nsfw">NSFW</span> が出力される
       （※ data-badge と別系統）
   目的：
     - 既存レイアウト（grid 1fr/auto）に影響を与えず、
       “画像上の右下”にオーバーレイで表示する。
   重要：
     - 余白は --gmInnerPad に追従し、画像の clip-path 内に収める
     - pointer-events: none でリンク操作を阻害しない
     - z-index は画像/キャプション（z=1）より前、NEW/UPDATE（z=3）より後ろ
       → 右下なので NEW/UPDATE とは干渉しない
   ========================================================= */
.gm-nsfw{
  position: absolute;
  right:  calc(var(--gmInnerPad) + 8px);
  bottom: calc(var(--gmInnerPad) + 8px);
  z-index: 2; /* 画像/キャプション(1)より前面、NEW/UPDATE(3)より背面 */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 22px;
  padding: 0 10px;
  border-radius: 999px;

  /* 視認性：控えめに“黒半透明” */
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);

  font: 800 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;

  box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18);

  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* 子要素は黒幕より前面 */
.gm-figure, .gm-caption{ position: relative; z-index: 1; }

/* ===== 画像領域（上段）— 余白は clip-path で確保 ===== */
.gm-figure{
  margin:0; width:100%; height:100%; overflow:hidden; background: transparent; position: relative;
  -webkit-clip-path: inset(var(--gmInnerPad)); clip-path: inset(var(--gmInnerPad));
}
.gm-figure::after{
  content:""; position:absolute; inset: var(--gmInnerPad);
  background: rgba(0,0,0,var(--gmHoverImageAlpha, 0)); transition: background 240ms ease; pointer-events:none;
}
.gm-img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.01); transition: transform 360ms ease; }

/* ===== NEWS式 no-image ===== */
.gm-noimg{
  width:100%; height:100%; display:grid; place-items:center; background:#eee; color:rgba(0,0,0,.35);
  font: 700 .9rem/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing:.08em; text-transform: uppercase; user-select:none;
}

/* ===== キャプション（下段） ===== */
.gm-caption{
  display:block; background: var(--gmCaptionBg);
  padding: calc(var(--gmCaptionPadY) + var(--gmInnerPad)) calc(var(--gmCaptionPadX) + var(--gmInnerPad));
  border-top: var(--gmCaptionDivider); line-height: 1.25;
}
.gm-title{
  display:block; color: var(--gmTitleColor); font-size: var(--gmTitleSize);
  font-weight: 700; letter-spacing: .02em; margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms ease;
}

/* =========================================================
   ★修正：パスワード保護アイコン（SVG）で画像高さが縮む問題の対策
   ---------------------------------------------------------
   現象：
     - common.css にて `svg { display:block; height:auto; }` が指定されているため、
       タイトル内に挿入されるロックSVG（.aleg-ico）が “ブロック要素” となり、
       `.gm-caption`（gridの auto 行）の高さを押し上げる。
     - `.gm-link` は `grid-template-rows: 1fr auto` で全高固定のため、
       auto 行が増えた分だけ 1fr（画像）が削られ、画像が低く見える。
   方針（崩さない）：
     - グローバルの svg ルールは他所で必要な可能性があるため触らない。
     - TOP Gallery のタイトル内に限り、SVGを “行内要素” として扱うよう上書きし、
       caption 行高の増加を抑止 → 画像領域（1fr）を常に同じ高さに保つ。
   ========================================================= */
.top-gallery .gm-title svg.aleg-ico{
  display: inline-block;           /* ← block指定を局所的に打ち消す（行内化） */
  width: 1em; height: 1em;         /* タイトル文字サイズに追従（em基準で固定） */
  vertical-align: -0.12em;         /* ベースライン由来の上下ブレを抑える（微調整） */
  margin-right: .35em;             /* アイコンとタイトル文字の間隔（既存の見た目を維持） */
  flex: 0 0 auto;                  /* 念のため：flex文脈に巻き込まれても伸縮しない */
}

.gm-meta{
  display:block; color: var(--gmMetaColor); font-size: var(--gmMetaSize);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms ease;

  /* ★今回改修（表記統一）："NEW/UPDATE : yyyy/mm/dd" の視認性を担保
     - index.php 側は既に NEW/UPDATE を大文字で出すが、念のため CSS でも大文字化
     - 日付は数字なので影響なし */
  text-transform: uppercase;

  /* =========================================================
     ★今回の改修（Galleryセクション：画像高さの統一）
     ---------------------------------------------------------
     背景：
       - カードは `.gm-link { grid-template-rows: 1fr auto; height:100%; }`
         の固定高構造。
       - `.gm-meta` が「あるカード／ないカード」でキャプション行数が変わると、
         auto 行（下段）が増えた分だけ 1fr（画像）が縮み、画像高さがズレる。

     仕様（template 側の対応）：
       - `.gm-meta` は “常に出力” されるようになった。
       - バッジが無いカードは `.gm-meta.is-empty` が付与され、内容は &nbsp;
         （= 1行を確実に確保）となる。

     ここ（CSS）の責務：
       - `.gm-meta` の “1行分” の高さを安定的に確保する
       - 空メタは「見えない」だけにしてレイアウトは保持する
         （display:none は高さが消えるので使わない）
     ========================================================= */
  line-height: 1.2;                /* 1行の高さを明示（フォント差でブレないように） */
  min-height: 1.2em;               /* 空でも必ず1行を確保（emなので font-size 追従） */
}

/* ★空メタ：見えないが高さは保持（画像高さを “バッジあり側” に統一） */
.gm-meta.is-empty{
  visibility: hidden;              /* レイアウトは残す / 見た目だけ消す */
}

/* ===== ホバー演出（ポインタ環境のみ） ===== */
@media (hover:hover){
  .gm-figure:hover .gm-img{ transform: scale(1.05); }
  .gm-link:hover::before{ transform: translateY(0); }
  .gm-link:hover .gm-title{ color: var(--gmHoverTitleColor); }
  .gm-link:hover .gm-meta { color: var(--gmHoverMetaColor);  }
  .gm-link:hover{ --gmHoverImageAlpha: .25; }
}

/* ===== ポーズ中の見た目（任意） ===== */
.gallery-marquee.is-paused .gm-img{ filter: saturate(.92) contrast(.98); }

/* ===== レスポンシブ（TB）— ややコンパクト化 ===== */
@media (max-width: 980px){
  :root{
    --gmHeight: clamp(240px, 40svh, 360px);
    --gmUnitW: clamp(220px, 54vw, 320px);
    --gmUnitGap: 18px;
  }
  .gm-title{ font-size:.9rem; }
}

/* ===== アクセシビリティ：キーボード操作の視認性 ===== */
.gm-link:focus-visible{
  outline: 2px solid #333;
  outline-offset: -2px;
  border-radius: var(--gmRadius);
}

/* ===== 動きの抑制（OS設定を尊重） ===== */
@media (prefers-reduced-motion: reduce){
  .gallery-marquee__track{ transform:none !important; will-change:auto !important; }
  .gm-link::before{ transition:none; }
  .gm-figure::after{ transition:none; }
  .gm-link[data-badge="new"]::after{ animation:none; }
}

/* =========================================================
   フルスクリーン表示（PC/TB既定：残り高フィット）
   ※ モバイルはこの後ろのブロックで“完全解除”します
   ========================================================= */
.top-gallery.is-fullscreen{
  /* ↓ 揺れない 1 画面高を確保（svh → --vh-stable → 1vh） */
  min-height: calc(var(--vh-stable, 1vh) * 100);
  display: flex; flex-direction: column;
}
@supports (height: 100svh){
  .top-gallery.is-fullscreen{ min-height: 100svh; }
}
.top-gallery.is-fullscreen .gallery-marquee{ flex: 0 0 auto; } /* is-offset で上書き */
.top-gallery.is-fullscreen.is-offset{ row-gap: var(--gmBandGap); }
.top-gallery.is-fullscreen.is-offset .top-gallery__header{
  position: relative; top:auto; left:auto; z-index: 2;
  padding: var(--aboutPadTop, 50px) var(--aboutPadX, 40px) 0 var(--aboutPadX, 40px);
  pointer-events: auto;
}
.top-gallery.is-fullscreen.is-offset .gallery-marquee{
  flex: 1 1 0; height: auto; min-height: 0;      /* ← PC/TB は“残り高フィット” */
}
.top-gallery.is-fullscreen.is-offset .gallery-marquee + .gallery-marquee{
  margin-top: var(--gmBandGap);
}
@media (max-width: 768px){
  .top-gallery__title{ font-size: 3.6rem; }
}

/* =========================================================
   ★ モバイル/タッチ環境：1画面フィットを“完全解除”
   ---------------------------------------------------------
   - `.is-fullscreen` の flex 配分を無効化（display:block / min-height:auto）
   - `.is-offset .gallery-marquee` の `flex:1 1 0; height:auto;` を上書きして
     常に `height: var(--gmHeight)` を使わせる
   - 幅のみでは拾えない端末もあるため、タッチ判定でも同じ上書きを実施
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse){
  :root{
    /* モバイルは“高め”に見せる。必要なら 68svh/72svh 等に調整可 */
    --gmHeight: clamp(320px, 50svh, 720px);
    --gmUnitW: clamp(200px, 70vw, 300px);
    --gmMask: 24px;
  }

  /* セクションは“ブロック”に戻し、1画面超えを許容 */
  .top-gallery.is-fullscreen{
    min-height: auto;
    display: block;
  }

  /* 帯は常に明示高さを採用（flex配分を無効化） */
  .top-gallery.is-fullscreen .gallery-marquee,
  .top-gallery.is-fullscreen.is-offset .gallery-marquee{
    flex: 0 0 auto;
    height: var(--gmHeight);
    min-height: var(--gmHeight);
  }
}

/* =========================================================
   Gallery 一覧導線（VIEW ALL）— BLOG同等の体感 + 塗り残り対策
   HTML 例：
     <div class="gallery-more">
       <span class="gallery-more__tag is-left" aria-hidden="true">Photos</span>
       <a class="gm-viewall" href="/wordpress/gallery/">VIEW ALL</a>
       <span class="gallery-more__tag is-right" aria-hidden="true">Illustrations</span>
     </div>
   ========================================================= */

/* 行レイアウト：中央ボタンを主役に、左右ラベルは控えめに */
.gallery-more{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;                 /* ★ 中央寄せ */
  align-items: center;                     /* 縦中央 */
  gap: clamp(48px, 10vw, 160px);
  padding: 10px var(--aboutPadX, 40px);
  margin: var(--gmBandGap, 18px) 0;
  z-index: 2;
}

/* === BLOG 同等の“塗り＋矢印スワップ”に刷新（角丸 30px） === */
.gm-viewall{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 56px 12px 42px;            /* 右を広めにして矢印スペースを確保 */
  border: 1px solid var(--galCtaFill); border-radius: 30px;
  text-decoration: none; font: 700 .9rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;

  position: relative; overflow: hidden; isolation: isolate;

  color: var(--galCtaText);
  background-image: linear-gradient(var(--galCtaFill), var(--galCtaFill));
  background-repeat: no-repeat;
  background-position: left bottom;        /* 下辺から塗る */
  background-size: 100% 0%;                /* 初期は塗りゼロ */

  /* ★ 縫い目対策：背景の描画領域を枠線まで広げる */
  background-origin: border-box;
  background-clip: border-box;

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

/* 矢印入替（既存→右へ抜ける） */
.gm-viewall::after{
  content: "➡"; position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%) translateX(0); opacity: 1; color: currentColor;
  transition: transform var(--galCtaMs) ease, opacity var(--galCtaMs) ease;
}
/* 新規→左から現れる */
.gm-viewall::before{
  content: "➡"; position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%) translateX(calc(-1 * var(--galCtaArrowDist))); opacity: 0; color: currentColor;
  transition: transform var(--galCtaMs) ease, opacity var(--galCtaMs) ease;
}

/* ホバー／フォーカス：全面塗り＋文字色反転＋矢印入替
   ★ 高さを “100% + 2px” に過塗りして 1px 縫い目を撲滅 */
.gm-viewall:hover,
.gm-viewall:focus-visible{
  color: var(--galCtaTextHover); border-color: var(--galCtaFill);
  background-size: 100% calc(100% + 2px);
  background-position: left bottom;
}
.gm-viewall:hover::after,
.gm-viewall:focus-visible::after{
  transform: translateY(-50%) translateX(var(--galCtaArrowDist)); opacity: 0;
}
.gm-viewall:hover::before,
.gm-viewall:focus-visible::before{
  transform: translateY(-50%) translateX(0); opacity: 1;
}

/* 保険：負の bottom オフセット対応環境でさらに 1px 下へ */
@supports (background-position: bottom -1px) {
  .gm-viewall:hover,
  .gm-viewall:focus-visible{
    background-position: left bottom -1px;
  }
}

/* フォーカスリング */
.gm-viewall:focus-visible{ outline: 2px solid var(--galCtaFill); outline-offset: 2px; }

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .gm-viewall{ transition:none; background-image:none; background-color:transparent; }
  .gm-viewall:hover, .gm-viewall:focus-visible{ background-color:var(--galCtaFill); color:var(--galCtaTextHover); }
  .gm-viewall::before, .gm-viewall::after{ transition:none; transform:translateY(-50%) translateX(0); opacity:1; }
}

/* =========================================================
   NEW：VIEW ALL 両脇ラベル（Photos / Illustrations）— 筆記体
   ========================================================= */
.gallery-more__tag{
  font-family: var(--galScriptFont);
  font-size: var(--galScriptSize);
  font-weight: 400;                 /* 筆記体は細めが読みやすい */
  font-style: italic;
  color: var(--galScriptColor);
  line-height: 1; letter-spacing: .02em; white-space: nowrap;
  user-select: none; opacity: .9; transform: translateY(1px);
}
.gallery-more__tag.is-left  { text-align: right;  }
.gallery-more__tag.is-right { text-align: left;   }

@media (max-width: 768px){
  :root{ --galScriptSize: clamp(.95rem, 3.2vw, 1.05rem); }
}
@media (max-width: 560px){
  .gallery-more__tag{ display: none; } /* SP狭幅はボタン単独表示で余白優先 */
}


/* =========================================================
   ★ 追加：スクロール連動リビール（下からスライドイン）ユーティリティ
   ---------------------------------------------------------
   目的：
     - Gallery「詳細ページ」の各要素を“下からふわっと”表示させるための
       共通ユーティリティ。トップの Gallery 帯には影響しません（適用時のみ有効）。
     - JS が `.fx-up` を付与し、必要に応じて `--fx-delay` で遅延を指示。
   使い方（例）：
     1) 初期化時に対象へ .fx-up を付与（JS）
     2) IntersectionObserver で画面に入ったら .is-in を追加（JS）
     3) 遅延は要素ごとに `style="--fx-delay:120ms"` のように付与（JS）
   安全性：
     - transform/opacity のみ操作 → レイアウト（CLS）に影響なし
     - クラス未付与の要素には一切影響しない（トップ帯はそのまま）
   ========================================================= */
.fx-up{
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .6s ease,
    transform .6s ease;
  will-change: opacity, transform; /* GPU合成で滑らかに */
}

.fx-up.is-in{
  opacity: 1;
  transform: none;
  transition-delay: var(--fx-delay, 0ms); /* スタッガー：例 0/120/240ms… */
}

/* もしフェードのみ使いたい場合の簡易版（任意で利用可） */
.fx-fade{
  opacity: 0;
  transition: opacity .6s ease;
}
.fx-fade.is-in{
  opacity: 1;
  transition-delay: var(--fx-delay, 0ms);
}

/* 動きが苦手な方向け：アニメを無効化（即時表示） */
@media (prefers-reduced-motion: reduce){
  .fx-up,
  .fx-fade{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}