@charset "UTF-8";

/* ==========================================
   お知らせ詳細の外枠・記事の見出し・白い箱（single.php）
   XD: 07_お知らせ詳細_SP（パンくず y=70・見出し 25px・日付 x=14 y=227・ラベル x=121 y=225・白い箱 x=15 y=291 345×2614）
       07_お知らせ詳細_PC（見出し y=240・日付 x=203 y=307・ラベル x=310 y=305・白い箱 x=203 y=381 960×2207）
   本文（the_content の見出し・段落・リスト・画像・引用）・目次・前後の記事・「一覧に戻る」もこのファイル（特定の投稿の DOM には依存しない）
   XD 本文: 本文 16px・行の間隔 27px・#555555、H2 SP 20px／PC 24px（下線 2px）、H3 SP 18px／PC 20px（左に 10px の帯）
   ========================================== */
.news-detail {
  box-sizing: border-box;
  padding: 68px 0 0; /* XD SP: パンくずのベースライン 82 → 行の上端 68 */
}

.news-detail__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.news-detail__breadcrumb {
  /* XD SP: 2 行のパンくずの下端 110 → 見出しの 1 行目の上端 142.33（ベースライン 169.58） */
  margin-bottom: 32.33px;
}

/* ==========================================
   記事の見出し・日付・カテゴリ
   ========================================== */
.news-detail__title {
  margin: 0 0 8.67px; /* XD SP: 2 行目の下端 216.33 → ラベルの上端 225 */
  font-family: var(--font-ja);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.48; /* 37px ÷ 25px */
  letter-spacing: 0.1em; /* 2.5px ÷ 25px */
  color: var(--color-text);
  text-indent: -3px; /* XD SP: x=12（外側の余白 15 より 3 左） */
  overflow-wrap: anywhere;
}

.news-detail__meta {
  display: flex;
  align-items: center;
  margin: 0 0 40px -1px; /* XD SP: ラベルの下端 251 → 白い箱の上端 291。日付は x=14（外側の余白 15 より 1 左） */
}

.news-detail__meta time {
  /* XD: 日付 Archivo Narrow Regular 16px・字間 0.8px・#707070。ラベルは日付の左端から 107（SP x=14 → 121、PC x=203 → 310） */
  flex: none;
  width: 107px;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.375; /* 22px ÷ 16px */
  letter-spacing: 0.05em; /* 0.8px ÷ 16px */
  color: var(--color-border);
}

.news-detail__category {
  /* XD: ラベル 96×26・角丸 5・#93c572、文字 YuGo-Medium 14px・白 */
  box-sizing: border-box;
  width: 96px;
  height: 26px;
  border-radius: 5px;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8572; /* 26px ÷ 14px（切り上げて 26px ちょうどにする） */
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  background-color: var(--color-main);
}

.news-detail__category a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================
   白い箱・アイキャッチ
   ========================================== */
.news-detail__panel {
  /* XD SP: 箱 345 幅・角丸 50・影 1 1 5。アイキャッチは上端から 30・左右 20（x=34.85 w=305.2） */
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 80px; /* XD SP: 箱の下端 2905 → お問い合わせのカード 2985 */
  padding: 30px 20px 29px; /* XD SP: 「一覧に戻る」の下端 2876 → 箱の下端 2905 */
  border-radius: 50px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-btn);
}

.news-detail__body-container {
  box-sizing: border-box;
  width: 100%;
}

.news-detail__main-visual {
  /* XD: 長方形 1112（アイキャッチ）600×391・角丸 20・影 0 3 3。SP は 305.2×199（同じ比率） */
  width: 100%;
  margin: 0 0 20px; /* XD SP: アイキャッチの下端 520 → 目次の上端 540 */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.news-detail__main-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 391;
  object-fit: cover;
}

.news-detail__main-visual--logo {
  /* アイキャッチがないとき：XD の #f0f0f0 の四角にロゴ */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 600 / 391;
  background-color: var(--color-noimage);
}

.news-detail__main-visual--logo img {
  width: 169px;
  height: 29px;
  aspect-ratio: auto;
  object-fit: contain;
}

/* ==========================================
   目次（本文の先頭の .news-detail__toc。投稿の中身）
   XD SP: 箱 305×228 x=35 y=540・枠 2px #93c572・角丸 20・目次 20px 太字 y=555
   ========================================== */
.news-detail__toc {
  box-sizing: border-box;
  margin: 0 0 39.27px; /* XD SP: 目次の下端 768 → H2 の行の上端 806（ベースラインを 1.27 下げる） */
  padding: 13px 13px 12.5px;
  border: 2px solid var(--color-main);
  border-radius: 20px;
  background-color: var(--color-white);
}

.news-detail__toc > .news-detail__toc-title {
  margin: 1.27px 0 15.23px; /* XD SP: 目次の下端 575 → 1 つ目の行の上端 591.5。見出しのベースライン 573 */
  font-size: 20px;
  font-weight: 700;
  line-height: 1; /* 20px ÷ 20px */
}

