/* ----------------------------------------------------------------
   single-blog.css — ブログ詳細ページ用スタイル（汎用ライトボックス前提）
   ----------------------------------------------------------------
   役割：
   - 「ブログ詳細（single-blog）」テンプレート専用のレイアウトと装飾を定義
   - コンテンツ本体のタイポグラフィ、メタ情報、前後記事、AUTHOR、関連記事など
     ブログ詳細に必要な UI パーツだけをまとめて管理する

   ポイント：
   1) ルートコンテナ .blog-single 上の CSS 変数で各種サイズ・フォントを一元管理
   2) .bs-wrap で左右余白と最大幅を制御（固定ヘッダー分の押し下げもここで対応）
   3) .bs-meta で日付／カテゴリ+更新日／閲覧数を PC:3カラム / SP:縦並びでレイアウト
   4) 本文は .bs-content 配下に限定してリセット＆装飾（見出し・段落・リスト等）
   5) Gutenberg の YouTube ブロック用に、実際に効く margin / padding-bottom を付与
   6) タグ、共有ボタン、前後記事カード、AUTHOR ボックス、関連記事スライダーを定義
   7) Reveal 系のフェードインは「全体」→「関連セクション」の順に上書き制御
   8) 関連セクション（.bs-related）は Splide ベースのスライダーを前提に、
      既存の .bs-* クラスで見た目だけを制御（挙動は JS + Splide に委譲）

   注意：
   - ライトボックス自体のスタイルは別ファイル（汎用 lightbox 用 CSS/JS）に委譲し、
     本ファイルではブログレイアウト専用のクラス（.blog-single / .bs-*）だけを定義する。
----------------------------------------------------------------- */


/* =================================================================
   1. ルートコンテナ .blog-single の共通変数
   -----------------------------------------------------------------
   - 日付表示（Day）のサイズ、関連記事カードの gap、AUTHOR アバター径などをここで定義
   - フォントサイズ・フォントファミリも変数化し、追加CSSなどで上書きしやすくする
   - YouTube 埋め込み（Gutenberg ブロック／生 iframe）の見た目も変数でコントロール
================================================================= */
.blog-single{
  /* 公開日の「Day」数字の大きさ（PC/SP共通の最大値を clamp で制御） */
  --bs-day-size: clamp(44px, 7vw, 72px);

  /* 関連記事カード間に空ける gap（Splide で横並びにしたときにも効く） */
  --rel-gap: 14px;

  /* AUTHOR エリアのアバター直径（PC時の既定値。SPでは後続の @media で上書き） */
  --bs-avatar: 96px;

  /* 本文ベースフォントサイズ（PC/SP用を分けて定義し、--blog-font-size で切り替え） */
  --blog-font-size-pc: 20px;
  --blog-font-size-sp: 18px;
  --blog-font-size: var(--blog-font-size-pc);

  /* ブログ詳細全体のフォントファミリ（タイトル含む多くの要素に継承される） */
  --blog-font-family: Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;

  /* ライトボックスの背景色（RGB + アルファは別変数）※実際の描画は別CSS側を想定 */
  --lb-bg-color: 8 18 40;  /* 例：暗めのネイビー系 */
  --lb-bg-alpha: .92;      /* かなり暗いオーバーレイ */

  /* YouTube ブロックの最大幅（PC/SP）とアスペクト比・角丸・影 */
  --yt-max-width-pc: 1200px;   /* PC 時の最大横幅（中央寄せ） */
  --yt-max-width-sp: 100%;     /* SP 時は画面幅いっぱい */
  --yt-max-width: var(--yt-max-width-pc);
  --yt-aspect: 16 / 9;
  --yt-radius: 0px;
  --yt-shadow: none;

  /* YouTube 埋め込みの縦方向マージン */
  --yt-margin-block: clamp(0px, 3vw, 0px);
  --yt-margin-top: var(--yt-margin-block);
  --yt-margin-bottom: clamp(0px, 7vw, 0px);

  /* YouTube ブロック内部で、動画の「下」に常に確保したい余白量 */
  --yt-frame-gap: 200px;

  /* 関連記事カードのタイトル行数制御
     - タイトル枠を最初から 2 行分確保することで、タイトル改行数による
       カード高さのばらつきを防ぐ
     - 2 行を超えた場合は line-clamp で末尾を … 表示にする */
  --bs-rel-title-lines: 2;
  --bs-rel-title-line-height: 1.4;
  --bs-rel-title-min-height: calc(1em * var(--bs-rel-title-line-height) * var(--bs-rel-title-lines));

  /* ここで定義したフォントファミリを .blog-single 配下全体の既定値として適用 */
  font-family: var(--blog-font-family);
}


