@charset "UTF-8";
/* Shared styles for child pages. Keep page-specific rules under their component prefixes. */

html {
  scroll-behavior: smooth;
}

body.site-page--article {
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   1. デザイントークン
   コラムページを基準とする全下層ページ共通値。
   ========================================================================== */

.site {
  /* --- 配色 --------------------------------------------------------------- */
  --site-navy: #0f2a5a;
  --site-navy-dark: #0a1f45;
  --site-navy-light: #1c4a8f;
  --site-navy-tint: #eef2f8;
  --site-navy-tint-strong: #dbe4f1;

  --site-orange: #f57c20;
  --site-orange-dark: #dd6710;
  --site-strong-marker: linear-gradient(transparent 62%, rgba(245, 124, 32, 0.28) 62%);
  --site-orange-tint: #fff3e8;

  --site-text: #333333;
  --site-text-strong: #1a1a1a;
  --site-text-muted: #6b7280;
  --site-white: #ffffff;
  --site-bg: #ffffff;
  --site-bg-gray: #f8f8f8;
  --site-border: #dcdfe5;

  /* --- タイポグラフィ ----------------------------------------------------- */
  --site-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
             "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --site-font-mono: "SFMono-Regular", Consolas, "Courier New", monospace;

  --site-fz-base: 16px;
  --site-lh-base: 1.9;
  --site-fz-h1: 30px;
  --site-fz-h2: 24px;
  --site-fz-h3: 20px;
  --site-lh-heading: 1.55;

  /* --- 余白スケール（4px 基準） ------------------------------------------- */
  --site-sp-1: 4px;
  --site-sp-2: 8px;
  --site-sp-3: 12px;
  --site-sp-4: 16px;
  --site-sp-5: 24px;
  --site-sp-6: 32px;
  --site-sp-7: 48px;
  --site-sp-8: 64px;

  /* --- 寸法 --------------------------------------------------------------- */
  --site-wrap: 1120px;
  --site-content: 720px;
  --site-gutter: 24px;
  --site-radius: 6px;
  --site-radius-lg: 10px;
  --site-radius-button: 8px;
  --site-radius-cta: var(--site-radius-lg);
  --site-cta-padding-block: var(--site-sp-7);
  --site-cta-padding-inline: var(--site-sp-5);
  --site-shadow: 0 2px 8px rgba(15, 42, 90, 0.08);
  --site-shadow-btn: 0 3px 0 var(--site-orange-dark);
  --site-header-h: 80px;
  --site-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='none' stroke='%230f2a5a' stroke-width='1.6'/%3E%3Cpath d='M9.2 7.4c.5 0 1 .3 1.2.8l.8 1.9c.2.5.1 1-.3 1.3l-.8.6c.7 1.4 1.8 2.5 3.2 3.2l.6-.8c.3-.4.8-.5 1.3-.3l1.9.8c.5.2.8.7.8 1.2v1.8c0 .6-.5 1.1-1.1 1.1-5.1-.3-9.2-4.4-9.5-9.5 0-.6.5-1.1 1.1-1.1z' fill='%230f2a5a'/%3E%3C/svg%3E");
}


/* ==========================================================================
   2. スコープ内リセット
   .site の内側だけに効くリセット。グローバルには一切影響しない。
   ========================================================================== */

.site {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--site-text);
  font-family: var(--site-font);
  font-size: var(--site-fz-base);
  line-height: var(--site-lh-base);
  background: var(--site-bg);
  /* 子要素のはみ出しによる横スクロールを .site 内で抑える */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.site *,
.site *::before,
.site *::after {
  box-sizing: inherit;
}

.site h1,
.site h2,
.site h3,
.site h4,
.site h5,
.site h6,
.site p,
.site ul,
.site ol,
.site dl,
.site dd,
.site figure,
.site blockquote,
.site pre,
.site table {
  margin: 0;
  padding: 0;
}

.site ul,
.site ol {
  list-style: none;
}

.site img,
.site svg,
.site video,
.site iframe {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

.site a {
  color: var(--site-navy);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, opacity 0.2s ease;
}

.site a:hover,
.site a:focus-visible {
  color: var(--site-orange);
}

.site button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

.site table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 長い固有名詞の羅列や URL でレイアウトが崩れないようにする */
.site p,
.site li,
.site td,
.site th,
.site dd,
.site dt,
.site h1,
.site h2,
.site h3,
.site h4 {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

/* キーボード操作時のフォーカス可視化 */
.site a:focus-visible,
.site button:focus-visible,
.site summary:focus-visible {
  outline: 2px solid var(--site-orange);
  outline-offset: 2px;
}


/* ==========================================================================
   3. 共通レイアウト
   ========================================================================== */

/* ヘッダー・フッター内の横幅制御 */
.site-container {
  width: 100%;
  max-width: var(--site-wrap);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* 本文カラム（1 カラム） */
:where(.site) .cp-container {
  width: 100%;
  max-width: calc(var(--site-content) + var(--site-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

:where(.site) .cp-main {
  display: block;
  padding-bottom: var(--site-sp-8);
}

@media (max-width: 1024px) {
  .site {
    --site-gutter: 20px;
  }
}

@media (max-width: 767px) {
  .site {
    --site-gutter: 16px;
    --site-fz-base: 15px;
    --site-fz-h1: 22px;
    --site-fz-h2: 19px;
    --site-fz-h3: 17px;
    --site-header-h: 60px;
  }

  /* 追従 CTA の高さぶん、本文下に余白を確保する */
  :where(.site) .cp-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}


/* ==========================================================================
   4. 共通ヘッダー
   コラムページを基準とする共通ヘッダー。
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--site-navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
              0 2px 10px rgba(0, 0, 0, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-sp-4);
  min-height: var(--site-header-h);
}

/* --- ロゴ ----------------------------------------------------------------- */

.site-header__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  line-height: 1.3;
  text-decoration: none;
}

.site-header__logo:hover {
  opacity: 0.85;
}

.site-header__logo img {
  display: block;
  height: 36px;
  width: auto;
}

/* --- ヘッダー右側 --------------------------------------------------------- */
/* 中身は共通の .site-btn-tel / .site-btn-cta（6-1）を使う */

.site-header__actions {
  display: flex;
  align-items: stretch;
  gap: var(--site-sp-3);
  padding-block: 10px;
}

/* --- タブレット ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .site-header__actions {
    gap: var(--site-sp-2);
  }

  .site-header__logo img {
    height: 30px;
  }
}

/* --- スマホ --------------------------------------------------------------- */

@media (max-width: 767px) {
  .site-header__inner {
    gap: var(--site-sp-2);
  }

  .site-header__logo img {
    height: 24px;
  }

  /* CTA は追従 CTA 側に集約するため、ヘッダーからは省略する */
  .site-header__actions {
    display: none;
  }
}


/* ==========================================================================
   5. 共通フッター
   ========================================================================== */

.site-footer {
  padding: var(--site-sp-7) 0 var(--site-sp-5);
  color: rgba(255, 255, 255, 0.85);
  background: var(--site-navy-dark);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--site-white);
  text-decoration: underline;
}

.site-footer__logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.site-footer__logo img {
  display: block;
  width: auto;
  height: 36px;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-sp-3) var(--site-sp-5);
  margin-top: var(--site-sp-4);
  font-size: 14px;
}

/* .site を重ねて詳細度を上げる（".site p" というタグ込みリセットに
   margin/padding が負けてしまうため） */
.site .site-footer__copyright {
  margin-top: var(--site-sp-6);
  padding-top: var(--site-sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
  .site-footer {
    padding: var(--site-sp-6) 0 var(--site-sp-5);
  }

  .site-footer__nav {
    gap: var(--site-sp-2) var(--site-sp-4);
    font-size: 13px;
  }
}


/* ==========================================================================
   6. 共通コンポーネント
   ========================================================================== */

/* --------------------------------------------------------------------------
   6-1. ボタン
   現行サイトの 2 種のボタンを踏襲する。
     .site-btn-tel  … 白地・角丸。電話アイコン + 電話番号 + 受付時間
     .site-btn-cta  … オレンジ地・角丸。封筒アイコン + 2 行テキスト + 丸矢印
   アイコンは data URI の SVG を疑似要素の背景に敷く方式とし、
   HTML 側はテキストだけで済むようにする（CMS 入稿しやすさを優先）。
   スマホでは文字サイズと余白を縮める（transform: scale は使わず、
   タップ領域は 44px 以上を確保する）。
   -------------------------------------------------------------------------- */

/* --- 電話ボタン（白地） --------------------------------------------------- */

.site-btn-tel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 64px;
  padding: 8px 24px 8px 62px;
  color: var(--site-navy);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background: var(--site-white);
  border-radius: var(--site-radius-button);
}

/* 電話アイコン（丸枠 + 受話器） */
.site-btn-tel::before {
  position: absolute;
  top: 50%;
  left: 22px;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  background-image: var(--site-phone-icon);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

/* ".site a" のグローバルリセット（color: navy）はボタンより詳細度が高いため、
   type + class の組み合わせで詳細度を上げて明示的に打ち消す。
   hover / focus でも色味は変えない。 */
.site a.site-btn-tel,
.site a.site-btn-tel:hover,
.site a.site-btn-tel:focus-visible {
  color: var(--site-navy);
}

.site-btn-tel__num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}

.site-btn-tel__note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--site-navy);
}

/* --- フォームボタン（オレンジ地） ----------------------------------------- */

.site-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 64px;
  padding: 8px 52px 8px 56px;
  color: var(--site-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  background: var(--site-orange);
  border-radius: var(--site-radius-button);
}

/* 封筒アイコン */
.site-btn-cta::before {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 26px;
  height: 20px;
  margin-top: -10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Crect x='.8' y='.8' width='24.4' height='18.4' rx='1.6' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M1.6 2.2 13 11 24.4 2.2' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

/* 右端の丸矢印 */
.site-btn-cta::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3Cpath d='M9.4 7.2 13.2 11l-3.8 3.8' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

/* ".site a" のグローバルリセット（color: navy）はボタンより詳細度が高いため、
   type + class の組み合わせで詳細度を上げて明示的に打ち消す。
   hover / focus でも色味は変えない。 */
.site a.site-btn-cta,
.site a.site-btn-cta:hover,
.site a.site-btn-cta:focus-visible {
  color: var(--site-white);
}

/* 記事内 CTA など、幅いっぱいに使うバリエーション */
.site-btn-cta--block,
.site-btn-tel--block {
  width: 100%;
}

@media (max-width: 1024px) {
  .site-btn-tel {
    min-height: 58px;
    padding: 8px 18px 8px 54px;
  }

  .site-btn-tel::before {
    left: 18px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }

  .site-btn-tel__num {
    font-size: 22px;
  }

  .site-btn-cta {
    min-height: 58px;
    padding: 8px 46px 8px 48px;
    font-size: 14px;
  }

  .site-btn-cta::before {
    left: 16px;
    width: 22px;
    height: 17px;
    margin-top: -8.5px;
  }

  .site-btn-cta::after {
    right: 14px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
  }
}

@media (max-width: 767px) {
  .site-btn-tel {
    min-height: 50px;
    padding: 6px 12px 6px 42px;
    border-radius: 6px;
  }

  .site-btn-tel::before {
    left: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
  }

  .site-btn-tel__num {
    font-size: 18px;
  }

  .site-btn-tel__note {
    font-size: 9px;
  }

  .site-btn-cta {
    min-height: 50px;
    padding: 6px 34px 6px 38px;
    font-size: 13px;
    border-radius: 6px;
  }

  .site-btn-cta::before {
    left: 12px;
    width: 19px;
    height: 15px;
    margin-top: -7.5px;
  }

  .site-btn-cta::after {
    right: 10px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
  }
}

/* --------------------------------------------------------------------------
   6-2. パンくず
   -------------------------------------------------------------------------- */

.site-breadcrumb {
  padding: var(--site-sp-3) 0;
  font-size: 12px;
  color: var(--site-text-muted);
  background: var(--site-white);
}

:where(.site) .cp-breadcrumb {
  border-bottom: 1px solid var(--site-border);
}

.site-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-sp-1) var(--site-sp-2);
}

.site-breadcrumb__list li {
  display: flex;
  align-items: center;
}

/* 区切り記号 */
.site-breadcrumb__list li + li::before {
  margin-right: var(--site-sp-2);
  color: var(--site-border);
  content: "\203A"; /* › */
}

.site-breadcrumb a {
  color: var(--site-text-muted);
  text-decoration: none;
}

.site-breadcrumb a:hover,
.site-breadcrumb a:focus-visible {
  color: var(--site-orange);
  text-decoration: underline;
}

.site-breadcrumb__current {
  color: var(--site-text);
  font-weight: 500;
}

@media (max-width: 767px) {
  .site-breadcrumb {
    font-size: 11px;
  }

  /* スマホでは現在ページ名が長いため、1 行に省略せず折り返す */
  .site-breadcrumb__current {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   6-3. CTA ボックス
   参考記事の CTA①〜⑪で使用する。記事本文中にも設置できる。
   -------------------------------------------------------------------------- */

:where(.site) .site-editor .site-editor-cta {
  margin: var(--site-sp-7) 0;
  padding: var(--site-cta-padding-block) var(--site-cta-padding-inline);
  color: var(--site-white);
  text-align: center;
  background: linear-gradient(160deg, var(--site-navy) 0%, var(--site-navy-dark) 100%);
  border-radius: var(--site-radius-cta);
  box-shadow: var(--site-shadow);
}

/* 小見出し（「簡単1分」などのラベル） */
:where(.site) .site-editor .site-editor-cta__label {
  display: inline-block;
  margin-bottom: var(--site-sp-3);
  padding: 3px 14px;
  color: var(--site-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--site-white);
  border-radius: 999px;
}

/* CTA 見出し。記事本文内では h3 として入稿されるため、
   :where(.site) .site-editor 側の h3 スタイルを打ち消して白抜きにする。 */
:where(.site) .site-editor .site-editor-cta__title,
:where(.site) .site-editor .site-editor-cta h2,
:where(.site) .site-editor .site-editor-cta h3,
:where(.site) .site-editor .site-editor-cta h4 {
  margin: 0 0 var(--site-sp-3);
  padding: 0;
  color: var(--site-white);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
}

:where(.site) .site-editor .site-editor-cta__title::before,
:where(.site) .site-editor .site-editor-cta__title::after,
:where(.site) .site-editor .site-editor-cta h2::before,
:where(.site) .site-editor .site-editor-cta h2::after,
:where(.site) .site-editor .site-editor-cta h3::before,
:where(.site) .site-editor .site-editor-cta h3::after {
  display: none;
}

/* CTA 説明文 */
:where(.site) .site-editor .site-editor-cta__text,
:where(.site) .site-editor .site-editor-cta p {
  margin: 0 auto var(--site-sp-5);
  max-width: 34em;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

/* ボタン並び。記事内は横幅を広く取り、PC でも縦に並べる */
:where(.site) .site-editor .site-editor-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--site-sp-3);
  max-width: 460px;
  margin-inline: auto;
}

/* 縦並びのため、ボタンは常に幅いっぱい */
:where(.site) .site-editor .site-editor-cta__actions > * {
  width: 100%;
  color: var(--site-white);
}

:where(.site) .site-editor .site-editor-cta__actions .site-btn-tel__num {
  color: var(--site-white);
  -webkit-text-fill-color: var(--site-white) !important;
}

/* CTA 内のボタンはリンク色の影響を受けないよう明示する */
:where(.site) .site-editor .site-editor-cta a {
  text-decoration: none;
}

/* 注記は説明文と違い中央寄せにするため、詳細度を揃えて上書きする */
:where(.site) .site-editor .site-editor-cta__note,
:where(.site) .site-editor .site-editor-cta .site-editor-cta__note {
  max-width: none;
  margin: var(--site-sp-4) 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

@media (max-width: 767px) {
  :where(.site) .site-editor .site-editor-cta {
    margin: var(--site-sp-6) 0;
    padding: var(--site-cta-padding-block) var(--site-cta-padding-inline);
    border-radius: var(--site-radius-cta);
  }

  :where(.site) .site-editor .site-editor-cta__title,
  :where(.site) .site-editor .site-editor-cta h2,
  :where(.site) .site-editor .site-editor-cta h3,
  :where(.site) .site-editor .site-editor-cta h4 {
    font-size: 18px;
  }

  :where(.site) .site-editor .site-editor-cta__text,
  :where(.site) .site-editor .site-editor-cta p {
    font-size: 13px;
  }

  :where(.site) .site-editor .site-editor-cta__actions {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   6-4. 注記・警告ボックス
   -------------------------------------------------------------------------- */

/* 注記（ただし〜、確認しましょう など） */
:where(.site) .site-editor .site-editor-note {
  position: relative;
  margin: var(--site-sp-5) 0;
  padding: var(--site-sp-4) var(--site-sp-5);
  font-size: 15px;
  background: var(--site-navy-tint);
  border-left: 4px solid var(--site-navy);
  border-radius: 0 var(--site-radius) var(--site-radius) 0;
}

:where(.site) .site-editor .site-editor-note__title {
  display: block;
  margin-bottom: var(--site-sp-1);
  color: var(--site-navy);
  font-size: 15px;
  font-weight: 700;
}

/* 警告（督促状・競売など、急ぎの案内） */
:where(.site) .site-editor .site-editor-alert {
  position: relative;
  margin: var(--site-sp-5) 0;
  padding: var(--site-sp-4) var(--site-sp-5);
  font-size: 15px;
  background: var(--site-orange-tint);
  border-radius: var(--site-radius);
}

:where(.site) .site-editor .site-editor-alert__title {
  display: block;
  margin-bottom: var(--site-sp-1);
  color: var(--site-orange-dark);
  font-size: 15px;
  font-weight: 700;
}

/* ボックス内の段落は余白を詰める */
:where(.site) .site-editor .site-editor-note p,
:where(.site) .site-editor .site-editor-alert p,
:where(.site) .site-editor .site-editor-note p,
:where(.site) .site-editor .site-editor-alert p {
  margin: 0;
}

:where(.site) .site-editor .site-editor-note p + p,
:where(.site) .site-editor .site-editor-alert p + p,
:where(.site) .site-editor .site-editor-note p + p,
:where(.site) .site-editor .site-editor-alert p + p {
  margin-top: var(--site-sp-3);
}

@media (max-width: 767px) {
  :where(.site) .site-editor .site-editor-note,
  :where(.site) .site-editor .site-editor-alert {
    padding: var(--site-sp-3) var(--site-sp-4);
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   6-5. スマホ追従 CTA
   767px 以下でのみ表示する。
   中身はヘッダーと同じ .site-btn-tel / .site-btn-cta を横並びで使う。
   -------------------------------------------------------------------------- */

:where(.site) .cp-fixed-cta {
  display: none;
}

@media (max-width: 767px) {
  :where(.site) .cp-fixed-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--site-navy);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
  }

  /* 2 つのボタンで幅を分け合い、アイコン + テキスト 1 行で表示する
     （ヘッダー・記事内の .site-btn-tel / .site-btn-cta とはレイアウトが異なるため、
     アイコンの絶対配置・電話番号・2 行組みなど個別パーツを打ち消して上書きする） */
  :where(.site) .cp-fixed-cta > .site-btn-tel,
  :where(.site) .cp-fixed-cta > .site-btn-cta {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }

  /* アイコンは絶対配置をやめ、テキストと並ぶ通常のフレックスアイテムにする */
  :where(.site) .cp-fixed-cta > .site-btn-tel::before,
  :where(.site) .cp-fixed-cta > .site-btn-cta::before,
  :where(.site) .cp-fixed-cta > .site-btn-cta::after {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    flex-shrink: 0;
  }

  :where(.site) .cp-fixed-cta > .site-btn-tel::before {
    width: 18px;
    height: 18px;
  }

  :where(.site) .cp-fixed-cta > .site-btn-cta::before {
    width: 18px;
    height: 14px;
  }

  :where(.site) .cp-fixed-cta > .site-btn-cta::after {
    width: 16px;
    height: 16px;
  }

  :where(.site) .cp-fixed-cta > .site-btn-cta {
    color: var(--site-white);
  }
}


/* ==========================================================================
   7. 記事詳細ページ
   ========================================================================== */

:where(.site) .cp-article {
  margin-top: var(--site-sp-6);
  padding: var(--site-sp-7) var(--site-sp-7) var(--site-sp-8);
}

@media (max-width: 1024px) {
  :where(.site) .cp-article {
    padding: var(--site-sp-6) var(--site-sp-5) var(--site-sp-7);
  }
}

@media (max-width: 767px) {
  :where(.site) .cp-article {
    margin-top: var(--site-sp-4);
    /* スマホでは画面幅いっぱいに使い、内側の余白だけで読ませる */
    margin-inline: calc(var(--site-gutter) * -1);
    padding: var(--site-sp-5) var(--site-gutter) var(--site-sp-6);
  }
}

/* --------------------------------------------------------------------------
   7-1. 記事ヘッダー
   -------------------------------------------------------------------------- */

/* 記事タイトル（h1） */
:where(.site) .cp-article-header__title {
  color: var(--site-navy);
  font-size: var(--site-fz-h1);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* 日付 */
:where(.site) .cp-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-sp-2) var(--site-sp-4);
  margin-top: var(--site-sp-4);
  font-size: 13px;
  color: var(--site-text-muted);
}

/* アイキャッチ */
:where(.site) .cp-article-header__thumb {
  margin-top: var(--site-sp-5);
}

:where(.site) .cp-article-header__thumb img {
  width: 100%;
  border-radius: var(--site-radius);
}

@media (max-width: 767px) {
  :where(.site) .cp-article-header__title {
    font-size: var(--site-fz-h1);
    line-height: 1.45;
  }

  :where(.site) .cp-article-header__meta {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   7-2. 目次
   -------------------------------------------------------------------------- */

:where(.site) .cp-toc {
  margin: var(--site-sp-6) 0;
  padding: var(--site-sp-5);
  background: #f8f8f8;
  border-radius: var(--site-radius);
}

/* .site を重ねて詳細度を上げる（".site p" というタグ込みリセットに
   margin/padding が負けてしまうため。単独クラスのままだと
   詳細度で reset に劣後する） */
.site .cp-toc__title {
  margin-bottom: var(--site-sp-3);
  color: var(--site-navy);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

:where(.site) .cp-toc__list {
  counter-reset: cp-toc;
  font-size: 15px;
}

:where(.site) .cp-toc__list > li {
  counter-increment: cp-toc;
  padding-left: 2em;
  position: relative;
}

:where(.site) .cp-toc__list > li + li {
  margin-top: var(--site-sp-2);
  padding-top: var(--site-sp-2);
}

:where(.site) .cp-toc__list > li::before {
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 1.6em;
  height: 1.6em;
  color: var(--site-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6em;
  text-align: center;
  background: var(--site-navy);
  border-radius: 50%;
  content: counter(cp-toc);
}

:where(.site) .cp-toc__list > li + li::before {
  top: calc(0.45em + var(--site-sp-2));
}

:where(.site) .cp-toc a {
  color: var(--site-text);
  text-decoration: none;
}

:where(.site) .cp-toc a:hover,
:where(.site) .cp-toc a:focus-visible {
  color: var(--site-orange);
  text-decoration: underline;
}

@media (max-width: 767px) {
  :where(.site) .cp-toc {
    padding: var(--site-sp-4);
  }

  :where(.site) .cp-toc__list {
    font-size: 14px;
  }
}

/* 見出しへのアンカー移動時、sticky ヘッダーに隠れないようにする */
:where(.site) .site-editor h2,
:where(.site) .site-editor h3 {
  scroll-margin-top: calc(var(--site-header-h) + 16px);
}

/* --------------------------------------------------------------------------
   7-3. 全ページ共通のエディタ本文 タグスタイル

   ここから下は必ず :where(.site) .site-editor を親に持つ。
   CMS のリッチテキストエディターはクラスを付けずにタグを出力するため、
   タグセレクタで受けるが、スコープは :where(.site) .site-editor 配下に限定する。
   -------------------------------------------------------------------------- */

:where(.site) .site-editor {
  font-size: var(--site-fz-base);
  line-height: var(--site-lh-base);
}

/* --- 見出し --------------------------------------------------------------- */

/* h2：左のネイビー太線（h3 と同系のデザイン。太さと文字サイズで階層を表す） */
:where(.site) .site-editor h2 {
  position: relative;
  margin: var(--site-sp-8) 0 var(--site-sp-5);
  padding: 4px 0;
  color: var(--site-navy);
  font-size: var(--site-fz-h2);
  font-weight: 700;
  line-height: var(--site-lh-heading);
  border-bottom: 4px solid var(--site-navy);
}

/* 記事本文の先頭が h2 の場合は上余白を詰める */
:where(.site) .site-editor > h2:first-child {
  margin-top: 0;
}

/* h3：左のネイビー太線 */
:where(.site) .site-editor h3 {
  position: relative;
  margin: var(--site-sp-7) 0 var(--site-sp-4);
  padding: 2px 0 2px var(--site-sp-4);
  color: var(--site-navy);
  font-size: var(--site-fz-h3);
  font-weight: 700;
  line-height: 1.6;
  border-left: 5px solid var(--site-orange);
}

/* h4：下罫線付きの太字 */
:where(.site) .site-editor h4 {
  margin: var(--site-sp-6) 0 var(--site-sp-3);
  padding-bottom: var(--site-sp-2);
  color: var(--site-navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  border-bottom: 1px dashed var(--site-border);
}

/* h5 / h6：装飾は最小限 */
:where(.site) .site-editor h5,
:where(.site) .site-editor h6 {
  margin: var(--site-sp-5) 0 var(--site-sp-2);
  color: var(--site-text-strong);
  font-size: 16px;
  font-weight: 700;
}

/* 見出し直後の要素は上余白を打ち消す */
:where(.site) .site-editor h2 + *,
:where(.site) .site-editor h3 + *,
:where(.site) .site-editor h4 + * {
  margin-top: 0;
}

@media (max-width: 767px) {
  :where(.site) .site-editor h2 {
    margin: var(--site-sp-7) 0 var(--site-sp-4);
    font-size: var(--site-fz-h2);
    line-height: 1.5;
    border-bottom-width: 4px;
  }

  :where(.site) .site-editor h3 {
    margin: var(--site-sp-6) 0 var(--site-sp-3);
    padding-left: var(--site-sp-3);
    font-size: var(--site-fz-h3);
    border-left-width: 4px;
  }

  :where(.site) .site-editor h4 {
    font-size: 16px;
  }
}

/* --- 段落・インライン ----------------------------------------------------- */

:where(.site) .site-editor p {
  margin: var(--site-sp-4) 0;
}

:where(.site) .site-editor > p:first-child {
  margin-top: 0;
}

/* 強調：ネイビー太字 + オレンジのマーカー */
:where(.site) .site-editor strong,
:where(.site) .site-editor b {
  font-weight: 700;
  color: var(--site-navy);
  background: var(--site-strong-marker);
}

/* マーカーを引かない強調（任意クラス） */
:where(.site) .site-editor strong.cp-plain {
  background: none;
}

:where(.site) .site-editor em {
  font-style: normal;
  font-weight: 700;
  color: var(--site-orange-dark);
}

:where(.site) .site-editor mark {
  padding: 0 2px;
  color: var(--site-text-strong);
  background: rgba(245, 124, 32, 0.25);
}

:where(.site) .site-editor small {
  font-size: 13px;
  color: var(--site-text-muted);
}

:where(.site) .site-editor sup,
:where(.site) .site-editor sub {
  font-size: 11px;
}

/* 本文中リンク */
:where(.site) .site-editor a {
  color: var(--site-navy);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

:where(.site) .site-editor a:hover,
:where(.site) .site-editor a:focus-visible {
  color: var(--site-orange);
}

/* .site-btn-tel / .site-btn-cta は本文中リンクの色指定より優先させる。
   記事内 CTA（.site-editor-cta 配下）に置かれても、ボタン本来の配色・
   hover なしの挙動を保つ。 */
:where(.site) .site-editor .site-btn-tel,
:where(.site) .site-editor .site-btn-tel:hover,
:where(.site) .site-editor .site-btn-tel:focus-visible {
  color: var(--site-navy);
  text-decoration: none;
}

:where(.site) .site-editor .site-btn-cta,
:where(.site) .site-editor .site-btn-cta:hover,
:where(.site) .site-editor .site-btn-cta:focus-visible {
  color: var(--site-white);
  text-decoration: none;
}

/* --- リスト --------------------------------------------------------------- */

/* ul：ネイビーの丸ポチ */
:where(.site) .site-editor ul {
  margin: var(--site-sp-4) 0;
  padding: var(--site-sp-4) var(--site-sp-5);
  background: var(--site-bg-gray);
  border-radius: var(--site-radius);
}

:where(.site) .site-editor ul > li {
  position: relative;
  padding-left: 1.2em;
}

:where(.site) .site-editor ul > li + li {
  margin-top: var(--site-sp-2);
}

:where(.site) .site-editor ul > li::before {
  position: absolute;
  top: 0.72em;
  left: 0.1em;
  width: 7px;
  height: 7px;
  background: var(--site-navy);
  border-radius: 50%;
  content: "";
}

/* ol：ネイビーの連番バッジ */
:where(.site) .site-editor ol {
  margin: var(--site-sp-4) 0;
  padding: var(--site-sp-4) var(--site-sp-5);
  background: var(--site-bg-gray);
  border-radius: var(--site-radius);
  counter-reset: site-editor-ol;
}

:where(.site) .site-editor ol > li {
  position: relative;
  padding-left: 2.1em;
  counter-increment: site-editor-ol;
}

:where(.site) .site-editor ol > li + li {
  margin-top: var(--site-sp-3);
}

:where(.site) .site-editor ol > li::before {
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 1.65em;
  height: 1.65em;
  color: var(--site-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65em;
  text-align: center;
  background: var(--site-navy);
  border-radius: 50%;
  content: counter(site-editor-ol);
}

/* 入れ子リスト：背景を重ねず、余白のみで階層を示す */
:where(.site) .site-editor li > ul,
:where(.site) .site-editor li > ol {
  margin: var(--site-sp-2) 0 0;
  padding: 0 0 0 var(--site-sp-2);
  background: none;
  border-radius: 0;
}

:where(.site) .site-editor li > ul > li::before {
  width: 5px;
  height: 5px;
  background: var(--site-text-muted);
}

/* 定義リスト */
:where(.site) .site-editor dl {
  margin: var(--site-sp-4) 0;
}

:where(.site) .site-editor dt {
  margin-top: var(--site-sp-3);
  color: var(--site-navy);
  font-weight: 700;
}

:where(.site) .site-editor dd {
  margin-left: 0;
  padding-left: var(--site-sp-4);
  border-left: 2px solid var(--site-navy-tint-strong);
}

@media (max-width: 767px) {
  :where(.site) .site-editor ul,
  :where(.site) .site-editor ol {
    padding: var(--site-sp-3) var(--site-sp-4);
  }
}

/* --- 表 ------------------------------------------------------------------- */

/* CMS が素の <table> を出力した場合でも横スクロールで崩れないようにする。
   :where(.site) .site-editor .site-editor__table でラップした場合はラッパー側がスクロールを担う。 */
:where(.site) .site-editor table {
  width: 100%;
  margin: var(--site-sp-5) 0;
  font-size: 15px;
  line-height: 1.7;
  background: var(--site-white);
  border: 1px solid var(--site-border);
}

:where(.site) .site-editor th,
:where(.site) .site-editor td {
  padding: var(--site-sp-3) var(--site-sp-4);
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--site-border);
}

/* 見出しセル */
:where(.site) .site-editor th {
  color: var(--site-navy);
  font-weight: 700;
  white-space: nowrap;
  background: var(--site-navy-tint);
}

:where(.site) .site-editor thead th {
  color: var(--site-white);
  text-align: center;
  background: var(--site-navy);
  border-color: var(--site-navy-light);
}

/* ゼブラ */
:where(.site) .site-editor tbody tr:nth-child(even) > td {
  background: #fafbfc;
}

:where(.site) .site-editor caption {
  margin-bottom: var(--site-sp-2);
  color: var(--site-text-muted);
  font-size: 13px;
  text-align: left;
  caption-side: top;
}

/* 表の横スクロールラッパー（推奨） */
:where(.site) .site-editor .site-editor__table {
  margin: var(--site-sp-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.site) .site-editor .site-editor__table > table,
:where(.site) .site-editor .site-editor__table > table {
  margin: 0;
  /* 狭い画面では詰まりすぎないよう最小幅を確保する */
  min-width: 480px;
}

/* スクロール可能であることを示すヒント。
   :where(.site) .site-editor .site-editor__table の直前に置く（内側に入れるとヒント自体がスクロールする）。 */
:where(.site) .site-editor .site-editor__table-hint,
:where(.site) .site-editor .site-editor__table-hint {
  display: none;
  margin: 0 0 var(--site-sp-2);
  color: var(--site-text-muted);
  font-size: 12px;
}

/* ヒントと表の間隔を詰める */
:where(.site) .site-editor .site-editor__table-hint + .site-editor__table {
  margin-top: 0;
}

@media (max-width: 767px) {
  :where(.site) .site-editor table {
    font-size: 14px;
  }

  :where(.site) .site-editor th,
  :where(.site) .site-editor td {
    padding: var(--site-sp-2) var(--site-sp-3);
  }

  /* 見出しセルの折り返しを許可して幅を抑える */
  :where(.site) .site-editor th {
    white-space: normal;
  }

  :where(.site) .site-editor .site-editor__table-hint,
  :where(.site) .site-editor .site-editor__table-hint {
    display: block;
  }

  /* ラッパーが無い素の table 用フォールバック。
     ラッパーがある場合は上の .site-editor__table > table が min-width を担う。 */
  :where(.site) .site-editor > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
  }
}

/* --- 引用・画像・区切り --------------------------------------------------- */

:where(.site) .site-editor blockquote {
  margin: var(--site-sp-5) 0;
  padding: var(--site-sp-4) var(--site-sp-5);
  color: var(--site-text-muted);
  font-size: 15px;
  background: var(--site-bg-gray);
  border-left: 4px solid var(--site-border);
  border-radius: 0 var(--site-radius) var(--site-radius) 0;
}

:where(.site) .site-editor blockquote p {
  margin: 0;
}

:where(.site) .site-editor blockquote p + p {
  margin-top: var(--site-sp-3);
}

:where(.site) .site-editor blockquote cite {
  display: block;
  margin-top: var(--site-sp-2);
  font-size: 12px;
  font-style: normal;
}

:where(.site) .site-editor figure {
  margin: var(--site-sp-5) 0;
}

:where(.site) .site-editor figure img,
:where(.site) .site-editor p > img {
  width: auto;
  border-radius: var(--site-radius);
}

:where(.site) .site-editor figcaption {
  margin-top: var(--site-sp-2);
  color: var(--site-text-muted);
  font-size: 13px;
  text-align: center;
}

:where(.site) .site-editor hr {
  height: 0;
  margin: var(--site-sp-7) 0;
  border: 0;
  border-top: 1px solid var(--site-border);
}

/* --- コード（念のため定義） ----------------------------------------------- */

:where(.site) .site-editor code {
  padding: 2px 5px;
  color: var(--site-navy);
  font-family: var(--site-font-mono);
  font-size: 0.92em;
  background: var(--site-navy-tint);
  border-radius: 3px;
}

:where(.site) .site-editor pre {
  margin: var(--site-sp-5) 0;
  padding: var(--site-sp-4);
  overflow-x: auto;
  color: var(--site-text);
  font-family: var(--site-font-mono);
  font-size: 13px;
  line-height: 1.7;
  background: var(--site-bg-gray);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
}

:where(.site) .site-editor pre code {
  padding: 0;
  background: none;
}

/* 共通エディタの装飾を抑えたバリエーション。ページ種別に依存しない。 */
.site .site-editor--plain {
  color: var(--site-text);
  font-size: var(--site-fz-base);
  line-height: var(--site-lh-base);
  overflow-wrap: anywhere;
}
.site .site-editor--plain p { margin: 0 0 var(--site-sp-4); }
.site .site-editor--plain h3 {
  padding: 0;
  border: 0;
  margin: var(--site-sp-6) 0 var(--site-sp-4);
  color: var(--site-navy);
  font-size: var(--site-fz-h3);
  font-weight: 700;
  line-height: var(--site-lh-heading);
}
.site .site-editor--plain h4 {
  padding: 0;
  border: 0;
  margin: var(--site-sp-5) 0 var(--site-sp-3);
  color: var(--site-navy);
  font-size: var(--site-fz-base);
  font-weight: 700;
}
.site .site-editor--plain ul,
.site .site-editor--plain ol { margin: 0 0 var(--site-sp-5); padding: 0 0 0 1.5em; background: none; }
.site .site-editor--plain li { padding: 0; }
.site .site-editor--plain li::before { content: none; }
.site .site-editor--plain ul { list-style: disc; }
.site .site-editor--plain ol { list-style: decimal; }
.site .site-editor--plain li + li { margin-top: var(--site-sp-1); }
.site .site-editor--plain a { color: var(--site-navy-light); text-decoration: underline; }
.site .site-editor--plain img { max-width: 100%; height: auto; }
.site .site-editor--plain > :first-child { margin-top: 0; }
.site .site-editor--plain > :last-child { margin-bottom: 0; }
.site .site-editor--plain .site-editor__table {
  max-width: 100%;
  margin: var(--site-sp-5) 0;
  overflow-x: auto;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  background: var(--site-white);
}
.site .site-editor--plain .site-editor__table table {
  margin: 0;
  border: 0;
  font-size: inherit;
  display: table;
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.site .site-editor--plain .site-editor__table th,
.site .site-editor--plain .site-editor__table td {
  padding: 12px 18px;
  border: 0;
  background: transparent;
  white-space: normal;
  border-right: 1px solid var(--site-border);
  border-bottom: 1px solid var(--site-border);
  text-align: left;
  line-height: 1.7;
}
.site .site-editor--plain .site-editor__table th { color: var(--site-navy); font-weight: 700; }
.site .site-editor--plain .site-editor__table thead { background: var(--site-navy-tint); }
.site .site-editor--plain .site-editor__table tr > :last-child { border-right: 0; }
.site .site-editor--plain .site-editor__table tbody tr:last-child > * { border-bottom: 0; }

/* HTMLのH3ごとに、以前の丸番号・見出し・本文の横行を表示する。 */
:where(.site) .site-editor .site-editor-point {
  display: grid;
  grid-template-columns: 56px minmax(230px, 34%) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--site-border);
}
:where(.site) .site-editor .site-editor-point:last-child { border-bottom: 0; }
:where(.site) .site-editor .site-editor-point__number {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--site-navy);
  background: var(--site-white);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
/* 番号の丸が付くため、通常の h3 の左線は付けません */
.site .site-editor .site-editor-point > h3 {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.6;
}
:where(.site) .site-editor .site-editor-point__body { min-width: 0; }
:where(.site) .site-editor .site-editor-point__body > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  :where(.site) .site-editor .site-editor-point { grid-template-columns: 56px minmax(0, 1fr); }
  :where(.site) .site-editor .site-editor-point__body { grid-column: 2; }
}
@media (max-width: 767px) {
  :where(.site) .site-editor .site-editor-point { gap: 10px 14px; padding: 18px 0; }
}


/* --------------------------------------------------------------------------
   7-4. 記事本文 特殊パーツ（任意クラス）
   エディターの HTML モードでクラスを付与して使用する。
   -------------------------------------------------------------------------- */

/* --- チェックリスト ------------------------------------------------------- */

:where(.site) .site-editor ul.site-editor-checklist {
  margin: var(--site-sp-5) 0;
  padding: var(--site-sp-5);
  background: #f8f8f8;
  border-radius: var(--site-radius);
}

:where(.site) .site-editor .site-editor-checklist > li,
:where(.site) .site-editor ul.site-editor-checklist > li {
  position: relative;
  padding-left: 2em;
  font-weight: 500;
}

:where(.site) .site-editor .site-editor-checklist > li + li,
:where(.site) .site-editor ul.site-editor-checklist > li + li {
  margin-top: var(--site-sp-3);
}

/* 丸ポチではなくチェックマークを描く */
:where(.site) .site-editor .site-editor-checklist > li::before,
:where(.site) .site-editor ul.site-editor-checklist > li::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 1.3em;
  height: 1.3em;
  background: var(--site-orange);
  border-radius: 3px;
  content: "";
}

/* チェックマーク（レ点）。badge（::before）の中心 [0.65em, 1.0em] に
   transform:rotate の回転軸（要素自身の中心）を合わせることで、
   サイズを変えても常に中央に来るようにする。 */
:where(.site) .site-editor .site-editor-checklist > li::after,
:where(.site) .site-editor ul.site-editor-checklist > li::after {
  position: absolute;
  top: 1.0em;
  left: 0.65em;
  width: 0.75em;
  height: 0.42em;
  margin: -0.21em 0 0 -0.375em;
  border-bottom: 2px solid var(--site-white);
  border-left: 2px solid var(--site-white);
  transform: rotate(-45deg);
  content: "";
}

@media (max-width: 767px) {
  :where(.site) .site-editor .site-editor-checklist,
  :where(.site) .site-editor ul.site-editor-checklist {
    padding: var(--site-sp-4);
  }
}

/* --- メリットリスト（2 カラム） ------------------------------------------- */

:where(.site) .site-editor ul.site-editor-merits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--site-sp-3) var(--site-sp-4);
  margin: var(--site-sp-5) 0;
  padding: var(--site-sp-5);
  background: var(--site-bg-gray);
  border-radius: var(--site-radius);
}

:where(.site) .site-editor .site-editor-merits > li,
:where(.site) .site-editor ul.site-editor-merits > li {
  position: relative;
  padding-left: 1.5em;
  font-size: 15px;
  font-weight: 500;
}

/* grid のため li + li の margin は使わない */
:where(.site) .site-editor .site-editor-merits > li + li,
:where(.site) .site-editor ul.site-editor-merits > li + li {
  margin-top: 0;
}

:where(.site) .site-editor .site-editor-merits > li::before,
:where(.site) .site-editor ul.site-editor-merits > li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.9em;
  height: 0.9em;
  background: var(--site-orange);
  border-radius: 50%;
  content: "";
}

@media (max-width: 767px) {
  :where(.site) .site-editor .site-editor-merits,
  :where(.site) .site-editor ul.site-editor-merits {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--site-sp-4);
  }
}

/* --- STEP リスト ---------------------------------------------------------- */

:where(.site) .site-editor ol.site-editor-steps,
:where(.site) .site-editor .site-editor-steps {
  margin: var(--site-sp-5) 0;
  padding: 0;
  background: none;
  counter-reset: cp-step;
}

:where(.site) .site-editor .site-editor-steps > li,
:where(.site) .site-editor ol.site-editor-steps > li {
  position: relative;
  padding: 0 0 var(--site-sp-5) 56px;
  counter-increment: cp-step;
}

:where(.site) .site-editor .site-editor-steps > li + li,
:where(.site) .site-editor ol.site-editor-steps > li + li {
  margin-top: 0;
}

:where(.site) .site-editor .site-editor-steps > li:last-child,
:where(.site) .site-editor ol.site-editor-steps > li:last-child {
  padding-bottom: 0;
}

/* 番号バッジ */
:where(.site) .site-editor .site-editor-steps > li::before,
:where(.site) .site-editor ol.site-editor-steps > li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--site-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background: var(--site-navy);
  border-radius: 50%;
  content: counter(cp-step);
}

/* 縦の連結線 */
:where(.site) .site-editor .site-editor-steps > li::after,
:where(.site) .site-editor ol.site-editor-steps > li::after {
  position: absolute;
  top: 46px;
  left: 19px;
  width: 2px;
  height: calc(100% - 46px);
  background: var(--site-navy-tint-strong);
  content: "";
}

:where(.site) .site-editor .site-editor-steps > li:last-child::after,
:where(.site) .site-editor ol.site-editor-steps > li:last-child::after {
  display: none;
}

/* STEP タイトル */
:where(.site) .site-editor .site-editor-steps__title {
  display: block;
  margin-bottom: var(--site-sp-2);
  padding-top: 6px;
  color: var(--site-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

/* STEP 内の入れ子リストは背景を付けない */
:where(.site) .site-editor .site-editor-steps li > ul,
:where(.site) .site-editor ol.site-editor-steps li > ul {
  margin-top: var(--site-sp-3);
  padding: var(--site-sp-3) var(--site-sp-4);
  background: var(--site-bg-gray);
  border-radius: var(--site-radius);
}

@media (max-width: 767px) {
  :where(.site) .site-editor .site-editor-steps > li,
  :where(.site) .site-editor ol.site-editor-steps > li {
    padding-left: 44px;
  }

  :where(.site) .site-editor .site-editor-steps > li::before,
  :where(.site) .site-editor ol.site-editor-steps > li::before {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  :where(.site) .site-editor .site-editor-steps > li::after,
  :where(.site) .site-editor ol.site-editor-steps > li::after {
    top: 38px;
    left: 15px;
    height: calc(100% - 38px);
  }

  :where(.site) .site-editor .site-editor-steps__title {
    padding-top: 2px;
    font-size: 16px;
  }
}

/* --- FAQ（details / summary。JS 不要） ----------------------------------- */

:where(.site) .cp-faq {
  margin: var(--site-sp-5) 0;
}

:where(.site) .cp-faq__item {
  background: var(--site-white);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
}

:where(.site) .cp-faq__item + .cp-faq__item {
  margin-top: var(--site-sp-3);
}

/* 質問部分 */
:where(.site) .cp-faq__q {
  position: relative;
  display: block;
  padding: var(--site-sp-4) 48px var(--site-sp-4) 52px;
  color: var(--site-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}

/* デフォルトの三角マーカーを消す */
:where(.site) .cp-faq__q::-webkit-details-marker {
  display: none;
}

:where(.site) .cp-faq__q::marker {
  content: "";
}

/* Q アイコン */
:where(.site) .cp-faq__q::before {
  position: absolute;
  top: 50%;
  left: var(--site-sp-4);
  width: 26px;
  height: 26px;
  color: var(--site-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  background: var(--site-navy);
  border-radius: 50%;
  transform: translateY(-50%);
  content: "Q";
}

/* 開閉アイコン（＋ / −）横棒。常に表示され、閉時はこれが「＋」の横線になる */
:where(.site) .cp-faq__q::after {
  position: absolute;
  top: 50%;
  right: var(--site-sp-5);
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--site-navy);
  content: "";
}

/* 縦棒。横棒と同じ位置・同じ大きさの棒を90度回転させることで、
   中心を確実に一致させる（幅・高さを個別指定すると中心がずれるため）。 */
:where(.site) .cp-faq__icon {
  position: absolute;
  top: 50%;
  right: var(--site-sp-5);
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--site-navy);
  transform: rotate(90deg);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 開いたら縦棒を横棒に重ねて消す → 残った横棒が「−」になる */
:where(.site) .cp-faq__item[open] .cp-faq__icon {
  transform: rotate(0deg);
  opacity: 0;
}

:where(.site) .cp-faq__q:hover {
  color: var(--site-orange);
}

/* 回答部分 */
:where(.site) .cp-faq__a {
  position: relative;
  padding: 0 var(--site-sp-5) var(--site-sp-4) 52px;
}

:where(.site) .cp-faq__a::before {
  position: absolute;
  top: 2px;
  left: var(--site-sp-4);
  width: 26px;
  height: 26px;
  color: var(--site-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  background: var(--site-orange);
  border-radius: 50%;
  content: "A";
}

:where(.site) .cp-faq__a p,
:where(.site) .site-editor .cp-faq__a p {
  margin: 0;
  font-size: 15px;
}

:where(.site) .cp-faq__a p + p,
:where(.site) .site-editor .cp-faq__a p + p {
  margin-top: var(--site-sp-3);
}

@media (max-width: 767px) {
  :where(.site) .cp-faq__q {
    padding: var(--site-sp-3) 40px var(--site-sp-3) 44px;
    font-size: 15px;
  }

  :where(.site) .cp-faq__q::before {
    left: var(--site-sp-3);
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
  }

  :where(.site) .cp-faq__q::after,
  :where(.site) .cp-faq__icon {
    right: var(--site-sp-4);
  }

  :where(.site) .cp-faq__a {
    padding: 0 var(--site-sp-4) var(--site-sp-3) 44px;
  }

  :where(.site) .cp-faq__a::before {
    left: var(--site-sp-3);
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
  }

  :where(.site) .cp-faq__a p,
  :where(.site) .site-editor .cp-faq__a p {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   7-5. 著者ボックス・関連記事
   -------------------------------------------------------------------------- */

/* 監修者・著者 */
:where(.site) .cp-author {
  display: flex;
  gap: var(--site-sp-4);
  margin-top: var(--site-sp-7);
  padding: var(--site-sp-5);
  background: var(--site-bg-gray);
  border-radius: var(--site-radius);
}

:where(.site) .cp-author__img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: var(--site-navy-tint);
  border-radius: 50%;
}

:where(.site) .cp-author__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(.site) .cp-author__role {
  color: var(--site-text-muted);
  font-size: 12px;
}

:where(.site) .cp-author__name {
  color: var(--site-navy);
  font-size: 17px;
  font-weight: 700;
}

:where(.site) .cp-author__desc {
  margin-top: var(--site-sp-2);
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 767px) {
  :where(.site) .cp-author {
    flex-direction: column;
    align-items: center;
    padding: var(--site-sp-4);
    text-align: center;
  }

  :where(.site) .cp-author__img {
    width: 64px;
    height: 64px;
  }

  :where(.site) .cp-author__desc {
    text-align: left;
  }
}

/* 関連記事 */
:where(.site) .cp-related {
  margin-top: var(--site-sp-7);
}

/* .site を重ねて詳細度を上げる（".site h2" というタグ込みリセットに
   margin/padding が負けてしまうため） */
.site .cp-related__title {
  margin-bottom: var(--site-sp-6);
  padding-bottom: var(--site-sp-2);
  color: var(--site-navy);
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid var(--site-navy);
}

:where(.site) .cp-related__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--site-sp-4);
}

:where(.site) .cp-related__item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--site-text);
  text-decoration: none;
  background: var(--site-white);
}

:where(.site) .cp-related__item a:hover,
:where(.site) .cp-related__item a:focus-visible {
  color: var(--site-orange);
}

/* アイキャッチ画像 */
:where(.site) .cp-related__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--site-bg-gray);
}

:where(.site) .cp-related__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(.site) .cp-related__body {
  display: block;
  padding: var(--site-sp-4);
}

:where(.site) .cp-related__heading {
  display: block;
  margin-bottom: var(--site-sp-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

:where(.site) .cp-related__date {
  display: block;
  color: var(--site-text-muted);
  font-size: 12px;
  font-weight: 400;
}

@media (max-width: 767px) {
  :where(.site) .cp-related__title {
    font-size: 18px;
  }

  :where(.site) .cp-related__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--site-sp-3);
  }

  :where(.site) .cp-related__heading {
    font-size: 14px;
  }
}


/* ==========================================================================
   記事編集ガイド用のコンポーネント（コラム固有）
   ========================================================================== */

:where(.site) .cp-guide__section {
  margin-top: var(--site-sp-6);
  padding: var(--site-sp-5);
  background: var(--site-white);
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow);
}

:where(.site) .cp-guide__section:first-child {
  margin-top: 0;
}

/* パーツ 1 件分 */
:where(.site) .cp-guide__part + .cp-guide__part {
  margin-top: var(--site-sp-6);
  padding-top: var(--site-sp-6);
  border-top: 1px dashed var(--site-border);
}

:where(.site) .cp-guide__part-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--site-sp-2);
  margin-bottom: var(--site-sp-3);
  font-size: 16px;
  font-weight: 700;
  color: var(--site-text-strong);
}