.news-detail__toc ol,
.news-detail__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-detail__toc li {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5; /* 21px ÷ 14px */
}

.news-detail__toc ol > li {
  /* XD: H2 の項目は字間 50（SP 0.7px・PC 0.8px）、H3 の項目は 0 */
  letter-spacing: 0.05em; /* 0.7px ÷ 14px */
}

.news-detail__toc ul {
  margin: 5px 0 13px 16px; /* XD SP: H2 の項目の下端 → H3 の項目 5、H3 の項目の下端 → 次の H2 の項目 13、H3 は x=66 */
}

.news-detail__toc ul > li {
  position: relative;
  padding-left: 10px;
  letter-spacing: 0;
}

.news-detail__toc ul > li::before {
  /* XD: H3 の項目の頭に直径 5px の #93c572 の丸 */
  content: "";
  position: absolute;
  top: 9.78px; /* XD SP: 楕円形 13 y=627 − li の上端 617.22 */
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-main);
}

.news-detail__toc a {
  color: inherit;
  text-decoration: none;
}

.news-detail__toc-num {
  color: var(--color-accent); /* XD: 目次の番号「1.」「2.」は #f7b560 */
}

@media (any-hover: hover) {
  :where(.news-detail__toc) a:hover {
    color: var(--color-main);
  }
}

/* ==========================================
   本文（the_content）：見出し・段落・リスト・画像・引用
   XD SP: 本文 16px・行の間隔 27px・#555555（YuGo-Medium）
   ========================================== */
.news-detail__content {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6875; /* 27px ÷ 16px */
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.news-detail__content p {
  margin: 0 0 30px; /* XD SP: 本文の行の下端 1143.5 → H3 の行の上端 1173.5 */
}

.news-detail__content h2 {
  /* XD: H2 は 2px の #93c572 の下線が文字の幅いっぱい（SP 20px・PC 24px 太字） */
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 31.27px 0 9.23px; /* XD SP: 本文の行の下端 1679.5 → H2 の行の上端 1709。H2 の下端 836 → 本文の行の上端 846.5。ベースラインを 1.27 下げる */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5; /* 30px ÷ 20px */
}

.news-detail__content h2::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px; /* XD SP: 下線の中心 y=832（文字の箱の下端 831 の 1px 下） */
  left: 0;
  height: 2px;
  background-color: var(--color-main);
}

.news-detail__content h3 {
  /* XD: H3 は左に幅 10px の #93c572 の帯（文字の高さ）。文字は帯の右 9.5px */
  position: relative;
  margin: 30px 0 11px;
  padding-left: 19.5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5; /* 27px ÷ 18px */
}

.news-detail__content h3::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 0;
  width: 10px;
  background-color: var(--color-main);
}

.news-detail__content h4 {
  margin: 30px 0 11px;
  font-size: 16px;
  font-weight: 700;
}

.news-detail__content > ul,
.news-detail__content > ol {
  margin: 0 0 9px; /* XD SP: リストの行の下端 1373.5 → 本文の行の上端 1382.5 */
  padding: 0;
}

.news-detail__content > ul {
  /* XD: リストは「・」の文字を頭に付けた行（箇条書きの印は使わない） */
  list-style: none;
}

.news-detail__content > ul > li::before {
  content: "・";
}

.news-detail__content > ol {
  padding-left: 1.6em;
  list-style: decimal;
}

.news-detail__content .wp-block-list {
  /* 本文のリスト（WordPress の wp-block-list）。旧 legacy-inline.css から移した */
  margin: 0 0 2rem 1.25rem;
  padding-left: 0;
  list-style: disc;
}

.news-detail__content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

.news-detail__content blockquote {
  margin: 0 0 30px;
  padding: 0 0 0 16px;
  border-left: 4px solid var(--color-main);
}

.news-detail__media-row {
  /* XD SP: 本文と画像が縦に並ぶ（本文の幅 284、画像 305×286 の影 0 3 3）。画像の下端 2374 → H3 の行の上端 2409.5 */
  display: flex;
  flex-direction: column;
  gap: 14.5px;
}

.news-detail__media-row p {
  max-width: 93.2%;
  margin: 0;
}

