@charset "UTF-8";
/* ==========================================================================
   column.css  —  コラム機能の本体スタイル（構造層）
   wp-column-kit

   ★このファイルは編集しないでください。
     色・書体は1つも持たず、すべて column-tokens.css の変数を参照します。
     配色を変えたいときは column-tokens.css を、
     個別の逸脱は column-skin.css を編集してください。

   読み込み順（必須）
     1. column-tokens.css    変数定義
     2. column-scaffold.css  土台（導入先が .container 等を持たない場合のみ）
     3. column.css           このファイル
     4. column-skin.css      任意の上書き

   前提
     - 【satooya-column 作業コピー】rem 値はすべて px に換算済み（X-T9 は html が62.5%でないため）。
       （scaffold は読み込まない設定。html の font-size は変更しない）
     - ブレークポイントは TAB = max-width:1080px ／ SP = max-width:767px の2点のみ。
     - .container / .child__content / .mv-child / .main-title / .main-btn /
       .breadcrumb / .pagenavi は導入先テーマまたは column-scaffold.css が提供する。

   目次
     01. 共通（一覧・詳細）
     02. 一覧 - カテゴリ絞り込み
     03. 一覧 - 記事カード
     04. 一覧 - 0件表示
     05. 一覧 - ページネーション（既存 .pagenavi の補完）
     06. 詳細 - 記事ヘッダー
     07. 詳細 - 目次
     08. 詳細 - 本文
     09. 詳細 - シェア
     10. 詳細 - 前後記事ナビ
     11. 詳細 - 関連記事
     12. TAB（max-width:1080px）
     13. SP（max-width:767px）
   ========================================================================== */


/* ==========================================================================
   01. 共通（一覧・詳細）
   ========================================================================== */

/* パンくず最終要素（記事タイトル）が長い場合の省略
   .breadcrumb 自体は既存クラスのまま使い、最終要素にだけ修飾を足す */
.blog__crumb-title {
  display: inline-block;
  max-width: 30em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* style.css L58-60 で :focus{outline:0} が全体に効いているため、
   ブログ内の操作可能要素にだけキーボードフォーカスリングを戻す */
.blog__cate-item:focus-visible,
.blog__card-link:focus-visible,
.blog__meta-cate:focus-visible,
.blog__toc-title:focus-visible,
.blog__toc-list a:focus-visible,
.blog__body a:focus-visible,
.blog__share-list a:focus-visible,
.blog__share-list button:focus-visible,
.blog__pnav-item:focus-visible {
  outline: 2px solid var(--col-marker);
  outline-offset: 2px;
}


/* ==========================================================================
   02. 一覧 - カテゴリ絞り込み（.voice__id .service__cate li L4044-4082 を転用）
   ========================================================================== */

.blog__cate {
  position: relative;
  margin-bottom: 60px;
}

.blog__cate-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--col-text-sub);
  margin-bottom: 15px;
}

/* .child__title03:before（20px円）の縮小版 */
.blog__cate-label:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-gradient);
  flex-shrink: 0;
}

.blog__cate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.blog__cate-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  background: var(--col-bg);
  box-shadow: 0 0 12px var(--col-shadow);
  border-radius: 100px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--col-accent);
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .blog__cate-item:hover {
    background: var(--col-bg-soft);
  }
}

.blog__cate-item.is-active {
  background: var(--col-accent);
  color: var(--col-bg);
  box-shadow: none;
}


/* ==========================================================================
   03. 一覧 - 記事カード（.voice__list:not(:has(.swiper)) L3967-4011 を踏襲）
   ========================================================================== */

.blog__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 60px;
}

.blog__card {
  display: flex;
  width: calc((100% - 120px) / 3);
}

.blog__card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* サムネイル ------------------------------------------------------------- */
.blog__card-thumb {
  aspect-ratio: 630 / 400;
  border-radius: 5px;
  overflow: hidden;
}

.blog__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: all .5s ease;
}

@media only screen and (min-width: 768px) {
  .blog__card-link:hover .blog__card-thumb img {
    transform: scale(1.1);
    transition: all .6s ease;
  }
}

/* アイキャッチ未設定時のプレースホルダ
   （WP実装では assets/img/blog/noimage.jpg に差し替え可。§E参照） */
.blog__card-thumb--noimage {
  position: relative;
  background: var(--col-bg-soft);
}

.blog__card-thumb--noimage:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--col-noimage-mark);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32% auto;
  opacity: .3;
}