:where(.site) .cp-guide__tag {
  color: var(--site-text-muted);
  font-family: var(--site-font-mono);
  font-size: 12px;
  font-weight: 400;
}

/* 表示見本エリア */
:where(.site) .cp-guide__preview {
  padding: var(--site-sp-4);
  background: var(--site-white);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
}

/* 入稿用ソース */
:where(.site) .cp-guide__code {
  margin-top: var(--site-sp-4);
}

:where(.site) .cp-guide__codewrap {
  position: relative;
}

:where(.site) .cp-guide__code pre {
  margin: 0;
  padding: var(--site-sp-4);
  overflow-x: auto;
  color: #e6edf3;
  font-family: var(--site-font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  background: #10233f;
  border-radius: var(--site-radius);
  -webkit-overflow-scrolling: touch;
}

:where(.site) .cp-guide__code code {
  padding: 0;
  color: inherit;
  font-family: inherit;
  background: none;
  white-space: pre;
}

/* .site button のリセット（169行目付近）に詳細度で負けないよう .site を付ける */
.site .cp-guide__copy {
  position: absolute;
  top: var(--site-sp-2);
  right: var(--site-sp-2);
  z-index: 1;
  padding: 4px 10px;
  color: var(--site-white);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--site-radius);
  cursor: pointer;
}