.news-detail__media-row figure {
  margin: 0 0 5.5px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.news-detail__media-row img {
  width: 100%;
  height: 286px;
  object-fit: cover;
}

.news-detail__media-row br {
  display: none;
}

.news-detail__media-row.wp-block-columns {
  /* 本文の横並び（WordPress の wp-block-columns）。詳細度 0,2,0 で上の .news-detail__media-row に勝つ。旧 legacy-inline.css から移した */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  justify-content: center;
}

/* ==========================================
   一覧に戻る
   XD: 「一覧に戻る」301×70・角丸 50・枠 2px #93c572・文字 20px 字間 2px #93c572（SP x=37 y=2806／PC x=533 y=2468）
   前後の記事（前の記事へ・次の記事へ）は XD にないので置かない（HANDOFF §4 の決定 2026-10-25）
   ========================================== */
.news-detail__nav {
  display: flex;
  justify-content: center;
  margin: 34.5px 0 0; /* XD SP: 本文の行の下端 2771.5 → 「一覧に戻る」の上端 2806 */
}

.news-detail__back {
  display: block;
  box-sizing: border-box;
  width: 301px;
  max-width: 100%;
  height: 70px;
  padding: 0 0 0 4px; /* 右へ 2px（字間 2px の末尾の分。XD x=630）。縦は行の高さで中央にそろえる */
  border: 2px solid var(--color-main);
  border-radius: 50px;
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 3.3; /* 66px ÷ 20px。高さ 70 − 枠 2×2。文字の中心が箱の中心（flex だと測定の probe が別の項目になりベースラインが中央になるため block） */
  letter-spacing: 0.1em; /* 2px ÷ 20px */
  color: var(--color-main);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-white);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

@media (any-hover: hover) {
  .news-detail__back:hover {
    color: var(--color-white);
    background-color: var(--color-main);
  }
}

.news-detail__contact {
  padding: 0;
}

@media (width >= 768px) {
  .news-detail {
    padding-top: 144px; /* XD PC: パンくずの行の上端 144 */
  }

  .news-detail__inner {
    max-width: 960px;
    padding: 0;
  }

  .news-detail__breadcrumb {
    margin-bottom: 80px;
  }

  .news-detail__title {
    /* XD PC: 見出し 40px・字間 4px（1 行目のベースライン 275。行の高さ 60 の箱の上端は 231）。ラベルの上端 305 */
    margin: -9px 0 14px;
    font-size: 40px;
    line-height: 1.5; /* 60px ÷ 40px */
    letter-spacing: 0.1em; /* 4px ÷ 40px */
    text-indent: 0;
  }

  .news-detail__meta {
    margin: 0 0 50px; /* XD PC: ラベルの下端 331 → 白い箱の上端 381 */
  }

  .news-detail__panel {
    /* XD PC: 箱 960 幅・角丸 100。アイキャッチ x=383（箱の左端から 180）y=431（上端から 50）。箱の下端 2588 → カード 2748 */
    margin-bottom: 160px;
    padding: 50px 180px;
    border-radius: 100px;
  }

  .news-detail__main-visual {
    margin-bottom: 29px; /* XD PC: アイキャッチの下端 822 → 目次の上端 851 */
  }

  .news-detail__toc {
    /* 本文 */
    margin-bottom: 74.5px; /* XD PC: 目次の下端 1045 → H2 の行の上端 1119.5 */
    padding: 28px 28px 23px;
  }

  .news-detail__toc > .news-detail__toc-title {
    margin: 0 0 15px;
  }

  .news-detail__toc ol {
    margin-left: 20px; /* XD PC: 目次の見出し x=413 → H2 の項目 x=433 */
  }

  .news-detail__toc li {
    font-size: 16px;
    line-height: 1.625; /* 26px ÷ 16px */
  }

  .news-detail__toc ol > li {
    letter-spacing: 0.05em; /* 0.8px ÷ 16px */
  }

  .news-detail__toc ul {
    margin: 0 0 0 16px;
  }

  .news-detail__toc ul > li::before {
    top: 11px;
  }

  .news-detail__content p {
    margin-bottom: 29.5px;
  }

  .news-detail__content h2 {
    margin: 69px 0 13px; /* XD PC: 本文の行の下端 1725.5 → H2 の行の上端 1794.5。H2 の下端 1155.5 → 本文の行の上端 1168.5 */
    font-size: 24px;
    line-height: 1.5; /* 36px ÷ 24px */
  }

  .news-detail__content h2::after {
    bottom: 5.5px;
  }

  .news-detail__content h3 {
    margin: 29.5px 0 9.5px;
    font-size: 20px;
    line-height: 1.5; /* 30px ÷ 20px */
  }

  .news-detail__content h3::before {
    inset-block: 5px; /* XD PC: 線 5 の高さ 20（行 30 − 5 − 5） */
  }

  .news-detail__content > ul,
  .news-detail__content > ol {
    margin-bottom: 29.5px;
  }

  .news-detail__media-row {
    flex-direction: row;
    gap: 26px;
    margin-top: -5px; /* XD PC: H2 → 本文と画像の行の間が、ほかの H2 → 本文より 5px 狭い */
  }

  .news-detail__media-row p {
    flex: 1;
    max-width: none;
    margin: 0;
  }

  .news-detail__media-row figure {
    flex: none;
    width: 290px;
    margin: 5.5px 0 0; /* XD PC: 画像の上端 1844 = 本文の行の上端 1838.5 + 5.5 */
  }

  .news-detail__media-row img {
    height: 286px;
  }

  .news-detail__media-row.wp-block-columns {
    grid-template-columns: minmax(0, 17.5rem) 18.125rem;
    gap: 1.5rem;
  }

  .news-detail__nav {
    margin: 74.5px 0 0; /* XD PC: 本文の行の下端 2393.5 → 「一覧に戻る」の上端 2468 */
  }
}