/* =================================================================
   2. ページラッパー .bs-wrap と汎用区切り線
   -----------------------------------------------------------------
   - 横幅の最大値・左右余白・上下余白をまとめる
   - 固定ヘッダー分の押し下げ（padding-top）もここで吸収
   - .bs-rule は「パンくず下」などで使い回す水平線
================================================================= */

/* コンテンツ全体の箱（左右余白と最大幅、上下余白） */
.blog-single .bs-wrap {
  max-width: 1200px;                       /* 読みやすさを損なわない範囲でワイド化 */
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);  /* 端末幅に応じた左右余白 */
  padding-block-end: clamp(56px, 7vw, 96px); /* 下側にしっかり余白を確保 */

  /* 固定ヘッダー高さ --stickyTop 分だけ下に押し下げる */
  padding-block-start: calc(var(--stickyTop, 0px) + 16px);
}

/* 汎用区切り線（パンくず下や本文中の境界など） */
.blog-single .bs-rule {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 20px 0 24px;
}

/* パンくず直下に置く区切り線（パンくずと本文の間を空ける） */
.blog-single .bs-rule--under-breadcrumb {
  margin-top: clamp(10px, 1.4vw, 18px);
}


/* =================================================================
   3. パンくずナビゲーション
   -----------------------------------------------------------------
   - BLOG > カテゴリ > 記事タイトル … のような階層を表示
   - 行間を詰め過ぎず、上下にもゆとりを持たせる
================================================================= */
.blog-single .bs-breadcrumb{
  padding-block: clamp(14px, 2.6vw, 28px);
}
.blog-single .bs-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #666;
}
.blog-single .bs-breadcrumb a {
  color: #333;
  text-decoration: underline;
  text-decoration-style: dotted;  /* サポートがあれば点線下線、無ければ標準下線 */
}
.blog-single .bs-breadcrumb li+li::before {
  content: "›";
  color: #aaa;
  margin: 0 6px 0 2px;
}


/* =================================================================
   4. ヘッダブロック（公開日・カテゴリ・更新日・閲覧数・タイトル）
   -----------------------------------------------------------------
   - .bs-meta グリッドで、左から「日付」「カテゴリ+更新日」「閲覧数」を配置
   - SP では 1 カラムに崩して縦並び表示
================================================================= */

/* パンくずの下に来るヘッダー全体のラッパー */
.blog-single .bs-head {
  margin-top: 8px;
}

/* 日付／カテゴリ＋更新日／閲覧数 の 3 カラム構成（PC） */
.blog-single .bs-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;   /* 左の「Day」の上端に合わせる */
  gap: 8px 20px;
}

/* ---- 公開日（Day / Month / Year） ------------------------ */

.blog-single .bs-datepub {
  display: grid;
  text-align: center;
  line-height: 1;
}
.blog-single .bs-datepub__day  {
  font-size: var(--bs-day-size);
  font-weight: 800;
  color: #111;
}
.blog-single .bs-datepub__mon  {
  font-size: 14px;
  color: #333;
  margin-top: 6px;
  text-transform: uppercase;
}
/* ※ fontサイズ はブラウザに無視されるが、元ソース構造を維持するために残している */
.blog-single .bs-datepub__year { fontサイズ: 12px; color: #777; margin-top: 2px; }

/* ---- カテゴリ＋更新日（左の太線付き） ------------------- */

/* 日付の右に並ぶ「カテゴリ＋更新日」領域 */
.blog-single .bs-catmod{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 16px;           /* 左の太線とテキストとの間を空ける */
  height: var(--bs-day-size);   /* 高さを Day と揃えて、上下が揃うようにする */
}

/* 左側の太い縦線（カテゴリブロックの強調） */
.blog-single .bs-catmod::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 8px;
  background: #111;
}

/* カテゴリリスト本体（左縦線は ::before に移したため border-left は不要） */
.blog-single .bs-cat{
  border-left: none;
  padding-left: 0;
  line-height: 1.2;
}

