@charset "utf-8";

/* ----------------------------------------------------------------------
   news-detail.css  ニュース記事ページ（/news/記事スラッグ/）
   ----------------------------------------------------------------------
   1. p-news-detail        記事のカード（日付・タイトル・一覧にもどる）
   2. p-news-detail__body  本文（エディタで作った要素のスタイル）
       2-1. 見出し（h2〜h6 ＋ .is-heading6）
       2-2. 段落・リンク・強調
       2-3. リスト（ul / ol / dl）
       2-4. 画像・動画
       2-5. 表
       2-6. 引用・区切り線・整形済みテキスト

   本文のスタイルは、Figmaのエレメントリスト（node 729:2487）に合わせている。
   エディタで作れる要素はここに一通り用意してあるので、記事側で
   クラスを付ける必要はない（例外は 2-1 の .is-heading6 だけ）。
   各コンポーネントの直後に、そのコンポーネントのレスポンシブ指定を置く
   ---------------------------------------------------------------------- */

/* ==========================================================================
   p-news-detail  記事のカード
   ========================================================================== */

.p-news-detail {
  padding: 8rem 0 11rem;
  background-color: #f2f2f2;
}

/* 白いカード。中の本文は1000px（1200 − 左右100pxずつ） */
.p-news-detail__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 6rem 10rem;
  background-color: #fff;
}

.p-news-detail__header {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-bottom: 3.3rem;
  border-bottom: 1px solid #e8ebf1;
}

.p-news-detail__date {
  font-family: "Barlow", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5; /* Figma 24px / 16px */
  letter-spacing: .08rem;
  color: #f6741b;
}

.p-news-detail__title {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2; /* Figma 36px / 30px */
  color: #333;
}

/* アイキャッチ画像。一覧では16:9に切り抜くが、記事では切り抜かず元の比率で出す */
.p-news-detail__thumb {
  display: block;
  width: 100%;
  height: auto;
}

.p-news-detail__back {
  display: flex;
  justify-content: center;
  padding-top: 4rem;
}

@media (max-width: 1023px) {
  /* ----- p-news-detail ----- */
  .p-news-detail {
    padding: 6rem 0 8rem;
  }

  .p-news-detail__card {
    padding: 4rem;
  }
}

@media (max-width: 767px) {
  .p-news-detail {
    padding: 4rem 0 6rem;
  }

  .p-news-detail__card {
    gap: 3rem;
    padding: 3rem 2rem;
  }

  .p-news-detail__header {
    gap: 1.2rem;
    padding-bottom: 2rem;
  }

  .p-news-detail__date {
    font-size: 1.4rem;
  }

  .p-news-detail__title {
    font-size: 2.2rem;
    line-height: 1.4;
  }

  .p-news-detail__back {
    padding-top: 2rem;
  }
}

/* ==========================================================================
   p-news-detail__body  本文
   ==========================================================================
   the_content() が出力する要素にスタイルを当てる。
   ブロックの間隔はデザインどおり一律24px（先頭だけ0） */

.p-news-detail__body > * + * {
  margin-top: 2.4rem;
}

/* --------------------------------------------------------------------------
   2-1. 見出し
   --------------------------------------------------------------------------
   エディタの「見出し1〜5」= h2〜h6。デザインの「見出し6（H7サンプル）」は
   HTMLに h7 が無いため、段落に class="is-heading6" を付けて使う */

/* 見出し1（H2）: 左にオレンジの太い縦棒 */
.p-news-detail__body h2 {
  padding: .4rem 0 .4rem 1.6rem;
  border-left: 5px solid #f6741b;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.4286; /* Figma 40px / 28px */
  color: #333;
}

/* 見出し2（H3）: 下にオレンジの2px罫線 */
.p-news-detail__body h3 {
  padding-bottom: 1.3rem;
  border-bottom: 2px solid #f6741b;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2; /* Figmaは行送りなし。折り返しに備えて少しだけ広げている */
  color: #333;
}

/* 見出し3（H4）: 装飾なし */
.p-news-detail__body h4 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5; /* Figma 30px / 20px */
  color: #333;
}

/* 見出し4（H5）: 左にオレンジの小さな四角 */
.p-news-detail__body h5 {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.2; /* Figmaは行送りなし。折り返しに備えて少しだけ広げている */
  color: #333;
}

/* 四角は1行目の中央に合わせる（(18×1.2 − 11.84) ÷ 2 ≒ 4.9px） */
.p-news-detail__body h5::before {
  content: "";
  flex-shrink: 0;
  width: 1.184rem;
  height: 1.184rem;
  margin-top: .49rem;
  background-color: #f6741b;
}

