/* =========================================================
   top_blog.css — Blog 3件スライダー（左：日付 / 右：本文）
   構成：左カラム=公開日「日・英月・年」 / 右カラム=カテゴリ+更新日 → タイトル → 画像(16:9) → 抜粋
   - セクション見出しは ABOUT/Gallery とスケール共有
   - 画像は aspect-ratio で安定（CLS対策）
   - スライダー左右の“見切れ(peek)”は .tb-slider の padding で確保
   - ★ 黒い幕は .tb-link::before（背面・不透明#333）でスライド全域を覆う
   - ★ ホバー時はテキスト類の色を反転（白系）して可読性を確保
   - ★ 画像の“右だけ”に余白を作る（--tbImgGapR）
   - ★ 更新日の先頭にフォント不要の ↻ アイコンを表示（非表示時は自動で消える）
   - ★ テキスト帯の上下に余白を追加（--tbHeadPadY）
   - ★ 中央スライドの「浮き」「影」強調は完全に無効化 ← 既対応

   追加の安定化（今回の主眼）：
     - 画像の常時 translateZ(0) を廃止（クリップ×transformの組合せでのチラつき回避）
     - .tb-figure の contain: paint を撤廃（iOSでの再合成フラッタを抑止）
     - SP（特に iOS Safari）では影をOFF／will-change撤収／ホバー拡大も無効化
     - フルスクリーンは 100svh（安定） > --vh-stable > 1vh の順を継続
     - ★ JSが付与する .is-sliding 中はホバー無効（PCでのスライド中チラつき防止）

   【今回の設計変更】
     - Applications→Blog 間の“上ギャップ”を **Blog 自身の内側 padding-top** で保持。
       （旧：#application + #blog の margin-top は top_application.css 側で 0 化）
     - 変数 --blogGapTop を導入。フルスクリーン時は 0 にして二重余白を回避。

   【今回の修正（外側パディングを無効化＋ギャップの二重防止）】
     - Splide 運用時（.tb-splide が付与）のみ、.tb-slider の左右 padding を 0 に。
       （peek は JS 側の Splide オプション padding に委譲）
     - Splide 化時は margin ではなく list 側の gap を使い、重複を防止。

   【今回の追加修正（抜粋の画像下辺オーバーレイ化）】
     - DOMはそのまま、CSS Grid で .tb-excerpt を .tb-figure と同じセルに重ねる
     - 画像幅に合わせて width/margin-right を同期、読みやすいグラデ背景とし
       文字サイズをやや大きめに（clamp）・最大3行で省略

   ★今回の改修（NSFWバッヂ対応：カテゴリ左）
     - template-parts/top/blog.php 側で、アダルトチェックONの投稿にのみ
       .tb-meta 先頭へ <span class="tb-nsfw">NSFW</span> を追加（カテゴリの左）
     - 色は「ワインレッド背景＋白文字」で、黒幕ホバー上でも視認性を維持
     - カテゴリが無い投稿でも NSFW を表示できる（= .tb-cat の有無に依存しない）

   ★今回の改修（カード高さの統一）
     - カードごとの差が出ていた主因は、.tb-meta と .tb-title の可変高
     - JSで高さ計測は行わず、CSS側で「高さ予約」を行って統一する
     - .tb-link / .tb-grid / .tb-main に高さ伝播を通し、見た目カード全体の下端を揃える
     - .tb-meta は最低2行ぶん、.tb-title は最低2行ぶんの高さを常時確保
     - 画像比率や抜粋オーバーレイ、Splide の既存動作は維持する
   ========================================================= */