/* メタ行 ----------------------------------------------------------------- */
.blog__card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 15px 0 10px;
}

/* .voice__label span L2821-2832 と同値 */
.blog__card-cate {
  display: block;
  padding: 5px 12px;
  background: var(--col-marker);
  border-radius: 4px;
  font-size: 12px;
  line-height: normal;
  font-weight: 400;
  color: var(--col-accent);
  flex-shrink: 0;
}

.blog__card-date {
  font-family: var(--col-font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--col-text-sub);
}

/* タイトル --------------------------------------------------------------- */
.blog__card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(18px * 1.6 * 2);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--col-text);
  transition: color .3s ease-in-out;
}

@media only screen and (min-width: 768px) {
  .blog__card-link:hover .blog__card-title {
    color: var(--col-accent);
  }
}

/* 抜粋（.voice__detail L2923-2926 と同じ区切り表現） --------------------- */
.blog__card-body {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--col-line);
}

.blog__card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.8;
  color: var(--col-text-sub);
}


/* ==========================================================================
   04. 一覧 - 記事0件時
   ========================================================================== */

.blog__empty {
  text-align: center;
  padding: 80px 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--col-text-sub);
}


/* ==========================================================================
   05. 一覧 - ページネーション
   既存 .pagenavi（L1815-1855）はそのまま利用し、
   タップターゲット44px確保のためだけを追記する（見た目は変更しない）
   ========================================================================== */

/* 数字のリンクにタップターゲット44pxを確保する。
   前へ／次への矢印は 42px の正円で、min-height を当てると縦だけ伸びて
   楕円になってしまうため除外する（矢印側は下の :after で44pxを確保する）。 */
.pagenavi .wp-pagenavi a:not(.previouspostslink):not(.nextpostslink) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagenavi .wp-pagenavi .previouspostslink,
.pagenavi .wp-pagenavi .nextpostslink {
  position: relative;
}

/* 42px円の当たり判定を44pxに拡張（透明・見た目に影響なし） */
.pagenavi .wp-pagenavi .previouspostslink:after,
.pagenavi .wp-pagenavi .nextpostslink:after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
}


/* ==========================================================================
   06. 詳細 - 記事ヘッダー
   ========================================================================== */

/* .voice__id .service L4012-4014 と同値の読み物幅 */
.blog__article {
  max-width: 840px;
  margin: 0 auto;
}

.blog__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
}

/* .voice__label span L2821-2832 と同値のピル（詳細ではリンク） */
.blog__meta-cate {
  position: relative;
  display: block;
  padding: 5px 12px;
  background: var(--col-marker);
  border-radius: 4px;
  font-size: 12px;
  line-height: normal;
  font-weight: 400;
  color: var(--col-accent);
}

@media only screen and (min-width: 768px) {
  .blog__meta-cate:hover {
    background: var(--col-marker-strong);
  }
}

/* 見た目を変えずにタップ領域を44pxへ拡張 */
.blog__meta-cate:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

.blog__meta-date,
.blog__meta-update {
  font-family: var(--col-font-en);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--col-text-sub);
}

/* .voice__title L2833-2840 と同値（margin のみ調整） */
.blog__title {
  font-size: 33px;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--col-text);
  word-break: auto-phrase;
  margin-bottom: 40px;
}

/* .voice__id .service > .voice__img L4016-4019 の radius を踏襲 */
.blog__eyecatch {
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 60px;
}

.blog__eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ==========================================================================
   07. 詳細 - 目次（.solution__nav-list L3812-3857 の語彙を踏襲）
   ========================================================================== */

.blog__toc {
  background: var(--col-bg-soft);
  border-radius: 5px;
  padding: 40px;
  margin-bottom: 60px;
}

.blog__toc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--col-accent-dark);
  cursor: pointer;
  list-style: none;
}

.blog__toc-title::-webkit-details-marker {
  display: none;
}

.blog__toc-title:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--col-gradient);
  flex-shrink: 0;
}

/* 開閉インジケータ */
.blog__toc-title:after {
  content: "";
  display: block;
  position: relative;
  top: -3px;
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--col-accent);
  border-bottom: 2px solid var(--col-accent);
  transform: rotate(45deg);
  transition: transform .3s ease;
  flex-shrink: 0;
}

.blog__toc[open] .blog__toc-title:after {
  top: 3px;
  transform: rotate(-135deg);
}

