/*
 * c-*  コンポーネント
 *
 * 出典: 本番の Autoptimize 統合CSS（2026-09-01 取得）。
 *       このサイトで実際に出力されているクラスだけを書き起こしている。
 *
 * ブレークポイント実測値
 *   sm : ～639.98px      @media not all and (min-width: 640px)
 *   md : 640～1023.9px   @media (min-width: 640px) and (max-width: 1023.9px)
 *   lg : 1024px～        @media (min-width: 1024px)
 *   xl : 1280px～        @media (min-width: 1280px)
 */

/* ===========================================================================
 * コンテナ
 * =========================================================================== */

.c-container,
.c-fluid-container {
  box-sizing: initial;
  flex-grow: 1;
  max-width: 100%;
  min-width: 0;
  padding-left: var(--_container-margin-left);
  padding-right: var(--_container-margin-right);
  width: auto;
}

.c-container {
  --_container-max-width: var(--_global--container-max-width);
  --_container-margin: var(--_global--container-margin);
  --_container-margin-right: calc(var(--_container-margin) + env(safe-area-inset-right));
  --_container-margin-left: calc(var(--_container-margin) + env(safe-area-inset-left));
  margin-left: auto;
  margin-right: auto;
  max-width: var(--_container-max-width);
}

.c-fluid-container {
  --_container-margin: var(--_global--container-margin);
  --_container-margin-right: calc(var(--_container-margin) + env(safe-area-inset-right));
  --_container-margin-left: calc(var(--_container-margin) + env(safe-area-inset-left));
}

/*
 * .c-full-container は本番CSSに宣言が1つも無いマーカークラス。
 * 「左右パディングを持たない器」という意味づけだけで使われている。
 * 何も書かないのが正しい。
 */

.u-slim-width {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wp--custom--slim-width) !important;
}

.c-section {
  padding: var(--_padding3) 0;
}

.p-section-front-page-content {
  max-width: 100%;
}

.p-section-front-page-content--no-vpadding {
  padding-bottom: 0;
  padding-top: 0;
}

[data-has-sidebar="false"][data-is-full-template="true"] .l-contents__main .p-section-front-page-content {
  --wp--custom--content-width: var(--_global--container-max-width);
  --wp--custom--content-wide-width: var(--_global--container-max-width);
}

/* ===========================================================================
 * グリッド（c-row / c-row__col）
 *
 * Snow Monkey の c-row は「--_gap を親が決めて、子がその半分ずつ padding を持つ」方式。
 * プロフィール一覧の 2 / 3 / 4 カラム切り替えはこの仕組みが担っている。
 * =========================================================================== */

.c-row {
  --_gap: 0px;
  --_item-width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(var(--_gap) * -1);
  margin-left: calc(var(--_gap) * 0.5 * -1);
  margin-right: calc(var(--_gap) * 0.5 * -1);
}

.c-row > .c-row__col {
  margin-bottom: var(--_gap);
  padding-left: calc(var(--_gap) * 0.5);
  padding-right: calc(var(--_gap) * 0.5);
}

.c-row__col {
  flex: 0 0 var(--_item-width);
  max-width: var(--_item-width);
}

.c-row--nowrap {
  flex-wrap: nowrap;
}

.c-row--middle {
  align-items: center;
}

/* gap 系。ヘッダは c-row--margin-s + c-row--lg-margin、一覧は c-row--margin */
.c-row--margin {
  --_gap: var(--_margin1);
}

.c-row--margin-s {
  --_gap: var(--_margin-1);
}

@media (min-width: 1024px) {
  .c-row--lg-margin {
    --_gap: var(--_margin1);
  }
}

/* 幅指定。プロフィール一覧が 1-2 / md-1-3 / lg-1-4 を使う */
.c-row__col--auto {
  flex: auto;
  --_item-width: auto;
}

.c-row__col--fit {
  flex: 0 1 auto;
}

.c-row__col--1-2 { --_item-width: 50%; }
.c-row__col--1-3 { --_item-width: 33.3333333333%; }
.c-row__col--1-4 { --_item-width: 25%; }
.c-row__col--2-3 { --_item-width: 66.6666666667%; }
.c-row__col--3-4 { --_item-width: 75%; }

@media (min-width: 640px) {
  .c-row__col--md-1-2 { --_item-width: 50%; }
  .c-row__col--md-1-3 { --_item-width: 33.3333333333%; }
  .c-row__col--md-1-4 { --_item-width: 25%; }
}

@media (min-width: 1024px) {
  .c-row__col--lg-1-2 { --_item-width: 50%; }
  .c-row__col--lg-1-3 { --_item-width: 33.3333333333%; }
  .c-row__col--lg-1-4 { --_item-width: 25%; }
}

/* ===========================================================================
 * ナビゲーション（c-navbar）
 * =========================================================================== */

/*
 * margin-top / margin-bottom: 0 は本番の .c-navbar 宣言には無い。
 * 本番は foundation の
 *   :where(html,body,p,ol,ul,li,dl,dt,dd,table,...){margin:0;padding:0}
 * が UA スタイルの ul{margin-block:1em} を消しているため、
 * .c-navbar 側では margin-left / padding-left しか書いていない。
 * その全体リセットは _base.css に移植済み（2026-09-01）なので、
 * ここの 0 指定は現在は冗長。ただし本番の算出値（全箇所で margin 0）と同じなので残す。
 * （.c-drawer__menu / .c-drawer__submenu も同じ理由で margin-top: 0 を書いている）
 */
