@charset "UTF-8";
/* ==========================================================================
   下層ページ
   Figma: 02_under_pc / 02_under_sp（node 36795-2）

   基準寸法（完成モック pcsp__02-under-pc.png から実測）
     PC: フレーム1440 / コンテンツ980（左右余白230）
         本文中の画像640（コンテンツ内で中央寄せ）／図版は640角・980幅
         ページタイトル写真 1440x360 / タイトルボックス 320x148（左端密着）
     SP: フレーム390 / コンテンツ358（左右余白16）

   ■ 本文はブロックエディターで編集する（post_content）
     ブロックが出力する wp-block-* クラスに依存せず、
     className で付けた c-* / p-under__* だけで成立するようにしている。

   見出しは design.md のトークンをそのまま使える寸法だった。
     h2 = t-28sb(28px) / h3 = t-24sb(24px) / FAQ質問 = t-18sb(18px) / 本文 = t-16r(16px)
   ========================================================================== */

:root {
  --x-under-container: 980px;    /* 下層ページのコンテンツ幅（TOPの1160とは別） */
  --x-under-figure: 640px;       /* 本文中の画像幅 */
}

.l-under-container {
  width: var(--x-under-container);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   ページタイトル部
   -------------------------------------------------------------------------- */
.p-pagehead {
  position: relative;
  height: 360px;
  overflow: hidden;
  background: var(--color-t-base01);   /* 画像読み込み前の下地 */
}
.p-pagehead__media {
  position: absolute;
  inset: 0;
}
.p-pagehead__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* タイトルボックスはフレーム左端に密着させる（左余白なし） */
.p-pagehead__box {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 320px;
  height: 152px;
  background: var(--color-t-main01);
  color: var(--color-wh);
}
.p-pagehead__title {
  font-family: var(--typography-t-28sb-family);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .18em;
}
.p-pagehead__en {
  font-family: var(--typography-t-16sb-family);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.c-breadcrumb { padding: 30px 0 0; }
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  letter-spacing: .06em;
  line-height: 1.6;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "/";
  margin-right: 12px;
  color: var(--x-txt-mute);
}
.c-breadcrumb__item a { text-decoration: none; }
.c-breadcrumb__item a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   本文共通
   -------------------------------------------------------------------------- */
.p-under { padding-bottom: 96px; }

.p-under__intro { padding: 76px 0 0; }
.p-under__toc-wrap { padding: 84px 0 96px; }

.p-under__section { padding: 96px 0; }
/* 1セクションおきに薄いベージュを敷く（Figmaの帯にあわせる） */
.p-under__section--tint { background: var(--color-t-base01); }

.p-under__block + .p-under__block { margin-top: 72px; }

/* 見出し ------------------------------------------------------------------ */
.c-under-h2 {
  position: relative;
  padding-bottom: 22px;
  font-family: var(--typography-t-28sb-family);
  font-size: var(--typography-t-28sb-size);
  font-weight: var(--typography-t-28sb-weight);
  line-height: 1.5;
  letter-spacing: .1em;
}
/* 下線：全幅の細線 + 左端に濃い短線を重ねる */
.c-under-h2::before,
.c-under-h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
}
.c-under-h2::before {
  left: 0;
  width: 100%;
  background: var(--color-t-bdr01);
}
.c-under-h2::after {
  left: 0;
  width: 150px;
  height: 2px;
  background: var(--color-t-main01);
}
.c-under-h2 + * { margin-top: 56px; }

.c-under-h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--typography-t-24sb-family);
  font-size: var(--typography-t-24sb-size);
  font-weight: var(--typography-t-24sb-weight);
  line-height: 1.6;
  letter-spacing: .08em;
}
/* 左端の縦バー */
.c-under-h3::before {
  content: "";
  flex: none;
  width: 4px;
  height: 1.1em;
  background: var(--color-t-main01);
}
.c-under-h3 + * { margin-top: 28px; }
.c-under-h3--sm { font-size: var(--typography-t-20sb-size); }

/* 本文 -------------------------------------------------------------------- */
.p-under__lead,
.p-under__text {
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  line-height: var(--typography-t-16r-line-height);
  letter-spacing: var(--typography-t-16r-letter-spacing);
}
.p-under__text + .p-under__text { margin-top: 26px; }
.p-under__lead { margin-top: 44px; }

