@charset "UTF-8";
/* =========================================================
   コラム詳細（single-blog.php）固有スタイル
   - 共通（ヒーロー / パンくず / 2カラム / サイドバー枠 / アイキャッチ /
     青バー見出し / 関連枠 / カードグリッド / バナーsticky）は work-common.css に集約。
   - 関連記事カード（.blog-archive-card）は archive-blog.css を流用（single でも読込）。
   - single-blog 固有：記事ヘッダー（日付＋H1）/ 本文ラッパ / 前後記事ナビ / 戻るボタン。
   ========================================================= */

/* ========================================
   記事ヘッダー（日付 + H1 タイトル）
   ======================================== */
.blog-single__header {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .blog-single__header {
    margin-bottom: 2rem;
  }
}

.blog-single__date {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: #6b7378;
}

.blog-single__title {
  margin-top: 0.625rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .blog-single__title {
    font-size: 1.875rem;
  }
}

/* ========================================
   本文ラッパ
   - SWELL の .post_content を併用して目次・ブロック等のスタイルを活かす。
   - h2 の青バー見出しは work-common.css 側で .post_content を上書きして適用。
   ======================================== */
.blog-single__content {
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .blog-single__content {
    margin-top: 2.5rem;
  }
}

/* ========================================
   前後記事ナビ（左=前 / 右=次）
   ======================================== */
.blog-single__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .blog-single__nav {
    gap: 1rem;
    margin-top: 3.5rem;
  }
}

.blog-single__navlink {
  display: flex;
  align-items: center; /* タイトルは縦中央。矢印は align-self:stretch で全高 */
  gap: 0;
  min-height: 4rem;
  padding: 0; /* 矢印を枠の端に密着させるため余白なし（テキスト側に padding を持たせる） */
  border: 3px solid #1178a8; /* 直角・青太枠 */
  border-radius: 0;
  color: #2b2b2b;
  overflow: hidden; /* 端の青塗り矢印を直角の枠内にきっちり収める */
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-single__navlink--next {
  grid-column: 2;
  flex-direction: row-reverse; /* 矢印を右端へ。テキストは左揃えのまま */
}
/* 前の記事が無いとき、次の記事を右カラムに残す */
.blog-single__navlink--prev {
  grid-column: 1;
}

/* 矢印：枠の端（prev=左 / next=右）に密着する全高の青塗りブロック（青地に白矢印・直角）。
   prev=左/next=右の配置は既存の row-reverse を維持。リンク機能・ホバーは不変。 */
.blog-single__navarrow {
  flex-shrink: 0;
  align-self: stretch; /* 枠の高さいっぱいに伸ばす */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* 青塗り部分の横幅 */
  border-radius: 0;
  background-color: #1178a8;
  font-family: "Montserrat", sans-serif;
  font-size: 16.94px; /* ‹ › グリフを 約10.67×16.94px に（この字の送り幅≈0.63em×font-size） */
  line-height: 1;
  color: #fff;
}

.blog-single__navtitle {
  flex: 1; /* 矢印以外の領域いっぱい。テキストは左寄せ */
  text-align: left;
  padding: 0.5rem 0.75rem; /* 枠 padding を外した分の余白 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .blog-single__navtitle {
    font-size: 0.875rem;
  }
}

/* ホバー：ボーダーをテーマ青／背景を強め／影＋わずかに浮かせて、変化を明確に */
@media (any-hover: hover) {
  .blog-single__navlink:hover {
    border-color: #2193c8;
    background-color: rgba(33, 147, 200, 0.1);
    box-shadow: 0 0.375rem 0.875rem rgba(33, 147, 200, 0.2);
    transform: translateY(-0.125rem);
    opacity: 1;
  }
}

/* ========================================
   「ブログ一覧へ戻る」ボタン（.button c-grad c-arrow 流用）
   ======================================== */
.blog-single__back {
  margin-top: 2rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .blog-single__back {
    margin-top: 2.5rem;
  }
}
.blog-single__back-button {
  width: auto;
  justify-content: center;
  gap: 1.125rem;
  padding: 1rem 2.625rem 0.9375rem;
  font-size: 0.9375rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .blog-single__back-button {
    font-size: 1rem;
  }
}

/* ========================================
   関連記事グリッド（.work-grid + .blog-archive-card を流用）
   本文カラム内なので 2 列を基準にする（広い画面で3列）。
   ======================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .blog-single__related .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 〔追加〕アイキャッチ↔本文(FV画像→最初の文)の間隔を 40px に。
   ※ SWELLが「.l-mainContent__inner > :first-child { margin-top:0 !important }」を当てるため、
     本文ラッパ .post_content 側の margin-top は無効化される（アイキャッチと本文が密着してしまう）。
   → アイキャッチ（l-mainContent__inner の外側の要素）の margin-bottom で間隔を確保する。 */
.blog-single__eyecatch {
  margin-bottom: 40px;
}

/* 〔追加〕関連記事＝新着8件。PC（≥768px）は7・8件目を非表示で6件、SP（<768px）は8件表示。 */
@media screen and (min-width: 768px) {
  .blog-single__related .work-grid > *:nth-child(n + 7) {
    display: none;
  }
}

/* =========================================================
   〔追加5〕目次（SWELL .p-toc.-double）デザイン上書き
   - 見た目（枠・色・余白）のみ。開閉JS・DOM・counter生成・.p-toc__expandBtn は不触。
   - #main_content 接頭で親SWELL（#main_content .p-toc / .p-toc.-double）より高詳細度を確保し
     !important を使わずに上書き。アクセント #1178A8。
   ======================================================== */
/* 箱：斜線グレー背景＋上下二重線 → 淡い水色背景＋アクセント太枠（直角） */
#main_content .p-toc.-double {
  background: #f7fdff;
  border: 3px solid #1178a8;
  border-radius: 0;
  padding: 1.5em 1.25em 1.25em;
}
@media screen and (min-width: 600px) {
  #main_content .p-toc.-double {
    padding: 1.75em 2em 1.5em;
  }
}
/* タイトル「目次」：アクセント色＋下に区切り線（中央寄せ・アイコンは色継承で青に） */
#main_content .p-toc.-double .p-toc__ttl {
  margin-bottom: 0.85em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid #d8dddf;
  color: #1178a8;
  font-weight: 700;
}
/* リンク：通常はダーク／ホバーでアクセント */
#main_content .p-toc.-double .p-toc__link {
  color: #2b2b2b;
}
#main_content .p-toc.-double .p-toc__link:hover {
  color: #1178a8;
  opacity: 1;
}
/* 番号マーカーをアクセント色に（ol の ::marker のみ。生成構造は不触） */
#main_content .p-toc.-double .p-toc__list li::marker {
  color: #1178a8;
}

