/* ============================================================
   component-topics.css — トピックスの部品（c-）
   ============================================================ */

.c-topics__title {
  font-family: var(--font-en);
  font-weight: var(--fw-normal);
  /* 1239px以下は固定値（案件の決まり）。1240px以上は下でXD比例に戻す */
  font-size: 2.75rem;
  font-stretch: 83%;
  line-height: 1;
  letter-spacing: 0.03em;
}

.c-topics__ja {
  margin-block-start: 6px;
  font-size: clamp(1.125rem, 1.74vw, 2.09rem);
  letter-spacing: -0.09em;
  color: var(--color-accent);
}

/* --- 絞り込みバー ---------------------------------------- */
.c-toolbar {
  background: var(--color-bg);
  border-block-end: 1px solid rgb(var(--rgb-light) / .1);
  padding-block: 48px 36px;
}

.c-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.c-tabs {
  display: flex;
  flex-wrap: wrap;
  /* 狭い画面では折り返すので左右中央にそろえる（2行目も中央・2026-09-09） */
  justify-content: center;
}


.c-tabs__btn {
  position: relative;
  padding: 11px var(--space-6) var(--space-3);
  background: transparent;
  border: 0;
  font-size: clamp(0.9375rem, 1.39vw, 1.66rem);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
  transition: color var(--dur) var(--ease);
}

/* カンプ実測：区切りは3px幅・31px高の縦線（枠線ではなく独立した棒） */
.c-tabs__btn::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 3px;
  height: 31px;
  transform: translateY(-50%);
  background: rgb(var(--rgb-light) / .5);
}

.c-tabs__btn:first-child { padding-inline-start: 0; }
.c-tabs__btn:first-child::before { content: none; }

.c-tabs__btn.is-current { color: var(--color-accent); }

.c-tabs__btn.is-current::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: var(--space-6) var(--space-6);
  height: 9px;
  background: var(--color-accent);
}

.c-tabs__btn:first-child.is-current::after { inset-inline-start: 0; }

.c-selects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.c-select {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-accent);
}

.c-select select {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text);
  letter-spacing: var(--ls-md);
  transition: color var(--dur) var(--ease);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%), linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.c-select option { background: var(--color-bg-footer); }

@media (hover: hover) and (pointer: fine) {
  .c-tabs__btn:hover { color: var(--color-accent); }
  .c-select select:hover { color: var(--color-accent); }
}

/* --- 記事一覧 -------------------------------------------- */
.c-topics { background: var(--color-bg); padding-block: 0; }

.c-topic {
  display: grid;
  gap: 3px;
  /* スマホは「写真 → 日付 → 本文 → 続き」の順。PCでだけ左右に振り分ける */
  grid-template-areas: "img" "date" "body" "more";
  padding-block: 22px;
  border-block-end: 1px solid rgb(var(--rgb-light) / .1);
}

.c-topic__date {
  font-family: var(--font-en);
  font-size: clamp(0.9375rem, 1.5625vw, 1.95rem);
  letter-spacing: 0.02em;
  color: var(--color-text);
  font-stretch: 80%;
  line-height: 1;
  padding-block-start: 9px;
}

.c-tag {
  display: inline-block;
  white-space: nowrap;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-accent);
  font-size: 0.9375rem;
  letter-spacing: var(--ls-md);
  color: var(--color-accent);
}

.c-tag--fill {
  background: var(--color-accent);
  color: var(--color-bg);
}

.c-topic__title {
  margin-block-start: var(--space-4);
  font-weight: var(--fw-bold);
  font-size: clamp(1.1875rem, 1.72vw, 2.15rem);
  line-height: 1.4;
  /* カンプ実測：見出しのインクは647px幅（20文字）。既定の字送りだと689pxになる */
  letter-spacing: -0.019em;
}

.c-topic__text {
  margin-block-start: 23px;
  font-size: clamp(0.9375rem, 1.15vw, 1.44rem);
  line-height: 1.94;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-90);
}

.c-topic__img {
  width: 100%;
  aspect-ratio: 407 / 307;
  object-fit: cover;
}

