/* Scrix 縦型スワイプ計測カード Player CSS（このファイルがスワイプ Player の正典。
   FAQ Player の scrix-player.css とは独立）。

   構造（UX改善ラウンドで確定）:
   .scrix-swipe-wrap                … 外枠（フッターの絶対配置基準・全画面ブレイクアウト）
     .scrix-swipe-root              … スクロールコンテナ（縦横スナップ・1パネル=1画面）
       .scrix-swipe-panel           … 1画面（flex 中央寄せ）
         .scrix-swipe-media         … パネル全面の実測用コンテナ（fit/crop とも JS が frame を px 計算）
           .scrix-swipe-frame       … 描画された画像そのものの矩形（座標計測・リンクの基準・JS が px で配置）
             .scrix-swipe-image / .scrix-swipe-link
     .scrix-swipe-footer            … フッターボタン（オーバーレイ・テンプレート4種） */

.scrix-swipe-wrap {
    position: relative;
    height: 100vh;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    /* LP 全体の地をテーマの背景色で塗る（2026-08-28）。フッターは幅 480px で中央に置かれるため、
       PC では両脇にページの地（白）が見えていた。テーマの地色にすれば文字パネルの背景とも揃う */
    background: var(--scrix-swipe-bg, transparent);
}

/* 全画面表示（フッターを画像の上に重ねる）では、内側スクロール枠の下余白を固定の 84px ではなく
   フッターの実測高（Runtime が --scrix-swipe-footer-h に流す）に合わせる（2026-08-28）。
   フッターが見出し + ボタン + 画像で高くなると、固定値では文字が隠れていた。
   対象はフォーム / FAQ 診断 / よくある質問 / テンプレート（テンプレートは swipe-templates.css 側） */
.scrix-swipe-wrap[data-fullscreen="on"] .scrix-swipe-form-target.scrix-guided-root,
.scrix-swipe-wrap[data-fullscreen="on"] .scrix-swipe-faq-target.scrix-root {
    padding-bottom: calc(max(84px, var(--scrix-swipe-footer-h, 0px) + 16px) + var(--scrix-swipe-consent-h, 0px));
}

@supports (height: 100dvh) {
    .scrix-swipe-wrap {
        height: 100dvh;
    }
}

/* 全画面表示（B-4）: 祖先の max-width や余白を無視してビューポート幅いっぱいにブレイクアウトする。
   ブラウザ UI（アドレスバー等）は Web 標準では隠せないため対象外（Scrix 側の余白除去のみ）。 */
.scrix-swipe-wrap[data-fullscreen="on"] {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 480px カラムキャップは廃止（バッチ3・2026-07-16）: wrap は常にコンテナ幅いっぱいを使い、
   メディアは全デバイスで「フィット + ぼかし背景」の統一ルールで表示する。回転モード用の
   100vw ブレイクアウト（バッチ2）もキャップ廃止で不要になったため撤去。
   フッター側の 480px 上限は .scrix-swipe-footer の max-width が担う */

/* スクロールコンテナ。縦横とも scroll-snap で1画面ごとに必ず止まる（B-1・既定・自由スクロールなし） */
.scrix-swipe-root {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* none: 縦LPでも横方向のオーバースクロール連鎖（Chrome のオーバースクロール由来の
       戻る/進むナビゲーション）を抑止する。縦LPの横方向はクロス軸＝JS 担当で、ネイティブに
       横スクロールさせる必要が無いため none で問題ない（エッジスワイプ対策・2026-07-25） */
    overscroll-behavior-x: none;
    /* 縦LPでも横スワイプ操作を JS で拾って縦に進める（クロス軸スクロール）ため pan-y に限定 */
    touch-action: pan-y;
}

.scrix-swipe-root[data-direction="horizontal"] {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* none: 横端到達時のオーバースクロール連鎖に加え、Chrome のオーバースクロール由来の
       戻る/進むナビゲーションも抑止する（エッジスワイプ＝ブラウザバック対策・2026-07-21） */
    overscroll-behavior-x: none;
    /* 横LPでも縦スワイプ操作を JS で拾って横に進める（クロス軸スクロール）ため pan-x に限定 */
    touch-action: pan-x;
}

.scrix-swipe-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-panel {
    flex: 0 0 100%;
}

/* fit（既定）/ crop とも media はパネル全面の実測用コンテナ。JS（layoutMedia）が media の
   実描画サイズと画像の naturalWidth/Height から frame を px で計算して配置する。
   fit は contain（画像全体が見える・レターボックス許容）、crop は cover 計算（はみ出しは clip）。
   フッター/バナー分の高さ減少は media の実測サイズに自動で反映される（CSS の max-height に依存しない）。 */
.scrix-swipe-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* crop: media がパネル全面・frame（描画画像）は JS が cover 計算で配置し、はみ出しは clip（B-5） */
.scrix-swipe-media.scrix-swipe-media-crop {
    width: 100%;
    height: 100%;
}

/* フィット余白の自動ぼかし背景（バッチ2・2026-07-16）: 表示中のメディア自身（動画は poster）を
   cover で全面に敷き、ぼかし + 減光して余白を埋める。scale(1.1) はぼかしの端の白フチ隠し。
   DOM 上 frame より前（最背面）・pointer-events なしで、座標計測・どこでもリンクに影響しない */
.scrix-swipe-media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.7);
    transform: scale(1.1);
    pointer-events: none;
}

/* frame は fit/crop とも JS が px（width/height/left/top）で配置する。inset:0 だと media 全面に
   広がり比率が崩れるため、既定は inset:auto（未計算時は 0 サイズ = load / resize で確定）。 */
.scrix-swipe-frame {
    position: absolute;
    inset: auto;
}

.scrix-swipe-media.scrix-swipe-media-crop .scrix-swipe-frame {
    inset: auto;
}

/* 横向き回転表示（2026-07-16）: スマホ横向き（pointer:coarse × landscape × 高さ<500px）で
   縦長メディアを 90 度回転して画面いっぱいに見せる。dw/dh は Runtime が「コンテナ幅・高さを
   入れ替えた」既存 contain/cover 計算で確定し、中央回転配置はこの CSS が担う。回転方向は
   Runtime（getRotationDeg）が --scrix-swipe-rotate（±90deg）で流し込む。
   どこでもリンクは frame の子のまま一緒に回転して追従する */
.scrix-swipe-frame-rotated {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(var(--scrix-swipe-rotate, -90deg));
    transform-origin: center;
}

/* 回転モード中はフッターを非表示にする（縦に戻せば即復帰。回転モードの目的は縦に戻して
   もらうことであり、横倒しのフッターボタンを操作させる UX に価値がないため）。
   display:none で offsetHeight=0 になり、layoutMedia は全ビューポート高さを使う */
.scrix-swipe-wrap[data-rotated="on"] .scrix-swipe-footer {
    display: none;
}

.scrix-swipe-image {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

/* 動画パネル（media_type='video'・2026-07-16）。frame が dw×dh で確定するため画像と同じ全面表示。
   再生/停止・プリロードは Runtime（syncPanelMedia）が制御する */
.scrix-swipe-video {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
}

/* どこでもリンク（相対座標の矩形）。装飾なし・タップ領域のみ */
.scrix-swipe-link {
    position: absolute;
    display: block;
    background: transparent;
    cursor: pointer;
}

/* 切り替えアニメーション（タスク3）: dwell 用 IntersectionObserver が付け外しする
   .scrix-swipe-active で駆動（監視は増やさない）。
   11種: slide（既定）/ fade / zoom（ズームイン）/ zoomout（ズームアウト）/
   slideup（下からせり上がる）/ push（次が現在を押し出す感覚の全高スライド）/
   flip（めくり）/ blur（にじみ）/ pop（弾む）/ wipe（開く）/ instant（瞬間切替）。
   スピードは Runtime が --scrix-swipe-anim-ms（200/350/600ms）で流し込む。
   対象は画像・動画の描画枠（.scrix-swipe-media）と、フォーム / FAQ診断 / よくある質問 / テンプレートの
   内側スクロール枠（.scrix-swipe-form-scroll）の両方（2026-08-28。従来は画像・動画だけに効いていて、
   Builder のプレビューが全種別に当てているのとズレていた）。transform / filter は非表示中の値で、
   表示中（.scrix-swipe-active）は none に戻るため、フォーム内の position: fixed 等への影響は入場の
   数百ms に限られる。
   12種目の curl（ページめくり）だけは入場効果ではなくスクロール連動（下の専用ブロック）。 */
.scrix-swipe-root[data-transition="slide"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="fade"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="zoom"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="zoomout"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="slideup"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="push"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="flip"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="blur"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="pop"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="wipe"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transition:
        transform var(--scrix-swipe-anim-ms, 350ms) ease,
        opacity var(--scrix-swipe-anim-ms, 350ms) ease,
        filter var(--scrix-swipe-anim-ms, 350ms) ease,
        clip-path var(--scrix-swipe-anim-ms, 350ms) ease;
}

/* pop は弾む easing に上書き */
.scrix-swipe-root[data-transition="pop"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scrix-swipe-root[data-transition="slide"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: translateY(28px);
    opacity: 0.35;
}

.scrix-swipe-root[data-direction="horizontal"][data-transition="slide"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: translateX(36px);
}

.scrix-swipe-root[data-transition="fade"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    opacity: 0.12;
}

.scrix-swipe-root[data-transition="zoom"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: scale(0.85);
    opacity: 0.3;
}

.scrix-swipe-root[data-transition="slideup"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: translateY(56%);
    opacity: 0.5;
}

.scrix-swipe-root[data-transition="push"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: translateY(100%);
}

.scrix-swipe-root[data-direction="horizontal"][data-transition="push"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: translateX(100%);
}

.scrix-swipe-root[data-transition="zoomout"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: scale(1.18);
    opacity: 0.3;
}

.scrix-swipe-root[data-transition="flip"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: perspective(900px) rotateX(28deg);
    transform-origin: 50% 100%;
    opacity: 0.25;
}

.scrix-swipe-root[data-transition="blur"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    filter: blur(14px);
    opacity: 0.4;
}

.scrix-swipe-root[data-transition="pop"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: scale(0.55);
    opacity: 0;
}

.scrix-swipe-root[data-transition="wipe"] :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    clip-path: inset(38% 8% 38% 8%);
    opacity: 0.45;
}

.scrix-swipe-root[data-transition="slide"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="fade"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="zoom"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="zoomout"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="slideup"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="push"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="flip"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="blur"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="pop"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll),
.scrix-swipe-root[data-transition="wipe"] .scrix-swipe-active :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
    transform: none;
    opacity: 1;
    filter: none;
    clip-path: inset(0);
}

/* ページめくり（curl・2026-08-28）。上の10種（新しいパネルの中身が現れるときの入場効果）と違い、
   パネル送りのスクロールそのものに連動する。パネルの枠（.scrix-swipe-panel）の画面内の位置を
   時間軸（view-timeline）にして、中身をスクロール量ぶん逆向きに動かして画面に固定する
   （枠だけが動く = 境目が動く = 下から次のページがその場に現れて見える）。
   位置の計算は CSS だけで行う。JS で毎コマ transform を当てると iPhone Safari では scroll イベントが
   描画より1コマ遅れて届き、中身が行ったり来たりして見える（実機で確認済み・2026-08-28）。
   時間軸: 0% = 枠が後ろ側（右/下）に完全に隠れている / 50% = ぴったり表示 / 100% = 前側へ完全に抜けた。
   パネル寸法（--scrix-swipe-panel-w/h）は Runtime が px で流し込む（translate の % は要素自身の幅を
   指すため、パネルより小さい中身＝フィット表示の画像や LINE パネルでは使えない）。
   非対応ブラウザ（iOS 25 以前・Firefox）では Runtime が transition_fallback に読み替えるので、
   data-transition="curl" にはならない。 */
.scrix-swipe-root[data-transition="curl"] .scrix-swipe-panel {
    view-timeline-name: --scrix-swipe-panel;
    view-timeline-axis: block;
}

.scrix-swipe-root[data-direction="horizontal"][data-transition="curl"] .scrix-swipe-panel {
    view-timeline-axis: inline;
}