:root{
  --tbBg:#e6e5df;

  /* セクション見出し（About/Gallery と共有） */
  --tbTitleSize:5.5rem;
  --tbTitleColor:#333;
  --tbLeadSize:1rem;
  --tbLeadColor:#666;

  /* 画像の比率・角丸（角丸は不要＝0） */
  --tbRatioW: 16;
  --tbRatioH: 9;
  --tbImageRadius: 0px;

  /* スライダーの“見切れ”と各スライドの間隔 */
  --tbPeek: 25vw;
  --tbSlideGap:18px;

  /* カード系 */
  --tbRadius:0;
  --tbInnerPad:0px; /* 白い縁を作らないため 0 */

  /* 左カラム（日付） */
  --tbDateColW: clamp(84px, 10vw, 140px);
  --tbDateBarW: 3px;
  --tbDateBarColor: #8b6a3c;
  --tbDateColor: #222;

  /* 日・月・年のサイズ */
  --tbDaySize: clamp(32px, 4.6vw, 72px);
  --tbMonthSize: clamp(10px, 1.1vw, 14px);
  --tbYearSize: clamp(10px, 1vw, 14px);

  /* hover 演出 */
  --tbHoverMs:320ms;
  --tbHoverTitle:#ffffff;   /* 反転時のタイトル色 */
  --tbHoverText:#dddddd;    /* 反転時の本文色 */
  --tbHoverSolid:#333;      /* ★ 黒い幕（不透明） */

  /* CTA（VIEW ALL） */
  --tbCtaBorder:#333;
  --tbCtaFill:#333;
  --tbCtaText:#333;
  --tbCtaTextHover:#fff;
  --tbCtaArrowDist: 14px;
  --tbCtaArrowMs: .32s;

  /* ナビ */
  --tbNavSize: 44px;
  --tbNavFixL: 0px;
  --tbNavFixR: 0px;

  /* ★画像の右余白量（PC基準） */
  --tbImgGapR: 28px;

  /* ★テキスト帯（カテゴリ＋タイトル）の上下余白 */
  --tbHeadPadY: 10px;

  /* ★NEW：Blog セクション自己完結の“上ギャップ”量（旧隣接 margin の移管先） */
  --blogGapTop: clamp(96px, 12vw, 200px);

  /* ★NEW（SP用）日付ブロックの“上余白”量（端末別に微調整しやすく） */
  --tbDatePadTopSP: 10px;

  /* =========================================================
     ★カード高さ統一用の予約値
     ---------------------------------------------------------
     目的：
       - カードごとに差が出ていた .tb-meta / .tb-title の高さを規格化する
       - 「1行タイトル / 2行タイトル」「カテゴリ短い / 長い」の差を吸収する
       - JSで高さ計測せず、CSSのみで安定させる
     ========================================================= */
  --tbMetaLineH: 1.35;
  --tbMetaReserveLines: 2;

  --tbTitleLineH: 1.25;
  --tbTitleReserveLines: 2;
}

/* =========================================================
   セクション骨組み
   ========================================================= */
.top-blog{
  position:relative;
  background:var(--tbBg);

  /* ★NEW：Applications → Blog の上ギャップを Blog 自身の内側で確保（常に塗られる） */
  padding-top: var(--blogGapTop);
}

/* フルスクリーン時は見出し/内部レイアウトで上余白が確保されるため 0 にする */
.top-blog.is-fullscreen{ --blogGapTop: 0px; }

.top-blog__header{
  position:absolute;
  top:var(--aboutPadTop, 50px);
  left:var(--aboutPadX, 40px);
  z-index:2;
  pointer-events:none;
}
.top-blog__title{
  font-size:var(--tbTitleSize);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.2;
  margin:-10px 0 5px;
  color:var(--tbTitleColor);
}
.top-blog__lead{ font-size:var(--tbLeadSize); color:var(--tbLeadColor); letter-spacing:.03em; }

/* ===== フルスクリーンモード（ちらつき対策：svh優先、dvh不使用） ===== */
.top-blog.is-fullscreen{
  min-height: calc(var(--vh-stable, 1vh) * 100);
  display:flex; flex-direction:column;
}
@supports (height: 100svh){
  .top-blog.is-fullscreen{ min-height: 100svh; }
}

.top-blog.is-fullscreen.is-offset{ row-gap:18px; }
.top-blog.is-fullscreen.is-offset .top-blog__header{
  position:relative; top:auto; left:auto; z-index:2;
  padding:var(--aboutPadTop, 50px) var(--aboutPadX, 40px) 0 var(--aboutPadX, 40px);
  pointer-events:auto;
}