/* 画像 -------------------------------------------------------------------- */
.p-under__figure {
  width: var(--x-under-figure);
  margin-inline: auto;
}
.p-under__figure img { display: block; width: 100%; }
.p-under__figure + .p-under__text { margin-top: 36px; }
/* 正方形の図（虫歯とは の4要素図 640x640） */
.p-under__figure--square { width: 640px; }
/* コンテンツ全幅（進行段階の図 980x339） */
.p-under__figure--full { width: 100%; }

/* 素材未受領時のプレースホルダー。受領後は不要になる */
.p-under__figure--empty {
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(-45deg, var(--color-t-base01) 0 12px, #eeece4 12px 24px);
  border: 1px solid var(--color-t-bdr01);
}
.p-under__figure--full.p-under__figure--empty { aspect-ratio: 980 / 339; }
.p-under__figure--square.p-under__figure--empty { aspect-ratio: 1 / 1; }

/* テキストリンク（→詳しくはこちら） ---------------------------------------- */
.p-under__more { margin-top: 24px; }
.c-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  letter-spacing: .06em;
  color: var(--color-t-main01);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.c-textlink::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   目次
   -------------------------------------------------------------------------- */
.c-toc {
  padding: 44px 56px 52px;
  background: var(--color-t-base01);
}
.c-toc__title {
  text-align: center;
  font-family: var(--typography-t-20sb-family);
  font-size: var(--typography-t-20sb-size);
  font-weight: var(--typography-t-20sb-weight);
  letter-spacing: .12em;
}
.c-toc__list { margin-top: 26px; }
.c-toc__item + .c-toc__item { margin-top: 6px; }

/* リンクはクラスの有無に関係なく効かせる。
   ブロックエディターで項目を足したときクラスは付かないため、
   構造（c-toc 配下の a）で当てる。 */
.c-toc a,
.c-toc__link {
  position: relative;
  display: inline-block;
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  line-height: 1.9;
  letter-spacing: .06em;
}
.c-toc a:hover { opacity: 1; text-decoration: underline; }

/* 親項目は「・」 */
.c-toc__list > li > a,
.c-toc__item > .c-toc__link { padding-left: 22px; }
.c-toc__list > li > a::before,
.c-toc__item > .c-toc__link::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 子項目は「└」 */
.c-toc__sub { margin-top: 4px; padding-left: 38px; }
.c-toc__sub a { padding-left: 20px; }
.c-toc__sub a::before {
  content: "└";
  position: absolute;
  left: 0;
  color: var(--x-txt-mute);
}

/* --------------------------------------------------------------------------
   進行段階（枠付きボックスを縦に連結）
   -------------------------------------------------------------------------- */
.c-steps { margin-top: 48px; }
.c-steps__item {
  position: relative;
  padding: 34px 40px 38px;
  border: 1px solid var(--color-t-main01);
  background: var(--color-wh);
}
/* ブロックエディターから追加された段落にもクラス指定なしで効かせる */
.c-steps__item p {
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  line-height: var(--typography-t-16r-line-height);
  letter-spacing: var(--typography-t-16r-letter-spacing);
}
.c-steps__item + .c-steps__item { margin-top: 34px; }
/* ボックス間のコネクタ線 */
.c-steps__item + .c-steps__item::before {
  content: "";
  position: absolute;
  top: -35px;
  left: 50%;
  width: 1px;
  height: 34px;
  background: var(--color-t-main01);
}

/* ==========================================================================
   症例・お知らせの一覧 / 個別記事
   下層ページと同じコンテナ幅（980px）にそろえる。
   ========================================================================== */

.p-archive { padding: 72px 0 96px; }
.p-archive__empty {
  padding: 40px 0 60px;
  text-align: center;
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  color: var(--x-txt-mute);
}

/* ---- カテゴリー絞り込み ---- */
.c-catnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.c-catnav__item {
  padding: 9px 20px;
  border: 1px solid var(--color-t-bdr01);
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  letter-spacing: .06em;
  transition: background-color var(--hover-dur-back, .3s) ease,
              border-color var(--hover-dur-back, .3s) ease,
              color var(--hover-dur-back, .3s) ease;
}
.c-catnav__item:hover {
  opacity: 1;
  border-color: var(--color-t-main01);
  color: var(--color-t-main01);
}
.c-catnav__item.is-current {
  background: var(--color-t-main01);
  border-color: var(--color-t-main01);
  color: var(--color-wh);
}

/* ---- 症例カード（3列） ---- */
.p-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px var(--x-col-gap, 28px);
  padding-left: 0;
  list-style: none;
}
.p-archive__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-wh);
  color: inherit;
}
.p-archive__link:hover { opacity: 1; }
.p-archive__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-t-base01);
}
.p-archive__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-dur-back, .3s) ease;
}
.p-archive__card:hover .p-archive__thumb img { transform: scale(1.07); }
.p-archive__body {
  display: block;
  padding: 18px 4px 0;
}
.p-archive__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.p-archive__date {
  font-family: var(--typography-t-14r-family);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--x-txt-mute);
}
.p-archive__cat {
  padding: 3px 10px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  font-family: var(--typography-t-14r-family);
  font-size: 11px;
  letter-spacing: .06em;
}
.p-archive__title {
  display: block;
  font-family: var(--typography-t-16r-family);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .04em;
}
.p-archive__card:hover .p-archive__title { color: var(--color-t-main01); }