/* カテゴリリンク（通常時は濃いめ、カテゴリ無しの場合のみ薄いグレー） */
.blog-single .bs-cat__link {
  color: #111;
  font-weight: 700;
  text-decoration: none;
}
.blog-single .bs-cat__link.is-empty {
  color: #aaa;
  font-weight: 400;
}

/* 更新日（↻）のテキスト */
.blog-single .bs-mod {
  color: #666;
  font-size: 14px;
}
.blog-single .bs-mod__icon {
  margin-right: 6px;
}

/* 更新日と「編集」リンクを横並びにするためのラッパー */
.blog-single .bs-modwrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 従来のヘッダー内「編集」リンク
   - マークアップは残すが、表示は新しい .bs-views__edit 側に一本化するため非表示 */
.blog-single .bs-mod__edit{
  font-size: 14px;
  color: #111;
  text-decoration: underline;
  text-decoration-style: dotted;
  line-height: 1;
  display: none;
}
.blog-single .bs-mod__edit:hover{
  opacity: .8;
}

/* ---- 閲覧数＋編集ボタン（右カラム） --------------------- */

/* 閲覧数表示エリア（右端）…「編集」pill + 目アイコン + 数値 + "views" */
.blog-single .bs-views{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  justify-self: end;  /* グリッド右端に寄せる */
}

/* 閲覧数の左に表示する「編集」pill ボタン */
.blog-single .bs-views__edit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 9999px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
}
.blog-single .bs-views__edit:hover{
  background: #f5f5f5;
}

/* 目アイコン（通常テキストと高さが揃うように少し大きめ） */
.blog-single .bs-views__icon{
  font-size: 14px;
  line-height: 1;
}

/* 閲覧数の数値部分（視認性を高めるため太字） */
.blog-single .bs-views__count{
  font-size: 14px;
  font-weight: 600;
}

/* "views" ラベル（数値の右側に控えめなサイズで） */
.blog-single .bs-views__label{
  font-size: 12px;
  margin-left: 2px;
}

/* ---- タイトル／アイキャッチ ----------------------------- */

/* 記事タイトル（大きめ・行間広め） */
.blog-single .bs-title {
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.25;
  font-weight: 800;
  margin: 18px 0 12px;
}

/* アイキャッチは現状「非表示運用」のため完全に隠す */
.blog-single .bs-thumb { display: none !important; }
.blog-single .bs-thumb img { display: none !important; }


/* =================================================================
   5. 本文エリア（.bs-article / .bs-content）
   -----------------------------------------------------------------
   - Gutenberg が出力する標準要素（h1〜h4, p, ul/ol, blockquote, a 等）の調整
   - .bs-content 直下に限定することで、サイド要素への影響を避ける
================================================================= */

/* 本文全体のラッパー（上に少し余白を空ける） */
.blog-single .bs-article {
  margin-top: 20px;
}

/* 本文テキストの基本スタイル */
.blog-single .bs-content {
  color: #222;
  line-height: 1.9;
  font-size: var(--blog-font-size, 16px);
}

/* 見出し（本文内用） */
.blog-single .bs-content h1,
.blog-single .bs-content h2,
.blog-single .bs-content h3,
.blog-single .bs-content h4 {
  margin: 2.2em 0 0.8em;
  line-height: 1.35;
  font-weight: 800;
}
.blog-single .bs-content h1 { font-size: 1.9em; }
.blog-single .bs-content h2 { fontサイズ: 1.6em; } /* 原文の構造を維持（CSS上は無視される） */
.blog-single .bs-content h3 { font-size: 1.3em; }

/* 段落・リスト・引用 */
.blog-single .bs-content p  { margin: 1.2em 0; }
.blog-single .bs-content ul,
.blog-single .bs-content ol {
  padding-left: 1.2em;
  margin: 1.2em 0;
}
.blog-single .bs-content blockquote {
  border-left: 4px solid #ddd;
  padding: 0.6em 1em;
  color: #555;
  background: #fafafa;
}