/* =========================================================
   スライダー本体
   ========================================================= */
.tb-slider{
  flex:1 1 0; min-height:0; position:relative;
  display:flex; align-items:center; overflow:hidden;

  /* 左右の“見切れ(peek)”を padding で確保（レイアウトシフト無し） */
  padding-inline: var(--tbPeek);

  /* 下余白：見出しぶん差し引いて、全体の密度を整える */
  padding-block: 10px calc(var(--aboutPadTop, 50px) - 14px);

  /* ★FIX: 初期描画タイミング差での「黒っぽい一瞬」を防ぐため、器にも地色を塗布 */
  background: var(--tbBg);

  /* ★NEW（スワイプ準備）：縦スクロールはOSへ委譲、横はアプリで処理 */
  touch-action: pan-y;

  /* ★NEW：ドラッグで選択ハイライトが出ないように */
  user-select: none;
}

/* ★追加：Splide 運用時は“peek”を JS の padding に委譲するため外側 padding を無効化 */
.tb-slider.tb-splide{
  /* ここを 0 にすることで、.splide の padding と二重にならない */
  padding-inline: 0;
}

.tb-track{
  display:flex; align-items:stretch;
  will-change:transform; transform:translate3d(0,0,0);
  width:100%;
}
.tb-slide{
  flex:0 0 100%;
  margin-right:var(--tbSlideGap);
  display:block;

  /* =========================================================
     ★カード全高化の起点
     ---------------------------------------------------------
     ここで高さの受け皿を作っておくことで、
     内側 .tb-link の height:100% が有効に働きやすくなる。
     ========================================================= */
  height: auto;
  min-height: 100%;
}
.tb-slide:last-child{ margin-right:0; }

/* =========================================================
   ★ Splide ブリッジ（最小追加）
   ---------------------------------------------------------
   目的：
     - JS 側で .tb-slider を Splide 化した場合でも、既存の見た目を維持。
     - 「動く要素」は .splide__list 側に移るため、.tb-track の transform 指定は解除。
     - スライド間ギャップは「margin-right」ではなく「gap」で付与（重複回避）。
   適用：
     - .tb-track.splide__track … Splide の“トラック”に化けた場合の上書き
     - .splide__list            … 実際に横スクロール変形する要素
     - .splide__slide.tb-slide  … 既存クラスを保持したまま Splide に合わせる
   備考：
     - 既存の .tb-slide { margin-right:var(--tbSlideGap) } は“残しつつ”
       Splide 化した場合のみ無効化（下段の 0 指定）。
   ========================================================= */
.tb-track.splide__track{
  /* 変形の責務を .splide__list に委譲するため、ここでは触らない */
  will-change: auto;
  transform: none;
}
.tb-track.splide__track > .splide__list{
  display:flex;
  align-items:stretch;
  width:100%;
  /* ★ ギャップは「flex の gap」で表現（左右端は Splide が面倒を見ます） */
  gap: var(--tbSlideGap);
}
.tb-track.splide__track > .splide__list > .splide__slide.tb-slide{
  /* 1ビューごとの“幅の扱い”は従来どおり。Splide の width 設定とも整合。 */
  flex: 0 0 100%;
  /* Splide が操作するので position/transform は触らない */

  /* ★Splide 化時もカード全高化を維持 */
  min-height: 100%;
}
/* ★ Splide 化時のみ、従来の margin ギャップを抑止（重複回避） */
.tb-track.splide__track .tb-slide{ margin-right: 0 !important; }

/* =========================================================
   スライド中身（左：日付 / 右：本文）
   ========================================================= */
.tb-link{
  position:relative;           /* ★ 黒幕(::before)の基準 */
  display:block;
  text-decoration:none; color:inherit;
  border-radius:var(--tbRadius);
  background:transparent;
  overflow:hidden;             /* ★ 黒幕を枠内に収める */

  /* =========================================================
     ★カード全体の高さをスライド全高へ追従
     ---------------------------------------------------------
     目的：
       - 外側スライド枠は揃っているのに、見えるカードだけ短い状態を防ぐ
       - 見た目のカード下端を揃える
     ========================================================= */
  height:100%;
}

