/*
  Webの相談室：デザイン案 v10（2026-10-03）
  明るい青 × 黄色。責任者が示した参考サイトの「色味・明るさ・太い見出し」を手がかりにした案。
  style.css のあとに読み込み、色・文字・形を上書きします。
  色を変えるときは、すぐ下の :root { } の中の色コードを変えます。
*/
:root {
  --blue: #1397DD;         /* 飾り・数字・線 */
  --blue-d: #0A78B8;       /* ボタン・文字リンク（白い文字が読める濃さ） */
  --blue-dd: #075E92;      /* ボタンにマウスを乗せたとき */
  --blue-pale: #EAF5FC;    /* 薄い青の面 */
  --blue-pale2: #D3EBF9;
  --yellow: #FBC707;       /* 目立たせる色 */
  --yellow-pale: #FFF6D6;
  --ink: #2C3B44;          /* 文字 */

  --white: #FFFFFF;
  --beige: #F3F7FA; --beige-2: #E6F1F8; --sand: #D3EBF9;
  --text: #2C3B44; --sub: #52626B; --ink2: #3B4B54;
  --rule: #DAE5EC; --accent: #1397DD; --sage: #BBDCF1; --deep: #0A78B8;
  --il-paper: #FFFFFF; --il-light: #EAF5FC; --il-mid: #D3EBF9; --il-fill: #FFE27A; --il-green: #9ED3F2; --il-green2: #CDE9F9;
  --il-accent: #1397DD; --il-dark: #2C3B44; --il-glow: #FFF1B8; --il-line: #9DB4C1;
  --header-bg: rgba(255, 255, 255, .97);
  --f-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-head: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-en: "Montserrat", "Noto Sans JP", sans-serif;
  --grad: linear-gradient(100deg, #FFF6D6 0%, #F6F9EE 42%, #DCF1FD 100%);
  --shadow: 0 10px 28px -16px rgba(30, 70, 100, .38);
}

body { line-height: 1.9; letter-spacing: .03em; }
section { padding: 104px 0; }
h1, h2, h3 { font-family: var(--f-head); }

/* ===== ボタン：角を少し丸く、右に丸い矢印 ===== */
.btn { border: 2px solid var(--blue-d); border-radius: 6px; color: var(--blue-d); font-weight: 700; }
.btn::before { background: var(--blue-pale); }
.btn-main { background: var(--blue-d); border-color: var(--blue-d); color: #fff; box-shadow: 0 8px 18px -10px rgba(10, 120, 184, .8); }
.btn-main::before { background: var(--blue-dd); }
.btn-main:hover { color: #fff; border-color: var(--blue-dd); }
.btn-line { background: var(--line-green); border-color: var(--line-green); color: #fff; box-shadow: 0 8px 18px -10px rgba(21, 128, 61, .8); }
.btn .ar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-d); transition: transform .3s var(--ease); }
.btn .ar::after { right: auto; left: 9px; top: 10px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.btn:hover .ar { width: 28px; transform: translateX(4px); }
.btn-main .ar, .btn-line .ar { background: #fff; }
.btn-main .ar::after { border-color: var(--blue-d); }
.btn-line .ar::after { border-color: var(--line-green); }
.btn-sm { border-width: 2px; }
.btn-sm .ar { width: 22px; height: 22px; }
.btn-sm .ar::after { left: 6px; top: 7px; }
.btn-sm:hover .ar { width: 22px; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.tlink { color: var(--blue-d); font-weight: 700; background-image: linear-gradient(var(--blue-d), var(--blue-d)); }

/* ===== ヘッダー ===== */
header.site { border-bottom: none; box-shadow: 0 2px 14px -6px rgba(30, 70, 100, .28); }
.logo b { font-weight: 900; font-size: 20px; letter-spacing: .06em; }
nav.gnav { font-weight: 700; gap: 26px; }
nav.gnav a::after { height: 3px; bottom: -8px; background: var(--yellow); }
.progress { background: var(--blue); height: 3px; }
.menu-btn { border: 2px solid var(--blue-d); border-radius: 6px; }
.menu-btn i { background: var(--blue-d); height: 2px; }
.drawer a { font-weight: 700; font-size: 16px; }
.pnav a.on i { background: var(--blue); border-color: var(--blue); }

/* ===== 見出し：まん中に置き、番号と英字のラベルを添える ===== */
.sec-title { display: block; text-align: center; margin-bottom: 52px; }
.sec-title span.no, .about-text span.no { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; font-family: var(--f-en) !important; letter-spacing: .14em !important; font-size: 14px !important; color: var(--blue-d) !important; }
.sec-title span.no::before, .about-text span.no::before { content: ""; width: 26px; height: 5px; border-radius: 3px; background: var(--yellow); }
.sec-title .no::after { display: none; }
span.no b { font-family: var(--f-en); font-size: 15px; font-weight: 700; color: var(--blue); letter-spacing: .08em; }
span.no i { font-style: normal; font-weight: 700; }
.sec-title h2 { font-weight: 700; font-size: 34px; line-height: 1.5; letter-spacing: .05em; }
.sec-title h2 br { display: none; }
.sec-title .lead { margin: 18px auto 0; max-width: 40em; color: var(--ink2); }
.sec-title .spot { display: none; }
.sec-title .note-fic { display: inline-block; margin: 18px auto 0; border-left: none; background: var(--yellow-pale); border-radius: 6px; padding: 8px 18px; font-size: 14px; color: var(--ink2); text-align: left; }
.note-fic { border-left: none; background: var(--yellow-pale); border-radius: 6px; padding: 8px 18px; font-size: 14px; color: var(--ink2); }
.label-fic { border-color: var(--blue); color: var(--blue-d); font-weight: 700; }

/* ===== 1 最初の画面 ===== */
.hero { background: var(--grad); padding: 68px 0 0; overflow: visible; }
.hero-grid { align-items: center; }
.hero .open { background: #fff; border: 1px solid var(--blue-pale2); color: var(--blue-d); font-weight: 700; }
.hero .open .sep { background: var(--blue-pale2); }
.hero h1 { font-weight: 900; font-size: 47px; line-height: 1.5; letter-spacing: .04em; margin-bottom: 24px; }
.hero h1 em { background-image: linear-gradient(transparent 60%, var(--yellow) 60%); }
.hero .lead { font-weight: 500; color: var(--ink2); }
.hero .lead strong { background: linear-gradient(transparent 68%, rgba(251, 199, 7, .45) 68%); }
.hero .btn { min-height: 62px; min-width: 0; padding: 0 16px 0 20px; font-size: 16px; }
.hero .btns { flex-wrap: nowrap; }
.hero .btn .ar { margin-left: 14px; }
.hero-shot { padding: 30px 0 8px; }
.hero-shot .hs-back { left: 2%; right: -40px; top: -18px; bottom: 6px; background: #fff; border-radius: 50%; opacity: .78; }
.hero-shot::before { content: ""; position: absolute; left: -22px; top: 6px; width: 86px; height: 86px; border-radius: 50%; border: 12px solid var(--yellow); z-index: 0; }
.hero-shot::after { content: ""; position: absolute; right: 2%; top: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); z-index: 0; }
.hero-shot .scr { border-color: var(--ink); box-shadow: 0 34px 50px -34px rgba(20, 60, 90, .6); }
.hero-shot .base { background: #C5D3DC; }
.hero-shot .phone { border-color: var(--ink); box-shadow: 0 26px 40px -18px rgba(20, 60, 90, .5); }
.hero-shot figcaption { text-align: center; margin-left: 0; }

/* 最初の画面の下：数字の帯（どれも事実。件数などの実績ではありません） */
.hero-stats { position: relative; z-index: 2; list-style: none; margin: 52px 0 -62px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 10px; box-shadow: var(--shadow); }
.hero-stats li { padding: 22px 12px 20px; text-align: center; position: relative; }
.hero-stats li + li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--rule); }
.hero-stats b { display: block; font-family: var(--f-en); font-weight: 700; font-size: 38px; line-height: 1.15; color: var(--blue); letter-spacing: .01em; }
.hero-stats b small { font-family: var(--f-head); font-size: 17px; font-weight: 700; margin-left: 2px; color: var(--ink); }
.hero-stats span { display: block; font-size: 14px; font-weight: 700; color: var(--ink2); line-height: 1.6; margin-top: 4px; }
.hero + section { padding-top: 158px; }

/* ===== 2 相談できること ===== */
#t-problems { background: #fff; }
.sheet { gap: 18px; }
.row-chk { border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 8px 20px -16px rgba(30, 70, 100, .45); padding: 24px 24px 20px 20px; }
#t-problems .row-chk:hover { border-color: var(--blue); box-shadow: var(--shadow); }
#t-problems .row-chk:has(input:checked) { background: #F2FAFF; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue) inset; }
.row-chk .circle::before { border: 2px solid var(--blue); }
.row-chk .circle svg { stroke: var(--yellow); stroke-width: 3; }
.row-chk h3 { font-weight: 700; font-size: 18px; }
.row-chk .ans { color: var(--blue-d); font-weight: 700; border-top: 1px dashed var(--blue-pale2); }
.row-chk:has(input:checked) .ans { color: var(--blue-dd); }
.sheet-foot { background: var(--blue-pale); border-radius: 8px; padding: 20px 26px; }
.sheet-foot p { font-weight: 700; }
.sheet-foot .btn svg { margin-left: 0; }
.count { font-family: var(--f-en); font-size: 34px; color: var(--blue); }

/* ===== 3 制作事例 ===== */
.works-sec { background: var(--blue-pale); }
.wcard { border: none; border-radius: 10px; box-shadow: 0 10px 24px -18px rgba(30, 70, 100, .5); }
.wcard:hover { box-shadow: 0 26px 40px -24px rgba(30, 70, 100, .55); }
.wshot { background: linear-gradient(135deg, #FFF3C4, #D9F0FD); }
.wsp { border-color: var(--ink); }
.wtags span { font-weight: 700; background: var(--blue-pale); color: var(--blue-d); }
.wtags span:first-child { background: var(--yellow); color: var(--ink); }
.wbody h3 { font-weight: 700; font-size: 20px; }
.wmore { color: var(--blue-d); font-weight: 700; }
.works-more .btn { background: #fff; }
.sub-head { font-weight: 700; justify-content: center; }
.sub-head::before { width: 26px; height: 5px; border-radius: 3px; background: var(--yellow); }
.ba { border-radius: 10px; box-shadow: var(--shadow); }
.ba .handle b { background: var(--blue-d); }
.ba .tag.r { background: var(--blue-d); }
.feature .info h3 { font-weight: 700; font-size: 24px; }
.new .nh b, .new .kv strong { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }   /* 図の中の見本は、もとの書体のまま */

/* ===== 事例のあとの相談の帯 ===== */
.cta-room { background: linear-gradient(100deg, #FBC707, #FFDC52); color: var(--ink); padding: 64px 0; }
.cta-room .cta-in { max-width: 1020px; margin: 0 auto; padding: 40px 48px; background: #fff; border-radius: 12px; box-shadow: 0 22px 40px -26px rgba(110, 80, 0, .7); grid-template-columns: 130px 1fr auto; gap: 40px; }
.cta-room h2 { font-weight: 700; font-size: 26px; letter-spacing: .04em; }
.cta-room p { color: var(--ink2); }
.cta-room .btn-main { background: var(--blue-d); color: #fff; border-color: var(--blue-d); }
.cta-room .btn-main:hover { border-color: var(--blue-dd); }
.door .s { stroke: var(--ink); }
.door [fill="#3A352F"] { fill: var(--blue-d); }
.door .light { fill: var(--yellow); opacity: .3; }
.door.in .light { opacity: .95; }

/* ===== 4 料金 ===== */
#t-price { background: #fff; }
.free-line { text-align: center; font-weight: 700; font-size: 18px; }
.free-line b { font-family: var(--f-head); font-size: 26px; color: var(--blue-d); background: linear-gradient(transparent 62%, var(--yellow) 62%); padding: 0 6px; }
.plans { gap: 24px; align-items: stretch; }
.plan { border: 1px solid var(--rule); border-top: 6px solid var(--blue); border-radius: 10px; box-shadow: 0 10px 24px -18px rgba(30, 70, 100, .5); padding: 30px 28px 30px; }
.plan:hover { border-color: var(--rule); border-top-color: var(--blue); box-shadow: 0 26px 40px -24px rgba(30, 70, 100, .55); }
.plan .for { font-weight: 700; color: var(--blue-d); }
.plan h3 { font-weight: 700; font-size: 22px; }
.plan .price { font-family: var(--f-en); font-weight: 700; font-size: 36px; color: var(--blue-d); }
.plan .price small { font-family: var(--f-body); }
.plan li { padding-left: 18px; }
.plan li::before { top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.plan.hot { background: var(--blue-d); border-color: var(--blue-d); border-top-color: var(--yellow); color: #fff; }
.plan.hot:hover { border-color: var(--blue-d); border-top-color: var(--yellow); }
.plan.hot .for { color: #fff; }
.plan.hot .price { color: #fff; }
.plan.hot .badge { background: var(--yellow); color: var(--ink); font-weight: 700; font-size: 13px; padding: 2px 14px; top: -16px; }
.price-more .btn { background: #fff; }

/* ===== 5 流れ ===== */
.flow-sec { background: var(--blue-pale); }
.steps { gap: 24px; }
.steps li { border-top: none; border-radius: 10px; box-shadow: 0 10px 24px -18px rgba(30, 70, 100, .5); padding: 30px 26px 28px; text-align: center; }
.steps .ic { width: 84px; height: 84px; margin: 0 auto 14px; padding: 14px; background: var(--blue-pale); border-radius: 50%; }
.steps .n { display: inline-block; font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: #fff; background: var(--blue); border-radius: 999px; padding: 1px 14px; line-height: 1.9; }
.steps h3 { font-weight: 700; margin: 8px 0 6px; }
.steps p { text-align: left; color: var(--ink2); }
.steps li:not(:nth-child(3n))::after { right: -19px; top: 66px; width: 12px; height: 12px; border-top: 3px solid var(--blue); border-right: 3px solid var(--blue); }

/* ===== 6 自己紹介 ===== */
#t-about { background: #fff; }
.about-card { grid-template-columns: 300px 1fr; gap: 64px; }
.about-tanuki { width: 300px; aspect-ratio: 1; object-fit: contain; padding: 26px 18px 14px; background: var(--grad); border-radius: 50%; box-shadow: 0 0 0 10px #fff, 0 0 0 14px var(--yellow); }
.about-text h2 { font-weight: 700; font-size: 28px; letter-spacing: .04em; }
/* 受付・返信・対応エリア：囲みの箱はやめて、線で区切った表にする（2026-10-03 責任者の指摘「囲っている感じがAIっぽい」）
   → 見やすさのため、項目名を色つきの札にして、内容の文字を大きくした（同日「もう少し見やすさも大事」） */
.facts { display: block; margin-top: 30px; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 20px; align-items: center; background: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 14px; font-weight: 700; color: #fff; background: var(--blue-d); border-radius: 4px; text-align: center; padding: 4px 6px; line-height: 1.6; letter-spacing: .06em; }
.facts dd { font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.facts dd br { display: none; }
.facts dd .sub { margin-left: 14px; font-size: 15px; font-weight: 500; color: var(--ink2); }

/* ===== 7 よくある質問 ===== */
#t-faq { background: var(--beige); }
.faq { border-top: none; display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.qa { border: 1px solid var(--rule); border-radius: 8px; background: #fff; overflow: hidden; }
.qa button { grid-template-columns: 48px 1fr; align-items: center; padding: 20px 60px 20px 20px; font-weight: 700; }
#t-faq .qa button:hover { background: #F7FBFE; }
.qa .q { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--f-en); font-weight: 700; font-size: 15px; display: grid; place-items: center; line-height: 1; }
.qa .pm { right: 22px; }
.qa .pm::before, .qa .pm::after { height: 2px; background: var(--blue-d); }
.qa .a p { padding: 0 60px 22px 68px; color: var(--ink2); }
.qa.open { border-color: var(--blue); }

/* ===== 8 相談窓口 ===== */
.contact { background: var(--blue-d); overflow: hidden; }
.contact::before { content: ""; position: absolute; left: -90px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%; border: 44px solid rgba(255, 255, 255, .08); }
.contact .sec-title h2, .contact .sec-title .lead { color: #fff; }
.contact .sec-title span.no { color: #fff !important; }
.contact .sec-title span.no b { color: var(--yellow); }
.contact .panel { background: #fff; border-radius: 10px; box-shadow: 0 24px 44px -28px rgba(0, 30, 50, .8); }
.panel h3 { font-weight: 700; font-size: 21px; }
.panel h3::before { content: ""; display: inline-block; width: 6px; height: 20px; border-radius: 3px; background: var(--yellow); margin-right: 10px; vertical-align: -3px; }
.contact .plane .s { stroke: #fff; }
.contact .plane [fill] { fill: rgba(255, 255, 255, .92); }
.picked { border-color: var(--blue); background: var(--blue-pale); }
.form-steps li::marker { color: var(--blue-d); font-weight: 700; font-family: var(--f-en); }

/* ===== フッター ===== */
footer.site { background: #22313A; }
footer.site .fname { font-weight: 900; letter-spacing: .08em; }
.float a { box-shadow: 0 10px 24px -8px rgba(10, 60, 90, .45); }

/* ===== ほかのページ（事例・料金の詳細・プライバシー） ===== */
.page-head { background: var(--grad); border-bottom: none; padding: 72px 0 56px; }
.page-head h1 { font-weight: 900; font-size: 38px; letter-spacing: .05em; }
.page-head h1::after { content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--yellow); margin-top: 14px; }
.crumb a { color: var(--blue-d); font-weight: 700; }
.cta-room .cta-in.two { grid-template-columns: 1fr auto; }
.filters button { border: 2px solid var(--rule); font-weight: 700; padding: 5px 18px; }
.filters button:hover { border-color: var(--blue); }
.filters button[aria-pressed="true"] { background: var(--blue-d); border-color: var(--blue-d); }

/* 事例の詳細 */
.case-head h1 { font-weight: 900; font-size: 34px; line-height: 1.55; letter-spacing: .04em; }
.case-lead { font-size: 17px; color: var(--ink2); }
/* 業種・制作区分・制作期間：囲みの箱はやめて、自己紹介と同じ「札＋線の表」にする */
.case-meta { display: block; margin-top: 32px; border-top: 1px solid var(--rule); }
.case-meta div { display: grid; grid-template-columns: 7.5em 1fr; gap: 20px; align-items: center; background: none; border-radius: 0; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.case-meta dt { font-size: 14px; font-weight: 700; color: #fff; background: var(--blue-d); border-radius: 4px; text-align: center; padding: 4px 6px; line-height: 1.6; letter-spacing: .06em; }
.case-meta dd { font-size: 18px; font-weight: 700; }
.toc a { font-weight: 500; }
.toc a.on { color: var(--blue-d); font-weight: 700; }
.cs .n { font-family: var(--f-en); font-weight: 700; color: var(--blue); letter-spacing: .1em; }
.cs h2 { font-weight: 700; font-size: 27px; display: flex; align-items: center; gap: 12px; }
.cs h2::before { content: ""; width: 26px; height: 5px; border-radius: 3px; background: var(--yellow); flex: none; }
.why > div { border: 1px solid var(--rule); border-radius: 8px; font-weight: 500; }
.why > div:last-child { background: var(--blue-pale); border-color: var(--blue-pale); }
.why small { font-weight: 700; color: var(--blue-d); margin-bottom: 2px; }
.why .arr { color: var(--blue); font-weight: 700; font-size: 20px; }
.role span { font-weight: 500; }
.role span.me { background: var(--blue-d); border-color: var(--blue-d); font-weight: 700; }
.shots .sp { border-color: var(--ink); }
.shots .pc { box-shadow: var(--shadow); }
.inspect thead th { color: var(--blue-d); font-size: 13px; border-bottom: 2px solid var(--blue); }
.inspect td:last-child { font-weight: 700; }
.pager { border-top: 1px solid var(--rule); }

/* 料金の詳細 */
.pd-block h2 { font-weight: 700; font-size: 26px; display: flex; align-items: center; gap: 12px; }
.pd-block h2::before { content: ""; width: 26px; height: 5px; border-radius: 3px; background: var(--yellow); flex: none; }
.pd-lead { color: var(--ink2); }
.pd-table { border-top: 2px solid var(--blue); }
.pd-table th { font-weight: 700; }
.pd-price { font-family: var(--f-en); font-weight: 700; font-size: 22px; color: var(--blue-d); }
.pd-options { gap: 18px; }
.pd-opt { background: #fff; border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 8px 20px -16px rgba(30, 70, 100, .45); padding: 22px 22px 20px; }
.pd-opt h3 { font-weight: 700; font-size: 17px; }
.pd-opt .pd-opt-price { font-family: var(--f-en); font-weight: 700; font-size: 22px; line-height: 1.5; color: var(--blue-d); margin: 4px 0 8px; }
.pd-opt .pd-opt-price small { font-family: var(--f-body); font-size: 13px; }
.pd-notes { color: var(--ink2); }
.pd-notes li::marker { color: var(--blue); }

/* プライバシーポリシー */
.privacy h2 { font-weight: 700; font-size: 21px; margin: 44px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--blue-pale2); }
.privacy a { color: var(--blue-d); }
.not-found h1 { font-weight: 700; }
.line-dlg h2 { font-weight: 700; }

/* ===== スマホ ===== */
@media (max-width: 940px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats li:nth-child(3)::before { display: none; }
  .hero-stats li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .about-card { grid-template-columns: 220px 1fr; gap: 40px; }
  .about-tanuki { width: 220px; }
  .cta-room .cta-in { grid-template-columns: 1fr; margin: 0 24px; }
  .cta-room .cta-in.two { grid-template-columns: 1fr; }
  .cta-room .door { width: 110px; }
}
@media (max-width: 600px) {
  section { padding: 68px 0; }
  .sec-title { margin-bottom: 32px; }
  .sec-title h2 { font-size: 25px; }
  .sec-title h2 br { display: inline; }
  .sec-title .lead { text-align: left; }
  .hero { padding: 32px 0 0; }
  .hero h1 { font-size: 30px; line-height: 1.55; }
  .hero .btn { min-height: 60px; }
  .hero .btns { flex-wrap: wrap; }
  .hero .btn .ar { margin-left: auto; }
  .hero-shot::before { left: -8px; width: 54px; height: 54px; border-width: 8px; }
  .hero-shot::after { width: 20px; height: 20px; }
  .hero-shot .hs-back { left: 0; right: -20px; }
  .hero-stats { margin: 36px 0 -48px; }
  .hero-stats li { padding: 16px 6px 14px; }
  .hero-stats b { font-size: 30px; }
  .hero-stats b small { font-size: 14px; }
  .hero-stats span { font-size: 12.5px; }
  .hero + section { padding-top: 108px; }
  .row-chk { padding: 18px 18px 16px 14px; }
  .sheet-foot { padding: 16px; }
  .cta-room { padding: 44px 0; }
  .cta-room .cta-in { margin: 0 20px; padding: 28px 22px; gap: 18px; }
  .cta-room h2 { font-size: 22px; }
  .plan .price { font-size: 32px; }
  .steps li { text-align: left; padding: 20px 18px; }
  .steps .ic { width: 56px; height: 56px; padding: 9px; margin: 0; }
  .steps li:not(:nth-child(3n))::after, .steps li::after { top: auto; right: auto; left: 50%; bottom: -20px; width: 10px; height: 10px; border-top: 3px solid var(--blue); border-right: 3px solid var(--blue); }
  .steps .n { justify-self: start; }
  .steps h3 { margin: 6px 0 4px; }
  .about-card { grid-template-columns: 1fr; gap: 28px; }
  .about-tanuki { width: 190px; margin: 14px auto 0; padding: 18px 12px 8px; }
  .about-text h2 { font-size: 23px; }
  .facts div { grid-template-columns: 6.5em 1fr; gap: 14px; }
  .facts dd { font-size: 19px; }
  .facts dd br { display: inline; }
  .facts dd .sub { margin-left: 0; font-size: 14.5px; }
  .qa button { grid-template-columns: 40px 1fr; padding: 16px 44px 16px 14px; }
  .qa .q { width: 28px; height: 28px; font-size: 13px; }
  .qa .pm { right: 14px; }
  .qa .a p { padding: 0 16px 18px 54px; }
  .page-head { padding: 44px 0 36px; }
  .page-head h1 { font-size: 28px; }
  .case-head h1 { font-size: 24px; }
  .case-meta div { grid-template-columns: 6.5em 1fr; gap: 14px; }
  .case-meta dd { font-size: 16px; }
  .cs h2 { font-size: 22px; }
  .pd-block h2 { font-size: 21px; }
  .cta-room .cta-in.two { grid-template-columns: 1fr; }
  .sp-bar { border-top: none; box-shadow: 0 -4px 16px -8px rgba(30, 70, 100, .4); }
  .sp-bar .btn { box-shadow: none; }
}