.c-topic__more {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* カンプ実測：続きの印は差し色の矢印 55×32px（細い線ではない） */
.c-topic__arrow {
  width: clamp(1.75rem, 2.865vw, 3.4375rem);
  height: auto;
  color: var(--color-accent);
}

@media (min-width: 1240px) {
  .c-topic {
    /* カンプ実測（2026-09-09）：日付の文字69px／本文262px／写真980-1730px（750幅）／矢印1772-1826px */
    grid-template-columns: 193fr 718fr 750fr 97fr;
    grid-template-areas: "date body img more";
    gap: 0;
    align-items: stretch;
    padding-block: 0;
    /* カンプ実測：1行の高さは約310px（区切り線 997/1316/1623/1932/2241/2548） */
    min-height: clamp(15rem, 15.73vw, 18.875rem);
  }

  /* 日付はカテゴリのタグと上下中央でそろえる（2026-09-09） */
  .c-topic__date { padding-block-start: 67px; }
  .c-topic__body { padding-block: 57px 5px; }
  /* カンプ実測：写真は750×289px。行の上端から27px下・下端から4px上 */
  .c-topic__img { height: auto; aspect-ratio: 750 / 289; align-self: end; margin-block-end: 4px; }
  .c-topic__more { align-items: center; }
  .c-topic__more { display: flex; }
}

/* 記事ブロック全体がリンク（2026-09-11 園田さん指示）。
   ホバーは参考サイト（丹青社・竹中工務店のお知らせ一覧：行全体が薄く明るくなる）に合わせ、
   ブロック全体に薄い覆い＋矢印が右へ＋見出しが差し色。日付・本文・写真は変えない */
.c-topic { color: inherit; text-decoration: none; transition: background-color 0.3s var(--ease); }
.c-topic__arrow { transition: transform 0.35s var(--ease); }
.c-topic__title { transition: color 0.3s var(--ease); }
.c-topic:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

@media (hover: hover) and (pointer: fine) {
  .c-topic:hover { background-color: rgb(var(--rgb-light) / .06); }
  .c-topic:hover .c-topic__arrow { transform: translateX(clamp(0.5rem, 0.78vw, 0.9375rem)); }
  .c-topic:hover .c-topic__title { color: var(--color-accent); }
}

/* --- ページ番号 ------------------------------------------ */
.c-pagenum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* カンプ実測：1の枠は56×54px、番号の送り70px、一覧の下端2810・帯の上端2902 */
  padding-block: 20px 19px;
}

.c-pagenum__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid transparent;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  /* カンプの番号は白、次への印だけ差し色 */
  color: var(--color-text);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.c-pagenum__item:last-child { color: var(--color-accent); }

/* 前への印も次への印と同じ差し色にそろえる（2026-09-26） */
.c-pagenum__item--prev { color: var(--color-accent); }

.c-pagenum__item.is-current {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- 細めのCTA ------------------------------------------- */
.c-cta-band--slim {
  background: var(--color-bg-band);
  padding-block: var(--space-8);
}

.c-cta-band__en--light { font-weight: var(--fw-normal); }

/* --- 記事ヒーロー ---------------------------------------- */
/* 事業内容と同じ中央そろえの型に変えたので、パンくずの下は詰める（2026-09-21） */
.c-post-hero__crumb { margin-block-end: var(--space-8); }

.c-post-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-lg);
}

.c-post-hero__sep {
  display: block;
  width: 1px;
  height: 12px;
  background: rgb(var(--rgb-light) / .35);
}

.c-post-hero__date {
  font-family: var(--font-en);
  color: var(--color-text-85);
}

.c-post-hero__title {
  margin-block-start: var(--space-8);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 2.92vw, 3.65rem);
  line-height: 1.57;
  letter-spacing: var(--ls-xs);
}

/* お知らせ詳細のヒーローは見出しが主役。説明文は小さめに戻す */
.c-post-hero.c-page-hero--photo { min-height: max(29.375rem, 43.4vw); }

.c-post-hero .c-page-hero__lead {
  margin-block-start: var(--space-10);
  font-size: clamp(0.9375rem, 1.28vw, 1.6rem);
  line-height: 2.08;
  letter-spacing: 0;
}

/* --- 記事本文 -------------------------------------------- */
.c-post {
  background: var(--color-bg-article);
  color: var(--color-text-dark);
  padding-block-start: 74px;
}

.c-post__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  align-items: stretch;
  padding-block-end: 106px;
}

.c-post__block--ruled {
  border-block-start: 1px solid rgb(var(--rgb-dark) / .12);
  padding-block-start: var(--space-9);
}

.c-post__heading {
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 2.135vw, 2.56rem);
  letter-spacing: var(--ls-lg);
  line-height: 1.25;
}

.c-rule--post {
  width: 3.9375rem;
  margin-block: 11px 48px;
}

.c-post__text {
  font-size: clamp(0.9375rem, 1.07vw, 1.34rem);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .8);
}

.c-post__text + .c-post__text { margin-block-start: var(--space-6); }

.c-post__img {
  width: 100%;
  aspect-ratio: var(--ar, 16 / 8.03);
  object-fit: cover;
}

.c-post__img--contain {
  aspect-ratio: var(--ar, 16 / 10.6);
  object-fit: contain;
}

.c-rpoint {
  display: grid;
  grid-template-columns: 3.25rem 2.75rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-6) 1.1875rem;
  border-block-end: 1px solid var(--color-line-dark);
}

.c-rpoint__icon {
  width: 100%;
  height: auto;
  color: var(--color-accent);
}

.c-rpoint__no {
  padding-block-start: var(--space-1);
  font-family: var(--font-en);
  font-size: 1.25rem;
  color: var(--color-accent);
}

.c-rpoint__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-md);
  color: rgb(var(--rgb-dark));
}

.c-rpoint__body {
  margin-block-start: var(--space-3);
  font-size: var(--fs-2xs);
  line-height: 1.95;
  letter-spacing: 0.03em;
  /* カンプの本文はほぼ黒（実測14〜30） */
  color: rgb(var(--rgb-dark) / .8);
}