.blog__toc-list {
  counter-reset: blog-toc;
  margin-top: 20px;
  border-left: 1px solid var(--col-line);
}

.blog__toc-list li {
  display: flex;
  align-items: flex-start;
  padding: 12px 0 12px 24px;
}

/* h2レベル: Barlow の連番 */
.blog__toc-list > li:not(.is-lv3) {
  counter-increment: blog-toc;
}

.blog__toc-list > li:not(.is-lv3):before {
  content: counter(blog-toc) ".";
  font-family: var(--col-font-en);
  font-weight: 700;
  color: var(--col-accent);
  margin-right: 8px;
  flex-shrink: 0;
}

.blog__toc-list a {
  font-size: 16px;
  line-height: 1.5;
  color: var(--col-text);
}

.blog__toc-list a:hover {
  color: var(--col-accent);
  text-decoration: underline;
}

/* h3レベル: 1段インデント＋小矢印 */
.blog__toc-list .is-lv3 {
  padding-left: 44px;
}

.blog__toc-list .is-lv3:before {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 5px 8px 0 0;
  background-color: var(--col-text-sub);
  -webkit-mask: var(--col-icon-arrow-sub) no-repeat center center/contain;
  mask: var(--col-icon-arrow-sub) no-repeat center center/contain;
  flex-shrink: 0;
}

.blog__toc-list .is-lv3 a {
  font-size: 14px;
  color: var(--col-text-sub);
}


/* ==========================================================================
   08. 詳細 - 本文
   the_content() の素の HTML を子孫セレクタで受ける（編集者にクラス付与を要求しない）
   ========================================================================== */

.blog__body {
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: .03em;
  color: var(--col-text);
}

.blog__body > *:first-child {
  margin-top: 0;
}

/* --- 段落・インライン ---------------------------------------------------- */
.blog__body p {
  margin-bottom: 30px;
}

.blog__body p:last-child {
  margin-bottom: 0;
}

.blog__body p:empty {
  display: none;
}

.blog__body strong,
.blog__body b {
  font-weight: 700;
  color: var(--col-accent-dark);
}

/* アンダーラインマーカー */
.blog__body em,
.blog__body i {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(transparent 60%, var(--col-marker-strong) 60%);
}

.blog__body a {
  color: var(--col-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.blog__body a:hover {
  text-decoration-thickness: 2px;
  opacity: .7;
}

/* .footer__nav / .header__menu と同じ外部リンク表現 */
.blog__body a[target="_blank"]:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-color: var(--col-accent);
  -webkit-mask: var(--col-icon-external) no-repeat center center/contain;
  mask: var(--col-icon-external) no-repeat center center/contain;
}

.blog__body hr {
  border: none;
  border-top: 1px solid var(--col-line);
  margin: 60px 0;
}

/* --- 見出し -------------------------------------------------------------- */
/* h2: .child__title02 L1510-1539 の再現 */
.blog__body h2 {
  position: relative;
  font-size: 27px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--col-text);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--col-line);
  margin: 80px 0 30px;
}

.blog__body h2:before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 30px;
  border-bottom: 1px solid var(--col-accent);
  z-index: 1;
}

/* h3: .child__title03 L1555-1578 の再現 */
.blog__body h3 {
  display: flex;
  gap: 10px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--col-text);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--col-line);
  margin: 50px 0 20px;
}

.blog__body h3:before {
  content: "";
  position: relative;
  top: 6px;
  width: 20px;
  height: 20px;
  background: var(--col-gradient);
  border-radius: 50%;
  flex-shrink: 0;
}

/* h4: .child__subtit01（18px/700/teal）＋ 左罫線 */
.blog__body h4 {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--col-accent);
  padding-left: 14px;
  border-left: 3px solid var(--col-marker);
  margin: 36px 0 16px;
}

/* h5/h6 は運用上禁止。混入時のフォールバック */
.blog__body h5,
.blog__body h6 {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--col-text);
  padding-left: 14px;
  border-left: 3px solid var(--col-marker);
  margin: 36px 0 16px;
}

/* 画像回り込みの解除 */
.blog__body h2,
.blog__body h3,
.blog__body h4 {
  clear: both;
}

/* 目次ジャンプ時に固定ヘッダーへ潜り込ませない（必須） */
.blog__body h2,
.blog__body h3 {
  scroll-margin-top: 180px;
}

