@charset "UTF-8";
/*!
 * column-custom.css
 * コラム詳細ページの追加スタイル（2026-07-31）
 *
 * style.css は SCSS からのコンパイル成果物のため、再ビルドで上書きされないよう
 * 本ファイルに分離している。読み込みは includes/enqueue.php を参照。
 *
 * 内容
 *   1. アイキャッチ画像（トリミングせず全体を表示）
 *   2. 本文の H2 / H3 / H4 見出しデザイン
 *   3. よくある質問（FAQ）アコーディオン
 *   4. 監修者ブロックの微調整
 *   5. サイドバーのカテゴリー（現在表示中の強調）
 *   6. サイドバーのサービスアイコン
 *   7. 記事メタ（更新日・投稿日）
 *   8. 共通CTAのLINEボタン
 *   9. 関連する記事のアイキャッチ
 *  10. コラム一覧・カテゴリー一覧カードのアイキャッチ
 *  11. サイドバーの無料相談バナー
 */

/* =========================================
   1. アイキャッチ画像 — 画像全体をフルで表示
   ========================================= */
.m-column-detail__thumb {
  aspect-ratio: auto;
  background-color: transparent;
  border-radius: calc(8 * 1rem / var(--font-size));
}

.m-column-detail__thumb-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* =========================================
   2. 本文見出し（H2 / H3 / H4）
   H2: 黄色の太バー＋淡い黄色の背景
   H3: 下線（左端に黄色のアクセント）
   H4: 黄色のドット
   ========================================= */

/* 見出し前の余白を広げて章の区切りを明確にする */
.m-news-detail-content > * + h2 {
  margin-block-start: calc(64 * 1rem / var(--font-size));
}

.m-news-detail-content > * + h3 {
  margin-block-start: calc(44 * 1rem / var(--font-size));
}

.m-news-detail-content > * + h4 {
  margin-block-start: calc(32 * 1rem / var(--font-size));
}

/* H2 — 左に黄色の太バー＋淡い黄色の背景 */
.m-news-detail-content h2 {
  padding-block: calc(14 * 1rem / var(--font-size));
  padding-inline: calc(24 * 1rem / var(--font-size));
  border-inline-start: calc(8 * 1rem / var(--font-size)) solid var(--color__yellow);
  border-start-end-radius: calc(6 * 1rem / var(--font-size));
  border-end-end-radius: calc(6 * 1rem / var(--font-size));
  background-color: var(--color__cream-yellow);
  font-family: var(--font-family__zen);
  font-size: calc(24 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color__text);
}

/* H3 — 下線タイプ（左端だけ黄色のアクセント） */
.m-news-detail-content h3 {
  position: relative;
  padding-block-end: calc(12 * 1rem / var(--font-size));
  padding-inline-start: 0;
  border-inline-start: none;
  border-block-end: calc(2 * 1rem / var(--font-size)) solid var(--color__border-gray);
  background-color: transparent;
  font-family: var(--font-family__zen);
  font-size: calc(20 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--color__text);
}

.m-news-detail-content h3::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(-2 * 1rem / var(--font-size));
  inline-size: calc(80 * 1rem / var(--font-size));
  max-inline-size: 40%;
  block-size: calc(2 * 1rem / var(--font-size));
  background-color: var(--color__yellow);
}

/* H4 — 黄色のドット（下線なし） */
.m-news-detail-content h4 {
  position: relative;
  padding-inline-start: calc(24 * 1rem / var(--font-size));
  font-family: var(--font-family__zen);
  font-size: calc(18 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--color__text);
}

.m-news-detail-content h4::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(0.85em - calc(6 * 1rem / var(--font-size)));
  inline-size: calc(12 * 1rem / var(--font-size));
  block-size: calc(12 * 1rem / var(--font-size));
  border-radius: 50%;
  background-color: var(--color__yellow);
  box-shadow: 0 0 0 calc(2 * 1rem / var(--font-size)) var(--color__black) inset;
}

@media (max-width: 767px) {
  .m-news-detail-content h2 {
    padding-block: calc(12 * 1rem / var(--font-size));
    padding-inline: calc(16 * 1rem / var(--font-size));
    border-inline-start-width: calc(6 * 1rem / var(--font-size));
    font-size: calc(20 * 1rem / var(--font-size));
  }

  .m-news-detail-content h3 {
    font-size: calc(18 * 1rem / var(--font-size));
  }

  .m-news-detail-content h4 {
    font-size: calc(16 * 1rem / var(--font-size));
  }
}