/* ★ スライド全体を覆う黒い幕（背面 / 不透明#333 / 下からせり上がる） */
.tb-link::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--tbHoverSolid); /* 完全不透明の #333 */
  transform: translateY(101%);     /* 初期は下に隠す（+1%で縫い目防止） */
  transition: transform var(--tbHoverMs) ease;
  pointer-events:none;
  z-index:0;                       /* ★ 背面に固定（画像やテキストの“後ろ”） */
}

/* 2カラム：左=固定幅(公開日) / 右=自動(本文) */
.tb-grid{
  position:relative;
  z-index:1;                       /* ★ コンテンツは黒幕より前面 */
  display:grid;
  grid-template-columns: var(--tbDateColW) 1fr;
  column-gap: 22px;
  row-gap: 12px;
  align-items:start;

  /* =========================================================
     ★高さ伝播
     ---------------------------------------------------------
     .tb-link → .tb-grid → .tb-main へ高さを通し、
     カード本体の見た目高さ統一を安定させる。
     ========================================================= */
  height:100%;
}

/* 左カラム（日付：中央揃え + 右に縦バー） */
.tb-datecol,
.tb-dateblock{
  display:flex;
  flex-direction:column;
  align-items:center;       /* 横方向センター */
  justify-content:flex-start;
  color:var(--tbDateColor);
  padding-right:12px;
  border-right: var(--tbDateBarW) solid var(--tbDateBarColor);
  min-width:0;
  text-align:center;
}
.tb-day, .tb-dateblock__day{ font-weight:800; font-size:var(--tbDaySize); line-height:0.9; }
.tb-month, .tb-dateblock__month{
  margin-top:6px; font-size:var(--tbMonthSize); line-height:1;
  letter-spacing:.18em; text-transform:uppercase; opacity:.9;
}
.tb-year, .tb-dateblock__year{ margin-top:6px; font-size:var(--tbYearSize); line-height:1; opacity:.8; }

/* =========================================================
   ★NSFWバッヂ（BLOG：.tb-meta 先頭＝カテゴリ左）
   ---------------------------------------------------------
   目的：
   - 既存のメタ行（カテゴリ・更新日）の流れを壊さず、“視認チップ”として追加する
   - 色は「ワインレッド背景＋白文字」で、ホバー黒幕上でも埋もれない
   - カテゴリが無い投稿でも表示される（= .tb-cat の有無に依存しない）
   ---------------------------------------------------------
   注意：
   - .tb-meta は flex-wrap:wrap のため、狭い幅では折り返し得る
     → チップは短い & nowrap で破綻を抑止
   ========================================================= */
.tb-nsfw{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* 見た目：ワインレッド + 白文字（要件固定） */
  background:#7a1f2b;
  color:#fff;

  padding: 3px 9px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;

  border: none;
  border-radius: 999px;

  white-space: nowrap;
  /* メタ行の “文字列” より少し強く見せる */
  font-weight: 700;

  /* 視認性の底上げ（黒幕/画像上でも沈まない） */
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}

/* 右カラム（メタ→タイトル→画像） ※抜粋は画像セルに重ねる */
.tb-main{
  display:grid;
  grid-template-areas:
    "meta"
    "title"
    "figure";            /* ★ excerpt 行は廃止。figure と同セルに重ねる */
  row-gap: 12px;
  min-width:0;

  /* ★テキスト帯の上下にゆとりを持たせる */
  padding-block: var(--tbHeadPadY);

  /* =========================================================
     ★カード高さ統一の中核
     ---------------------------------------------------------
     - meta と title の位置を毎カード同じにするため、
       画像の上に来る2段を「予約高さ付き」で扱う
     - figure は従来通り自然高（aspect-ratio）で維持
     ========================================================= */
  grid-template-rows:
    minmax(calc(1em * var(--tbMetaLineH) * var(--tbMetaReserveLines)), auto)
    minmax(calc(1em * var(--tbTitleLineH) * var(--tbTitleReserveLines)), auto)
    auto;

  height:100%;
  align-content:start;
}