.scrix-swipe-root[data-transition="curl"] .scrix-swipe-panel > :not(.scrix-swipe-edge) {
    animation: scrix-swipe-curl-pin-y linear both;
    animation-timeline: --scrix-swipe-panel;
    will-change: transform;
}

.scrix-swipe-root[data-direction="horizontal"][data-transition="curl"] .scrix-swipe-panel > :not(.scrix-swipe-edge) {
    animation-name: scrix-swipe-curl-pin-x;
}

@keyframes scrix-swipe-curl-pin-x {
    from { transform: translateX(calc(-1 * var(--scrix-swipe-panel-w, 100vw))); }
    to { transform: translateX(var(--scrix-swipe-panel-w, 100vw)); }
}

@keyframes scrix-swipe-curl-pin-y {
    from { transform: translateY(calc(-1 * var(--scrix-swipe-panel-h, 100vh))); }
    to { transform: translateY(var(--scrix-swipe-panel-h, 100vh)); }
}

/* 境目の帯（めくれていくページの縁の「巻き込み」）と、現れるページに落ちる影。各パネルの枠の内側に
   置くので枠と一緒に動く（位置計算は不要）。lead = 先頭側（左/上）・trail = 後尾側（右/下）。
   進む: 去るページの trail に帯 + 現れるページの lead に影 / 戻る: 去るページの lead に帯 + 現れる
   ページの trail に影。向き（data-dir）は Runtime が scroll で付け替える（離散値なので1コマ遅れて
   も見た目に影響しない）。見え方（不透明度）も同じ時間軸で、端（0% / 50% / 100%）に近づくほど
   薄くする = 最後の数 px で帯が1コマで消える「がくっ」を防ぐ。 */
.scrix-swipe-edge {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}

.scrix-swipe-edge-band-lead,
.scrix-swipe-edge-band-trail {
    --scrix-swipe-edge-w: 36px;
}

.scrix-swipe-edge-shade-lead,
.scrix-swipe-edge-shade-trail {
    --scrix-swipe-edge-w: 30px;
}