/* 本文中リンク（#333 色 / 点線下線） */
.blog-single .bs-content a {
  color: #333;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* 画像共通スタイル（Cover ブロック背景以外） */
.blog-single .bs-content img:not(.wp-block-cover__image-background) {
  display: block;
  max-width: 100%;
  height: auto;
}

# sourceMappingURL=single-blog.css.map


/* =================================================================
   6. Gutenberg 画像ブロックの角丸スタイル
   -----------------------------------------------------------------
   - .wp-block-image の「スタイル＝デフォルト」は角丸なし
   - .is-style-rounded が付いている場合のみ、ほどよい角丸を付与
================================================================= */

/* デフォルトスタイル：角丸なし（四角い画像） */
.blog-single .bs-content .wp-block-image img{
  border-radius: 0;
}

/* 「角丸」スタイル用：やわらかい印象を出すために半径16px程度で丸める */
.blog-single .bs-content .wp-block-image.is-style-rounded img{
  border-radius: 16px;
}


/* =================================================================
   7. YouTube 埋め込み用スタイル（Gutenberg ブロック＋生 iframe）
   -----------------------------------------------------------------
   - Gutenberg の YouTube ブロック（figure.wp-block-embed）向けのレイアウト調整
   - 直下の .wp-block-embed__wrapper に padding-bottom を足すことで、
     iframe の下側に「実際に効く余白」を作る
   - 生の iframe 埋め込み（ショートコード／プラグイン）にも同様の見た目を適用
================================================================= */

/* Gutenberg YouTube ブロック全体（figure / div）の横幅と上下マージン */
.blog-single .bs-content figure.wp-block-embed.is-type-video.wp-block-embed-youtube,
.blog-single .bs-content .wp-block-embed.is-type-video.wp-block-embed-youtube{
  width: 100%;
  max-width: min(100%, var(--yt-max-width));
  margin-inline: auto;                       /* 中央寄せ */
  margin-block-start: var(--yt-margin-top);  /* 上側余白 */
  margin-block-end: var(--yt-margin-bottom); /* 下側余白（広め） */
}

/* 動画の「箱」本体 */
.blog-single .bs-content figure.wp-block-embed.is-type-video.wp-block-embed-youtube > .wp-block-embed__wrapper{
  position: relative;
  width: 100%;
  aspect-ratio: var(--yt-aspect);
  border-radius: var(--yt-radius);
  box-shadow: var(--yt-shadow);
  padding: 0 !important;
  padding-bottom: var(--yt-frame-gap);
  height: auto !important;
  line-height: 0;
}

/* iframe 自体は wrapper の中にぴったりフィットさせる */
.blog-single .bs-content figure.wp-block-embed.is-type-video.wp-block-embed-youtube iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* aspect-ratio が使えるブラウザでは、WP の比率ハック用 :before を無効化 */
@supports (aspect-ratio: 16/9){
  .blog-single .bs-content .wp-has-aspect-ratio > .wp-block-embed__wrapper::before,
  .blog-single .bs-content .wp-embed-aspect-16-9 > .wp-block-embed__wrapper::before,
  .blog-single .bs-content .wp-embed-aspect-4-3  > .wp-block-embed__wrapper::before{
    content: none !important;
    padding: 0 !important;
    display: none !important;
  }
}

/* 直接埋め込まれた iframe（ショートコードやプラグイン経由）の共通スタイル */
.blog-single .bs-content iframe[src*="youtube.com"],
.blog-single .bs-content iframe[src*="youtu.be"]{
  display: block;
  width: 100%;
  max-width: min(100%, var(--yt-max-width));
  margin-inline: auto;
  margin-block-start: var(--yt-margin-top);
  margin-block-end: var(--yt-margin-bottom);
  aspect-ratio: var(--yt-aspect);
  height: auto;
  border: 0;
  border-radius: var(--yt-radius);
  box-shadow: var(--yt-shadow);
}

/* aspect-ratio 非対応ブラウザ向けフォールバック */
@supports not (aspect-ratio: 16/9){
  .blog-single .bs-content figure.wp-block-embed.is-type-video.wp-block-embed-youtube > .wp-block-embed__wrapper{
    position: relative;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 の比率（9/16*100%） */
  }
  .blog-single .bs-content figure.wp-block-embed.is-type-video.wp-block-embed-youtube iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}


/* =================================================================
   8. タグ一覧（.bs-tags）
   -----------------------------------------------------------------
   - 記事下に並ぶタグ一覧。「タグ無し」の場合は #NoTag などを想定
================================================================= */
.blog-single .bs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 20px;
}
.blog-single .bs-tag {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}
.blog-single .bs-tag.is-empty {
  color: #999;
  background: #fafafa;
}


