/* =========================================================
   Shared sub-page layout: title banner + alternating content blocks.
   Used by teiki-yobo-sesshu / influenza-corona-sesshu /
   oshirase-ichiran / oshirase-detail.
   ========================================================= */

/* ---- Title banner (Zone A: bg photo + walking-family illustration +
   centered title, all placed by Figma-measured ratio) ---- */
.page-banner { position: relative; z-index: 2; }
.page-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner__text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.page-banner__illust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.page-banner__illust .illust { position: absolute; height: auto; }
.page-banner__illust .illust-1 { transform: scaleX(-1); }
.page-banner__illust .illust-6 { transform: scaleY(-1) rotate(180deg); }

@media (min-width: 1280px) {
  .page-banner { height: min(296px, calc(var(--scale) * 296px)); }
  .page-banner__text { width: max-content; max-width: 90%; }

  /* Percentages measured from the PC Figma banner (1440x296). */
  .page-banner__illust .illust-1 { left: 63.59%; top: 76.52%; width: 9.15%; }
  .page-banner__illust .illust-2 { left: 22.22%; top: 76.52%; width: 4.75%; }
  .page-banner__illust .illust-3 { left: 28.77%; top: 86.52%; width: 3.5%; }
  .page-banner__illust .illust-4 { left: 54.75%; top: 94.59%; width: 4.32%; }
  .page-banner__illust .illust-5 { left: 74.32%; top: 93.28%; width: 3.46%; }
  .page-banner__illust .illust-6 { left: 32.84%; top: 77.74%; width: 3.77%; }
  .page-banner__illust .illust-7 { left: 38.41%; top: 103.41%; width: 4.73%; }
  .page-banner__illust .illust-8 { left: 45.67%; top: 109.12%; width: 1.2%; }
  .page-banner__illust .illust-9 { left: 48.42%; top: 110.44%; width: 1.02%; }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .page-banner { height: min(296px, calc(var(--scale) * 296px)); }
  .page-banner__text { width: max-content; max-width: 90%; }

  /* Percentages measured from the PC Figma banner (1440x296). */
  .page-banner__illust .illust-1 { left: 63.59%; top: 76.52%; width: 9.15%; }
  .page-banner__illust .illust-2 { left: 22.22%; top: 76.52%; width: 4.75%; }
  .page-banner__illust .illust-3 { left: 28.77%; top: 86.52%; width: 3.5%; }
  .page-banner__illust .illust-4 { left: 54.75%; top: 94.59%; width: 4.32%; }
  .page-banner__illust .illust-5 { left: 74.32%; top: 93.28%; width: 3.46%; }
  .page-banner__illust .illust-6 { left: 32.84%; top: 77.74%; width: 3.77%; }
  .page-banner__illust .illust-7 { left: 38.41%; top: 103.41%; width: 4.73%; }
  .page-banner__illust .illust-8 { left: 45.67%; top: 109.12%; width: 1.2%; }
  .page-banner__illust .illust-9 { left: 48.42%; top: 110.44%; width: 1.02%; }
}
@media (max-width: 599px) {
  .page-banner { height: min(160px, calc(var(--scale) * 160px)); }
  .page-banner__text { width: 88%; }

  /* Percentages measured from the SP Figma banner (375x160). */
  .page-banner__illust .illust-1 { left: 71.86%; top: 80.25%; width: 14.71%; }
  .page-banner__illust .illust-2 { left: 5.33%; top: 80.25%; width: 7.63%; }
  .page-banner__illust .illust-3 { left: 15.86%; top: 88.2%; width: 5.63%; }
  .page-banner__illust .illust-4 { left: 57.64%; top: 94.56%; width: 6.94%; }
  .page-banner__illust .illust-5 { left: 89.11%; top: 93.38%; width: 5.56%; }
  .page-banner__illust .illust-6 { left: 22.4%; top: 81.38%; width: 6.06%; }
  .page-banner__illust .illust-7 { left: 31.36%; top: 101.31%; width: 7.61%; }
  .page-banner__illust .illust-8 { left: 43.04%; top: 105.63%; width: 1.93%; }
  .page-banner__illust .illust-9 { left: 47.46%; top: 106.75%; width: 1.65%; }
}