.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge {
    left: 0;
    right: 0;
    height: var(--scrix-swipe-edge-w);
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge {
    top: 0;
    bottom: 0;
    width: var(--scrix-swipe-edge-w);
}

.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-band-lead,
.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-shade-lead {
    top: 0;
}

.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-band-trail,
.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-shade-trail {
    bottom: 0;
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-band-lead,
.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-shade-lead {
    left: 0;
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-band-trail,
.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-shade-trail {
    right: 0;
}

/* 帯: 紙の縁が筒状に巻き込む陰影（透明 → 影 → 白い紙 → 影）。影: 現れるページに落ちる陰 */
.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-band-trail {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 22%, #ffffff 46%, #f6f6f6 72%, #c9c9c9 92%, rgba(0, 0, 0, 0.45) 100%);
}

.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-band-lead {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 22%, #ffffff 46%, #f6f6f6 72%, #c9c9c9 92%, rgba(0, 0, 0, 0.45) 100%);
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-band-trail {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 22%, #ffffff 46%, #f6f6f6 72%, #c9c9c9 92%, rgba(0, 0, 0, 0.45) 100%);
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-band-lead {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 22%, #ffffff 46%, #f6f6f6 72%, #c9c9c9 92%, rgba(0, 0, 0, 0.45) 100%);
}

.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-shade-lead {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

.scrix-swipe-root:not([data-direction="horizontal"]) .scrix-swipe-edge-shade-trail {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-shade-lead {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

.scrix-swipe-root[data-direction="horizontal"] .scrix-swipe-edge-shade-trail {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

/* early = 枠が後ろ側から入ってくる間（0〜50%）に見せる / late = 前側へ抜けていく間（50〜100%） */
@keyframes scrix-swipe-curl-edge-early {
    0% { opacity: 0; }
    6% { opacity: 1; }
    44% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes scrix-swipe-curl-edge-late {
    0%, 50% { opacity: 0; }
    56% { opacity: 1; }
    94% { opacity: 1; }
    100% { opacity: 0; }
}

.scrix-swipe-root[data-transition="curl"] .scrix-swipe-edge {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --scrix-swipe-panel;
}

.scrix-swipe-root[data-transition="curl"][data-dir="fwd"] .scrix-swipe-edge-band-trail,
.scrix-swipe-root[data-transition="curl"][data-dir="back"] .scrix-swipe-edge-shade-trail {
    animation-name: scrix-swipe-curl-edge-late;
}

.scrix-swipe-root[data-transition="curl"][data-dir="fwd"] .scrix-swipe-edge-shade-lead,
.scrix-swipe-root[data-transition="curl"][data-dir="back"] .scrix-swipe-edge-band-lead {
    animation-name: scrix-swipe-curl-edge-early;
}

@media (prefers-reduced-motion: reduce) {
    .scrix-swipe-root :is(.scrix-swipe-media, .scrix-swipe-form-scroll) {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    /* ページめくりは中身の固定をやめて普通の吸着スクロールにし、帯と影も出さない */
    .scrix-swipe-root[data-transition="curl"] .scrix-swipe-panel > :not(.scrix-swipe-edge) {
        animation: none !important;
    }

    .scrix-swipe-edge {
        display: none !important;
    }
}

/* フッターボタン（B-3）。スタイルは Runtime が CSS 変数（--scrix-swipe-footer-*）で流し込む */
/* 全画面表示（fullscreen=on）ではフッターの帯背景を透過し、パネル画像の上に重ねる
   （バッチ2で復活・2026-07-16。「全画面で画像を見せつつボタンを重ねる」が製品の必須パターン）。
   ただし見出し・進捗ドットが画像上で見えにくくなるため、下側を暗く/明るくするスクリム
   （下→上へ透明に抜けるグラデーション）を敷いて視認性を確保する。色味はテーマの文字色の
   明暗に応じて Runtime が --scrix-swipe-footer-scrim に流し込む（フッター固有スタイルで上書き可。
   フッター画像モードは Runtime の inline background が常に勝ち、スクリムは適用されない） */
.scrix-swipe-wrap[data-fullscreen="on"] .scrix-swipe-footer {
    background: var(--scrix-swipe-footer-scrim, linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25)));
}

/* 全画面OFF + フッターあり（data-footer=on）: 画像領域をフッターの実測高さぶん縮め、
   画像がフッターに重ならず「フッターの上」に収まるようにする（stacked・Runtime が実測高を流し込む） */
.scrix-swipe-wrap[data-footer="on"] .scrix-swipe-root {
    height: calc(100% - var(--scrix-swipe-footer-h, 0px));
}

/* 運営者情報フッターを出すパネルの下余白（2026-09-08・案D）。帯（.scrix-swipe-legal）は root の下端に
   重なり、この余白の中に収まる = 画像は帯の下に潜らない。出さないパネル（data-legal="off"）は余白なしで
   下端まで画像を使う。余白はパネルごとに固定なので、めくっても root の高さもスナップ位置も動かない。
   border-box で高さ 100% を保つ（content-box だとパネルが余白ぶん伸びてスナップが崩れる） */
.scrix-swipe-panel[data-legal="on"] {
    box-sizing: border-box;
    padding-bottom: var(--scrix-swipe-legal-h, 0px);
}

.scrix-swipe-footer {
    position: absolute;
    left: 0;
    right: 0;
    /* 下から順に「計測バナー → 運営者情報フッター → CTA帯」で積む（2026-09-08）。
       運営者情報フッターを出さないパネル（wrap の data-legal="off"）では帯の分だけ下がる
       （下の規則）。バナー高は renderConsentBanner が、運営者情報フッターの高さは
       syncFooterHeight が wrap に実測値を流す（JS で bottom を直接書かない＝積み方の定義を
       ここ1か所に集める） */
    bottom: var(--scrix-swipe-consent-h, 0px);
    /* 最大幅480px・中央寄せ（バッチ3・2026-07-16）: 480 は旧PCカラム幅と同値で、スマホでの
       見え方との比率が一致する。left/right:0 + margin:auto で stacked（全画面OFF）と
       オーバーレイ（全画面ON・absolute）の両方・ボタン/画像モードの両方で効く。
       幅480px未満の縦持ちスマホでは実質変化なし（従来どおり全幅）。
       **PC（画面幅 720px 以上）はテンプレートパネルの中身と同じ幅に広げる**
       （--scrix-swipe-content-max-w = 600px・正は swipe-templates.css・下の @media）。
       さらに **LP の中身より広くしない**（2026-09-08 やましたさん指示）: Runtime が
       「画像・動画パネルのうち最も狭いものの描画幅」を実測して --scrix-swipe-panel-content-w に
       流す（syncFooterWidth）。PC で縦長画像を見ると画像は画面中央の細い列になるのに、
       フッターだけが上限いっぱいまで広がって浮いていた。**幅は LP 全体で1つ**（パネルごとに変えない。
       めくるたびにフッターの幅が変わるのを避ける）。画像・動画パネルが1枚も無い LP では
       変数が外れ、フォールバックの 100%（= 上の上限がそのまま効く）に戻る */
    max-width: min(480px, var(--scrix-swipe-panel-content-w, 100%));
    /* max-width を「帯の外形」として効かせる（2026-09-08）。既定の content-box だと左右の padding 16px が
       外側に足され、帯だけが画像より 32px 広くなる（見出し+ボタンモード。画像モードは Runtime が
       padding を 0 にするので元から一致していた）。Builder は Tailwind の preflight で全要素が
       border-box のため、揃えないとプレビューと公開ページでも幅がズレる */
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--scrix-swipe-footer-bg, var(--scrix-swipe-bg, #111827));
    color: var(--scrix-swipe-footer-text, var(--scrix-swipe-text, #f9fafb));
    font-family: var(--scrix-swipe-footer-font, system-ui, sans-serif);
    transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.25s ease;
}

/* 運営者情報フッターを出すパネルでは、CTA帯はその帯の上に載る（2026-09-08・案D）。
   全画面 OFF では root の下余白（パネルの padding）に重なる位置 = 画像の直下 */
.scrix-swipe-wrap[data-legal="on"] .scrix-swipe-footer {
    bottom: calc(var(--scrix-swipe-consent-h, 0px) + var(--scrix-swipe-legal-h, 0px));
}

.scrix-swipe-footer-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.scrix-swipe-footer-heading {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

.scrix-swipe-footer-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.scrix-swipe-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.scrix-swipe-footer-dot-active {
    opacity: 1;
    transform: scale(1.25);
    background: var(--scrix-swipe-primary, currentColor);
}

.scrix-swipe-footer-buttons {
    display: flex;
    gap: 8px;
}

.scrix-swipe-footer-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--scrix-swipe-footer-radius, 8px);
    background: var(--scrix-swipe-footer-btn-bg, var(--scrix-swipe-primary, #2563eb));
    color: var(--scrix-swipe-footer-btn-text, #ffffff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.scrix-swipe-footer-btn:hover {
    filter: brightness(1.08);
}

.scrix-swipe-footer-btn svg {
    flex: none;
}

/* フッター画像（画像モード・排他）。アスペクト比・object-fit・背景色は Runtime が
   要素の inline style で流し込む（FAQ カードの画像表示と同じ object-fit 方式）。 */
.scrix-swipe-footer-image-container {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--scrix-swipe-footer-radius, 8px);
}

.scrix-swipe-footer-image {
    display: block;
    width: 100%;
    height: 100%;
}

/* 運営者情報フッター（2026-09-08）。CTA帯（.scrix-swipe-footer）とは別物で、その下に積む。
   中身の描画（.scrix-legal-footer）は3製品共通の shared/legalFooter.ts が持ち、ここは
   スワイプLP での「置き方」（絶対配置・幅・積み順）だけを決める。
   幅は CTA帯と同じ規則（LP の中身より広くしない・syncFooterWidth が流す実測値）。
   セレクタに .scrix-swipe-wrap を足して詳細度を上げてある: 共通 CSS（LEGAL_FOOTER_CSS）は head の
   末尾に注入されるため、同じ詳細度だと共通側の背景（主色を薄めた半透明）がこちらの不透明な地色に
   勝ってしまう（2026-09-08 レビューで発見。幅・文字色と同じ注入順の問題） */
.scrix-swipe-wrap .scrix-swipe-legal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--scrix-swipe-consent-h, 0px);
    z-index: 5;
    box-sizing: border-box;
    /* **帯は画面の端から端まで**（2026-09-10 やましたさん指示）。計測バナー（.scrix-swipe-consent）と
       同じ置き方にする。それまでは画像の幅に合わせて中央に置いていたが、帯が収まる下余白
       （.scrix-swipe-panel[data-legal="on"] の padding-bottom）には画像が無いため、
       **帯の左右にパネルの地色がむき出しで見えていた**（計測バナーを閉じると現れる）。
       全幅にすればその地色が帯で埋まり、計測バナーと縦に揃う */
    margin-left: auto;
    margin-right: auto;
    /* 不透明の帯（2026-09-08 やましたさん決定・案イ）。半透明で画像に重ねると明るい画像で沈んで
       読めないため、CTA帯と同じ地色・文字色の不透明な帯にする。位置は root の下端に重なるが、
       出すパネルは同じ高さの下余白（.scrix-swipe-panel[data-legal="on"]）を持つので画像には重ならない */
    color: var(--scrix-swipe-footer-text, var(--scrix-swipe-text, #f9fafb));
    background: var(--scrix-swipe-footer-bg, var(--scrix-swipe-bg, #111827));
}

/* パネル単位の非表示（legal_footer_visible=false）は共通 CSS の data-blank（帯を透明にする）と
   wrap の data-legal="off"（CTA帯を下ろす）で行う。そのパネルは下余白を持たないので画像が下端まで出る */

/* 横向き回転モードでは CTA帯（.scrix-swipe-footer）と同じく隠す（画面の高さを全部パネルに使う。
   offsetHeight が 0 になるので syncFooterHeight が流す高さも 0 になる） */
.scrix-swipe-wrap[data-rotated="on"] .scrix-swipe-legal {
    display: none;
}

/* 計測通知バナー（公開URLページ専用・Scrix 側の責務）。埋め込みでは表示されない */
.scrix-swipe-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(17, 24, 39, 0.92);
    color: #f9fafb;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.scrix-swipe-consent-text {
    flex: 1;
    min-width: 0;
}

.scrix-swipe-consent-close {
    flex: none;
    padding: 6px 14px;
    border: 1px solid rgba(249, 250, 251, 0.5);
    border-radius: 4px;
    background: transparent;
    color: #f9fafb;
    font-size: 12px;
    cursor: pointer;
}

.scrix-swipe-consent-close:hover {
    background: rgba(249, 250, 251, 0.12);
}

/* フォームパネル（プロダクト統合・2026-07-12）。内側スクロールで縦あふれを吸収する。
   短いフォームは margin:auto で中央寄せ、長いフォームは通常フローでスクロール */
.scrix-swipe-panel[data-panel-type="form"] {
    align-items: stretch;
}

.scrix-swipe-form-scroll {
    position: absolute;
    inset: 0;
    /* box-sizing は guided-root 配下のみ設定されるため swipe 側ラッパーには明示する
       （padding が width に加算されパネルより横に広がるのを防ぐ・2026-07-13 幅ズレ修正） */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 横LP（root は touch-action: pan-x）でもフォーム内の縦スクロールを許可する */
    touch-action: auto;
    /* 縦方向のスクロールチェーンを切る（2026-08-20）。パネル送りは JS が引き受ける
       （Runtime.ts の formStepsMainAxis / formOwnsCrossAxis）。
       **経緯**: 2026-07-12 は逆に「contain を付けない」判断だった。当時は縦LPのフォーム
       パネルを抜ける手段がネイティブのチェーンしか無く、切ると詰んだため。しかしチェーンは
       ジェスチャの途中では親へ渡らず（内側スクローラに latch する）、端に達してから改めて
       別のジェスチャを始める必要があり、mandatory snap では渡った量が小さいと元のパネルへ
       吸い戻される。FAQ を埋め込むと縦に長くなり「スクロールを取られたまま出られない」状態に
       なったため、チェーンをやめて JS の1枚送りに一本化した（縦LP・横LPとも JS が担当）。
       横方向（x）は contain にしない — 横LPの主軸はネイティブ scroll-snap の担当のため */
    overscroll-behavior-y: contain;
}

/* フォームパネルの器。FAQ パネル（.scrix-swipe-faq-body）と同じく**パネル全面に広げる**。
   フォーム側の背景色・背景画像は mount 先（= .scrix-guided-root）に描かれるため、ここで
   横幅を絞ったり padding を持ったりすると、その内側にしか背景が出ない（2026-08-01 まで
   max-width:480px + padding をここに置いていたため、背景が中央の帯にしか出ていなかった）。
   **最大幅480px（バッチ3・2026-07-16）と内側余白は root とカードへ移した**（下記）。 */
.scrix-swipe-form-body {
    box-sizing: border-box;
    width: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* mount 先（.scrix-swipe-form-target）は mountGuidedForm が scrix-guided-root クラスを**自身に**
   付ける。**余白は root 自身が持つ**こと — こうすると背景色・背景画像が padding の外まで
   （border-box まで）塗られ、パネル全面に出る。FAQ パネルの .scrix-swipe-faq-target.scrix-root と同じ作り。
   下余白はフッターボタン・進捗ドットとの重なり回避 + 計測バナーの実測高（FAQ と同じ CSS 変数）。 */
.scrix-swipe-form-target.scrix-guided-root {
    flex: 1 0 auto;
    padding: 12px 12px calc(84px + var(--scrix-swipe-consent-h, 0px));
}

/* 埋め込みフォームはパネル（スワイプコラム）の横幅にきっちり合わせる（2026-07-12 要望対応）。
   フォーム側テーマの card_width（--sgf-card-width）やシェル余白が親コラムより広いと
   中央からズレたり横スクロールが出るため、埋め込みでは**パネル側の上限で頭打ちにする**。
   カード幅の 480px 上限（フッターと同じ値）はここが持つ（旧 .scrix-swipe-form-body の max-width を移設）。
   width:100% + max-width なので、パネルがそれより狭いときは従来どおりパネル幅にフィットする。
   **2026-09-10: 上書き（= 480px）から min() に変更**。上書きだと「はみ出さない」ためのはずが
   card_width をそのまま無視し、**狭い設定のフォームまで押し広げていた**（460px の設定が PC で
   600px になっていた）。min にすれば、広い設定は頭打ちのまま・狭い設定は作成者の値が効く。 */
.scrix-swipe-form-body .scrix-guided-shell {
    padding: 0;
}

.scrix-swipe-form-body .scrix-guided-card {
    max-width: min(var(--sgf-card-width), 480px);
}

/* FAQ埋め込みパネル（2026-07-30）。フォームパネルと同じ内側スクロール構造で縦あふれを吸収する
   （scroll コンテナはジェスチャーガード（formScrollRoom）の判定対象になるよう
   .scrix-swipe-form-scroll を共用）。フォームの 480px 上限は掛けない（横中央寄せは
   scrix-faq.css の .scrix-root 自身（display:flex; justify-content:center）が max-width 640px の
   .scrix-stage を中央に置く形で担う）。 */
.scrix-swipe-panel[data-panel-type="faq"] {
    align-items: stretch;
}

.scrix-swipe-faq-body {
    box-sizing: border-box;
    width: 100%;
    /* 短い FAQ でもパネル高いっぱいに広げ、.scrix-root の背景色で面を埋める */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* mount 先（.scrix-swipe-faq-target）は ScrixPlayer.mount が scrix-root クラスを**自身に**付ける
   （子に .scrix-root ができるのではない）。display / flex-direction はここで上書きしないこと —
   当初 column を当てていたため justify-content:center が縦寄せに化け、横中央寄せが消えていた
   （2026-07-30 初回確認の不具合）。セレクタは .scrix-root を併記して詳細度を上げる
   （scrix-faq.css は後から動的注入されるため、同詳細度だと .scrix-root { padding: 24px } に
   下余白の宣言が負ける）。 */
.scrix-swipe-faq-target.scrix-root {
    flex: 1 0 auto;
    /* 下余白 = フッターボタン・進捗ドット回避の 84px + 計測バナーの実測高。
       バナー高は renderConsentBanner が wrap に CSS 変数で設定する（折返しても実測・無ければ 0） */
    padding-bottom: calc(84px + var(--scrix-swipe-consent-h, 0px));
}

/* キーボード対策（D12）: フォーム入力フォーカス中はスナップを一時解除する
   （wrap の高さ固定は JS が px 値で行う） */
.scrix-swipe-root.scrix-swipe-snap-off,
.scrix-swipe-root.scrix-swipe-snap-off[data-direction="horizontal"] {
    scroll-snap-type: none;
}

/* LINE 出口パネル（プロダクト統合・2026-07-12）。文言 + 友だち追加ボタンの中央表示。
   最大幅480px（バッチ3・カラム廃止に伴い、全幅化で文言が横に伸びるのを防ぐ） */
/* LINEパネル内の配置ラッパー。見た目（見出し・QR・緑ボタン）は共通部品
   shared/lineBlock.ts が <style data-scrix-line-styles> で注入する .scrix-line-* が担い、
   ここはスワイプパネル固有の配置（横幅・余白・文字色）だけを持つ（2026-08-02 共通部品化）。
   下余白はフッターボタンとの重なり・密着回避（2026-07-12 要望対応） */
.scrix-swipe-exit-line {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    padding: 24px 24px 96px;
    color: var(--scrix-swipe-text, #f8fafc);
    font-family: sans-serif;
}

/* PC（720px 以上）のコンテンツ幅（2026-09-02 やましたさん指示）。
   幅の**正は swipe-templates.css の --scrix-swipe-content-max-w**（数値を二重に持たない）。
   フッターと出口フォームはパネルの外にあるため、パネル幅ではなく画面幅（@media）で切り替える。
   Builder のプレビューはこの CSS を使わず（フッターは React の inline style）、
   **枠の幅**（スマホ 390 / タブレット 768 / PC 1024）が 720px 以上かで同じ上限に切り替える
   （SwipePreviewPage の footerMaxWidthCap・2026-09-08 に PC 上限へ対応） */
@media (min-width: 720px) {
    .scrix-swipe-footer {
        max-width: min(var(--scrix-swipe-content-max-w, 600px), var(--scrix-swipe-panel-content-w, 100%));
    }

    .scrix-swipe-form-body .scrix-guided-card {
        max-width: min(var(--sgf-card-width), var(--scrix-swipe-content-max-w, 600px));
    }
}

/* スワイプLP テンプレートパネル（media_type='template'・2026-08-28）。
   Builder のプレビュー（Vite で直接 import）と Player（build.mjs が scrix-swipe.css に連結）で
   同じファイルを使う（1ソース・正本 docs/swipe-template-panels-design.md §3）。
   色・フォント・角丸・枠線・影は Player の Runtime / Builder のプレビューが流す CSS 変数
   （--scrix-swipe-*）だけで組む。見た目の見本は tmp/swipe-panel-mock.html / mock2。
   スマホ / PC の出し分けは @media（画面幅 720px・よくある質問と同じ境界。LP の枠は PC でも 480px なので
   @container では一度も PC 扱いにならない・2026-08-29）。
   Builder のプレビューは画面の中の 390px 枠なので、@media では PC 値が勝ってしまう。 */

.scrix-swipe-tpl {
    position: relative;
    box-sizing: border-box;
    /* 中身の幅・余白の切り替えは**このパネルの幅**で判定する（@media だと Builder の
       「スマホ」プレビューでもブラウザ幅で PC 判定になり、公開画面と食い違う・2026-09-02 レビュー指摘） */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    /* Player では縦 flex（.scrix-swipe-form-scroll）の子。min-height を明示すると flex の縮小で
       枠の高さに潰され、はみ出しが切られて「内側に余地なし」= 次のパネルへ送られてしまう。
       縮ませず内容の高さまで伸ばして、外枠にスクロールさせる */
    flex-shrink: 0;
    overflow: hidden;
    background: var(--scrix-swipe-bg, #0f172a);
    color: var(--scrix-swipe-tpl-body-color, var(--scrix-swipe-text, #f8fafc));
    font-family: var(--scrix-swipe-font, sans-serif);
    font-size: var(--scrix-swipe-fs-body, 16px);
    line-height: 1.7;
    --scrix-swipe-tpl-gap: 22px;
    --scrix-swipe-tpl-pad: 40px 24px;
    /* 左右だけの値（max() に渡すため2値の --scrix-swipe-tpl-pad とは別に持つ・2026-09-02） */
    --scrix-swipe-tpl-pad-x: 24px;
    /* 下余白（pad の下値と同値）。padding-bottom はフッター回避で上書きするため別変数で持つ */
    --scrix-swipe-tpl-pad-b: 40px;
}

.scrix-swipe-tpl[data-spacing="sm"] { --scrix-swipe-tpl-gap: 14px; --scrix-swipe-tpl-pad: 24px 18px; --scrix-swipe-tpl-pad-x: 18px; --scrix-swipe-tpl-pad-b: 24px; }
.scrix-swipe-tpl[data-spacing="lg"] { --scrix-swipe-tpl-gap: 30px; --scrix-swipe-tpl-pad: 56px 28px; --scrix-swipe-tpl-pad-x: 28px; --scrix-swipe-tpl-pad-b: 56px; }
.scrix-swipe-tpl[data-align="center"] { text-align: center; }

.scrix-swipe-tpl *,
.scrix-swipe-tpl *::before,
.scrix-swipe-tpl *::after {
    box-sizing: border-box;
}

.scrix-swipe-tpl p,
.scrix-swipe-tpl h2,
.scrix-swipe-tpl ul,
.scrix-swipe-tpl ol {
    margin: 0;
}

.scrix-swipe-tpl ul,
.scrix-swipe-tpl ol {
    padding: 0;
    list-style: none;
}

/* 背景（画像・動画）と色の重ね。文字（body）は z-index で常に上 */
.scrix-swipe-tpl-bg,
.scrix-swipe-tpl-tint {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.scrix-swipe-tpl-bg img,
.scrix-swipe-tpl-bg video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scrix-swipe-tpl-tint {
    background: var(--scrix-swipe-bg, #0f172a);
}

.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-tint {
    background: var(--scrix-swipe-primary, #facc15);
}

/* 内容。上寄せが既定（margin: 0 auto）。中央寄せ（valign=center）は短いときだけ中央・長いときは上から
   （margin: auto の flex 中央寄せ）。
   下余白はフッターの実態に合わせる（2026-08-31。従来は固定 84px で、フッターを表示していない
   LP でも余白のせいに内側スクロールが生まれ「画面に収まっているのに1回のスワイプで進めない」
   違和感になっていた）:
   - 全画面OFF: フッターは stacked（枠自体がフッターの高さぶん縮む）で内容と重ならないため、
     余白は「余白（spacing）の下値 + 計測バナー」だけ
   - 全画面ON（下の [data-fullscreen] 規則）: フッターがオーバーレイで重なるため、Player /
     プレビューが流す実測高（--scrix-swipe-footer-h）+ 16px を空ける。フッターを表示しない
     パネルでは実測高が 0 になり、余白も spacing の下値へ落ちる */
/* タブレット / PC のコンテンツ幅（2026-09-02 やましたさん指示）。**この数値がスワイプLPの正**で、
   テンプレートパネル・よくある質問・フッター・出口フォーム・ページ数のバーが全部これを見る
   （フッターとページ数はパネルの外にあるので scrix-swipe.css / swipe-guide.css から参照する）。
   スマホは 480px（各所の基底値）。
   **720px → 600px（2026-09-10 やましたさん指示）**: 720px では、画面幅が 720〜767px のとき
   フッターの帯が画面いっぱいに広がっていた（上限は画面幅 720px の @media で 480px から切り替わるのに、
   歯止めの --scrix-swipe-panel-content-w = 画像パネルの描画幅 はその範囲ではまだ画面幅と同じで、
   どちらも画面幅になるため）。縦長のタブレット（800×1280 で 87%）でも帯が大きかった。
   600px なら 720px の画面でも左右に 60px ずつ残る。FAQカードのカード幅（600px）とも揃う。
   文字で作るパネルの中身も同じだけ狭くなる（やましたさん確認済み・元から少し広かった） */
:root {
    --scrix-swipe-content-max-w: 600px;
    /* タブレット / PC で最低限確保する左右の余白（余白の設定がこれより大きければそちらを優先） */
    --scrix-swipe-content-pad-x: 32px;
}

.scrix-swipe-tpl-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--scrix-swipe-tpl-gap);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--scrix-swipe-tpl-pad);
    padding-bottom: calc(var(--scrix-swipe-tpl-pad-b) + var(--scrix-swipe-consent-h, 0px));
}

/* タブレット / PC（パネルの幅が 720px 以上）: 中身を広げ、左右の余白を最低限確保する。
   **基底の padding より後ろに置くこと**（前に置くと padding の一括指定に上書きされる） */
@container (min-width: 720px) {
    .scrix-swipe-tpl-body {
        max-width: var(--scrix-swipe-content-max-w, 600px);
        padding-inline: max(var(--scrix-swipe-tpl-pad-x), var(--scrix-swipe-content-pad-x, 32px));
    }
}

/* 全画面表示（フッターを重ねる）はフッターの実測高ぶん空ける。Player は wrap に、Builder のプレビューは
   枠に data-fullscreen と --scrix-swipe-footer-h を流す。運営者情報フッター（2026-09-08）は画像に重ねず
   枠の高さから控除する（scrix-swipe.css の .scrix-swipe-root）ので、ここには足さない */
[data-fullscreen="on"] .scrix-swipe-tpl-body {
    padding-bottom: calc(max(var(--scrix-swipe-tpl-pad-b), var(--scrix-swipe-footer-h, 0px) + 16px) + var(--scrix-swipe-consent-h, 0px));
}

.scrix-swipe-tpl[data-valign="center"] .scrix-swipe-tpl-body {
    margin: auto;
}

.scrix-swipe-tpl-multiline {
    white-space: pre-wrap;
}

/* ---- 見出し（飾りは data-style） ---- */
.scrix-swipe-tpl-hd {
    display: grid;
    gap: 4px;
}

/* 見出しの大きさはテーマの「タイトル」（よくある質問の見出しと同じ・2026-08-29 に一本化） */
.scrix-swipe-tpl-heading {
    font-size: var(--scrix-swipe-fs-title, 20px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--scrix-swipe-tpl-heading-color, inherit);
}

.scrix-swipe-tpl-hd[data-style="underline"] .scrix-swipe-tpl-heading {
    justify-self: start;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="underline"] .scrix-swipe-tpl-heading {
    justify-self: center;
}

.scrix-swipe-tpl-hd[data-style="bar"] .scrix-swipe-tpl-heading {
    padding-left: 14px;
    border-left: 5px solid var(--scrix-swipe-primary, #facc15);
}

/* 中央寄せでは「帯 + 文字」の組ごと中央へ（2026-09-01。underline / fill と同じ justify-self 方式。
   文字は左揃えに戻す = 複数行でも帯と文字の関係が崩れない） */
.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="bar"] .scrix-swipe-tpl-heading {
    justify-self: center;
    text-align: left;
}

.scrix-swipe-tpl-hd[data-style="fill"] .scrix-swipe-tpl-heading {
    justify-self: start;
    padding: 6px 14px;
    border-radius: max(2px, calc(var(--scrix-swipe-card-radius, 6px) / 3));
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-tpl-heading-color, var(--scrix-swipe-on-primary, #111827));
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="fill"] .scrix-swipe-tpl-heading {
    justify-self: center;
}

.scrix-swipe-tpl-eyebrow {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--scrix-swipe-primary, #facc15);
}

/* 英字（帯つき）: 主色の帯に載せる（CTA の主色の地では反転。CTA の節で上書き） */
.scrix-swipe-tpl .scrix-swipe-tpl-hd[data-style="eyebrow_pill"] .scrix-swipe-tpl-eyebrow {
    justify-self: start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-on-primary, #111827);
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="eyebrow_pill"] .scrix-swipe-tpl-eyebrow {
    justify-self: center;
}

/* 英字を背景に: 大きく薄い英字を見出しの後ろに敷く（よくある LP の飾り。長い英字は枠で切る） */
.scrix-swipe-tpl-hd[data-style="eyebrow_big"] {
    position: relative;
    padding-top: 1.2em;
}

.scrix-swipe-tpl .scrix-swipe-tpl-hd[data-style="eyebrow_big"] .scrix-swipe-tpl-eyebrow {
    position: absolute;
    top: -0.15em;
    left: 0;
    right: 0;
    font-size: 2.6em;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.14;
}

.scrix-swipe-tpl-hd[data-style="eyebrow_big"] .scrix-swipe-tpl-heading {
    position: relative;
}

/* マーカー: 文字の下半分に主色の蛍光ペン（color-mix は iOS 16.2 / Chrome 111 以降。非対応では塗りが出ないだけ） */
.scrix-swipe-tpl-hd[data-style="marker"] .scrix-swipe-tpl-heading {
    justify-self: start;
    background: linear-gradient(transparent 55%, color-mix(in srgb, var(--scrix-swipe-primary, #facc15) 45%, transparent) 55%);
    padding: 0 2px;
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="marker"] .scrix-swipe-tpl-heading {
    justify-self: center;
}

/* 枠囲み: 主色の枠で囲む */
.scrix-swipe-tpl-hd[data-style="box"] .scrix-swipe-tpl-heading {
    justify-self: start;
    padding: 8px 14px;
    border: 2px solid var(--scrix-swipe-primary, #facc15);
    border-radius: max(2px, calc(var(--scrix-swipe-card-radius, 6px) / 2));
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="box"] .scrix-swipe-tpl-heading {
    justify-self: center;
}

/* 上に短い線: 見出しの上に主色の短い線 */
.scrix-swipe-tpl-hd[data-style="topline"] .scrix-swipe-tpl-heading::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin-bottom: 10px;
    border-radius: 2px;
    background: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="topline"] .scrix-swipe-tpl-heading::before {
    margin-left: auto;
    margin-right: auto;
}

.scrix-swipe-tpl-hd[data-style="lines"] .scrix-swipe-tpl-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.scrix-swipe-tpl-hd[data-style="lines"] .scrix-swipe-tpl-heading::before,
.scrix-swipe-tpl-hd[data-style="lines"] .scrix-swipe-tpl-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(128, 128, 128, 0.5);
}

.scrix-swipe-tpl-hd[data-style="number"] {
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: baseline;
}

/* 中央寄せでは「番号 + 見出し」の組ごと中央へ（2026-09-01。列を内容幅にして grid ごと中央に置く。
   見出しの文字は左揃えに戻す = 複数行でも番号との並びが崩れない） */
.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="number"] {
    grid-template-columns: auto auto;
    justify-content: center;
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-hd[data-style="number"] .scrix-swipe-tpl-heading {
    text-align: left;
}

.scrix-swipe-tpl-hd-num {
    font-size: 2.5em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--scrix-swipe-primary, #facc15);
    font-variant-numeric: tabular-nums;
}

.scrix-swipe-tpl-lead { opacity: 0.88; }
.scrix-swipe-tpl-cap { font-size: 0.75em; line-height: 1.6; opacity: 0.72; }
.scrix-swipe-tpl-note { font-size: 0.75em; line-height: 1.6; opacity: 0.85; }
.scrix-swipe-tpl-num { font-variant-numeric: tabular-nums; }

.scrix-swipe-tpl-btn {
    display: block;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    border-radius: var(--scrix-swipe-card-radius, 6px);
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-on-primary, #111827);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.scrix-swipe-tpl-btn-sm {
    margin-top: 10px;
    padding: 11px 14px;
    font-size: 0.9em;
}

.scrix-swipe-tpl-btn-xs {
    padding: 10px 2px;
    font-size: 0.75em;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.scrix-swipe-tpl-card {
    background: var(--scrix-swipe-card-bg, rgba(128, 128, 128, 0.08));
    border: var(--scrix-swipe-card-border-width, 1px) solid var(--scrix-swipe-card-border-color, rgba(128, 128, 128, 0.35));
    border-radius: var(--scrix-swipe-card-radius, 6px);
    box-shadow: var(--scrix-swipe-card-shadow, none);
}

.scrix-swipe-tpl-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--scrix-swipe-card-radius, 6px);
    background: rgba(128, 128, 128, 0.12);
}

.scrix-swipe-tpl-media img,
.scrix-swipe-tpl-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scrix-swipe-tpl-media-169 { aspect-ratio: 16 / 9; }
.scrix-swipe-tpl-media-167 { aspect-ratio: 16 / 7; }
.scrix-swipe-tpl-media-sq { aspect-ratio: 1; }
.scrix-swipe-tpl-media-round { aspect-ratio: 1; border-radius: 50%; }

/* 比率「元のまま」（枠の高さを画像に合わせる。aspect-ratio は render.ts が inline で auto にする） */
.scrix-swipe-tpl-media.is-original img,
.scrix-swipe-tpl-media.is-original video {
    height: auto;
}

/* ---- 1. 比較表 / 5. 料金比較表（共通の表。1行 = grid の1行・高さは中身に合わせて伸びる） ---- */
.scrix-swipe-tpl-cmp {
    position: relative;
    isolation: isolate;
    display: grid;
    /* minmax(0, ...) = 長い文字（ボタンの文字など）で列が広がらない。文字は列の中で折り返す */
    grid-template-columns: minmax(0, 1.45fr) repeat(var(--scrix-swipe-tpl-cols, 2), minmax(0, 1fr));
    gap: 0 4px;
    text-align: left;
}

/* 自社（先頭）/ おすすめプランの列の背景。表のマス目にせず、列の位置を計算して敷く */
.scrix-swipe-tpl-cmp-ours {
    position: absolute;
    top: -8px;
    bottom: -8px;
    z-index: -1;
    left: calc(
        (100% - 4px * var(--scrix-swipe-tpl-cols, 2)) * (1.45 + var(--scrix-swipe-tpl-ours, 0)) / (1.45 + var(--scrix-swipe-tpl-cols, 2))
        + 4px * (1 + var(--scrix-swipe-tpl-ours, 0))
    );
    width: calc((100% - 4px * var(--scrix-swipe-tpl-cols, 2)) / (1.45 + var(--scrix-swipe-tpl-cols, 2)));
}

.scrix-swipe-tpl-cmp-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 0.875em;
    line-height: 1.4;
    text-align: center;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.scrix-swipe-tpl-cmp-cell.is-label {
    justify-content: flex-start;
    font-size: 0.8125em;
    text-align: left;
    opacity: 0.85;
}

.scrix-swipe-tpl-cmp-cell.is-head {
    position: relative;
    min-height: 40px;
    font-size: 0.8125em;
    font-weight: 700;
    border-bottom-width: 2px;
    border-bottom-color: rgba(128, 128, 128, 0.6);
}

.scrix-swipe-tpl-cmp-cell.is-head.is-ours {
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-cmp-cell.is-foot {
    padding-top: 12px;
    border-bottom: 0;
}

/* 料金比較表の見出し行: プラン名 + 価格を縦に */
.scrix-swipe-tpl-cmp-cell.is-plan {
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
}

.scrix-swipe-tpl-cmp-cell.is-plan .scrix-swipe-tpl-plan-nm {
    font-size: 0.9em;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.scrix-swipe-tpl-cmp-cell.is-plan .scrix-swipe-tpl-price {
    font-size: 1.3em;
    line-height: 1.1;
}

.scrix-swipe-tpl-cmp-cell.is-plan .scrix-swipe-tpl-price small {
    display: block;
    margin-left: 0;
    font-size: 0.55em;
}

.scrix-swipe-tpl-cmp-cell.is-plan.is-ours .scrix-swipe-tpl-price {
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-cmp-cell.is-plan .scrix-swipe-tpl-badge {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65em;
}

.scrix-swipe-tpl-mark {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1;
}

.scrix-swipe-tpl-mark.is-best,
.scrix-swipe-tpl-mark.is-ok { color: var(--scrix-swipe-primary, #facc15); }
.scrix-swipe-tpl-mark.is-so { opacity: 0.7; }
.scrix-swipe-tpl-mark.is-no,
.scrix-swipe-tpl-mark.is-none { opacity: 0.4; }

/* ---- 2/3. ご利用の流れ ---- */
/* 注釈・備考（全テンプレート共通・一番下） */
.scrix-swipe-tpl-note {
    text-align: left;
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-note {
    text-align: center;
}

.scrix-swipe-tpl-flow-v {
    display: grid;
    text-align: left;
}

.scrix-swipe-tpl-flow-v > li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0 16px;
}

.scrix-swipe-tpl-flow-v .scrix-swipe-tpl-flow-n {
    position: relative;
    display: grid;
    place-items: start center;
}

.scrix-swipe-tpl-flow-v .scrix-swipe-tpl-flow-n b {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-on-primary, #111827);
    font-size: 0.9375em;
    font-weight: 700;
}

.scrix-swipe-tpl-flow-v > li:not(:last-child) .scrix-swipe-tpl-flow-n::after {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--scrix-swipe-primary, #facc15);
    opacity: 0.45;
    transform: translateX(-50%);
}

.scrix-swipe-tpl-flow-b {
    padding: 6px 0 26px;
}

.scrix-swipe-tpl-flow-v > li:last-child .scrix-swipe-tpl-flow-b {
    padding-bottom: 0;
}

.scrix-swipe-tpl-flow-t {
    font-size: 1.0625em;
    font-weight: 700;
    line-height: 1.4;
}

.scrix-swipe-tpl-flow-d {
    margin-top: 4px;
    font-size: 0.875em;
    opacity: 0.8;
}

.scrix-swipe-tpl-flow-v .scrix-swipe-tpl-flow-m {
    margin-top: 10px;
}

/* 横並び: 1行3つ・6つまで。番号は各項目の上端に固定し、右隣へ線を伸ばす（行末は伸ばさない） */
/* 1行3つ・6つまで。中央揃えでは折り返した段も中央に寄る（grid だと2段目が左に寄る） */
.scrix-swipe-tpl-flow-h {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 8px;
}

.scrix-swipe-tpl[data-align="center"] .scrix-swipe-tpl-flow-h {
    justify-content: center;
}

.scrix-swipe-tpl-flow-h > li {
    position: relative;
    width: calc((100% - 16px) / 3);
    display: grid;
    align-content: start;
    gap: 8px;
    justify-items: center;
    text-align: center;
}

.scrix-swipe-tpl-flow-h > li:not(:nth-child(3n)):not(:last-child)::before {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: var(--scrix-swipe-primary, #facc15);
    opacity: 0.45;
}

.scrix-swipe-tpl-flow-h .scrix-swipe-tpl-flow-n {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-on-primary, #111827);
    font-size: 0.9375em;
    font-weight: 700;
}

.scrix-swipe-tpl-flow-h .scrix-swipe-tpl-flow-t {
    font-size: 0.875em;
    line-height: 1.35;
}

.scrix-swipe-tpl-flow-h .scrix-swipe-tpl-flow-d {
    margin-top: 0;
    font-size: 0.75em;
    line-height: 1.5;
}

/* ---- 4. 料金（縦積み） ---- */
.scrix-swipe-tpl-price-v {
    display: grid;
    gap: 12px;
    text-align: left;
}

.scrix-swipe-tpl-plan {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: baseline;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.scrix-swipe-tpl-plan.is-rec {
    padding: 22px 18px 18px;
    border-color: var(--scrix-swipe-primary, #facc15);
    border-width: max(2px, var(--scrix-swipe-card-border-width, 1px));
}

.scrix-swipe-tpl-plan-nm {
    grid-column: 1;
    grid-row: 1;
    font-weight: 700;
}

.scrix-swipe-tpl-plan-sub {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.75em;
    opacity: 0.75;
}

.scrix-swipe-tpl-plan > .scrix-swipe-tpl-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
}

.scrix-swipe-tpl-price {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.scrix-swipe-tpl-price small {
    margin-left: 2px;
    font-size: 0.5em;
    font-weight: 500;
    opacity: 0.8;
}

.scrix-swipe-tpl-plan.is-rec .scrix-swipe-tpl-price {
    font-size: 1.875em;
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-plan-ft {
    display: grid;
    grid-column: 1 / -1;
    gap: 3px 12px;
    margin-top: 8px;
    font-size: 0.8125em;
    opacity: 0.85;
}

.scrix-swipe-tpl-plan-ft.is-2col {
    grid-template-columns: 1fr 1fr;
}

.scrix-swipe-tpl-plan-ft li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 2px 0;
    border-radius: 1px;
    background: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-plan > .scrix-swipe-tpl-btn {
    grid-column: 1 / -1;
}

.scrix-swipe-tpl-badge {
    position: absolute;
    top: -12px;
    left: 16px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-on-primary, #111827);
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ---- 6. 料金（タブ型） ---- */
.scrix-swipe-tpl-tabs {
    display: flex;
    gap: 6px;
}

/* Player では button・Builder のその場編集では div（タブの文字 = プラン名をタブの中で書き換える） */
.scrix-swipe-tpl-tab {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid var(--scrix-swipe-card-border-color, rgba(128, 128, 128, 0.35));
    border-radius: var(--scrix-swipe-card-radius, 6px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8125em;
    font-weight: 700;
    cursor: pointer;
}

.scrix-swipe-tpl-tab.is-on {
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-on-primary, #111827);
    border-color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-plan-big {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 22px 18px 18px;
    text-align: left;
}

/* タブで選ばれていないプランは hidden 属性で隠す（display: grid が UA の hidden に勝つため明示） */
.scrix-swipe-tpl-plan-big[hidden] {
    display: none;
}

.scrix-swipe-tpl-plan-big .scrix-swipe-tpl-plan-nm {
    font-size: 1.125em;
}

.scrix-swipe-tpl-plan-big .scrix-swipe-tpl-price {
    font-size: 2.125em;
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-plan-big .scrix-swipe-tpl-plan-ft {
    margin-top: 0;
    font-size: 0.875em;
}

/* ---- 7/8. 運営者・監修者 ---- */
.scrix-swipe-tpl-who-l {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 16px;
    align-items: center;
    text-align: left;
}

.scrix-swipe-tpl-who-l.is-no-media {
    grid-template-columns: 1fr;
}

.scrix-swipe-tpl-who-t {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
}

.scrix-swipe-tpl-who-t .scrix-swipe-tpl-media {
    width: 128px;
    margin-bottom: 10px;
}

.scrix-swipe-tpl-who-role {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-who-nm {
    margin-top: 2px;
    font-size: 1.375em;
    font-weight: 700;
    line-height: 1.3;
}

.scrix-swipe-tpl-who-nm small {
    margin-left: 8px;
    font-size: 0.55em;
    font-weight: 500;
    opacity: 0.75;
}

.scrix-swipe-tpl-who-ttl {
    margin-top: 4px;
    font-size: 0.8125em;
    line-height: 1.5;
    opacity: 0.8;
}

.scrix-swipe-tpl-who-bio {
    font-size: 0.875em;
    opacity: 0.88;
}

/* ---- 9. CTA・オファー（既定の地は主色の塗り = data-surface="primary"。枠線 / 帯＋カード / 画像つきは
   テーマの背景色 = data-surface="theme"。地は render.ts が data-surface に書く） ---- */
.scrix-swipe-tpl[data-kind="cta"] {
    text-align: center;
}

.scrix-swipe-tpl[data-surface="primary"] {
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-tpl-body-color, var(--scrix-swipe-on-primary, #111827));
}

.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-btn {
    background: var(--scrix-swipe-on-primary, #111827);
    color: var(--scrix-swipe-primary, #facc15);
}

/* 主色の地では、見出しデザイン・リストの印の主色が地に溶ける。文字色（主色の上の色）に反転する。
   見出しデザインを増やしたら、主色を使うものはここにも足すこと（足し忘れると主色の地で見えない） */
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-eyebrow,
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd-num {
    color: inherit;
    opacity: 0.9;
}

.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="underline"] .scrix-swipe-tpl-heading,
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="bar"] .scrix-swipe-tpl-heading,
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="box"] .scrix-swipe-tpl-heading {
    border-color: currentColor;
}

.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="fill"] .scrix-swipe-tpl-heading {
    background: var(--scrix-swipe-on-primary, #111827);
    color: var(--scrix-swipe-tpl-heading-color, var(--scrix-swipe-primary, #facc15));
}

.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="eyebrow_pill"] .scrix-swipe-tpl-eyebrow {
    background: var(--scrix-swipe-on-primary, #111827);
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="marker"] .scrix-swipe-tpl-heading {
    background: linear-gradient(transparent 55%, color-mix(in srgb, var(--scrix-swipe-on-primary, #111827) 35%, transparent) 55%);
}

.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="topline"] .scrix-swipe-tpl-heading::before,
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="lines"] .scrix-swipe-tpl-heading::before,
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-hd[data-style="lines"] .scrix-swipe-tpl-heading::after {
    background: currentColor;
}

.scrix-swipe-tpl-kicker {
    font-size: 0.9375em;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.scrix-swipe-tpl-big {
    font-size: 4em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* 旧価格（打ち消し線）→ 新価格 */
.scrix-swipe-tpl-price-cmp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}

.scrix-swipe-tpl[data-align="left"] .scrix-swipe-tpl-price-cmp {
    justify-content: flex-start;
}

.scrix-swipe-tpl-price-old {
    font-size: 1.375em;
    opacity: 0.7;
    text-decoration-thickness: 2px;
}

.scrix-swipe-tpl-price-arrow {
    font-size: 1.25em;
    opacity: 0.8;
}

.scrix-swipe-tpl-price-new {
    font-size: 3em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* CTA の6パターン = 置き場の型（文字の置き場は同じ。地・枠・並びだけ変える・2026-08-29） */
/* テーマの地の CTA（枠線 / 帯＋カード / 画像つき）: 大きな数字・新価格を主色で強調する */
.scrix-swipe-tpl[data-kind="cta"][data-surface="theme"] .scrix-swipe-tpl-big,
.scrix-swipe-tpl[data-kind="cta"][data-surface="theme"] .scrix-swipe-tpl-price-new {
    color: var(--scrix-swipe-primary, #facc15);
}

/* 画像つき（画像の位置 = 左 / 右）: 画像（幅の 38%）と文字を横に並べ、ボタンは下いっぱい */
.scrix-swipe-tpl-cta-mside {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.scrix-swipe-tpl-cta-mside[data-placement="right"] {
    flex-direction: row-reverse;
}

.scrix-swipe-tpl-cta-mside > .scrix-swipe-tpl-media {
    flex: 0 0 38%;
}

.scrix-swipe-tpl-cta-mside > div:not(.scrix-swipe-tpl-media) {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 6px;
}

.scrix-swipe-tpl-cta-mside .scrix-swipe-tpl-price-cmp {
    justify-content: flex-start;
}

/* 画像重ね: 文字のカードを画像（16:9）に重ねる。data-placement は**画像の位置**（上 = 画像が上にあり、
   カードが下から重なって画像の上 1/4 が見える / 下 = その逆 / 左 = 画像が左に見え、カードは右に寄る /
   右 = その逆 / 中央 = 画像をカードの真ん中に置き、左右に少し見える）。画像の 3/4 ほどがカードの下に入る。
   14% = 画像の高さ（幅の 56.25%）の 1/4 */
.scrix-swipe-tpl-cta-overlay {
    display: grid;
}

.scrix-swipe-tpl-cta-overlay > .scrix-swipe-tpl-media,
.scrix-swipe-tpl-cta-overlay > .scrix-swipe-tpl-cta-card {
    grid-area: 1 / 1;
}

.scrix-swipe-tpl-cta-overlay > .scrix-swipe-tpl-cta-card {
    position: relative;
    z-index: 1;
    width: 100%;
    /* カードを透かして、重なった画像が文字の下にうっすら見えるようにする（すりガラス）。
       color-mix 非対応の古い環境ではテーマの背景色で不透明 */
    background: var(--scrix-swipe-bg, #0f172a);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .scrix-swipe-tpl-cta-overlay > .scrix-swipe-tpl-cta-card {
        background: color-mix(in srgb, var(--scrix-swipe-bg, #0f172a) 72%, transparent);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

.scrix-swipe-tpl-cta-overlay[data-placement="top"] > .scrix-swipe-tpl-media { align-self: start; }
.scrix-swipe-tpl-cta-overlay[data-placement="top"] > .scrix-swipe-tpl-cta-card { align-self: end; margin-top: 14%; }
.scrix-swipe-tpl-cta-overlay[data-placement="bottom"] > .scrix-swipe-tpl-media { align-self: end; }
.scrix-swipe-tpl-cta-overlay[data-placement="bottom"] > .scrix-swipe-tpl-cta-card { align-self: start; margin-bottom: 14%; }
.scrix-swipe-tpl-cta-overlay[data-placement="left"] > .scrix-swipe-tpl-media,
.scrix-swipe-tpl-cta-overlay[data-placement="right"] > .scrix-swipe-tpl-media,
.scrix-swipe-tpl-cta-overlay[data-placement="center"] > .scrix-swipe-tpl-media { align-self: center; }
.scrix-swipe-tpl-cta-overlay[data-placement="left"] > .scrix-swipe-tpl-cta-card { width: 75%; justify-self: end; align-self: center; }
.scrix-swipe-tpl-cta-overlay[data-placement="right"] > .scrix-swipe-tpl-cta-card { width: 75%; justify-self: start; align-self: center; }
.scrix-swipe-tpl-cta-overlay[data-placement="center"] > .scrix-swipe-tpl-cta-card { width: 86%; justify-self: center; align-self: center; }

/* 丸バッジ: 大きな数字（または新価格）を円形のバッジに */
.scrix-swipe-tpl[data-template="cta_badge"] .scrix-swipe-tpl-big,
.scrix-swipe-tpl[data-template="cta_badge"] .scrix-swipe-tpl-price-new {
    display: grid;
    place-items: center;
    width: 8em;
    height: 8em;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--scrix-swipe-on-primary, #111827);
    color: var(--scrix-swipe-primary, #facc15);
    font-size: 1.6em;
    letter-spacing: -0.02em;
    text-align: center;
}

.scrix-swipe-tpl[data-template="cta_badge"][data-align="left"] .scrix-swipe-tpl-big,
.scrix-swipe-tpl[data-template="cta_badge"][data-align="left"] .scrix-swipe-tpl-price-new {
    margin-left: 0;
}

/* 横並び: 文字を左・ボタンを右（狭い幅ではボタンが下に折り返す） */
.scrix-swipe-tpl[data-template="cta_side"] {
    text-align: left;
}

.scrix-swipe-tpl-cta-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.scrix-swipe-tpl-cta-side > div {
    flex: 1 1 150px;
    min-width: 0;
    display: grid;
    gap: 8px;
}

/* ボタンは文字の幅（block・width:100% の既定を戻す） */
.scrix-swipe-tpl-cta-side .scrix-swipe-tpl-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 13px 22px;
    white-space: nowrap;
}

.scrix-swipe-tpl[data-template="cta_side"] .scrix-swipe-tpl-price-cmp {
    justify-content: flex-start;
}

/* 中身を包むカード（枠線 = 主色の太い枠・帯 = テーマのカード） */
.scrix-swipe-tpl-cta-card {
    display: grid;
    gap: var(--scrix-swipe-tpl-gap);
    padding: 28px 20px;
}

.scrix-swipe-tpl[data-template="cta_outline"] .scrix-swipe-tpl-cta-card {
    background: transparent;
    border: 3px solid var(--scrix-swipe-primary, #facc15);
    box-shadow: none;
}

.scrix-swipe-tpl[data-template="cta_band"] {
    border-top: 14px solid var(--scrix-swipe-primary, #facc15);
    border-bottom: 14px solid var(--scrix-swipe-primary, #facc15);
}

/* 数字が主役: 大きな数字（または新価格）を特大にし、見出しは控えめに */
.scrix-swipe-tpl[data-template="cta_figure"] .scrix-swipe-tpl-big {
    font-size: 5.5em;
}

.scrix-swipe-tpl[data-template="cta_figure"] .scrix-swipe-tpl-price-new {
    font-size: 4em;
}

.scrix-swipe-tpl[data-template="cta_figure"] .scrix-swipe-tpl-heading {
    font-size: 1.125em;
    font-weight: 600;
}

/* 特典リスト（印の色は data-surface の規則に従う） */
.scrix-swipe-tpl-cta-list {
    justify-self: center;
    text-align: left;
}

/* ---- 10/11. 訴求文（リストの印は data-list-style） ---- */
.scrix-swipe-tpl-chk {
    display: grid;
    gap: 12px;
    text-align: left;
}

.scrix-swipe-tpl-chk > li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    line-height: 1.55;
}

.scrix-swipe-tpl-chk-mk {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    color: var(--scrix-swipe-primary, #facc15);
    font-weight: 700;
}

.scrix-swipe-tpl[data-list-style="check"] .scrix-swipe-tpl-chk-mk {
    border: 2px solid var(--scrix-swipe-primary, #facc15);
    border-radius: max(2px, calc(var(--scrix-swipe-card-radius, 6px) / 4));
}

/* チェックは絶対配置にせず、印（grid・中央寄せ）の中央に置く（丸チェックと同じ描き方） */
.scrix-swipe-tpl[data-list-style="check"] .scrix-swipe-tpl-chk-mk::after {
    content: "";
    width: 5px;
    height: 10px;
    border: solid var(--scrix-swipe-primary, #facc15);
    border-width: 0 2.5px 2.5px 0;
    transform: translateY(-1px) rotate(45deg);
}

.scrix-swipe-tpl[data-list-style="cross"] .scrix-swipe-tpl-chk-mk::after {
    content: "✕";
    font-size: 1.125em;
    color: #e5484d;
}

.scrix-swipe-tpl[data-list-style="number"] .scrix-swipe-tpl-chk-mk {
    border-radius: 50%;
    background: var(--scrix-swipe-primary, #facc15);
    color: var(--scrix-swipe-on-primary, #111827);
    font-size: 0.75em;
}

.scrix-swipe-tpl[data-list-style="dot"] .scrix-swipe-tpl-chk-mk::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl[data-list-style="arrow"] .scrix-swipe-tpl-chk-mk::after {
    content: "→";
    font-size: 1em;
}

.scrix-swipe-tpl[data-list-style="star"] .scrix-swipe-tpl-chk-mk::after {
    content: "★";
    font-size: 1.05em;
}

/* 丸チェック: 主色の丸に、主色の上の色のチェック */
.scrix-swipe-tpl[data-list-style="check_circle"] .scrix-swipe-tpl-chk-mk {
    border-radius: 50%;
    background: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl[data-list-style="check_circle"] .scrix-swipe-tpl-chk-mk::after {
    content: "";
    width: 5px;
    height: 10px;
    border: solid var(--scrix-swipe-on-primary, #111827);
    border-width: 0 2.5px 2.5px 0;
    /* チェックの見た目の重心は下寄りなので、少し上にずらして丸の真ん中に見せる */
    transform: translateY(-1px) rotate(45deg);
}

.scrix-swipe-tpl[data-list-style="dash"] .scrix-swipe-tpl-chk-mk::after {
    content: "";
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--scrix-swipe-primary, #facc15);
}

/* 主色の地（data-surface="primary" の CTA）では印の主色が地に溶けるので文字色に反転する。
   上の各印の描画規則より後に置く（同じ強さの規則は後に書いた方が勝つ。前に置くとチェックが消える） */
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-chk-mk,
.scrix-swipe-tpl[data-surface="primary"] .scrix-swipe-tpl-chk-mk::after {
    color: inherit;
    border-color: currentColor;
}

.scrix-swipe-tpl[data-surface="primary"][data-list-style="number"] .scrix-swipe-tpl-chk-mk,
.scrix-swipe-tpl[data-surface="primary"][data-list-style="check_circle"] .scrix-swipe-tpl-chk-mk {
    background: var(--scrix-swipe-on-primary, #111827);
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl[data-surface="primary"][data-list-style="check_circle"] .scrix-swipe-tpl-chk-mk::after {
    border-color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl[data-surface="primary"][data-list-style="dot"] .scrix-swipe-tpl-chk-mk::after,
.scrix-swipe-tpl[data-surface="primary"][data-list-style="dash"] .scrix-swipe-tpl-chk-mk::after {
    background: currentColor;
}

.scrix-swipe-tpl-rule {
    height: 1px;
    background: rgba(128, 128, 128, 0.3);
}

/* ---- 12/13. お客様の声 ---- */
.scrix-swipe-tpl-voice {
    display: grid;
    gap: 20px;
    text-align: left;
}

.scrix-swipe-tpl-bub {
    position: relative;
    padding: 16px 18px;
    font-size: 0.9375em;
}

/* 尻尾。カード背景が半透明のプリセットでも吹き出しの下辺の枠線が透けないよう、
   地色を敷いた上にカード背景を重ねる（吹き出し本体と同じ合成結果にする） */
.scrix-swipe-tpl-bub::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 26px;
    width: 16px;
    height: 16px;
    background: linear-gradient(var(--scrix-swipe-card-bg, rgba(128, 128, 128, 0.08)), var(--scrix-swipe-card-bg, rgba(128, 128, 128, 0.08))), var(--scrix-swipe-bg, #0f172a);
    border-right: var(--scrix-swipe-card-border-width, 1px) solid var(--scrix-swipe-card-border-color, rgba(128, 128, 128, 0.35));
    border-bottom: var(--scrix-swipe-card-border-width, 1px) solid var(--scrix-swipe-card-border-color, rgba(128, 128, 128, 0.35));
    transform: rotate(45deg);
}

.scrix-swipe-tpl-who2 {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding-left: 4px;
}

.scrix-swipe-tpl-av {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
}

.scrix-swipe-tpl-av-initial {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.2);
    font-size: 1.125em;
    font-weight: 700;
    opacity: 0.8;
}

.scrix-swipe-tpl-nm2 {
    font-size: 0.8125em;
    font-weight: 700;
    line-height: 1.3;
}

.scrix-swipe-tpl-at {
    font-size: 0.75em;
    line-height: 1.3;
    opacity: 0.72;
}

.scrix-swipe-tpl-vcard {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
}

.scrix-swipe-tpl-vcard .scrix-swipe-tpl-who2 {
    margin-top: 2px;
    padding-left: 0;
}

.scrix-swipe-tpl-stars {
    font-size: 0.875em;
    letter-spacing: 0.12em;
    line-height: 1;
    color: var(--scrix-swipe-primary, #facc15);
}

.scrix-swipe-tpl-q {
    font-size: 0.9375em;
    font-weight: 700;
    line-height: 1.5;
}

.scrix-swipe-tpl-tx {
    font-size: 0.875em;
    opacity: 0.85;
}

/* ---- 8. よくある質問（開閉式・faq_accordion）。旧 media_type='accordion' の CSS
   （scrix-swipe.css）から移設して1ソース化（2026-08-31）。カードの枠・影・角丸は
   .scrix-swipe-tpl-card（テーマの card 変数）。質問・回答はテーマの「本文」サイズ
   （.scrix-swipe-tpl の font-size に従う）。質問の太字と回答の薄めは、サイズを揃えても
   質問と回答の見分けが付くように維持する ---- */
.scrix-swipe-tpl-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* タブレット / PC（パネルの幅が 720px 以上）: 中身を広げる。**基底の max-width より後ろに置くこと**
   （上の .scrix-swipe-tpl-body と同じ規則をファイル前半の @container にも書いていたが、
   この基底が後ろにあるぶん後勝ちして 480px のままだった・2026-09-10 に発見して移設） */
@container (min-width: 720px) {
    .scrix-swipe-tpl-faq {
        max-width: var(--scrix-swipe-content-max-w, 600px);
    }
}

/* 角丸から中身（開いた回答の地）がはみ出さない */
.scrix-swipe-tpl-faq-item {
    overflow: hidden;
}

/* 中央寄せ（data-align="center"）でも質問・回答は左揃えのまま（開閉リストの読みやすさ優先・
   旧実装と同じ）。editable では div（role=button）になるため button のリセットも兼ねる */
.scrix-swipe-tpl-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

/* 質問の文字。残り幅を占めて、1行に収まらないときは折り返して全文を見せる
   （flex の子は既定で内容幅。min-width を 0 にしないと縮まず、アイコンを押し出す） */
.scrix-swipe-tpl-faq-label {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 開閉アイコン（4種・layout.faq_icon = data-icon で描き分け・2026-09-01）。
   画像を持たない（線・三角と回転だけで描く）ので追加の読み込みが無い。
   plus   = ＋（開くと縦棒が消えて −）
   chevron = ＞（開くと 90度回って下向き）
   caret  = ∨（開くと 180度回って上向き）
   triangle = ▶（開くと 90度回って ▼・塗りの三角） */
.scrix-swipe-tpl-faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.scrix-swipe-tpl-faq-icon[data-icon="plus"]::before,
.scrix-swipe-tpl-faq-icon[data-icon="plus"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--scrix-swipe-primary, #38bdf8);
    transform: translateY(-50%);
    transition: transform 180ms ease, opacity 180ms ease;
}

.scrix-swipe-tpl-faq-icon[data-icon="plus"]::after {
    transform: translateY(-50%) rotate(90deg);
}

.scrix-swipe-tpl-faq-item.is-open .scrix-swipe-tpl-faq-icon[data-icon="plus"]::after {
    opacity: 0;
    transform: translateY(-50%) rotate(0deg);
}

/* ＞ / ∨ は 2辺 border の 45度回転で描く（初回スワイプヒントの矢印と同じ手法） */
.scrix-swipe-tpl-faq-icon[data-icon="chevron"]::before,
.scrix-swipe-tpl-faq-icon[data-icon="caret"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--scrix-swipe-primary, #38bdf8);
    border-right: 2px solid var(--scrix-swipe-primary, #38bdf8);
    transition: transform 180ms ease;
}

/* ＞（右向き）。開くと下向き（+90度） */
.scrix-swipe-tpl-faq-icon[data-icon="chevron"]::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.scrix-swipe-tpl-faq-item.is-open .scrix-swipe-tpl-faq-icon[data-icon="chevron"]::before {
    transform: translate(-50%, -70%) rotate(135deg);
}

/* ∨（下向き）。開くと上向き（180度） */
.scrix-swipe-tpl-faq-icon[data-icon="caret"]::before {
    transform: translate(-50%, -70%) rotate(135deg);
}

.scrix-swipe-tpl-faq-item.is-open .scrix-swipe-tpl-faq-icon[data-icon="caret"]::before {
    transform: translate(-50%, -30%) rotate(-45deg);
}

/* ▶（塗りつぶし三角・右向き）。開くと ▼（90度回転）。border で描く */
.scrix-swipe-tpl-faq-icon[data-icon="triangle"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--scrix-swipe-primary, #38bdf8);
    transform: translate(-50%, -50%);
    transition: transform 180ms ease;
}

.scrix-swipe-tpl-faq-item.is-open .scrix-swipe-tpl-faq-icon[data-icon="triangle"]::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたときだけ短く走る（hidden = display:none から復帰した瞬間に発火する）。
   閉じる側にアニメーションが無いのは意図的 — 閉じる動きを付けるには高さを JS で測って
   保持する必要があり、内容量に依存して破綻しやすいため、開く側だけの割り切りにしている。 */
.scrix-swipe-tpl-faq-a {
    padding: 0 16px 14px;
    animation: scrix-swipe-tpl-faq-open 180ms ease;
}

.scrix-swipe-tpl-faq-text {
    margin: 0;
    line-height: 1.7;
    text-align: left;
    opacity: 0.9;
}

@keyframes scrix-swipe-tpl-faq-open {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- PC（画面幅 720px 以上）。見出し・本文の PC 値を勝たせる（Builder のプレビューは両方の変数に
   表示中の端末の値を入れるので、どちらが勝っても同じ） ---- */
@media (min-width: 720px) {
    .scrix-swipe-tpl {
        font-size: var(--scrix-swipe-fs-body-desktop, 16px);
    }

    .scrix-swipe-tpl-heading {
        font-size: var(--scrix-swipe-fs-title-desktop, 20px);
    }
}

/* ---- Builder のその場編集（editable のときだけ）。よくある質問のプレビュー編集（data-scrix-accordion-editor・
   2026-08-29）も同じ見た目 ---- */
.scrix-swipe-tpl[data-editable] {
    position: relative;
}

/* 比較表のセルの記号の選択肢（edit.ts が出す。Builder の UI 色で固定 = テーマに染めない） */
.scrix-swipe-tpl-markpick {
    position: absolute;
    z-index: 5;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 16px;
    line-height: 1;
}

.scrix-swipe-tpl-markpick button {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.scrix-swipe-tpl-markpick button:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.scrix-swipe-tpl[data-editable] [data-scrix-slot],
[data-scrix-accordion-editor] [data-scrix-slot] {
    min-width: 1ch;
    outline: none;
    cursor: text;
}

.scrix-swipe-tpl[data-editable] [data-scrix-slot]:hover,
[data-scrix-accordion-editor] [data-scrix-slot]:hover {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45);
}

.scrix-swipe-tpl[data-editable] [data-scrix-slot]:focus,
[data-scrix-accordion-editor] [data-scrix-slot]:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.8);
}

.scrix-swipe-tpl[data-editable] [data-scrix-slot]:empty::before,
[data-scrix-accordion-editor] [data-scrix-slot]:empty::before {
    content: attr(data-placeholder);
    opacity: 0.45;
    pointer-events: none;
}

.scrix-swipe-tpl-media-ph {
    display: grid;
    place-items: center;
    border: 1px dashed rgba(128, 128, 128, 0.6);
    cursor: pointer;
}

.scrix-swipe-tpl-media-ph-label {
    font-size: 0.75em;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.scrix-swipe-tpl[data-editable] .scrix-swipe-tpl-media:not(.scrix-swipe-tpl-media-ph) {
    cursor: pointer;
}

.scrix-swipe-tpl-btn-ph {
    background: transparent;
    color: inherit;
    border: 1px dashed rgba(128, 128, 128, 0.6);
    opacity: 0.7;
}

.scrix-swipe-tpl[data-editable] .scrix-swipe-tpl-btn {
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .scrix-swipe-tpl-bg video,
    .scrix-swipe-tpl-media video {
        animation: none;
    }

    .scrix-swipe-tpl-faq-a {
        animation: none;
    }

    .scrix-swipe-tpl-faq-icon::before,
    .scrix-swipe-tpl-faq-icon::after {
        transition: none;
    }
}

/* スワイプLP の「見る人への誘導」の見た目（このファイルが正典・2026-09-01）。
   - 初回スワイプヒント（.scrix-swipe-hint・デザイン7種 = data-style）
   - ページ数表示（.scrix-swipe-page-counter・デザイン3種 = data-style）
   Player は build.mjs がこのファイルを dist/scrix-swipe.css へ連結し、Builder は
   設定パネルの見本とプレビューが import する（swipe-templates.css と同じ1ソース方式。
   見た目を inline スタイルで写さない）。
   向きは data-dir（vertical = 上へ / horizontal = 左へ）。 */

/* ---- ページ数表示 ---- */

.scrix-swipe-page-counter {
    position: absolute;
    z-index: 40;
    pointer-events: none;
}

/* 数字（number）: 右上の半透明ピル。コンテンツ・フッターと干渉しない定番位置。
   数字は桁が変わっても幅が揺れないよう tabular-nums */
.scrix-swipe-page-counter[data-style="number"] {
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.45);
    color: #fff;
    font-family: var(--scrix-swipe-font, sans-serif);
    font-size: 12px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* バー（ページ数分・bars）: ストーリーズ風のセグメント。現在ページまでが塗られる。
   縦LP = 画面の右端に縦へ並ぶ / 横LP = 上端に横へ並ぶ（PC ではコンテンツ幅の中央に収める —
   画面いっぱいに伸ばさない・2026-09-01。幅はスマホ 480px / PC は --scrix-swipe-content-max-w（600px）= テンプレートパネルの
   中身と同じ・2026-09-02） */
.scrix-swipe-page-counter[data-style="bars"] {
    display: flex;
    gap: 4px;
}

.scrix-swipe-page-counter[data-style="bars"][data-dir="vertical"] {
    top: 10px;
    bottom: 10px;
    right: 6px;
    flex-direction: column;
}

.scrix-swipe-page-counter[data-style="bars"][data-dir="horizontal"] {
    top: 6px;
    left: max(10px, calc(50% - 240px));
    right: max(10px, calc(50% - 240px));
    flex-direction: row;
}

.scrix-swipe-page-counter-seg {
    flex: 1 1 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.25);
}

.scrix-swipe-page-counter[data-style="bars"][data-dir="vertical"] .scrix-swipe-page-counter-seg {
    width: 3px;
}

.scrix-swipe-page-counter[data-style="bars"][data-dir="horizontal"] .scrix-swipe-page-counter-seg {
    height: 3px;
}

.scrix-swipe-page-counter-seg.is-done {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 3px rgba(15, 23, 42, 0.35);
}

/* バー（1本・progress）: 見た割合だけ塗りが伸びる細いバー。位置は bars と同じ */
.scrix-swipe-page-counter[data-style="progress"] {
    background: rgba(15, 23, 42, 0.25);
    border-radius: 999px;
}

.scrix-swipe-page-counter[data-style="progress"][data-dir="vertical"] {
    top: 10px;
    bottom: 10px;
    right: 6px;
    width: 3px;
}

.scrix-swipe-page-counter[data-style="progress"][data-dir="horizontal"] {
    top: 6px;
    left: max(10px, calc(50% - 240px));
    right: max(10px, calc(50% - 240px));
    height: 3px;
}

.scrix-swipe-page-counter-fill {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 3px rgba(15, 23, 42, 0.35);
    transition: width 300ms ease, height 300ms ease;
}

.scrix-swipe-page-counter[data-style="progress"][data-dir="vertical"] .scrix-swipe-page-counter-fill {
    width: 100%;
}

.scrix-swipe-page-counter[data-style="progress"][data-dir="horizontal"] .scrix-swipe-page-counter-fill {
    height: 100%;
}

/* ---- 初回スワイプヒント ---- */

/* 「半透明の角丸の箱」を1つ出し、その中に指や文字を入れる（位置は data-pos の5択）
   （箱は1つだけ・指1本ずつを丸で囲わない・2026-09-01 やましたさん指定）。
   消えるまでの時間は5択（2 / 4 / 6 / 8秒 / 消さない・display_settings.swipe_hint_duration）。
   時間つきは「時間が来る or 最初の操作」で、「消さない」は次のパネルに進んだときに消える
   （出す・消すは player-runtime/swipe-guide/hint.ts の mountSwipeHintEl が単一ソース）。
   デザイン7種（data-style）:
   slide = スーッと動く（既定）/ bounce = 弾む / tap = タップして払う / ripple = 波紋つき /
   text = 文字つき / chevrons = 矢印3連 / flow = 流れる指。
   指は塗りつぶしの指差し手（hint.ts の SVG）。
   data-dir は指の向きと動きの向きを変える（vertical = 指先上・上へ / horizontal = 👈・左へ） */
.scrix-swipe-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 40;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 72px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0.95;
    transition: opacity 400ms ease;
    color: #fff;
    font-family: var(--scrix-swipe-font, sans-serif);
}

.scrix-swipe-hint.is-hidden {
    opacity: 0;
}

/* 表示位置（data-pos・2026-09-01。中央左 / 中央右は 2026-09-02 追加）。
   中央だとパネルの見出し・本文と重なるため、上下と左右へ逃がせる（5択） */
.scrix-swipe-hint[data-pos="top"] {
    top: 22%;
}

.scrix-swipe-hint[data-pos="bottom"] {
    top: 78%;
}

/* 中央左 / 中央右（2026-09-02）: 上下は中央のまま、左右に寄せる。
   translate(-50%, -50%) で中心を合わせているので、left が「中心を置く位置」になる */
.scrix-swipe-hint[data-pos="center_left"] {
    left: 25%;
}

.scrix-swipe-hint[data-pos="center_right"] {
    left: 75%;
}

/* 指のアイコン。縦LP = 指先が上（上にスワイプするので上を指す）/
   横LP = 👈（人差し指が左・親指が上の自然な手。素材は指先が上なので、-90度回してから
   上下を反転する — 回転だけだと親指が下の逆さの手になる） */
.scrix-swipe-hint-finger {
    display: block;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* 動きの舞台（指が動く範囲）。どのデザインでも同じ大きさにして、
   半透明の箱の大きさが揃うようにする。動きはこの箱ごと動く */
.scrix-swipe-hint-move,
.scrix-swipe-hint-bounce,
.scrix-swipe-hint-tap,
.scrix-swipe-hint-drift,
.scrix-swipe-hint-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-finger {
    transform: scaleY(-1) rotate(-90deg);
}

/* 1. スーッと動く（slide・既定）と文字つき（text）の指: 進行方向へ滑らかに流れて消える */
.scrix-swipe-hint-move {
    animation: scrix-swipe-hint-slide-v 1.6s ease-in-out infinite;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-move {
    animation-name: scrix-swipe-hint-slide-h;
}

@keyframes scrix-swipe-hint-slide-v {
    0% {
        transform: translateY(16px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        transform: translateY(-16px);
        opacity: 1;
    }
    100% {
        transform: translateY(-24px);
        opacity: 0;
    }
}

@keyframes scrix-swipe-hint-slide-h {
    0% {
        transform: translateX(16px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        transform: translateX(-16px);
        opacity: 1;
    }
    100% {
        transform: translateX(-24px);
        opacity: 0;
    }
}

/* 2. 弾む（bounce）: その場で進行方向にぽんぽん弾む（消えずに居続ける） */
.scrix-swipe-hint-bounce {
    animation: scrix-swipe-hint-bounce-v 1.3s ease-in-out infinite;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-bounce {
    animation-name: scrix-swipe-hint-bounce-h;
}

@keyframes scrix-swipe-hint-bounce-v {
    0%, 100% {
        transform: translateY(6px);
    }
    50% {
        transform: translateY(-14px);
    }
}

@keyframes scrix-swipe-hint-bounce-h {
    0%, 100% {
        transform: translateX(6px);
    }
    50% {
        transform: translateX(-14px);
    }
}

/* 3. タップして払う（tap）: 指が一瞬沈んで（タップ）から進行方向へ払う */
.scrix-swipe-hint-tap {
    animation: scrix-swipe-hint-tap-v 1.8s ease-in-out infinite;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-tap {
    animation-name: scrix-swipe-hint-tap-h;
}

@keyframes scrix-swipe-hint-tap-v {
    0% {
        transform: translateY(10px) scale(1);
        opacity: 0;
    }
    15% {
        transform: translateY(10px) scale(1);
        opacity: 1;
    }
    30% {
        transform: translateY(10px) scale(0.85);
    }
    45% {
        transform: translateY(10px) scale(1);
    }
    80% {
        transform: translateY(-18px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-26px);
        opacity: 0;
    }
}

@keyframes scrix-swipe-hint-tap-h {
    0% {
        transform: translateX(10px) scale(1);
        opacity: 0;
    }
    15% {
        transform: translateX(10px) scale(1);
        opacity: 1;
    }
    30% {
        transform: translateX(10px) scale(0.85);
    }
    45% {
        transform: translateX(10px) scale(1);
    }
    80% {
        transform: translateX(-18px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-26px);
        opacity: 0;
    }
}

/* 4. 波紋つき（ripple）: 指先に波紋が出てから進行方向へすっと動く */
.scrix-swipe-hint-drift {
    position: relative;
    animation: scrix-swipe-hint-drift-v 1.8s ease-in-out infinite;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-drift {
    animation-name: scrix-swipe-hint-drift-h;
}

/* 波紋の輪。指先の位置（縦 = 手の上・横 = 手の左）に重ねる。
   位置は舞台 72px・指 40px 前提の手調整（どちらかを変えたらここも見直す） */
.scrix-swipe-hint-ring {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    animation: scrix-swipe-hint-ripple 1.8s ease-out infinite;
}

.scrix-swipe-hint[data-dir="vertical"] .scrix-swipe-hint-ring {
    top: 7px;
    left: 50%;
    margin-left: -13px;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-ring {
    left: 7px;
    top: 50%;
    margin-top: -13px;
}

@keyframes scrix-swipe-hint-drift-v {
    0%, 45% {
        transform: translateY(8px);
    }
    85%, 100% {
        transform: translateY(-16px);
    }
}

@keyframes scrix-swipe-hint-drift-h {
    0%, 45% {
        transform: translateX(8px);
    }
    85%, 100% {
        transform: translateX(-16px);
    }
}

@keyframes scrix-swipe-hint-ripple {
    0%, 20% {
        transform: scale(0.4);
        opacity: 0;
    }
    35% {
        transform: scale(0.8);
        opacity: 0.9;
    }
    70%, 100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* 5. 文字つき（text）: 「上にスワイプ」/「左にスワイプ」の文字を、指と同じ箱の中に入れる。
   文字は縦LP・横LP とも手の下に置く（2026-09-01 やましたさん指定） */
.scrix-swipe-hint[data-style="text"] {
    gap: 2px;
    padding: 10px 18px 12px;
}

.scrix-swipe-hint-text {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* 6. 矢印3連（chevrons）: 進行方向へ並んだ3つの山が順に光る（手を使わない） */
.scrix-swipe-hint[data-style="chevrons"] {
    gap: 6px;
}

.scrix-swipe-hint[data-style="chevrons"][data-dir="horizontal"] {
    flex-direction: row;
}

.scrix-swipe-hint-chev {
    width: 20px;
    height: 20px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    animation: scrix-swipe-hint-blink 1.5s ease-in-out infinite;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-chev {
    transform: rotate(-45deg);
}

/* 進行方向の先頭から順に光る（先頭 = 縦は上・横は左） */
.scrix-swipe-hint-chev:nth-child(1) { animation-delay: 0.3s; }
.scrix-swipe-hint-chev:nth-child(2) { animation-delay: 0.15s; }
.scrix-swipe-hint-chev:nth-child(3) { animation-delay: 0s; }

@keyframes scrix-swipe-hint-blink {
    0%, 60%, 100% {
        opacity: 0.25;
    }
    30% {
        opacity: 1;
    }
}

/* 7. 流れる指（flow）: 3つの指が進行方向へ順に流れて消える。
   3つとも箱の中央に重ねて置き、時間差で流す */
.scrix-swipe-hint-flow {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -36px 0 0 -36px;
    animation: scrix-swipe-hint-flow-v 1.8s linear infinite;
    opacity: 0;
}

.scrix-swipe-hint[data-dir="horizontal"] .scrix-swipe-hint-flow {
    animation-name: scrix-swipe-hint-flow-h;
}

.scrix-swipe-hint-flow:nth-of-type(2) { animation-delay: 0.6s; }
.scrix-swipe-hint-flow:nth-of-type(3) { animation-delay: 1.2s; }

@keyframes scrix-swipe-hint-flow-v {
    0% {
        transform: translateY(22px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(-26px);
        opacity: 0;
    }
}

@keyframes scrix-swipe-hint-flow-h {
    0% {
        transform: translateX(22px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateX(-26px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 動きを止め、向きが分かる静止表示だけにする（消えるのは選んだ時間 / 次のパネルに進んだとき） */
    .scrix-swipe-hint,
    .scrix-swipe-hint-move,
    .scrix-swipe-hint-bounce,
    .scrix-swipe-hint-tap,
    .scrix-swipe-hint-drift,
    .scrix-swipe-hint-chev,
    .scrix-swipe-hint-flow,
    .scrix-swipe-hint-ring {
        animation: none;
    }

    .scrix-swipe-hint-flow {
        opacity: 1;
    }

    .scrix-swipe-hint-flow:nth-of-type(2),
    .scrix-swipe-hint-flow:nth-of-type(3),
    .scrix-swipe-hint-ring {
        display: none;
    }
}

/* 設定パネルの見本（Builder 専用）: 小箱の中で使うため絶対配置と位置ずらしを打ち消す。
   ファイル末尾に置く = 上の規則より後勝ち */
.scrix-swipe-hint.is-sample {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

/* PC（720px 以上）はコンテンツ幅が広がるので、バーの左右のキャップも合わせる。
   幅の正は swipe-templates.css の --scrix-swipe-content-max-w（数値を二重に持たない・2026-09-02） */
@media (min-width: 720px) {
    .scrix-swipe-page-counter[data-style="bars"][data-dir="horizontal"],
    .scrix-swipe-page-counter[data-style="progress"][data-dir="horizontal"] {
        left: max(10px, calc(50% - var(--scrix-swipe-content-max-w, 600px) / 2));
        right: max(10px, calc(50% - var(--scrix-swipe-content-max-w, 600px) / 2));
    }
}