/* 不動産会社のためのホームページ制作サービス（運営: 合同会社Free）
   色: さわやかな青を基本に、オレンジ（相談・新着）、黄色（強調）、LINEの緑（LINEのボタンだけ）。
   見出し: Zen Maru Gothic（丸みのある書体）。本文: 端末の標準のゴシック体。 */
@import url("./fonts/zen-maru-gothic-700.css");

:root {
  --sky: #1a8fde;
  --sky-600: #1279c4;
  --sky-800: #0b4f8c;
  --sky-50: #eef7fd;
  --sky-100: #dcefff;
  --ink: #17324a;
  --ink-2: #4a6075;
  --ink-3: #7b8ea0;
  --line: #d9e6f1;
  --orange: #ff7f1e;
  --orange-600: #e8680b;
  --orange-50: #fff3e8;
  --yellow: #ffd54d;
  --yellow-50: #fff8dc;
  --mint: #16a873;
  --mint-50: #e5f6ee;
  --line-green: #06c755;
  --line-green-600: #05a648;
  --font-h: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --shadow: 0 14px 34px rgba(11, 79, 140, .10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; font-size: 16px; line-height: 1.85; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; }
/* 文章は、文節の区切り（<wbr>）でだけ折り返す（fudosan-hp/tools/wbr.py で入れる）。画面で後から作る文章は、ふつうの折り返しに戻す。 */
textarea, input, .marked, .hits, .summary, .form-msg, .calc-out, .legend { word-break: normal; }
h1, h2, h3, .sec-h p, .answer b { text-wrap: balance; }
p, li, dd, figcaption, summary { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky-600); text-underline-offset: 3px; }
a:hover { color: var(--orange-600); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--font-h); font-weight: 700; line-height: 1.45; margin: 0; letter-spacing: .04em; color: var(--sky-800); }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.nw { display: inline-block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--sky-800); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent; font-family: var(--font-h); font-weight: 700; font-size: 16px; letter-spacing: .05em; text-decoration: none; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; }
.btn-line { background: var(--line-green); color: #fff; }
.btn-line:hover { background: var(--line-green-600); color: #fff; }
.btn-or { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(255, 127, 30, .30); }
.btn-or:hover { background: var(--orange-600); color: #fff; }
.btn-white { background: #fff; color: var(--sky-800); border-color: #fff; }
.btn-white:hover { background: var(--sky-50); color: var(--sky-800); }
.btn-ghost { background: #fff; color: var(--sky-800); border-color: var(--sky); }
.btn-ghost:hover { background: var(--sky-50); color: var(--sky-800); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }

/* ---------- ヘッダー ---------- */
.hd { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
.hd-in { display: flex; align-items: center; gap: 18px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { width: 44px; height: 44px; }
.logo-t { display: flex; flex-direction: column; line-height: 1.15; font-family: var(--font-h); font-weight: 700; }
.logo-t small { font-size: 12px; color: var(--sky); letter-spacing: .08em; }
.logo-t b { font-size: 21px; color: var(--sky-800); letter-spacing: .06em; }
.gnav { display: flex; gap: 20px; margin-left: auto; font-size: 14.5px; font-weight: 700; }
.gnav a { color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.gnav a:hover { color: var(--sky-600); border-bottom-color: var(--sky); }
.hd-cta { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--sky); background: #fff; color: var(--sky-800); font-family: var(--font-h); font-weight: 700; font-size: 14px; cursor: pointer; }
.menu-btn span { display: block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

/* ---------- ファーストビュー ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky-50) 0%, #fff 78%); padding: 30px 0 56px; }
.plan-bg { position: absolute; color: var(--sky); opacity: .14; width: 760px; right: -120px; top: -30px; pointer-events: none; }
.plan-bg text { font-family: var(--font); font-size: 15px; fill: currentColor; stroke: none; letter-spacing: .04em; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-area { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--sky-800); background: #fff; border: 1.5px solid var(--sky-100); border-radius: 999px; padding: 5px 14px 5px 10px; }
.hero-area::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.hero h1 { color: var(--sky-800); }
.h1-a { display: block; font-size: clamp(20px, 2.2vw, 26px); }
.h1-b { display: block; font-size: clamp(34px, 5vw, 54px); line-height: 1.28; color: var(--sky); letter-spacing: .02em; margin: 4px 0 8px; }
.h1-c { display: block; font-size: clamp(18px, 2.1vw, 23px); color: var(--ink); }
.hero-lead { margin: 14px 0 18px; font-size: 16.5px; color: var(--ink-2); max-width: 34em; }
.hero-price { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-price li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 4px; background: #fff; border: 2px solid var(--sky-100); border-radius: 16px; padding: 8px 16px 8px; font-family: var(--font-h); font-weight: 700; color: var(--sky-800); }
.hero-price li .l { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-bottom: 2px; }
.hero-price li .l small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.hero-price li .u { font-size: 16px; }
.hero-price li b { font-size: 42px; line-height: 1; color: var(--sky-800); letter-spacing: .01em; }
.hero-price li.hot { border-color: var(--orange); background: var(--orange-50); }
.hero-price li.hot b { color: var(--orange-600); }
.tax-note { margin: 8px 0 18px; font-size: 13px; line-height: 1.7; color: var(--ink-3); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* スライド（自動で切り替わる） */
.slider { position: relative; }
.slider-view { overflow: hidden; border-radius: 28px; }
.slides { display: flex; transition: transform .7s cubic-bezier(.22, .7, .2, 1); }
.slide { flex: 0 0 100%; margin: 0; position: relative; min-height: 470px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 18px 18px; border-radius: 28px; }
.slide.s1 { background: var(--sky-100); }
.slide.s2 { background: var(--mint-50); }
.slide.s3 { background: var(--yellow-50); }
.slide figcaption { margin-top: 16px; font-family: var(--font-h); font-weight: 700; font-size: 17px; color: var(--sky-800); text-align: center; }
.slide figcaption small { display: block; font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--ink-3); }
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.slider-nav button { font: inherit; cursor: pointer; }
.sl-arrow { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--sky-100); background: #fff; color: var(--sky-800); display: inline-flex; align-items: center; justify-content: center; }
.sl-arrow:hover { border-color: var(--sky); }
.sl-dots { display: flex; gap: 8px; }
.sl-dot { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; background: var(--sky-100); }
.sl-dot[aria-current="true"] { background: var(--sky); width: 30px; border-radius: 999px; }
.sl-pause { border: 0; background: none; color: var(--ink-3); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* スライド1: 記事が増えていく画面 */
.mphone { width: 250px; background: #fff; border-radius: 30px; border: 9px solid #12304a; box-shadow: var(--shadow); overflow: hidden; }
.mphone-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 12px; color: var(--sky-800); }
.mphone-bar i { width: 18px; height: 18px; border-radius: 5px; background: var(--sky); }
.feed { padding: 10px 10px 12px; display: grid; gap: 8px; }
.feed-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.feed-h span { font-size: 10px; color: var(--sky); }
.fcard { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; max-height: 70px; }
.fcard .th { height: 40px; border-radius: 7px; }
.fcard .th.c1 { background: linear-gradient(135deg, #bfe3ff, #8cc8f5); }
.fcard .th.c2 { background: linear-gradient(135deg, #ffe7a3, #ffcf5c); }
.fcard .th.c3 { background: linear-gradient(135deg, #c9f0dc, #8fdcb5); }
.fcard .th.c4 { background: linear-gradient(135deg, #ffd2b3, #ffab72); }
.fcard b { display: block; font-size: 10.5px; line-height: 1.45; color: var(--ink); font-weight: 700; letter-spacing: 0; }
.fcard em { font-style: normal; font-size: 9.5px; color: var(--ink-3); }
.fcard .new { display: inline-block; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: var(--orange); border-radius: 4px; padding: 0 5px; margin-right: 4px; }
.slide.is-active .fcard.drop { animation: drop .8s cubic-bezier(.2, .8, .2, 1) .6s both; }
.slide.is-active .fcard.drop2 { animation: drop .8s cubic-bezier(.2, .8, .2, 1) 2.4s both; }
@keyframes drop { from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -8px; border-width: 0; } 60% { opacity: 0; } to { opacity: 1; max-height: 70px; } }

/* スライド2: LINEの通知 */
.mline { width: 270px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #8fb3d9; }
.mline-bar { background: #233547; color: #fff; font-size: 12px; font-weight: 700; padding: 12px 14px; }
.mline-chat { padding: 12px 10px 16px; display: grid; gap: 8px; }
.mbub { background: #fff; border-radius: 4px 14px 14px 14px; padding: 9px 11px; font-size: 11px; line-height: 1.65; color: #1c2733; letter-spacing: 0; }
.mbub b { font-weight: 700; }
.mbtns { background: #fff; border-radius: 14px; overflow: hidden; font-size: 11.5px; font-weight: 700; text-align: center; letter-spacing: 0; }
.mbtns span { display: block; padding: 9px; border-top: 1px solid #e8ecf0; color: #2a62c9; }
.mbtns span:first-child { border-top: 0; }
.mbtns span.go { color: var(--mint); position: relative; }
.slide.is-active .mbtns span.go::after { content: ""; position: absolute; right: 64px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: rgba(255, 127, 30, .35); animation: tap 1.6s ease 1s 2 both; }
@keyframes tap { 0% { transform: scale(.4); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* スライド3: 名刺代わりのホームページの画面 */
.mweb { width: 330px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow); position: relative; }
.mweb-bar { display: flex; gap: 5px; padding: 8px 10px; background: #eef2f6; }
.mweb-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c8d1db; }
.mweb-hero { height: 120px; background: linear-gradient(160deg, #9ad3ff 0%, #d9efff 70%); position: relative; padding: 14px; }
.mweb-hero b { position: relative; z-index: 1; font-family: var(--font-h); font-size: 15px; color: var(--sky-800); }
.mweb-hero small { position: relative; z-index: 1; display: block; font-size: 10px; color: var(--ink-2); }
.mweb-hero svg { position: absolute; right: 12px; bottom: 0; width: 120px; }
.mweb-body { padding: 10px 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mweb-body div { border-radius: 8px; background: var(--sky-50); padding: 8px; font-size: 10px; font-weight: 700; color: var(--sky-800); }
.mweb-body div i { display: block; height: 4px; border-radius: 2px; background: #cfe3f3; margin-top: 5px; }
.mweb-body div i + i { width: 70%; }
.mweb-body .map { grid-column: 1 / -1; height: 52px; background: repeating-linear-gradient(0deg, #e3eef7 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, #e3eef7 0 1px, #f6fafd 1px 12px); position: relative; }
.mweb-body .map::after { content: ""; position: absolute; left: 50%; top: 14px; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--orange); transform: rotate(-45deg); }
.price-sticker { position: absolute; right: -14px; top: 34px; width: 96px; height: 96px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-h); font-weight: 700; transform: rotate(8deg); box-shadow: 0 8px 18px rgba(232, 104, 11, .35); line-height: 1.1; }
.price-sticker small { font-size: 11px; }
.price-sticker b { font-size: 30px; }
.price-sticker b span { font-size: 13px; }

/* ---------- 強み（3つの「なし」など） ---------- */
.points { position: relative; z-index: 2; margin-top: -28px; }
.points ul { list-style: none; margin: 0; padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.points li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; }
.points li:nth-child(1) { background: var(--sky-50); }
.points li:nth-child(2) { background: var(--mint-50); }
.points li:nth-child(3) { background: var(--yellow-50); }
.points li:nth-child(4) { background: var(--orange-50); }
.points .ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.points b { display: block; font-family: var(--font-h); font-size: 15.5px; color: var(--sky-800); line-height: 1.4; }
.points small { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- セクション共通 ---------- */
.sec { padding: 64px 0; }
.sec.tint { background: var(--sky-50); }
.sec-h { text-align: center; margin-bottom: 30px; }
.sec-h h2 { font-size: clamp(24px, 3.2vw, 34px); }
.sec-h h2::after { content: ""; display: block; width: 56px; height: 6px; margin: 10px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--sky) 0 60%, var(--orange) 60% 100%); }
.sec-h p { margin: 12px auto 0; max-width: 46em; color: var(--ink-2); }

/* ---------- 無料出張相談 ---------- */
.visit { padding: 8px 0 0; }
.visit-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; background: var(--sky); border-radius: 28px; overflow: hidden; color: #fff; position: relative; }
.visit-in::before { content: ""; position: absolute; left: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .10); }
.visit-copy { position: relative; padding: 32px 36px 34px; }
.visit-tag { display: inline-block; margin: 0 0 10px; background: var(--yellow); color: var(--sky-800); font-weight: 700; font-size: 13.5px; border-radius: 999px; padding: 3px 14px; }
.visit h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); }
.visit-copy > p { margin: 12px 0 14px; color: #eaf6ff; }
.checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; }
.checks li { position: relative; padding-left: 30px; font-weight: 700; }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a8fde' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat; }
.visit-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.visit-photo { margin: 0; position: relative; background: #d6ecfb; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.visit-photo figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 255, 255, .92); color: var(--sky-800); font-weight: 700; font-size: 13px; border-radius: 10px; padding: 4px 12px; }

/* ---------- お悩み ---------- */
.voices { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.voice { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start; }
.voice svg { width: 54px; height: 54px; }
.voice .q { position: relative; margin: 0; background: #fff; border: 2px solid var(--sky-100); border-radius: 16px; padding: 11px 16px; font-weight: 700; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.voice .q::before { content: ""; position: absolute; left: -9px; top: 17px; width: 14px; height: 14px; background: #fff; border-left: 2px solid var(--sky-100); border-bottom: 2px solid var(--sky-100); transform: rotate(45deg); }
.voice .a { position: relative; margin: 8px 0 0; padding-left: 28px; font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--orange-600); }
.voice .a::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat; }
.answer { margin: 28px auto 0; max-width: 760px; text-align: center; }
.answer b { display: block; font-family: var(--font-h); font-size: clamp(22px, 3vw, 30px); color: var(--sky-800); }
.answer p { margin: 6px 0 0; color: var(--ink-2); }

/* ---------- メリット ---------- */
.evidence { max-width: 860px; margin: 0 auto; background: var(--sky-50); border-left: 6px solid var(--sky); border-radius: 0 16px 16px 0; padding: 16px 22px; }
.evidence blockquote { margin: 0; font-weight: 700; font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.evidence figcaption { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.merit-lead { max-width: 860px; margin: 22px auto 22px; color: var(--ink-2); }
.merit-lead strong { color: var(--sky-800); }
.merits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.merit { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; align-items: start; background: #fff; border: 2px solid var(--sky-100); border-radius: 20px; padding: 20px 22px; }
.merit .ic { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.merit:nth-child(1) .ic { background: var(--sky-100); }
.merit:nth-child(2) .ic { background: var(--mint-50); }
.merit:nth-child(3) .ic { background: var(--yellow-50); }
.merit:nth-child(4) .ic { background: var(--orange-50); }
.merit .no { display: inline-block; font-family: var(--font-h); font-weight: 700; font-size: 12.5px; line-height: 1.6; color: var(--sky-600); background: var(--sky-50); border-radius: 999px; padding: 1px 10px; margin-bottom: 4px; }
.merit h3 { font-size: 19px; margin-bottom: 4px; }
.merit p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.merit-end { margin: 26px auto 0; text-align: center; font-family: var(--font-h); font-weight: 700; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.6; color: var(--sky-800); }
.merit-end strong { color: var(--orange-600); }
.honest { margin: 18px auto 0; max-width: 860px; background: #fff; border: 2px dashed var(--sky-100); border-radius: 18px; padding: 14px 20px; color: var(--ink-2); font-size: 14.5px; }
.honest b { display: block; color: var(--sky-800); }

/* ---------- 仕組み ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: st; }
.step { position: relative; background: var(--sky-50); border-radius: 20px; padding: 24px 18px 18px; }
.step::before { counter-increment: st; content: counter(st); position: absolute; top: -16px; left: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--sky); color: #fff; font-family: var(--font-h); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.step .who { display: inline-block; font-size: 12px; font-weight: 700; color: var(--sky-600); background: #fff; border-radius: 999px; padding: 1px 10px; margin-bottom: 8px; }
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.step.you { background: var(--orange-50); outline: 2px solid var(--orange); }
.step.you::before { background: var(--orange); }
.step.you .who { color: var(--orange-600); }
.ops { margin-top: 30px; background: #fff; border: 2px solid var(--mint); border-radius: 20px; padding: 18px 22px 16px; }
.ops h3 { font-size: 19px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ops h3::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--line-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3C6.5 3 2 6.6 2 11.1c0 4 3.6 7.4 8.4 8l-.4 2.2c-.1.5.4.8.8.6l3.2-2.1c4.6-.8 8-4.2 8-8.3C22 6.6 17.5 3 12 3z'/%3E%3C/svg%3E") center/18px no-repeat; }
.ops ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: op; }
.ops li { position: relative; background: var(--mint-50); border-radius: 14px; padding: 12px 14px 12px 50px; }
.ops li::before { counter-increment: op; content: counter(op); position: absolute; left: 13px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ops li b { display: block; font-family: var(--font-h); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.ops li span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.ops li .say { display: inline-block; margin-top: 6px; background: #fff; border: 1.5px solid #9fdcc2; border-radius: 4px 14px 14px 14px; padding: 3px 12px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ops-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.gnote { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; background: #fff; border: 2px solid var(--sky-100); border-radius: 20px; padding: 18px 22px; }
.gnote .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--sky-100); display: flex; align-items: center; justify-content: center; }
.gnote h3 { font-size: 18px; margin-bottom: 4px; }
.gnote p { margin: 0 0 .6em; font-size: 15px; color: var(--ink-2); }
.gnote blockquote { margin: 0 0 .8em; padding: 10px 14px; background: var(--sky-50); border-radius: 10px; font-size: 14.5px; color: var(--ink); }
.src { font-size: 12.5px; color: var(--ink-3); margin: 0; }

/* ---------- 実績 ---------- */
.showcase { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef2f6; font-size: 12px; color: var(--ink-3); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c8d1db; }
.browser-bar span { margin-left: 8px; background: #fff; border-radius: 6px; padding: 1px 10px; }
.show-copy .kind { display: inline-block; font-size: 13px; font-weight: 700; color: var(--orange-600); background: var(--orange-50); border-radius: 999px; padding: 2px 12px; margin-bottom: 10px; }
.show-copy h3 { font-size: 24px; margin-bottom: 10px; }
.show-copy p { color: var(--ink-2); }
.facts-note { font-size: 12.5px; color: var(--ink-3); margin: -8px 0 14px; }
.facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.facts li { background: var(--sky-50); border-radius: 14px; padding: 10px 8px; text-align: center; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.facts b { display: block; font-family: var(--font-h); font-size: 24px; color: var(--sky-800); line-height: 1.25; }
.thumbs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.thumbs li { margin: 0; }
.thumbs figure { margin: 0; }
.thumbs img { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(11, 79, 140, .08); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.thumbs figcaption { margin-top: 10px; text-align: center; font-weight: 700; font-size: 14px; color: var(--ink); }
.inq { margin-top: 40px; }
.inq h3 { text-align: center; font-size: 22px; }
.inq > p { text-align: center; color: var(--ink-2); margin: 6px 0 18px; font-size: 14.5px; }
.inq-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.inq-list li:first-child { grid-row: span 2; }
.inq-list figure { margin: 0; background: #1d1f21; border-radius: 18px; padding: 12px; }
.inq-list img { border-radius: 10px; width: 100%; }
.inq-list figcaption { color: #e9eef3; font-size: 13.5px; font-weight: 700; padding: 10px 4px 2px; }
.inq-note { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 14px; }

/* ---------- 料金 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 26px 22px 22px; }
.plan.hot { border-color: var(--orange); box-shadow: 0 16px 36px rgba(255, 127, 30, .16); }
.plan .badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 3px 18px; white-space: nowrap; }
.plan h3 { font-size: 21px; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 2.9em; }
.plan .for { text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin: 4px 0 14px; }
.pr { text-align: center; padding: 10px 0 10px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin-bottom: 16px; font-family: var(--font-h); font-weight: 700; color: var(--sky-800); }
.pr b { font-size: 56px; line-height: 1; letter-spacing: .01em; }
.pr .u { font-size: 22px; margin-left: 2px; }
.pr .t { display: block; font-family: var(--font); font-weight: 400; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.plan.hot .pr b { color: var(--orange-600); }
.pr .sub { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.plan ul, .option ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.plan li, .option li { position: relative; padding-left: 26px; line-height: 1.65; }
.plan li::before, .option li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a873' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan li.no { color: var(--ink-3); }
.plan li.no::before { background: #f0f3f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa9b6' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan li strong { color: var(--orange-600); }
.plan .btn { margin-top: auto; }
.renew { margin: 0 0 18px; background: var(--yellow-50); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; color: var(--ink); line-height: 1.7; }
.renew b { color: var(--sky-800); }
/* オプション（料金のカードの下） */
.option { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 10px 32px; align-items: center; background: var(--yellow-50); border: 2px dashed #f0c85a; border-radius: 24px; padding: 22px 28px; }
.option-main { text-align: center; }
.option-tag { display: inline-block; background: var(--orange); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 1px 14px; }
.option h3 { font-size: 24px; margin-top: 4px; }
.option-for { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.option .pr { margin-bottom: 0; padding: 8px 0; border-color: #f0d98a; }
.option .pr b { font-size: 44px; }
.option .pr .u { font-size: 20px; }
.option ul { margin: 0; }
.option-note { margin: 12px 0 0; background: #fff; border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.option-note b { display: block; color: var(--sky-800); }
.price-notes { max-width: 900px; margin: 20px auto 0; padding: 0 0 0 1.2em; font-size: 13.5px; color: var(--ink-2); }
.price-notes li { margin-bottom: 4px; }

/* ---------- 流れ ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; counter-reset: fl; }
.flow li { position: relative; text-align: center; background: var(--sky-50); border-radius: 18px; padding: 16px 10px 14px; }
.flow li::before { counter-increment: fl; content: counter(fl); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; background: var(--sky); color: #fff; font-family: var(--font-h); font-weight: 700; }
.flow li:last-child::before { background: var(--orange); }
.flow b { display: block; font-family: var(--font-h); font-size: 15.5px; color: var(--sky-800); line-height: 1.5; }
.flow li > span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }

/* ---------- 無料ツールの案内 ---------- */
.tool-band { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; background: var(--yellow-50); border-radius: 24px; padding: 32px 36px; }
.tool-band h2 { font-size: clamp(21px, 2.6vw, 27px); margin-bottom: 8px; }
.tool-band p { margin: 0; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips span { font-size: 13px; font-weight: 700; color: #8a4a00; background: #fff; border: 1.5px solid #ffd27a; border-radius: 8px; padding: 1px 10px; }

/* ---------- よくある質問 ---------- */
.faq { max-width: 880px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: #fff; border: 2px solid var(--sky-100); border-radius: 16px; padding: 0 22px; }
.faq details[open] { border-color: var(--sky); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 14px 34px 14px 38px; font-weight: 700; color: var(--sky-800); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); color: #fff; font-family: var(--font-h); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--sky); border-bottom: 2.5px solid var(--sky); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { position: relative; padding: 0 0 16px 38px; color: var(--ink-2); font-size: 15px; }
.faq .a::before { content: "A"; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--font-h); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- 運営者 ---------- */
.about { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; max-width: 940px; margin: 0 auto; }
.about-photo { margin: 0; }
.about-photo img { border-radius: 24px; box-shadow: var(--shadow); }
.about-photo figcaption { text-align: center; margin-top: 10px; font-weight: 700; color: var(--sky-800); font-family: var(--font-h); }
.about-msg p { font-size: 15.5px; }
.about-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14.5px; background: #fff; border-radius: 14px; overflow: hidden; }
.about-table th, .about-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.about-table tr:last-child th, .about-table tr:last-child td { border-bottom: 0; }
.about-table th { width: 7.5em; color: var(--ink-3); font-weight: 700; white-space: nowrap; background: var(--sky-50); }

/* ---------- お問い合わせ ---------- */
.contact { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.line-card { background: var(--line-green); color: #fff; border-radius: 24px; padding: 28px 26px; text-align: center; }
.line-card h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.line-card p { font-size: 14.5px; margin: 0 0 16px; color: #eafff2; }
.line-card .btn-white { color: #05893f; width: 100%; }
.line-card .btn-white:hover { color: #05893f; background: #f0fff6; }
.qr { margin: 18px auto 0; width: 150px; background: #fff; border-radius: 14px; padding: 10px; }
.qr figcaption { color: #3b4b57; font-size: 12px; margin-top: 4px; }
.form-card { background: #fff; border: 2px solid var(--sky-100); border-radius: 24px; padding: 28px 28px 26px; }
.form-card h3 { font-size: 22px; margin-bottom: 4px; }
.form-card > p { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 14px; font-weight: 700; color: var(--ink); padding: 0; }
.req, .opt { font-size: 11.5px; font-weight: 700; border-radius: 4px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.req { color: #fff; background: var(--orange); }
.opt { color: var(--ink-3); background: #eef2f5; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fbfdff; border: 2px solid #cfe0ee; border-radius: 12px; padding: 11px 14px; width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--sky); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(26, 143, 222, .15); }
.field textarea { min-height: 120px; resize: vertical; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.radios label, .check { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; border: 2px solid #cfe0ee; border-radius: 12px; padding: 9px 12px; cursor: pointer; background: #fbfdff; color: var(--ink); }
.radios input, .check input { width: 18px; height: 18px; accent-color: var(--orange); margin: 0; flex: none; }
.radios label:has(input:checked), .check:has(input:checked) { border-color: var(--orange); background: var(--orange-50); }
.field label.check { margin-top: 2px; padding: 11px 12px; font-size: 14.5px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--ink-3); margin: 16px 0 14px; }
.form-msg { margin-top: 14px; border-radius: 12px; padding: 12px 14px; font-size: 15px; display: none; }
.form-msg.ok { display: block; background: var(--mint-50); color: #0f5a3a; }
.form-msg.ng { display: block; background: #fdecea; color: #8a1c12; }

/* ---------- フッター ---------- */
.ft { background: var(--sky-800); color: #cfe2f3; padding: 40px 0 32px; font-size: 13.5px; }
.ft-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.ft .logo-t small { color: #9fd3ff; }
.ft .logo-t b { color: #fff; }
.ft .logo img { background: #fff; border-radius: 12px; padding: 4px; }
.ft-desc { margin: 12px 0 0; }
.ft ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ft a { color: #fff; text-decoration: none; }
.ft a:hover { color: #ffe3c9; text-decoration: underline; }
.copy { width: 100%; margin: 4px 0 0; color: #8fb5d6; font-size: 12.5px; }

/* スマホの下に出る相談ボタン */
.fixbar { display: none; }

/* ---------- 下層ページ ---------- */
.page-head { background: var(--sky-50); padding: 44px 0 28px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; }
.crumbs a { color: var(--ink-3); }
.page-head h1 { font-size: clamp(26px, 3.6vw, 38px); }
.page-head .lead { margin: 12px 0 0; color: var(--ink-2); max-width: 48em; }
.prose { max-width: 820px; margin: 0 auto; padding: 34px 20px 80px; }
.prose h2 { font-size: 20px; margin: 34px 0 10px; padding-left: 14px; border-left: 6px solid var(--sky); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--sky-50); white-space: nowrap; }
.note { font-size: 13.5px; color: var(--ink-3); }

/* ---------- 表現チェック（無料ツール） ---------- */
.tool { max-width: 980px; margin: 0 auto; padding: 30px 20px 80px; }
.panel { background: #fff; border: 2px solid var(--sky-100); border-radius: 20px; padding: 24px; }
.panel + .panel { margin-top: 20px; }
.panel h2 { font-size: 20px; margin-bottom: 12px; }
.tool textarea { font: inherit; font-size: 16px; width: 100%; min-height: 200px; resize: vertical; border: 2px solid #cfe0ee; border-radius: 14px; padding: 14px 16px; background: #fbfdff; color: var(--ink); line-height: 1.8; }
.tool textarea:focus { border-color: var(--sky); outline: none; box-shadow: 0 0 0 4px rgba(26, 143, 222, .15); background: #fff; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.tool-actions .count { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.privacy-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0f6b47; background: var(--mint-50); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.summary div { background: var(--sky-50); border-radius: 14px; padding: 12px 14px; }
.summary b { display: block; font-family: var(--font-h); font-size: 28px; color: var(--sky-800); line-height: 1.2; }
.summary span { font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.hits { display: grid; gap: 14px; }
.hit { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; border-left-width: 6px; }
.hit h3 { font-size: 16.5px; margin-bottom: 6px; }
.hit .words { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.hit .w { font-size: 13.5px; font-weight: 700; border-radius: 6px; padding: 2px 10px; }
.hit .w.sim { border: 1.5px dashed currentColor; background: transparent !important; }
.hit p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 6px; }
.hit .need { font-size: 14px; font-weight: 700; color: var(--ink); }
.hit .src { margin: 6px 0 0; }
.k-top { border-left-color: #c2412b; } .k-top .w { background: #fde3dd; color: #8f2a18; }
.k-cheap { border-left-color: #d97706; } .k-cheap .w { background: #fdebd2; color: #874607; }
.k-perfect { border-left-color: #7b4bb7; } .k-perfect .w { background: #efe6fa; color: #57308a; }
.k-superior { border-left-color: #1a8fde; } .k-superior .w { background: #dcefff; color: #0b4f8c; }
.k-select { border-left-color: #16a873; } .k-select .w { background: #dcf3e8; color: #0f6b47; }
.k-popular { border-left-color: #c2367a; } .k-popular .w { background: #fbe2ee; color: #86214f; }
.k-defined { border-left-color: #5b6b7b; } .k-defined .w { background: #e9edf1; color: #33414f; }
.k-walk { border-left-color: #0f8a99; } .k-walk .w { background: #dcf1f3; color: #0b5560; }
.marked-title { font-size: 16px; margin: 24px 0 10px; }
.marked { white-space: pre-wrap; line-height: 2; font-size: 15px; background: var(--sky-50); border-radius: 14px; padding: 16px 18px; }
.marked mark { border-radius: 4px; padding: 1px 2px; color: inherit; font-weight: 700; }
.marked mark.sim { background: transparent !important; box-shadow: inset 0 -3px 0 currentColor; }
mark.m-top { background: #fbd3ca; } mark.m-cheap { background: #fcdcb6; } mark.m-perfect { background: #e3d3f7; }
mark.m-superior { background: #cfe6fb; } mark.m-select { background: #cbeadd; } mark.m-popular { background: #f8cfe2; }
mark.m-defined { background: #dde3ea; } mark.m-walk { background: #c9ecf0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.empty { text-align: center; color: var(--ink-2); padding: 18px 0 6px; }
.calc { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.calc .field input { max-width: 260px; }
.calc-out { font-size: 15px; color: var(--ink-2); margin-top: 12px; min-height: 1.8em; }
.calc-out b { font-family: var(--font-h); font-size: 26px; color: var(--sky-800); }
.disclaimer { margin-top: 20px; font-size: 13.5px; color: var(--ink-2); background: var(--yellow-50); border-radius: 16px; padding: 16px 18px; }
.disclaimer p { margin: 0 0 .6em; }
.disclaimer p.last { margin: 0; }
.cta-band { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--sky); color: #fff; border-radius: 20px; padding: 22px 26px; }
.cta-band p { margin: 0; font-family: var(--font-h); font-weight: 700; font-size: 17px; }

/* ---------- 画面の幅ごとの調整 ---------- */
@media (max-width: 1060px) {
  .gnav { gap: 14px; font-size: 13.5px; }
  .hd-cta .btn-line { display: none; }
}
@media (max-width: 960px) {
  .flow { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .points ul { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 30px; }
  .plan h3 { min-height: 0; }
  .option { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .showcase { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hd-in { height: 64px; }
  .gnav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 6px 20px 14px; box-shadow: 0 12px 20px rgba(11, 79, 140, .08); }
  .gnav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .menu-open .gnav { display: flex; }
  .hd-cta { margin-left: auto; }
  .hd-cta .btn-or { display: none; }
  .menu-btn { display: inline-flex; }
  .hero { padding: 20px 0 50px; }
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .plan-bg { width: 520px; right: -200px; top: -40px; }
  .visit-in { grid-template-columns: 1fr; }
  .visit-photo { height: 240px; order: -1; }
  .visit-copy { padding: 28px 24px 30px; }
  .merits { grid-template-columns: 1fr; }
  .ops ol { grid-template-columns: 1fr; }
  .voices { grid-template-columns: 1fr; max-width: 560px; }
  .inq-list { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .inq-list li:first-child { grid-row: auto; }
  .about { grid-template-columns: 1fr; gap: 20px; }
  .visit-cta .btn { flex: 1 1 220px; }
  .about-photo { max-width: 220px; margin: 0 auto; }
  .tool-band { grid-template-columns: 1fr; padding: 26px 22px; }
  .fixbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(11, 79, 140, .08); }
  .fixbar .btn { min-height: 48px; font-size: 15px; padding: 0 10px; }
  body.has-fixbar { padding-bottom: 72px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .sec { padding: 46px 0; }
  .sec-h { margin-bottom: 22px; }
  .sec-h p { text-align: left; }
  .hd-in { gap: 10px; }
  .logo { gap: 7px; }
  .logo img { width: 34px; height: 34px; }
  .logo-t small { font-size: 10.5px; letter-spacing: .04em; }
  .logo-t b { font-size: 15px; letter-spacing: .02em; }
  .menu-btn { padding: 0 12px; }
  .visit { padding: 0; }
  .visit-copy { padding: 24px 20px 26px; }
  .hero-price li { flex: 1 1 100%; }
  .merit { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "ic no" "ic h" "p p"; column-gap: 12px; row-gap: 0; padding: 16px; }
  .merit > div { display: contents; }
  .merit .ic { grid-area: ic; width: 48px; height: 48px; border-radius: 14px; }
  .merit .ic svg { width: 26px; height: 26px; }
  .merit .no { grid-area: no; justify-self: start; }
  .merit h3 { grid-area: h; font-size: 17.5px; margin: 0; }
  .merit p { grid-area: p; margin-top: 10px; }
  .steps { gap: 12px; }
  .step { padding: 14px 16px 16px; }
  .step::before { position: static; display: inline-flex; vertical-align: middle; width: 30px; height: 30px; margin: 0 8px 0 0; font-size: 15px; }
  .step .who { vertical-align: middle; margin-bottom: 0; }
  .step h3 { margin-top: 6px; }
  .gnote { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 16px; }
  .gnote > div { display: contents; }
  .gnote .ic { width: 40px; height: 40px; border-radius: 12px; }
  .gnote h3 { align-self: center; margin: 0; font-size: 17px; }
  .gnote p, .gnote blockquote { grid-column: 1 / -1; margin: 0; }
  .about-table th, .about-table td { display: block; width: auto; }
  .about-table th { padding: 10px 14px 0; border-bottom: 0; background: none; }
  .about-table td { padding: 2px 14px 10px; }
  .visit-cta .btn { flex: 1 1 100%; }
  .evidence { padding: 14px 16px; }
  .evidence blockquote { font-size: 15.5px; }
  .ops { padding: 16px 14px 14px; }
  .thumbs figcaption { font-size: 13px; }
  .hero-price li b { font-size: 36px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .slide { min-height: 430px; padding: 22px 12px 14px; }
  .points ul { grid-template-columns: 1fr; padding: 12px; }
  .voice { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .voice svg { width: 44px; height: 44px; }
  .voice .q { font-size: 15px; padding: 10px 14px; }
  .steps { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .facts b { font-size: 21px; }
  .thumbs { gap: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .radios { grid-template-columns: 1fr; }
  .form-card { padding: 22px 16px; }
  .pr b { font-size: 52px; }
  .plan { padding: 24px 18px 20px; }
  .summary b { font-size: 22px; }
  .calc { grid-template-columns: 1fr; }
  .tool { padding: 22px 16px 64px; }
  .panel { padding: 18px 16px; }
  .prose { padding: 26px 16px 64px; }
}
@media (max-width: 380px) {
  .logo img { width: 30px; height: 30px; }
  .logo-t small { font-size: 10px; }
  .logo-t b { font-size: 14px; }
  .menu-btn { padding: 0 10px; font-size: 13px; }
}
/* 印刷する時: 見えていないスライドがあると、ページ全体が縮んで印刷されるため、表示中の1枚だけにする */
@media print {
  .slide:not(.is-active), .slider-nav, .fixbar { display: none !important; }
  .slides { transform: none !important; }
  .hd { position: static; }
  body.has-fixbar { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slides { transition: none; }
  .slide.is-active .fcard.drop, .slide.is-active .fcard.drop2, .slide.is-active .mbtns span.go::after { animation: none; }
  .btn { transition: none; }
}