@media (min-width: 1240px) {
  .c-post__block {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .c-post__block > div     { flex: 0.88 1 0; min-width: 0; }
  /* XD実測：文章の段704px・写真964px・間60px */
  /* カンプ実測（2026-09-09）：写真は段ごとに幅も高さも違う
     1段目936×693／2段目873×569／3段目999×260px */
  .c-post__block { gap: 30px; }
  .c-post__block:nth-of-type(1) > .c-post__img { flex: 936 1 0; }
  .c-post__block:nth-of-type(1) > div { flex: 762 1 0; }
  .c-post .c-post__block:nth-of-type(1) { padding-block-end: 108px; }
  .c-post .c-post__block:nth-of-type(2) { padding-block-end: 0; }
  .c-post .c-post__block:nth-of-type(3) { padding-block-end: 28px; }
  .c-rpoint:last-child { border-block-end: 0; }
  .c-rpoint__list { margin-block-end: 0; }
  .c-post__block:nth-of-type(2) > .c-post__img { flex: 868 1 0; }
  .c-post__block:nth-of-type(2) > div { flex: 830 1 0; }

  .c-post { padding-block-start: 65px; }
  .c-post { padding-block-end: 0; }
  /* カンプ実測：写真は874×691／874×614／874×179px（段ごとに高さが違う） */
  .c-post__block:nth-of-type(1) .c-post__img { aspect-ratio: 936 / 693; }
  /* モックアップは元画像の比率（820×590）。切り取ると机やスマホの端が欠ける */
  .c-post__block:nth-of-type(2) .c-post__img { aspect-ratio: 873 / 569; object-fit: contain; }
  /* 3段目だけ写真が大きい（カンプ実測 999×260px・x831-1829） */
  .c-post__block:nth-of-type(3) .c-post__img { aspect-ratio: 999 / 260; margin-block-start: 25px; }
  .c-post__block:nth-of-type(3) > .c-post__img { flex: 999 1 0; }
  .c-post__block:nth-of-type(3) > div { flex: 699 1 0; }
  .c-post__block > .c-post__img { flex: 888 1 0; min-width: 0; }
  .c-post__block > div { flex: 810 1 0; min-width: 0; }
  /* カンプ実測（2026-09-09）：アイコン119×101px x90／数字35×31px x258／見出し x351 */
  .c-rpoint {
    grid-template-columns: clamp(3.25rem, 6.198vw, 7.4375rem) clamp(2.75rem, 1.823vw, 2.1875rem) 1fr;
    column-gap: clamp(1rem, 2.604vw, 3.125rem);
  }

  /* カンプ実測：数字の上端は見出しの上端とそろう（1813と1812）。行の高さは213px */
  .c-rpoint {
    min-height: clamp(9rem, 11.09vw, 13.3125rem);
    align-content: start;
  }

  .c-rpoint__no {
    padding-block-start: 8px;
    line-height: 1;
    font-size: clamp(1.25rem, 2.292vw, 2.75rem);
    font-stretch: 62%;
    letter-spacing: -0.02em;
  }

  /* カンプ実測：本文は1行目382px・2行目549px幅。文字の高さより幅を優先して合わせる */
  .c-rpoint__body { font-size: clamp(0.9375rem, 0.943vw, 1.1313rem); letter-spacing: 0; }
}

/* --- 前後の記事 ------------------------------------------ */
.c-postnav {
  display: grid;
  /* カンプは明るい背景（245,245,243）。黒ではない（2026-09-09） */
  background: var(--color-bg-light);
  /* カンプ実測：区画2804-2970、中身2853-2923 */
  padding: 49px var(--gutter) 34px;
}

/* カンプ実測：前後の矢印は差し色で44×32px */
.c-postnav__arrow {
  flex: none;
  width: clamp(1.875rem, 2.292vw, 2.75rem);
  height: auto;
  color: var(--color-accent);
  transition: translate var(--dur) var(--ease);
}

.c-postnav__dir,
.c-postnav__title { transition: color var(--dur) var(--ease); }

.c-postnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

/* カンプ実測：中央に縦線（x958・高さ77px） */
.c-postnav__link--next { position: relative; }

/* 「矢印＋PREV／NEXT」を上、記事の情報を下に置く。
   PREVは左端、NEXTは右端にそろえる（2026-09-09） */
.c-postnav__link {
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.c-postnav__link--next {
  justify-content: flex-end;
  text-align: end;
}

.c-postnav__link--next .c-postnav__meta { justify-content: flex-end; }

/* 767px以下は上下に並ぶので、間に仕切りの線を入れる */
.c-postnav__link--next { border-block-start: 1px solid rgb(var(--rgb-dark) / .18); padding-block-start: var(--space-6); }


.c-postnav__dir {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  color: rgb(var(--rgb-dark) / .86);
}

/* 1239px以下は記事の情報を次の行に落として左そろえにする（2026-09-09） */
.c-postnav__body { flex: 1 0 100%; display: block; }

.c-postnav__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.c-postnav__date {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: rgb(var(--rgb-dark) / .88);
}

.c-tag--sm {
  padding: var(--space-1) var(--space-3);
  /* 1239px以下は15px以上（案件の決まり）。1240px以上は下でカンプどおりに戻す */
  font-size: 0.9375rem;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* 1239px以下は固定改行を効かせない。1920px用の位置で折り返すと不自然になる（2026-09-09） */
.c-post__text br,
.c-rpoint__body br,
.c-post-hero .c-page-hero__lead br { display: none; }

.c-post__text,
.c-rpoint__body,
.c-post-hero .c-page-hero__lead,
.c-postnav__title { word-break: auto-phrase; }

.c-postnav__title {
  display: block;
  margin-block-start: var(--space-3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-sm);
  color: rgb(var(--rgb-dark));
}

/* 768px以上は横並び。PREVは画面左端・NEXTは画面右端に置く */
@media (min-width: 768px) {
  .c-postnav { grid-template-columns: 1fr 1fr; }
  .c-postnav__link--next { border-block-start: 0; padding-block-start: 0; }
}

@media (min-width: 1240px) {

  /* カンプ実測：中央に濃い縦の区切り線 */
  .c-postnav__link--next::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    width: 2px;
    height: 77px;
    transform: translateY(-50%);
    background: rgb(var(--rgb-dark) / .55);
  }

  /* カンプ実測：矢印89／PREV181／記事345｜記事1158／NEXT1681／矢印1786 */
  .c-postnav__link { gap: 48px; padding-block: 0; padding-inline-end: 0; }
  .c-postnav__link .c-postnav__body { flex: 0 0 auto; margin-inline-start: 63px; }
  .c-postnav__link--next { justify-content: flex-end; gap: 52px; padding-inline: 0; }
  .c-postnav__link--next .c-postnav__body { margin-inline: 0 37px; }
  /* カンプ実測：見出しのインクは280px幅・24px高 */
  .c-postnav__title { margin-block-start: 6px; line-height: 1.4; font-size: clamp(1rem, 1.281vw, 1.5375rem); }
  .c-postnav__link { padding-inline-end: var(--space-10); }
  .c-postnav__link--next {
    padding-inline: var(--space-10) 0;
    border-inline-start: 1px solid var(--color-line);
  }
}

@media (hover: hover) and (pointer: fine) {
  /* 中の文字はそれぞれ色を持つので、枠ではなく文字ごとに変える。矢印は外側へ滑る（2026-09-26 園田さん指示） */
  .c-postnav__link:hover :is(.c-postnav__dir, .c-postnav__title) { color: var(--color-accent); }
  .c-postnav__link:hover .c-postnav__arrow { translate: -0.5rem 0; }
  .c-postnav__link--next:hover .c-postnav__arrow { translate: 0.5rem 0; }
}

@media (hover: hover) and (pointer: fine) {
  .c-pagenum__item:not(.c-pagenum__item--prev, .c-pagenum__item--next):hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* 前後の矢印は枠を出さず、白に変わって矢印の向きへ滑る（2026-09-26 園田さん指示） */
  .c-pagenum__item--next:hover { color: var(--color-text); translate: 0.375rem 0; }
  .c-pagenum__item--prev:hover { color: var(--color-text); translate: -0.375rem 0; }

  .c-topic__more:hover { color: var(--color-accent); }
}

/* お知らせ詳細のリード文はカンプでは小さく、幅700px程度の段に収まっている */
.c-post-hero .c-page-hero__lead {
  font-size: clamp(0.9375rem, 1.28vw, 1.6rem);
  line-height: 2.17;
  max-width: 46rem;
}



/* XD実測：区画の間隔は115px・166px、最後は19px */
.c-post__block + .c-post__block { padding-block-end: 120px; }
.c-post__block:last-child { padding-block-end: 28px; }

/* XD実測：写真は文章の段より14px下から始まる */
@media (min-width: 1240px) {
  .c-post__block > .c-post__img { margin-block-start: 4px; }
}

.c-topic__date { grid-area: date; }
.c-topic__body { grid-area: body; }
.c-topic__img  { grid-area: img; }
.c-topic__more { grid-area: more; }

/* XD実測：一覧の日付は画面端から66px、絞り込みのタブは150pxから始まる */
@media (min-width: 1240px) {
  .c-topic { margin-inline-start: -30px; }
  /* カンプ実測：ALLの文字は画面左56pxから。記事の日付（66px）と同じく枠の外へ出す */
  .c-toolbar > .l-container { padding-inline-start: 0; }
  .c-tabs { margin-inline-start: -40px; }
}


/* --- 絞り込みのセレクト：カンプ実測 303×65px・差し色の枠（2026-09-09） --- */
@media (min-width: 1240px) {
  .c-select {
    width: clamp(10rem, 15.78vw, 18.9375rem);
    height: clamp(2.5rem, 3.385vw, 4.0625rem);
  }

  .c-select select {
    width: 100%;
    height: 100%;
    padding-inline: clamp(0.75rem, 1.35vw, 1.625rem) clamp(2rem, 3.65vw, 4.375rem);
    font-size: clamp(0.875rem, 1.09vw, 1.3125rem);
    /* カンプは文字が白・枠と印が差し色 */
    color: var(--color-text);
    background-position: right 22px center, right 12px center;
    background-size: 10px 10px, 10px 10px;
  }

  /* タブの間隔：カンプ実測は文字と区切り線の間が41〜45px */
  .c-tabs__btn { padding-inline: 42px; }
  .c-tabs__btn:first-child { padding-inline-start: 0; }
  .c-tabs__btn.is-current::after { inset-inline: 42px 42px; }
  .c-tabs__btn:first-child.is-current::after { inset-inline-start: 0; }

  /* 枠の中の縦の区切り線と▼の位置 */
  .c-select::after {
    content: "";
    position: absolute;
    inset-inline-end: clamp(1.875rem, 3.385vw, 4.0625rem);
    inset-block: 0;
    width: 1px;
    background: var(--color-accent);
  }

  .c-select { position: relative; }
}


/* --- お知らせのCTA帯：カンプ実測（2026-09-09）------------------
   帯 2902-3045（高さ143）／紋章 229×96px 左下／見出しのインク2950・x275
   ／説明3006／ボタン 435×90px x1362-1796 */
.c-cta-band--topics {
  position: relative;
  overflow: hidden;
  /* 紋章が文字やボタンに重ならないよう、帯の下に紋章の高さぶんの余白を取る */
  --crest-w: clamp(6rem, 11.98vw, 14.375rem);
  padding-block-end: calc(var(--crest-w) * 125 / 230 + var(--space-6));
}

.c-cta-band__crest--sm {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: var(--crest-w);
  height: auto;
  color: var(--color-accent);
}

@media (min-width: 1240px) {
  .c-cta-band--topics { padding-block: 22px 13px; }
  .c-tabs { justify-content: flex-start; }

  .c-cta-band--topics .c-cta-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: start;
    padding-inline-start: clamp(1.25rem, 9.32vw, 11.1875rem);
  }

  .c-cta-band--topics .c-cta-band__en { font-size: clamp(1.25rem, 2.08vw, 2.5rem); line-height: 1.2; }
  .c-cta-band--topics .c-cta-band__note { margin-block-start: 18px; font-size: clamp(0.875rem, 1.09vw, 1.3125rem); }

  .c-cta-band--topics .c-btn {
    flex: none;
    align-self: start;
    white-space: nowrap;
    width: clamp(15rem, 22.66vw, 27.1875rem);
    height: clamp(3rem, 4.69vw, 5.625rem);
  }
}


/* --- ページ番号：カンプ実測 56×54px・送り70px・数字のインク21px（2026-09-09） --- */
@media (min-width: 1240px) {
  .c-pagenum { gap: clamp(0.5rem, 0.729vw, 0.875rem); }

  .c-pagenum__item {
    width: clamp(1.875rem, 2.917vw, 3.5rem);
    height: clamp(1.875rem, 2.813vw, 3.375rem);
    font-size: clamp(0.875rem, 1.542vw, 1.85rem);
  }
}



@media (min-width: 1240px) {
  .c-topics__title { font-size: clamp(2.75rem, 6.6vw, 8.25rem); }
}


@media (min-width: 1240px) {
  .c-tag { font-size: var(--fs-2xs); }

  .c-post__text br,
  .c-rpoint__body br,
  .c-post-hero .c-page-hero__lead br { display: inline; }
}


@media (min-width: 1240px) {
  .c-tag--sm { font-size: var(--fs-3xs); }
}


/* お知らせ詳細のCTA帯：カンプ実測 見出しは1行でインク40px・幅641px（2026-09-09） */
@media (min-width: 1240px) {
  .c-cta-band--slim.c-cta-band--photo .c-cta-band__en {
    font-size: clamp(1.75rem, 2.797vw, 3.3563rem);
    white-space: nowrap;
  }

  .c-cta-band--slim.c-cta-band--photo { padding-block-end: calc(var(--space-8) + 17px); }
}


/* --- お知らせ詳細のサイドバー（2026-09-21 園田さん指示） ------------------ */
/* 1239px以下は本文の下に回り、1240px以上で本文の右に並ぶ */
.c-post__layout {
  display: grid;
  gap: var(--space-12);
}

.c-post__main { min-width: 0; }

.c-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  color: var(--color-text-dark);
}

