/*
Theme Name: 家と道具の案内所 — Twenty Twenty-Five
Description: Twenty Twenty-Fiveを親テーマにした「家と道具の案内所」の子テーマです。
Template: twentytwentyfive
Version: 1.36.0
Requires at least: 7.0
Requires PHP: 8.3
Text Domain: ie-to-dougu-tt5
*/

:root {
  --itd-paper: #f5f6f2;
  --itd-mist: #e8ede7;
  --itd-ink: #25332e;
  --itd-soft-ink: #65736d;
  --itd-moss: #667c69;
  --itd-line: #cbd3cc;
  --itd-white: #fbfcf9;
  /* サイトカラー。ボタンなど「面で塗る」ときの色はこの1色だけ。
     値は本文色 --itd-ink と同じだが、役割が違うので変数を分けてある。
     面を足すときは新しい色を作らず、これを使うこと。 */
  --itd-btn-primary: #25332e;
  --itd-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --itd-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

:where(a) {
  text-underline-offset: 0.2em;
}

:where(a:focus-visible) {
  outline: 3px solid var(--itd-ink);
  outline-offset: 4px;
}

.wp-site-blocks {
  overflow-x: clip;
}

.itd-shell {
  margin-inline: auto;
  width: min(1380px, calc(100% - 104px));
}

/* Header */
.itd-site-header {
  background: var(--itd-paper);
  border-bottom: 1px solid rgba(72, 91, 82, 0.22);
}

.itd-header-inner {
  align-items: center;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  height: 88px;
  margin-block: 0 !important;
}

/* WPのブロック間隔(1.2rem)が直下の子に付き、行の高さがヘッダーの
   height を超えてしまうため、まとめて打ち消す。 */
.itd-header-inner > *,
.itd-site-brand > *,
.itd-site-brand-text > * {
  margin-block: 0;
}

.itd-site-brand {
  align-items: center;
  display: flex;
  gap: 12px;
}

/* alt="" の装飾画像。サイト名がリンクと名称を担うので、
   ロゴ側にリンクを重ねると同じ遷移先が2つ読み上げられる。
   元画像は不透明PNGで、角の外側が白 rgb(254,254,254)、地色が
   クリーム rgb(243,238,230)。ヘッダーの rgb(245,246,242) と違うため
   border-radius で角の白を隠している。透過PNGに差し替えれば不要。 */
.itd-site-logo {
  border-radius: 22%;
  flex: 0 0 48px;
  height: 48px;
  width: 48px;
}

.itd-site-header .wp-block-site-title {
  font-family: var(--itd-serif);
  font-size: 1.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

.itd-site-header .wp-block-site-title a,
.itd-site-footer .wp-block-site-title a {
  color: var(--itd-ink);
  text-decoration: none;
}

.itd-site-note {
  color: var(--itd-soft-ink);
  font: 500 0.625rem/1.2 var(--itd-sans);
  letter-spacing: 0.26em;
  margin-block-start: 0.1rem !important;
  text-transform: uppercase;
}

.itd-primary-navigation {
  font: 500 0.875rem/1 var(--itd-sans);
  letter-spacing: 0.08em;
}

.itd-primary-navigation .wp-block-navigation__container {
  gap: 42px;
}

.itd-primary-navigation .wp-block-navigation-item__content {
  color: var(--itd-ink);
  padding-block: 0.75rem;
  position: relative;
  text-decoration: none;
}

.itd-primary-navigation .wp-block-navigation-item:first-child .wp-block-navigation-item__content::after {
  background: var(--itd-moss);
  bottom: 0.2rem;
  content: "";
  height: 1px;
  inset-inline: 0;
  position: absolute;
}

.itd-header-action {
  align-items: center;
  display: inline-flex;
  border-left: 1px solid var(--itd-line);
  color: var(--itd-soft-ink);
  font: 13px/1 var(--itd-sans);
  gap: 15px;
  justify-self: end;
  letter-spacing: 0.08em;
  padding: 11px 3px 11px 18px;
  text-decoration: none;
}

.itd-header-action__icon {
  align-items: center;
  background: var(--itd-ink);
  border-radius: 50%;
  color: var(--itd-white);
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  transition: background 0.2s ease;
  width: 44px;
}

.itd-header-action__icon svg {
  fill: none;
  height: 19px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 19px;
}

.itd-header-action:hover .itd-header-action__icon {
  background: #34463f;
}

/* Front page */
.itd-front-main {
  background:
    linear-gradient(90deg, transparent 49.94%, rgba(61, 82, 73, 0.045) 50%, transparent 50.06%) top / 100% 610px no-repeat,
    linear-gradient(var(--itd-mist), var(--itd-paper)) top / 100% 610px no-repeat;
  margin-block-start: 0 !important;
  padding-block-end: clamp(4rem, 7vw, 7rem);
}

.itd-hero {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 6.7vw, 96px);
  grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.35fr);
  min-height: 450px;
  padding: 28px 76px 26px 34px;
  position: relative;
}

