@charset "UTF-8";
/* ============================================================
   style.css — 引越しのミカタ（仮）トップページ
   構成: 1.トークン → 2.リセット/ベース → 3.レイアウト
        → 4.コンポーネント → 5.モーション → 6.停止ポリシー
   スターター基盤（web-production/assets/starter）を踏襲。
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  /* 色: 青系・フラット・どぎつくない。黄とオレンジは「行動」と「1位」にだけ使う */
  --c-bg: #f5f8fc;
  --c-surface: #ffffff;
  --c-sky: #e4eefb;
  --c-sky-2: #eef4fc;
  --c-ink: #162339;
  --c-body: #3b4a64;
  --c-muted: #6e7a90;
  --c-line: #d5dfee;
  --c-line-2: #e6ecf5;
  --c-blue: #1f5fd1;
  --c-blue-deep: #174baa;
  --c-blue-soft: #dbe7fa;
  --c-navy: #0f2a5c;
  --c-navy-2: #16397a;
  --c-sun: #ffc43a;
  --c-sun-soft: #fff1c9;
  --c-call: #ee6a2a;
  --c-call-deep: #d1551b;
  --c-ng: #d23b3b;
  --rank-1: #d9a62e;
  --rank-2: #98a4b5;
  --rank-3: #be8656;
  --rank-4: #7d8798;

  /* タイポ: 日本語は1家族（ウェイトで階層）、数字・英字はコンデンス */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* 型 */
  --space: 8px;
  --container: 1120px;
  --article: 760px;
  --side: 300px;
  --r-pill: 999px;
  --r-card: 16px;
  --r-in: 10px;
  --sh-card: 0 6px 24px rgba(23, 48, 100, 0.08);
  --sh-float: 0 16px 40px rgba(23, 48, 100, 0.16);
  --header-h: 64px;
  --fixed-cta-h: 78px;

  /* 階層 */
  --z-header: 100;
  --z-nav: 200;
  --z-fixed: 300;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.8s;
}

/* ---------- 2. リセット/ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-jp);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.9;
  font-size: 16px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
p, li, dd { color: var(--c-body); }
strong { color: var(--c-ink); }
em { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  line-break: strict;
}

.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sp-only { display: inline; }
.pc-only { display: none; }
.md-down { display: inline; }
@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: inline; }
}
@media (min-width: 1024px) {
  .md-down { display: none; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 仮・要確認マーク（本番前に削除） */
.flag {
  display: inline-block; vertical-align: middle;
  font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0;
  padding: 3px 6px; margin-left: 6px; border-radius: 4px;
  background: var(--c-sun-soft); color: #8a5a00; border: 1px dashed #e0b04a;
}
html.is-flag-off .flag { display: none; }

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }

.layout { display: grid; gap: 40px; }
.article { min-width: 0; }
.sidebar { display: none; }

@media (min-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr) var(--side); gap: 56px; align-items: start; }
  .article { max-width: var(--article); }
  .sidebar { display: block; position: sticky; top: calc(var(--header-h) + 24px); }
}

.sec { padding-block: 56px; }
.sec + .sec { padding-top: 0; }
@media (min-width: 768px) { .sec { padding-block: 72px; } }

/* 見出しシステム（全セクション共通） */
.h2 {
  position: relative;
  padding-left: 20px;
  text-wrap: balance;
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 900;
  line-height: 1.4;
}
.h2::before {
  content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em;
  width: 7px; border-radius: 4px; background: var(--c-blue);
}
.h2__sub {
  display: block; margin-top: 6px;
  font-family: var(--font-num); font-weight: 600; font-size: 14px; letter-spacing: 0.08em;
  color: var(--c-blue);
}
.lead { margin-top: 16px; color: var(--c-body); }

/* ---------- 4. コンポーネント ---------- */

/* ボタン（ピル型・2系統で全部賄う） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 26px;
  border-radius: var(--r-pill); border: 0;
  font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background 0.25s, opacity 0.25s;
}
.btn .ic { font-size: 22px; }
.btn--call { background: var(--c-call); color: #fff; box-shadow: 0 8px 20px rgba(238, 106, 42, 0.28); }
.btn--call:hover { background: var(--c-call-deep); }
.btn--form { background: var(--c-blue); color: #fff; box-shadow: 0 8px 20px rgba(31, 95, 209, 0.26); }
.btn--form:hover { background: var(--c-blue-deep); }
.btn--ghost { background: #fff; color: var(--c-blue); border: 2px solid var(--c-blue); box-shadow: none; }
.btn--ghost:hover { background: var(--c-sky); }
.btn:hover { transform: translateY(-2px); opacity: 1; }
.btn:disabled { opacity: 0.5; cursor: wait; transform: none; }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 14px; }
.btn--sm .ic { font-size: 18px; }
.btn--block { width: 100%; }
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.btn__num { font-family: var(--font-num); font-size: 24px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.btn__sub { font-size: 12px; font-weight: 500; opacity: 0.92; }

/* 順位バッジ・ナンバー */
.rank {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--rank-c, var(--c-blue)); color: #fff;
  font-family: var(--font-num); font-size: 26px; font-weight: 700; line-height: 1;
}
.rank--1 { --rank-c: var(--rank-1); }
.rank--2 { --rank-c: var(--rank-2); }
.rank--3 { --rank-c: var(--rank-3); }
.rank--4 { --rank-c: var(--rank-4); }

/* チップ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em;
  padding: 7px 11px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--c-line); color: var(--c-navy);
}
.chip--pr { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.chip--fill { background: var(--c-sky); border-color: transparent; }
.chip .ic { font-size: 14px; color: var(--c-blue); }

/* ヘッダー */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line-2);
  transition: box-shadow 0.4s;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(23, 48, 100, 0.08); }
.site-header__inner { display: flex; align-items: center; gap: 12px; height: 100%; }

.logo { display: flex; align-items: center; gap: 6px; text-decoration: none; min-width: 0; }
.logo:hover { opacity: 1; }
.logo__img { height: 36px; width: auto; display: block; }
.logo--footer { display: inline-block; background: #fff; border-radius: 10px; padding: 10px 14px; }
.logo--footer .logo__img { height: 44px; }
@media (min-width: 768px) { .logo__img { height: 40px; } .logo--footer .logo__img { height: 52px; } }
@media (min-width: 1200px) { .gnav a { padding: 8px 12px; font-size: 14px; } }

.gnav { display: none; }
.header-cta { display: none; }
.header-tel {
  display: inline-grid; place-items: center; margin-left: auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-call); color: #fff; text-decoration: none;
}
.header-tel .ic { font-size: 22px; }