.c-side__title {
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: var(--ls-md);
  line-height: 1.4;
}

.c-rule--side {
  width: 2.25rem;
  margin-block: 10px 18px;
}

.c-side__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--color-line-dark);
}

.c-side__item { border-block-end: 1px solid var(--color-line-dark); }

.c-side__link {
  display: block;
  padding-block: 0.9375rem;
  font-size: 0.9375rem;
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .8);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.c-side__count {
  margin-inline-start: 0.25rem;
  font-family: var(--font-en);
  /* 狭い画面は本文15px以上の決まりに合わせる。1240px以上だけ小さくする */
  font-size: 0.9375rem;
  color: rgb(var(--rgb-dark) / .55);
}

/* 過去記事は年ごとに開け閉めする */
.c-side__year {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.9375rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .8);
  text-align: start;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.c-side__caret {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 0.3s var(--ease), translate 0.3s var(--ease);
}

.c-side__year[aria-expanded="true"] .c-side__caret {
  rotate: -135deg;
  translate: 0 2px;
}

.c-side__months {
  list-style: none;
  margin: 0;
  padding: 0 0 0.625rem var(--space-4);
}

.c-side__months .c-side__link { padding-block: 0.5rem; }

@media (hover: hover) and (pointer: fine) {
  .c-side__link:hover,
  .c-side__year:hover { color: var(--color-accent); }
}