/* 見出し直後の余白ルール */
.blog__body h2 + *,
.blog__body h3 + *,
.blog__body h4 + * {
  margin-top: 0;
}

.blog__body h2 + h3,
.blog__body h3 + h4 {
  margin-top: 30px;
}

/* --- リスト -------------------------------------------------------------- */
.blog__body ul {
  margin: 30px 0;
  padding-left: 0;
}

.blog__body ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 2;
}

.blog__body ul li:before {
  content: "";
  position: absolute;
  left: 4px;
  top: .85em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-gradient);
}

.blog__body ol {
  counter-reset: blog-ol;
  margin: 30px 0;
  padding-left: 0;
}

.blog__body ol li {
  counter-increment: blog-ol;
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 2;
}

.blog__body ol li:before {
  content: counter(blog-ol);
  position: absolute;
  left: 0;
  top: .35em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--col-accent);
  color: var(--col-bg);
  font-family: var(--col-font-en);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog__body li:last-child {
  margin-bottom: 0;
}

/* 入れ子リスト */
.blog__body ul ul,
.blog__body ul ol,
.blog__body ol ol,
.blog__body ol ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.blog__body ul ul li:before {
  background: var(--col-line);
}

.blog__body dt {
  font-weight: 700;
  color: var(--col-accent);
  margin-top: 20px;
}

.blog__body dd {
  padding-left: 1em;
  margin-top: 6px;
}

/* --- 引用 ---------------------------------------------------------------- */
.blog__body blockquote {
  position: relative;
  margin: 40px 0;
  padding: 30px 30px 30px 60px;
  background: var(--col-bg-soft);
  border-left: 3px solid var(--col-accent);
  border-radius: 0 5px 5px 0;
  font-size: 15px;
  line-height: 2;
  color: var(--col-text-mute);
}

.blog__body blockquote:before {
  content: "\201C";
  position: absolute;
  left: 20px;
  top: 14px;
  font-family: var(--col-font-en);
  font-size: 40px;
  line-height: 1;
  color: var(--col-line-strong);
}

.blog__body blockquote p:last-child {
  margin-bottom: 0;
}

.blog__body blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-style: normal;
  color: var(--col-text-sub);
}

.blog__body blockquote cite:before {
  content: "— ";
}

/* --- 表 ------------------------------------------------------------------ */
.blog__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px 0;
  font-size: 15px;
  line-height: 1.8;
}

.blog__body th,
.blog__body td {
  padding: 15px 20px;
  border: 1px solid var(--col-line);
  text-align: left;
  vertical-align: top;
}

.blog__body th {
  background: var(--col-bg-soft);
  font-weight: 700;
  color: var(--col-accent-dark);
  white-space: nowrap;
}

.blog__body tbody tr:nth-child(even) td {
  background: var(--col-bg-alt);
}

.blog__body caption {
  caption-side: bottom;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--col-text-sub);
  text-align: left;
}

/* SP 横スクロール用ラッパ（the_content フィルタで <table> を包む・§D-7） */
.blog__scroll {
  margin: 40px 0;
}

.blog__scroll table {
  margin: 0;
}

/* --- 画像・キャプション --------------------------------------------------- */
.blog__body img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.blog__body p > img,
.blog__body figure {
  margin: 40px 0;
}

.blog__body figure img {
  width: 100%;
}

/* WordPress が自動付与するクラス */
.blog__body .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.blog__body .alignleft {
  float: left;
  margin: 8px 30px 20px 0;
  max-width: 50%;
}

.blog__body .alignright {
  float: right;
  margin: 8px 0 20px 30px;
  max-width: 50%;
}

.blog__body .alignnone {
  display: block;
}

.blog__body .wp-caption {
  max-width: 100%;
  height: auto;
}

.blog__body .wp-caption-text,
.blog__body figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--col-text-sub);
  text-align: center;
}

/* --- 埋め込み（YouTube 等） ---------------------------------------------- */
.blog__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 40px 0;
}

.blog__embed iframe {
  /* display:block を付けないと iframe が inline 扱いになり、
     行ボックスのディセンダ分（約10px）だけ下に隙間ができる。 */
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 5px;
}

/* --- コード -------------------------------------------------------------- */
.blog__body pre {
  background: var(--col-accent-deep);
  color: var(--col-bg);
  padding: 20px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 40px 0;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
}

.blog__body code {
  background: var(--col-bg-soft);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .92em;
}

.blog__body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}

