@charset "utf-8";
/* ==========================================================================
   page/column.css  ―  取り組み一覧（archive-column.php）
   --------------------------------------------------------------------------
   ・セクション見出しはトップページと同じリボン（top_title.png）を使う。
   ・カンプ実測値（PC 1200px / SP 375px）を基準に rem 換算している。
     html { font-size: 10px } のため 1.6rem = 16px。
   ========================================================================== */

/* ==========================================================================
   1. セクション
   ========================================================================== */
.p-column__section {
  padding-bottom: 9rem;
}

/* ==========================================================================
   2. セクション見出し（リボン）
   --------------------------------------------------------------------------
   トップページ・あったかパートナーズと同じ共通パーツ。front.css は
   is_front_page() のときだけ読み込まれるため、同じ指定をここに再掲している。
   ※ partner.css / member.css にも同じものがある。将来的には common.css へ
     切り出して統合するのが望ましい。
   ========================================================================== */
.p-front-section {
  border-top: .8rem solid var(--color-primary);
}

.p-front-heading-wrap {
  width: min(61rem, calc(100% - 3.2rem));
  margin-inline: auto;
}

.p-front-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6.4rem;
  padding: .8rem 3.2rem;
  border-radius: 0;
  background: url('../../img/common/top_title.png') center / 100% 100% no-repeat;
  font-size: 3.2rem;
  text-align: center;
  font-weight: 400;
}

/* ==========================================================================
   3. 本文エリア
   ========================================================================== */

/* カンプではインナー（l-inner）よりさらに 30px 内側にカードが並ぶ。 */
.p-column__body {
  padding-right: 3rem;
  padding-left: 3rem;
}

.p-column__lead {
  margin-top: 2rem;
  font-size: 1.8rem;
  line-height: 1.8;
}

/* ==========================================================================
   4. カード一覧
   ========================================================================== */
.p-column__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.6rem 2rem;
  margin-top: 3.6rem;
}

/*
 * カードはカンプに合わせて影を持たない（.c-card とは別デザインのため
 * 共通コンポーネントは使わず p- レイヤーで定義する）。
 */
.p-column__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-white);
  border-radius: 1.2rem;
}

.p-column__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-bg-cream);
}

.p-column__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-column__card-body {
  flex-grow: 1;
  padding: 2.4rem 2.8rem 2.8rem;
}

.p-column__card-title {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ==========================================================================
   5. Media Queries
   ========================================================================== */

/* --- タブレット・PC 狭幅 -------------------------------------------------- */
@media screen and (max-width: 1199px) {
  .p-column__body {
    padding-right: 0;
    padding-left: 0;
  }
}

/* --- スマートフォン ------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .p-column__section {
    padding-bottom: 6rem;
  }

  /* トップページと同じく、SPでは2行に折り返す前提で高さを確保する。 */
  .p-front-heading {
    flex-direction: column;
    min-height: 12.2rem;
    padding: 1.6rem 2rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }

  .p-column__lead {
    margin-top: 1.6rem;
    line-height: 1.6;
  }

  /* SP は「左：サムネイル／右：タイトル」の横並びカードになる。 */
  .p-column__list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    margin-top: 3rem;
  }

  .p-column__card {
    flex-direction: row;
    align-items: stretch;
  }

  .p-column__thumb {
    flex-shrink: 0;
    width: 15rem;
  }

  .p-column__card-body {
    display: flex;
    align-items: flex-start;
    padding: 1.6rem;
  }

  .p-column__card-title {
    font-size: 1.2rem;
    line-height: 1.4;
  }
}


/* ==========================================================================
   記事詳細（single-column.php）
   --------------------------------------------------------------------------
   カンプ実測値（PC 1200px / SP 375px）に合わせている。
   html { font-size: 10px } のため 1.6rem = 16px。

   ページの構成
     1. 下層共通の見出し（c-page-title）… 「ヒートショックを学ぼう！」
     2. 記事タイトル帯 … 全幅の赤罫（.8rem）＋ インナー幅の赤ベタ帯
     3. 専門家の紹介パネル（クリーム色 #fff5d5・角丸2.4rem）
     4. プロフィール（囲みなし・黒の小見出し＋グレーの下線）
     5. 記事部（PCのみ白い角丸ボックス。SPは囲みなしで地色の上に直接置く）

   ブロックの幅
     パネル・白ボックスの外形は l-inner いっぱい（1200px時に x100..1100）。
     中身はそこからさらに左右8remを空けた840pxに収める。
     プロフィールは囲みを持たないが、左右位置は中身に合わせる。
   ========================================================================== */