.c-navbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
  margin-top: 0;
  padding-left: 0;
}

.c-navbar__item {
  display: flex;
  flex: 1 1 auto;
  position: relative;
}

.c-navbar__item > a {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.c-navbar__submenu {
  list-style: none;
  margin-left: 0;
  min-width: 240px;
  opacity: 0;
  padding-left: 0;
  visibility: hidden;
  transition: opacity var(--_global--transition-duration) var(--_global--transition-function-timing);
}

.c-navbar__item > .c-navbar__submenu {
  left: auto;
  position: absolute;
  right: auto;
  top: 100%;
}

.c-navbar__submenu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

/* ===========================================================================
 * サブナビ（フッターのテキストリンク列）
 * =========================================================================== */

.c-sub-nav {
  --_font-size-level: -2;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  padding: var(--_padding-2) 0;
}

.c-sub-nav .c-navbar {
  flex-wrap: wrap;
  gap: 0 var(--_margin-2);
  justify-content: flex-start;
}

.c-sub-nav .c-navbar__item {
  flex: 0 0 auto;
  margin: 0;
}

.c-sub-nav .c-navbar__item > a {
  color: inherit;
  text-decoration: none;
}

.c-sub-nav .c-navbar__item > a:hover,
.c-sub-nav .c-navbar__item > a:focus-visible {
  text-decoration: underline;
}

/*
 * 配置の指定（--left / --center / --right）は本番では
 * **@media (min-width: 1024px) の中だけ** に存在する。
 * 1024px 未満では `.c-sub-nav .c-navbar` の flex-start がそのまま効く。
 *
 * ここをメディアクエリ無しで書くと、sp（375px）のフッタサブナビが
 * 本番は左寄せなのにローカルだけ中央寄せになり、全ページで差分になる
 * （実測: `li.c-navbar__item` の x が 本番 19.2 / ローカル 157.9）。
 *
 * 出典: 本番の統合CSS。オフセット 189090 付近が
 *       @media (min-width:1024px) の内側であることを確認済み。
 */
@media (min-width: 1024px) {
  .c-sub-nav--center .c-navbar {
    justify-content: center;
  }
}

/*
 * フッタのサブナビだけは、余白を wrapper ではなく中の .c-navbar が持つ。
 * 本番:  .p-footer-sub-nav{padding:0}
 *        .p-footer-sub-nav .c-navbar{padding-top/bottom:var(--_padding-2)}
 * 合計の高さは同じだが、内訳が違うと下線や背景の位置がズレる。
 */
.p-footer-sub-nav {
  padding: 0;
}

.p-footer-sub-nav .c-navbar {
  padding-bottom: var(--_padding-2);
  padding-top: var(--_padding-2);
}

/* ===========================================================================
 * ドロワー（drawer-nav-type = overall / direction = right）
 * =========================================================================== */

.c-drawer {
  bottom: 0;
  left: -100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: min(20rem, 80%);
  z-index: 10;
  backface-visibility: hidden;
  background-color: var(--wp--preset--color--sm-accent);
  color: var(--_color-white);
  --_font-size-level: -1;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  transition:
    left var(--_global--transition-duration) var(--_global--transition-function-timing) var(--_global--transition-delay),
    right var(--_global--transition-duration) var(--_global--transition-function-timing) var(--_global--transition-delay),
    visibility var(--_global--transition-duration) var(--_global--transition-function-timing) var(--_global--transition-delay);
}

.c-drawer--fixed {
  position: fixed;
}

.c-drawer--inverse {
  left: auto;
  right: -100%;
}

.c-drawer[aria-hidden="false"] {
  left: 0;
  visibility: visible;
}

.c-drawer--inverse[aria-hidden="false"] {
  left: auto;
  right: 0;
}

.c-drawer a {
  color: inherit;
}

.c-drawer__inner {
  height: 100%;
  overflow-y: auto;
  padding-left: var(--_padding-1);
  padding-right: var(--_padding-1);
}

.c-drawer__focus-point {
  height: 0 !important;
  opacity: 0 !important;
  width: 0 !important;
}

.c-drawer__controls {
  padding-bottom: var(--_padding-2);
  padding-top: var(--_padding-2);
  text-align: right;
}

.c-drawer .c-hamburger-btn__bar {
  background-color: var(--_color-white);
}

.c-drawer__menu,
.c-drawer__submenu {
  list-style: none;
  margin-left: 0;
  margin-top: 0;
  padding-left: 0;
}

.c-drawer__item,
.c-drawer__menu {
  padding-bottom: var(--_padding-2);
  padding-top: var(--_padding-2);
}

.c-drawer__item,
.c-drawer__subitem {
  overflow: hidden;
  position: relative;
}

.c-drawer__item > a,
.c-drawer__subitem > a {
  display: block;
  text-decoration: none;
}

.c-drawer__submenu {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.c-drawer__submenu[aria-hidden="true"] {
  display: none;
}

.c-drawer__submenu[aria-hidden="false"] {
  height: auto;
  overflow: visible;
  visibility: visible;
}

.c-drawer__sub-nav {
  --_font-size-level: -2;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}

.c-drawer__sub-nav .c-drawer__item {
  padding-bottom: calc(0.5 * var(--_padding-2));
  padding-top: calc(0.5 * var(--_padding-2));
}

.c-drawer__toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0;
  vertical-align: middle;
}

/* overall（全画面ドロワー）。drawer-nav-type='overall' の実測値 */
#drawer-nav.c-drawer--overall {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 0;
  max-width: none;
  opacity: 0;
  overflow: auto;
  padding-top: 60px;
  right: 0;
  transition: opacity 0.2s, visibility 0.2s;
  width: 100%;
}