/* ハンバーガー（SP） */
.nav-toggle {
  display: block; width: 44px; height: 44px; flex: none;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; margin: 5px auto; border-radius: 2px;
  background: var(--c-ink); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.global-nav {
  position: fixed; inset: 0; z-index: var(--z-nav);
  background: var(--c-bg);
  display: grid; place-content: center; padding-top: var(--header-h);
  opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
.global-nav.is-open { opacity: 1; visibility: visible; }
.global-nav__list { display: grid; gap: 14px; text-align: center; }
.global-nav__list a { font-size: 20px; font-weight: 700; text-decoration: none; color: var(--c-ink); }
.global-nav__cta { display: grid; gap: 12px; margin-top: 32px; width: min(320px, 80vw); }

@media (min-width: 1024px) {
  .nav-toggle, .global-nav, .header-tel { display: none; }
  .gnav { display: flex; gap: 2px; margin-left: auto; }
  .gnav a {
    padding: 8px 9px; border-radius: 8px; white-space: nowrap;
    font-size: 13px; font-weight: 500; text-decoration: none; color: var(--c-ink);
    transition: background 0.2s;
  }
  .header-cta .btn { white-space: nowrap; }
  .gnav a:hover { background: var(--c-sky); opacity: 1; }
  .gnav a.is-current { color: var(--c-blue); font-weight: 700; }
  .gnav a[aria-current="page"] { color: var(--c-blue); font-weight: 700; background: var(--c-sky-2); }
  .header-cta { display: flex; gap: 8px; margin-left: 8px; }
}

/* ヒーロー（カンプ再現: 街並み背景＋白見出し＋黄「おすすめランキング」、トロフィー／トラックは下端に自由配置） */
.hero { position: relative; --spill: 26px; }
.hero__band { position: relative; z-index: 2; color: #fff; background: #00bcfd; }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; text-align: center; padding-top: 22px; padding-bottom: 116px; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(20px, 5.6vw, 24px); font-weight: 900; line-height: 1.3; letter-spacing: 0.02em; color: #fff;
  text-shadow: 0 2px 8px rgba(8, 60, 130, 0.25);
}
.spark { position: relative; width: 22px; height: 26px; flex: none; }
.spark::before, .spark::after { content: ""; position: absolute; width: 3px; height: 16px; border-radius: 2px; background: var(--c-sun); }
.spark--l::before { left: 2px; top: 6px; transform: rotate(-28deg); }
.spark--l::after { left: 13px; top: 0; transform: rotate(-10deg); background: #fff; }
.spark--r::before { right: 2px; top: 6px; transform: rotate(28deg); }
.spark--r::after { right: 13px; top: 0; transform: rotate(10deg); background: #fff; }

.axes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.axis {
  display: inline-grid; place-items: center; flex: none;
  min-width: 84px; height: 42px; padding: 0 14px; border-radius: 999px;
  background: #fff; color: var(--c-navy);
  font-size: 20px; font-weight: 900; letter-spacing: 0.04em; line-height: 1;
  box-shadow: 0 4px 12px rgba(8, 60, 130, 0.18);
}

.hero__title { margin-top: 14px; line-height: 1.12; letter-spacing: 0.01em; color: #fff; }
.hero__title-wrap { display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; }
.hero__title-text { display: inline-block; font-weight: 900; white-space: nowrap; font-size: clamp(30px, 8.8vw, 36px); text-shadow: 0 3px 0 rgba(8, 60, 130, 0.22); }
.hero__title-em { display: block; color: #ffe100; }
.laurel { width: 18px; height: 46px; color: #ffe100; flex: none; align-self: flex-end; margin-bottom: 4px; }
.hero__lead { margin-top: 12px; font-size: clamp(14px, 3.9vw, 16px); font-weight: 700; line-height: 1.6; color: #fff; text-shadow: 0 2px 6px rgba(8, 60, 130, 0.25); text-wrap: balance; }
.hero__lead-ul { text-decoration: underline; text-decoration-color: #ffe100; text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* 自由配置のイラスト（バンド下端基準。少しはみ出す） */
.hero__trophy { position: absolute; z-index: 2; left: 2%; bottom: calc(var(--spill) * -1); width: clamp(88px, 24vw, 108px); height: auto; filter: drop-shadow(0 8px 14px rgba(8, 60, 130, 0.28)); pointer-events: none; }
.hero__staff { position: absolute; z-index: 2; right: 1%; bottom: calc(var(--spill) * -1); width: clamp(166px, 45vw, 198px); height: auto; filter: drop-shadow(0 8px 14px rgba(8, 60, 130, 0.22)); pointer-events: none; }

.hero__under { padding-top: calc(var(--spill) + 22px); }
.hero__cta { display: grid; gap: 12px; }
.hero__cta .btn { min-height: 68px; justify-content: center; }
.btn__label { font-size: 17px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.btn__stack .btn__sub { white-space: nowrap; }
.checks-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks-row li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--c-ink); }
.checks-row .ic { font-size: 20px; color: var(--c-blue); }
.hero__pr { margin-top: 10px; font-size: 12px; color: var(--c-muted); line-height: 1.6; }

@media (min-width: 768px) {
  .hero { --spill: 30px; }
  .hero__inner { padding-top: 30px; padding-bottom: 100px; }
  .hero__eyebrow { font-size: 27px; }
  .axis { min-width: 100px; height: 48px; font-size: 22px; }
  .hero__title { margin-top: 14px; }
  .hero__title-wrap { gap: 8px; }
  .hero__title-text { font-size: 40px; }
  .hero__title-em { display: inline; }
  .laurel { width: 22px; height: 54px; align-self: center; margin-bottom: 0; }
  .hero__lead { font-size: 17px; margin-top: 10px; }
  .hero__trophy { left: 2%; width: 118px; }
  .hero__staff { right: 1%; width: 192px; }
  .hero__under { padding-top: calc(var(--spill) + 22px); }
  .hero__cta { grid-template-columns: repeat(2, 280px); justify-content: center; }
  .checks-row { justify-content: center; }
  .checks-row li { font-size: 15px; }
  .hero__pr { text-align: center; }
}
@media (min-width: 1024px) {
  .hero { --spill: 40px; }
  .hero__inner { padding-top: 34px; padding-bottom: 100px; }
  .hero__eyebrow { font-size: 31px; }
  .axis { min-width: 108px; height: 52px; font-size: 24px; }
  .hero__title-wrap { gap: 10px; }
  .hero__title-text { font-size: 50px; }
  .laurel { width: 26px; height: 64px; }
  .hero__lead { font-size: 19px; }
  .hero__trophy { left: 3%; width: 162px; }
  .hero__staff { right: 1.5%; width: 262px; }
}
@media (min-width: 1200px) {
  .hero { --spill: 44px; }
  .hero__inner { padding-bottom: 108px; }
  .hero__under { padding-top: 28px; }
  .hero__title-text { font-size: 56px; }
  .laurel { width: 30px; height: 72px; }
  .hero__lead { font-size: 20px; }
  .hero__trophy { left: 3%; width: 188px; }
  .hero__staff { right: 1.5%; width: 292px; }
}
@media (min-width: 1440px) {
  .hero { --spill: 48px; }
  .hero__inner { padding-bottom: 112px; }
  .hero__trophy { left: 6%; width: 208px; }
  .hero__staff { right: 3.5%; width: 318px; }
}

/* この記事でわかること */
.learn {
  background: var(--c-sky-2); border: 1px solid var(--c-line-2); border-radius: var(--r-card);
  padding: 22px 20px;
}
.learn__title { font-size: 16px; font-weight: 900; color: var(--c-navy); display: flex; align-items: center; gap: 8px; }
.learn__title .ic { font-size: 20px; color: var(--c-blue); }
.learn__list { margin-top: 12px; display: grid; gap: 8px; }
.learn__list a {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; font-weight: 500; line-height: 1.6; text-decoration: none; color: var(--c-ink);
}
.learn__list a:hover { color: var(--c-blue); opacity: 1; }
.learn__list .ic { font-size: 18px; color: var(--c-blue); margin-top: 0.3em; }
.learn__meta { margin-top: 14px; font-size: 12px; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.learn__meta time { font-family: var(--font-num); font-weight: 600; letter-spacing: 0.04em; }

/* 比較早見表 */
.rank-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 24px; }
.rank-table th, .rank-table td { text-align: left; vertical-align: top; }
.rank-table th {
  background: var(--c-blue); color: #fff;
  font-size: 13px; font-weight: 700; padding: 12px 14px; white-space: nowrap;
}
.rank-table thead th:first-child { border-top-left-radius: 12px; }
.rank-table thead th:last-child { border-top-right-radius: 12px; }
.rank-table td {
  padding: 14px; font-size: 14px; line-height: 1.65; color: var(--c-body);
  background: #fff; border-bottom: 1px solid var(--c-line-2);
}
.rank-table tr.is-top td { background: var(--c-sun-soft); }
.rank-table tbody tr:last-child td { border-bottom: 1px solid var(--c-line); }
.rank-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.rank-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.rank-table td:first-child { border-left: 1px solid var(--c-line); }
.rank-table td:last-child { border-right: 1px solid var(--c-line); }
.rank-table .co { display: flex; align-items: center; gap: 10px; }
.rank-table .co a { font-weight: 700; color: var(--c-ink); text-decoration: none; font-size: 15px; line-height: 1.4; word-break: keep-all; }
.rank-table thead th:nth-child(1) { width: 32%; }
.rank-table thead th:nth-child(2) { width: 14%; }
.rank-table thead th:nth-child(3) { width: 30%; }
.rank-table thead th:nth-child(4) { width: 24%; }
.rank-table .co a:hover { color: var(--c-blue); opacity: 1; }
.score-num { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-num); font-weight: 900; font-size: 24px; letter-spacing: -0.02em; color: var(--c-ink); line-height: 1; white-space: nowrap; }
.score-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.score-num small { font-size: 12px; font-weight: 600; color: var(--c-muted); font-family: var(--font-jp); }
.stars { display: inline-flex; gap: 1px; color: var(--c-sun); margin-top: 4px; }
.stars .ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.stars .ic.is-half { opacity: 0.45; }
.stars .ic.is-off { color: #d5dce6; }

@media (max-width: 767px) {
  .rank-table thead { display: none; }
  .rank-table, .rank-table tbody, .rank-table tr, .rank-table td { display: block; }
  .rank-table tr { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; background: #fff; margin-top: 12px; }
  .rank-table tr.is-top { border-color: var(--rank-1); }
  .rank-table td { border: 0 !important; border-radius: 0 !important; padding: 10px 14px; }
  .rank-table td + td { border-top: 1px solid var(--c-line-2) !important; }
  .rank-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 11px; font-weight: 700; color: var(--c-blue); letter-spacing: 0.04em; margin-bottom: 2px;
  }
  .rank-table td.cell-co { padding: 14px; }
}
.table-note { margin-top: 12px; font-size: 12px; color: var(--c-muted); line-height: 1.7; }

/* 各社詳細カード */
.company {
  margin-top: 28px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card);
  box-shadow: var(--sh-card); overflow: hidden;
  border-top: 6px solid var(--rank-c, var(--c-blue));
}
.company--1 { --rank-c: var(--rank-1); }
.company--2 { --rank-c: var(--rank-2); }
.company--3 { --rank-c: var(--rank-3); }
.company--4 { --rank-c: var(--rank-4); }
.company__head { padding: 20px 18px 0; display: flex; gap: 14px; align-items: flex-start; }
.company__rank { display: flex; flex-direction: column; align-items: center; flex: none; color: var(--rank-c); }
.company__rank-num { font-family: var(--font-num); font-size: 40px; font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap; }
.company__rank-unit { font-size: 11px; font-weight: 700; color: var(--c-muted); }
.company__crown { font-size: 18px; margin-bottom: 2px; }
.company__crown .ic { width: 22px; height: 22px; fill: var(--c-sun); stroke: var(--c-sun); }
.company__title { font-size: clamp(19px, 2.6vw, 24px); font-weight: 900; line-height: 1.35; text-wrap: balance; }
.company__catch { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--c-blue); line-height: 1.55; text-wrap: balance; }
.company__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.company__body { padding: 18px; display: grid; gap: 22px; }
.company__shot { margin: 18px 18px 0; }
.company h4 {
  font-size: 18px; font-weight: 700; color: var(--c-navy); line-height: 1.5;
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.company h4::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--rank-c); }

/* ブラウザ風フレーム（スクショ差し替え枠） */
.frame { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; background: #fff; }
.frame__img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
.frame__bar { height: 28px; background: #edf2f9; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9d6ea; display: block; }
.frame__url { margin-left: 8px; height: 14px; flex: 1; max-width: 220px; border-radius: 7px; background: #fff; }
.frame__tag {
  margin-left: auto; flex: none;
  font-size: 10px; font-weight: 700; line-height: 1; padding: 5px 8px; border-radius: 999px;
  background: var(--c-ink); color: #fff; white-space: nowrap;
}
.frame__body {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c-sky) 0%, #ffffff 65%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 44px 16px 18px;
}
@media (min-width: 768px) { .frame__body { aspect-ratio: 16 / 8; padding: 52px 28px 24px; gap: 20px; } }
.frame__name { font-size: clamp(17px, 2.6vw, 24px); font-weight: 900; color: var(--c-navy); line-height: 1.3; text-wrap: balance; }
.frame__sub { margin-top: 6px; font-size: 12px; color: var(--c-muted); line-height: 1.5; }
.frame__kw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.frame__kw span { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--c-line); color: var(--c-navy); }
.frame__art { width: clamp(84px, 24vw, 190px); color: var(--c-blue); align-self: end; }
.frame__skel { position: absolute; left: 16px; top: 12px; display: flex; align-items: center; gap: 8px; }
.frame__skel i { display: block; height: 6px; width: 26px; border-radius: 3px; background: #ccd9ec; }
.frame__skel i:first-child { width: 22px; height: 12px; border-radius: 4px; background: #b6c8e4; margin-right: 6px; }
@media (min-width: 768px) { .frame__skel { left: 28px; top: 18px; } .frame__skel i { width: 40px; } .frame__watermark { display: block; } }
.frame__watermark {
  display: none; position: absolute; right: 16px; bottom: -10px; pointer-events: none;
  font-family: var(--font-num); font-weight: 900; font-size: 84px; line-height: 1; letter-spacing: -0.04em;
  color: var(--c-blue); opacity: 0.06;
}
.source { margin-top: 8px; font-size: 12px; color: var(--c-muted); }

/* 評価 */
.score-panel {
  display: grid; gap: 20px; align-items: center;
  background: #f1f5fa; border-radius: var(--r-card); padding: 22px 20px;
}
.score-panel__total { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 16px; }
.score-panel__label { grid-column: 1 / -1; font-size: 15px; font-weight: 700; color: #5b6678; }
.score-panel__num { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.score-panel__big { font-family: var(--font-num); font-size: 52px; font-weight: 900; letter-spacing: -0.02em; color: var(--c-ink); }
.score-panel__max { font-family: var(--font-num); font-size: 20px; font-weight: 500; color: var(--c-muted); }
.score-panel__stars { margin-top: 0; }
.score-panel__stars .ic { width: 22px; height: 22px; }
.score-panel .flag { justify-self: start; margin-left: 0; }
.bars { display: grid; gap: 14px; }
.bar { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 2.4em; align-items: center; gap: 14px; font-size: 16px; }
.bar dt { font-weight: 700; color: var(--c-ink); }
.bar dd { height: 12px; border-radius: 6px; background: #dce3ee; overflow: hidden; }
.bar dd i { display: block; height: 100%; width: var(--w, 0%); border-radius: 6px; background: #2350b9; transition: width 1s var(--ease-out); }
.bar .bar__val { font-family: var(--font-num); font-weight: 700; font-size: 17px; color: var(--c-ink); text-align: right; }
@media (min-width: 768px) {
  .score-panel { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 30px 36px; }
  .score-panel__total { grid-template-columns: 1fr; gap: 8px; }
  .score-panel__label { grid-column: auto; }
  .bars { gap: 18px; }
  .bar { grid-template-columns: 6.5em minmax(0, 1fr) 2.6em; gap: 18px; font-size: 17px; }
}

/* おすすめポイント */
.points { display: grid; gap: 12px; }
.point { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.point__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--c-sky); color: var(--c-blue);
}
.point__icon .ic { font-size: 22px; }
.point__title { font-size: 15px; font-weight: 700; color: var(--c-ink); line-height: 1.5; }
.point__body { font-size: 14px; line-height: 1.75; margin-top: 2px; }
.company__text { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--c-line-2); }
.company__text p { font-size: 15px; line-height: 1.95; color: var(--c-body); text-wrap: pretty; }
.company__text p + p { margin-top: 12px; }

/* 基本情報 */
.spec { border: 1px solid var(--c-line); border-radius: var(--r-in); overflow: hidden; }
.spec__row { display: grid; grid-template-columns: 7em 1fr; }
.spec__row + .spec__row { border-top: 1px solid var(--c-line-2); }
.spec dt { background: var(--c-sky-2); padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--c-navy); }
.spec dd { padding: 10px 12px; font-size: 14px; line-height: 1.7; text-wrap: pretty; }
@media (min-width: 768px) { .spec__row { grid-template-columns: 9em 1fr; } }
.price-list { display: grid; gap: 2px; }
.price-list li { display: flex; flex-wrap: wrap; column-gap: 10px; }
.price-list li span:first-child { min-width: 5.4em; color: var(--c-body); }
.price-list__val { font-family: var(--font-num); font-weight: 700; color: var(--c-ink); white-space: nowrap; }
@media (min-width: 768px) { .price-list li { column-gap: 12px; } .price-list li span:first-child { min-width: 6.5em; } }
.spec__note { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--c-muted); }

/* 口コミ */
.reviews__source { margin-bottom: 14px; font-size: 14px; font-weight: 700; color: var(--c-ink); line-height: 1.6; }
.reviews__source a { color: var(--c-blue); text-underline-offset: 3px; }
.reviews__source span { display: block; font-size: 12px; font-weight: 400; color: var(--c-muted); }
.reviews { display: grid; gap: 14px; }
.review {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #f8fafd; border: 1.5px dashed #c7d2e2; border-radius: var(--r-card); padding: 20px 22px;
}
.review__tag { font-size: 12px; font-weight: 700; color: #4a5870; background: #e6ecf4; border-radius: 8px; padding: 5px 10px; line-height: 1.4; }
.review__stars { margin-top: 12px; }
.review__stars .ic { width: 18px; height: 18px; }
.review__theme { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--c-ink); line-height: 1.6; }
.review__text { margin-top: 6px; font-size: 15px; line-height: 1.9; color: var(--c-body); text-wrap: pretty; }
.review__meta { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; line-height: 1.6; color: var(--c-muted); }
.review__src { color: var(--c-blue); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.reviews__note { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--c-muted); }
@media (min-width: 768px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* こんな人に */
.fit-box { background: #f5e9dc; border-radius: var(--r-card); padding: 20px 16px 22px; }
.company .fit-box__title { color: #5a3a1e; font-weight: 900; margin-bottom: 12px; }
.company .fit-box__title::before { display: none; }
.fit { display: grid; gap: 10px; }
.fit li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.6; color: #2b2622; text-wrap: pretty; }
.fit__text { word-break: keep-all; overflow-wrap: anywhere; }
.fit__check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px; background: #c68b57; color: #fff; }
.fit__check .ic { width: 15px; height: 15px; stroke-width: 3; }
@media (min-width: 768px) { .fit-box { padding: 26px 32px 28px; } .fit li { font-size: 16px; gap: 12px; } }

/* カード内CTA */
.company__cta { background: var(--c-sky-2); border-radius: var(--r-in); padding: 16px; display: grid; gap: 10px; }
.company__cta .btn { min-height: 64px; }
.related {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag arrow" "title arrow"; align-items: center; gap: 8px 12px;
  padding: 16px 18px; border: 1.5px solid var(--c-line); border-radius: var(--r-card); background: #fff;
  text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.related:hover { opacity: 1; border-color: var(--c-blue); box-shadow: var(--sh-card); }
.related__tag { grid-area: tag; justify-self: start; font-size: 13px; font-weight: 700; color: var(--c-blue); background: var(--c-sky); border-radius: 8px; padding: 6px 12px; line-height: 1.4; }
.related__title { grid-area: title; min-width: 0; font-size: 15px; font-weight: 700; color: var(--c-ink); line-height: 1.6; text-wrap: pretty; }
.related__arrow { grid-area: arrow; width: 20px; height: 20px; color: var(--c-blue); stroke-width: 2.4; }
@media (min-width: 768px) {
  .related { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag title arrow"; padding: 18px 24px; gap: 18px; }
  .related__title { font-size: 16px; text-wrap: balance; }
}
.company__cta .btn { width: 100%; }
.cta-note { font-size: 12px; color: var(--c-muted); line-height: 1.6; text-align: center; }
@media (min-width: 768px) {
  .company__head { padding: 32px 32px 0; gap: 18px; }
  .company__shot { margin: 20px 32px 0; }
  .company__body { padding: 32px; gap: 28px; }
  .company__rank-num { font-size: 50px; }
  .company__cta { grid-template-columns: 1fr 1fr; padding: 18px; }
  .company__cta .cta-note { grid-column: 1 / -1; }
}

/* 依頼前の4つのチェック（段ボール地＝破調） */
.checksheet {
  position: relative;
  margin-inline: -20px;
  padding: 44px 20px 30px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 3px, rgba(91, 59, 29, 0.045) 3px 6px, transparent 6px 10px),
    linear-gradient(180deg, #e2be8f, #d9b07d);
}
.checksheet::before {
  content: ""; position: absolute; left: 50%; top: -10px;
  width: 120px; height: 30px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 250, 240, 0.62);
  box-shadow: 0 1px 2px rgba(91, 59, 29, 0.15);
}
.checksheet__title {
  font-size: clamp(23px, 5.6vw, 30px); font-weight: 900; line-height: 1.45;
  color: var(--c-ink);
}
.checksheet__lead { margin-top: 12px; font-size: 15px; line-height: 1.85; color: #3a2a17; text-wrap: pretty; }
.checks {
  margin-top: 20px; padding: 6px 18px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 3px 0 rgba(91, 59, 29, 0.18);
}
.check { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
.check + .check { border-top: 1px dashed #d9c6ab; }
.check__box {
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: 1px;
  border: 2.5px solid var(--c-ink); border-radius: 7px;
  color: var(--c-blue);
}
.check__box .ic { font-size: 19px; stroke-width: 3.2; }
.check__title { font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--c-ink); word-break: auto-phrase; text-wrap: pretty; }
.check__body p { margin-top: 6px; font-size: 14.5px; line-height: 1.8; color: var(--c-body); text-wrap: pretty; }
.check__link {
  display: inline-block; margin-top: 8px;
  font-size: 13.5px; font-weight: 700; line-height: 1.6; color: var(--c-blue);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  word-break: auto-phrase; text-wrap: pretty;
}
.check__link:hover { color: var(--c-blue-deep); text-decoration-thickness: 2px; }
.checksheet__cta { display: grid; gap: 12px; margin-top: 22px; }
.checksheet__cta p { font-weight: 700; font-size: 16px; line-height: 1.7; color: var(--c-ink); word-break: auto-phrase; text-wrap: pretty; }
.checksheet__cta .btn { min-height: 64px; justify-content: center; }
@media (min-width: 768px) {
  .checksheet { margin-inline: 0; padding: 52px 40px 38px; border-radius: 22px; }
  .checks { padding: 8px 28px; }
  .checksheet__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
}

/* ご相談の流れ（縦のタイムライン） */
.flow { margin-top: 24px; display: grid; gap: 0; }
.flow__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.flow__step:last-child { padding-bottom: 0; }
.flow__step:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px;
  border-left: 2px dashed #c3d4f0;
}
.flow__num {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-blue); color: #fff;
  font-family: var(--font-num); font-weight: 700; font-size: 19px;
  position: relative; z-index: 1;
}
.flow__title { font-size: 17px; font-weight: 700; line-height: 1.5; padding-top: 9px; color: var(--c-ink); word-break: auto-phrase; }
.flow__body p { margin-top: 4px; font-size: 14.5px; line-height: 1.8; color: var(--c-body); text-wrap: pretty; }
@media (min-width: 768px) {
  .flow__step { padding-bottom: 26px; }
}

/* FAQ */
.faq { margin-top: 20px; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--c-line); border-radius: var(--r-in); background: #fff; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 28px 1fr 28px; gap: 10px; align-items: start;
  padding: 16px 16px; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--c-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span:nth-child(2) { text-wrap: balance; }
.faq summary .q { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c-blue); color: #fff; font-family: var(--font-num); font-size: 16px; font-weight: 700; margin-top: 0.1em; }
.faq summary .tg { width: 28px; height: 28px; display: grid; place-items: center; color: var(--c-blue); transition: transform 0.3s var(--ease-out); margin-top: 0.1em; }
.faq summary .tg .ic { font-size: 20px; }
.faq details[open] summary .tg { transform: rotate(180deg); }
.faq__a { padding: 0 16px 16px 54px; font-size: 14px; line-height: 1.8; color: var(--c-body); }
.faq__a p + p { margin-top: 6px; }

/* お問い合わせ（電話カード＋フォーム） */
.contact { background: var(--c-sky-2); border: 1px solid var(--c-line-2); border-radius: var(--r-card); padding: 24px 18px; }
.tel-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-in); padding: 18px 16px; text-align: center; }
.tel-card__label { font-size: 14px; font-weight: 700; color: var(--c-navy); }
.tel-card__num { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-num); font-size: 38px; font-weight: 700; color: var(--c-call); text-decoration: none; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.tel-card__num .ic { font-size: 30px; }
.tel-card__hours { margin-top: 6px; font-size: 13px; color: var(--c-body); }
.tel-card__note { margin-top: 2px; font-size: 12px; color: var(--c-muted); }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 12px; font-weight: 700; color: var(--c-muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

.form { display: grid; gap: 16px; }
.form__field { display: grid; gap: 6px; align-content: start; }
.form__field label { font-size: 14px; font-weight: 700; color: var(--c-ink); }
.form__field .required, .form__field .optional { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; vertical-align: middle; }
.form__field .required { background: var(--c-call); color: #fff; }
.form__field .optional { background: var(--c-line-2); color: var(--c-muted); }
.form input, .form textarea, .form select {
  font: inherit; width: 100%; padding: 13px 14px;
  background: #fff; color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--r-in);
}
.form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fd1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--c-blue); outline: none; box-shadow: 0 0 0 3px rgba(31, 95, 209, 0.18); }
.form [aria-invalid="true"] { border-color: var(--c-ng); }
.form__error { color: var(--c-ng); font-size: 13px; min-height: 1.2em; line-height: 1.4; }
.form__hp { position: absolute; left: -9999px; }  /* ハニーポット: 削除禁止 */
.form__row { display: grid; gap: 16px; }
.form__privacy { font-size: 12px; color: var(--c-muted); line-height: 1.7; }
.form__submit { display: grid; gap: 8px; }
.form__submit .btn { width: 100%; min-height: 60px; font-size: 17px; }
@media (min-width: 768px) {
  .contact { padding: 32px 28px; }
  .form__row { grid-template-columns: 1fr 1fr; }
  .form__submit .btn { width: auto; min-width: 320px; justify-self: center; }
}

/* サイドバー（PC追従） */
.side-cta { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 20px; }
.side-cta__title { font-size: 15px; font-weight: 900; color: var(--c-navy); text-align: center; }
.side-cta__title span { display: block; font-size: 12px; font-weight: 500; color: var(--c-muted); margin-top: 2px; }
.side-cta .btn { width: 100%; margin-top: 12px; }
.side-cta .btn--call { padding-block: 8px; }
.side-cta__hours { margin-top: 8px; font-size: 12px; color: var(--c-muted); text-align: center; line-height: 1.6; }
.toc { margin-top: 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 18px 20px; }
.toc__title { font-size: 13px; font-weight: 700; color: var(--c-muted); letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.toc__title .ic { font-size: 16px; color: var(--c-blue); }
.toc__list { margin-top: 8px; display: grid; }
.toc__list a {
  display: block; padding: 7px 10px 7px 14px; border-left: 3px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--c-body); text-decoration: none; line-height: 1.5;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.toc__list a:hover { color: var(--c-blue); opacity: 1; }
.toc__list a.is-current { color: var(--c-blue); font-weight: 700; border-color: var(--c-blue); background: var(--c-sky-2); }
.toc__list a.toc__sub { padding-left: 26px; font-size: 12px; }

/* ブログ（全幅・記事カラムを出る） */
.blog { background: #fff; border-top: 1px solid var(--c-line-2); padding-block: 56px; }
.blog__head { display: grid; gap: 16px; }
.blog__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.blog__grid { margin-top: 28px; display: grid; gap: 18px; }
.post { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.post:hover { opacity: 1; transform: translateY(-4px); box-shadow: var(--sh-float); }
.post__thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; }
.post__thumb .ic { font-size: 44px; opacity: 0.95; }
.post__thumb::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.post__thumb--a { background: linear-gradient(135deg, #1f5fd1, #5f94ea); }
.post__thumb--b { background: linear-gradient(135deg, #0f2a5c, #1f5fd1); }
.post__thumb--c { background: linear-gradient(135deg, #2a7de1, #7fb7f5); }
.post__thumb--d { background: linear-gradient(135deg, #16397a, #3f78d8); }
.post__body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.post__cat { font-size: 11px; font-weight: 700; color: var(--c-blue); letter-spacing: 0.04em; }
.post__title { font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--c-ink); }
.post__date { font-family: var(--font-num); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--c-muted); }
.blog__more { margin-top: 24px; display: flex; justify-content: center; }
.blog__note { margin-top: 14px; text-align: center; font-size: 12px; color: var(--c-muted); }
@media (min-width: 768px) { .blog { padding-block: 72px; } .blog__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .blog__head { grid-template-columns: 1fr auto; align-items: end; } .blog__grid { grid-template-columns: repeat(3, 1fr); } }

/* フッター */
.site-footer { background: var(--c-navy); color: #fff; padding: 48px 0 calc(32px + var(--fixed-cta-h) + env(safe-area-inset-bottom)); }
.site-footer p, .site-footer li { color: rgba(255, 255, 255, 0.78); }
.site-footer__grid { display: grid; gap: 28px; }
.site-footer__desc { margin-top: 14px; font-size: 13px; line-height: 1.8; max-width: 34em; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 24px; justify-content: start; }
.site-footer__nav a { font-size: 13px; text-decoration: none; color: rgba(255, 255, 255, 0.86); }
.site-footer__nav a:hover { color: var(--c-sun); opacity: 1; }
.site-footer__info { font-size: 12px; line-height: 1.8; }
.site-footer__info dt { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
.site-footer__info dd { color: #fff; margin-bottom: 8px; }
.site-footer__pr { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 11px; line-height: 1.8; color: rgba(255, 255, 255, 0.62); }
.site-footer__pr .pr-badge { display: inline-block; font-family: var(--font-num); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; padding: 2px 8px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 4px; margin-right: 8px; color: #fff; }
.site-footer__copy { margin-top: 16px; font-size: 12px; color: rgba(255, 255, 255, 0.55); font-family: var(--font-num); letter-spacing: 0.06em; }
@media (min-width: 768px) { .site-footer { padding-top: 64px; } .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
@media (min-width: 1024px) { .site-footer { padding-bottom: 36px; } }

/* 下部固定CTA（SP） */
.fixed-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fixed);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-line);
  transition: transform 0.35s var(--ease-out);
}
.fixed-cta.is-hidden, body.is-menu-open .fixed-cta { transform: translateY(110%); }
body.is-menu-open .flag-toggle, body.is-menu-open .motion-stop { display: none; }
body.is-menu-open .site-header { z-index: calc(var(--z-nav) + 1); }
.fixed-cta .btn { min-height: 54px; padding: 8px 10px; font-size: 14px; gap: 8px; }
.fixed-cta .btn .ic { font-size: 20px; }
.fixed-cta .btn__stack { align-items: flex-start; }
.fixed-cta .btn__num { font-size: 18px; }
.fixed-cta .btn__sub { font-size: 10px; }
@media (min-width: 1024px) { .fixed-cta { display: none; } }

/* 仮マーク切替（本番前に削除） */
.flag-toggle {
  position: fixed; left: 12px; bottom: calc(var(--fixed-cta-h) + 10px + env(safe-area-inset-bottom)); z-index: var(--z-fixed);
  padding: 6px 10px; font-size: 10px; font-weight: 700; opacity: 0.9;
  background: #fff; border: 1px dashed #e0b04a; color: #8a5a00; border-radius: 999px; cursor: pointer;
  box-shadow: var(--sh-card);
}
.fixed-cta.is-hidden ~ .flag-toggle { bottom: 12px; }
@media (min-width: 1024px) { .flag-toggle { bottom: 14px; } }

/* ---------- 5. モーション基盤 ---------- */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ヒーローのロードシーケンス（JSありのときだけ初期非表示） */
html.js .hero__eyebrow, html.js .hero__title, html.js .hero__lead, html.js .hero__cta, html.js .hero__trophy, html.js .hero__staff, html.js .axis { opacity: 0; }
html.js.is-loaded .hero__eyebrow { animation: heroUp 0.7s var(--ease-out) 0.05s forwards; }
html.js.is-loaded .axis:nth-child(1) { animation: heroPop 0.5s var(--ease-out) 0.15s forwards; }
html.js.is-loaded .axis:nth-child(2) { animation: heroPop 0.5s var(--ease-out) 0.23s forwards; }
html.js.is-loaded .axis:nth-child(3) { animation: heroPop 0.5s var(--ease-out) 0.31s forwards; }
html.js.is-loaded .axis:nth-child(4) { animation: heroPop 0.5s var(--ease-out) 0.39s forwards; }
html.js.is-loaded .hero__title { animation: heroUp 0.9s var(--ease-out) 0.45s forwards; }
html.js.is-loaded .hero__lead { animation: heroUp 0.9s var(--ease-out) 0.58s forwards; }
html.js.is-loaded .hero__cta { animation: heroUp 0.9s var(--ease-out) 0.7s forwards; }
html.js.is-loaded .hero__trophy { animation: heroPop 0.9s var(--ease-out) 0.3s forwards; }
html.js.is-loaded .hero__staff { animation: heroPop 0.9s var(--ease-out) 0.4s forwards; }
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroPop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }


/* 評価バーは可視化時に伸びる */
.bars .bar dd i { width: 0; }
.is-inview .bars .bar dd i, html:not(.js) .bars .bar dd i { width: var(--w); }

/* ---------- 6. モーション停止（SKILL.mdのポリシー実装。削除禁止） ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 12px; bottom: calc(var(--fixed-cta-h) + 10px + env(safe-area-inset-bottom)); z-index: var(--z-modal);
  padding: 8px 14px; font-size: 12px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 999px; cursor: pointer; box-shadow: var(--sh-card);
}
@media (min-width: 1024px) { .motion-stop { bottom: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .motion-stop { display: block; }
}
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal { opacity: 1; transform: none; }
html.is-motion-off .hero__eyebrow, html.is-motion-off .hero__title, html.is-motion-off .hero__lead,
html.is-motion-off .hero__cta, html.is-motion-off .hero__trophy, html.is-motion-off .hero__staff, html.is-motion-off .axis { opacity: 1; animation: none; }
html.is-motion-off .bars .bar dd i { width: var(--w); }

/* フレームの順位ウォーターマークはタブレット以上でのみ表示 */
@media (min-width: 768px) { .frame__watermark { display: block; } }
.fixed-cta.is-hidden ~ .motion-stop { bottom: 12px; }
@media (min-width: 1024px) { .fixed-cta.is-hidden ~ .motion-stop { bottom: 14px; } }

/* ============================================================
   7. 追加部品（v1.8）: ページ先頭へ／同意チェック／下層ページ
   ============================================================ */

/* ページ先頭へ戻る（SPは固定CTAの上、PCは右下） */
.to-top {
  position: fixed; right: 14px; bottom: calc(var(--fixed-cta-h) + 14px + env(safe-area-inset-bottom)); z-index: var(--z-fixed);
  display: grid; place-items: center; align-content: center; gap: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--c-blue); border: 2px solid var(--c-blue);
  box-shadow: var(--sh-card); text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0.3s, background 0.2s, color 0.2s, bottom 0.35s var(--ease-out);
}
.to-top .ic { font-size: 22px; margin-top: -2px; }
.to-top span { font-family: var(--font-num); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; line-height: 1; margin-top: -3px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-blue); color: #fff; opacity: 1; }
.to-top:focus-visible { outline: 3px solid var(--c-sun); outline-offset: 3px; }
.fixed-cta.is-hidden ~ .to-top { bottom: calc(14px + env(safe-area-inset-bottom)); }
body.is-menu-open .to-top { display: none; }
@media (min-width: 1024px) {
  .to-top, .fixed-cta.is-hidden ~ .to-top { right: 24px; bottom: 24px; width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { bottom: calc(var(--fixed-cta-h) + 64px + env(safe-area-inset-bottom)); }
  .fixed-cta.is-hidden ~ .to-top { bottom: 60px; }
  @media (min-width: 1024px) { .to-top, .fixed-cta.is-hidden ~ .to-top { bottom: 64px; } }
}

/* フォームの同意チェック */
.form__consent { display: grid; gap: 4px; justify-items: center; }
.consent { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.form .consent input[type="checkbox"] { width: 22px; height: 22px; padding: 0; flex: none; accent-color: var(--c-blue); cursor: pointer; }
.consent .required { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--c-call); color: #fff; vertical-align: middle; }
.consent a { color: var(--c-blue); text-underline-offset: 3px; }
.form__privacy { text-align: center; }

/* ---------- 下層ページ共通 ---------- */
.sub-main { padding-bottom: 8px; }

/* 下層ヘッダー：FVと同じ街並みのバンドを低く敷く */
.page-head { position: relative; overflow: hidden; color: #fff; background: #00bcfd; }
.page-head__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; }
.page-head__inner { position: relative; z-index: 1; padding: 14px 0 46px; }
.page-head__en { margin-top: 18px; font-family: var(--font-num); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: #ffe100; text-shadow: 0 2px 6px rgba(8, 60, 130, 0.25); }
.page-head__title { margin-top: 4px; font-size: clamp(24px, 6vw, 36px); font-weight: 900; line-height: 1.35; color: #fff; text-shadow: 0 3px 0 rgba(8, 60, 130, 0.22); text-wrap: balance; }
.page-head__lead { margin-top: 10px; max-width: 40em; font-size: 14px; font-weight: 700; line-height: 1.75; color: #fff; text-shadow: 0 2px 6px rgba(8, 60, 130, 0.25); text-wrap: pretty; }
@media (min-width: 768px) { .page-head__inner { padding: 18px 0 64px; } .page-head__lead { font-size: 15px; } }

/* パンくず */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; list-style: none; padding: 0; font-size: 12px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.92); }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; }
.breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.breadcrumb [aria-current="page"] { font-weight: 700; }
.breadcrumb--light li { color: var(--c-muted); }
.breadcrumb--light a { color: var(--c-blue); }

/* 下層の本文レイアウト（記事カラム＋サイドバーはトップと共通の .layout を使う） */
.sub-body { padding-top: 32px; }
@media (min-width: 768px) { .sub-body { padding-top: 44px; } }
.side-block { margin-top: 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 18px 20px; }
.side-block__title { font-size: 13px; font-weight: 700; color: var(--c-muted); letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.side-block__title .ic { font-size: 16px; color: var(--c-blue); }
.side-cats { margin-top: 10px; display: grid; }
.side-cats a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px dashed var(--c-line); font-size: 14px; font-weight: 700; color: var(--c-ink); text-decoration: none; }
.side-cats a:first-child { border-top: 0; }
.side-cats a:hover { color: var(--c-blue); opacity: 1; }
.side-cats small { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--c-muted); }
.side-rank { margin-top: 10px; display: grid; gap: 8px; }
.side-rank a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); font-size: 13px; font-weight: 700; line-height: 1.5; }
.side-rank a:hover { color: var(--c-blue); opacity: 1; }

/* ---------- ブログ一覧 ---------- */
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; font-size: 13px; font-weight: 700; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.cat-tabs a .ic { font-size: 15px; color: var(--c-blue); }
.cat-tabs a:hover { border-color: var(--c-blue); color: var(--c-blue); opacity: 1; }
.cat-tabs a[aria-current="page"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.cat-tabs a[aria-current="page"] .ic { color: #fff; }
@media (min-width: 768px) { .cat-tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.feature { margin-top: 24px; display: grid; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sh-card); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.feature:hover { opacity: 1; transform: translateY(-4px); box-shadow: var(--sh-float); }
.feature .post__thumb { aspect-ratio: 16 / 9; }
.feature .post__thumb .ic { font-size: 64px; }
.feature__body { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: center; }
.feature__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c-call); }
.feature__title { font-size: clamp(18px, 2.4vw, 22px); font-weight: 900; line-height: 1.5; color: var(--c-ink); text-wrap: pretty; }
.feature__excerpt { font-size: 14px; line-height: 1.8; color: var(--c-body); }
@media (min-width: 768px) { .feature { grid-template-columns: 1.1fr 1fr; } .feature .post__thumb { aspect-ratio: auto; min-height: 100%; } .feature__body { padding: 26px 28px; } }

.post-list { margin-top: 28px; display: grid; gap: 18px; }
@media (min-width: 640px) { .post-list { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.post__excerpt { font-size: 13px; line-height: 1.7; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pager { margin-top: 36px; display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; padding: 0; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--c-ink); text-decoration: none; }
.pager a:hover { border-color: var(--c-blue); color: var(--c-blue); opacity: 1; }
.pager [aria-current="page"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.pager .pager__gap { border: 0; background: none; min-width: 20px; padding: 0; }

/* ---------- 記事ページ ---------- */
.entry__head { display: grid; gap: 12px; }
.entry__cat { justify-self: start; }
.entry__title { font-size: clamp(22px, 5.2vw, 30px); font-weight: 900; line-height: 1.45; color: var(--c-ink); text-wrap: pretty; }
.entry__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--c-muted); }
.entry__meta time { font-family: var(--font-num); font-weight: 600; letter-spacing: 0.04em; }
.entry__pr { font-size: 12px; color: var(--c-muted); background: #fff; border: 1px solid var(--c-line-2); border-radius: var(--r-in); padding: 8px 12px; }
.entry__pr .pr-badge { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--c-muted); border-radius: 4px; font-family: var(--font-num); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; color: var(--c-ink); }
.entry__eyecatch { margin-top: 20px; border-radius: var(--r-card); overflow: hidden; }
.entry__eyecatch .post__thumb { aspect-ratio: 16 / 8; }
.entry__eyecatch .post__thumb .ic { font-size: 72px; }
.entry__summary { margin-top: 22px; background: var(--c-sky-2); border: 1px solid var(--c-blue-soft); border-radius: var(--r-card); padding: 18px 20px; }
.entry__summary-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; color: var(--c-navy); }
.entry__summary-title .ic { font-size: 18px; color: var(--c-blue); }
.entry__summary ul { margin-top: 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.entry__summary li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.75; color: var(--c-ink); }
.entry__summary li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-blue); }

.entry-toc { margin-top: 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 18px 20px; }
.entry-toc__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; color: var(--c-ink); }
.entry-toc__title .ic { font-size: 18px; color: var(--c-blue); }
.entry-toc ol { margin-top: 10px; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.entry-toc li { counter-increment: toc; }
.entry-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 7px 0; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--c-ink); text-decoration: none; border-top: 1px dashed var(--c-line); }
.entry-toc li:first-child a { border-top: 0; }
.entry-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-num); font-weight: 700; color: var(--c-blue); }
.entry-toc a:hover { color: var(--c-blue); opacity: 1; }

/* 本文タイポ（WordPressの the_content() をそのまま受ける想定） */
.prose { margin-top: 8px; color: var(--c-body); font-size: 16px; line-height: 1.95; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { position: relative; margin-top: 2.6em; padding: 14px 16px 14px 22px; font-size: clamp(19px, 4.4vw, 23px); font-weight: 900; line-height: 1.5; color: var(--c-ink); background: var(--c-sky-2); border-radius: var(--r-in); text-wrap: pretty; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h2::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 6px; border-radius: 0 4px 4px 0; background: var(--c-blue); }
.prose h3 { margin-top: 2em; padding-bottom: 8px; border-bottom: 2px solid var(--c-line); font-size: 18px; font-weight: 900; line-height: 1.55; color: var(--c-ink); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose p { text-wrap: pretty; }
.prose strong { color: var(--c-ink); background: linear-gradient(transparent 62%, #fff1a8 62%); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--c-blue); text-underline-offset: 3px; }
.prose a.btn { color: #fff; text-decoration: none; }
.prose .article-cta__btns, .prose .mini-rank { margin-top: 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; background: #fff; border-radius: var(--r-in); overflow: hidden; border: 1px solid var(--c-line); }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); vertical-align: top; text-align: left; }
.prose thead th { background: var(--c-blue); color: #fff; font-weight: 700; }
.prose tbody th { width: 30%; background: var(--c-sky-2); color: var(--c-ink); font-weight: 700; }
.prose .table-wrap { overflow-x: auto; }
.prose .table-wrap table { min-width: 520px; }

.box { border-radius: var(--r-card); padding: 16px 18px; font-size: 15px; line-height: 1.85; }
.box__title { display: flex; align-items: center; gap: 8px; font-weight: 900; color: var(--c-ink); }
.box__title .ic { font-size: 18px; }
.box p { margin-top: 6px; }
.box ul { margin-top: 6px; }
.box--point { background: var(--c-sun-soft); border: 1px solid #f2d27a; }
.box--point .box__title .ic { color: #b07a00; }
.box--note { background: #fff; border: 1px solid var(--c-line); }
.box--note .box__title .ic { color: var(--c-blue); }

/* 記事内CTA（トップの電話・フォームと同じボタン） */
.article-cta { margin-top: 2.4em; border-radius: var(--r-card); padding: 22px 20px; background: var(--c-navy); color: #fff; text-align: center; }
.article-cta__title { font-size: 18px; font-weight: 900; line-height: 1.5; color: #fff; text-wrap: balance; }
.article-cta__lead { margin-top: 6px; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); }
.article-cta__btns { margin-top: 14px; display: grid; gap: 10px; }
.article-cta .btn { min-height: 64px; justify-content: center; }
@media (min-width: 768px) { .article-cta { padding: 28px; } .article-cta__btns { grid-template-columns: 1fr 1fr; } }

/* この記事で紹介した業者（トップの各社カードへ） */
.mini-rank { margin-top: 1.2em; display: grid; gap: 10px; }
.mini-rank a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-in); text-decoration: none; color: var(--c-ink); transition: border-color 0.2s, transform 0.3s var(--ease-out); }
.mini-rank a:hover { border-color: var(--c-blue); transform: translateX(3px); opacity: 1; }
.mini-rank__name { font-size: 15px; font-weight: 900; line-height: 1.4; }
.mini-rank__desc { display: block; font-size: 12px; font-weight: 500; color: var(--c-muted); margin-top: 2px; }
.mini-rank .ic { font-size: 18px; color: var(--c-blue); }

.author { margin-top: 2.6em; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 18px; }
.author__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-sky); color: var(--c-blue); }
.author__icon .ic { font-size: 26px; }
.author__name { font-size: 15px; font-weight: 900; color: var(--c-ink); }
.author__text { margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--c-body); }

.entry-related { margin-top: 40px; }
.entry-related__title { font-size: 18px; font-weight: 900; color: var(--c-ink); display: flex; align-items: center; gap: 8px; }
.entry-related__title .ic { font-size: 20px; color: var(--c-blue); }
.entry-back { margin-top: 28px; display: flex; justify-content: center; }

/* ---------- プライバシーポリシー ---------- */
.policy { max-width: var(--article); margin-inline: auto; }
.policy__draft { margin-bottom: 24px; }
.policy .prose h2 { margin-top: 2.2em; }
.policy .prose h2:first-child { margin-top: 0; }
.policy__dl { display: grid; gap: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-in); overflow: hidden; }
.policy__dl > div { display: grid; gap: 2px; padding: 12px 14px; border-top: 1px solid var(--c-line-2); }
.policy__dl > div:first-child { border-top: 0; }
.policy__dl dt { font-size: 13px; font-weight: 700; color: var(--c-ink); }
.policy__dl dd { font-size: 14.5px; line-height: 1.8; }
@media (min-width: 768px) { .policy__dl > div { grid-template-columns: 9em minmax(0, 1fr); gap: 16px; } }
.policy__date { margin-top: 32px; text-align: right; font-size: 13px; color: var(--c-muted); }

/* ---------- サンクスページ ---------- */
.thanks { padding: 40px 0 56px; }
.thanks__card { max-width: 720px; margin-inline: auto; background: #fff; border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--sh-card); padding: 32px 20px; text-align: center; }
.thanks__icon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--c-sky); color: var(--c-blue); }
.thanks__icon .ic { font-size: 40px; }
.thanks h1 { margin-top: 14px; font-size: clamp(22px, 5vw, 30px); font-weight: 900; line-height: 1.45; color: var(--c-ink); }
.thanks__lead { margin-top: 10px; font-size: 15px; line-height: 1.85; text-wrap: pretty; }
.thanks__steps { margin: 24px auto 0; max-width: 520px; padding: 0; list-style: none; display: grid; gap: 0; text-align: left; }
.thanks__steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.thanks__steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; border-left: 2px dashed #c3d4f0; }
.thanks__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-blue); color: #fff; font-family: var(--font-num); font-weight: 700; font-size: 16px; }
.thanks__steps b { display: block; padding-top: 6px; font-size: 15px; color: var(--c-ink); }
.thanks__steps div > span { font-size: 13.5px; line-height: 1.75; color: var(--c-body); }
.thanks__tel { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--c-line); }
.thanks__tel p { font-size: 14px; font-weight: 700; color: var(--c-ink); }
.thanks__tel .btn { margin-top: 10px; min-height: 64px; }
.thanks__links { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (min-width: 768px) { .thanks { padding: 56px 0 72px; } .thanks__card { padding: 44px 48px; } }

/* ---------- 404 ---------- */
.nf { padding: 40px 0 64px; }
.nf__inner { display: grid; gap: 24px; align-items: center; justify-items: center; text-align: center; }
.nf__num { font-family: var(--font-num); font-weight: 900; font-size: clamp(72px, 22vw, 128px); line-height: 1; letter-spacing: 0.04em; color: var(--c-blue); }
.nf__num span { color: var(--c-sun); }
.nf h1 { margin-top: 6px; font-size: clamp(20px, 5vw, 26px); font-weight: 900; color: var(--c-ink); line-height: 1.5; }
.nf__lead { margin-top: 8px; font-size: 15px; line-height: 1.85; text-wrap: pretty; }
.nf__img { width: min(320px, 80%); height: auto; }
.nf__links { margin-top: 18px; display: grid; gap: 10px; width: min(420px, 100%); margin-inline: auto; }
.nf__links a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-in); font-weight: 700; color: var(--c-ink); text-decoration: none; }
.nf__links a .ic { color: var(--c-blue); font-size: 18px; }
.nf__links a:hover { border-color: var(--c-blue); color: var(--c-blue); opacity: 1; }
@media (min-width: 900px) { .nf__inner { grid-template-columns: 1fr 1fr; text-align: left; justify-items: start; } .nf__links { margin-inline: 0; } .nf__img { justify-self: center; width: 100%; max-width: 420px; } }

.side-rank .rank { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; }
.mini-rank .rank { width: 38px; height: 38px; border-radius: 10px; font-size: 21px; }
/* 比較表：SPは行ごとのカードに組み替え */
@media (max-width: 639px) {
  .prose .table-wrap--stack table { min-width: 0; border: 0; background: none; }
  .prose .table-wrap--stack thead { display: none; }
  .prose .table-wrap--stack tr { display: block; margin-top: 12px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-in); overflow: hidden; }
  .prose .table-wrap--stack tbody th { display: block; width: auto; padding: 9px 14px; background: var(--c-blue); color: #fff; }
  .prose .table-wrap--stack td { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--c-line-2); }
  .prose .table-wrap--stack td:last-child { border-bottom: 0; }
  .prose .table-wrap--stack td::before { content: attr(data-label); font-size: 12px; white-space: nowrap; font-weight: 700; color: var(--c-blue); line-height: 1.7; }
}
/* 一覧のカード：SPは横並びのコンパクト表示 */
@media (max-width: 639px) {
  .post-list { gap: 12px; }
  .post-list .post { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: none; }
  .post-list .post__thumb { aspect-ratio: auto; min-height: 100%; }
  .post-list .post__thumb .ic { font-size: 30px; }
  .post-list .post__thumb::after { width: 70px; height: 70px; }
  .post-list .post__body { padding: 12px 14px; gap: 4px; }
  .post-list .post__title { font-size: 14px; line-height: 1.55; }
  .post-list .post__excerpt { display: none; }
  .post-list .post__date { font-size: 12px; }
}