/* =================================================================
   9. X（旧Twitter）共有ボタン
   -----------------------------------------------------------------
   - シンプルなアイコン＋テキストのボタン
   - 枠線とテキスト色を #111 で統一
================================================================= */
.blog-single .bs-share {
  margin-top: 18px;
}
.blog-single .bs-share__x {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #111;
  color: #111;
  text-decoration: none;
}
.blog-single .icon-x {
  width: 18px;
  height: 18px;
  fill: currentColor;
}


/* =================================================================
   10. 前／次記事カード（.bs-prevnext）
   -----------------------------------------------------------------
   - 左に前の記事（Prev）、右に次の記事（Next）を 1:1 で配置
   - Prev は「サムネ → タイトル」、Next は「タイトル → サムネ」という並び
================================================================= */
.blog-single .bs-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(48px, 6vw, 72px);
  margin-bottom: clamp(56px, 7vw, 88px);
}

/* 前後カード共通レイアウト */
.blog-single .bs-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 2px solid #111;
  border-radius: 0;
  padding: 10px;
  text-decoration: none;
  color: inherit;
}

/* 枠線色を白にすることで、背景と馴染ませる（デザイン都合の調整） */
.blog-single .bs-card {
  border-color: #fff;
}

/* サムネイル部分（画像あり／なし共通） */
.blog-single .bs-card__media img,
.blog-single .bs-card__noimg {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: #eee;
}
/* サムネ無しの場合のプレースホルダ */
.blog-single .bs-card__noimg {
  display: grid;
  place-items: center;
  color: #aaa;
  font-size: 12px;
}

/* タイトルはカード中央で縦位置も揃える */
.blog-single .bs-card__title {
  font-weight: 700;
  line-height: 1.4;
  align-self: center;
  text-align: center;
}

/* Prev：左サムネ → 右テキスト */
.blog-single .bs-card--prev {
  grid-template-columns: 120px 1fr;
}

/* Next：左テキスト → 右サムネ */
.blog-single .bs-card--next {
  grid-template-columns: 1fr 120px;
}


/* =================================================================
   11. AUTHOR 情報ボックス
   -----------------------------------------------------------------
   - 丸型アバター＋右側に「名前」「プロフィール文」を配置
   - 枠線・背景とも白で統一し、ページ全体のトーンに合わせる
   - ★今回の改修：
       左列のアバターを、右列本文の高さに対して縦中央へ揃える
================================================================= */
.blog-single .bs-author {
  margin-top: 28px;
}

/* AUTHOR ボックス本体 */
.blog-single .bs-author__box {
  margin-inline: auto;
  border: 2px solid #111;
  border-radius: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  max-width: 720px;
}

/* 枠線・背景とも白に統一（テーマ背景との馴染みを優先） */
.blog-single .bs-author__box {
  border-color: #fff;
  background: #fff;
}