.site .cp-guide__copy:hover,
.site .cp-guide__copy:focus-visible {
  color: var(--site-white);
  background: rgba(255, 255, 255, 0.22);
}

.site .cp-guide__copy[data-cp-copied] {
  color: var(--site-white);
  background: var(--site-navy);
  border-color: var(--site-navy);
}

/* 補足ノート（重要事項の注記） */
:where(.site) .cp-guide__note {
  margin-top: var(--site-sp-5);
  padding: var(--site-sp-4);
  font-size: 13px;
  background: var(--site-orange-tint);
  border: 1px solid var(--site-orange);
  border-radius: var(--site-radius);
}

@media (max-width: 767px) {
  :where(.site) .cp-guide__section {
    margin-top: var(--site-sp-4);
    margin-inline: calc(var(--site-gutter) * -1);
    padding: var(--site-sp-4) var(--site-gutter);
    border-radius: 0;
  }

  :where(.site) .cp-guide__preview {
    padding: var(--site-sp-3);
  }

  :where(.site) .cp-guide__code pre {
    padding: var(--site-sp-3);
    font-size: 11.5px;
  }

  :where(.site) .cp-guide__copy {
    top: var(--site-sp-1);
    right: var(--site-sp-1);
  }
}

/* 共通の本文 CTA。ヘッダーのフォームボタンと同じ色・角丸を使う。 */
.site .site-button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 11px 52px 11px 28px;
  border-radius: var(--site-radius-button);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.site a.site-button--primary,