#drawer-nav.c-drawer--overall[aria-hidden="false"] {
  opacity: 1;
}

#drawer-nav.c-drawer--overall > * {
  flex: 1 1 100%;
}

#drawer-nav.c-drawer--overall .c-drawer__inner {
  height: auto;
  margin: auto;
  overflow: hidden;
}

#drawer-nav.c-drawer--overall .c-drawer__controls {
  left: var(--_padding-1);
  position: absolute;
  right: var(--_padding-1);
  top: 0;
}

#drawer-nav.c-drawer--inverse {
  padding-right: env(safe-area-inset-right);
}

.c-drawer,
.c-drawer[aria-hidden="false"] {
  z-index: 100000;
}

.c-drawer-close-zone {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9999;
}

.c-drawer-close-zone[aria-hidden="true"] {
  display: none;
}

/* ===========================================================================
 * ハンバーガーボタン
 * =========================================================================== */

.c-hamburger-btn {
  background-color: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.c-hamburger-btn__bars {
  box-sizing: initial;
  display: inline-block;
  height: 16px;
  margin: 3px auto;
  position: relative;
  width: 22px;
}

.c-hamburger-btn__bar {
  background-color: currentColor;
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform var(--_global--transition-duration) var(--_global--transition-function-timing);
}

.c-hamburger-btn__bar:first-of-type { top: 0; }
.c-hamburger-btn__bar:nth-of-type(2) { top: 7px; }
.c-hamburger-btn__bar:nth-of-type(3) { top: 14px; }

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bars > .c-hamburger-btn__bar:first-of-type,
.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bars > .c-hamburger-btn__bar:nth-of-type(3) {
  top: 7px;
}

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bars > .c-hamburger-btn__bar:first-of-type {
  transform: rotate(45deg);
}

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bars > .c-hamburger-btn__bar:nth-of-type(2) {
  background-color: transparent;
}

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bars > .c-hamburger-btn__bar:nth-of-type(3) {
  transform: rotate(-45deg);
}

.c-hamburger-btn__label {
  display: block;
  font-family: "Arial Narrow", Verdana, sans-serif;
  font-size: 8px;
  line-height: 1;
}

/* ===========================================================================
 * サイトブランディング
 * =========================================================================== */

.c-site-branding__title {
  margin: 0;
  --_font-size-level: 3;
  font-size: var(--_fluid-font-size);
  font-weight: 700;
  line-height: var(--_line-height);
}

.c-site-branding__title a {
  color: inherit;
  text-decoration: none;
}

/*
 * display: table は本番の .c-site-branding__title .custom-logo 宣言には無い。
 * 本番のロゴは EWWW Image Optimizer が <picture><source webp>+<img> に包んでいて、
 * foundation の
 *   :where(figure,picture) :where(img,video){display:table;margin-bottom:0;margin-top:0}
 * が効くため算出値が display: table（＝ブロックレベル）になっている。
 * 独自テーマは <picture> を出さない（EWWW は削除するプラグイン。CLAUDE.md §5）ので
 * img がインラインのままになり、ベースライン下の余白ぶん
 * .c-site-branding が 64px → 76.5px(PC) / 75.84px(SP) に伸びていた。
 * ここで算出値だけを本番に合わせる。width:163px は追加CSS側で当たる。
 */
.c-site-branding__title .custom-logo {
  display: table;
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* ===========================================================================
 * エントリ
 * =========================================================================== */

.c-entry__header {
  margin-bottom: var(--_margin1);
}

.c-entry__title {
  margin-top: 0;
}

.c-entry__meta {
  margin-top: var(--_margin-2);
  --_font-size-level: -1;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}

.c-entry__meta a {
  color: inherit;
  text-decoration: none;
}

.c-entry__meta a:hover,
.c-entry__meta a:focus-visible {
  text-decoration: underline;
}

.c-entry__content {
  max-width: 100%;
}

.c-entry__content::before,
.c-entry__content::after {
  content: " ";
  display: table;
}

.c-entry__content::after {
  clear: both;
}

:where(.c-entry__content > :not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--custom--content-width);
}

/*
 * 配置クラス。本番 foundation の宣言をそのまま移植。
 *   .aligncenter{clear:both;margin-left:auto;margin-right:auto}
 *   .aligncenter.wp-block-archives,…,.aligncenter.wp-block-image,…{width:fit-content}
 * コアの wp-includes/blocks/image/style.css は
 * `.wp-block-image.aligncenter{text-align:center}` と `{display:table}` しか持たず、
 * 中央寄せの auto マージンは Snow Monkey 側の宣言が担っている。これが無いと
 * `figure.wp-block-image.aligncenter` が左寄せのままになる
 * （/flow/ 実測 Δx pc -584 / sp -112.3）。
 * width:fit-content の対象は本番では10ブロックあるが、このサイトのDOMに出る
 * .wp-block-image だけを移植した（CLAUDE.md §11）。
 */
.aligncenter {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.aligncenter.wp-block-image {
  width: fit-content;
}

[data-has-sidebar="false"] .c-entry__content > .alignfull {
  margin-left: calc(-1 * var(--_container-margin-left));
  margin-right: calc(-1 * var(--_container-margin-right));
}

/*
 * 本文の縦リズム（見出しの上下マージン）
 *
 * `.c-entry__body` / `.p-entry-content` は本文の直下の子に効くが、
 * 本番はこれと**同じ体系を `:where(.is-layout-constrained,.is-layout-flow)` にも**
 * 持っている。グループブロックの「中身」の間隔はそちらが決めている。
 *
 * これが欠けていると、`.wp-block-group` の中の要素が詰まる。実測
 * （`/international-marriage-agency-china-guide/` sp）:
 *   .wp-block-group.has-pale-cyan-blue-background-color  本番 443.2 / ローカル 414.4（-28.8）
 *   .wp-block-group.has-luminous-vivid-amber-...         本番 935.7 / ローカル 849.3（-86.4）
 * 幅・padding・margin・1つ目の子の寸法はすべて一致しており、
 * 差は**子どうしの間隔**だけだった（-28.8 = --_margin1 = 1.8rem ちょうど）。
 * ページ上部で 28.8px ズレると以降が全部押し流されるため、
 * このページのピクセル差の大半はこれ1点が原因だった。
 */
.c-entry__body {
  max-width: 100%;
}

.c-entry__body,
.p-entry-content,
:where(.is-layout-constrained, .is-layout-flow) {
  --_margin-top: 1;
  --_margin-bottom: 0;
}

.c-entry__body > *,
.p-entry-content > *,
:where(.is-layout-constrained, .is-layout-flow) > * {
  margin-bottom: 0;
  margin-top: 0;
}

.c-entry__body > :where(:not(:first-child)),
.p-entry-content > :where(:not(:first-child)),
:where(.is-layout-constrained, .is-layout-flow) > :where(:not(:first-child)) {
  margin-top: calc(var(--_margin1) * var(--_margin-top));
}

.c-entry__body > :where(:not(:last-child)),
.p-entry-content > :where(:not(:last-child)),
:where(.is-layout-constrained, .is-layout-flow) > :where(:not(:last-child)) {
  margin-bottom: calc(var(--_margin1) * var(--_margin-bottom));
}

/*
 * 見出しの上下マージン。**記述順が本番と同じであることに意味がある。**
 *
 * 本番は h1 / h1+* / h2 / h2+* / h3 / h3+* … と**交互**に並べている
 * （統合CSS オフセット 200342〜201157 の `.p-entry-content` 系列で確認）。
 * `.p-entry-content>h2+*` と `.p-entry-content>h3` は詳細度が同じ (0,1,1) なので、
 * **後に書いた方が勝つ**。本番の順序では h3 の宣言が h2+* より後にあるため、
 * 「h2 の直後の h3」には h3 本来の margin-top（--_h3-margin-top = 1.5 → 43.2px）が効く。
 *
 * 独自テーマは h1〜h6 をまとめてから h1+*〜h6+* をまとめて書いていたため
 * h2+* が後勝ちし、h2 直後の h3 の margin-top が 0 に潰れていた。
 * h2 の margin-bottom（28.8px）と相殺され、隣接1箇所あたり **-14.4px** の詰まりになる。
 *
 * 実測（`/chinese-marriage-family-values/` pc、h2+h3 の隣接が2箇所）:
 *   .c-entry__content.p-entry-content  本番 / ローカル の差 -28.8（= -14.4 × 2）
 */
.c-entry__body > h1, .p-entry-content > h1, :where(.is-layout-constrained, .is-layout-flow) > h1 { --_margin-top: var(--_h1-margin-top); --_margin-bottom: var(--_h1-margin-bottom); }
.c-entry__body > h1 + *, .p-entry-content > h1 + *, :where(.is-layout-constrained, .is-layout-flow) > h1 + * { --_margin-top: 0; }
.c-entry__body > h2, .p-entry-content > h2, :where(.is-layout-constrained, .is-layout-flow) > h2 { --_margin-top: var(--_h2-margin-top); --_margin-bottom: var(--_h2-margin-bottom); }
.c-entry__body > h2 + *, .p-entry-content > h2 + *, :where(.is-layout-constrained, .is-layout-flow) > h2 + * { --_margin-top: 0; }
.c-entry__body > h3, .p-entry-content > h3, :where(.is-layout-constrained, .is-layout-flow) > h3 { --_margin-top: var(--_h3-margin-top); --_margin-bottom: var(--_h3-margin-bottom); }
.c-entry__body > h3 + *, .p-entry-content > h3 + *, :where(.is-layout-constrained, .is-layout-flow) > h3 + * { --_margin-top: 0; }
.c-entry__body > h4, .p-entry-content > h4, :where(.is-layout-constrained, .is-layout-flow) > h4 { --_margin-top: var(--_h4-margin-top); --_margin-bottom: var(--_h4-margin-bottom); }
.c-entry__body > h4 + *, .p-entry-content > h4 + *, :where(.is-layout-constrained, .is-layout-flow) > h4 + * { --_margin-top: 0; }
.c-entry__body > h5, .p-entry-content > h5, :where(.is-layout-constrained, .is-layout-flow) > h5 { --_margin-top: var(--_h5-margin-top); --_margin-bottom: var(--_h5-margin-bottom); }
.c-entry__body > h5 + *, .p-entry-content > h5 + *, :where(.is-layout-constrained, .is-layout-flow) > h5 + * { --_margin-top: 0; }
.c-entry__body > h6, .p-entry-content > h6, :where(.is-layout-constrained, .is-layout-flow) > h6 { --_margin-top: var(--_h6-margin-top); --_margin-bottom: var(--_h6-margin-bottom); }
.c-entry__body > h6 + *, .p-entry-content > h6 + *, :where(.is-layout-constrained, .is-layout-flow) > h6 + * { --_margin-top: 0; }

/*
 * 本文直下の子は position:relative。本番の宣言をそのまま移植（統合CSS 201158 / 314249）。
 *   :where(.p-entry-content>*){position:relative}
 *   :where(:where(.is-layout-constrained,.is-layout-flow)>*){position:relative}
 * `.c-entry__body` 側には本番でも同じ宣言が無いので足さない。
 */
:where(.p-entry-content > *),
:where(:where(.is-layout-constrained, .is-layout-flow) > *) {
  position: relative;
}

/*
 * リスト項目どうしの間隔。
 *
 * 本番は「本文コンテナ > ul/ol」の中の li に、2件目以降と
 * 入れ子リストの先頭に `margin-top: var(--_margin-2)`（9.6px）を入れている。
 * 独自テーマにこれが無く、本文中の箇条書きが1項目あたり 9.6px 詰まっていた。
 *
 * 実測（`/how-to-choose-international-marriage-agency/` sp、本文2つ目の ul）:
 *   本番   : li の margin-top が 2件目以降すべて 9.6px、ul 全体の高さ 431.9
 *   ローカル: li の margin-top が全部 0、ul 全体の高さ 403.2（-28.7）
 * 記事1本に箇条書きが複数あるため、ページ全体では -150px 以上になっていた。
 *
 * 本番の宣言（統合CSS。`:where()` で詳細度を 0 に保っている点まで同じ）:
 *   <container>>:where(ol) *>:where(li:first-child),
 *   <container>>:where(ol) :where(li)+:where(li),
 *   <container>>:where(ul) *>:where(li:first-child),
 *   <container>>:where(ul) :where(li)+:where(li) { margin-top: var(--_margin-2) }
 *
 * <container> は本番では9種類あるが、このサイトのDOMに出るものだけを移植する（§11）。
 * 足りなければ差分が出てから足すこと。
 */
.p-entry-content > :where(ol) *> :where(li:first-child),
.p-entry-content > :where(ol) :where(li) + :where(li),
.p-entry-content > :where(ul) *> :where(li:first-child),
.p-entry-content > :where(ul) :where(li) + :where(li),
:where(.is-layout-constrained, .is-layout-flow) > :where(ol) *> :where(li:first-child),
:where(.is-layout-constrained, .is-layout-flow) > :where(ol) :where(li) + :where(li),
:where(.is-layout-constrained, .is-layout-flow) > :where(ul) *> :where(li:first-child),
:where(.is-layout-constrained, .is-layout-flow) > :where(ul) :where(li) + :where(li) {
  margin-top: var(--_margin-2);
}

/* ===========================================================================
 * 記事一覧（c-entries--rich-media）
 * =========================================================================== */

.c-entries {
  --entries--gap: var(--_margin1);
  --entries--item-width: 50%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-bottom: calc(-1 * var(--entries--gap));
  margin-left: calc(-1 * var(--entries--gap) * 0.5);
  margin-right: calc(-1 * var(--entries--gap) * 0.5);
  padding-left: 0;
}

@media (min-width: 1024px) {
  .c-entries {
    --entries--item-width: 33.33333%;
  }
}

@media (min-width: 1024px) {
  [data-has-sidebar="true"] .c-entries--rich-media,
  [data-is-slim-width="true"] .c-entries--rich-media {
    --entries--item-width: 50%;
  }
}

@media not all and (min-width: 640px) {
  .c-entries--rich-media[data-force-sm-1col="true"],
  .c-entries--rich-media[data-has-infeed-ads="true"] {
    --entries--item-width: 100%;
  }
}

.c-entries__item {
  flex: 0 1 var(--entries--item-width);
  margin-bottom: var(--entries--gap);
  max-width: var(--entries--item-width);
  padding-left: calc(var(--entries--gap) * 0.5);
  padding-right: calc(var(--entries--gap) * 0.5);
}

.c-entries__item > a {
  color: inherit;
  display: block;
  text-decoration: none;
}

.c-entry-summary {
  max-width: 100%;
}

.c-entry-summary__figure {
  background-color: var(--wp--preset--color--sm-lighter-gray);
  margin-bottom: var(--_margin-1);
  overflow: hidden;
  position: relative;
}

.c-entry-summary__figure::before {
  content: "";
  display: block;
  padding-top: 75%;
}

.c-entry-summary__figure > picture {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.c-entry-summary__figure > img,
.c-entry-summary__figure > picture > img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.c-entry-summary__figure .c-entry-summary__term {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.c-entry-summary__term {
  background-color: var(--wp--preset--color--sm-accent);
  color: var(--_color-white);
  display: inline-block;
  font-weight: 700;
  --_font-size-level: -2;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  padding: calc(var(--_padding-2) * 0.5) var(--_padding-2);
}

.c-entry-summary__header {
  margin-bottom: var(--_margin-2);
}

.c-entry-summary__title {
  margin: 0;
  --_font-size-level: 1;
  font-size: var(--_fluid-font-size);
  line-height: var(--_line-height);
}

.c-entry-summary__content {
  --_font-size-level: -1;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}

.c-entry-summary__meta {
  margin-top: var(--_margin-1);
  --_font-size-level: -2;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--_font-size);
  font-weight: 700;
  justify-content: center;
  line-height: var(--_line-height);
}

.c-entry-summary__meta .c-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.c-entry-summary__meta .c-meta__item--categories {
  display: none;
}

/* ===========================================================================
 * メタ
 * =========================================================================== */

.c-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.c-meta__item {
  align-items: center;
  display: inline-flex;
  white-space: nowrap;
}

.c-meta__item:not(:last-child) {
  margin-right: 0.75em;
}

.c-meta__item img,
.c-meta__item svg {
  flex: 0 0 auto;
  margin-right: 5px;
}

.c-meta__item--author {
  white-space: normal;
}

.c-meta__item--author img {
  border-radius: 100%;
  height: 24px;
  overflow: hidden;
  width: 24px;
}

/* ===========================================================================
 * パンくず
 * =========================================================================== */

/*
 * margin-top / margin-bottom: 0 は .c-navbar と同じ理由（上のコメント参照）。
 * この 0 が無かった時期は、font-size 12.8px の ol に UA の上下マージン 12.8px が残り、
 * .p-breadcrumbs-wrapper の高さが 65.3px → 90.8px（+25.5）に膨らんでいた。
 * いまは _base.css の全体リセットが効くので冗長だが、本番の算出値と同じなので残す。
 */
.c-breadcrumbs {
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
  margin-top: 0;
  padding-left: 0;
  --_font-size-level: -2;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}

.c-breadcrumbs__item {
  display: inline;
}

.c-breadcrumbs__item:nth-child(n + 2)::before {
  border-color: currentcolor;
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: "";
  display: inline-block;
  height: 0.4em;
  margin: 0.45em 0.45em 0.15em 0.15em;
  transform: rotate(45deg);
  width: 0.4em;
}

.c-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.c-breadcrumbs a:hover,
.c-breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.l-contents__container > .p-breadcrumbs-wrapper:first-child,
.l-contents__container > .p-breadcrumbs-wrapper:last-child {
  padding-bottom: var(--_padding-2);
  padding-top: var(--_padding-2);
}

/* ===========================================================================
 * ページネーション
 * =========================================================================== */

.c-pagination {
  font-size: 0;
  text-align: center;
}

.p-archive + .c-pagination,
.p-archive .c-pagination {
  margin-top: var(--_margin2);
}

.c-pagination__item,
.c-pagination__item-ellipsis,
.c-pagination__item-link {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  margin: 0 2px;
  text-decoration: none;
  vertical-align: top;
  width: 40px;
}

/*
 * 【現在ページの背景色は生きた変数で書く】D-061
 *
 * 本番（Snow Monkey）の宣言はこうなっていた:
 *
 *   .c-pagination__item { background-color: var(--wp--preset--color--sm-accent);
 *                         color:            var(--wp--preset--color--white) }
 *
 * 本番は global styles を止めているので `--wp--preset--color--*` が
 * 1つも定義されておらず（D-017）、**背景も文字色も両方まとめて死ぬ**。
 * その結果、現在ページは「背景なし・地の文字色」で描画されていた。見えてはいた。
 *
 * 独自テーマはここで文字色だけを `var(--_color-white)`（生きている変数）に
 * 読み替えてしまった。背景は死んだまま文字色だけが生き返り、
 * **白背景に白文字＝現在ページの数字が消える**という本番に無い症状になった。
 * これは D-026「同義の変数に読み替えない」に触れた取りこぼしそのもの。
 *
 * 直し方は2つあった。①文字色も殺して本番（数字だけ）に戻す
 * ②背景を生かして「現在ページに色が付く」意図された見た目にする。
 * **ユーザー判断で②**。文字色を黒にして誤魔化すのではなく背景を復元する。
 * 実測コントラスト比 #3f55db に白文字 = 5.94:1（4.5:1 以上）。
 *
 * `:hover` / `:focus-visible` も同じ壊れ方をしていた（背景が死に、
 * 文字色だけ白 → ホバーすると数字が消える）。同じ規則の3行下にある
 * 同一原因なので、ここで一緒に直す。ホバーは白文字をやめて地の文字色に戻す
 * （Snow Monkey の意図どおり #ccc を敷くと、白文字では 1.61:1 で読めない）。
 *
 * 非選択ページの背景（`--sm-lighter-gray`）は本番どおり死なせたままにする。
 * 見えない不具合ではないので、必要が無い変更はしない。
 */
.c-pagination__item {
  background-color: var(--accent-color);
  color: var(--_color-white);
}

.c-pagination__item-ellipsis,
.c-pagination__item-link {
  background-color: var(--wp--preset--color--sm-lighter-gray);
  color: inherit;
}

.c-pagination__item-link:hover,
.c-pagination__item-link:focus-visible {
  background-color: var(--_light-color-gray);
  color: inherit;
}



/* ===========================================================================
 * 投稿個別の下部（前後の記事ナビ / 関連記事）
 * =========================================================================== */

/*
 * 【順序に意味がある】`.c-entry-aside` は `.c-entry__footer > *` より **前** に置く。
 *
 * 両者は詳細度が同じ (0,1,0) なので、後に書いたほうが勝つ。本番の統合CSSでは
 *   .c-entry-aside{margin-top:var(--_margin2)}          ← 先
 *   .c-entry__footer>*{margin-top:0}                    ← 後（こちらが勝つ）
 *   .c-entry__footer>:where(:not(:first-child)){margin-top:calc(var(--_margin1) * var(--_margin-top))}
 * の順に並んでおり、フッタ直下では **--_margin1（28.8px）** が効く。
 * `.c-entry-aside` の 48px が効くのは、フッタの外で使われたときだけ。
 *
 * 独自テーマは `.c-entry-aside` を後ろに書いていたため 48px が勝ってしまい、
 * 関連記事が **19.2px 下**にずれていた（実測: 本番 margin-top 28.8px / ローカル 48px）。
 * 全記事ページに出るので52枚すべてに効く。順序を入れ替えないこと。
 */
.c-entry-aside {
  margin-top: var(--_margin2);
}

.c-entry__footer {
  margin-top: var(--_margin2);
  --_margin-top: 1;
  --_margin-bottom: 0;
}

.c-entry__footer > * {
  margin-bottom: 0;
  margin-top: 0;
}

.c-entry__footer > :where(:not(:first-child)) {
  margin-top: calc(var(--_margin1) * var(--_margin-top));
}

.c-entry-aside__title {
  margin-bottom: var(--_margin1);
  --_font-size-level: 2;
  font-size: var(--_fluid-font-size);
  font-weight: 700;
  line-height: var(--_line-height);
}

/*
 * 「関連記事」の見出しは、テキストの左右に1pxの罫線が伸びる中央寄せ。
 * 本番の統合CSSにある3宣言をそのまま移植する。
 *
 *   .c-entry-aside__title{align-items:center;display:flex;flex-direction:row;justify-content:center}
 *   .c-entry-aside__title:after,.c-entry-aside__title:before{
 *     background-color:var(--wp--preset--color--sm-text);content:"";display:block;flex:1 0 0%;height:1px;min-width:20px}
 *   .c-entry-aside__title:before{margin-right:.5em}
 *   .c-entry-aside__title:after{margin-left:.5em}
 *
 * これが無いと見出しが左寄せのただのテキストになる。実測（pc 1440px）:
 *   本番   : display:flex / span の x=675.7・高さ 37.2（中央）
 *   ローカル: display:block / span の x=80・高さ 22（左寄せ）
 * → span の x が **595.7px** ずれ、見出しの高さも 15.2px 低かった。
 * 関連記事は全記事ページに出るので、52枚すべてに効く。
 *
 * 罫線の色 `var(--wp--preset--color--sm-text)` は**本番では未定義**なので
 * `background-color` が無効になり、**罫線は描画されない**（D-017 と同じ現象）。
 * ここでも同じ変数を使うことで、本番と同じ「見えない罫線」になる。
 * 幅は占有するのでテキストの中央寄せだけが効く。値を書き換えないこと。
 */
.c-entry-aside__title {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.c-entry-aside__title::before,
.c-entry-aside__title::after {
  background-color: var(--wp--preset--color--sm-text);
  content: "";
  display: block;
  flex: 1 0 0%;
  height: 1px;
  min-width: 20px;
}

.c-entry-aside__title::before {
  margin-right: 0.5em;
}

.c-entry-aside__title::after {
  margin-left: 0.5em;
}

.c-prev-next-nav {
  margin-top: var(--_margin1);
  position: relative;
}

@media (min-width: 640px) {
  .c-prev-next-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.c-prev-next-nav__item {
  display: flex;
  overflow: hidden;
  position: relative;
}

.c-prev-next-nav__item:not(:first-child) {
  margin-top: var(--_margin-1);
}

@media (min-width: 640px) {
  .c-prev-next-nav__item {
    flex: 0 1 auto;
    width: 50%;
  }

  .c-prev-next-nav__item:not(:first-child) {
    margin-top: 0;
  }

  .c-prev-next-nav__item--next {
    margin-right: var(--_margin-1);
  }

  .c-prev-next-nav__item--prev {
    margin-left: var(--_margin-1);
  }
}

.c-prev-next-nav__item > a {
  /*
   * **変数を `--_color-*` に置き換えないこと。** 本番はここで
   * `var(--wp--preset--color--black)` / `var(--wp--preset--color--white)` を使っており、
   * その2つは本番では**未定義**なので宣言ごと無効になる（D-017 と同じ現象）。
   * 結果、本番の前後記事ナビの `<a>` は **背景が透明・文字色は継承** で描画されている。
   *
   * 独自テーマは当初 `--_color-black`(#111) / `--_color-white` を使っていたため、
   * 背景が #111 になり、その上に opacity 0.6 のサムネイルが乗って
   * **本番より約95階調暗く**なっていた（実測: 帯の平均輝度 本番 207.3 / ローカル 127.8）。
   * 全記事ページに出るので52枚すべてに効く。
   */
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  font-weight: 700;
  justify-content: center;
  padding: var(--_padding1);
  position: relative;
  text-decoration: none;
}

.c-prev-next-nav__item-figure {
  backface-visibility: hidden;
  background-color: var(--wp--preset--color--sm-lighter-gray);
  inset: 0;
  opacity: 0.6;
  overflow: hidden;
  position: absolute;
  transition: opacity var(--_global--transition-duration) var(--_global--transition-function-timing);
}

.c-prev-next-nav__item > a:hover .c-prev-next-nav__item-figure,
.c-prev-next-nav__item > a:focus-visible .c-prev-next-nav__item-figure {
  opacity: 0.5;
}

.c-prev-next-nav__item-figure > picture {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.c-prev-next-nav__item-figure > img,
.c-prev-next-nav__item-figure > picture > img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.c-prev-next-nav__item-label {
  position: relative;
  --_font-size-level: -2;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}

.c-prev-next-nav__item-title {
  position: relative;
  --_font-size-level: 1;
  font-size: var(--_fluid-font-size);
  line-height: var(--_line-height);
}

@media (min-width: 1024px) {
  .p-related-posts .c-entries--rich-media {
    --entries--item-width: 25%;
  }
}

.p-related-posts .c-entries--rich-media .c-entry-summary__content {
  display: none;
}

.p-related-posts .c-entry-summary__title {
  --_font-size-level: 0;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}

/* ===========================================================================
 * ページヘッダ（アイキャッチの全幅バナー）
 *
 * アイキャッチ付きの投稿29件で出力される。高さ clamp(300px, 62.5vw, 500px)。
 * この値を落とすと投稿ページのファーストビューが全部ずれる。
 * =========================================================================== */

.c-page-header {
  align-items: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding-bottom: var(--_padding2);
  padding-top: var(--_padding2);
  position: relative;
}

.c-page-header[data-has-image="true"] {
  height: clamp(300px, 62.5vw, 500px);
}

.c-page-header[data-has-image="true"] .c-page-header__content {
  color: var(--_color-white);
}

.c-page-header[data-align="center"] {
  justify-content: center;
}

.c-page-header[data-align="center"] .c-page-header__content {
  align-items: center;
}

.c-page-header[data-align="right"] {
  justify-content: flex-end;
}

.c-page-header[data-align="right"] .c-page-header__content {
  align-items: flex-end;
}

.c-page-header .c-container {
  flex: 1 1 auto;
}

.c-page-header__bgimage {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.c-page-header__bgimage > picture {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.c-page-header__bgimage > img,
.c-page-header__bgimage > picture > img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.c-page-header__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  position: relative;
}

.c-page-header__content a {
  color: inherit;
  text-decoration: none;
}

.c-page-header__content a:hover,
.c-page-header__content a:focus-visible {
  text-decoration: underline;
}

.c-page-header__title {
  margin: 0;
  max-width: 100%;
}

.c-page-header__meta {
  margin-top: var(--_margin-2);
  --_font-size-level: -1;
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: var(--_line-height);
}

/* ===========================================================================
 * ページトップ
 * =========================================================================== */

#page-top {
  --page-top-y: 0px;
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  bottom: calc(var(--safe-area-inset-bottom) + var(--page-top-y));
  position: fixed;
  right: 0;
  z-index: 99998;
}

.c-page-top {
  background-color: var(--wp--preset--color--sm-accent);
  height: 40px;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width: 40px;
  transition: opacity var(--_global--transition-duration) var(--_global--transition-function-timing);
}

@media (min-width: 640px) {
  .c-page-top {
    height: 50px;
    width: 50px;
  }
}

.c-page-top[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.c-page-top a {
  align-items: center;
  color: var(--_color-white);
  display: flex;
  font-size: 20px;
  inset: 0;
  justify-content: center;
  line-height: 1;
  position: absolute;
  text-decoration: none;
}

/* ===========================================================================
 * 検索フォーム（404 / 検索結果で使用）
 * =========================================================================== */

.c-input-group {
  --_border-radius: var(--_global--border-radius);
  border-radius: var(--_border-radius);
  display: flex;
  flex-wrap: nowrap;
}

.c-input-group__field {
  flex: 1 1 auto;
}

.c-input-group__field input {
  width: 100%;
}

.c-input-group__btn {
  flex: 0 0 auto;
}

/* ===========================================================================
 * ユーティリティ（u-invisible-*）
 *
 * ヘッダのPCナビ / ハンバーガーの出し分けがこれに依存している。
 * 実測ブレークポイントのまま。
 * =========================================================================== */

.u-invisible {
  display: none !important;
}

@media not all and (min-width: 640px) {
  .u-invisible-sm { display: none !important; }
}

@media (min-width: 640px) {
  .u-invisible-md-up { display: none !important; }
}

@media not all and (min-width: 1024px) {
  .u-invisible-md-down { display: none !important; }
}

@media (min-width: 640px) and (max-width: 1023.9px) {
  .u-invisible-md { display: none !important; }
}

@media (min-width: 1024px) {
  .u-invisible-lg-up { display: none !important; }
}

@media not all and (min-width: 1280px) {
  .u-invisible-lg-down { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1279.9px) {
  .u-invisible-lg { display: none !important; }
}

@media (min-width: 1280px) {
  .u-invisible-xl { display: none !important; }
}