@media (min-width: 1240px) {
  .c-post__layout {
    grid-template-columns: minmax(0, 1fr) 13.75rem;
    gap: 5.5rem;
    align-items: start;
  }

  .c-side__title { font-size: 1.25rem; }

  .c-side__count { font-size: 0.8125rem; }
}


/* --- 本文エディタで書いた記事（2026-09-22 園田さん指示） -------------------
   管理画面の本文に書いた内容を、このページのデザインのまま出す。
   本文が空の記事は、これまでどおり入力欄（見出し・写真・ポイント）の組み立てで出る */
.c-post__body {
  font-size: clamp(0.9375rem, 1.07vw, 1.34rem);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .8);
}

.c-post__body > * { margin-block: 0; }

.c-post__body > * + * { margin-block-start: var(--space-6); }

/* 見出し。下にオレンジの短い線を引く（記事の見出しと同じ作法） */
.c-post__body h2 {
  margin-block-start: var(--space-14);
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 2.135vw, 2.56rem);
  letter-spacing: var(--ls-lg);
  line-height: 1.25;
  color: var(--color-text-dark);
}

.c-post__body h2::after {
  content: "";
  display: block;
  width: 3.9375rem;
  height: 2px;
  margin-block: 11px 0;
  background: var(--color-accent);
}

