/* ========================================
   news-detail.css
   ニュース詳細ページ専用スタイル
   SP基準: 375px / PC基準: 1366px
======================================== */

/* ===== 記事タイトルバー ===== */

.nd-title-bar {
  background: var(--bg_gd-color);
  margin: 0 20px;
  padding: 7px 8px;
}

.nd-title-bar__text {
  font-family: var(--sub-font);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 28px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

/* ===== 記事コンテンツエリア ===== */

.nd-article {
  padding: 0 20px;
}

/* --- メイン画像（アイキャッチ） --- */
.nd-article__img-wrap {
  margin-top: 24px;
}

.nd-article__img {
  width: 100%;
  aspect-ratio: 67 / 47; /* SP: 335 × 235px */
  object-fit: cover;
  display: block;
  background-color: #d9d9d9;
}

/* ===== 記事本文（WordPress: the_content() 相当） ===== */

.nd-article__body {
  margin-top: 24px;
}

/* --- 本文テキスト --- */
.nd-article__body p {
  font-size: var(--fs-16);
  line-height: 32px;
  color: var(--text-color);
  opacity: 0.9;
}

.nd-article__body p + p {
  margin-top: 24px;
}

/* --- 見出し (h2) --- */
.nd-article__body h2 {
  margin-top: 40px;
  border-left: 4px solid var(--main-color);
  padding-left: 8px;
  font-family: var(--sub-font);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 26px;
  color: var(--main-color);
}

/* --- 画像テーブル ---
     管理画面から table を挿入し画像を配置した場合に適用
     SP: 縦積み / PC: 2列横並び                         --- */
.nd-article__body table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 24px;
}

/* SP: tr を flex コンテナにして縦積み */
.nd-article__body table tr {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nd-article__body table td {
  padding: 0;
  width: 100% !important;
}

/* td 内の画像をレスポンシブに */
.nd-article__body table td img {
  width: 100%;
  aspect-ratio: 67 / 47; /* SP: 335 × 235px */
  object-fit: cover;
  display: block;
  background-color: #d9d9d9;
}

/* --- h2・table 前後の余白調整 --- */
.nd-article__body h2 + p,
.nd-article__body table + p {
  margin-top: 24px;
}

/* ===== ページャー ===== */

.nd-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-top: 40px;
}

.nd-pager__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 28px;
  color: var(--text-color);
  text-decoration: none;
}

.nd-pager__arrow {
  display: inline-block;
  width: 7px;
  height: 10px;
  position: relative;
  flex-shrink: 0;
}

.nd-pager__arrow--prev::before,
.nd-pager__arrow--next::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--text-color);
  border-right: 2px solid var(--text-color);
  transform-origin: center;
}

.nd-pager__arrow--prev::before {
  left: 1px;
  transform: translateY(-50%) rotate(-135deg);
}

.nd-pager__arrow--next::before {
  right: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.nd-pager__link--next {
  margin-right: 0;
  margin-left: auto;
}
/* ========================================
   PC（768px以上）
   PC基準幅: 1366px / コンテンツ幅: 814px
   max-width + padding + auto-margin で
   任意の横幅でも側面余白を維持する
======================================== */

@media (min-width: 768px) {
  /* --- 記事タイトルバー ---
       814px（コンテンツ）+ 24px × 2（padding） = 862px */
  .nd-title-bar {
    max-width: 862px;
    margin: 0 auto;
    padding: 7px 24px;
  }

  .nd-title-bar__text {
    font-size: var(--fs-22);
    line-height: 33px;
  }

  /* --- 記事コンテンツ ---
       814px（コンテンツ）+ 20px × 2（padding） = 854px */
  .nd-article {
    max-width: 854px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* --- メイン画像: PC 814 × 458px --- */
  .nd-article__img {
    aspect-ratio: 407 / 229;
  }

  /* --- 見出し (h2) --- */
  .nd-article__body h2 {
    font-size: var(--fs-18);
    line-height: 28px;
  }

  /* --- 画像テーブル: PC 2列横並び ---
       各セル 390 × 280px、gap 34px */
  .nd-article__body table tr {
    flex-direction: row;
    gap: 34px;
  }

  .nd-article__body table td {
    flex: 1;
    width: 50% !important;
  }

  .nd-article__body table td img {
    aspect-ratio: 39 / 28; /* PC: 390 × 280px */
  }

  /* --- ページャー --- */
  .nd-pager {
    max-width: 854px;
    margin: 56px auto 0;
    padding: 0 20px;
  }
}