.site a.site-button--primary:hover,
.site a.site-button--primary:focus-visible {
  color: var(--site-white);
  background: var(--site-orange);
}
.site a.site-button--primary:hover,
.site a.site-button--primary:focus-visible { background: var(--site-orange-dark); }
.site .site-button--primary span {
  position: absolute;
  right: 20px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

/* ========================================================================== 
   8. 地域詳細ページ /area/{prefecture}/
   ap- は地域ページ固有。文字・色・角丸・カードとボタンの基準は site- を継承。
   ========================================================================== */

.site-page--area { margin: 0; }
.site-page--area .site {
  --ap-section-space: 88px;
  --ap-heading-size: 34px;
  --ap-heading-gap: 40px;
  --ap-section-tint: #eef8fc;
}
.site-page--area .site.ap-shell { overflow-x: clip; }
.site-page--area .site.ap-shell > main { display: block; }
.site-page--area [id] { scroll-margin-top: var(--site-header-h); }

/* FV 内のパンくずは共通表示を使い、配置だけ地域ページで調整する。 */
.site-page--area :where(.site) .ap-hero {
  position: relative;
  overflow: hidden;
  background-color: #f5fbfe;
  background-image:
    linear-gradient(90deg, #f8fcff 0%, rgba(255,255,255,.98) 32%, rgba(255,255,255,.77) 49%, rgba(255,255,255,.08) 76%),
    var(--ap-hero-image);
  background-position: center, right center;
  background-repeat: no-repeat;
  background-size: cover, 65% auto;
}
.site-page--area :where(.site) .ap-hero__breadcrumb {
  position: relative;
  z-index: 1;
  padding: 18px 0;
  background: transparent;
}
.site-page--area :where(.site) .ap-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 390px;
}
.site-page--area :where(.site) .ap-hero__copy { padding: 50px 0 75px; }
.site-page--area :where(.site) .ap-hero__copy h1 {
  margin: 0 0 8px;
  color: var(--site-navy);
  font-size: clamp(34px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.45;
}
.site-page--area :where(.site) .ap-hero__subtitle {
  display: block;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
}
.site-page--area :where(.site) .ap-hero__copy h2 {
  margin: 0 0 24px;
  color: var(--site-navy);
  font-size: clamp(23px, 2vw, 27px);
  font-weight: 700;
  line-height: var(--site-lh-heading);
}
.site-page--area :where(.site) .ap-hero__copy p { margin: 0 0 28px; max-width: 38em; }

/* 地域ページの余白・背景はコラムから独立して設定する。 */
.site-page--area :where(.site) .ap-section { padding: var(--ap-section-space) 0; }
.site-page--area .site.ap-shell > main > .ap-section { background: var(--site-white); }
.site-page--area .site.ap-shell > main > .ap-section:nth-child(odd) { background: var(--ap-section-tint); }
.site-page--area .site.ap-shell > main > .ap-section:nth-child(odd) .ap-considerations__item,
.site-page--area .site.ap-shell > main > .ap-section:nth-child(odd) .ap-checklist { background: var(--site-white); }
.site-page--area :where(.site) .ap-section__heading { margin-bottom: var(--ap-heading-gap); }
.site-page--area :where(.site) .ap-section__heading h2 {
  margin: 0 0 8px;
  color: var(--site-navy);
  font-size: var(--ap-heading-size);
  font-weight: 700;
  line-height: var(--site-lh-heading);
}
.site-page--area :where(.site) .ap-section__heading p { margin: 0; color: var(--site-text-muted); }

/* --- エリア固定原稿のチェックリスト ------------------------------------------------------- */

.site .ap-checklist {
  margin: var(--site-sp-5) 0;
  padding: var(--site-sp-5);
  background: #f8f8f8;
  border-radius: var(--site-radius);
}

.site .ap-checklist > li {
  position: relative;
  padding-left: 2em;
  font-weight: 500;
}

.site .ap-checklist > li + li {
  margin-top: var(--site-sp-3);
}

/* 丸ポチではなくチェックマークを描く */
.site .ap-checklist > li::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 1.3em;
  height: 1.3em;
  background: var(--site-orange);
  border-radius: 3px;
  content: "";
}

/* チェックマーク（レ点）。badge（::before）の中心 [0.65em, 1.0em] に
   transform:rotate の回転軸（要素自身の中心）を合わせることで、
   サイズを変えても常に中央に来るようにする。 */
.site .ap-checklist > li::after {
  position: absolute;
  top: 1.0em;
  left: 0.65em;
  width: 0.75em;
  height: 0.42em;
  margin: -0.21em 0 0 -0.375em;
  border-bottom: 2px solid var(--site-white);
  border-left: 2px solid var(--site-white);
  transform: rotate(-45deg);
  content: "";
}

@media (max-width: 767px) {
  .site .ap-checklist {
    padding: var(--site-sp-4);
  }
}


/* 固定原稿のメリット・注意点。エディタ本文とは独立した地域用部品。 */
.site-page--area :where(.site) .ap-considerations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-sp-5); }
.site-page--area :where(.site) .ap-considerations__item { min-width: 0; padding: var(--site-sp-5); background: var(--site-bg-gray); border-radius: var(--site-radius); overflow-wrap: anywhere; }
.site-page--area :where(.site) .ap-considerations__item h3 { margin: 0 0 var(--site-sp-4); padding-left: var(--site-sp-3); border-left: 4px solid var(--site-orange); color: var(--site-navy); font-size: var(--site-fz-h3); font-weight: 700; line-height: var(--site-lh-heading); }
.site-page--area :where(.site) .ap-considerations--caution { grid-template-columns: minmax(0, 1fr); }
.site-page--area :where(.site) .ap-considerations--caution h3 { border-left-color: var(--site-navy); }
.site-page--area :where(.site) .ap-considerations__item p,
.site-page--area :where(.site) .ap-considerations__intro p { margin: 0 0 var(--site-sp-4); }
.site-page--area :where(.site) .ap-considerations__item > :last-child { margin-bottom: 0; }
.site-page--area :where(.site) .ap-considerations__intro { margin-bottom: var(--site-sp-5); }
.site-page--area :where(.site) .ap-considerations__checks { margin: 0 0 var(--site-sp-4); padding-left: 1.5em; list-style: disc; }
.site-page--area :where(.site) .ap-considerations__checks li + li { margin-top: var(--site-sp-2); }
@media (max-width: 767px) {
  .site-page--area :where(.site) .ap-considerations { grid-template-columns: minmax(0, 1fr); gap: var(--site-sp-4); }
  .site-page--area :where(.site) .ap-considerations__item { padding: var(--site-sp-4); }
}