/* メタ行（カテゴリ[テキスト]・区切りドット・更新日） */
.tb-meta{
  grid-area:meta;
  display:flex;
  align-items:baseline;
  align-content:flex-start;
  flex-wrap:wrap;
  gap:.35em;
  margin:0;
  font-size:.82rem;
  color:#555;

  /* =========================================================
     ★最低2行ぶんの高さを確保
     ---------------------------------------------------------
     これにより、
       - NSFW 有無
       - カテゴリ名の長短
       - 折り返しの有無
     によるカード間の高さ差を吸収する
     ========================================================= */
  line-height: var(--tbMetaLineH);
  min-height: calc(1em * var(--tbMetaLineH) * var(--tbMetaReserveLines));
}
.tb-cat{
  color:#222; font-weight:700;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.tb-meta__dot{ opacity:.6; margin:0 .2em; }

/* ★更新日のアイコン（↻）を先頭に付与 */
.tb-date{
  display:inline-flex;          /* テキストとアイコンを横並びに */
  align-items:center;
  gap:.35em;                    /* アイコンと日付の間隔 */
  margin:0;
  font-size:.82rem;
  color:#555;
}
.tb-date::before{
  content:"↻";                  /* U+21BB */
  line-height:1;
  speak:none;                   /* 画面読み上げで無視されるよう配慮 */
}
.tb-date:empty::before{ content:none; } /* 空文字ならアイコンも非表示 */

/* タイトル（2行省略＋下線撤去） */
.tb-title{
  grid-area:title;
  margin:0;
  font-weight:800; color:#222;
  font-size: clamp(1.35rem, 1.2vw + 1.1rem, 2.1rem);
  line-height:var(--tbTitleLineH);

  /* --- 下線を撤去 --- */
  padding-bottom:0;
  border-bottom:none;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition: color .2s ease;

  /* =========================================================
     ★最低2行ぶんの高さを常時予約
     ---------------------------------------------------------
     これにより、
       - 1行タイトルでも2行ぶんの箱を使用
       - 2行タイトルでも同じ高さ内で完結
     となり、カードごとの画像開始位置と下端が揃う
     ========================================================= */
  min-height: calc(1em * var(--tbTitleLineH) * var(--tbTitleReserveLines));
}

/* ===== 画像：隙間ゼロ・中央基準・端まで表示 ===== */
.tb-figure{
  grid-area:figure;
  margin:0;
  position:relative;              /* ★ 抜粋オーバーレイの基準 */
  aspect-ratio: calc(var(--tbRatioW) / var(--tbRatioH));
  overflow:hidden;
  background:transparent;

  /* ▼▼▼ 重要：iOSでのフリッカー原因になりやすいため撤廃 ▼▼▼
     contain: paint; はレイヤー分離を強制しスクロール時の再合成を増やす */
  /* contain:paint; ← 削除 */

  border-radius: var(--tbImageRadius);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);

  /* ★画像枠の幅を少し狭め、その分だけ右に“空き”を作る */
  width: calc(100% - var(--tbImgGapR));
  margin-right: var(--tbImgGapR);

  /* =========================================================
     ★grid の最終段として自然高を維持
     ---------------------------------------------------------
     画像比率そのものは今回の問題ではないため、
     aspect-ratio による既存の安定構成をそのまま使う
     ========================================================= */
  align-self:start;
}

/* 画像そのものは「常時 transform を掛けない」ことで合成を安定化 */
.tb-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;

  /* ▼▼▼ 重要：常時の translateZ(0) をやめる（レイヤー昇格を抑制） ▼▼▼ */
  transform:none;

  transition:transform .36s ease;
  border-radius: var(--tbImageRadius);
}

/* 旧：画像だけの黒幕は廃止 */
.tb-figure::after{ content:none; }