.c-post__body h2 + * { margin-block-start: var(--space-10); }

.c-post__body h3 {
  margin-block-start: var(--space-12);
  font-weight: var(--fw-bold);
  font-size: clamp(1.125rem, 1.4vw, 1.75rem);
  letter-spacing: var(--ls-md);
  line-height: 1.5;
  color: var(--color-text-dark);
}

.c-post__body h4 {
  margin-block-start: var(--space-10);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 1.15vw, 1.4375rem);
  letter-spacing: var(--ls-md);
  color: var(--color-text-dark);
}

.c-post__body :is(h2, h3, h4):first-child { margin-block-start: 0; }

/* 写真。横幅いっぱいで、縦横比は写真のまま */
.c-post__body :is(img, figure) {
  display: block;
  max-width: 100%;
  height: auto;
}

.c-post__body figure { margin-inline: 0; }

.c-post__body figcaption {
  margin-block-start: var(--space-3);
  font-size: 0.875rem;
  color: rgb(var(--rgb-dark) / .6);
}

.c-post__body :is(ul, ol) { padding-inline-start: 1.5rem; }

.c-post__body li + li { margin-block-start: var(--space-2); }

.c-post__body a {
  color: var(--color-accent-deep, var(--color-accent));
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.3s var(--ease);
}

.c-post__body strong { font-weight: var(--fw-bold); color: var(--color-text-dark); }

/* 引用は左に差し色の線 */
.c-post__body blockquote {
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--color-accent);
  color: rgb(var(--rgb-dark) / .72);
}

.c-post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.c-post__body :is(th, td) {
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-line-dark);
  text-align: start;
  vertical-align: top;
}

.c-post__body th { font-weight: var(--fw-bold); background: rgb(var(--rgb-dark) / .04); }

.c-post__body hr {
  border: 0;
  border-block-start: 1px solid var(--color-line-dark);
  margin-block: var(--space-12);
}

/* ブロックエディタが付ける寄せの指定に合わせる */
.c-post__body .aligncenter { margin-inline: auto; }
.c-post__body .alignright { margin-inline-start: auto; }

.c-post__body .wp-block-image { margin-block-start: var(--space-10); }

@media (hover: hover) and (pointer: fine) {
  .c-post__body a:hover { opacity: 0.7; }
}

@media (min-width: 1240px) {
  .c-post__body > * + * { margin-block-start: var(--space-8); }
}

/* --- 本文エディタのカラムと「番号つきポイント」（2026-09-22 園田さん指示） -----
   ブロックエディタの「パターン」から入れた形に、記事と同じデザインを当てる。
   ブロックエディタ本体のCSSは読み込んでいないので、並べ方もここで決める */
.c-post__body .wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.c-post__body .wp-block-column { min-width: 0; }

.c-post__body .wp-block-column > * { margin-block: 0; }

.c-post__body .wp-block-column > * + * { margin-block-start: var(--space-6); }

/* 番号つきのポイント。番号はCSSが数えるので入力は要らない */
.c-ed-points { counter-reset: ed-point; }