/* 固定原稿の住宅ローン比較表。エディタの表装飾とは独立。 */
.site-page--area :where(.site) .ap-mortgage-table { width: 100%; margin: 0 0 var(--site-sp-5); border-collapse: collapse; background: var(--site-white); }
.site-page--area :where(.site) .ap-mortgage-table th,
.site-page--area :where(.site) .ap-mortgage-table td { padding: var(--site-sp-3); border: 1px solid var(--site-border); vertical-align: middle; }
.site-page--area :where(.site) .ap-mortgage-table th { color: var(--site-navy); background: var(--site-navy-tint); text-align: left; font-weight: 700; }
.site-page--area :where(.site) .ap-mortgage-table td { text-align: right; white-space: nowrap; }

/* 価格と家賃：カードの連続を避けた罫線ベースの比較レイアウト。 */
.site-page--area :where(.site) .ap-pricing { overflow-wrap: anywhere; }
.site-page--area :where(.site) .ap-pricing p { margin: 0 0 var(--site-sp-4); }
.site-page--area :where(.site) .ap-pricing h3 { margin: 0 0 var(--site-sp-4); color: var(--site-navy); font-size: var(--site-fz-h3); font-weight: 700; line-height: var(--site-lh-heading); }
.site-page--area :where(.site) .ap-pricing__factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-sp-6); margin: var(--site-sp-6) 0; }
.site-page--area :where(.site) .ap-pricing__factor { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; min-width: 0; padding: var(--site-sp-5); background: var(--site-white); border-radius: 0; border-top: 3px solid var(--site-orange); }
.site-page--area :where(.site) .ap-pricing__factor + .ap-pricing__factor { border-top-color: var(--site-navy); }
.site-page--area :where(.site) .ap-pricing__factor ul { align-self: stretch; margin: var(--site-sp-5) 0; padding: 0; list-style: none; background: transparent; border-radius: 0; }
.site-page--area :where(.site) .ap-pricing__factor li { position: relative; padding-left: 1.5em; font-size: 15px; font-weight: 500; }
.site-page--area :where(.site) .ap-pricing__factor li + li { margin-top: var(--site-sp-3); }
.site-page--area :where(.site) .ap-pricing__factor li::before { position: absolute; top: 0.55em; left: 0; width: 0.9em; height: 0.9em; background: var(--site-orange); border-radius: 50%; content: ""; }
.site-page--area :where(.site) .ap-pricing__factor + .ap-pricing__factor li::before { background: var(--site-navy); }
.site-page--area :where(.site) .ap-pricing .ap-pricing__comparison-note { margin-bottom: var(--site-sp-7); }
.site-page--area :where(.site) .ap-pricing__balance { padding: var(--site-sp-5); background: var(--site-white); border-left: 4px solid var(--site-navy); }
.site-page--area :where(.site) .ap-pricing__summary { margin: var(--site-sp-4) 0; padding: var(--site-sp-4) var(--site-sp-5); list-style: none; border-radius: var(--site-radius); counter-reset: ap-pricing-item; }
.site-page--area :where(.site) .ap-pricing__summary > li { position: relative; padding-left: 2.1em; counter-increment: ap-pricing-item; }
.site-page--area :where(.site) .ap-pricing__summary > li + li { margin-top: var(--site-sp-3); }
.site-page--area :where(.site) .ap-pricing__summary > li::before { position: absolute; top: 0.42em; left: 0; width: 1.65em; height: 1.65em; color: var(--site-white); font-size: 12px; font-weight: 700; line-height: 1.65em; text-align: center; background: var(--site-navy); border-radius: 50%; content: counter(ap-pricing-item); }
.site-page--area :where(.site) .ap-pricing__balance > :last-child { margin-bottom: 0; }
.site-page--area :where(.site) .ap-cta.ap-cta--contained { margin-top: var(--site-sp-6); padding: var(--site-cta-padding-block) var(--site-cta-padding-inline); border-radius: var(--site-radius-cta); }
@media (max-width: 767px) {
  .site-page--area :where(.site) .ap-pricing__factors { grid-template-columns: minmax(0, 1fr); }
  .site-page--area :where(.site) .ap-pricing__factor { display: block; grid-row: auto; padding: var(--site-sp-4); }
  .site-page--area :where(.site) .ap-pricing__balance { padding: var(--site-sp-4); }
  .site-page--area :where(.site) .ap-cta.ap-cta--contained { padding: var(--site-cta-padding-block) var(--site-cta-padding-inline); }
}

/* リースバックの仕組み：現在と売却後の流れを比較。 */
.site-page--area :where(.site) .ap-basics { margin-top: var(--site-sp-6); }
.site-page--area :where(.site) .ap-basics > h3 { margin: 0 0 var(--site-sp-5); color: var(--site-navy); font-size: var(--site-fz-h3); font-weight: 700; line-height: var(--site-lh-heading); }
.site-page--area :where(.site) .ap-basics__comparison { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: var(--site-sp-4); }
.site-page--area :where(.site) .ap-basics__arrow { display: grid; place-items: center; align-self: center; }
.site-page--area :where(.site) .ap-basics__arrow::before { display: block; width: 24px; height: 32px; background: var(--site-orange); clip-path: polygon(0 0, 100% 50%, 0 100%); content: ""; }
.site-page--area :where(.site) .ap-basics__panel { min-width: 0; padding: var(--site-sp-5); background: var(--site-bg-gray); border-radius: var(--site-radius); text-align: center; overflow-wrap: anywhere; }
.site-page--area :where(.site) .ap-basics__panel--leaseback { background: #fff5ed; }
.site-page--area :where(.site) .ap-basics__label { margin: 0 0 var(--site-sp-5); color: var(--site-navy); font-size: var(--site-fz-h3); }
.site-page--area :where(.site) .ap-basics__steps { margin: 0; padding: 0; list-style: none; counter-reset: ap-basic-step; text-align: left; }
.site-page--area :where(.site) .ap-basics__steps > li { position: relative; min-height: 40px; padding: 5px 0 29px 56px; color: var(--site-navy); font-weight: 700; counter-increment: ap-basic-step; }
.site-page--area :where(.site) .ap-basics__steps > li:last-child { padding-bottom: 5px; }
.site-page--area :where(.site) .ap-basics__steps > li::before { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--site-navy); color: var(--site-white); font-size: 15px; line-height: 1; content: counter(ap-basic-step); }
.site-page--area :where(.site) .ap-basics__steps > li::after { position: absolute; top: 46px; bottom: 6px; left: 19px; width: 2px; background: var(--site-navy-tint-strong); content: ""; }
.site-page--area :where(.site) .ap-basics__steps > li:last-child::after { display: none; }
.site-page--area :where(.site) .ap-basics__panel--leaseback .ap-basics__steps > li::before { background: var(--site-orange); }
.site-page--area :where(.site) .ap-basics__note { margin: var(--site-sp-5) 0 0; }
@media (max-width: 767px) {
  .site-page--area :where(.site) .ap-basics__comparison { grid-template-columns: minmax(0, 1fr); gap: var(--site-sp-4); }
  .site-page--area :where(.site) .ap-basics__arrow::before { width: 32px; height: 24px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .site-page--area :where(.site) .ap-basics__panel { padding: var(--site-sp-4); }
}

/* 地域概要 */
.site-page--area :where(.site) .ap-feature-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.site-page--area :where(.site) .ap-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0 28px;
  border-right: 1px solid var(--site-border);
}
.site-page--area :where(.site) .ap-feature-card:first-child { padding-left: 0; }
.site-page--area :where(.site) .ap-feature-card:last-child { padding-right: 0; border-right: 0; }
.site-page--area :where(.site) .ap-feature-card__icon {
  display: block;
  width: 116px;
  height: 116px;
  padding: 8px;
  object-fit: contain;
  background: var(--site-white);
  border-radius: 50%;
}
.site-page--area :where(.site) .ap-feature-card > div { width: 100%; }
.site-page--area :where(.site) .ap-feature-card h3,
.site-page--area :where(.site) .ap-case-card h3,
.site-page--area :where(.site) .ap-flow__grid h3 {
  margin: 0 0 10px;
  color: var(--site-navy);
  font-size: var(--site-fz-h3);
  font-weight: 700;
  line-height: 1.6;
}
.site-page--area :where(.site) .ap-feature-card h3 { text-align: center; }
.site-page--area :where(.site) .ap-feature-card p { margin: 0; }