/* ===== 抜粋：画像セルの“下辺オーバーレイ”に重ねる（最大3行） ===== */
.tb-excerpt,
.tb-excerpt--under{
  grid-area: figure;             /* ★ 画像セルと同じグリッドに配置 */
  align-self: end;               /* 下辺に寄せる */
  z-index: 2;                    /* 画像より前面（.tb-link::before は z-index:0） */

  /* 画像の幅・右余白と同期 */
  width: calc(100% - var(--tbImgGapR));
  margin: 0;
  margin-right: var(--tbImgGapR);

  /* 見た目（読みやすい下→上グラデ） */
  color: #fff;
  font-size: clamp(1.02rem, 0.75vw + 0.95rem, 1.28rem); /* ★ 少し大きめ */
  line-height: 1.6;
  padding: 12px 14px 14px;
  background: linear-gradient(to top,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.42) 55%,
    rgba(0,0,0,0) 100%);

  /* 2〜3行で省略（環境依存のため -webkit 系を併用） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 抜粋が空なら帯ごと非表示 */
.tb-excerpt:empty,
.tb-excerpt--under:empty{ display:none; }

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

/* =========================================================
   ホバー演出（ポインタ環境）
   - ★ 背面の黒幕をせり上げる
   - ★ テキスト類を反転（白系）／境界線も白系へ
   - ★ PCのみ、画像をわずかに拡大（SPでは拡大しない）
   ========================================================= */