.itd-hero-copy {
  align-self: center;
  position: relative;
  z-index: 2;
}

.itd-kicker {
  align-items: center;
  color: var(--itd-moss);
  display: flex;
  font: 500 0.75rem/1 var(--itd-sans);
  gap: 16px;
  letter-spacing: 0.22em;
  margin: 0 0 13px;
}

.itd-kicker::before {
  background: currentColor;
  content: "";
  height: 1px;
  width: 42px;
}

.itd-hero h1 {
  font-family: var(--itd-serif);
  font-size: clamp(2.5rem, 4.4vw, 4.65rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.48;
  margin: 0;
  white-space: normal;
}

.itd-hero h1 span {
  white-space: nowrap;
}

.itd-hero-lead {
  color: #56645e;
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
  margin: 18px 0 19px;
  max-width: 30em;
}

.itd-read-link {
  align-items: center;
  color: var(--itd-ink);
  display: inline-flex;
  font: 500 0.8125rem/1 var(--itd-sans);
  gap: 18px;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.itd-read-link::after {
  align-items: center;
  border: 1px solid #9aa8a0;
  border-radius: 50%;
  content: "→";
  display: inline-flex;
  height: 42px;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  width: 42px;
}

.itd-read-link:hover::after {
  background: var(--itd-ink);
  color: var(--itd-white);
}

.itd-hero-visual {
  background: rgba(255, 255, 255, 0.34);
  height: 342px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.itd-hero-visual img {
  filter: saturate(0.9) contrast(0.97);
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: cover;
  width: 100%;
}

.itd-hero-visual figcaption {
  background: rgba(245, 246, 242, 0.86);
  bottom: 16px;
  color: var(--itd-soft-ink);
  font: 500 0.625rem/1.4 var(--itd-sans);
  letter-spacing: 0.11em;
  padding: 5px 9px;
  position: absolute;
  right: 18px;
}

.itd-vertical-guide {
  align-items: center;
  background: var(--itd-ink);
  bottom: 22px;
  color: var(--itd-white);
  display: flex;
  flex-direction: column;
  padding: 19px 0 15px;
  position: absolute;
  right: 0;
  top: 22px;
  width: 52px;
}

.itd-vertical-guide strong {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  writing-mode: vertical-rl;
}

.itd-vertical-guide i {
  background: rgba(255, 255, 255, 0.32);
  flex: 1;
  margin: 18px 0;
  width: 1px;
}

.itd-vertical-guide small {
  font: 500 0.5625rem/1 var(--itd-sans);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.itd-topic-section {
  border-top: 1px solid var(--itd-line);
  padding: 24px 0 50px;
}

.itd-section-head {
  align-items: end;
  display: grid;
  gap: 10px 34px;
  grid-template-areas:
    "label note"
    "title note";
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 17px;
}

.itd-section-head > * {
  margin: 0;
}

.itd-section-label {
  color: var(--itd-moss);
  font: 500 0.6875rem/1 var(--itd-sans);
  grid-area: label;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.itd-section-head h2 {
  font-family: var(--itd-serif);
  font-size: 1.875rem;
  font-weight: 500;
  grid-area: title;
  letter-spacing: 0.1em;
}

.itd-section-head > p:last-child {
  align-self: end;
  color: var(--itd-soft-ink);
  font-size: 0.8125rem;
  grid-area: note;
  padding-bottom: 0.25rem;
}

/* Six-entry topic index */
.itd-topic-grid {
  border-bottom: 1px solid var(--itd-line);
  border-top: 1px solid var(--itd-line);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-block-start: 0;
}

.itd-topic-card {
  border-right: 1px solid var(--itd-line);
  color: var(--itd-ink);
  min-width: 0;
  padding: 14px 14px 15px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.itd-topic-card:first-child {
  border-left: 1px solid var(--itd-line);
}

.itd-topic-card:hover {
  background: var(--itd-white);
  transform: translateY(-4px);
}

.itd-topic-card__media {
  aspect-ratio: 4 / 3;
  display: block;
  margin-bottom: 9px;
  overflow: hidden;
}

.itd-topic-card__media img {
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: cover;
  width: 100%;
}

.itd-topic-card__content {
  display: block;
}

.itd-topic-card__label {
  color: #829087;
  display: block;
  font: 500 0.625rem/1 var(--itd-sans);
  letter-spacing: 0.16em;
  margin-bottom: 7px;
}

.itd-topic-card__name {
  display: block;
  font-family: var(--itd-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.65;
  margin-bottom: 5px;
  min-height: 3.3em;
}

/* .itd-topic-card__count のボタン化は下の「Buttons」の節にある。
   ここに色や字送りを足すと、あちらの規則と二重管理になる。 */

/* Latest articles */
.itd-latest-section {
  border-top: 1px solid var(--itd-line);
  padding: 34px 0 76px;
}

.itd-latest-section .itd-section-head {
  margin-bottom: 24px;
}

.itd-latest-layout {
  align-items: start;
  display: grid;
  gap: 68px;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.itd-featured-article {
  color: var(--itd-ink);
  display: grid;
  min-width: 0;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.itd-featured-article:hover {
  transform: translateY(-4px);
}

.itd-featured-article__image {
  aspect-ratio: 16 / 9;
  filter: saturate(0.9) contrast(0.97);
  height: auto;
  mix-blend-mode: multiply;
  object-fit: cover;
  width: 100%;
}

.itd-featured-article__copy {
  display: block;
  padding: 19px 3px 0;
}

.itd-article-meta {
  color: var(--itd-moss);
  display: block;
  font: 500 0.6875rem/1.5 var(--itd-sans);
  letter-spacing: 0.13em;
  margin-bottom: 9px;
}

.itd-featured-article__title {
  display: block;
  font-family: var(--itd-serif);
  font-size: 1.6875rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  line-height: 1.65;
  margin-bottom: 10px;
}

.itd-featured-article__excerpt {
  color: var(--itd-soft-ink);
  display: block;
  font-size: 0.875rem;
  line-height: 1.9;
}

.itd-article-list {
  border-top: 1px solid var(--itd-line);
}

.itd-article-row {
  align-items: center;
  border-bottom: 1px solid var(--itd-line);
  color: var(--itd-ink);
  display: grid;
  gap: 20px;
  grid-template-columns: 92px minmax(0, 1fr) 26px;
  min-height: 88px;
  padding: 14px 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.itd-article-row:hover {
  background: rgba(255, 255, 255, 0.46);
}

.itd-article-row time {
  color: #7c8a82;
  font: 500 0.625rem/1 var(--itd-sans);
}

.itd-article-row__category {
  color: var(--itd-moss);
  display: block;
  font: 500 0.625rem/1.2 var(--itd-sans);
  margin-bottom: 5px;
}

.itd-article-row__title {
  display: block;
  font-family: var(--itd-serif);
  font-size: 1rem;
  line-height: 1.65;
}

.itd-article-row__arrow {
  transition: transform 0.2s ease;
}

.itd-article-row:hover .itd-article-row__arrow {
  transform: translateX(4px);
}

.itd-latest-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}

/* Archive and article pages */
.itd-archive-main,
.itd-page-main,
.itd-single-main {
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

/* 記事ページだけ本文幅を広げ、余白を詰める。WP の構造化レイアウトが
   max-width: var(--wp--style--global--content-size) を参照するので、
   この変数を上書きすれば配下の全要素が追従する。
   上のグループ規則に混ぜないこと（固定ページと一覧にも波及する）。 */
.itd-single-main {
  --wp--style--global--content-size: 860px;
  padding-block: clamp(3.5rem, 5vw, 5rem);
}

.itd-archive-main {
  padding-block: 0 clamp(3.5rem, 7vw, 7rem);
}

.itd-archive-hero {
  align-items: center;
  border-bottom: 1px solid var(--itd-line);
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.85fr);
  margin-block-end: 0;
  padding-block: clamp(2.5rem, 4vw, 3.25rem);
}

.itd-archive-main > h1,
.itd-archive-hero > h1,
.itd-page-main > h1,
.itd-single-main > h1,
.itd-single-main > .wp-block-post-title {
  color: var(--itd-ink);
  font-family: var(--itd-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  max-width: 16em;
  text-wrap: balance;
}

/* 記事ページのタイトルだけ本文と同じ列に揃える。共用の 16em は
   font-size 連動のため、64px のとき 1024px に広がって本文(760px)から
   132px はみ出していた。変数を使えば本文幅の変更に自動で追従する。 */
.itd-single-main > .wp-block-post-title {
  font-size: clamp(2.5rem, 3.4vw, 3rem);
  max-width: var(--wp--style--global--content-size);
}

.itd-archive-main > .has-large-font-size,
.itd-archive-hero > .has-large-font-size,
.itd-archive-main > .wp-block-term-description {
  color: var(--itd-soft-ink);
  line-height: 1.9;
  max-width: 38rem;
}

.itd-archive-topics {
  margin-block-start: clamp(3.5rem, 7vw, 6rem) !important;
}

.itd-archive-query {
  margin-block-start: clamp(3rem, 6vw, 5rem);
}

.itd-post-grid,
.itd-article-grid {
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* .itd-post-grid はクエリループなのでコアがグリッドにするが、
   .itd-article-grid はプラグインが出す素の div で、指定しないと block のまま。
   上の gap が効かず、「記事を読む」ボタンの下端に次のカードの罫線が接する。 */
.itd-article-grid {
  display: grid;
}

.itd-article-card {
  background: transparent;
  border-top: 1px solid var(--itd-line);
  height: 100%;
  margin-block-start: 0 !important;
  padding-block: 1.25rem 0;
}

.itd-article-card > :first-child {
  margin-block-start: 0;
}

/* サムネイルを左に置くカード。修飾クラスで限定しているのは、
   アイキャッチの無い記事では素の .itd-article-card のまま出しており、
   そこに display: flex が効くと本文が横並びに崩れるため。 */
.itd-article-card--media {
  column-gap: clamp(1rem, 2vw, 1.25rem);
  display: flex;
}

/* 一覧側は figure、「あわせて読みたい」側は presentation.php が出す a。
   a のままだとインラインなので display を揃える。 */
.itd-article-card__media {
  display: block;
  flex: 0 0 140px;
  margin-block: 0 !important;
}

.itd-article-card__media img {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* min-width: 0 がないと、長いタイトルがフレックス項目の最小幅を押し上げて
   サムネイルを潰す。 */
.itd-article-card__body {
  flex: 1 1 auto;
  margin-block: 0 !important;
  min-width: 0;
}

.itd-article-card__body > :first-child {
  margin-block-start: 0;
}

.itd-article-card__category,
.itd-article-meta,
.itd-article-date {
  color: var(--itd-moss);
  font: 500 0.75rem/1.5 var(--itd-sans);
  letter-spacing: 0.1em;
}

.itd-article-card__title {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-block: 0.75rem !important;
}

.itd-article-card__title a {
  color: var(--itd-ink);
  text-decoration: none;
}

.itd-article-card__title a:hover {
  text-decoration: underline;
}

.itd-article-card__excerpt,
.itd-article-card__excerpt p {
  color: var(--itd-soft-ink);
  font-size: 1rem;
  line-height: 1.9;
}

/* Buttons ------------------------------------------------------------------
   ボタンは2箇所にあり、HTML の出所がそれぞれ違う。

   | 場所               | 出所                        | セレクタ                          |
   |--------------------|-----------------------------|-----------------------------------|
   | 記事一覧・カテゴリ | post-excerpt の moreText    | .wp-block-post-excerpt__more-link  |
   | テーマから探す     | presentation.php            | .itd-topic-card__count             |

   「あわせて読みたい」にも .itd-text-link の「記事を読む →」があったが、
   3列にした際に外した。260px幅のカードに塗りが3つ並ぶと重いため。
   タイトルと写真がリンクなので遷移はできる。

   形（角丸・字面・矢印との間隔）は下のグループ規則で共通にし、色と大きさだけ
   個別に指定する。グループ規則なので、1箇所だけ変えたいときは末尾に足さず
   個別規則の側に書くこと。 */
.itd-article-card__excerpt .wp-block-post-excerpt__more-link,
.itd-topic-card__count {
  align-items: center;
  border-radius: 2px;
  color: var(--itd-white);
  display: inline-flex;
  font-family: var(--itd-sans);
  font-weight: 500;
  gap: 0.4em;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s ease;
}

/* 主色。一覧・カテゴリの「記事を読む →」。
   color と font-size は .itd-article-card__excerpt p から継承で降ってくるため、
   リンク自身に書いて確実に上書きする。

   word-spacing は矢印を離すためのもの。moreText は1つのテキストノード＝
   フレックス項目も1つなので gap が効かず、word-spacing が効く。 */
.itd-article-card__excerpt .wp-block-post-excerpt__more-link {
  background: var(--itd-btn-primary);
  font-size: 0.9rem;
  padding: 0.85rem 1.4rem;
  word-spacing: 0.4em;
}

.itd-article-card__excerpt .wp-block-post-excerpt__more-link:hover,
.itd-article-card__excerpt .wp-block-post-excerpt__more-link:focus-visible {
  background: var(--itd-moss);
  color: var(--itd-white);
}

.itd-article-card__excerpt .wp-block-post-excerpt__more-text {
  margin-block: 1.25rem 0;
}

/* テーマカードの「記事 4件 →」だけは塗らず、線と墨文字にしている。
   カードが6列に並ぶので、塗ると面が強すぎるため。
   共通規則が color: var(--itd-white) を当てているので、ここで打ち消す。

   word-spacing は使わない。文字列が「記事 4件 」で、記事と件数の間にも空白が
   あるため、そこまで開いてしまう。 */
.itd-topic-card__count {
  border: 1px solid var(--itd-line);
  color: var(--itd-ink);
  font-size: 0.7rem;
  margin-block-start: 5px;
  padding: 0.5rem 0.6rem;
}

/* カード全体が1つの <a> なので、hover はカード側で受ける。
   カードの地が白に変わるぶん、ボタンは主色で塗って変化を分かるようにする。
   塗ったら文字は白に戻す。戻さないと墨文字が主色に沈んで読めなくなる。 */
.itd-topic-card:hover .itd-topic-card__count,
.itd-topic-card:focus-visible .itd-topic-card__count {
  background: var(--itd-btn-primary);
  border-color: var(--itd-btn-primary);
  color: var(--itd-white);
}

.itd-page-main > h1 {
  border-bottom: 1px solid var(--itd-line);
  margin-block: 0 clamp(2.75rem, 6vw, 5rem);
  padding-block-end: 1.5rem;
}

.itd-page-main .wp-block-post-content {
  font-size: 1.15rem;
  line-height: 2;
}

.itd-single-main .wp-block-post-content {
  font-size: 1.2rem;
  line-height: 2;
  margin-block-start: clamp(3rem, 4vw, 3.5rem);
}

/* アイキャッチ。下側の間隔は本文側の margin-block-start が担うので
   ここでは上だけ指定する。アイキャッチ未登録の記事では
   post-featured-image ブロック自体が何も出力しない。 */
.itd-single-main > .wp-block-post-featured-image {
  margin-block: clamp(2.5rem, 5vw, 4rem) 0;
}

.itd-single-main > .wp-block-post-featured-image img {
  display: block;
  height: auto;
  width: 100%;
}

/* 本文中の見出し。罫線は下に引く（セクション見出しと同じ作法）。
   上に引いていた頃は margin 4rem + padding 1.15rem = 82.4px が前の段落と
   見出しの間にあった。線を下へ移すと padding が下に回るので、
   margin-block-start を 5rem（80px）に上げて元の間隔を保っている。
   子結合子 > でトップレベルの見出しに限定してあるのは、囲みブロック内の
   見出しにまで罫線と余白が付くのを防ぐため。 */
.itd-page-main .wp-block-post-content > h2,
.itd-single-main .wp-block-post-content > h2 {
  border-bottom: 1px solid var(--itd-line);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  font-weight: 500;
  margin-block: 5rem 1.5rem;
  padding-block-end: 1.25rem;
}

/* 「あわせて読みたい」の上下の空きは --itd-related-space の1つで決まる。
   前後に既に付いている余白を引いた残りだけを、こちらで足している。

   上：セクションを包むグループブロックに、コアが margin-block-start: 1.2rem を
       付ける。残りを h2 の padding-top で足す。
   下：.itd-single-main の padding-block-end と、フッターに付く同じ 1.2rem。
       残りを padding-bottom で足す。この padding-block-end は 620px 以下で
       5rem に変わるので、下の @media にも同じ計算を書いてある。
       .itd-single-main の余白を触るときは両方を直すこと。

   もとは .itd-related に margin-block-start: clamp(4rem, 8vw, 7rem) を書いていたが、
   このセクションはグループブロックの最初の子で、コアの is-layout-flow の
   :first-child 規則に負けて 0 に潰れており、記事ページでは効いていなかった。 */
.itd-related {
  --itd-related-space: 130px;
  padding-bottom: calc(
    var(--itd-related-space) - clamp(3.5rem, 5vw, 5rem) - 1.2rem
  );
}

/* セクションの見出しは、罫線を上ではなく下に引く。線が見出しに属して見え、
   前のセクションとの区切りは空きで示す。
   本文中の h2（.wp-block-post-content > h2）も同じ作法に揃えてある。 */
.itd-related > h2,
.itd-other-topics > h2 {
  border-bottom: 1px solid var(--itd-line);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  margin-block-end: 2.5rem;
  padding-block-end: 1.25rem;
}

/* 「あわせて読みたい」の見出しだけ、左にペンのイラストを置く。
   .itd-other-topics には付けないので上のグループ規則には混ぜない。
   横並びが成立するのは表示幅378px以上（絵120 + 余白16 + 見出し8文字分)。
   620px以下では絵を見出しの上の行へ回している（下の @media を参照）。
   flex-wrap は、文字サイズを変えて計算が狂ったときの保険。

   罫線は上のグループ規則が見出しの下に引く。前のセクションとの区切りは
   padding-top の空きで示す。margin-top は使えない。相殺するうえ、h2 自身の
   margin-block-start が 0.83em（文字サイズ連動で24〜32px）あるため、書いた値が
   そのまま出ない。その margin を 0 にしてから padding で取り直している。 */
.itd-related > h2 {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 16px;
  margin-top: 0;
  padding-top: calc(var(--itd-related-space) - 1.2rem);
}

/* 「あわせて読みたい」は3列。写真をカードの全幅で上に置く。
   一覧・カテゴリのカード（左140pxの横並び）とは作りが違うので、
   .itd-related で囲って限定している。620px以下は1列
   （@media 側の grid-template-columns: 1fr !important が効く）。

   写真の比率は元画像が約1.9:1 なので、4:3 より切り落としの少ない 3:2 にした。
   カード幅は本文列860pxを3等分して約260px。狭いぶんタイトルと抜粋を1段小さくする。 */
.itd-related .itd-article-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* 罫線は写真の上端と重なって見えるので置かない。区切りは写真そのものが作る。
   一覧・カテゴリのカードには残っている。 */
.itd-related .itd-article-card {
  border-top: 0;
  padding-block: 0;
}

.itd-related .itd-article-card--media {
  display: block;
}

.itd-related .itd-article-card__media {
  margin-block: 0 0.9rem !important;
  width: 100%;
}

.itd-related .itd-article-card__media img {
  aspect-ratio: 3 / 2;
}

.itd-related .itd-article-card__title {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  margin-block: 0.6rem !important;
}

.itd-related .itd-article-card__excerpt {
  font-size: 0.9rem;
  line-height: 1.8;
}

.itd-related > h2::before {
  aspect-ratio: 1200 / 445;
  background: url("assets/images/related-hand.svg") no-repeat center / contain;
  content: "";
  flex: none;
  width: 120px;
}

/* Footer */
.itd-site-footer {
  background: var(--itd-ink);
  color: var(--itd-white);
}

.itd-footer-inner {
  padding-block: 56px 24px;
}

.itd-footer-consult {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr auto;
  padding-bottom: 38px;
}

.itd-footer-consult p {
  color: #aebbb4;
  font: 500 0.625rem/1 var(--itd-sans);
  letter-spacing: 0.17em;
  margin: 0;
}

.itd-footer-consult h2 {
  font-family: var(--itd-serif);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.7;
  margin: 10px 0 0;
}

.itd-footer-consult-link {
  align-items: center;
  color: var(--itd-white);
  display: flex;
  font: 500 0.8125rem/1 var(--itd-sans);
  gap: 22px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.itd-footer-consult-link span {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  display: grid;
  height: 46px;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
  width: 46px;
}

.itd-footer-consult-link:hover span {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.itd-footer-main {
  display: grid;
  gap: 46px;
  grid-template-columns: 1.2fr 0.7fr 0.7fr;
  padding-block: 38px;
}

.itd-footer-brand {
  align-items: center;
  align-self: start;
  color: var(--itd-white);
  display: flex;
  gap: 14px;
  font-family: var(--itd-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
}

/* 濃色地では台紙が要る。図案の最も濃い色 rgb(56,68,60) は
   フッター地色 rgb(37,51,46) とほぼ同じで、透過にすると溶けて消える。 */
.itd-footer-logo {
  border-radius: 22%;
  flex: 0 0 52px;
  height: 52px;
  width: 52px;
}

.itd-footer-brand small {
  color: #aebbb4;
  display: block;
  font: 500 0.5625rem/1.2 var(--itd-sans);
  letter-spacing: 0.23em;
  margin-top: 4px;
  text-transform: uppercase;
}

.itd-footer-nav {
  align-content: start;
  display: grid;
  font: 500 0.75rem/1.5 var(--itd-sans);
  gap: 9px;
  letter-spacing: 0.04em;
}

.itd-footer-nav strong {
  color: #aebbb4;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.itd-footer-nav a {
  color: var(--itd-white);
  text-decoration: none;
  transition: color 0.2s ease;
  width: fit-content;
}

.itd-footer-nav a:hover {
  color: #cad4ce;
}

.itd-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #aebbb4;
  display: flex;
  font: 500 0.5625rem/1 var(--itd-sans);
  justify-content: space-between;
  letter-spacing: 0.08em;
  padding-top: 18px;
}

.itd-footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.itd-site-footer a:focus-visible {
  outline-color: var(--itd-white);
}

/* ナビ4項目では横並びに533px要る。中央列がそれだけ広がると左右の 1fr が痩せ、
   1210px 付近でサイト名(約224px)が2行に折れてナビに接触する。余裕を見て1240px。
   ナビの gap を42→16pxまで詰めても折り返しは直らないので、切替幅で対処する。
   そこでWP標準600pxのハンバーガー切替をこの幅まで引き上げる。
   .itd-primary-navigation で包むのは、コアの body .is-layout-flex に
   詳細度で勝つためと、他のナビゲーションブロックへ波及させないため。
   ヘッダーの列構成もここで変える。ハンバーガーを中央列に置いたままだと
   お問い合わせから離れて浮くので、右寄せの 1fr auto auto にする。 */
@media (max-width: 1240px) {
  .itd-header-inner {
    gap: 6px;
    grid-template-columns: 1fr auto auto;
  }

  .itd-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .itd-primary-navigation .wp-block-navigation__responsive-container-open {
    display: flex;
  }

  .itd-primary-navigation .wp-block-navigation__responsive-container-open,
  .itd-primary-navigation .wp-block-navigation__responsive-container-close {
    align-items: center;
    color: var(--itd-ink);
    height: 44px;
    justify-content: center;
    width: 44px;
  }

  .itd-primary-navigation .wp-block-navigation__responsive-container-open svg,
  .itd-primary-navigation .wp-block-navigation__responsive-container-close svg {
    height: 22px;
    width: 22px;
  }
}

@media (max-width: 1100px) {
  .itd-shell {
    width: min(100% - 40px, 760px);
  }

  /* 本文の .itd-shell と同じ幅に揃える。TT5のルートパディング(30px)が
     親に残ったままだと、ヘッダーだけ内側に寄ってサイト名が折り返す。 */
  .itd-site-header {
    padding-inline: 0;
  }

  .itd-header-inner {
    margin-inline: auto;
    padding-inline: 0;
    width: min(100% - 40px, 760px);
  }

  .itd-hero {
    gap: 28px;
    grid-template-columns: 1fr;
    padding: 48px 58px 42px 0;
  }

  .itd-hero-visual {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .itd-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .itd-topic-card:nth-child(odd) {
    border-left: 1px solid var(--itd-line);
  }

  .itd-topic-card:nth-child(n + 3) {
    border-top: 1px solid var(--itd-line);
  }

  .itd-section-head {
    gap: 12px;
    grid-template-areas:
      "label"
      "title"
      "note";
    grid-template-columns: 1fr;
  }

  .itd-section-head {
    margin-bottom: 1.5rem;
  }

  .itd-section-head > p:last-child {
    align-self: start;
    padding-bottom: 0;
  }

  .itd-latest-layout {
    gap: 42px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .itd-header-inner {
    height: 76px;
  }

  .itd-site-header .wp-block-site-title {
    font-size: 1.25rem;
  }

  .itd-site-note {
    font-size: 0.5rem;
  }

  /* ブランド欄の空きは実測56px。36px + gap 10px で収める。 */
  .itd-site-brand {
    gap: 10px;
  }

  .itd-site-logo {
    flex-basis: 36px;
    height: 36px;
    width: 36px;
  }

  .itd-header-action {
    border-left: 0;
    gap: 0;
    padding: 11px 0;
  }

  .itd-header-action__label {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .itd-hero {
    padding-block-start: 2.5rem;
  }

  .itd-hero h1 {
    font-size: clamp(1.4rem, 7vw, 2.8rem);
    letter-spacing: 0.06em;
  }

  /* h1 側に white-space: normal を書いても効かない。nowrap は
     子の span 自身に付いているため（継承値は子の指定に負ける）。
     折り返せないと span の最小幅308pxがグリッド列を押し広げ、
     本文が縦書きパネルの下に17px潜って読めなくなる。
     7vw / 下限1.4rem に詰めてあるのは「片付けるその前に。」を1行に保つため。
     下限を上げると320pxで折れる（22.4px必要、1.6remでは25.6pxに固定される）。 */
  .itd-hero h1 span {
    white-space: normal;
  }

  /* スマホでは非表示。2行に折り返して見出しの前置きが長くなるため。
     ::before の横線ごと消える。使用箇所は front-page.html のヒーロー1つだけ。 */
  .itd-kicker {
    display: none;
  }

  .itd-vertical-guide {
    width: 44px;
  }

  .itd-topic-section {
    padding-block-start: 20px;
  }

  .itd-topic-card {
    padding: 12px;
  }

  .itd-article-row {
    gap: 7px 14px;
    grid-template-areas:
      "date arrow"
      "content arrow";
    grid-template-columns: minmax(0, 1fr) 24px;
    padding-block: 18px;
  }

  .itd-article-row time {
    grid-area: date;
  }

  .itd-article-row__content {
    grid-area: content;
  }

  .itd-article-row__arrow {
    grid-area: arrow;
    justify-self: center;
  }

  .itd-archive-main,
  .itd-page-main,
  .itd-single-main {
    padding-block: 3rem 5rem;
  }

  .itd-archive-main {
    padding-block: 0 5rem;
  }

  .itd-archive-hero {
    gap: 1.25rem;
    grid-template-columns: 1fr;
    padding-block: 2.5rem 3rem;
  }

  .itd-post-grid,
  .itd-article-grid {
    grid-template-columns: 1fr !important;
  }

  /* 1カラムでカード幅が315pxまで縮む。横並びのままだと本文列が203px、
     タイトルが10字×4行になり、72pxの画像の下に341pxの空きが出る。
     縦積みにして本文の幅を戻す。画像は140pxのままで全幅にはしない。 */
  .itd-article-card--media {
    display: block;
  }

  .itd-article-card__media {
    margin-block: 0 0.9rem !important;
    width: 140px;
  }

  /* .itd-single-main の padding-block-end がここで 5rem になるので、
     引く量を合わせ直す。上と同じ130pxに揃えるため。 */
  .itd-related {
    padding-bottom: calc(var(--itd-related-space) - 5rem - 1.2rem);
  }

  /* 「あわせて読みたい」のペンの絵。横に並べると見出し8文字が入らないので
     上の行へ回す。335px幅（375pxの端末）で3px足りない。 */
  .itd-related > h2 {
    display: block;
  }

  .itd-related > h2::before {
    display: block;
    margin-block-end: 0.6rem;
    width: 104px;
  }

  .itd-footer-inner {
    padding-block: 42px 28px;
  }

  .itd-footer-consult,
  .itd-footer-main {
    grid-template-columns: 1fr;
  }

  .itd-footer-consult {
    align-items: start;
    gap: 26px;
  }

  .itd-footer-consult h2 {
    font-size: 1.5rem;
  }

  .itd-footer-consult h2 br {
    display: none;
  }

  .itd-footer-consult-link {
    justify-content: space-between;
  }

  .itd-footer-main {
    gap: 30px;
  }

  .itd-footer-brand {
    gap: 12px;
  }

  .itd-footer-logo {
    flex-basis: 44px;
    height: 44px;
    width: 44px;
  }

  .itd-footer-nav a {
    padding-block: 5px;
  }

  .itd-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}