/* ---- Content blocks (Zone B: readable text, alternating bg) ---- */
.page-block { display: flex; flex-direction: column; align-items: center; }
.page-block--white { background: var(--color-white); }
.page-block--green { background: var(--color-bg-green); }
.page-block__inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.page-block__heading .heading__ja { line-height: 1.4; }
.page-block__body { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.page-block__period p { color: var(--color-primary); font-weight: 500; text-align: justify; }
.page-block__period .small { display: block; }

@media (min-width: 1280px) {
  .page-block { padding: min(100px, calc(var(--scale) * 100px)) 20px; }
  .page-block__inner { max-width: 820px; gap: min(60px, calc(var(--scale) * 60px)); }
  .page-block__inner--wide { max-width: 1052px; }
  .page-block__body { gap: min(40px, calc(var(--scale) * 40px)); }
  .page-block__period { display: flex; flex-direction: column; gap: min(20px, calc(var(--scale) * 20px)); }
  .page-block__period p { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.55; letter-spacing: .1em; }
  .page-block__period .small { font-size: clamp(12px, calc(var(--scale) * 14px), 14px); }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .page-block { padding: min(100px, calc(var(--scale) * 100px)) 20px; }
  .page-block__inner { max-width: 820px; gap: min(60px, calc(var(--scale) * 60px)); }
  .page-block__inner--wide { max-width: 1052px; }
  .page-block__body { gap: min(40px, calc(var(--scale) * 40px)); }
  .page-block__period { display: flex; flex-direction: column; gap: min(20px, calc(var(--scale) * 20px)); max-width: 580px; }
  .page-block__period p { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.55; letter-spacing: .1em; }
  .page-block__period .small { font-size: clamp(12px, calc(var(--scale) * 14px), 14px); }
}
@media (max-width: 599px) {
  .page-block { padding: min(60px, calc(var(--scale) * 60px)) 20px; }
  .page-block__inner { max-width: 800px; gap: min(40px, calc(var(--scale) * 40px)); }
  .page-block__body { gap: min(30px, calc(var(--scale) * 30px)); }
  .page-block__period { display: flex; flex-direction: column; gap: min(16px, calc(var(--scale) * 16px)); }
  .page-block__period p { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); line-height: 1.55; letter-spacing: .1em; }
  .page-block__period .small { font-size: clamp(12px, calc(var(--scale) * 14px), 14px); }
}

/* ---- Price table (eligibility & fees) ---- */
.price-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; min-width: 700px; border-collapse: collapse; background: #fff; }
.price-table th, .price-table td { border: 1px solid var(--color-border-green); text-align: center; }
.price-table__note { font-size: 12px; }
.price-table thead th { background: var(--color-bg-green); color: var(--color-green); font-weight: 700; }
.price-table tbody th { color: var(--color-green); font-weight: 700; }
.price-table td { color: var(--color-primary); font-weight: 700; }

/* ---- Reservation table (eligibility & fees) ---- */
.price-table-wrap.reservation-table-wrap .price-table thead th { background: var(--color-green); color: var(--color-bg-green);}