.p-column-single {
  /*
   * 区切り線の色はカンプのピクセル値から逆算したもの。
   * 白地・クリーム地のどちらに載っても実測値に近くなるよう半透明で持たせる。
   */
  --column-rule: rgba(255, 20, 0, .5);
  --column-rule-gray: #d9d9d9;
  /* 紹介パネルの地色（c-page-title のドットと同じクリーム）。 */
  --column-panel-bg: #fff5d5;
  /* パネル・白ボックスの内側の余白。SPで上書きする。 */
  --column-gutter: 8rem;

  /* タイトル帯を下層共通の余白より上に出すため、上の余白は個別に持たせる。 */
  padding-top: 0;
  padding-bottom: 7.2rem;

  background-color: var(--color-bg-cream);
}

/* --- 記事タイトル帯 --------------------------------------------------------
   全幅の赤罫の直下に、インナー幅の赤ベタ帯が続く。
   上角は丸めず、下角だけ 2.4rem で丸めるのがカンプの形。
   -------------------------------------------------------------------------- */
.p-column-single__title {
  border-top: .8rem solid var(--color-primary);
}

.p-column-single__title-text {
  padding: 3rem 4rem;
  border-radius: 0 0 2.4rem 2.4rem;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 記事本体のインナー。タイトル帯との間隔をここで取る。 */
.p-column-single__container {
  margin-top: 5.6rem;
}

/* 記事本体とタイトル帯の最大幅。PCで1000pxに収める。 */
.p-column-single__container,
.p-column-single__title > .l-inner {
  max-width: 100rem;
}

/*
 * 紹介文・プロフィール・見出しは <BR> を改行文字に置き換えて渡すため、
 * 改行だけを保持する（余分な空白は詰める）。
 */
.p-column-single__comment,
.p-column-single__speaker-name,
.p-column-single__profile-title,
.p-column-single__profile-text,
.p-column-single__head,
.p-column-single__head-s {
  white-space: pre-line;
}

/* --- 専門家の紹介パネル --------------------------------------------------- */
.p-column-single__intro {
  padding: 4rem var(--column-gutter);
  border: 0;
  border-radius: 2.4rem;
  background-color: var(--column-panel-bg);
}

/* 左：写真（カンプ実測 390px）／右：名前ブロックと紹介文。 */
.p-column-single__speech {
  display: grid;
  grid-template-columns: 39rem minmax(0, 1fr);
  align-items: start;
  gap: 2.5rem;
}

.p-column-single__speaker {
  margin: 0;
}

.p-column-single__speaker-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
}

.p-column-single__speech-body {
  min-width: 0;
}