/* グループのブロックは中にもう1枚 div が入る。透かして、中身を直接並べる */
:is(.c-ed-points, .c-ed-point) > .wp-block-group__inner-container { display: contents; }

.c-ed-point {
  counter-increment: ed-point;
  display: grid;
  grid-template-columns: 3.25rem 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "icon no title"
    "icon no body";
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding-block: var(--space-6) 1.1875rem;
  border-block-end: 1px solid var(--color-line-dark);
}

.c-ed-point::before {
  grid-area: no;
  content: counter(ed-point, decimal-leading-zero);
  padding-block-start: var(--space-1);
  font-family: var(--font-en);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-accent);
}

.c-ed-point__icon {
  grid-area: icon;
  margin: 0;
}

.c-ed-point__icon img {
  width: 100%;
  height: auto;
}

.c-ed-point h3 {
  grid-area: title;
  margin-block: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-md);
  line-height: 1.5;
  color: rgb(var(--rgb-dark));
}

.c-ed-point h3::after { content: none; }

.c-ed-point p {
  grid-area: body;
  margin-block: 0;
  font-size: var(--fs-2xs);
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: rgb(var(--rgb-dark) / .8);
}

@media (min-width: 768px) {
  /* ここから左右に並ぶ。幅はエディタで指定した割合（style="flex-basis:..."）に従う */
  .c-post__body .wp-block-columns {
    flex-direction: row;
    gap: var(--space-12);
    align-items: flex-start;
  }

  .c-post__body .wp-block-column { flex: 1 1 0; }
}

@media (min-width: 1240px) {
  .c-ed-point { gap: var(--space-3) var(--space-6); grid-template-columns: 4.5rem 3.5rem minmax(0, 1fr); }

  .c-ed-point::before { font-size: 1.75rem; }

  .c-ed-point p { font-size: clamp(0.9375rem, 0.943vw, 1.1313rem); letter-spacing: 0; }

  .c-ed-point:last-child { border-block-end: 0; }
}

/* 目次を押したときの移動先。見出しに仕込まれた目印が、固定ヘッダーの下に潜らないよう逃がす。
   移動そのものはブラウザのなめらかスクロール（base.css の scroll-behavior）に任せる。
   プラグイン側のスクロール処理は止めてある（2026-09-30）。
   jQuery で1コマずつ位置を動かす作りとブラウザのなめらかスクロールがぶつかり、
   押してから動き出すまでに間が空いていたため */
.c-post__body .ez-toc-section {
  scroll-margin-block-start: calc(var(--header-h) + var(--space-8));
}

/* --- 記事の目次（2026-09-29 園田さん指示） -----------------------------------
   プラグイン Easy Table of Contents が出す箱に、サイトのデザインを当てる。
   プラグイン側の見た目のCSSは読み込まない（inc/enqueue.php で止めている）。
   本文のコンテナの一番左に、左寄せで置く */
.c-post__body .c-toc {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin-block: 0 var(--space-12);
  margin-inline: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-7);
  background: rgb(var(--rgb-dark) / .03);
  border: 1px solid var(--color-line-dark);
}

/* 見出しの行（「目次」と「非表示」） */
.c-post__body .c-toc .ez-toc-title-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-line-dark);
}

.c-post__body .c-toc .ez-toc-title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: var(--ls-md);
  color: var(--color-text-dark);
}

/* 切り替えボタン。プラグインのアイコンは隠し、「表示」「非表示」の文字にする */
.c-post__body .c-toc .ez-toc-title-toggle a {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .55);
  text-decoration: none;
  cursor: pointer;
}

.c-post__body .c-toc .ez-toc-title-toggle svg,
.c-post__body .c-toc .ez-toc-title-toggle .eztoc-hide { display: none; }

.c-post__body .c-toc .ez-toc-title-toggle a::after { content: "[非表示]"; }

/* 閉じているときは「表示」に変える（プラグインが .toc_close を付ける） */
.c-post__body .c-toc .ez-toc-title-toggle a.toc_close::after,
.c-post__body .c-toc.toc_close .ez-toc-title-toggle a::after { content: "[表示]"; }

/* 目次の中身 */
.c-post__body .c-toc nav ul,
.c-post__body .c-toc .ez-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-1;
}

.c-post__body .c-toc li { margin: 0; }

.c-post__body .c-toc li + li { margin-block-start: var(--space-2); }

.c-post__body .c-toc a {
  display: inline-block;
  font-size: 0.9375rem;
  line-height: 1.7;
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .82);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

/* 入れ子（h3）は一段下げて細く */
.c-post__body .c-toc ul ul {
  margin-block-start: var(--space-3);
  padding-inline-start: var(--space-6);
}

.c-post__body .c-toc ul ul a { font-size: 0.875rem; color: rgb(var(--rgb-dark) / .66); }

/* 番号（1. / 1.1.）。プラグインの見た目CSSを読まないので、ここで数える */
.c-post__body .c-toc nav > ul { counter-reset: toc-item; }

.c-post__body .c-toc li { counter-increment: toc-item; }

.c-post__body .c-toc li > ul { counter-reset: toc-item; }