/* ---- お知らせ（1行ずつ） ---- */
.p-archive__list { padding-left: 0; list-style: none; }
.p-archive__row { border-bottom: 1px solid var(--color-t-bdr01); }
.p-archive__row:first-child { border-top: 1px solid var(--color-t-bdr01); }
.p-archive__row-link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 4px;
  color: inherit;
}
.p-archive__row-link:hover { opacity: 1; }
.p-archive__row .p-archive__meta { margin-bottom: 0; flex: none; }
.p-archive__row .p-archive__title { flex: 1; }
.p-archive__row:hover .p-archive__title { color: var(--color-t-main01); }

/* ---- ページ送り ---- */
.c-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 64px;
}
.c-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-t-bdr01);
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  letter-spacing: .06em;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.c-pager .page-numbers:hover {
  opacity: 1;
  border-color: var(--color-t-main01);
  color: var(--color-t-main01);
}
.c-pager .page-numbers.current {
  background: var(--color-t-main01);
  border-color: var(--color-t-main01);
  color: var(--color-wh);
}
.c-pager .page-numbers.dots { border-color: transparent; }

/* ---- 個別記事 ---- */
.p-single { padding: 64px 0 0; }
.p-single__head { padding-bottom: 34px; }
.p-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.p-single__date {
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  letter-spacing: .06em;
  color: var(--x-txt-mute);
}
.p-single__cat {
  padding: 4px 12px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  font-family: var(--typography-t-14r-family);
  font-size: 12px;
  letter-spacing: .06em;
}
.p-single__cat:hover { opacity: 1; background: #0a6b62; }
.p-single__title {
  font-family: var(--typography-t-28sb-family);
  font-weight: var(--typography-t-28sb-weight);
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: .06em;
}
/* 記事本文。移管記事のブロックは下層ページのような
   セクション（l-under-container）で包まれていないので、
   ここでコンテンツ幅をあてる。 */
.p-single__body {
  width: var(--x-under-container);
  margin-inline: auto;
  padding-bottom: 24px;
}

/* ---- 前後の記事 ---- */
.c-postnav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 56px 0 96px;
  padding-top: 40px;
  border-top: 1px solid var(--color-t-bdr01);
}
.c-postnav__side { flex: 1; min-width: 0; }
.c-postnav__side--right { text-align: right; }
.c-postnav__link { display: inline-block; max-width: 100%; color: inherit; }
.c-postnav__link:hover { opacity: 1; color: var(--color-t-main01); }
.c-postnav__label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--typography-t-14r-family);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--x-txt-mute);
}
.c-postnav__text {
  display: block;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.7;
}
.c-postnav__index { flex: none; min-width: 240px; }

/* --------------------------------------------------------------------------
   ページ内リンクの着地位置
   ヘッダーが追従（PC 120px / SP 64px）するので、その分だけ手前で止める。
   これが無いと見出しがヘッダーの裏に隠れる。
   -------------------------------------------------------------------------- */
.p-under__section[id],
.p-under__block[id],
.c-under-h2[id],
.c-under-h3[id] {
  scroll-margin-top: 140px;
}