/* 見出し5（H6）: オレンジの文字 */
.p-news-detail__body h6 {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5; /* Figma 24px / 16px */
  color: #f6741b;
}

/* 見出し6（デザインの「H7サンプル」）: 小さめの文字＋オレンジの下線。
   HTMLに h7 は無いため、エディタのテキストモードで
   <p class="is-heading6">…</p> と書いて使う */
.p-news-detail__body .is-heading6 {
  display: table; /* 下線を文字幅で止める */
  padding-bottom: 1px;
  border-bottom: 1px solid #f6741b;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7143; /* Figma 24px / 14px */
  color: #333;
}

@media (max-width: 767px) {
  /* ----- 見出し ----- */
  .p-news-detail__body h2 {
    padding-left: 1.2rem;
    border-left-width: 4px;
    font-size: 2rem;
  }

  .p-news-detail__body h3 {
    padding-bottom: 1rem;
    font-size: 1.8rem;
  }

  .p-news-detail__body h4 {
    font-size: 1.7rem;
  }

  .p-news-detail__body h5 {
    gap: .6rem;
    font-size: 1.6rem;
  }

  .p-news-detail__body h5::before {
    width: 1rem;
    height: 1rem;
    margin-top: .46rem;
  }

  .p-news-detail__body h6,
  .p-news-detail__body .is-heading6 {
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------
   2-2. 段落・リンク・強調
   -------------------------------------------------------------------------- */

.p-news-detail__body p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  color: #333;
}

.p-news-detail__body a {
  color: #f6741b;
  text-decoration: underline;
  text-underline-position: from-font;
}

.p-news-detail__body strong,
.p-news-detail__body b {
  font-weight: 700;
}

/* エディタの「マーカー」。オレンジの蛍光ペン風にする */
.p-news-detail__body mark {
  padding: 0 .2rem;
  background-color: rgba(246, 116, 27, .25);
  color: inherit;
}

.p-news-detail__body small {
  font-size: 1.3rem;
  color: #818181;
}

/* 上付き・下付き（注釈番号などに使う） */
.p-news-detail__body sup,
.p-news-detail__body sub {
  font-size: 1.1rem;
}

@media (max-width: 767px) {
  .p-news-detail__body p {
    font-size: 1.4rem;
    line-height: 1.9;
  }
}

/* --------------------------------------------------------------------------
   2-3. リスト
   --------------------------------------------------------------------------
   行送りを28pxにして、項目の間隔（デザイン12px＋文字16px）と揃えている */

.p-news-detail__body ul,
.p-news-detail__body ol {
  font-size: 1.6rem;
  color: #333;
}

.p-news-detail__body li {
  position: relative;
  line-height: 1.75; /* 28px。折り返しても同じ間隔になる */
}

/* 入れ子のリスト */
.p-news-detail__body li > ul,
.p-news-detail__body li > ol {
  margin-top: 0;
  padding-left: 1.6rem;
}

/* ----- 箇条書き（ul）: オレンジの丸 ----- */

.p-news-detail__body ul > li {
  padding-left: 1.2rem;
}

.p-news-detail__body ul > li::before {
  content: "";
  position: absolute;
  top: 1.1rem; /* (28 − 6) ÷ 2 */
  left: 0;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background-color: #f6741b;
}

/* ----- 番号付き（ol）: Barlowの数字 ----- */

.p-news-detail__body ol {
  counter-reset: isfw-ol;
}

.p-news-detail__body ol > li {
  padding-left: 2rem; /* 数字12px ＋ 余白8px */
  counter-increment: isfw-ol;
}

.p-news-detail__body ol > li::before {
  content: counter(isfw-ol);
  position: absolute;
  left: 0;
  width: 1.2rem;
  font-family: "Barlow", sans-serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.4737; /* 28px。本文1行目に揃える */
  text-align: center;
  color: #333;
}

/* 入れ子の番号は親と重複しないよう別のカウンターにする */
.p-news-detail__body ol ol {
  counter-reset: isfw-ol-2;
}

.p-news-detail__body ol ol > li {
  counter-increment: isfw-ol-2;
}

.p-news-detail__body ol ol > li::before {
  content: counter(isfw-ol-2);
}

/* ----- 定義リスト（dl）: 用語と説明 ----- */

.p-news-detail__body dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1.2rem 2.2rem;
  font-size: 1.6rem;
  line-height: 1.75;
  color: #333;
}

.p-news-detail__body dt {
  font-weight: 500;
}