/* --- 注意ボックス／ポイントボックス --------------------------------------- */
.blog__box {
  margin: 40px 0;
  padding: 30px 35px;
  border-radius: 5px;
  background: var(--col-bg-soft);
  font-size: 15px;
  line-height: 2;
}

/* .blog__body p（0-1-1）に負けないよう .blog__box を前置して 0-2-0 にする */
.blog__box .blog__box-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--col-accent);
  margin-bottom: 12px;
}

.blog__box p:last-child {
  margin-bottom: 0;
}

/* ボックス内のリストは本文用の余白・文字サイズを引き継がせない */
.blog__box ul,
.blog__box ol {
  margin: 0;
}

.blog__box ul li,
.blog__box ol li {
  font-size: inherit;
  line-height: inherit;
}

.blog__box li:last-child {
  margin-bottom: 0;
}

/* .voice__detail-label:before と同じ作法の10px円 */
.blog__box-title:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--col-gradient);
  flex-shrink: 0;
}

/* 注意・免責 */
.blog__box--attention {
  background: var(--col-bg);
  border: 1px solid var(--col-danger);
}

.blog__box--attention .blog__box-title {
  color: var(--col-danger);
}

/* 「!」入りの三角（CSSのみ・新規SVG不要） */
.blog__box--attention .blog__box-title:before {
  content: "!";
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 20px;
  height: 18px;
  padding-bottom: 1px;
  border-radius: 0;
  background: var(--col-danger);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  color: var(--col-bg);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

/* この記事のポイント */
.blog__box--point {
  background: var(--col-bg-alt);
  border: 2px solid var(--col-marker);
}

.blog__box--point .blog__box-title {
  color: var(--col-accent-dark);
}

.blog__box--point .blog__box-title:before {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background-color: var(--col-accent);
  -webkit-mask: var(--col-icon-check) no-repeat center center/contain;
  mask: var(--col-icon-check) no-repeat center center/contain;
}


/* ==========================================================================
   09. 詳細 - シェア
   ========================================================================== */

.blog__share {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--col-line);
  text-align: center;
}

.blog__share-title {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--col-text-sub);
  margin-bottom: 20px;
}

.blog__share-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.blog__share-list a,
.blog__share-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--col-accent-deep2);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

@media only screen and (min-width: 768px) {
  .blog__share-list a:hover,
  .blog__share-list button:hover {
    background: var(--col-accent);
    transform: translateY(-3px);
  }
}

.blog__share-list svg,
.blog__share-list img {
  width: 20px;
  height: 20px;
}

/* 「コピーしました」トースト */
.blog__share-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 1100;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--col-accent-deep);
  color: var(--col-bg);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: all .3s ease-in-out;
  pointer-events: none;
}

.blog__share-toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


/* ==========================================================================
   10. 詳細 - 前後記事ナビ
   ========================================================================== */

.blog__pnav {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--col-line);
}

.blog__pnav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: calc(50% - 15px);
}

.blog__pnav-item--next {
  margin-left: auto;
  flex-direction: row-reverse;
  text-align: right;
}

/* .pagenavi の矢印円 L1845-1855 と同表現（44px） */
.blog__pnav-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--col-accent-deep2);
  background-image: var(--col-icon-arrow-on-dark);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  flex-shrink: 0;
  transition: background-color .3s ease-in-out;
}

.blog__pnav-item--prev .blog__pnav-icon {
  transform: scaleX(-1);
}

/* min-width:0 がないと flex 内でタイトルが省略されない */
.blog__pnav-text {
  min-width: 0;
}

.blog__pnav-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--col-font-en);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--col-text-sub);
}

.blog__pnav-label span {
  font-family: var(--col-font-jp);
  letter-spacing: 0;
  margin-left: 8px;
}

.blog__pnav-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--col-text);
  transition: color .3s ease-in-out;
}

@media only screen and (min-width: 768px) {
  .blog__pnav-item:hover .blog__pnav-title {
    color: var(--col-accent);
  }

  .blog__pnav-item:hover .blog__pnav-icon {
    background-color: var(--col-accent);
  }
}


/* ==========================================================================
   11. 詳細 - 関連記事
   ========================================================================== */

.blog__related {
  background: var(--col-bg-soft2);
  padding: 120px 0;
}

.blog__related .main-title {
  margin-bottom: 45px;
}


/* ==========================================================================
   12. TAB（max-width: 1080px）
   ========================================================================== */