/* 名前ブロックが先、うすい赤の区切り線を挟んで紹介文が続く。 */
.p-column-single__speaker-name {
  margin: 0;
  padding-bottom: 1.2rem;
  border-bottom: .1rem solid var(--column-rule);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-column-single__comment {
  margin: 0;
  margin-top: 1.2rem;
  font-size: 1.8rem;
  line-height: 1.5;
}

/* 名前が未入力のときは区切り線だけが浮かないようにする。 */
.p-column-single__speaker-name:empty {
  display: none;
}

/* --- プロフィール ----------------------------------------------------------
   囲みを持たず地色の上に置くが、左右位置はパネルの中身にそろえる。
   -------------------------------------------------------------------------- */
.p-column-single__profile {
  margin-top: 4rem;
  padding: 0 var(--column-gutter);
  border-radius: 0;
  background-color: transparent;
}

.p-column-single__profile-title {
  margin: 0;
  padding-bottom: 1.2rem;
  border-bottom: .1rem solid var(--column-rule-gray);
  color: inherit;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-column-single__profile-text {
  margin-top: 1.2rem;
  font-size: 1.8rem;
  line-height: 1.5;
}

/* --- フリーテキスト・記事部・ブロックエディタ本文 --------------------------
   PCでは白い角丸ボックスに入れる。区切り線は中身の左右位置に合わせるため、
   ボックスではなく中の見出しの border-top で引いている。
   -------------------------------------------------------------------------- */
.p-column-single__free,
.p-column-single__article-body,
.p-column-single__body {
  margin-top: 4rem;
  padding: 5.6rem var(--column-gutter);
  border: 0;
  border-radius: 2.4rem;
  background-color: var(--color-bg-white);
  font-size: 1.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.p-column-single__free > :first-child,
.p-column-single__text > :first-child,
.p-column-single__body > :first-child {
  margin-top: 0;
}

/*
 * .c-entry の既定（line-height 1.9 ／ 段落間 2.4rem）はこのページでは使わない。
 * カンプは行送り27px・段落間の余白なしで、会話が続けて読める組みになっている。
 * ※ 段落間を詰めるため可読性は下がる。余白が必要なら下の margin-top を戻すこと。
 */
.p-column-single__free,
.p-column-single__text,
.p-column-single__body {
  line-height: 1.5;
}

.p-column-single__free > * + *,
.p-column-single__text > * + *,
.p-column-single__body > * + * {
}

/* 本文中の画像だけは上下に余白を取り、左そろえで置く。 */
.p-column-single__free > :has(img),
.p-column-single__text > :has(img),
.p-column-single__body > :has(img) {
  margin-top: 3.2rem;
  margin-bottom: 3.2rem;
}

.p-column-single__free img,
.p-column-single__text img,
.p-column-single__body img {
  max-width: 100%;
  height: auto;
}

/* リッチエディター本文の太字（カンプの小見出しにあたる）を明示する。 */
.p-column-single__free strong,
.p-column-single__free b,
.p-column-single__text strong,
.p-column-single__text b,
.p-column-single__body strong,
.p-column-single__body b {
  font-weight: 700;
}

/* --- 中見出し（オレンジの丸つき） ------------------------------------------
   区切り線は見出しの border-top。丸は本文の左端から外に出し、
   2行目以降は文字位置でそろえる。
   -------------------------------------------------------------------------- */
.p-column-single__head {
  position: relative;
  margin: 0;
  padding: 1.2rem 0 0 3.4rem;
  border-top: .1rem solid var(--column-rule);
  border-bottom: 0;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-column-single__head::before {
  content: "";
  position: absolute;
  top: 1.8rem;
  left: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
}

/* --- 記事部の画像 ---------------------------------------------------------- */
.p-column-single__figure {
  margin: 3.2rem 0;
}

.p-column-single__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: 0;
  border-radius: 0;
}

/* --- 小見出し --------------------------------------------------------------
   ※ この項目は今回のカンプに作例がないため、本文の太字に合わせた見た目にしている。
   -------------------------------------------------------------------------- */
.p-column-single__head-s {
  margin-top: 2.4rem;
  color: inherit;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-column-single__text {
  margin-top: 1.6rem;
  font-size: 1.6rem;
}

/* ==========================================================================
   Media Queries（記事詳細）
   ========================================================================== */
@media screen and (max-width: 767px) {
  /*
   * カンプの左右余白は20px。共通の .l-inner（16px）より広いため、
   * この記事詳細ページに限って上書きする。
   */
  .p-column-single > .l-inner {
    width: calc(100% - 4rem);
  }

  .p-column-single {
    /* SPではパネルの内側余白を詰め、パネル自体を本文より外へ張り出させる。 */
    --column-gutter: 1.2rem;

    padding-bottom: 6rem;
  }

  /* SPはタイトル帯が画面いっぱいに広がり、下角だけ丸まる。 */
  .p-column-single__title > .l-inner {
    width: 100%;
    max-width: none;
  }

  .p-column-single__title-text {
    padding: 2.4rem 2rem;
    border-radius: 0 0 2.4rem 2.4rem;
    font-size: 2rem;
    line-height: 1.35;
    text-align: center;
  }

  .p-column-single__container {
    margin-top: 2.4rem;
  }

  .p-column-single__intro {
    margin-inline: -1.2rem;
    padding: 2.4rem var(--column-gutter) 1.6rem;
  }

  .p-column-single__speech {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
  }

  .p-column-single__speaker-name {
    padding-bottom: 1.6rem;
    line-height: 1.5;
  }

  .p-column-single__comment {
    margin-top: 1.6rem;
  }

  /* SPのプロフィールは本文と同じ左右位置に置く。 */
  .p-column-single__profile {
    margin-top: 3.2rem;
    padding-inline: 0;
  }

  .p-column-single__profile-title {
    padding-bottom: 1.6rem;
    line-height: 1.5;
  }

  .p-column-single__profile-text {
    margin-top: 1.6rem;
  }

  /* SPは白いボックスを使わず、地色の上に直接置く。 */
  .p-column-single__free,
  .p-column-single__article-body,
  .p-column-single__body {
    margin-top: 5.6rem;
  }

  .p-column-single__text {
    margin-top: 2.4rem;
  }

  .p-column-single__head-s {
    margin-top: 2.4rem;
    font-size: 1.8rem;
  }
}

@media print {
  .p-column-single__intro,
  .p-column-single__figure {
    break-inside: avoid;
  }
}