@charset "UTF-8";
/* ==========================================================================
   コラム記事用スタイル（自己完結版）

   配置: css/column.css（コラム記事共通。既存 CSS ファイルには追記しない）
   読み込み: 各記事の article.php 内の <link>（head02.php は変更しない）

   構成:
     0. レイアウトリセット … 既存 CSS のカラムレイアウトを記事内では無効化
     1〜4. 記事内パーツ（表・ラジオ紹介・画像・監修/免責）

   ※ 2 記事目以降もこのファイルを共用する
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. レイアウトリセット（.column-article 配下のみに作用）

   既存の .section-contents / .sub-article-left / .message-text は
   サービスページの 2 カラム前提（flex / float / 幅指定）で組まれている
   可能性があるため、記事本文ではすべて 1 カラムの縦積みに戻す。
   セレクタを .column-article で始めることで既存ページには影響しない。
   -------------------------------------------------------------------------- */

.column-article .column-detail,
.column-article .section-contents,
.column-article .sub-article-box,
.column-article .sub-article-left,
.column-article .message-text {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  column-count: auto;
}

/* flex コンテナだった場合の子要素の伸縮指定も無効化 */
.column-article .section-contents > *,
.column-article .column-detail > * {
  flex: none;
  width: 100%;
  max-width: 100%;
}

/* 段落・見出しまわりの縦リズムを最低限確保
   （既存 CSS が 2 カラム前提の余白を持っている場合の保険） */
.column-article .message-text {
  margin-bottom: 2.5em;
}

.column-article .message-text p {
  line-height: 1.9;
  letter-spacing: .04em;
}

.column-article .h3-title {
  margin: 1.8em 0 1em;
}


/* --------------------------------------------------------------------------
   1. 記事内テーブル
   -------------------------------------------------------------------------- */

.column-article .temp-table-box {
  margin: 2.4em 0;
  /* SP では親要素側で横スクロールさせ、表そのものは潰さない */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.column-article .temp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.column-article .temp-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--font-f, 14px);
  font-weight: 700;
  letter-spacing: .04em;
  padding-bottom: .6em;
}

.column-article .temp-table th,
.column-article .temp-table td {
  border: 1px solid var(--gray, #d8d8d8);
  padding: .8em 1em;
  vertical-align: middle;
  font-size: var(--font-f, 14px);
  line-height: 1.9;
  letter-spacing: .04em;
}

/* 列見出し */
.column-article .temp-table thead th {
  background: var(--black, #231815);
  color: #fff;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

/* 行見出し */
.column-article .temp-table tbody th {
  background: rgba(35, 24, 21, .04);
  text-align: left;
  font-weight: 500;
}

/* 数値セル。tabular-nums で桁位置を揃える */
.column-article .temp-table td.num {
  text-align: right;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* 合計行・結論行の強調（本文マーカーの temp-bk-yellow と同系色） */
.column-article .temp-table .total th,
.column-article .temp-table .total td {
  background: var(--yellow, rgba(252, 255, 173, .8));
  color: var(--black, #231815);
  font-weight: 700;
}

/* 表の直下に置く注記 */
.column-article .temp-table-note {
  margin-top: .8em;
  font-size: var(--font-g, 12px);
  line-height: 1.9;
  color: #666;
}

@media screen and (max-width: 640px) {
  .column-article .temp-table th,
  .column-article .temp-table td {
    padding: .6em .7em;
    font-size: var(--font-g, 12px);
  }

  /* 横スクロールできることを端の影で示す */
  .column-article .temp-table-box {
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(35, 24, 21, .12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(35, 24, 21, .12), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}


/* --------------------------------------------------------------------------
   2. ラジオ番組の紹介ブロック
   -------------------------------------------------------------------------- */

.column-article .temp-radio-box {
  margin: 2em 0;
  padding: 1.2em 1.4em;
  border-left: 4px solid var(--red, #d10f1a);
  background: rgba(35, 24, 21, .03);
}

.column-article .temp-radio-box p {
  margin: 0;
  line-height: 1.9;
}

.column-article .temp-radio-label {
  display: inline-block;
  font-weight: 700;
  color: var(--red, #d10f1a);
  letter-spacing: .04em;
}

.column-article .temp-radio-box a {
  color: var(--deep-red, #8f0a11);
  text-decoration: underline;
  word-break: break-all;
}

.column-article .temp-radio-box a:hover {
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   3. 記事内画像
   既存の .section-img-box（CSS 背景画像方式）とは別に、
   alt を持つ <figure><img> 用のクラスとして定義する
   -------------------------------------------------------------------------- */

.column-article .article-img {
  margin: 2.4em 0;
}

.column-article .article-img img {
  display: block;
  width: 100%;
  height: auto;   /* width/height 属性で CLS を防ぎつつ可変にする */
}

.column-article .article-img figcaption {
  margin-top: .6em;
  font-size: var(--font-g, 12px);
  line-height: 1.9;
  color: #666;
}


/* --------------------------------------------------------------------------
   4. 執筆・監修 / 免責
   -------------------------------------------------------------------------- */

.column-article .profile-box {
  margin-top: 3em;
  padding: 1.6em;
  background: rgba(35, 24, 21, .03);
}

.column-article .temp-disclaimer {
  margin-top: 1.6em;
  font-size: var(--font-g, 12px);
  line-height: 1.9;
  color: #666;
}

/* 2026-08 追加：現行の single.php は .column-article でラップしていないため、
   実際に使われている #column-pg スコープで同じ「執筆・監修」ボックスを用意する
   （上の .column-article 側は将来のために残し、削除はしない） */
#column-pg .profile-box {
  display: flex;
  align-items: flex-start;
  gap: 1.2em;
  margin-top: 3em;
  padding: 1.6em;
  background: rgba(35, 24, 21, .03);
}

#column-pg .profile-box img {
  border-radius: 50%;
  flex-shrink: 0;
}

#column-pg .profile-box-label {
  font-size: var(--font-g, 12px);
  color: var(--red);
  font-weight: bold;
  margin-bottom: .4em;
}

#column-pg .profile-box-name {
  font-weight: bold;
  margin-bottom: .4em;
}

#column-pg .profile-box-bio {
  font-size: var(--font-g, 12px);
  line-height: 1.9;
  color: #666;
}

@media screen and (max-width:640px) {
  #column-pg .profile-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}