@media only screen and (max-width: 1080px) {

  /* 一覧カード: 2カラム（.voice__item L3992-3996 と同値） */
  .blog__card {
    width: calc(50% - 30px);
  }
}


/* ==========================================================================
   13. SP（max-width: 767px）
   ========================================================================== */

@media only screen and (max-width: 767px) {

  .blog__crumb-title {
    max-width: 12em;
  }

  /* --- カテゴリ絞り込み: 1行固定＋横スクロール --------------------------- */
  .blog__cate {
    margin-bottom: 30px;
  }

  .blog__cate-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 10px;
    /* box-shadow が切れないよう上下に逃がす */
    padding: 6px 0 10px;
  }

  .blog__cate-list li {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .blog__cate-item {
    min-height: 40px;
    padding: 0 20px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* 右端フェード（スクロール可能であることの示唆） */
  .blog__cate:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 30px;
    height: 40px;
    background: linear-gradient(90deg, var(--col-bg-fade) 0%, var(--col-bg) 100%);
    pointer-events: none;
  }

  /* --- 記事カード -------------------------------------------------------- */
  .blog__list {
    flex-direction: column;
    gap: 30px;
  }

  .blog__card {
    width: 100%;
  }

  .blog__card-meta {
    gap: 10px;
    margin: 12px 0 8px;
  }

  .blog__card-date {
    font-size: 13px;
  }

  .blog__card-title {
    font-size: 17px;
    min-height: calc(17px * 1.6 * 2);
  }

  /* --- 記事ヘッダー ------------------------------------------------------ */
  .blog__article {
    max-width: 100%;
  }

  .blog__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 15px;
  }

  .blog__meta-date,
  .blog__meta-update {
    font-size: 13px;
  }

  .blog__title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 25px;
  }

  .blog__eyecatch {
    border-radius: 10px;
    margin-bottom: 30px;
  }

  /* --- 目次 -------------------------------------------------------------- */
  .blog__toc {
    padding: 20px;
    margin-bottom: 30px;
  }

  /* --- 本文 -------------------------------------------------------------- */
  .blog__body {
    line-height: 2;
  }

  .blog__body p {
    margin-bottom: 24px;
  }

  .blog__body hr {
    margin: 40px 0;
  }

  .blog__body h2 {
    font-size: 22px;
    padding-bottom: 10px;
    margin: 50px 0 24px;
  }

  .blog__body h3 {
    font-size: 18px;
    margin: 40px 0 20px;
  }

  .blog__body h4,
  .blog__body h5,
  .blog__body h6 {
    font-size: 16px;
  }

  .blog__body h2,
  .blog__body h3 {
    scroll-margin-top: 90px;
  }

  .blog__body blockquote {
    padding: 20px 20px 20px 44px;
    font-size: 14px;
  }

  .blog__body p > img,
  .blog__body figure {
    margin: 30px 0;
  }

  /* 狭幅では回り込みを解除 */
  .blog__body .alignleft,
  .blog__body .alignright {
    float: none;
    max-width: 100%;
    margin: 30px 0;
  }

  /* 表は縮めずに横スクロール */
  .blog__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 30px 0;
  }

  .blog__scroll table {
    min-width: 600px;
  }

  /* 右端フェード（blog.js が .is-scrollable を付け外しする） */
  .blog__scroll.is-scrollable {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
  }

  .blog__box {
    padding: 20px;
    font-size: 14px;
  }

  .blog__box .blog__box-title {
    font-size: 16px;
  }

  /* --- シェア ------------------------------------------------------------ */
  .blog__share {
    margin-top: 40px;
    padding-top: 30px;
  }

  /* --- 前後記事ナビ ------------------------------------------------------ */
  .blog__pnav {
    flex-direction: column;
    gap: 0;
    margin-top: 50px;
    padding-top: 0;
    border-top: none;
  }

  .blog__pnav-item {
    max-width: 100%;
    width: 100%;
    padding: 20px 0;
    border-top: 1px solid var(--col-line);
  }

  .blog__pnav-item--next {
    flex-direction: row;
    text-align: left;
  }

  .blog__pnav-item--next .blog__pnav-icon {
    order: 2;
    margin-left: auto;
  }

  .blog__pnav-item--next .blog__pnav-text {
    order: 1;
  }

  /* --- 関連記事 ---------------------------------------------------------- */
  .blog__related {
    padding: 60px 0;
  }

  .blog__related .main-title {
    margin-bottom: 25px;
  }
}