/* =========================================================
   top_about.css — SDA 完結版（Scroll-Driven Animationsのみで実現）
   ---------------------------------------------------------
   目的（PC/タブレット）：
     1) ABOUT が画面に入ったら“画面ロック（pin）”
     2) ロック中の進捗で、メイン画像がゆっくり拡大
     3) テキストは 1 文字ずつ出現
     4) 拡大完了・全文表示後にロック解除（状態保持）
     5) 逆スクで縮小・非表示（状態追従）

   目的（SP専用挙動）：
     A) pin/SDA を停止（スクロール連動をやめる）
     B) テキストはロード時に「下からスライド＋フェード」で表示
     C) メイン画像は“テキストの背面”に全面フィットで敷く（半透明）
     D) サブ画像は SP では非表示

   依存：
     - index.php の DOM（.top-about > .about-sticky > .about-zoom-frame …）
     - common.js が供給する --stickyTop（固定ヘッダー実高さ）

   チューニングのコツ（よく使う調整だけ抜粋）：
     - テキストをもっと大きく      : .top-about { --about-text-scale: 1.35; }
     - メイン拡大の強さ             : :root { --about-zoom-span: 0.45; }（0.25〜0.55 推奨）
     - SP で文字をさらに小さく       : @media (max-width:768px){ .top-about{ --about-text-scale-sp:0.85; } }
     - SP 背景画像の濃さ             : @media (max-width:768px){ .top-about{ --about-sp-bg-opacity:.22; } }
     - 見出しと本文のクリアランス    : @media (max-width:768px){ .top-about{ --about-heading-space-sp:220px; } }

   ※ 下の「トークン」各項目にも用途・推奨値・設定例をコメントしています。
   ========================================================= */


/* ---------------------------
   トークン（調整はここで）
   ※ すべて CSS 変数。セクター単位で .top-about{} から上書き可
   --------------------------- */
:root {
  /* pin の余剰スクロール量（vh 加算）
     ├ 推奨：120〜200
     └ 例）:root{ --about-pin-vh: 180; } */
  --about-pin-vh: 160;

  /* 画像の最終拡大量（scale の増分）
     ├ 実スケール = 1 + (--about-zoom * これ)
     ├ 推奨：0.25〜0.55
     └ 例）:root{ --about-zoom-span: 0.4; } */
  --about-zoom-span: 0.35;

  /* ズームの“序盤ゆっくり”感（SDA 補間）
     └ 別イージングに差し替え可 */
  --about-ease: cubic-bezier(.2, 0, 0, 1);

  /* 文字出現のディレイ（1 文字ごとの遅延）
     ├ % 指定は view-timeline 用、sec は保険
     └ 例）:root{ --char-step-sec: 0.004s; } */
  --char-step-p: 0.6%;
  --char-step: 0.6%;
  --char-step-sec: 0.006s;

  /* 固定ヘッダー高（common.js で実測上書き）
     └ フォールバック：0px */
  --stickyTop: 0px;

  /* メイン画像枠の縦横比
     ├ 推奨：4/3, 16/9, 3/2 など
     └ 例）:root{ --about-frame-ratio: 16/9; } */
  --about-frame-ratio: 16/9;

  /* 見出しの基準座標（左上）
     └ 例）:root{ --aboutPadTop: 64px; --aboutPadX: 48px; } */
  --aboutPadTop: 50px;
  --aboutPadX: 40px;

  /* グリッド版レイアウトの左右比（PC/タブレット）
     └ 例）.top-about{ --about-col-left: 1.2fr; --about-col-right: 1fr; } */
  --about-col-left: 1fr;
  --about-col-right: 1fr;

  /* メイン画像の注目点（object-position）
     └ 例）人物が右寄り：--about-main-focus-x: 60% */
  --about-main-focus-x: 50%;
  --about-main-focus-y: 50%;

  /* サブ画像（外出し）の見た目・位置
     └ 例）--about-sub-size: 60%; --about-sub-align:center; */
  --about-sub-size: 50%;
  --about-sub-ratio: 4/3;
  --about-sub-gap-y: clamp(12px, 2vh, 24px);
  --about-sub-overlap: 12px;
  --about-sub-align: start;
  --about-sub-radius: 10px;

  /* 旧 DOM 互換（サブがメイン枠の“左外”にぶら下がるモード）
     └ 例）--about-legacy-sub-top: 200px; --about-legacy-sub-width: 60%; */
  --about-legacy-sub-top: 220px;
  --about-legacy-sub-width: 50%;

  /* 本文テキストの拡大・行間
     ├ 既定は「今のサイズ × 1.2」
     └ 例）.top-about{ --about-text-scale: 1.35; --about-text-line-height: 1.8; } */
  --about-text-scale: 1.2;
  --about-text-line-height: 1.9;

  /* === キャプション（メイン/サブ共通）の見やすさトークン === */
  --about-cap-bg: rgba(17,17,17,.64);
  --about-cap-color: #fff;
  --about-cap-radius: 10px;
  --about-cap-pad-x: 10px;
  --about-cap-pad-y: 7px;
  --about-cap-shadow: 0 4px 14px rgba(0,0,0,.22);
  --about-cap-blur: 6px;
  --about-cap-font: clamp(11px, 1.15vw, 13px);
  --about-cap-gap: 8px;

  /* キャプションのSDA遅延(%)：メイン/サブで別々に */
  --about-cap-main-show-from: 14%;
  --about-cap-sub-show-from: 30%;

  /* ★JSフォールバック用の指数（未指定時の既定） */
  --about-zoom-exp: 1.25;
}