/* --------------------------------------------------------------------------
   箇条書き
   -------------------------------------------------------------------------- */
.c-under-list {
  margin-top: 18px;
  padding-left: 0;
  list-style: none;
}
.c-under-list > li {
  position: relative;
  padding-left: 20px;
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  line-height: 1.9;
  letter-spacing: .06em;
}
.c-under-list > li + li { margin-top: 6px; }

/* リンク一覧。2列に流す */
.c-linklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
  margin-top: 24px;
  padding-left: 0;
  list-style: none;
}
.c-linklist > li { border-bottom: 1px solid var(--color-t-bdr01); }
.c-linklist > li > a {
  display: block;
  position: relative;
  padding: 16px 28px 16px 0;
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  letter-spacing: .06em;
}
.c-linklist > li > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 1px solid var(--color-t-main01);
  border-right: 1px solid var(--color-t-main01);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.c-linklist > li > a:hover { opacity: 1; color: var(--color-t-main01); }
.c-linklist > li > a:hover::after { transform: translateX(3px) rotate(45deg); }

/* 症例/ブログの治療前・治療後ギャラリー */
.c-imagegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.c-imagegrid figure { margin: 0; }
.c-imagegrid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Googleマップ */
.p-under__map {
  margin-top: 48px;
  line-height: 0;
}
.p-under__map iframe {
  display: block;
  width: 100%;
  height: 420px;
}

/* 診療メニューのアイコングリッド（診療案内インデックス）。
   980幅に5列で25項目 = ちょうど5行になる。 */
.c-menugrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-left: 0;
  list-style: none;
}
.c-menugrid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 8px 16px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  text-align: center;
}
.c-menugrid__item:hover { opacity: 1; background: #0a6b62; }
.c-menugrid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-wh);
}
.c-menugrid__icon img { width: 30px; height: 30px; object-fit: contain; }
.c-menugrid__label {
  font-family: var(--typography-t-16sb-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
}

/* 表・箇条書きの下に添える注記 */
.p-under__note {
  margin-top: 14px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--x-txt-mute);
}
/* 行頭の丸。テキストの1行目の中心に合わせる */
.c-under-list > li::before {
  content: "";
  position: absolute;
  top: .78em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-t-main01);
}

/* --------------------------------------------------------------------------
   表
   -------------------------------------------------------------------------- */
.c-table-wrap { margin-top: 48px; overflow-x: auto; }
.c-table {
  width: 100%;
  background: var(--color-wh);
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  line-height: 1.8;
  letter-spacing: .04em;
}
.c-table th,
.c-table td {
  padding: 22px 24px;
  border: 1px solid var(--color-t-bdr01);
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}
.c-table thead th {
  background: var(--color-t-main01);
  border-color: var(--color-t-main01);
  color: var(--color-wh);
  text-align: center;
  font-family: var(--typography-t-16sb-family);
  font-weight: var(--typography-t-16sb-weight);
  letter-spacing: .1em;
}
/* 列幅の固定は3列（項目・説明・費用）の表だけ。
   2列（項目・内容）や曜日が並ぶ表では左列が広がりすぎるため。 */
.c-table:has(tbody tr > :nth-child(3)):not(:has(tbody tr > :nth-child(4))) tbody th { width: 33.33%; }
.c-table:has(tbody tr > :nth-child(3)):not(:has(tbody tr > :nth-child(4))) tbody td:last-child { width: 22%; }
/* 2列の表は左列を詰める */
.c-table:not(:has(tbody tr > :nth-child(3))) tbody th { width: 26%; }

/* --------------------------------------------------------------------------
   料金表（比較表・スペック表） /price/ 専用
   -------------------------------------------------------------------------- */
/* 前歯用・臼歯用の5列比較表。等幅・中央揃えにする */
.c-table--compare { table-layout: fixed; }
.c-table--compare tbody th,
.c-table--compare tbody td { text-align: center; }
.c-table--compare tbody th { background: var(--color-t-base01); font-weight: 400; }

/* 比較表の末尾行（各素材の詳細へジャンプ） */
.c-price-more { justify-content: center; }

/* スペック表（美しさ・耐久性など）の★評価 */
.c-star {
  font-size: 18px;
  letter-spacing: .12em;
  color: var(--color-t-ac02);
}
.c-star__note {
  margin-left: 8px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--x-txt-mute);
}

