/* AOBA CLEAN（架空）— サイトの見た目。値はカンプの実測（PC 1440px）。小さい画面では tokens.css の流し方で縮める
   変数：--fl＝(画面幅−375px)÷1065（375px で 0、1440px で 1） */
.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
p, li, dd, summary { word-break: auto-phrase; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.i--mail { --icon-bg: var(--color-cta); color: #fff; width: 1.3em; height: 1.3em; }
.i--mail-blue { --icon-bg: var(--color-brand); }
.i--chev { width: .95em; height: .95em; margin-left: .35em; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 8px; background: var(--color-heading); color: #fff; }
.skip:focus { top: 12px; }
h1, h2, h3 { color: var(--color-heading); }

/* 動き：スクロールで出てくる動き・登場の動きは使わない（カンプは静止のデザイン）。押した・開いた への反応だけ */
button, input, select, textarea { font-family: inherit; }

/* ボタン */
.btn { gap: .5em; padding-inline: 28px; letter-spacing: .04em; font-feature-settings: normal; }
.btn--cta { background: var(--color-cta); color: #fff; box-shadow: var(--shadow-cta); }
.btn--cta:hover { background: var(--color-cta-strong); }
.btn--cta:active { box-shadow: 0 3px 10px rgb(228 34 40 / .26); }
.btn--blue { background: var(--color-brand); color: #fff; border-radius: 12px; }
.btn--blue:hover { background: var(--color-brand-strong); }
.btn--xl { min-height: clamp(58px, calc(58px + 22 * var(--fl)), 80px); padding-inline: 40px; font-size: clamp(18px, calc(18px + 9 * var(--fl)), 27px); font-weight: 700; letter-spacing: .1em; }
.btn--block { width: 100%; }

/* 見出し（両側に線） */
.ttl { display: flex; align-items: center; justify-content: center; gap: .62em; color: var(--color-brand); font-size: var(--fs-h2); font-weight: 700; letter-spacing: .05em; font-feature-settings: normal; text-align: center; line-height: 1.3; }
#reason-title { letter-spacing: .05em; }
.ttl::before, .ttl::after { content: ""; width: clamp(22px, calc(22px + 26 * var(--fl)), 48px); height: 3px; border-radius: 2px; background: currentColor; flex: none; }
.sub { margin-top: clamp(8px, 1vw, 14px); color: #5d6b80; font-size: clamp(14px, calc(14px + 4 * var(--fl)), 18px); text-align: center; letter-spacing: .04em; }

.card { background: var(--color-surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 0; list-style: none; font-weight: 500; }
.checks li { display: inline-flex; align-items: center; gap: .45em; }
.checks .i { color: var(--color-brand); width: 1.3em; height: 1.3em; }

/* ヘッダー */
.hd { position: sticky; top: 0; z-index: 800; background: #fff; transition: box-shadow var(--dur-fast); }
.hd.is-scrolled { box-shadow: 0 4px 18px rgb(3 28 74 / .08); }
.hd__in { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); width: min(100% - 6px, 1400px); padding-left: clamp(12px, 1.6vw, 48px); padding-right: clamp(12px, 1.6vw, 40px); margin-inline: auto; min-height: 77px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-brand); text-decoration: none; }
.logo__mark { width: 50px; height: 46px; }
.logo__text { font-weight: 700; font-size: clamp(23px, calc(23px + 12 * var(--fl)), 35px); letter-spacing: 0; line-height: 1; white-space: nowrap; }
.gnav { margin-left: auto; }
.gnav__list { display: flex; gap: clamp(14px, 1.8vw, 27px); }
.gnav__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-nav); font-size: 13px; font-weight: 500; text-decoration: none; letter-spacing: .06em; }
.gnav__list a:hover, .gnav__list a[aria-current="true"] { color: var(--color-brand); }
.gnav__sp { display: none; }
.tel { display: inline-flex; align-items: center; gap: 8px; color: var(--color-brand); text-decoration: none; line-height: 1.2; }
.tel .i { width: 24px; height: 26px; }
.tel b { display: block; font-size: 26px; font-weight: 700; letter-spacing: .01em; }
.tel small { display: block; margin-top: 3px; color: #7a8598; font-size: 11.7px; letter-spacing: .02em; }
.tel--hd { margin-left: clamp(8px, 1.6vw, 24px); }
.hd__cta { min-height: 48px; min-width: 207px; padding-inline: 22px; font-size: 16.5px; }

/* ファーストビュー */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfdff, #f3f8fe); }
.hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: min(50.3vw, 724px); }
.hero__photo img, .hero__photo picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f8fbff 0%, rgb(248 251 255 / .75) 9%, rgb(255 255 255 / 0) 30%); }
.hero__in { position: relative; display: grid; align-content: center; justify-items: start; min-height: min(533px, 37vw); padding: 87px 0 52px clamp(0px, 1.4vw, 20px); align-content: start; }
.hero__title { font-size: var(--fs-h1); font-weight: 800; line-height: 1.3; letter-spacing: .04em; }
.hero__l1 { display: block; color: var(--color-heading); }
.hero__l2 { display: block; color: var(--color-brand); }
.hero__lead { margin-top: clamp(6px, .45vw, 6px); font-size: var(--fs-lead); font-weight: 700; color: var(--color-heading); letter-spacing: .02em; }
.hero .btn--xl { margin-top: clamp(20px, 1.9vw, 27px); min-width: min(100%, 385px); }
.hero .checks { margin-top: clamp(14px, 1.5vw, 21px); font-size: clamp(14.5px, calc(14.5px + 5 * var(--fl)), 19.5px); color: #3e5272; gap: 8px 34px; }

/* サービス（帯と理由） */
.strip { background: var(--color-surface2); }
.strip .strip__list { display: flex; justify-content: space-between; padding: clamp(18px, 2.6vw, 37px) 0 clamp(18px, 2.3vw, 33px) clamp(0px, 1.4vw, 20px); }
.strip__list li { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.3vw, 19px); color: #384861; font-weight: 500; font-size: clamp(14px, calc(14px + 5 * var(--fl)), 19px); line-height: 1.75; letter-spacing: .05em; }
.strip__list li + li::before { content: ""; position: absolute; left: clamp(-48px, -3.3vw, -12px); top: 50%; translate: 0 -50%; width: 3px; height: 60px; border-radius: 2px; background: #cfe2f1; }
.strip__ic { width: clamp(40px, 4.3vw, 62px); height: clamp(40px, 4.3vw, 62px); color: var(--color-brand); flex: none; }
.reason { padding-block: clamp(30px, 2.7vw, 38.5px) 37px; }
.reason__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.9vw, 27px); max-width: 1330px; margin: clamp(24px, 2.4vw, 34px) auto 0; }
.reason__item { display: grid; justify-items: center; align-content: start; padding: 17px 20px 24px; text-align: center; }
.reason__ic { display: grid; place-items: center; width: clamp(84px, 7.2vw, 104px); height: clamp(84px, 7.2vw, 104px); border-radius: 50%; background: #e6f2fe; color: var(--color-brand); }
.reason__ic svg { width: 54%; height: 54%; }
.reason__item h3 { margin-top: 14px; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.05em; }
.reason__item p { margin-top: 15px; color: #4c5b73; font-size: clamp(15px, calc(15px + 5 * var(--fl)), 20px); line-height: 1.5; letter-spacing: .03em; }

/* 料金 */
.price { padding-block: clamp(26px, 1.9vw, 27px) 20px; }
.price__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.1vw, 16px); max-width: 1330px; margin: clamp(14px, 1.05vw, 15px) auto 0; }
.plan { position: relative; display: flex; flex-direction: column; padding: 18px 18px 30px; }
.plan__img { overflow: hidden; border-radius: 8px; aspect-ratio: 2.28 / 1; background: #e9eef5; }
.plan__img img, .plan__img picture { width: 100%; height: 100%; object-fit: cover; }
.plan__badge { position: absolute; top: 7px; left: 50%; translate: -50% 0; z-index: 1; min-width: 184px; padding: 2px 20px; border-radius: 999px; background: var(--color-cta); color: #fff; font-weight: 700; font-size: clamp(16px, calc(16px + 4.5 * var(--fl)), 20.5px); line-height: 1.5; letter-spacing: .04em; text-align: center; }
.plan__name { margin-top: 14px; padding-inline: 2px; font-size: clamp(21px, calc(21px + 8.5 * var(--fl)), 29.5px); font-weight: 800; letter-spacing: 0; }
.plan__desc { margin-top: 4px; padding-inline: 2px; color: var(--color-text-sub); font-size: clamp(14.5px, calc(14.5px + 4.4 * var(--fl)), 18.9px); line-height: 1.62; letter-spacing: .04em; }
.plan__price { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 2px 16px; margin-top: 10px; padding-inline: 2px; color: var(--color-price); white-space: nowrap; }
.tag { align-self: center; display: inline-grid; place-items: center; min-width: 100px; min-height: 38px; padding: 0 14px; border-radius: 5px; background: var(--color-brand); color: #fff; font-size: clamp(15px, calc(15px + 3 * var(--fl)), 18px); font-weight: 700; letter-spacing: .04em; }
.plan__price b { font-size: clamp(34px, calc(34px + 11 * var(--fl)), 45px); font-weight: 700; line-height: 1; letter-spacing: .03em; }
.plan__unit { margin-left: -14px; font-weight: 700; font-size: clamp(16px, calc(16px + 6.5 * var(--fl)), 22.5px); letter-spacing: 0; }
.plan__unit small { font-size: .84em; font-weight: 700; letter-spacing: 0; }
.plan__from { font-size: 1.05em; }
.plan__pts { display: grid; gap: 2px; margin-top: 3px; padding-inline: 2px; color: #2f4262; font-size: clamp(15px, calc(15px + 5.5 * var(--fl)), 20.5px); font-weight: 500; letter-spacing: .03em; }
.plan__pts li { display: flex; align-items: center; gap: .55em; }
.plan__pts .i { color: var(--color-brand); width: 1.25em; height: 1.25em; }

/* お客様の声 */
.voice { padding-block: clamp(26px, 1.95vw, 28px) 22px; }
.voice__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); max-width: 1330px; margin: clamp(20px, 2vw, 28px) auto 0; }
.voice__item { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 24px 12px 24px 17px; }
.voice__face { width: clamp(60px, 5.2vw, 75px); height: clamp(60px, 5.2vw, 75px); }
.stars { display: flex; gap: 1px; color: var(--color-star); }
.stars svg { width: 20px; height: 20px; }
.voice__item h3 { margin-top: 8px; font-size: clamp(16px, calc(16px + 2.3 * var(--fl)), 18.3px); font-weight: 800; line-height: 1.5; letter-spacing: .02em; }
.voice__item p:not(.stars):not(.voice__who) { margin-top: 10px; word-break: normal; text-wrap: wrap; color: #68748a; font-size: clamp(14px, calc(14px + 1.2 * var(--fl)), 15.2px); line-height: 1.78; letter-spacing: -.045em; }
.voice__who { margin-top: 10px; color: #56647a; font-size: clamp(13px, calc(13px + 2.3 * var(--fl)), 15.3px); font-weight: 500; }

/* よくある質問 */
.faq { padding-block: clamp(22px, 1.55vw, 22px) 34px; }
.faq .l-narrow { width: min(100% - var(--gutter) * 2, var(--container-narrow)); }
.faq__list { display: grid; gap: 10px; margin-top: clamp(16px, 1.6vw, 22px); }
.qa { border-radius: 10px; background: var(--color-surface); box-shadow: 0 1px 2px rgb(3 28 74 / .04); }
.qa summary { display: flex; align-items: center; gap: 22px; min-height: 52px; padding: 7px 26px 7px 22px; color: #2a3f62; font-weight: 700; font-size: clamp(15px, calc(15px + 3.8 * var(--fl)), 18.8px); letter-spacing: .04em; border-radius: 10px; }
.qa summary:hover { background: var(--color-surface3); }
.qa__q, .qa__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: 0; flex: none; }
.qa__mark { background: #fff; color: var(--color-cta); border: 2px solid var(--color-cta); }
.qa__t { flex: 1; }
.qa__ic { width: 24px; height: 24px; color: var(--color-brand); transition: transform var(--dur-fast) var(--ease-out); }
.qa[open] .qa__ic { transform: rotate(180deg); }
.qa__a { display: flex; gap: 22px; padding: 2px 26px 20px 22px; color: var(--color-text-sub); }
.qa__a small { display: block; margin-top: 4px; color: var(--color-text-muted); }

/* 呼びかけの帯 */
.cta { padding-block: 26px 0; }
.cta .l-container { width: min(100% - var(--gutter) * 2, 1345px); }
.cta__box { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; min-height: 196px; padding: clamp(28px, 3vw, 40px) clamp(22px, 5vw, 76px); border-radius: 12px;
  background: linear-gradient(100deg, #046df9 0%, #0a7cf9 42%, #4aa3fb 66%, #a9d4fd 84%, #d9edff 100%); color: #fff; }
.cta__deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta__txt, .cta__act { position: relative; }
.cta__txt h2 { color: #fff; font-size: clamp(23px, calc(23px + 16.5 * var(--fl)), 39.5px); font-weight: 800; letter-spacing: .02em; }
.cta__txt p { margin-top: 12px; text-wrap: nowrap; font-weight: 500; font-size: clamp(15px, calc(15px + 9.4 * var(--fl)), 24.4px); letter-spacing: .02em; }
.cta__act { display: grid; justify-items: center; gap: 14px; flex: none; }
.cta__act .btn--xl { min-width: min(100%, 386px); min-height: clamp(56px, calc(56px + 16 * var(--fl)), 72px); font-size: clamp(18px, calc(18px + 5.7 * var(--fl)), 23.7px); }
.checks--on { color: #23406a; font-size: clamp(14px, calc(14px + 2.6 * var(--fl)), 16.6px); justify-content: center; gap: 8px 24px; flex-wrap: nowrap; white-space: nowrap; }

/* お問い合わせ（カンプに無い、足したセクション） */
.contact { padding-block: clamp(44px, 4vw, 60px); }
.contact .l-narrow { width: min(100% - var(--gutter) * 2, 880px); }
.tel--contact { display: flex; width: fit-content; margin: 18px auto 0; }
.form { margin-top: 24px; padding: clamp(22px, 3.4vw, 40px); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.field--wide { grid-column: 1 / -1; }
.field label { color: var(--color-text); font-size: 15px; }
.agree { display: flex !important; align-items: center; gap: 10px; min-height: 44px; font-weight: 500 !important; }
.agree input { width: 26px; height: 26px; margin: 0; accent-color: var(--color-brand); }
.agree a { display: inline-flex; align-items: center; min-height: 32px; }
.form__note { margin-top: 16px; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.form__submit { display: flex; width: min(100%, 420px); margin: 14px auto 0; }
.form-done { margin-top: 24px; color: var(--color-text); }
.form-done__t { color: var(--color-brand); font-size: 22px; font-weight: 800; margin-bottom: 8px; }

/* フッター */
.ft { margin-top: 0; }
.ft .l-container { width: min(100% - var(--gutter) * 2, 1345px); }
.ft__in { display: flex; align-items: center; gap: 20px 40px; flex-wrap: wrap; padding-block: 36px 26px; }
.ft__brand p { margin-top: 2px; padding-left: 61px; color: #6b788c; font-size: clamp(13px, calc(13px + 1.2 * var(--fl)), 14.2px); font-weight: 700; letter-spacing: .02em; }
.ft__nav { flex: 1; padding-left: clamp(0px, 4vw, 48px); }
.ft__nav ul { display: flex; flex-wrap: wrap; gap: 0 30px; padding: 0; list-style: none; }
.ft__nav a { display: inline-flex; align-items: center; min-height: 44px; color: #45556e; font-size: clamp(14px, calc(14px + 1.6 * var(--fl)), 15.6px); font-weight: 500; text-decoration: none; letter-spacing: .03em; }
.ft__nav a:hover { color: var(--color-brand); }
.ft__cta { min-height: 82px; min-width: 277px; padding-inline: 36px; font-size: 21.3px; border-radius: 14px; }
.ft__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding-block: 8px 30px; border-top: 1px solid var(--color-border); }
.ft__legal { display: flex; flex-wrap: wrap; gap: 0 30px; }
.ft__legal a { display: inline-flex; align-items: center; min-height: 32px; color: #7f8a9d; font-size: clamp(13px, calc(13px + 1.7 * var(--fl)), 14.7px); font-weight: 500; letter-spacing: .06em; text-decoration: none; }
.ft__legal a:hover { color: var(--color-brand); text-decoration: underline; }
.ft__copy { display: grid; justify-items: end; color: #7f8a9c; }
.ft__copy small { font-size: clamp(12.5px, calc(12.5px + 1 * var(--fl)), 13.5px); font-weight: 500; }
.ft__sample { font-size: 11.5px !important; }

.totop .i { width: 24px; height: 24px; }

/* スマホ・タブレットだけの部品（PC では出さない） */
.hd__tel, .spbar { display: none; }

/* メニューのボタン（スマホ・タブレット） */
.menu-btn { display: none; width: 48px; height: 48px; margin-left: auto; border: 0; border-radius: 12px; background: var(--color-surface2); color: var(--color-brand); place-items: center; }
.menu-btn .i { width: 26px; height: 26px; }
.menu-btn .i--close { display: none; }
.menu-btn[aria-expanded="true"] .i--open { display: none; }
.menu-btn[aria-expanded="true"] .i--close { display: block; }

/* ── タブレット・スマホ ── */
@media (max-width: 1240px) {
  .tel--hd { display: none; }
}
@media (max-width: 959px) {
  .hd__in { min-height: 64px; }
  .logo__mark { width: 40px; height: 37px; }
  .hd__cta { display: none; }
  .menu-btn { display: grid; }
  .gnav { position: fixed; inset: 64px 0 auto 0; max-height: calc(100dvh - 64px); overflow: auto; padding: 8px 20px 28px; background: #fff; box-shadow: 0 18px 30px rgb(3 28 74 / .12);
    opacity: 0; visibility: hidden; translate: 0 -8px; transition: opacity .2s, translate .2s, visibility .2s; }
  .gnav.is-open { opacity: 1; visibility: visible; translate: 0 0; }
  html:not(.ui-js) .gnav { position: static; opacity: 1; visibility: visible; translate: none; box-shadow: none; }
  .gnav__list { flex-direction: column; gap: 0; }
  .gnav__list a { width: 100%; min-height: 54px; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: 16px; }
  .gnav__sp { display: grid; gap: 14px; margin-top: 18px; }
  .tel--panel { justify-content: center; padding: 12px; border-radius: 12px; background: var(--color-surface2); }
  .tel--panel b { font-size: 24px; }

  .hero__photo { position: relative; width: min(100%, 724px); margin-inline: auto; aspect-ratio: 4 / 3; }
  .hero__photo::after { background: linear-gradient(180deg, rgb(255 255 255 / 0) 62%, #f6faff 100%); }
  .hero__in { min-height: 0; padding: 6px 0 40px; }
  .hero .btn--xl { justify-self: stretch; }

  .strip .strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; padding: 20px 0; }
  .strip__list li { padding-inline: 10px 6px; }
  .strip__list li + li::before { display: none; }
  .strip__list li:nth-child(even)::before { display: block; content: ""; position: absolute; left: -2px; top: 50%; translate: 0 -50%; width: 2px; height: 70%; border-radius: 2px; background: #cfe2f1; }
  .reason__list, .voice__list { grid-template-columns: 1fr; }
  .price__list { grid-template-columns: 1fr; }
  .plan--hot { margin-top: 10px; }
  .cta__box { flex-direction: column; text-align: center; background: linear-gradient(160deg, #046df9 0%, #0a7cf9 55%, #6db6fc 100%); }
  .checks--on { color: #fff; flex-wrap: wrap; white-space: normal; }
  .cta__txt p { text-wrap: wrap; }
  .cta__act { flex: 0 1 auto; }
  .checks--on .i { color: #fff; --check: var(--color-brand); }
  .form__grid { grid-template-columns: 1fr; }
  .ft__in { flex-direction: column; align-items: flex-start; }
  .ft__nav { padding-left: 0; }
  .ft__copy { justify-items: start; }
}
@media (max-width: 520px) {
  .ttl { gap: .4em; }
  .ttl::before, .ttl::after { width: 14px; }
  .strip .strip__list { grid-template-columns: 1fr; }
  .strip__list li:nth-child(even)::before { display: none; }
  .checks, .hero .checks { gap: 8px 18px; }
  .ft__cta { width: 100%; min-height: 64px; font-size: 19px; }
  .voice__item { padding: 20px 18px 22px; gap: 14px; }
  .tag { min-width: 76px; min-height: 34px; }
  .plan__unit { margin-left: -6px; }
}


/* ── スマホ（767px まで）：日本の店のスマホサイトの組み方。左そろえ・詰めた一覧・下の固定ボタン ── */
@media (max-width: 959px) {
  .hd__in { min-height: 60px; gap: 8px; }
  .logo__mark { width: 34px; height: 31px; }
  .logo__text { font-size: 22px; }
  .hd__tel { display: grid; place-items: center; align-content: center; gap: 1px; width: 48px; height: 48px; margin-left: auto; border-radius: 10px; background: var(--color-surface2); color: var(--color-brand); font-size: 10px; font-weight: 700; line-height: 1; text-decoration: none; }
  .hd__tel .i { width: 20px; height: 20px; }
  .menu-btn { margin-left: 0; }
  .gnav { inset: 60px 0 auto 0; max-height: calc(100dvh - 60px); }
}
@media (max-width: 959px) {
  /* タブレットとスマホ共通：カードを縦に積まず、行と面で組む */
  /* 選ばれる理由：1枚の白い面に、アイコン＋見出し＋文の行を線で区切って並べる */
  .reason { padding-block: 32px 30px; }
  .reason__list { gap: 0; margin-top: 18px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); }
  .reason__item { grid-template-columns: 52px 1fr; justify-items: start; align-items: start; column-gap: 14px; padding: 16px 16px 18px; text-align: left; border-radius: 0; box-shadow: none; background: none; }
  .reason__item + .reason__item { border-top: 1px solid var(--color-border); }
  .reason__ic { grid-row: span 2; width: 52px; height: 52px; }
  .reason__ic svg { width: 28px; height: 28px; }
  .reason__item h3 { margin-top: 2px; font-size: 18px; letter-spacing: 0; }
  .reason__item p { margin-top: 4px; font-size: 14px; line-height: 1.7; letter-spacing: .02em; }
  .reason__item p br { display: none; }

  /* お客様の声：顔と見出しを1行に、本文は全幅 */
  .voice { padding-block: 30px 26px; }
  .voice__list { gap: 12px; margin-top: 16px; }
  .voice__item { grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 0; padding: 16px 16px 14px; }
  .voice__item > div { display: contents; }
  .voice__face { grid-row: 1 / span 2; width: 40px; height: 40px; }
  .stars svg { width: 15px; height: 15px; }
  .voice__item h3 { margin-top: 2px; font-size: 15.5px; line-height: 1.45; }
  .voice__item p:not(.stars):not(.voice__who) { grid-column: 1 / -1; margin-top: 10px; font-size: 14px; line-height: 1.75; letter-spacing: .01em; }
  .voice__who { grid-column: 1 / -1; margin-top: 6px; font-size: 12.5px; text-align: right; }

}
@media (min-width: 600px) and (max-width: 959px) {
  /* タブレット：料金は写真を左、中身を右に（2列＋1枚の空きを作らない） */
  .plan { display: grid; grid-template-columns: minmax(0, 38%) 1fr; grid-auto-rows: min-content; column-gap: 20px; padding: 16px; }
  .plan__img { grid-column: 1; grid-row: 1 / span 5; align-self: start; aspect-ratio: 4 / 3; }
  .plan > :not(.plan__img):not(.plan__badge) { grid-column: 2; }
  .plan__name { margin-top: 0; }
  .plan__badge { left: 19%; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  [data-ui="totop"] { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; width: 44px; height: 44px; }

  /* 下の固定ボタン：電話と見積もり */
  .spbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--color-border); box-shadow: 0 -4px 14px rgb(3 28 74 / .07); }
  .spbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 8px; text-decoration: none; font-weight: 700; }
  .spbar__tel { border: 1.5px solid var(--color-brand); color: var(--color-brand); background: #fff; line-height: 1.15; }
  .spbar__tel .i { width: 20px; height: 20px; }
  .spbar__tel b { display: block; font-size: 14.5px; }
  .spbar__tel small { display: block; margin-top: 2px; color: #5d6b80; font-size: 10px; font-weight: 500; }
  .spbar__cta { background: var(--color-cta); color: #fff; font-size: 16px; letter-spacing: .04em; }
  .spbar__cta .i { width: 20px; height: 20px; }

  /* ファーストビュー：写真の下を白くぼかして、見出しを少し重ねる */
  .hero { background: #f6faff; }
  .hero__photo { width: 100%; aspect-ratio: 16 / 11; }
  .hero__photo img, .hero__photo picture { object-position: 62% 40%; }
  .hero__photo::after { background: linear-gradient(180deg, rgb(246 250 255 / 0) 55%, #f6faff 100%); }
  .hero__in { margin-top: -34px; padding: 0 0 22px; }
  .hero__title { font-size: 29px; line-height: 1.32; letter-spacing: .02em; }
  .hero__lead { margin-top: 8px; font-size: 15.5px; }
  .hero .btn--xl { margin-top: 16px; min-height: 56px; font-size: 18px; }
  .hero .checks { margin-top: 12px; flex-wrap: nowrap; gap: 0 14px; font-size: 13px; }
  .hero .checks li { gap: .3em; white-space: nowrap; }

  /* 4つの特長：2×2、線で区切る */
  .strip .strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px 0; }
  .strip__list li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 6px 14px 4px; font-size: 12.5px; line-height: 1.55; letter-spacing: .01em; }
  .strip__list li::before { display: none !important; }
  .strip__list li:nth-child(odd) { border-right: 1px solid #cfe2f1; padding-right: 8px; }
  .strip__list li:nth-child(even) { padding-left: 14px; }
  .strip__list li:nth-child(-n+2) { border-bottom: 1px solid #cfe2f1; }
  .strip__ic { width: 28px; height: 28px; }

  /* 見出し */
  .ttl { font-size: 23px; gap: .45em; }
  .ttl::before, .ttl::after { width: 14px; height: 2px; }
  .sub { font-size: 13.5px; line-height: 1.7; }

  /* 料金：情報を詰めて比べやすく */
  .price { padding-block: 30px 28px; }
  .price__list { gap: 14px; margin-top: 16px; }
  .plan { padding: 12px 12px 16px; }
  .plan--hot { margin-top: 12px; }
  .plan__img { aspect-ratio: 2.6 / 1; border-radius: 6px; }
  .plan__badge { top: -11px; min-width: 0; padding: 1px 16px; font-size: 13.5px; }
  .plan__name { margin-top: 10px; font-size: 19px; }
  .plan__desc { margin-top: 2px; font-size: 13.5px; line-height: 1.65; }
  .plan__desc br { display: none; }
  .plan__price { margin-top: 8px; gap: 2px 10px; }
  .tag { min-width: 62px; min-height: 30px; padding: 0 10px; font-size: 13.5px; border-radius: 4px; }
  .plan__price b { font-size: 32px; }
  .plan__unit { margin-left: -8px; font-size: 15px; }
  .plan__pts { margin-top: 6px; gap: 0; font-size: 14px; line-height: 1.85; }
  .plan__pts .i { width: 1.15em; height: 1.15em; }

  /* よくある質問 */
  .faq { padding-block: 30px 28px; }
  .faq__list { gap: 8px; margin-top: 16px; }
  .qa summary { gap: 12px; min-height: 54px; padding: 8px 12px 8px 12px; font-size: 15px; letter-spacing: .02em; }
  .qa__q, .qa__mark { width: 28px; height: 28px; font-size: 14px; }
  .qa__ic { width: 20px; height: 20px; }
  .qa__a { gap: 12px; padding: 0 14px 16px 12px; font-size: 14px; }

  /* 呼びかけの帯 */
  .cta { padding-block: 18px 0; }
  .cta__box { align-items: stretch; gap: 16px; min-height: 0; padding: 22px 18px 18px; border-radius: 10px; text-align: left; }
  .cta__txt h2 { font-size: 26px; line-height: 1.35; }
  .cta__txt p { margin-top: 8px; font-size: 14px; text-wrap: wrap; }
  .cta__act { justify-items: stretch; gap: 10px; }
  .cta__act .btn--xl { min-width: 0; min-height: 54px; font-size: 17px; }
  .checks--on { justify-content: flex-start; flex-wrap: nowrap; gap: 0 10px; font-size: 12px; white-space: nowrap; }
  .checks--on .i { width: 1.2em; height: 1.2em; }
  #contact-title { font-size: 20px; }

  /* お問い合わせ */
  .contact { padding-block: 34px 30px; }
  .form { padding: 18px 16px 22px; }
  .field label { font-size: 14px; }

  /* フッター：メニューは2列の一覧 */
  .ft__in { gap: 16px; padding-block: 26px 18px; }
  .ft__brand p { padding-left: 44px; font-size: 12.5px; }
  .ft__nav { width: 100%; }
  .ft__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border-top: 1px solid var(--color-border); }
  .ft__nav li { border-bottom: 1px solid var(--color-border); }
  .ft__nav a { width: 100%; min-height: 46px; font-size: 14px; }
  .ft__cta { width: 100%; min-width: 0; min-height: 56px; font-size: 17px; border-radius: 10px; }
  .ft__bottom { padding-block: 12px 18px; border-top: 0; }
  .ft__legal { gap: 0 18px; }
  .ft__legal a { font-size: 12.5px; letter-spacing: .02em; }
}

/* 会社概要・規約のページ */
.doc .l-narrow { width: min(100% - var(--gutter) * 2, 840px); }
.doc { padding-block: clamp(36px, 5vw, 64px); }
.doc__back a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.doc__ttl { margin-top: 8px; color: var(--color-heading); font-size: var(--fs-h2); }
.doc__note { margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: var(--color-surface2); color: var(--color-text-sub); font-size: 14px; }
.doc__body { margin-top: 28px; display: grid; gap: 14px; color: var(--color-text-sub); }
.doc__body h2 { margin-top: 14px; font-size: 19px; }
.doc__dl { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--color-border); }
.doc__dl dt, .doc__dl dd { padding: 16px 8px; border-bottom: 1px solid var(--color-border); }
.doc__dl dt { color: var(--color-text); font-weight: 700; }
.hd__cta--doc { margin-left: auto; }
@media (max-width: 959px) { .hd__cta--doc { display: inline-flex; min-height: 44px; min-width: 0; padding-inline: 16px; font-size: 14px; } .doc__dl { grid-template-columns: 1fr; } .doc__dl dt { border-bottom: 0; padding-bottom: 0; } }