/* 数値補間（SDA）で使うカスタムプロパティ宣言 */
@property --about-zoom { syntax:'<number>'; inherits:true; initial-value:0; }
@property --about-zoom-sub { syntax:'<number>'; inherits:true; initial-value:0; }


/* =========================================================
   セクション骨格
   ========================================================= */
.top-about{
  position:relative;
  /* まずは古いブラウザ向けの vh を指定 → 後続の svh で上書き */
  block-size:calc(100vh + (var(--about-pin-vh,160) * 1vh));
  block-size:calc(100svh + (var(--about-pin-vh,160) * 1svh)); /* pin の余剰ぶんを積む */
  margin:0; padding:0;
  overflow:visible;
  isolation:isolate; /* セクションを描画的に独立：背面画像が次セクションに隠れない */
  view-timeline-name: --about;            /* SDA の進捗タイムライン名 */
  view-timeline-axis: block;              /* 縦スクロールを軸に */
  /* ★ 子孫から --about タイムラインを参照しやすくするためのスコープ宣言 */
  timeline-scope: --about;
}
.top-about .about-sticky{ position:relative; block-size:100%; } /* 100% 高のラッパ */

/* ★ ベース背景（PC/Tab）：初期進捗0でも下地が見えるように（初回描画の“黒抜け”防止） */
.top-about,
.top-about .about-zoom-frame{
  background-color: var(--section-bg, var(--pageBg, var(--body-bg, #fff)));
}


/* =========================================================
   画面ロック（pin）と進捗
   ========================================================= */
.top-about .about-zoom-frame{
  position:sticky;                        /* ここで“画面ロック” */
  inset-block-start:var(--stickyTop,0px); /* 固定ヘッダーぶん上から下げる */
  /* vh → svh の順で記述（古環境フォールバック） */
  block-size:calc(100vh - var(--stickyTop,0px));
  block-size:calc(100svh - var(--stickyTop,0px));
  overflow:clip;                          /* 拡大は内側に収める */
  will-change:transform;
  contain: paint;                         /* ★ 初期ペイントの安定化（副作用なし） */

  /* SDA：進捗で --about-zoom を補間（拡大の原資） */
  animation-timeline:--about;
  animation-name:about-progress;
  animation-duration:1s;                  /* SDA なので実時間は無関係（進捗の割合で進む） */
  animation-range:entry 100% exit 100%;
  animation-timing-function:var(--about-ease);
  animation-fill-mode:both;
}
/* メイン拡大：序盤(〜12%)は据え置き → その後 1.0 へ */
@keyframes about-progress{
  0%{--about-zoom:0;} 12%{--about-zoom:0;} 100%{--about-zoom:1;}
}
/* サブ拡大：メインより遅らせて開始 */
@keyframes about-sub-progress{
  0%{--about-zoom-sub:0;} 24%{--about-zoom-sub:0;} 100%{--about-zoom-sub:1;}
}


/* =========================================================
   レイアウト（グリッド版：互換）
   ========================================================= */
.top-about .top-about-inner{
  position:relative; /* PC/タブレットでは背景画像の絶対配置基準 */
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,var(--about-col-left,1fr)) minmax(0,var(--about-col-right,1fr));
  grid-template-areas:"text media" "sub media";
  gap:clamp(16px,3vw,40px);
  --about-gap:clamp(16px,3vw,40px);
  block-size:100%;
  padding-inline:clamp(16px,4vw,64px);
  align-items:center;
}
.top-about .top-about-text{ grid-area:text; }
.top-about .top-about-img-wrap{ grid-area:media; }
.top-about .top-about-subframe{ grid-area:sub; }

@media (max-width:768px){
  .top-about .top-about-inner{
    grid-template-columns:1fr;
    grid-template-areas:"text" "media" "sub";
    align-content:start;
  }
}


/* =========================================================
   画像側（右カラム：メイン）
   ========================================================= */
.top-about .top-about-img-wrap{
  position:relative;
  inline-size:100%;
  max-block-size:100%;
  aspect-ratio:var(--about-frame-ratio,4/3);
  margin-inline-start:auto;
  display:grid;
  place-items:center;
  overflow:clip;
  justify-self:end;
}
.top-about .top-about__img{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  object-position:var(--about-main-focus-x,50%) var(--about-main-focus-y,50%);
  transform-origin:50% 50%;
  transform:scale(calc(1 + (var(--about-zoom) * var(--about-zoom-span,0.35))));
  transition:transform 0s;                /* 補間は SDA に任せる */
  will-change:transform;

  /* pin 開始直後にフェードイン（0→10%） */
  opacity:0;
  animation-timeline:--about;
  animation-name:about-img-fade;
  animation-duration:1s;
  animation-range:entry 100% exit 100%;
  animation-timing-function:linear;
  animation-fill-mode:both;
}
@keyframes about-img-fade{ 0%{opacity:0;} 10%{opacity:1;} 100%{opacity:1;} }

/* === キャプション（メイン用／サブ共通のチップデザイン） ===
   - 可読性を高めるための半透明プレート＋backdrop-filter
   - メインは右下、サブは左下に寄せる（それぞれモディファイアで制御） */
.top-about .about-image-caption{
  position:absolute;
  z-index:2;
  /* 既定の位置は右下（= メイン向け）。サブは後述で上書き */
  inset-inline-end:clamp(var(--about-cap-gap),2vw,24px);
  inset-block-end:clamp(var(--about-cap-gap),2vh,24px);

  display:inline-block;
  max-inline-size:min(56ch, 72%);       /* 長文でも収まるように最大幅を制限 */
  font-size:var(--about-cap-font);
  line-height:1.35;
  color:var(--about-cap-color);
  padding:var(--about-cap-pad-y) var(--about-cap-pad-x);
  border-radius:var(--about-cap-radius);
  box-shadow:var(--about-cap-shadow);
  background:var(--about-cap-bg);
  pointer-events:none;                   /* クリック透過 */

  /* 背景ぼかし（対応環境のみ効く／無くても破綻しない） */
  -webkit-backdrop-filter: blur(var(--about-cap-blur)) saturate(110%);
  backdrop-filter: blur(var(--about-cap-blur)) saturate(110%);

  /* SDA 同期フェード：メイン画像より“ほんの少し遅く”出す */
  opacity:0;
  transform:translateY(6px);
  animation-timeline:--about;
  animation-duration:1s;
  animation-range:entry 100% exit 100%;
  animation-fill-mode:both;
  animation-timing-function:linear;
}
/* メイン用：右下・遅延はトークンで微調整（既定14%→表示開始） */
.top-about .about-image-caption--main{
  animation-name:about-cap-main;
}
@keyframes about-cap-main{
  0%{opacity:0; transform:translateY(6px);}
  from{opacity:0;}
  to{opacity:1; transform:translateY(0);}
}
@supports (animation-range: entry 100% exit 100%) {
  .top-about .about-image-caption--main{
    animation-timing-function:linear;
  }
}

/* サブ用：左下寄せ & メインよりさらに後ろでフェードイン */
.top-about .top-about-subframe .about-image-caption,
.top-about .about-image-caption--sub{
  inset-inline-end:auto;                     /* 右→解除 */
  inset-inline-start:clamp(var(--about-cap-gap),2vw,24px);
  animation-name:about-cap-sub;
}
@keyframes about-cap-sub{
  0%{opacity:0; transform:translateY(6px);}
  from{opacity:0;}  /* ~30% まで待つ（animation-rangeにより進捗で評価） */
  to{opacity:1; transform:translateY(0);}
}


/* =========================================================
   サブ画像（外出し）
   ========================================================= */
.top-about .top-about-subframe{
  inline-size:min(100%,var(--about-sub-size,50%));
  aspect-ratio:var(--about-sub-ratio,4/3);
  margin-block-start:calc(var(--about-sub-gap-y,16px) - var(--about-sub-overlap,0px)); /* 少し食い込む演出 */
  border-radius:var(--about-sub-radius,10px);
  overflow:clip;
  justify-self:var(--about-sub-align,start);
  z-index:2;
}
@media (max-width:768px){ .top-about .top-about-subframe{ inline-size:100%; } }

.top-about .top-about__img-sub{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  transform-origin:50% 50%;
  transform:scale(calc(1 + (var(--about-zoom-sub) * var(--about-zoom-span,0.35))));
  transition:transform 0s;
  will-change:transform;

  /* フェードはメインより遅らせる（18→28%） */
  opacity:0;
  animation-timeline:--about, --about;
  animation-name:about-img-sub-fade, about-sub-progress;
  animation-duration:1s, 1s;
  animation-range:entry 100% exit 100%, entry 100% exit 100%;
  animation-timing-function:linear, var(--about-ease);
  animation-fill-mode:both, both;
}
@keyframes about-img-sub-fade{ 0%{opacity:0;} 18%{opacity:0;} 28%{opacity:1;} 100%{opacity:1;} }


/* =========================================================
   旧DOM互換（サブがメイン枠内にある場合）
   ========================================================= */
@supports (selector(:has(*))){
  .top-about:has(.top-about-subframe) .top-about-img-wrap > .top-about__img-sub{ display:none; }
}
.top-about:not(:has(.top-about-subframe)) .top-about-img-wrap > .top-about__img-sub{
  position:absolute;
  inset-inline-start:calc(-100% - var(--about-gap,32px));
  inset-block-start:var(--about-legacy-sub-top,220px);
  inline-size:calc(((100% - var(--about-gap,32px)) / 2) * (var(--about-legacy-sub-width,50%) / 50));
  aspect-ratio:var(--about-sub-ratio,4/3);
  border-radius:var(--about-sub-radius,10px);
  overflow:clip;
  z-index:2;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}


/* =========================================================
   テキスト（基本サイズ＋1文字ずつ出現）
   ========================================================= */
.top-about .top-about-text,
.top-about .about-contact{
  font-size:calc(1em * var(--about-text-scale,2));
  line-height:var(--about-text-line-height,1.9);
}
.top-about .top-about-text .char,
.top-about .about-contact .char{
  display:inline-block;
  opacity:0;
  transform:translateY(0.6em);
  animation-timeline:--about;
  animation-name:char-in;
  animation-duration:1s;
  animation-range:entry 100% exit 100%;
  animation-delay:calc(var(--i) * var(--char-step-sec,0.006s));
  animation-fill-mode:both;
  animation-timing-function:ease-out;
}
@keyframes char-in{ to{ opacity:1; transform:translateY(0); } }


/* =========================================================
   見出し（GALLERY と同デザイン）
   ========================================================= */
.top-about .top-about-heading{
  position:absolute;
  top:var(--aboutPadTop,50px);
  left:var(--aboutPadX,40px);
  z-index:10;                               /* 常に最前面（サブより上） */
  padding:0; margin:0;
  pointer-events:none;
}
.top-about .top-about-heading .top_about-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-about .top-about-heading .top_about-sub{
  display:block; font-size:1rem; font-weight:400; color:#666;
  margin-top:5px; letter-spacing:.03em;
}
@media (max-width:768px){
  .top-about .top-about-heading .top_about-title{ font-size:3.6rem; }
}


/* =========================================================
   安定化（描画/フォント/スクロールバー）
   ========================================================= */
.top-about, .top-about *{
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}
html.overlay-scrollbar .top-about .about-zoom-frame{ contain:layout paint; }


/* =========================================================
   ScrollTrigger 併用時の保護（残置）
   ========================================================= */
.top-about.using-st-pin .about-zoom-frame{
  block-size:calc(100svh - var(--stickyTop,0px));
}


/* =========================================================
   動きが苦手な環境への配慮
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .top-about .about-zoom-frame,
  .top-about .top-about__img,
  .top-about .top-about__img-sub,
  .top-about .top-about-text .char,
  .top-about .about-contact .char,
  .top-about .about-image-caption{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* =========================================================
   非干渉レイヤー構造（.is-layered）
   - PC：テキスト（左中央）/ メイン（右中央）/ サブ（中央下）
   - 互いに干渉しない絶対配置
   ========================================================= */
.top-about.is-layered{
  --stage-pad:clamp(16px,4vw,64px);

  /* テキスト（左中央）
     └ タイトルとの干渉回避：中央から“下へ”ずらす量 --text-shift */
  --text-left:var(--stage-pad);
  --text-width:min(560px,42vw);
  --text-shift:clamp(24px,15vh,160px);

  /* メイン（右中央） */
  --main-right:var(--stage-pad);

  /* ★変更：PCメイン画像の視覚サイズを拡大 */
  --main-width:min(62vw, 960px);

  /* 追加（任意）：少し右へ“はみ出させる”量（デフォルト0で無効）
     例）もっと迫力が欲しい時 → .top-about{ --main-bleed-right: 24px; } */
  --main-bleed-right: 0px;

  /* サブ（中央下） */
  --sub-bottom:clamp(24px,4vh,64px);
  --sub-width:min(36vw,420px);
  --sub-overlap:12px;

  /* レイヤー順 */
  --z-text:3; --z-main:1; --z-sub:2;
}
.top-about.is-layered .about-zoom-frame{
  position:sticky; inset-block-start:var(--stickyTop,0px);
  block-size:calc(100svh - var(--stickyTop,0px)); overflow:clip;
}
.top-about.is-layered .top-about-inner{
  position:relative; block-size:100%; padding-inline:var(--stage-pad);
}
.top-about.is-layered .top-about-text{
  position:absolute; left:var(--text-left);
  top:calc(50% + var(--text-shift)); transform:translateY(-50%);
  inline-size:var(--text-width);
  max-inline-size:calc(100% - (var(--text-left) + var(--stage-pad)));
  z-index:var(--z-text);
}
.top-about.is-layered .top-about-img-wrap{
  position:absolute;
  right:calc(var(--main-right) - var(--main-bleed-right));  /* ★bleed適用 */
  top:50%; transform:translateY(-50%);
  inline-size:var(--main-width);
  aspect-ratio:var(--about-frame-ratio,4/3);
  margin:0; justify-self:end; z-index:var(--z-main); overflow:clip;
}
.top-about.is-layered .top-about__img{
  object-position:var(--about-main-focus-x,50%) var(--about-main-focus-y,50%);
}
.top-about.is-layered .top-about-subframe{
  position:absolute; left:50%; bottom:var(--sub-bottom);
  transform:translate(-50%, calc(-1 * var(--sub-overlap)));
  inline-size:var(--sub-width); aspect-ratio:var(--about-sub-ratio,4/3);
  margin:0; border-radius:var(--about-sub-radius,10px); overflow:clip; z-index:var(--z-sub);
}
.top-about.is-layered .top-about__img-sub{ inline-size:100%; block-size:100%; object-fit:cover; }

@media (max-width:768px){
  .top-about.is-layered{
    --text-left:var(--stage-pad);
    --text-width:88vw;
    --text-shift:clamp(32px,10vh,180px);
    --main-right:var(--stage-pad);
    --main-width:88vw;
    --sub-bottom:clamp(24px,6vh,72px);
    --sub-width:72vw;
    --sub-overlap:8px;
  }
}


/* =========================================================
   ★★★ SP専用（レイヤー強制修正）★★★
   - テキストの裏に画像（z=1）
   - PC レイヤーの translateY(-50%) / aspect-ratio を解除（これが隠れの主因）
   - pin/SDA 無効、テキストはロード時フェード＋スライド
   ========================================================= */

/* フェード用キーフレーム（SP） */
@keyframes about-text-enter{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
@keyframes about-bg-fadein{ from{opacity:0;} to{opacity:var(--about-sp-bg-opacity,.18);} }

/* 初期値固定（Chrome の視差最適化で初期不透明度が無視されるのを防ぐ） */
@starting-style{
  @media (max-width:768px){
    .top-about .top-about-text{ opacity:0; transform:translateY(24px); }
    .top-about .top-about-img-wrap{ opacity:0; }
  }
}

@media (max-width:768px){

  /* 背景色は他セクションと統一（黒化防止） */
  .top-about,
  .top-about .about-zoom-frame{
    background-color:var(--section-bg, var(--pageBg, var(--body-bg, #fff)));
  }

  /* pin / SDA 停止（sticky→relative、タイムライン無効） */
  .top-about{ block-size:auto !important; view-timeline-name:none !important; }
  .top-about .about-zoom-frame{
    position:relative !important;
    inset-block-start:auto !important;
    block-size:auto !important;                     /* ← pin はしない */
    min-block-size:calc(100svh - var(--stickyTop,0px)); /* ← でも最低 1 画面ぶんは確保 */
    overflow:visible !important;
    animation:none !important;
  }

  /* 絶対配置の基準を .about-zoom-frame に切替（inner は static に） */
  .top-about .top-about-inner{
    position:static !important;
    min-block-size:inherit !important;             /* 親の最小高を継承して全面化を安定化 */
  }

  /* テキストを少し小さく（係数 0.9） */
  .top-about{ --about-text-scale-sp:0.90; --about-sp-bg-opacity:.18; }
  .top-about .top-about-text, .top-about .about-contact{
    font-size:calc(1em * var(--about-text-scale,2) * var(--about-text-scale-sp,0.9));
  }

  /* 1 文字演出は停止（ブロックで表示） */
  .top-about .top-about-text .char,
  .top-about .about-contact .char{
    animation:none !important; opacity:1 !important; transform:none !important;
  }

  /* タイトル被り回避＋ロード時フェード */
  .top-about .top-about-text{
    position:relative; z-index:2;
    margin-inline:auto; padding-inline:clamp(16px,4vw,24px); max-inline-size:88vw;
    margin-block-start:var(--about-heading-space-sp, clamp(180px,30vw,360px));
    opacity:0; transform:translateY(24px);
    animation:about-text-enter 600ms ease-out 120ms both !important;
  }

  /* ★背面画像 — セクション全面、PC レイヤー指定を完全解除 */
  .top-about .top-about-img-wrap,
  .top-about.is-layered .top-about-img-wrap{
    position:absolute !important;
    top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; /* inset:0 の明示 */
    transform:none !important;             /* PC の translateY(-50%) を解除 */
    aspect-ratio:auto !important;          /* 4/3 を解除して全面フィット */
    inline-size:100% !important; block-size:100% !important;
    margin:0; z-index:1 !important; overflow:clip; pointer-events:none;
    opacity:var(--about-sp-bg-opacity,.18);
    animation:about-bg-fadein 640ms ease-out both !important;
  }
  .top-about .top-about__img{
    inline-size:100%; block-size:100%;
    object-fit:cover;
    object-position:var(--about-main-focus-x,50%) var(--about-main-focus-y,50%);
    transform:none !important; animation:none !important; opacity:1;
  }

  /* サブ画像は SP では非表示 */
  .top-about .top-about-subframe,
  .top-about .top-about-img-wrap > .top-about__img-sub,
  .top-about.is-layered .top-about-subframe{ display:none !important; }

  /* キャプションも SP は非表示（背景全面化で読みにくくなるため） */
  .top-about .about-image-caption{ display:none !important; }

  /* レイヤー版でもテキストは通常フローで前面 */
  .top-about.is-layered .top-about-text{
    position:relative !important; left:auto !important; top:auto !important;
    transform:none !important; z-index:2;
  }
}