/* スペック表内の長所・短所リスト */
.c-pricelist {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.c-pricelist > li + li { margin-top: 6px; }
.c-pricelist__mark { margin-right: 6px; font-weight: 600; }
.c-pricelist__mark--pro { color: var(--color-t-ac02); }
.c-pricelist__mark--con { color: var(--x-txt-mute); }

/* --------------------------------------------------------------------------
   よくある質問
   -------------------------------------------------------------------------- */
.c-faq { margin-top: 48px; }
.c-faq__item {
  padding: 30px 36px 34px;
  border: 1px solid var(--color-t-bdr01);
  background: var(--color-wh);
}
.c-faq__item + .c-faq__item { margin-top: 24px; }
/* Q / A の丸は ::before で描く。
   マークアップは「見出し（質問）＋段落（回答）」だけなので、
   ブロックエディターでそのまま編集・追加できる。 */
.c-faq__q,
.c-faq__a {
  position: relative;
  min-height: 40px;
  padding-left: 58px;
}
.c-faq__q::before,
.c-faq__a::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--typography-t-16sb-family);
  font-size: 17px;
  font-weight: var(--typography-t-16sb-weight);
  line-height: 1;
}
.c-faq__q::before {
  content: "Q";
  background: var(--color-t-main01);
  color: var(--color-wh);
}
.c-faq__a::before {
  content: "A";
  border: 1px solid var(--color-t-main01);
  color: var(--color-t-main01);
}
.c-faq__q {
  padding-top: 7px;
  font-family: var(--typography-t-18sb-family);
  font-size: var(--typography-t-18sb-size);
  font-weight: var(--typography-t-18sb-weight);
  line-height: 1.6;
  letter-spacing: .08em;
}
.c-faq__a {
  margin-top: 16px;
  padding-top: 7px;
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  line-height: 1.9;
  letter-spacing: .04em;
}
/* 回答の下に続くリンクはマークの分だけ字下げを揃える */
.c-faq__item .p-under__more { padding-left: 58px; }