/* ---------------------------------------------------------------
   アバター列ラッパ
   ---------------------------------------------------------------
   役割：
   - グリッド行の中で、左列のアバターを縦方向中央に配置する
   - 実画像 / no-image プレースホルダのどちらでも中央位置を維持する

   今回の現象：
   - 右側プロフィール文が複数行になると .bs-author__box の高さが伸びる
   - しかし左列に縦中央揃え指定が無いため、画像が上付きに見えていた

   対応：
   - align-self: center で、グリッドアイテム自身を縦中央へ
   - display:flex + align-items:center + justify-content:center で、
     内側の画像やプレースホルダも安定して中央配置する
---------------------------------------------------------------- */
.blog-single .bs-author__avatar {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* アバター（画像あり／なし共通の枠） */
.blog-single .bs-author__avatarimg,
.blog-single .bs-author__avatarimg--none{
  width: var(--bs-avatar);
  height: var(--bs-avatar);
  border-radius: 50%;
  overflow: hidden;
}

/* 実画像がある場合 */
.blog-single .bs-author__avatarimg {
  object-fit: cover;
  display: block;
}

/* 画像が無い場合のプレースホルダ（イニシャルなどを中央に配置想定） */
.blog-single .bs-author__avatarimg--none {
  background: #eee;
  color: #aaa;
  display: grid;
  place-items: center;
}

/* AUTHOR 名・プロフィール文 */
.blog-single .bs-author__name { font-weight: 800; font-size: 20px; }
.blog-single .bs-author__bio  { color: #444; }
.blog-single .bs-author__bio .is-empty { color: #aaa; }


/* =================================================================
   12. 関連記事スライダー（.bs-related + Splide）
   -----------------------------------------------------------------
   - `.bs-related.splide` を Splide のルート要素とする構成
     （JS 側で new Splide('.bs-related.splide', {...}) を実行）
   - 横並びのカードを Splide がスライドさせるための土台となる CSS
   - PC: 3枚表示、SP: 1枚表示を想定
   - 矢印はセクション外側（PC）／内側（SP）に絶対配置
   - ★今回の見直し：
       ・横方向の gap と 3枚分の幅計算は CSS ではなく Splide オプション側に統一
       ・CSS 側では flex レイアウトと見た目のみを担当し、transform の量は
         すべて Splide に任せることで「右端だけ隠れる」ズレを防止
       ・free ドラッグ時に「指の動きそのまま」追従させるため、
         ここでは transform の transition を一切指定しない。
       ・関連記事カードは「タイトル枠を 2 行分予約 + 2 行超過は … 省略」
         とすることで、カード高さの不揃いを防ぐ
================================================================= */

/* 関連記事セクション全体の余白と position 基準 */
.blog-single .bs-related {
  margin-top: clamp(56px, 7vw, 96px);
  position: relative;  /* 矢印ボタンの配置基準 */
  margin-bottom: clamp(72px, 8vw, 120px);
  /* Splide の .splide { visibility:hidden; } を上書きし、
     JS（Splide）が不発でも関連記事を確実に表示させるためのフォールバック */
  visibility: visible;
}

/* 見出し */
.blog-single .bs-rel__title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* ビューポート（見える範囲の窓） */
.blog-single .bs-rel__viewport{
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* 横スワイプ中でも縦スクロールは許可 */
}

/* 横に並ぶトラック（Splide の .splide__list と兼用）
   - transform の値とアニメーションは Splide 本体に完全委譲する。
   - ここでは「横に並べる」「ドラッグ時に選択されない」だけを担当し、
     free ドラッグ時の追従を邪魔しないように transition は指定しない。
   - align-items: stretch を加えることで、同一行に並ぶ各スライドを
     同じ高さへ揃えやすくする。 */
.blog-single .bs-rel__track{
  display: flex;
  align-items: stretch;
  user-select: none;
}

/* 各カードの幅
   - 幅計算は Splide の perPage / breakpoints に任せ、
     ここでは「縮まないフレックスアイテム」としてのみ定義する。
   - box-sizing を border-box にして、カード内の padding や border を含めて
     Splide の width 計算とズレにくくする。
   - display:flex にしておくことで、内側の .bs-rel__link を高さいっぱいへ
     伸ばせるようにする。 */
.blog-single .bs-rel__item{
  flex: 0 0 auto;
  display: flex;
  box-sizing: border-box;
}

/* カード本体（オーバーレイや文字の載る箱）
   - ここを縦方向の flex コンテナにし、height:100% でスライド高いっぱいへ
     伸ばすことで、タイトルの長短に関係なくカード外枠を揃える。
   - サムネ → カテゴリ → タイトル → 日付 の順で縦積みし、
     日付は margin-top:auto でカード下端に安定配置する。 */
.blog-single .bs-rel__link{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  overflow: hidden;  /* オーバーレイがはみ出さないようにする */
}

/* サムネイル枠（4:3 比率） */
.blog-single .bs-rel__thumb{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eee;
  z-index: 2;  /* 背景オーバーレイより上に画像を出す */
}

/* サムネ画像／no-image プレースホルダ共通 */
.blog-single .bs-rel__thumb img,
.blog-single .rel-noimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サムネ無し時の「NO IMAGE」などテキスト表示用 */
.blog-single .rel-noimg {
  display: grid;
  place-items: center;
  color: #aaa;
  font-size: 12px;
}

/* （※ 下の 17 章でホバー演出は無効化しているが、
       もともとの黒スライド用のベースは残している） */
.blog-single .bs-rel__link::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(51,51,51,.9);        /* #333 相当 */
  transform: translateY(calc(100% + 2px));
  transition: transform .6s ease;
  pointer-events: none;
  z-index: 1;
}
.blog-single .bs-rel__link:hover::after{
  transform: translateY(0);
}

/* カテゴリ・タイトル・日付はオーバーレイより上に出し、ホバー時は白に反転 */
.blog-single .bs-rel__cat,
.blog-single .bs-rel__ttl,
.blog-single .bs-rel__date{
  position: relative;
  z-index: 2;
  color: inherit;
}
.blog-single .bs-rel__link:hover .bs-rel__cat,
.blog-single .bs-rel__link:hover .bs-rel__ttl,
.blog-single .bs-rel__link:hover .bs-rel__date{
  color: #fff;
}

/* テキストサイズなどの微調整 */
.blog-single .bs-rel__cat  { font-size: 13px; color: #666; }

/* 関連記事タイトル
   - line-height は CSS 変数で一元管理
   - min-height で「2行分の表示枠」を先に確保
   - -webkit-line-clamp で 2 行を超えた分を … 省略
   - overflow-wrap:anywhere を入れて、英数字連続や長い URL 断片が
     ある場合でもカード幅からはみ出しにくくする */
.blog-single .bs-rel__ttl{
  font-weight: 700;
  line-height: var(--bs-rel-title-line-height);
  min-height: var(--bs-rel-title-min-height);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bs-rel-title-lines);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* パスワード保護タイトルなどで先頭に SVG が入る場合の高さ暴れを抑える */
.blog-single .bs-rel__ttl svg{
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  flex: 0 0 auto;
}

/* 日付はカード最下段に押し下げ、各カードの下端ラインを揃える */
.blog-single .bs-rel__date{
  margin-top: auto;
  font-size: 13px;
  color: #666;
}

/* ナビゲーションボタン（丸ボタン）
   - .splide__arrow とクラスを共有させることで、Splide が click をハンドルする */
.blog-single .bs-rel__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #111;
  border-radius: 9999px;
  background: #fff;
  display: grid;
  place-items: center;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.blog-single .bs-rel__btn[data-dir="-1"]{
  left: calc(-42px - 8px); /* 左側に 8px はみ出し */
}
.blog-single .bs-rel__btn[data-dir="1"] {
  right: calc(-42px - 8px);
}
.blog-single .bs-rel__btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}


/* =================================================================
   13. レスポンシブ対応（～720px：スマートフォン）
   -----------------------------------------------------------------
   - フォントサイズ・アバターサイズ・関連記事の枚数・前後記事カードの幅などを調整
================================================================= */
@media (max-width: 720px) {
  /* SP では本文フォントを小さめにし、アバター径・YouTube 幅も SP 向け設定に */
  .blog-single {
    --bs-avatar: 72px;
    --blog-font-size: var(--blog-font-size-sp);
    --yt-max-width: var(--yt-max-width-sp);
  }

  /* メタ情報は縦並び（日付 → カテゴリ+更新日 → 閲覧数）に変更 */
  .blog-single .bs-meta {
    grid-template-columns: 1fr;
  }

  /* カテゴリ+更新日ブロックは高さ固定を解除し、縦線も短めに */
  .blog-single .bs-catmod{
    height: auto;
    align-items: flex-start;
    padding-left: 14px;
  }
  .blog-single .bs-catmod::before{
    top: .25em;
    height: 1.2em;
  }

  /* 前後記事カード：上下方向の余白を少し浅くし、1カラムに並べ替え */
  .blog-single .bs-prevnext {
    margin-top: clamp(28px, 5vw, 40px);
    margin-bottom: clamp(36px, 6vw, 56px);
    grid-template-columns: 1fr;
  }

  /* 前後カードのサムネ幅を少し小さめに */
  .blog-single .bs-card--prev {
    grid-template-columns: 100px 1fr;
  }
  .blog-single .bs-card--next {
    grid-template-columns: 1fr 100px;
  }

  /* AUTHOR ボックスの列幅も SP 用に縮小 */
  .blog-single .bs-author__box {
    grid-template-columns: 72px 1fr;
  }

  /* 関連記事は 1 枚表示（幅 100%）に切り替え
     ※ perPage の breakpoints と組み合わせて、SP では常に 1 カード分だけを表示 */
  .blog-single .bs-rel__item {
    flex: 0 0 100%;
  }

  /* 矢印はセクション内側に寄せて配置（外側に飛び出さないように） */
  .blog-single .bs-rel__btn{
    width: 36px;
    height: 36px;
  }
  .blog-single .bs-rel__btn[data-dir="-1"]{
    left: 8px;
  }
  .blog-single .bs-rel__btn[data-dir="1"] {
    right: 8px;
  }

  /* カード内の余白は少し控えめにする */
  .blog-single .bs-rel__link{
    padding: 8px;
  }

  /* セクション全体とページ下部の余白も SP 用に再調整 */
  .blog-single .bs-related {
    margin-top: clamp(40px, 7vw, 64px);
  }
  .blog-single .bs-wrap {
    padding-block-end: clamp(40px, 7vw, 72px);
  }
}


/* =================================================================
   14. Reveal アニメーション基盤
   -----------------------------------------------------------------
   - body.is-mounted 時に .bs-wrap をふわっと表示させるベース設定
   - [data-reveal] 属性を付けた要素はスクロールイン時に下からスライドイン
   - prefers-reduced-motion: reduce の場合はアニメーションを無効化
================================================================= */
.blog-single .bs-wrap{
  opacity: 0;
  transform: translateY(var(--enter-distance, 24px));
  transition:
    transform var(--enter-dur, .5s) ease-out,
    opacity   var(--enter-dur, .5s) ease-out;
  will-change: transform, opacity;
}

/* 初回マウント完了後にフェードインさせる */
body.is-mounted .blog-single .bs-wrap{
  opacity: 1;
  transform: none;
}

/* セクション単位の Reveal 用（スクロールインで .is-inview が付く想定） */
[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-distance, 18px));
  transition:
    transform var(--reveal-dur, .42s) var(--reveal-ease, cubic-bezier(.215,.61,.355,1)),
    opacity   var(--reveal-dur, .42s) var(--reveal-ease, cubic-bezier(.215,.61,.355,1));
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

/* 可視範囲に入った要素を表示状態にする */
.is-inview[data-reveal]{
  opacity: 1;
  transform: none;
}

/* 向き "up" はデフォルトのため、ここでは特に変更しない */
[data-reveal="up"]{}

/* 動きの少ない環境設定が有効な場合はアニメーションを全面的にオフにする */
@media (prefers-reduced-motion: reduce){
  body.is-mounted .blog-single .bs-wrap,
  [data-reveal]{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* =================================================================
   15. ファーストビューの Reveal 無効化（Gallery ページと揃える）
   -----------------------------------------------------------------
   - .bs-wrap / パンくず / ヘッダは初期表示から表示済みとし、
     Reveal アニメーションの影響を受けないようにする
================================================================= */
.blog-single .bs-wrap{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.blog-single .bs-breadcrumb[data-reveal],
.blog-single .bs-head[data-reveal]{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* =================================================================
   16. 区切り線の強調（太さのみ変更）
   -----------------------------------------------------------------
   - .bs-rule の線をやや太くし、セクション境界を視認しやすくする
================================================================= */
.blog-single .bs-rule {
  border-top-width: 2px;
}


/* =================================================================
   17. 関連セクション向けの Reveal 無効化・ホバー演出の停止
   -----------------------------------------------------------------
   - JS + Splide によるスライド挙動を優先させるため、hover 演出は抑制
   - 関連カードに限り黒スライド＋文字色反転の演出を止める
   - また、関連セクション配下の data-reveal も常に表示状態にする
================================================================= */

/* 黒スライド用 ::after を生成しないことでアニメーション自体を無効化 */
.blog-single .bs-related .bs-rel__link::after{
  content: none !important;
  transition: none !important;
  transform: none !important;
}

/* ホバー時の文字色反転も無効化して、常に通常の色を維持する */
.blog-single .bs-related .bs-rel__link:hover .bs-rel__cat,
.blog-single .bs-related .bs-rel__link:hover .bs-rel__ttl,
.blog-single .bs-related .bs-rel__link:hover .bs-rel__date{
  color: inherit !important;
}

/* 関連セクション配下の Reveal を全面停止（常に表示済み状態） */
.blog-single .bs-related [data-reveal]{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}