/* =========================================================
   2026-07-06 追加：BLOG詳細PC を Figma(node 2549-7882) に一致
   - すべて .blog-single* にスコープ（work-common.css共有h2は blog-single だけ上書き）。
   ========================================================= */

/* ---- コンテナ：内容1200px(x120) ---- */
.blog-single__inner {
  max-width: 1250px;
}

/* ---- 2カラム（PC）：本文917 + サイドバー244 / gap40 ---- */
@media screen and (min-width: 768px) {
  .blog-single__layout {
    grid-template-columns: minmax(0, 1fr) 244px;
    gap: 40px;
  }
}
/* 中間幅（タブレット手前 768〜1100px）：サイドバーを本文の下へ（WORK/BLOG一覧と同対策） */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .blog-single__layout {
    grid-template-columns: 1fr;
  }
}

/* ---- パンくず：16px/#2b2b2b/シェブロン ---- */
.blog-single__breadcrumb {
  gap: 8px;
  padding-block: 27px 25px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
.blog-single__breadcrumb a {
  color: #2b2b2b;
}
.blog-single__breadcrumb-sep {
  width: 5px;
  height: 8px;
  color: transparent;
  overflow: hidden;
  background: url("../images/common/breadcrumb_arrow.svg") left center/5px 8px no-repeat;
}

/* ---- 記事ヘッダー：日付Noto Medium16px / タイトルNoto Bold36px ---- */
.blog-single__header {
  margin-bottom: 20px; /* ヘッダー→アイキャッチ 20px */
}
@media screen and (min-width: 768px) {
  .blog-single__header {
    margin-bottom: 20px;
  }
}
.blog-single__date {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
.blog-single__title {
  margin-top: 7px; /* 日付→タイトル 7px */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .blog-single__title {
    font-size: 36px; /* Figma 36px */
  }
}

/* ---- アイキャッチ：角丸なし(直角・Figma)・917×519比 ---- */
.blog-single__eyecatch {
  border-radius: 0;
  aspect-ratio: 917 / 519;
}
.blog-single__eyecatch img {
  border-radius: 0;
  height: 100%;
  object-fit: cover;
}

/* ---- 本文h2：青バー4px×33px#1178a8・gap20・Noto Bold25px（blog-single にスコープ上書き） ---- */
.blog-single__heading,
.blog-single__content.post_content h2:where(:not([class*="swell-block"])) {
  margin-top: 44px;
  padding: 0 0 0 24px; /* バー4 + gap20 */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .blog-single__heading,
  .blog-single__content.post_content h2:where(:not([class*="swell-block"])) {
    font-size: 25px;
  }
}
.blog-single__heading::before,
.blog-single__content.post_content h2:where(:not([class*="swell-block"]))::before {
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 33px;
  background-color: #1178a8;
  border-radius: 0;
}

/* ---- 本文：Noto Regular 16px lh1.8 #2b2b2b（リード・段落） ---- */
.blog-single__content.post_content {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
.blog-single__content.post_content p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
/* 本文中の画像：全幅・角丸なし（Figmaの記事内画像は直角） */
.blog-single__content.post_content .wp-block-image,
.blog-single__content.post_content figure.wp-block-image {
  border-radius: 0;
}
.blog-single__content.post_content .wp-block-image img {
  width: 100%;
  border-radius: 0;
}

/* ---- 前後記事ナビ：376px枠×2を中央寄せ(gap62)・箱高90px・タイトル16px ---- */
@media screen and (min-width: 768px) {
  .blog-single__nav {
    display: flex;
    justify-content: center;
    gap: 62px;
    margin-top: 56px;
  }
  .blog-single__navlink {
    width: 376px;
    min-height: 90px;
  }
  .blog-single__navlink--prev,
  .blog-single__navlink--next {
    grid-column: auto; /* flex化に伴い grid-column 指定を無効化 */
  }
  .blog-single__navtitle {
    padding: 12px 28px;
    font-size: 16px;
    line-height: 1.375; /* 22/16 */
    letter-spacing: 0.08em;
    -webkit-line-clamp: 3; /* 箱高90pxに3行まで（Figmaの次記事は3行） */
    line-clamp: 3;
  }
}

/* ---- 戻るボタン：nav から33px（Figma gap-33） ---- */
.blog-single__back {
  margin-top: 33px;
}
@media screen and (min-width: 768px) {
  .blog-single__back {
    margin-top: 33px;
  }
}

/* ---- 関連記事：本文917幅で3列・col gap32・見出し→カード余白 ---- */
@media screen and (min-width: 768px) {
  .blog-single__related .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 30px; /* 見出し(関連記事)→カード */
  }
}

/* ---- サイドバー：最近の投稿/カテゴリー（青121px+灰線・項目#ececec罫線・縦余白） ---- */
.blog-single__side .work-side {
  gap: 51px;
}
.blog-single__side .work-side__title {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 6px;
  border-bottom: 2px solid #d9d9d9;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
.blog-single__side .work-side__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 121px;
  height: 2px;
  background-color: #1178a8;
}
.blog-single__side .work-linklist {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.blog-single__side .work-linklist__item {
  border-bottom: 2px solid #ececec;
}
.blog-single__side .work-linklist__link {
  display: block;
  padding: 0 0 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}

/* ---- 関連記事カード：右下の丸矢印が本文に重ならないよう、本文エリア下に矢印分の余白を確保 ----
   矢印は position:absolute（右下）。本文(excerpt)がカード下端まで伸びると矢印と重なるため、
   本文コンテナ下に矢印(29px)＋余白ぶんの padding-bottom を確保して本文を矢印の上で止める。
   ※ .blog-single__related にスコープ（BLOG一覧カードには影響させない）。 */
.blog-single__related .blog-archive-card__body {
  padding-bottom: 42px;
}

/* =========================================================
   2026-07-06 追加②：SWELLの本文コンテンツ幅制限を解除（Figma準拠で本文をメインカラム全幅に）
   - 症状：SWELLが .post_content に width:820px＋左右padding16px を当て、本文段落・画像が
     788pxに縮み左にインデント（Figmaは本文917px全幅）。
   - 対策：.blog-single__content.post_content を全幅化。子要素も全幅・左端揃え。
     目次(p-toc)だけはFigma通り828px中央に据える。本文中画像は917×519直角にトリミング。
   - すべて .blog-single* / #main_content .p-toc にスコープ（他ページ・SWELL全体へ非波及）。
   ========================================================= */
/* 本文ラッパ .l-mainContent__inner が max-width(≈820)＋中央寄せで本文を820pxに制限している。
   これを解除して本文をメインカラム全幅(916)に。※ヘッダー/アイキャッチは inner の外なので既に全幅。 */
.blog-single__main .l-mainContent__inner {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.blog-single__content.post_content {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.blog-single__content.post_content > * {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
/* 目次：Figmaは本文より内側の828px中央（本文は全幅、目次のみ少し狭い） */
#main_content .p-toc.-double {
  max-width: 828px;
  margin-left: auto;
  margin-right: auto;
}
/* 本文中画像：全幅・917×519直角（Figmaのセクション画像と同トリミング） */
.blog-single__content.post_content figure.wp-block-image {
  width: 100%;
  max-width: none;
}
.blog-single__content.post_content figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 917 / 519;
  height: auto;
  object-fit: cover;
  border-radius: 0;
}

/* =========================================================
   2026-07-07 追加：BLOG詳細はヒーロー帯なし（Figma 2549-7882＝パンくずから開始）。
   ヘッダー(80px)下からパンくずまでの余白をFigma(パンくず y245)に合わせる。
   ※ single-blog.php でヒーロー出力を停止済み。ここは上余白の補正のみ。
   ========================================================= */
@media screen and (min-width: 768px) {
  .blog-single__inner {
    padding-top: 40px; /* ヘッダー直下に適度な余白（ヒーロー跡の大きな空白は作らない） */
  }
}