.p-news-detail__body dd {
  padding-left: 2.2rem;
  border-left: 1px solid #ddd;
}

@media (max-width: 767px) {
  .p-news-detail__body ul,
  .p-news-detail__body ol,
  .p-news-detail__body dl {
    font-size: 1.4rem;
  }

  .p-news-detail__body ol > li::before {
    font-size: 1.6rem;
    line-height: 1.75;
  }

  /* 用語と説明を横に並べる幅がないため縦積みにする */
  .p-news-detail__body dl {
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .p-news-detail__body dd {
    padding-left: 0;
    border-left: none;
  }

  .p-news-detail__body dd + dt {
    margin-top: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   2-4. 画像・動画
   -------------------------------------------------------------------------- */

.p-news-detail__body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* キャプション付きの画像（figure / WordPressの .wp-caption） */
.p-news-detail__body figure,
.p-news-detail__body .wp-caption {
  max-width: 100%;
}

.p-news-detail__body figcaption,
.p-news-detail__body .wp-caption-text {
  margin-top: .8rem;
  font-size: 1.3rem;
  line-height: 1.7;
  text-align: center;
  color: #818181;
}

/* WordPressの配置クラス */
.p-news-detail__body .aligncenter {
  margin-right: auto;
  margin-left: auto;
}

.p-news-detail__body .alignleft {
  float: left;
  margin: 0 2.4rem 2.4rem 0;
}

.p-news-detail__body .alignright {
  float: right;
  margin: 0 0 2.4rem 2.4rem;
}

/* 回り込みを次のブロックへ持ち越さない */
.p-news-detail__body::after {
  content: "";
  display: block;
  clear: both;
}

/* YouTube等の埋め込み。16:9で幅いっぱいに表示する */
.p-news-detail__body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

@media (max-width: 767px) {
  /* SPは回り込みをやめて縦に積む（本文が細くなりすぎるため） */
  .p-news-detail__body .alignleft,
  .p-news-detail__body .alignright {
    float: none;
    margin: 0 auto;
  }

  .p-news-detail__body figcaption,
  .p-news-detail__body .wp-caption-text {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   2-5. 表
   -------------------------------------------------------------------------- */

.p-news-detail__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.6rem;
  line-height: 1.75;
  color: #333;
}

.p-news-detail__body th,
.p-news-detail__body td {
  padding: 1.4rem 1.6rem;
  border: 1px solid #e8ebf1;
  text-align: left;
  vertical-align: top;
}

/* 見出しセルは薄いオレンジ地 */
.p-news-detail__body th {
  background-color: rgba(246, 116, 27, .08);
  font-weight: 500;
  white-space: nowrap;
}

.p-news-detail__body caption {
  margin-bottom: .8rem;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: left;
  color: #333;
}

@media (max-width: 767px) {
  /* 列が多い表は縮めると読めなくなるため、横スクロールで見せる */
  .p-news-detail__body table {
    display: block;
    overflow-x: auto;
    font-size: 1.3rem;
    white-space: nowrap;
  }

  .p-news-detail__body th,
  .p-news-detail__body td {
    padding: 1rem 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   2-6. 引用・区切り線・整形済みテキスト
   -------------------------------------------------------------------------- */

.p-news-detail__body blockquote {
  padding: 2.4rem 3rem;
  border-left: 5px solid #ddd;
  background-color: #f7f7f7;
}

/* 引用の中の段落は本文より少し小さくする */
.p-news-detail__body blockquote p {
  font-size: 1.5rem;
  color: #555;
}

.p-news-detail__body blockquote > * + * {
  margin-top: 1.6rem;
}

.p-news-detail__body blockquote cite {
  display: block;
  font-size: 1.3rem;
  font-style: normal;
  color: #818181;
}

.p-news-detail__body hr {
  height: 0;
  margin: 4rem 0;
  border: 0;
  border-top: 1px solid #e8ebf1;
}

.p-news-detail__body pre {
  padding: 2rem;
  background-color: #f7f7f7;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333;
  overflow-x: auto;
}

.p-news-detail__body code {
  padding: .2rem .6rem;
  background-color: #f7f7f7;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 1.4rem;
}

.p-news-detail__body pre code {
  padding: 0;
  background: none;
}

@media (max-width: 767px) {
  .p-news-detail__body blockquote {
    padding: 1.6rem 2rem;
    border-left-width: 4px;
  }

  .p-news-detail__body blockquote p {
    font-size: 1.4rem;
  }

  .p-news-detail__body hr {
    margin: 3rem 0;
  }
}