/* ==========================================================================
   SP（767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {

  :root {
    --x-under-container: 358px;
    --x-under-figure: 358px;
  }

  .c-under-list > li { padding-left: 18px; font-size: 14px; line-height: 1.8; }
  .p-archive { padding: 44px 0 56px; }
  .c-catnav { gap: 8px; margin-bottom: 30px; }
  .c-catnav__item { padding: 7px 14px; font-size: 12px; }
  .p-archive__grid { grid-template-columns: 1fr; gap: 26px; }
  .p-archive__body { padding: 14px 2px 0; }
  .p-archive__title { font-size: 14px; }
  .p-archive__row-link { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 2px; }
  .p-archive__row-link .c-arrow { display: none; }
  .c-pager { margin-top: 40px; gap: 6px; }
  .c-pager .page-numbers { min-width: 38px; height: 38px; padding: 0 8px; font-size: 13px; }

  .p-single { padding: 40px 0 0; }
  .p-single__title { font-size: 21px; }
  .p-single__head { padding-bottom: 24px; }
  .c-postnav { flex-direction: column; gap: 16px; margin: 40px 0 60px; padding-top: 28px; }
  .c-postnav__side, .c-postnav__side--right { width: 100%; text-align: left; }
  .c-postnav__index { width: 100%; min-width: 0; order: 3; }

  .p-under__section[id],
  .p-under__block[id],
  .c-under-h2[id],
  .c-under-h3[id] { scroll-margin-top: 84px; }
  .c-menugrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .c-menugrid__item { padding: 16px 6px 14px; }
  .c-menugrid__icon { width: 40px; height: 40px; }
  .c-menugrid__icon img { width: 24px; height: 24px; }
  .c-menugrid__label { font-size: 12px; }
  .p-under__note { font-size: 12px; }
  .p-under__map { margin-top: 32px; }
  .c-imagegrid { grid-template-columns: repeat(2, 1fr); }
  .p-under__map iframe { height: 260px; }
  .c-linklist { grid-template-columns: 1fr; gap: 0; }
  .c-linklist > li > a { padding: 14px 24px 14px 0; font-size: 14px; }

  .l-under-container { width: auto; margin-inline: 16px; }

  /* ページタイトル部 */
  .p-pagehead { height: 200px; }
  .p-pagehead__box {
    width: 240px;
    height: 104px;
    gap: 2px;
  }
  .p-pagehead__title { font-size: 24px; letter-spacing: .12em; }
  .p-pagehead__en { font-size: 12px; letter-spacing: .18em; }

  .c-breadcrumb { padding: 18px 0 0; }
  .c-breadcrumb__list { gap: 8px; font-size: 12px; }
  .c-breadcrumb__item + .c-breadcrumb__item::before { margin-right: 8px; }

  /* 本文 */
  .p-under { padding-bottom: 56px; }
  .p-under__intro { padding: 34px 0 0; }
  .p-under__toc-wrap { padding: 40px 0 48px; }
  .p-under__section { padding: 48px 0; }
  .p-under__block + .p-under__block { margin-top: 44px; }

  .c-under-h2 { padding-bottom: 14px; font-size: 22px; letter-spacing: .06em; }
  .c-under-h2::after { width: 88px; }
  .c-under-h2 + * { margin-top: 28px; }

  .c-under-h3 { gap: 10px; font-size: 19px; letter-spacing: .04em; }
  .c-under-h3::before { width: 3px; }
  .c-under-h3 + * { margin-top: 18px; }
  .c-under-h3--sm { font-size: 17px; }

  .p-under__lead { margin-top: 26px; }
  .p-under__lead,
  .p-under__text { font-size: 14px; line-height: 1.9; }
  .p-under__text + .p-under__text { margin-top: 18px; }

  .p-under__figure,
  .p-under__figure--square,
  .p-under__figure--full { width: 100%; }
  .p-under__figure + .p-under__text { margin-top: 22px; }

  /* 目次 */
  .c-toc { padding: 26px 20px 30px; }
  .c-toc__title { font-size: 18px; }
  .c-toc__list { margin-top: 16px; }
  .c-toc a { font-size: 14px; line-height: 1.8; }
  .c-toc__list > li > a,
  .c-toc__item > .c-toc__link { padding-left: 18px; }
  .c-toc__sub { padding-left: 20px; }

  /* 進行段階 */
  .c-steps { margin-top: 28px; }
  .c-steps__item { padding: 20px 18px 24px; }
  .c-steps__item + .c-steps__item { margin-top: 26px; }
  .c-steps__item + .c-steps__item::before { top: -27px; height: 26px; }

  /* 表：SPは横スクロールさせる（3列を潰すと読めないため） */
  .c-table-wrap { margin-top: 28px; }
  .c-table { min-width: 560px; font-size: 13px; }
  .c-table th,
  .c-table td { padding: 14px 14px; }

  /* 料金表の比較表は5列あるので横幅を確保してスクロールさせる */
  .c-table--compare { min-width: 760px; }
  .c-star { font-size: 15px; }
  .c-star__note { display: block; margin-left: 0; margin-top: 4px; }

  /* よくある質問 */
  .c-faq { margin-top: 28px; }
  .c-faq__item { padding: 20px 18px 24px; }
  .c-faq__item + .c-faq__item { margin-top: 16px; }
  .c-faq__q,
  .c-faq__a { min-height: 32px; padding-left: 44px; }
  .c-faq__q::before,
  .c-faq__a::before { width: 32px; height: 32px; font-size: 15px; }
  .c-faq__q { padding-top: 5px; font-size: 16px; letter-spacing: .04em; }
  .c-faq__a { margin-top: 12px; padding-top: 5px; font-size: 14px; }
  .c-faq__item .p-under__more { padding-left: 44px; }

  .c-textlink { font-size: 14px; }
}

/* ==========================================================================
   ブロックエディター出力の調整
   ブロックは figure / div をそのまま出すので、テーマ側の余白と衝突しないよう
   最小限だけ打ち消す。
   ========================================================================== */
.p-under .wp-block-group,
.p-under .wp-block-image { margin-block: 0; }
.p-under .wp-block-image figcaption { display: none; }
.p-under .wp-block-table { margin-block: 0; }
.p-under .wp-block-table table { border-collapse: collapse; }
/* 見出し直後の要素の余白は c-under-h2 / h3 側の指定に任せる */
.p-under .wp-block-heading { margin-block: 0; }