/* ---- Reservation info list (bullet-heading + value) ---- */
.info-list { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.info-list__row { display: flex; align-items: center; }
.info-list__row .value { color: var(--color-primary); font-weight: 500; text-align: justify; }
.info-list__note { color: var(--color-green); }
.info-list__reserve { display: flex; flex-direction: column; align-items: center; margin-left: auto; }
.info-list__btn { width: auto; flex-shrink: 0; white-space: nowrap; cursor: default; }
.info-list__btn--gray { background: #8b8b8b; }
.info-list__btn--gray:hover { background: #8b8b8b; transform: none; box-shadow: none; }
.info-list__btn--link { cursor: pointer; }
.info-list__reserve-note { color: var(--color-primary); font-weight: 500; text-align: center; }

@media (min-width: 1280px) {
  .price-table th, .price-table td { padding: min(10px, calc(var(--scale) * 10px)) min(8px, calc(var(--scale) * 8px)); font-size: clamp(13px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; line-height: 1.4; }
  .info-list { gap: min(10px, calc(var(--scale) * 10px)); }
  .info-list__row { gap: min(20px, calc(var(--scale) * 20px)); }
  .info-list__row .value { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .info-list__row .value.info-list__note { font-size: clamp(12px, calc(var(--scale) * 13px), 13px); margin-top: min(4px, calc(var(--scale) * 4px)); }
  .info-list__reserve { gap: min(8px, calc(var(--scale) * 8px)); align-items: center; }
  .info-list__btn { font-size: clamp(13px, calc(var(--scale) * 15px), 15px); padding: min(10px, calc(var(--scale) * 10px)) min(18px, calc(var(--scale) * 18px)); }
  .info-list__reserve-note { font-size: clamp(12px, calc(var(--scale) * 13px), 13px); }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .price-table th, .price-table td { padding: min(10px, calc(var(--scale) * 10px)) min(8px, calc(var(--scale) * 8px)); font-size: clamp(13px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; line-height: 1.4; }
  .info-list { gap: min(10px, calc(var(--scale) * 10px)); }
  .info-list__row { gap: min(20px, calc(var(--scale) * 20px)); }
  .info-list__row .value { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .info-list__row .value.info-list__note { font-size: clamp(12px, calc(var(--scale) * 13px), 13px); margin-top: min(4px, calc(var(--scale) * 4px)); }
  .info-list__reserve { gap: min(8px, calc(var(--scale) * 8px)); align-items: center; }
  .info-list__btn { font-size: clamp(13px, calc(var(--scale) * 15px), 15px); padding: min(10px, calc(var(--scale) * 10px)) min(18px, calc(var(--scale) * 18px)); }
  .info-list__reserve-note { font-size: clamp(12px, calc(var(--scale) * 13px), 13px); }
}
@media (max-width: 599px) {
  .price-table th, .price-table td { padding: min(8px, calc(var(--scale) * 8px)) min(6px, calc(var(--scale) * 6px)); font-size: clamp(12px, calc(var(--scale) * 15px), 15px); letter-spacing: .1em; }
  .info-list { gap: min(8px, calc(var(--scale) * 8px)); }
  .info-list__row { gap: min(16px, calc(var(--scale) * 16px)); flex-wrap: wrap; }
  .info-list__row .value { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .info-list__row .value.info-list__note { font-size: clamp(11px, calc(var(--scale) * 12px), 12px); margin-top: min(2px, calc(var(--scale) * 2px)); }
  .info-list__reserve { width: 100%; margin-left: 0; gap: min(6px, calc(var(--scale) * 6px)); }
  .info-list__btn { width: 100%; white-space: normal; font-size: clamp(13px, calc(var(--scale) * 15px), 15px); padding: min(10px, calc(var(--scale) * 10px)) min(18px, calc(var(--scale) * 18px)); }
  .info-list__reserve-note { font-size: clamp(11px, calc(var(--scale) * 12px), 12px); }
}

/* ---- Vaccine schedule table (子どもの予防接種スケジュール) ---- */
.schedule-table-wrap { width: 100%; }
.schedule-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border-green); }
.schedule-table th, .schedule-table td { border-bottom: 1px solid var(--color-border-green); vertical-align: middle; }
.schedule-table tr:last-child th, .schedule-table tr:last-child td { border-bottom: none; }
.schedule-table th { border-right: 1px solid var(--color-border-green); color: var(--color-green); font-weight: 700; text-align: center; }
.schedule-table td { color: var(--color-primary); font-weight: 700; text-align: left; }
.schedule-table td ul { list-style: disc; }
.schedule-table td li { margin-left: 1.2em; }
.schedule-table td p.small { text-indent: 1.2em; }
.schedule-table__note { color: var(--color-primary); }
.schedule-table__icon { display: flex; align-items: flex-end; justify-content: center; margin-left: auto; margin-right: auto; }
.schedule-table__icon img { display: block; width: 100%; height: 100%; }
.schedule-table__age { display: block; }
/* Icon 4 (小学生～) is two layered Figma assets, positioned by the ratios
   measured from their source group (a 40x67.055 box). */
.schedule-table__icon--4 { position: relative; }
.schedule-table__icon--4 .schedule-table__icon-a { position: absolute; left: 10.87%; top: 0; width: 76.67%; height: 61.32%; }
.schedule-table__icon--4 .schedule-table__icon-b { position: absolute; left: 0; top: 50.73%; width: 100%; height: 49.27%; }

@media (min-width: 1280px) {
  .schedule-table th { width: 32.5%; padding: min(20px, calc(var(--scale) * 20px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; line-height: 1.4; }
  .schedule-table__icon { margin-bottom: min(4px, calc(var(--scale) * 4px)); }
  .schedule-table__icon--1 { width: min(70px, calc(var(--scale) * 70px)); height: min(40px, calc(var(--scale) * 40px)); }
  .schedule-table__icon--2 { width: min(40px, calc(var(--scale) * 40px)); height: min(50px, calc(var(--scale) * 50px)); }
  .schedule-table__icon--3 { width: min(40px, calc(var(--scale) * 40px)); height: min(57px, calc(var(--scale) * 57px)); }
  .schedule-table__icon--4 { width: min(40px, calc(var(--scale) * 40px)); height: min(67px, calc(var(--scale) * 67px)); }
  .schedule-table__icon--5 { width: min(50px, calc(var(--scale) * 50px)); height: min(99px, calc(var(--scale) * 99px)); }
  .schedule-table td { padding: min(20px, calc(var(--scale) * 20px)) min(24px, calc(var(--scale) * 24px)); }
  .schedule-table td li { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.8; letter-spacing: .1em; }
  .schedule-table td .small { font-size: clamp(11px, calc(var(--scale) * 12px), 12px); }
  .schedule-table td p.small { line-height: 1.6; margin: min(4px, calc(var(--scale) * 4px)) 0; }
  .schedule-table__note { margin-top: min(20px, calc(var(--scale) * 20px)); font-size: clamp(12px, calc(var(--scale) * 13px), 13px); line-height: 1.7; letter-spacing: .1em; }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .schedule-table th { width: 32.5%; padding: min(16px, calc(var(--scale) * 16px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; line-height: 1.4; }
  .schedule-table__icon { margin-bottom: min(4px, calc(var(--scale) * 4px)); }
  .schedule-table__icon--1 { width: min(70px, calc(var(--scale) * 70px)); height: min(40px, calc(var(--scale) * 40px)); }
  .schedule-table__icon--2 { width: min(40px, calc(var(--scale) * 40px)); height: min(50px, calc(var(--scale) * 50px)); }
  .schedule-table__icon--3 { width: min(40px, calc(var(--scale) * 40px)); height: min(57px, calc(var(--scale) * 57px)); }
  .schedule-table__icon--4 { width: min(40px, calc(var(--scale) * 40px)); height: min(67px, calc(var(--scale) * 67px)); }
  .schedule-table__icon--5 { width: min(50px, calc(var(--scale) * 50px)); height: min(99px, calc(var(--scale) * 99px)); }
  .schedule-table td { padding: min(16px, calc(var(--scale) * 16px)) min(20px, calc(var(--scale) * 20px)); }
  .schedule-table td li { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.8; letter-spacing: .1em; }
  .schedule-table td .small { font-size: clamp(11px, calc(var(--scale) * 12px), 12px); }
  .schedule-table td p.small { line-height: 1.6; margin: min(4px, calc(var(--scale) * 4px)) 0; }
  .schedule-table__note { margin-top: min(20px, calc(var(--scale) * 20px)); font-size: clamp(12px, calc(var(--scale) * 13px), 13px); line-height: 1.7; letter-spacing: .1em; }
}
@media (max-width: 599px) {
  .schedule-table th { padding: min(10px, calc(var(--scale) * 10px)); font-size: clamp(13px, calc(var(--scale) * 15px), 15px); letter-spacing: .1em; line-height: 1.4; }
  .schedule-table__icon { margin-bottom: min(2px, calc(var(--scale) * 2px)); }
  .schedule-table__icon--1 { width: min(49px, calc(var(--scale) * 49px)); height: min(28px, calc(var(--scale) * 28px)); }
  .schedule-table__icon--2 { width: min(28px, calc(var(--scale) * 28px)); height: min(35px, calc(var(--scale) * 35px)); }
  .schedule-table__icon--3 { width: min(28px, calc(var(--scale) * 28px)); height: min(40px, calc(var(--scale) * 40px)); }
  .schedule-table__icon--4 { width: min(28px, calc(var(--scale) * 28px)); height: min(47px, calc(var(--scale) * 47px)); }
  .schedule-table__icon--5 { width: min(35px, calc(var(--scale) * 35px)); height: min(69px, calc(var(--scale) * 69px)); }
  .schedule-table td { padding: min(12px, calc(var(--scale) * 12px)) min(14px, calc(var(--scale) * 14px)); }
  .schedule-table td li { font-size: clamp(13px, calc(var(--scale) * 14px), 14px); line-height: 1.7; letter-spacing: .1em; }
  .schedule-table td .small { font-size: clamp(10px, calc(var(--scale) * 11px), 11px); }
  .schedule-table td p.small { line-height: 1.5; margin: min(3px, calc(var(--scale) * 3px)) 0; }
  .schedule-table__note { margin-top: min(14px, calc(var(--scale) * 14px)); font-size: clamp(11px, calc(var(--scale) * 12px), 12px); line-height: 1.6; letter-spacing: .1em; }
}

/* ---- Notice list (お知らせ一覧) ---- */
.notice-list { display: flex; flex-direction: column; width: 100%; }
.notice-list__item { border-top: 1px solid var(--color-border-green); display: flex; flex-direction: column; }
.notice-list__item > a { display: flex; flex-direction: column; }
.notice-list__date { color: var(--color-green); font-weight: 700; }
.notice-list__title { color: var(--color-primary); font-weight: 700; transition: color .2s ease; }
.notice-list__item > a:hover .notice-list__title { color: var(--color-green); }

@media (min-width: 1280px) {
  .notice-list { gap: min(20px, calc(var(--scale) * 20px)); }
  .notice-list__item { padding-top: min(20px, calc(var(--scale) * 20px)); }
  .notice-list__item > a { gap: min(5px, calc(var(--scale) * 5px)); }
  .notice-list__date, .notice-list__title { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: min(25px, calc(var(--scale) * 25px)); letter-spacing: .1em; }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .notice-list { gap: min(20px, calc(var(--scale) * 20px)); }
  .notice-list__item { padding-top: min(20px, calc(var(--scale) * 20px)); }
  .notice-list__item > a { gap: min(5px, calc(var(--scale) * 5px)); }
  .notice-list__date, .notice-list__title { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: min(25px, calc(var(--scale) * 25px)); letter-spacing: .1em; }
}
@media (max-width: 599px) {
  .notice-list { gap: min(20px, calc(var(--scale) * 20px)); }
  .notice-list__item { padding-top: min(20px, calc(var(--scale) * 20px)); }
  .notice-list__item > a { gap: min(5px, calc(var(--scale) * 5px)); }
  .notice-list__date, .notice-list__title { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: min(25px, calc(var(--scale) * 25px)); letter-spacing: .1em; }
}

/* ---- Article detail (main + sidebar) ---- */
.article-detail { display: flex; align-items: flex-start; width: 100%; }
.article-detail__main { display: flex; flex-direction: column; }
.article-detail__head { display: flex; flex-direction: column; }
.article-detail__date { color: var(--color-green); font-weight: 700; }
.article-detail__title { color: var(--color-primary); font-weight: 700; }
.article-detail__body { display: flex; flex-direction: column; color: var(--color-primary); font-weight: 500; text-align: justify; }
.article-detail__schedule { display: flex; flex-direction: column; }
.article-detail__sidebar { display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-heading { color: var(--color-green); font-weight: 700; }
.category-list { display: flex; flex-direction: column; }
.category-list li { position: relative; color: var(--color-green); font-weight: 500; }
.category-list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: var(--color-green); border-radius: 2px; }
.category-list li a { display: block; color: inherit; text-decoration: none; transition: opacity .2s ease; }
.category-list li a:hover { text-decoration: underline; opacity: .7; }

@media (min-width: 1280px) {
  .article-detail { gap: min(94px, calc(var(--scale) * 94px)); }
  .article-detail__main { max-width: 676px; gap: min(60px, calc(var(--scale) * 60px)); }
  .article-detail__head { gap: min(20px, calc(var(--scale) * 20px)); }
  .article-detail__date { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .article-detail__title { font-size: clamp(18px, calc(var(--scale) * 24px), 24px); letter-spacing: .1em; line-height: 1.4; }
  .article-detail__body { gap: min(20px, calc(var(--scale) * 20px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.55; letter-spacing: .1em; }
  .article-detail__sidebar { width: 282px; gap: min(60px, calc(var(--scale) * 60px)); }
  .sidebar-heading { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .article-detail__sidebar .notice-list { gap: min(20px, calc(var(--scale) * 20px)); margin-top: min(20px, calc(var(--scale) * 20px)); }
  .category-list { gap: min(5px, calc(var(--scale) * 5px)); margin-top: min(20px, calc(var(--scale) * 20px)); }
  .category-list li { padding-left: min(20px, calc(var(--scale) * 20px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .article-detail { gap: min(94px, calc(var(--scale) * 94px)); }
  .article-detail__main { max-width: 676px; gap: min(60px, calc(var(--scale) * 60px)); }
  .article-detail__head { gap: min(20px, calc(var(--scale) * 20px)); }
  .article-detail__date { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .article-detail__title { font-size: clamp(18px, calc(var(--scale) * 24px), 24px); letter-spacing: .1em; line-height: 1.4; }
  .article-detail__body { gap: min(20px, calc(var(--scale) * 20px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.55; letter-spacing: .1em; }
  .article-detail__sidebar { width: 282px; gap: min(60px, calc(var(--scale) * 60px)); }
  .sidebar-heading { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .article-detail__sidebar .notice-list { gap: min(20px, calc(var(--scale) * 20px)); margin-top: min(20px, calc(var(--scale) * 20px)); }
  .category-list { gap: min(5px, calc(var(--scale) * 5px)); margin-top: min(20px, calc(var(--scale) * 20px)); }
  .category-list li { padding-left: min(20px, calc(var(--scale) * 20px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
}
@media (max-width: 599px) {
  .article-detail { flex-direction: column; gap: min(60px, calc(var(--scale) * 60px)); }
  .article-detail__main { gap: min(40px, calc(var(--scale) * 40px)); width: 100%; }
  .article-detail__head { gap: min(16px, calc(var(--scale) * 16px)); }
  .article-detail__date { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .article-detail__title { font-size: clamp(17px, calc(var(--scale) * 20px), 20px); letter-spacing: .1em; line-height: 1.4; }
  .article-detail__body { gap: min(16px, calc(var(--scale) * 16px)); font-size: clamp(13px, calc(var(--scale) * 16px), 16px); line-height: 1.55; letter-spacing: .1em; }
  .article-detail__sidebar { width: 100%; gap: min(40px, calc(var(--scale) * 40px)); }
  .sidebar-heading { font-size: clamp(14px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
  .article-detail__sidebar .notice-list { gap: min(20px, calc(var(--scale) * 20px)); margin-top: min(16px, calc(var(--scale) * 16px)); }
  .category-list { gap: min(5px, calc(var(--scale) * 5px)); margin-top: min(16px, calc(var(--scale) * 16px)); }
  .category-list li { padding-left: min(20px, calc(var(--scale) * 20px)); font-size: clamp(13px, calc(var(--scale) * 16px), 16px); letter-spacing: .1em; }
}

/* =========================================================
   WordPress化に伴い新規追加：お知らせ記事本文（ブロックエディタ入力内容）の装飾
   エディタで入力した「リスト」「見出し(H2/H3)」「リンク」には静的HTML版のクラスが
   付かないため、本文エリア内のタグに直接、以下の見た目を当てています。
   リスト → .bullet-list ／ 見出し → .bullet-heading ／ リンク → .txt_link
   ========================================================= */
.article-detail__body ul { display: flex; flex-direction: column; gap: min(12px, calc(var(--scale) * 12px)); }
.article-detail__body ul > li { position: relative; padding-left: min(20px, calc(var(--scale) * 20px)); }
.article-detail__body ul > li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--color-green); border-radius: 2px; }
.article-detail__body ol { list-style: decimal; padding-left: 1.6em; display: flex; flex-direction: column; gap: min(12px, calc(var(--scale) * 12px)); }
.article-detail__body ol > li { display: list-item; padding-left: .2em; }
.article-detail__body ol > li::marker { color: var(--color-green); font-weight: 700; }

.article-detail__body h2,
.article-detail__body h3 {
  display: flex;
  align-items: center;
  gap: min(8px, calc(var(--scale) * 8px));
  min-height: min(44px, calc(var(--scale) * 44px));
  margin-top: min(40px, calc(var(--scale) * 40px));
  color: var(--color-green);
  font-size: clamp(16px, calc(var(--scale) * 19px), 19px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: left;
}
.article-detail__body h2:first-child,
.article-detail__body h3:first-child { margin-top: 0; }
.article-detail__body h2::before,
.article-detail__body h3::before {
  content: "";
  flex-shrink: 0;
  width: min(16px, calc(var(--scale) * 16px));
  height: min(16px, calc(var(--scale) * 16px));
  background: url("../icons/bullet-circle.svg") center / contain no-repeat;
  transform: translateY(1px);
}

.article-detail__body a:not(.btn):not(.wp-element-button) {
  position: relative;
  color: var(--color-green);
  font-variation-settings: "wght" 400;
  transition: color .3s ease, font-variation-settings .4s ease;
}
.article-detail__body a:not(.btn):not(.wp-element-button)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #2a8144;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.article-detail__body a:not(.btn):not(.wp-element-button):hover { color: #2a8144; font-variation-settings: "wght" 700; }
.article-detail__body a:not(.btn):not(.wp-element-button):hover::after { transform: scaleX(1); }

@media (max-width: 599px) {
  .article-detail__body ul,
  .article-detail__body ol { gap: min(10px, calc(var(--scale) * 10px)); }
  .article-detail__body h2,
  .article-detail__body h3 { margin-top: min(24px, calc(var(--scale) * 24px)); font-size: clamp(15px, calc(var(--scale) * 19px), 19px); }
}

/* =========================================================
   WordPress化に伴い新規追加：お知らせ一覧のページネーション
   （静的HTMLサイトには存在しなかった要素のため、既存のボタン／リンクの
   デザイン言語（緑・角丸・ホバーで少し浮き上がる）に合わせて追加しています）
   ========================================================= */
.pagination { display: flex; justify-content: center; width: 100%; }
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-bg-green);
  color: var(--color-green);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.pagination .page-numbers.current {
  background: var(--color-green);
  color: var(--color-white);
}
.pagination .page-numbers:hover:not(.current):not(.dots) {
  background: var(--color-green);
  color: var(--color-white);
  transform: translateY(-2px);
}
.pagination .page-numbers.dots { background: none; }
@media (max-width: 599px) {
  .pagination .page-numbers { min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px; }
}