/* 相場 */
.site-page--area :where(.site) .ap-market__scroll {
  overflow-x: auto;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
}
.site-page--area :where(.site) .ap-market__scroll table { width: 100%; min-width: 650px; border-collapse: collapse; }
.site-page--area :where(.site) .ap-market__scroll th,
.site-page--area :where(.site) .ap-market__scroll td {
  padding: 12px 18px;
  border-right: 1px solid var(--site-border);
  border-bottom: 1px solid var(--site-border);
  text-align: center;
  line-height: 1.7;
}
.site-page--area :where(.site) .ap-market__scroll tr > :last-child { border-right: 0; }
.site-page--area :where(.site) .ap-market__scroll tbody tr:last-child > * { border-bottom: 0; }
.site-page--area :where(.site) .ap-market__scroll thead { color: var(--site-navy); background: var(--site-navy-tint); }
.site-page--area :where(.site) .ap-market__scroll tbody th { width: 32%; text-align: left; color: var(--site-navy); }
.site-page--area :where(.site) .ap-market__scroll tbody tr:nth-child(odd) { background: #f9fcfe; }
.site-page--area :where(.site) .ap-market__note { margin: 14px 0 0; color: var(--site-text-muted); text-align: center; font-size: 14px; }

/* 検討ポイント */
.site-page--area :where(.site) .ap-points__list { margin: 0 0 30px; padding: 0; list-style: none; }
.site-page--area :where(.site) .ap-points__list li {
  display: grid;
  grid-template-columns: 56px minmax(230px, 34%) minmax(0,1fr);
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--site-border);
}
.site-page--area :where(.site) .ap-points__list li:last-child { border-bottom: 0; }
.site-page--area :where(.site) .ap-points__list span {
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--site-navy);
  background: var(--site-white);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.site-page--area :where(.site) .ap-points__list b { color: var(--site-navy); font-size: var(--site-fz-h3); line-height: 1.6; }
.site-page--area :where(.site) .ap-points__list p { margin: 0; }

/* 利用事例 */
.site-page--area :where(.site) .ap-cases__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.site-page--area :where(.site) .ap-case-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--site-white);
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow);
}
.site-page--area :where(.site) .ap-case-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.site-page--area :where(.site) .ap-case-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.site-page--area :where(.site) .ap-case-card h3 { line-height: 1.35; }
.site-page--area :where(.site) .ap-case-card dl { margin: 0 0 20px; }
.site-page--area :where(.site) .ap-case-card dl > div {
  display: grid;
  grid-template-columns: minmax(80px,35%) 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--site-border);
  font-size: 14px;
  line-height: 1.6;
}
.site-page--area :where(.site) .ap-case-card dt { color: var(--site-text-muted); font-weight: 700; }
.site-page--area :where(.site) .ap-case-card dd { margin: 0; }
.site-page--area :where(.site) .ap-case-card dl > .ap-case-card__detail { display: block; padding: 10px 0; }
.site-page--area :where(.site) .ap-case-card__detail dt { margin-bottom: 3px; }
.site-page--area :where(.site) .ap-case-card__body > a {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 6px;
  margin-top: auto;
  font-weight: 700;
  line-height: 1.4;
}
.site-page--area :where(.site) .ap-case-card__body > a span {
  display: inline-flex;
  align-items: center;
  height: 1em;
  font-size: 20px;
  line-height: 1;
}

/* 相談フロー */
.site-page--area :where(.site) .ap-flow__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 66px 0;
  margin-top: 64px;
  padding: 26px 8px 22px;
  background: var(--site-white);
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow);
}
.site-page--area :where(.site) .ap-flow__grid article { position: relative; padding: 0 18px; text-align: center; }
.site-page--area :where(.site) .ap-flow__grid article:nth-child(3n+2),
.site-page--area :where(.site) .ap-flow__grid article:nth-child(3n+3) { border-left: 1px solid var(--site-border); }
.site-page--area :where(.site) .ap-flow__step {
  position: absolute;
  top: -62px;
  left: 50%;
  display: grid;
  width: 56px;
  aspect-ratio: 1;
  place-items: center;
  transform: translateX(-50%);
  color: var(--site-navy);
  background: var(--site-white);
  border-radius: 50%;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.site-page--area :where(.site) .ap-flow__icon { display: grid; height: 92px; place-items: center; margin-bottom: 14px; }
.site-page--area :where(.site) .ap-flow__icon img { width: 100px; height: 100%; object-fit: contain; }
.site-page--area :where(.site) .ap-flow__grid h3 { line-height: 1.35; }
.site-page--area :where(.site) .ap-flow__grid p { margin: 0; text-align: left; font-size: 14px; line-height: 1.75; }

/* FAQ は地域ページ独自の背景色。 */
.site-page--area :where(.site) .ap-faq__list { display: grid; gap: 18px; }
.site-page--area :where(.site) .ap-faq__list details {
  background: var(--site-white);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}
.site-page--area :where(.site) .ap-faq__list summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 20px;
  color: var(--site-navy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.site-page--area :where(.site) .ap-faq__list summary::-webkit-details-marker { display: none; }
.site-page--area :where(.site) .ap-faq__list summary::after { content: '+'; margin-left: auto; font-size: 24px; line-height: 1; }
.site-page--area :where(.site) .ap-faq__list details[open] summary::after { content: '−'; }
.site-page--area :where(.site) .ap-faq__question-mark,
.site-page--area :where(.site) .ap-faq__answer-mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}
.site-page--area :where(.site) .ap-faq__question-mark { color: #fff; background: var(--site-navy); }
.site-page--area :where(.site) .ap-faq__answer-mark { color: var(--site-orange-dark); background: var(--site-orange-tint); }
.site-page--area :where(.site) .ap-faq__answer { display: flex; gap: 16px; padding: 4px 20px 18px; }
.site-page--area :where(.site) .ap-faq__answer-mark { align-self: flex-start; }
.site-page--area :where(.site) .ap-faq__answer p { margin: 0; }

/* 市区町村リストのイラストは背景層に置く。 */
.site-page--area :where(.site) .ap-area { overflow: hidden; }
.site-page--area :where(.site) .ap-area__inner { position: relative; isolation: isolate; }
.site-page--area :where(.site) .ap-area__content { position: relative; z-index: 2; }
.site-page--area :where(.site) .ap-area__content .ap-section__heading { min-height: 195px; margin-bottom: 22px; }
.site-page--area :where(.site) .ap-area__intro { max-width: 640px; }
.site-page--area :where(.site) .ap-area__links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 24px; }
.site-page--area :where(.site) .ap-area__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 8px 18px;
  color: var(--site-navy);
  background: rgba(248,248,248,.94);
  border-radius: var(--site-radius);
  font-weight: 700;
}
.site-page--area :where(.site) .ap-area__links a:hover,
.site-page--area :where(.site) .ap-area__links a:focus-visible { background: var(--site-navy-tint); }
.site-page--area :where(.site) .ap-area__links span { font-size: 22px; line-height: 1; }
.site-page--area :where(.site) .ap-area__image {
  position: absolute;
  z-index: 1;
  top: -62px;
  right: -90px;
  width: min(54vw, 610px);
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* 下部 CTA */
.site-page--area :where(.site) .ap-contact-copy {
  color: var(--site-text);
  font-size: var(--site-fz-base);
  line-height: var(--site-lh-base);
  overflow-wrap: anywhere;
}
.site-page--area :where(.site) .ap-contact-copy > p { margin: 0 0 var(--site-sp-4); }
.site-page--area :where(.site) .ap-contact-copy > p:last-child { margin-bottom: 0; }
/* 固定本文の強調。エディタ用セレクタを流用せず共通の色・マーカーを参照。 */
.site-page--area :where(.site) .ap-contact-copy strong,
.site-page--area :where(.site) .ap-considerations strong,
.site-page--area :where(.site) .ap-considerations__intro strong,
.site-page--area :where(.site) .ap-pricing strong { font-weight: 700; color: var(--site-navy); background: var(--site-strong-marker); }
.site-page--area :where(.site) .ap-contact-copy__checklist { list-style: none; }
.site-page--area :where(.site) .ap-cta { padding: 88px 0; color: var(--site-white); background: var(--site-navy-dark); }
.site-page--area :where(.site) .ap-cta__inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
.site-page--area :where(.site) .ap-cta__inner > p,
.site-page--area :where(.site) .ap-cta__title { margin: 0; color: var(--site-white); font-size: var(--site-fz-h2); font-weight: 700; line-height: var(--site-lh-heading); }
.site-page--area :where(.site) .ap-cta__inner > .ap-cta__description { max-width: 640px; font-size: var(--site-fz-base); font-weight: 400; line-height: var(--site-lh-base); }
.site-page--area :where(.site) .ap-cta__free { display: flex; align-items: center; justify-content: center; gap: 0.75em; }
.site-page--area :where(.site) .ap-cta__free strong { font-weight: 700; }
.site-page--area :where(.site) .ap-cta__button { width: min(100%, 420px); }
.site-page--area :where(.site) .ap-cta__tel {
  display: grid;
  grid-template-columns: 26px auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  justify-self: center;
  column-gap: 10px;
  color: var(--site-white);
}
.site-page--area :where(.site) .ap-cta__tel:hover { color: var(--site-white); }
.site-page--area :where(.site) .ap-cta__tel-icon {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: 26px;
  height: 26px;
  background-image: var(--site-phone-icon);
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) invert(1);
}
.site-page--area :where(.site) .ap-cta__tel strong { font-size: 26px; line-height: 1.2; }
.site-page--area :where(.site) .ap-cta__tel small { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
.site-page--area :where(.site) .ap-cta__note { color: rgba(255,255,255,.8); font-size: 12px; }

@media (max-width: 900px) {
  .site-page--area :where(.site) .ap-hero { background-size: cover, auto 100%; }
  .site-page--area :where(.site) .ap-points__list li { grid-template-columns: 56px 1fr; }
  .site-page--area :where(.site) .ap-points__list p { grid-column: 2; }
  .site-page--area :where(.site) .ap-cases__grid { gap: 16px; }
  .site-page--area :where(.site) .ap-case-card__body { padding: 18px; }
  .site-page--area :where(.site) .ap-flow__grid article { padding-inline: 10px; }
}

@media (max-width: 767px) {
  .site-page--area :where(.site) .ap-hero {
    background-size: cover, auto 100%;
    background-image:
      linear-gradient(90deg, rgba(248,252,255,.98) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.55) 100%),
      var(--ap-hero-image);
  }
  .site-page--area :where(.site) .ap-hero__inner { min-height: 350px; }
  .site-page--area :where(.site) .ap-hero__copy { padding: 38px 0 54px; }
  .site-page--area :where(.site) .ap-hero__copy h1 { font-size: 28px; }
  .site-page--area :where(.site) .ap-hero__subtitle { font-size: 21px; }
  .site-page--area :where(.site) .ap-hero__copy h2 { font-size: 20px; }
  .site-page--area .site { --ap-section-space: 64px; --ap-heading-gap: var(--site-sp-6); --ap-heading-size: 26px; }
  .site-page--area :where(.site) .ap-feature-list { grid-template-columns: 1fr; gap: 28px; }
  .site-page--area :where(.site) .ap-feature-card,
  .site-page--area :where(.site) .ap-feature-card:first-child,
  .site-page--area :where(.site) .ap-feature-card:last-child { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid var(--site-border); }
  .site-page--area :where(.site) .ap-feature-card:last-child { padding-bottom: 0; border-bottom: 0; }
  .site-page--area :where(.site) .ap-points__list li { gap: 10px 14px; padding: 18px 0; }
  .site-page--area :where(.site) .ap-cases__grid { grid-template-columns: 1fr; gap: 24px; }
  .site-page--area :where(.site) .ap-case-card__body { padding: 22px; }
  .site-page--area :where(.site) .ap-flow__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 66px 0; padding-block: 28px; }
  .site-page--area :where(.site) .ap-flow__grid article:nth-child(n) { border-left: 0; }
  .site-page--area :where(.site) .ap-flow__grid article:nth-child(even) { border-left: 1px solid var(--site-border); }
  .site-page--area :where(.site) .ap-flow__icon { height: 70px; }
  .site-page--area :where(.site) .ap-flow__icon img { width: 84px; }
  .site-page--area :where(.site) .ap-area { padding-top: 235px; }
  .site-page--area :where(.site) .ap-area__content .ap-section__heading { min-height: 0; }
  .site-page--area :where(.site) .ap-area__image { top: -220px; right: -38px; width: min(105vw, 420px); }
  .site-page--area :where(.site) .ap-area__links { gap: 9px; }
  .site-page--area :where(.site) .ap-area__links a { padding-inline: 12px; font-size: 14px; }
  .site-page--area :where(.site) .ap-cta { padding: 64px 0; }
}
@media (max-width: 480px) {
  .site-page--area :where(.site) .ap-flow__grid p { font-size: 12px; }
  .site-page--area :where(.site) .ap-area__links { grid-template-columns: 1fr; }
}