/* 切り替えボタンのリンクには番号を付けない（nav の中のリンクだけ） */
.c-post__body .c-toc nav a::before {
  content: counters(toc-item, ".") ". ";
  margin-inline-end: 0.15em;
  font-family: var(--font-en);
  color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .c-post__body .c-toc nav a:hover,
  .c-post__body .c-toc .ez-toc-title-toggle a:hover { color: var(--color-accent); }
}

@media (min-width: 1240px) {
  .c-post__body .c-toc { padding: var(--space-7) var(--space-10) var(--space-8); }

  .c-post__body .c-toc .ez-toc-title { font-size: 1.25rem; }
}

/* --- よくあるご質問（2026-09-29 園田さん指示） ------------------------------
   記事の一番下に置く。質問を押すと答えが開く。
   ブロックエディタの「パターン」から入れて、ページごとに書き換える。
   **Googleは2026年5月7日にFAQの検索結果表示（リッチリザルト）を廃止したので、
   構造化データのためのプラグインは入れない。見た目だけをここで作る** */
.c-faq {
  --faq-dur: .4s;
  /* 始めと終わりがゆっくりで、途中がすっと動く曲線。ぬるっと開いて閉じる */
  --faq-ease: cubic-bezier(.65, 0, .35, 1);
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-12);
  border-block-start: 1px solid var(--color-line-dark);
}

.c-faq__title {
  margin-block: 0 var(--space-8);
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 2.135vw, 2.56rem);
  letter-spacing: var(--ls-lg);
  line-height: 1.25;
  color: var(--color-text-dark);
}

.c-faq__title::after {
  content: "";
  display: block;
  width: 3.9375rem;
  height: 2px;
  margin-block: 11px 0;
  background: var(--color-accent);
}

.c-faq__item {
  display: grid;
  grid-template-rows: auto 0fr;
  border-block-end: 1px solid var(--color-line-dark);
  transition: grid-template-rows var(--faq-dur) var(--faq-ease);
}

/* 開いた状態。行の高さが 0fr → 1fr へ動くので、中身の高さを測らずに開閉できる */
.c-faq__item[data-open="true"] { grid-template-rows: auto 1fr; }

/* ブロックエディタが挟む内側の箱は、行として数えさせない */
.c-faq__item > .wp-block-group__inner-container { display: contents; }

.c-faq__item:first-of-type { border-block-start: 1px solid var(--color-line-dark); }

/* 質問の行。押すと開く */
.c-faq__q {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
  gap: var(--space-4);
  align-items: start;
  width: 100%;
  padding-block: var(--space-6);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.7;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-dark);
  text-align: start;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.c-faq__q::before {
  content: "Q";
  font-family: var(--font-en);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--color-accent);
}

/* 右端の＋。開くと−になる */
.c-faq__q::after {
  content: "";
  justify-self: end;
  width: 0.875rem;
  height: 0.875rem;
  margin-block-start: 0.45rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  color: var(--color-accent);
  transition: rotate 0.3s var(--ease);
}

.c-faq__q[aria-expanded="true"]::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  rotate: 180deg;
}

/* 答え */
.c-faq__a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: 0;
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity calc(var(--faq-dur) * .6) ease,
              padding-block-end var(--faq-dur) var(--faq-ease),
              visibility 0s linear var(--faq-dur);
  font-size: 0.9375rem;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .8);
}

.c-faq__a::before {
  content: "A";
  font-family: var(--font-en);
  font-size: 1.25rem;
  line-height: 1.55;
  color: rgb(var(--rgb-dark) / .45);
}

/* 開いたときだけ下の余白を付ける。閉じたときに余白が残ると、質問の下に隙間が空く */
.c-faq__item[data-open="true"] .c-faq__a {
  padding-block-end: var(--space-6);
  opacity: 1;
  visibility: visible;
  transition: opacity calc(var(--faq-dur) * .7) ease calc(var(--faq-dur) * .25),
              padding-block-end var(--faq-dur) var(--faq-ease),
              visibility 0s;
}

.c-faq__a > * { margin-block: 0; }

.c-faq__a > * + * { margin-block-start: var(--space-4); }

/* ブロックエディタで書いたとき、答えの段落は内側の箱の中に並ぶ */
.c-faq__a .wp-block-group__inner-container > * { margin-block: 0; }

.c-faq__a .wp-block-group__inner-container > * + * { margin-block-start: var(--space-4); }

@media (hover: hover) and (pointer: fine) {
  .c-faq__q:hover { color: var(--color-accent); }
}

@media (min-width: 1240px) {
  .c-faq__q { grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; font-size: 1.125rem; padding-block: var(--space-7); }

  .c-faq__q::before { font-size: 1.5rem; }

  .c-faq__a { grid-template-columns: 2.75rem minmax(0, 1fr); font-size: clamp(0.9375rem, 0.943vw, 1.1313rem); }
  .c-faq__item[data-open="true"] .c-faq__a { padding-block-end: var(--space-7); }

  .c-faq__a::before { font-size: 1.5rem; }
}