@media (hover:hover){
  .tb-link:hover::before{ transform:translateY(0); }

  /* PCポインタ環境のみ、拡大を許可 */
  .tb-link:hover .tb-img{ transform: scale(1.03); }

  .tb-link:hover .tb-title{ color:var(--tbHoverTitle); }
  .tb-link:hover .tb-excerpt,
  .tb-link:hover .tb-excerpt--under{ color:var(--tbHoverText); } /* ※既存仕様を維持 */

  .tb-link:hover .tb-meta{ color:#e6e6e6; }
  .tb-link:hover .tb-date{ color:#e6e6e6; }  /* ↻ も currentColor で一緒に反転 */
  .tb-link:hover .tb-cat{
    color:#fff;
    border-bottom-color:rgba(255,255,255,.85);
  }

  /* 左の日付も反転 */
  .tb-link:hover .tb-day,
  .tb-link:hover .tb-month,
  .tb-link:hover .tb-year{ color:#fff; opacity:1; }

  /**
   * ★NSFWバッヂは固定配色（ワイン＋白）を維持
   * ----------------------------------------------------------
   * - 黒幕上でも目立たせるため、色は変えない。
   * - 必要なら hover で影を少し強くして “沈み” を防ぐ。
   */
  .tb-link:hover .tb-nsfw{ box-shadow: 0 3px 0 rgba(0,0,0,.22); }
}

/* =========================================================
   ★ スライド中はホバー無効（JSが .is-sliding を付与）
   - ホバーの擬似クラス自体を発火させないために pointer-events を無効化
   - 見切りの黒幕/拡大などの視覚変化も同時に抑止
   ========================================================= */
.tb-slider.is-sliding .tb-link{ pointer-events: none; }
.tb-slider.is-sliding .tb-link::before{ transform: translateY(101%) !important; }
.tb-slider.is-sliding .tb-img{ transform: none !important; transition: none !important; }

/* =========================================================
   中央スライドの演出を完全無効化（位置・影ともに他スライドと同一）
   ========================================================= */
.tb-slide .tb-link{
  transform: none;                 /* 位置は固定 */
  box-shadow: none;                /* 影は付けない（個別付与も無し） */
  transition: none;                /* .tb-link 自体の遷移は停止 */
}
.tb-slide.is-center .tb-link{
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   前後ナビ
   ========================================================= */
.tb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--tbNavSize); height:var(--tbNavSize);
  display:grid; place-items:center;
  background:#fff; color:#333; border:1px solid #333;
  border-radius:999px; cursor:pointer;
  transition: background .2s ease, color .2s ease;
  z-index:3;
}
.tb-prev{ left:  max(8px, calc(var(--tbPeek) - (var(--tbNavSize) * .5) - (var(--tbSlideGap) * .5) + var(--tbNavFixL))); }
.tb-next{ right: max(8px, calc(var(--tbPeek) - (var(--tbNavSize) * .5) - (var(--tbSlideGap) * .5) + var(--tbNavFixR))); }
.tb-nav:hover{ background:#333; color:#fff; }

/* =========================================================
   BLOG：VIEW ALL（BLOG/NEWS/GALLERYと体感統一）
   - 背景は linear-gradient を“下からスライド塗り”
   - 矢印は ::after（右へ抜ける）と ::before（左から入る）で入替
   ========================================================= */
.blog-more{ margin-bottom:30px; display:flex; justify-content:center; }
.blog-viewall{
  position:relative; isolation:isolate; z-index:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 42px; padding-right:50px;
  border:1px solid var(--tbCtaBorder); border-radius:30px;
  font-size:1rem; font-weight:500; color:var(--tbCtaText); text-decoration:none; line-height:1; cursor:pointer; overflow:hidden;

  /* ★ 下からの塗り（縫い目レス） */
  background-image:linear-gradient(var(--tbCtaFill), var(--tbCtaFill));
  background-repeat:no-repeat; background-position:left bottom; background-size:100% 0%;
  background-origin:border-box; background-clip:border-box;

  transition: color var(--tbCtaArrowMs) ease, background-size var(--tbCtaArrowMs) ease, border-color var(--tbCtaArrowMs) ease;
}
.blog-viewall::after{
  content:"➡"; position:absolute; right:25px; top:50%;
  transform:translate(0,-50%); color:currentColor; opacity:1;
  transition:transform var(--tbCtaArrowMs) ease, opacity var(--tbCtaArrowMs) ease;
  z-index:1; will-change:transform, opacity;
}
.blog-viewall::before{
  content:"➡"; position:absolute; right:25px; top:50%;
  transform:translate(calc(-1 * var(--tbCtaArrowDist)),-50%); color:currentColor; opacity:0;
  transition:transform var(--tbCtaArrowMs) ease, opacity var(--tbCtaArrowMs) ease;
  z-index:1; will-change:transform, opacity;
}
.blog-viewall:hover,
.blog-viewall:focus-visible{
  color:var(--tbCtaTextHover);
  border-color:var(--tbCtaFill);
  background-size:100% calc(100% + 2px);   /* ★ 2px 過塗りで1px縫い目を解消 */
}
.blog-viewall:hover::after,
.blog-viewall:focus-visible::after{ transform:translate(var(--tbCtaArrowDist), -50%); opacity:0; }
.blog-viewall:hover::before,
.blog-viewall:focus-visible::before{ transform:translate(0,-50%); opacity:1; }
.blog-viewall:focus-visible{ outline:2px dashed rgba(51,51,51,.7); outline-offset:4px; }

/* キーボード操作の視認性（スライド全体にも焦点可） */
.tb-link:focus-visible{
  outline:2px solid #333;
  outline-offset:2px;
  border-radius:var(--tbRadius);
}

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

  /* ★FIX: 初期位置は“非表示（下に隠す）”を維持。アニメは無しで即切替。 */
  .tb-link::before{ transition:none; transform: translateY(101%); }
  .tb-link:hover::before{ transform: translateY(0); }

  .tb-img{ transition:none; } /* 画像拡大アニメも停止（初期状態は transform:none なので可視は維持） */
}

/* =========================================================
   レスポンシブ（SP：1カラム化 & 日付は横並び行）
   ========================================================= */
@media (max-width: 768px){
  :root{
    --tbTitleSize:3.6rem;
    --tbPeek:12vw;
    /* SPでは画像右余白＆テキスト帯余白を控えめに */
    --tbImgGapR: 12px;
    --tbHeadPadY: 6px;   /* SPの上下余白 */

    /* =======================================================
       ★SPでも高さ統一ルールを維持
       -------------------------------------------------------
       横幅が狭くなるほど meta は折り返しやすくなるため、
       予約行数はそのまま維持してカード差を抑える。
       ======================================================= */
    --tbMetaReserveLines: 2;
    --tbTitleReserveLines: 2;
  }

  .tb-grid{ grid-template-columns: 1fr; row-gap: 10px; }

  .tb-datecol, .tb-dateblock{
    flex-direction:row; align-items:baseline; gap:10px;
    border-right:none; padding-right:0;
    border-bottom: var(--tbDateBarW) solid var(--tbDateBarColor);
    padding-bottom:6px; justify-content:center; text-align:center;

    /* ★NEW（SP日付の“上切れ”対策）：上方向にゆとりを付与 */
    padding-top: var(--tbDatePadTopSP);
  }
  .tb-day, .tb-dateblock__day{
    font-size: clamp(24px, 8vw, 40px);

    /* ★NEW（SP日付の“上切れ”対策）：行高を1.0に引き上げてアセンダ分の余裕を確保 */
    line-height: 1;
  }
  .tb-month, .tb-dateblock__month{ font-size: clamp(10px, 3.2vw, 13px); margin-top:0; }
  .tb-year, .tb-dateblock__year{ font-size: clamp(10px, 3vw, 13px);  margin-top:0; }

  /* =======================================================
     ★SPでもカード本体の高さ伝播を維持
     -------------------------------------------------------
     1カラム化しても .tb-main の予約段構成は有効。
     これにより、タイトル長短差でのズレを防ぐ。
     ======================================================= */
  .tb-link,
  .tb-grid,
  .tb-main{
    height:100%;
  }

  /* ▼ SPではスクロール中のちらつきを避けるため、
        画像拡大アニメを無効（transformを発生させない） */
  .tb-link:hover .tb-img{ transform: none; }

  /* ▼ 影も無効化（レイヤー再構成のトリガを減らす） */
  .tb-figure{ box-shadow: none; }

  /* ▼ 抜粋の文字サイズは気持ち控えめに（行数は3行のまま） */
  .tb-excerpt,
  .tb-excerpt--under{
    font-size: clamp(1rem, 2.7vw, 1.18rem);
    padding: 10px 12px 12px;
  }

  /**
   * ★NSFWバッヂ（SP）
   * ----------------------------------------------------------
   * - SPでは tb-meta が折り返しやすいので、チップを少しだけ小さくする。
   * - 配色は要件通り固定（ワイン＋白）を維持。
   */
  .tb-nsfw{
    padding: 2px 8px;
    font-size: 10px;
    letter-spacing: .12em;
  }
}

/* =========================================================
   iOS Safari への局所パッチ
   ---------------------------------------------------------
   - iOS Safari では transform×clip×shadow が同居すると
     スクロール合成で“チラつき”が発生しやすい。
   - 影/昇格ヒントを外し、containを使わず、合成負荷を軽くする。
   ========================================================= */
@supports (-webkit-touch-callout: none){
  .tb-figure{ box-shadow: none; }                  /* 影を外して再ラスタ軽減 */
  .tb-img{ will-change: auto; }                    /* will-change 撤収（再昇格を防止） */
  /* 念のため backface を閉じる（描画面の切替チラつき抑制の保険） */
  .tb-img, .tb-figure{
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
}

/* =========================================================
   補助：ポインタ環境のドラッグ中カーソル（見た目だけ）
   ※ 動作は JS 側のスワイプ実装に依存。CSS は視覚的な手がかりのみ。
   ========================================================= */
@media (pointer: fine){
  .tb-slider{ cursor: grab; }
  .tb-slider.is-sliding{ cursor: grabbing; }
}

/* ------------------------------------------
   BLOG：スクロールアンカー抑止
   Splideのクローン生成やレスポンシブ再計算時に
   ブラウザの scroll anchoring が「位置補正」して
   ビューポートが瞬間移動するのを防ぐ
------------------------------------------ */
.top-blog {
  overflow-anchor: none;
}