/* =========================================
   3. よくある質問（FAQ）アコーディオン
   ========================================= */
.m-column-faq {
  display: flex;
  flex-direction: column;
  gap: calc(16 * 1rem / var(--font-size));
}

/* 本文内では枠線を付けてカード感を出す */
.m-column-faq .m-faq-item {
  overflow: hidden;
  border: 1px solid var(--color__border-gray);
  border-radius: calc(8 * 1rem / var(--font-size));
  background-color: var(--color__white);
}

.m-column-faq .m-faq-item__q {
  -moz-column-gap: calc(16 * 1rem / var(--font-size));
       column-gap: calc(16 * 1rem / var(--font-size));
  padding-block: calc(16 * 1rem / var(--font-size));
  padding-inline: calc(20 * 1rem / var(--font-size));
  border-radius: 0;
  cursor: pointer;
}

.m-column-faq .m-faq-item__q:hover {
  opacity: 0.7;
}

.m-column-faq .m-faq-item__badge {
  inline-size: calc(32 * 1rem / var(--font-size));
  block-size: calc(32 * 1rem / var(--font-size));
  width: calc(32 * 1rem / var(--font-size));
  height: calc(32 * 1rem / var(--font-size));
  font-size: calc(16 * 1rem / var(--font-size));
}

.m-column-faq .m-faq-item__q-text {
  font-size: calc(16 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.7;
}

.m-column-faq .m-faq-item__a {
  -moz-column-gap: calc(16 * 1rem / var(--font-size));
       column-gap: calc(16 * 1rem / var(--font-size));
  padding-block: calc(4 * 1rem / var(--font-size)) calc(20 * 1rem / var(--font-size));
  padding-inline: calc(20 * 1rem / var(--font-size));
  border-block-start: 1px solid var(--color__border-gray);
  margin-inline: calc(20 * 1rem / var(--font-size));
  padding-inline-start: 0;
  padding-inline-end: 0;
  padding-block-start: calc(20 * 1rem / var(--font-size));
}

.m-column-faq .m-faq-item__a-text {
  gap: calc(8 * 1rem / var(--font-size));
  font-size: calc(15 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 2;
}

.m-column-faq .m-faq-item__a-text p {
  font-size: inherit;
  line-height: inherit;
}

@media (max-width: 767px) {
  .m-column-faq .m-faq-item__q,
  .m-column-faq .m-faq-item__a {
    padding-inline: calc(16 * 1rem / var(--font-size));
  }

  .m-column-faq .m-faq-item__a {
    margin-inline: calc(16 * 1rem / var(--font-size));
    padding-inline: 0;
  }

  .m-column-faq .m-faq-item__q,
  .m-column-faq .m-faq-item__a {
    -moz-column-gap: calc(12 * 1rem / var(--font-size));
         column-gap: calc(12 * 1rem / var(--font-size));
  }

  .m-column-faq .m-faq-item__q-text,
  .m-column-faq .m-faq-item__a-text {
    font-size: calc(14 * 1rem / var(--font-size));
  }
}

/* =========================================
   4. 監修者ブロック
   ========================================= */
.m-column-author__intro {
  display: flex;
  flex-direction: column;
  gap: calc(12 * 1rem / var(--font-size));
}

.m-column-author__intro p {
  font-family: var(--font-family__zen);
  font-size: calc(14 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 2;
  color: var(--color__text);
}

.m-column-author__avatar-img {
  -o-object-position: center top;
     object-position: center top;
}

/* =========================================
   5. サイドバーのカテゴリー
   ========================================= */
.m-column-sidebar__cat-link.is-current {
  border-color: var(--color__yellow);
  background-color: var(--color__yellow);
  font-weight: 700;
}

/* =========================================
   6. サイドバーのサービスアイコン
   イラスト素材のため、トリミングせず全体を表示する
   ========================================= */
.m-column-sidebar__service-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(6 * 1rem / var(--font-size));
  background-color: var(--color__white);
}

.m-column-sidebar__service-thumb-img {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* =========================================
   7. 記事メタ（更新日・投稿日）
   ========================================= */
.m-column-detail__meta {
  flex-wrap: wrap;
  gap: calc(8 * 1rem / var(--font-size)) calc(16 * 1rem / var(--font-size));
}

.m-column-detail__date {
  display: inline-flex;
  align-items: baseline;
  gap: calc(2 * 1rem / var(--font-size));
}

.m-column-detail__date-label {
  font-family: var(--font-family__zen);
  font-size: calc(13 * 1rem / var(--font-size));
  font-weight: 500;
  letter-spacing: 0.02em;
}

.m-column-detail__date--published {
  color: var(--color__gray400, #bababa);
}

@media (max-width: 767px) {
  .m-column-detail__meta {
    gap: calc(6 * 1rem / var(--font-size)) calc(12 * 1rem / var(--font-size));
  }

  .m-column-detail__date {
    font-size: calc(13 * 1rem / var(--font-size));
  }

  .m-column-detail__date-label {
    font-size: calc(12 * 1rem / var(--font-size));
  }
}

/* =========================================
   8. 共通CTAのLINEボタン
   ボタンが3つになるため、PCでは2段（HP・LINE ／ 電話）に折り返して
   左側のイラストと重ならないようにする
   ========================================= */
/* SP：ボタンが3つ縦並びになるため、幅を揃えて見た目を整える */
@media (max-width: 767px) {
  .m-cta__btn {
    inline-size: min(calc(250 * 1rem / var(--font-size)), 100%);
    justify-content: space-between;
  }

  .m-cta__btn-label {
    flex: 1;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .m-cta:not(.m-cta--drawer) .m-cta__actions {
    max-inline-size: calc(560 * 1rem / var(--font-size));
    margin-inline: auto;
    gap: calc(16 * 1rem / var(--font-size));
  }
}

.m-cta__btn--line {
  --_fill: var(--color__white);
  background-color: #06c755;
  color: var(--color__white);
}

.m-cta__btn--line:hover {
  color: var(--color__text);
}

.m-cta__btn--line .m-cta__btn-circle {
  background-color: var(--color__white);
}

.m-cta__btn--line:hover .m-cta__btn-circle {
  background-color: #06c755;
}

.m-cta__btn--line .m-cta__btn-arrow {
  background-color: var(--color__text);
}

.m-cta__btn--line:hover .m-cta__btn-arrow {
  background-color: var(--color__white);
}

/* =========================================
   9. 関連する記事のアイキャッチ
   アイキャッチは 3:2 で作成されているため、376:194 の枠だと
   上下が大きく切れてしまう。枠を 3:2 に揃え、
   比率の違う画像が来ても切れないよう contain にする
   ========================================= */
.m-related-columns__thumb {
  position: relative;
  aspect-ratio: 3/2;
  background-color: var(--color__white);
}

/* 画像に width / height 属性が付いていると、その比率で親の高さが決まってしまい
   カードごとに縦幅がズレる。絶対配置にして枠の高さを固定する */
.m-related-columns__thumb-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* =========================================
   10. コラム一覧・カテゴリー一覧カードのアイキャッチ
   TOP（NEWS & MEDIA / COLUMN）のカードと同じ見た目に揃える。
     ・比率 344:194（≒16:9。アイキャッチの入稿サイズと同じ）
     ・object-fit: cover（上下の余白が出ず、カード幅いっぱいに表示）
     ・背景 gray100（読み込み前や比率の違う画像のとき）
   値は style.css の .m-post-card__thumb と同じ。以前ここで 3:2 + contain に
   上書きしていた経緯があるため、打ち消しではなく明示的に同じ指定を書いて固定する。
   （position/overflow は画像の絶対配置を維持するために残す）
   ========================================= */
.m-column__list .m-post-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 344/194;
  background-color: var(--color__gray100);
}

.m-column__list .m-post-card__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================================
   11. サイドバーの無料相談バナー（画像バナー）
   既存の .m-column-sidebar__bnr（黄色の枠＋ボタン）の指定を打ち消す
   ========================================= */
.m-column-sidebar__bnr--image {
  display: block;
  overflow: hidden;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: calc(8 * 1rem / var(--font-size));
  background: none;
  transition: opacity var(--duration);
}

.m-column-sidebar__bnr--image:hover {
  opacity: var(--opacity__hover, 0.7);
}

.m-column-sidebar__bnr--image picture {
  display: block;
}

/* 既存の .m-column-sidebar__bnr-img は position:absolute / object-fit:cover のため打ち消す */
.m-column-sidebar__bnr--image .m-column-sidebar__bnr-img {
  position: static;
  display: block;
  inline-size: 100%;
  block-size: auto;
  -o-object-fit: fill;
     object-fit: fill;
}