/* ==========================================================================
   9. 一覧ページ
   ========================================================================== */
.site-page--column-index,
.site-page--area-index { padding: 0; margin: 0; }
.site .site-list-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #f1f5fa;
  background-image: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 52%, rgba(255,255,255,.4) 100%), var(--site-list-hero-image);
  background-position: center, right center;
  background-size: 100% 100%, min(1000px, 100%) auto;
  background-repeat: no-repeat;
}
.site .site-list-hero__breadcrumb { border: 0; background: transparent; }
.site .site-list-hero--column {
  --site-list-hero-image: url('../img/child-pages/column-index-consultation-hero.webp');
  background-color: var(--site-white);
  background-image: var(--site-list-hero-image);
  background-position: right center;
  background-size: min(1000px, 100%) auto;
}
.site .site-list-hero--area {
  background-color: var(--site-white);
  background-image: var(--site-list-hero-image);
  background-position: right center;
  background-size: min(1000px, 100%) auto;
}
.site .site-list-hero__inner { min-height: 294px; display: flex; flex-direction: column; justify-content: flex-start; padding-block: 48px; }
.site .site-list-hero__eyebrow { margin: 0 0 10px; color: var(--site-navy-light); font: 700 13px/1.4 var(--site-font); letter-spacing: .16em; }
.site .site-list-hero h1 { margin: 0; color: var(--site-navy); font: 700 clamp(30px, 4vw, 42px)/1.4 var(--site-font); }
.site .site-list-hero__description { min-block-size: 3lh; margin: 16px 0 0; color: var(--site-text); font-size: 16px; line-height: 1.9; }
.site-page--column-index .site-list-hero__description { width: 50%; }
.site .site-list-section { padding: 64px 0 80px; }
.site .cp-list-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 24px; }
.site .cp-list-card { overflow: hidden; border: 0; border-radius: var(--site-radius-lg); background: var(--site-white); box-shadow: var(--site-shadow); }
.site .cp-list-card__link { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.site .cp-list-card__link:hover .cp-list-card__more { color: var(--site-orange-dark); }
.site .cp-list-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--site-navy-tint); }
.site .cp-list-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site .cp-list-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px; }
.site .cp-list-card__category { color: var(--site-navy-light); font-size: 12px; font-weight: 700; }
.site .cp-list-card__title { margin: 0 0 8px; color: var(--site-text-strong); font-size: 18px; line-height: 1.6; }
.site .cp-list-card__title:is(h2, h3) { margin-top: 0; }
.site .cp-list-card h2 { margin: 0 0 8px; color: var(--site-text-strong); font-size: 18px; line-height: 1.6; }
.site .cp-list-card p { margin: 0; color: var(--site-text-muted); font-size: 14px; line-height: 1.8; }
.site .cp-list-card__more { display: inline-flex; width: auto; align-self: flex-end; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; color: var(--site-navy-light); font-size: 14px; font-weight: 700; }
.site .site-list-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 48px; }
.site .site-list-pagination > * { display: grid; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid var(--site-border); border-radius: 50%; color: var(--site-navy); text-decoration: none; }
.site .site-list-pagination__direction { font-size: 12px; line-height: 1; }
.site .site-list-pagination [aria-current="page"] { border-color: var(--site-navy); background: var(--site-navy); color: #fff; }
.site .site-list-pagination [aria-disabled="true"] { color: #9299a3; background: #f5f6f8; }
.site .site-list-empty { padding: 56px 0; text-align: center; }
.site .site-list-empty h2 { color: var(--site-navy); }
.site .ap-list-intro { margin-bottom: 36px; text-align: center; }
.site .ap-list-intro h2 { margin: 0; color: var(--site-navy); font-size: 26px; }
.site .ap-list-intro p { margin: 10px 0 0; color: var(--site-text-muted); }
.site .ap-region-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.site .ap-region { padding: 24px 0; border: 0; border-radius: 0; background: transparent; }
.site .ap-region > h2 { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--site-navy); color: var(--site-navy); font-size: 20px; }
.site .ap-region__prefectures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-page--area :where(.site) .ap-area__links a,
.site .ap-region__prefectures a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 8px 18px; border: 0; border-radius: var(--site-radius); color: var(--site-navy); background: rgba(248,248,248,.94); font-size: 14px; font-weight: 700; text-decoration: none; }
.site-page--area :where(.site) .ap-area__links a:hover,
.site-page--area :where(.site) .ap-area__links a:focus-visible,
.site .ap-region__prefectures a:hover,
.site .ap-region__prefectures a:focus-visible { background: var(--site-navy-tint); }
.site .ap-region__prefectures a > span { color: var(--site-navy-light); font-size: 22px; line-height: 1; }
@media (max-width: 900px) {
  .site .cp-list-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .site .ap-region__prefectures { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .site .site-list-hero {
    background-image: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.48) 38%, #fff 72%), var(--site-list-hero-image);
    background-position: center, right top;
    background-size: 100% 100%, min(1000px, 100%) auto;
  }
  .site .site-list-hero__inner { min-height: 294px; }
  .site .site-list-hero__description { min-block-size: 4lh; font-size: 14px; }
  .site-page--column-index .site-list-hero__description { width: 100%; }
  .site .site-list-page__desktop-break { display: none; }
  .site .site-list-section { padding: 44px 0 56px; }
  .site .cp-list-grid { grid-template-columns: 1fr; gap: 18px; }
  .site .cp-list-card__body { padding: 18px; }
  .site .ap-region-list { grid-template-columns: 1fr; gap: 16px; }
  .site .ap-region { padding: 20px 0; }
  .site .ap-region__prefectures { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site .ap-region__prefectures a { padding-inline: 12px; font-size: 14px; }
}
@media (max-width: 360px) {
  .site .site-list-hero__description { min-block-size: 5lh; }
}
@media (min-width: 768px) {
  .site .ap-region-list { grid-template-columns: 1fr; }
}

/* コラムカテゴリ */
.site .cp-category-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
.site .cp-category-nav a { max-width: 100%; padding: 9px 16px; border: 1px solid var(--site-border); border-radius: 999px; color: var(--site-navy); background: var(--site-white); font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.site .cp-category-nav a:hover,
.site .cp-category-nav a:focus-visible { border-color: var(--site-navy-light); background: var(--site-navy-tint); }
.site .cp-category-nav a[aria-current="page"] { border-color: var(--site-navy); color: var(--site-white); background: var(--site-navy); }
.site .cp-list-intro { max-width: 800px; margin: 0 auto 48px; padding-block: 24px; text-align: center; }
.site .cp-list-intro h2 { margin: 0; color: var(--site-navy); font-size: 24px; }
.site .cp-category-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.site .cp-list-card__body > .cp-category-tags { margin-bottom: 16px; }
.site .cp-category-tag { display: inline-flex; max-width: 100%; align-items: center; padding: 4px 10px; border-radius: 999px; color: var(--site-navy); background: var(--site-navy-tint); font-size: 12px; font-weight: 700; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.site a.cp-category-tag:hover,
.site a.cp-category-tag:focus-visible { color: var(--site-white); background: var(--site-navy-light); }
.site .cp-article-header > .cp-category-tags { margin-bottom: 14px; }
@media (max-width: 767px) {
  .site .cp-category-nav { gap: 8px; margin-bottom: 24px; }
  .site .cp-category-nav a { padding: 8px 12px; font-size: 13px; }
  .site .cp-list-intro { margin-bottom: 32px; padding-block: 16px; }
  .site .cp-list-intro h2 { font-size: 21px; }
}

@media (min-width: 768px) {
  .site .cp-list-grid--related { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
}
@media (max-width: 767px) {
  .site .cp-list-grid--related { grid-template-columns: 1fr; }
}

/* 地域一覧 */
.site .ap-region-list { grid-template-columns: 1fr; gap: 24px; }
.site .ap-region__prefectures { grid-template-columns: 1fr; gap: 12px; }
.site .ap-prefecture__heading { display: flex; align-items: center; background: #f6f7f8; border-radius: var(--site-radius); padding-right: 16px; }
.site .ap-region__prefectures .ap-prefecture__link { flex: 1; min-width: 0; background: transparent; padding: 18px 22px; font-size: 17px; }
.site .ap-prefecture__toggle { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #ccd6e2; border-radius: 50%; background: #fff; color: var(--site-navy); cursor: pointer; position: relative; }
.site .ap-prefecture__toggle span::before,
.site .ap-prefecture__toggle span::after { content: ''; position: absolute; width: 12px; height: 2px; top: calc(50% - 1px); left: calc(50% - 6px); background: currentColor; }
.site .ap-prefecture__toggle[aria-expanded="false"] span::after { transform: rotate(90deg); }
.site .ap-prefecture__cities { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 22px; }
.site .ap-prefecture__cities[hidden] { display: none; }
.site .ap-prefecture__cities a { display: inline-block; min-height: 0; padding: 5px 0; background: transparent; border-radius: 0; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.site .ap-prefecture__cities a:hover { background: transparent; color: var(--site-navy-light); }

/* 共通ナビゲーション */
.site .site-header { z-index: 200; }
.site .site-header__inner { gap: 20px; }
.site .site-header__logo img { height: 30px; }
.site .site-nav { margin-left: auto; }
.site .site-nav, .site .site-nav__item { display: flex; align-items: center; }
.site .site-nav { gap: 22px; }
.site .site-nav__item { gap: 3px; }
.site .site-nav__link { color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.site .site-nav__toggle { display: inline-grid; place-items: center; width: 30px; height: 36px; border: 0; color: white; background: transparent; font-size: 20px; cursor: pointer; }
.site .site-header__actions { gap: 8px; margin-left: 24px; }
.site .site-header .site-btn-tel { min-height: 52px; padding: 6px 12px 6px 38px; }
.site .site-header .site-btn-tel::before { width: 20px; height: 20px; left: 12px; margin-top: -10px; }
.site .site-header .site-btn-tel__num { font-size: 21px; }
.site .site-header .site-btn-tel__note { font-size: 9px; }
.site .site-header .site-btn-cta { min-height: 52px; padding: 6px 28px 6px 36px; font-size: 12px; }
.site .site-header .site-btn-cta::before { width: 18px; height: 14px; left: 12px; margin-top: -7px; }
.site .site-header .site-btn-cta::after { width: 16px; height: 16px; right: 8px; margin-top: -8px; }
.site .site-menu-toggle { display: none; }
.site .site-nav-dialog { position: fixed; inset: 92px 0 auto; margin: 0 auto; width: min(1120px,calc(100% - 48px)); max-height: calc(100dvh - 116px); padding: 28px 36px 36px; border: 0; border-radius: 20px; background: var(--site-navy); color: white; box-shadow: 0 18px 60px #081b3933; overflow: auto; }
.site .site-nav-dialog::backdrop { background: rgba(13,27,43,.45); }
.site .site-nav-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.site .site-nav-dialog__header > p { font-size: 21px; font-weight: 700; margin: 0; }
.site .site-nav-dialog__close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff70; border-radius: 50%; background: transparent; color: white; font-size: 24px; cursor: pointer; }
.site .site-nav-dialog__regions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 24px; }
.site .site-nav-dialog__region { padding-left: 20px; border-left: 1px dashed #ffffff45; }
.site .site-nav-dialog__region > p { color: white; font-size: 16px;font-weight: 700; margin: 0 0 12px; }
.site .site-nav-dialog__links { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; padding: 0; margin: 0; }
.site .site-nav-dialog a { color: #fff; font-size: 14px; text-underline-offset: 5px; }
.site .site-nav-dialog a:hover { color: #c6e8f5; }
.site .site-nav-dialog__mobile-nav > a, .site .site-nav-dialog__mobile-nav > details { display: block; padding: 18px 0; border-bottom: 1px solid #ffffff40; }
.site .site-nav-dialog__mobile-nav summary { cursor: pointer; font-weight: 700; }
.site .site-nav-dialog__mobile-nav details[open] > summary { margin-bottom: 20px; }
.site .site-nav-dialog__mobile-nav .site-nav-dialog__region { margin: 20px 0; }
.site :is(.site-nav__toggle,.site-menu-toggle,.site-nav-dialog__close,.ap-prefecture__toggle):focus-visible { outline: 3px solid #72c7e4; outline-offset: 3px; }
@media (max-width: 1050px) and (min-width: 901px) {
 .site .site-header__inner { gap: 12px; }
 .site .site-nav { gap: 10px; }
 .site .site-header__actions { margin-left: 12px; }
 .site .site-header__logo img { height: 26px; }
 .site .site-header .site-btn-tel__num { font-size: 18px; }
}
@media (max-width: 900px) {
 .site .site-header__inner { min-height: 60px; }
 .site .site-header__actions, .site .site-nav { display: none; }
 .site .site-menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 0; color: white; background: transparent; cursor: pointer; }
 .site .site-menu-toggle span { width: 24px; height: 2px; background: currentColor; }
 .site .site-nav-dialog { inset: 72px 0 auto; width: calc(100% - 24px); max-height: calc(100dvh - 84px); padding: 22px; border-radius: 16px; }
 .site .site-nav-dialog__regions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
 .site .site-nav-dialog__region { padding-left: 12px; }
}
@media (max-width: 480px) {
 .site .ap-prefecture__cities { padding: 18px 12px; gap: 8px 18px; }
 .site .ap-region__prefectures .ap-prefecture__link { padding: 16px; font-size: 16px; }
}
.site .site-nav-dialog__links a { display: inline-block; padding-block: 4px; text-decoration: underline; }
.site .site-nav-dialog--column > .site-nav-dialog__links { gap: 14px 28px; }

/* 地域一覧の詳細調整 */
.site .ap-region__prefectures { gap: 24px; }
.site .ap-prefecture { background: #f6f7f8; border-radius: var(--site-radius); overflow: hidden; }
.site .ap-prefecture__heading { position: relative; min-height: 68px; padding: 16px 22px; background: #f6f7f8; cursor: pointer; }
.site .ap-region__prefectures .ap-prefecture__link { position: relative; z-index: 1; flex: none; display: inline; min-height: 0; padding: 0; line-height: 1.5; }
.site .ap-prefecture__toggle { border: 0; margin-left: auto; padding: 0; }
.site .ap-prefecture__cities { gap: 14px 0; padding: 8px 22px 28px; }
.site .ap-prefecture__cities li { border-right: 1px solid #ccd6e2; padding: 0 14px; line-height: 1.4; }
.site .ap-prefecture__cities a { padding: 0; line-height: 1.4; }
.site .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 44px; padding: 0; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; }
.site .site-nav__icon { display: inline-block; position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.site .site-nav__icon::before,.site .site-nav__icon::after { content: ''; position: absolute; left: 1px; top: 6px; width: 12px; height: 2px; background: currentColor; }
.site .site-nav__icon::after { transform: rotate(90deg); }
.site .site-nav__toggle[aria-expanded="true"] .site-nav__icon::after { transform: none; }
.site .site-nav-dialog { background: #fff; color: var(--site-navy); }
.site .site-nav-dialog__region > p,.site .site-nav-dialog a { color: var(--site-navy); }
.site .site-nav-dialog a:hover { color: var(--site-navy-light); }
.site .site-nav-dialog__region { border-color: #ccd6e2; }
.site .site-nav-dialog__mobile-nav > a,.site .site-nav-dialog__mobile-nav > details { border-color: #dde3ec; }
.site .site-nav-dialog__close { position: relative; padding: 0; font-size: 0; color: var(--site-navy); border-color: #ccd6e2; flex: 0 0 38px; }
.site .site-nav-dialog__close::before,.site .site-nav-dialog__close::after { content: ''; position: absolute; left: calc(50% - 7px); top: calc(50% - 1px); width: 14px; height: 2px; background: currentColor; transform: rotate(45deg); }
.site .site-nav-dialog__close::after { transform: rotate(-45deg); }
.site .cp-list-card__date { display: block; margin-bottom: 10px; color: #667183; font-size: 13px; line-height: 1.5; }
@media(max-width: 480px) {
 .site .ap-prefecture__heading { padding: 16px; }
 .site .ap-prefecture__cities { padding: 6px 10px 24px; }
 .site .ap-prefecture__cities li { padding-inline: 10px; }
 .site .ap-region__prefectures .ap-prefecture__link { padding: 0; }
}

/* ナビゲーションの表示調整 */
.site .site-nav :is(.site-nav__link,.site-nav__toggle) { color: #fff; transition: opacity .2s ease; }
.site .site-nav :is(.site-nav__link,.site-nav__toggle):is(:hover,:focus-visible) { color: #fff; opacity: .65; }
.site .ap-region__prefectures :is(.ap-prefecture__link,.ap-prefecture__cities a) { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; transition: color .2s ease; }
.site .ap-region__prefectures :is(.ap-prefecture__link,.ap-prefecture__cities a):is(:hover,:focus-visible) { color: var(--site-orange); background: transparent; text-decoration-color: currentColor; }
.site .ap-prefecture__cities { gap: 22px 0; padding: 16px 22px 36px; }
.site .ap-prefecture__cities li { padding-inline: 20px; }
.site .site-nav-dialog__mobile-nav summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; }
.site .site-nav-dialog__mobile-nav summary::-webkit-details-marker { display: none; }
.site .site-nav-dialog__mobile-nav details[open] > summary > .site-nav__icon::after { transform: none; }
.site .site-nav-dialog__mobile-nav :is(summary,a) { transition: opacity .2s ease; }
.site .site-nav-dialog__mobile-nav :is(summary,a):hover { color: var(--site-navy); opacity: .65; }
@media(max-width: 480px) {
 .site .ap-prefecture__cities { padding: 14px 8px 30px; gap: 20px 0; }
 .site .ap-prefecture__cities li { padding-inline: 14px; }
}
@media(prefers-reduced-motion: reduce) {
 .site .site-nav :is(.site-nav__link,.site-nav__toggle),.site .ap-region__prefectures a,.site .site-nav-dialog__mobile-nav :is(summary,a) { transition: none; }
}

/* ナビゲーションの余白 */
.site .site-nav { gap: 32px; }
@media (min-width: 901px) and (max-width: 1050px) {
 .site .site-nav { gap: 20px; }
}
.site .site-nav-dialog a:is(:hover,:focus-visible) { color: var(--site-orange); text-decoration-color: currentColor; opacity: 1; }
.site .site-nav-dialog a { transition: color .2s ease; }
.site .site-nav-dialog__mobile-nav > a { font-size: 16px; font-weight: 700; line-height: 1.8; }
.site .site-mobile-group > summary { font-size: 16px; line-height: 1.8; }
.site .site-nav-dialog .site-category-buttons { gap: 10px; }
.site .site-category-buttons a { display: inline-block; max-width: 100%; padding: 9px 16px; border: 1px solid var(--site-border); border-radius: 999px; color: var(--site-navy); background: var(--site-white); font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.site .site-category-buttons a:is(:hover,:focus-visible) { border-color: var(--site-navy-light); background: var(--site-navy-tint); color: var(--site-navy); text-decoration: none; opacity: 1; }
@media(max-width: 767px) {
 .site .site-nav-dialog .site-category-buttons { gap: 8px; }
 .site .site-category-buttons a { padding: 8px 12px; font-size: 13px; }
}

/* ヘッダー・フッターナビゲーション */
.site .site-header__logo img { height: 36px; }
.site .site-nav-dialog__actions { display: flex; align-items: center; gap: 24px; }
.site .site-nav-dialog a.site-nav-dialog__view-all { display: inline-flex; align-items: center; gap: 8px; color: var(--site-navy-light); font-size: 14px; font-weight: 700; text-decoration: none; }
.site .site-nav-dialog a.site-nav-dialog__view-all:hover { color: var(--site-orange); }
.site .site-footer__main { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.site .site-footer__links { display: flex; align-items: flex-start; gap: 64px; font-size: 15px; font-weight: 700; }
.site .site-footer__categories { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 400; }
@media(min-width: 901px) and (max-width: 1050px) {
 .site .site-header__logo img { height: 30px; }
}
@media(max-width: 767px) {
 .site .site-header__logo img { height: 32px; }
 .site .site-footer__main { flex-direction: column; gap: 28px; }
 .site .site-footer__links { flex-wrap: wrap; gap: 36px; }
 .site .site-footer__logo img { height: 32px; }
}

/* 地域一覧のページ内ナビゲーション */
.site-page--area-index :where(.site) .ap-list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: start; gap: 56px; }
.site-page--area-index :where(.site) .ap-list-layout__main { min-width: 0; }
.site-page--area-index :where(.site) .ap-region { scroll-margin-top: calc(var(--site-header-h) + 24px); }
.site-page--area-index :where(.site) .ap-region-list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.site-page--area-index :where(.site) .ap-region { padding: 32px; border-radius: 20px; background: #edf8fc; }
.site-page--area-index :where(.site) .ap-region > h2 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 30px; padding: 0; border: 0; text-align: center; }
.site-page--area-index :where(.site) .ap-region__heading-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; color: var(--site-navy); }
.site-page--area-index :where(.site) .ap-region__heading-icon svg { display: block; width: 28px; height: 28px; }
.site-page--area-index :where(.site) .ap-prefecture,
.site-page--area-index :where(.site) .ap-prefecture__heading { background: var(--site-white); }
.site-page--area-index :where(.site) .ap-prefecture__toggle { flex-basis: 28px; width: 28px; height: 28px; background: transparent; }
.site-page--area-index :where(.site) .ap-list-layout__aside { position: sticky; top: calc(var(--site-header-h) + 24px); max-height: calc(100vh - var(--site-header-h) - 48px); overflow-y: auto; }
.site-page--area-index :where(.site) .ap-region-nav { padding: 24px; border: 2px solid var(--site-navy); border-radius: var(--site-radius-lg); background: var(--site-white); }
.site-page--area-index :where(.site) .ap-region-nav__title { margin: 0 0 18px; color: var(--site-navy); font-size: 18px; }
.site-page--area-index :where(.site) .ap-region-nav ul,
.site-page--area-index :where(.site) .ap-region-mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.site-page--area-index :where(.site) .ap-region-nav li + li { border-top: 1px solid var(--site-border); }
.site-page--area-index :where(.site) .ap-region-nav a,
.site-page--area-index :where(.site) .ap-region-mobile-nav__panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--site-navy); font-size: 14px; font-weight: 700; text-decoration: none; transition: color .2s ease; }
.site-page--area-index :where(.site) .ap-region-nav a:is(:hover,:focus-visible),
.site-page--area-index :where(.site) .ap-region-mobile-nav__panel a:is(:hover,:focus-visible) { color: var(--site-orange); }
.site-page--area-index :where(.site) .ap-region-nav a[aria-current="location"],
.site-page--area-index :where(.site) .ap-region-mobile-nav__panel a[aria-current="location"] { color: var(--site-orange); }
.site-page--area-index :where(.site) .ap-region-nav a span,
.site-page--area-index :where(.site) .ap-region-mobile-nav__panel a span { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; align-items: end; border-radius: 50%; color: transparent; background: var(--site-navy); font-size: 0; }
.site-page--area-index :where(.site) .ap-region-nav a span::before,
.site-page--area-index :where(.site) .ap-region-mobile-nav__panel a span::before { content: ''; display: block; width: 10px; height: 10px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 3.5 3 3 3-3' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.site-page--area-index :where(.site) .ap-region-mobile-nav { display: none; }
@media (max-width: 900px) {
  .site-page--area-index :where(.site) .ap-list-layout { grid-template-columns: minmax(0, 1fr); }
  .site-page--area-index :where(.site) .ap-region-list { gap: 28px; }
  .site-page--area-index :where(.site) .ap-region { padding: 24px; }
  .site-page--area-index :where(.site) .ap-list-layout__aside { display: none; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav { display: block; position: fixed; z-index: 190; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .site-page--area-index :where(.site) .ap-region-mobile-nav > summary { display: grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border-radius: 50%; color: #fff; background: var(--site-navy); box-shadow: var(--site-shadow); cursor: pointer; list-style: none; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav > summary svg { width: 22px; height: 22px; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav > summary::-webkit-details-marker { display: none; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav > summary:is(:hover,:focus-visible) { background: var(--site-navy); opacity: .88; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav__panel { position: absolute; right: 0; bottom: 60px; width: min(300px, calc(100vw - 36px)); max-height: min(470px, calc(100dvh - 108px)); overflow-y: auto; padding: 20px 24px; border-radius: var(--site-radius-lg); background: #fff; box-shadow: 0 12px 36px #10233f38; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav__panel p { margin: 0 0 12px; color: var(--site-navy); font-size: 18px; font-weight: 700; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav__panel li + li { border-top: 1px solid var(--site-border); }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes site-nav-dialog-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes site-nav-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes site-nav-dialog-exit {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes site-nav-backdrop-exit {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes ap-region-menu-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ap-region-menu-exit {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(6px); }
  }
  .site .site-nav-dialog[open] { animation: site-nav-dialog-enter .22s ease-out both; }
  .site .site-nav-dialog[open]::backdrop { animation: site-nav-backdrop-enter .22s ease-out both; }
  .site .site-nav-dialog__mobile-nav details[open] > :not(summary) { animation: site-nav-dialog-enter .18s ease-out both; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav[open] .ap-region-mobile-nav__panel { animation: ap-region-menu-enter .2s ease-out both; }
  .site .site-nav-dialog[open][data-closing] { animation: site-nav-dialog-exit .18s ease-in both; }
  .site .site-nav-dialog[open][data-closing]::backdrop { animation: site-nav-backdrop-exit .18s ease-in both; }
  .site .site-nav-dialog__mobile-nav details[open][data-closing] > :not(summary) { animation: site-nav-dialog-exit .18s ease-in both; }
  .site-page--area-index :where(.site) .ap-region-mobile-nav[open][data-closing] .ap-region-mobile-nav__panel { animation: ap-region-menu-exit .18s ease-in both; }
}

@media (max-width: 767px) {
  .site { --site-cta-padding-block: var(--site-sp-6); --site-cta-padding-inline: var(--site-sp-4); }
}

/* ==========================================================================
   7. not foundページ
   ========================================================================== */

:where(.site) .cp-not-found {
  margin-top: var(--site-sp-6);
  padding: var(--site-sp-7) var(--site-sp-7) var(--site-sp-8);
}

@media (max-width: 1024px) {
  :where(.site) .cp-not-found {
    padding: var(--site-sp-6) var(--site-sp-5) var(--site-sp-7);
  }
}

@media (max-width: 767px) {
  :where(.site) .cp-not-found {
    margin-top: var(--site-sp-4);
    /* スマホでは画面幅いっぱいに使い、内側の余白だけで読ませる */
    margin-inline: calc(var(--site-gutter) * -1);
    padding: var(--site-sp-5) var(--site-gutter) var(--site-sp-6);
  }
}