/* 木下塗装 — スマホ優先。色はロゴの墨（黒）と朱（赤）、地は白。見出しは明朝、本文はゴシック。 */
:root {
  --sumi: #17130F;        /* 墨 */
  --red: #E6200B;         /* ロゴの朱 */
  --red-d: #BE1705;
  --paper: #FFFFFF;
  --mist: #F5F2EC;        /* うすい生成り */
  --line: #E4DED3;
  --dim: #5C554B;
  --faint: #8C8478;
  --line-green: #06C755;
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --bar: 76px;
  color-scheme: only light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--sumi); font: 500 17px/1.8 var(--gothic); letter-spacing: .02em; overflow-x: hidden; -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.wrap { width: min(1080px, 100% - 40px); margin: 0 auto; }
.wrap.narrow { width: min(720px, 100% - 40px); }
section[id] { scroll-margin-top: 70px; }

/* ---------- ヘッダー ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 62px; padding: 0 14px 0 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.hdr.scrolled { border-color: var(--line); box-shadow: 0 6px 18px rgba(23,19,15,.06); }
.brand img { height: 46px; width: auto; }
.hdr-tel { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--red); color: #fff; box-shadow: 0 6px 14px rgba(230,32,11,.3); }
.hdr-tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hdr-tel span { line-height: 1.15; }
.hdr-tel small { display: block; font-size: 10px; font-weight: 700; opacity: .92; letter-spacing: .04em; }
.hdr-tel b { display: block; font-size: 15.5px; font-weight: 900; letter-spacing: .01em; }

/* ---------- ファーストビュー ---------- */
.hero { position: relative; padding: 18px 20px 34px; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: -30%; right: -30%; top: 43%; height: 46%; background: var(--mist); transform: rotate(-5deg); z-index: -1; }
.hero-area { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 900; letter-spacing: .1em; color: var(--red); }
.hero-area::before { content: ""; width: 26px; height: 3px; background: var(--red); border-radius: 2px; }
h1 { margin-top: 8px; font-family: var(--mincho); font-weight: 800; line-height: 1.18; letter-spacing: 0; }
h1 span { display: block; }
.h1-a { font-size: clamp(34px, 10.4vw, 62px); }
.h1-b { font-size: clamp(34px, 10.4vw, 62px); margin-top: -.04em; }
.h1-b em { font-style: normal; font-size: 2.05em; line-height: .9; color: var(--red); margin-right: .04em; letter-spacing: -.03em; background: linear-gradient(transparent 68%, rgba(230,32,11,.16) 68% 92%, transparent 92%); padding: 0 .06em; }
.h1-c { margin-top: .22em; font-size: clamp(24px, 7.200vw, 42px); }
.hero-lead { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--dim); font-weight: 700; }
.hero-lead strong { color: var(--sumi); font-weight: 900; }
.hero-points { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.hero-points li { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 9px; border-radius: 999px; border: 1.5px solid var(--sumi); background: #fff; font-size: 14.5px; font-weight: 900; }
.hero-points li::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--red) 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='m6 12.500 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hero-photo { position: relative; margin-top: 24px; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 4.300; object-fit: cover; object-position: 50% 60%; border-radius: 18px; box-shadow: 0 22px 44px rgba(23,19,15,.2); }
.stamp { position: absolute; right: -6px; top: -20px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--red); color: #fff; transform: rotate(10deg); box-shadow: 0 10px 22px rgba(230,32,11,.38), inset 0 0 0 3px rgba(255,255,255,.9), inset 0 0 0 5px var(--red); font-family: var(--mincho); line-height: 1.1; }
.stamp b { display: block; font-size: 16px; font-weight: 800; }
.stamp i { display: block; font-style: normal; font-size: 28px; font-weight: 800; }

/* ---------- ボタン ---------- */
.cta { display: grid; gap: 10px; margin-top: 22px; }
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 68px; padding: 10px 18px; border-radius: 16px; font-weight: 900; text-align: left; transition: transform .15s var(--ease), box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn svg { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.btn span { line-height: 1.2; }
.btn small { display: block; font-size: 12.500px; font-weight: 700; opacity: .92; letter-spacing: .05em; }
.btn b { display: block; font-size: 24px; font-weight: 900; letter-spacing: .01em; }
.btn.tel { background: linear-gradient(180deg, #F2351F, var(--red) 55%, var(--red-d)); color: #fff; box-shadow: 0 12px 26px rgba(230,32,11,.36), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.tel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(230,32,11,.5); animation: ring 2.200s ease-out infinite; pointer-events: none; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(230,32,11,.5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(230,32,11,0); } }
.btn.sms { background: var(--sumi); color: #fff; box-shadow: 0 12px 26px rgba(23,19,15,.28); }
.btn.sms b, .btn.white b, .btn.line b { font-size: 21px; }
.btn.white { background: #fff; color: var(--sumi); box-shadow: 0 12px 26px rgba(0,0,0,.22); }
.btn.line { background: var(--line-green); color: #fff; box-shadow: 0 12px 26px rgba(6,199,85,.3); }
.cta.center { justify-items: center; }
.cta.center .btn { width: min(420px, 100%); }

/* ---------- セクション共通 ---------- */
.sec { padding: 60px 0; }
.sec.alt { background: var(--mist); }
.ttl { font-family: var(--mincho); font-weight: 800; font-size: clamp(25px, 6.900vw, 40px); line-height: 1.4; letter-spacing: 0; }
.ttl small { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--gothic); font-size: 14px; font-weight: 900; letter-spacing: .1em; color: var(--red); }
.ttl small::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--red); }
.ttl.inv { color: #fff; } .ttl.inv small { color: #fff; opacity: .92; } .ttl.inv small::before { background: #fff; }
.wait { opacity: 0; transform: translateY(20px); }
.reasons li, .services li, .flow li, .areas li, .honest { transition: opacity .6s, transform .7s var(--ease); }

/* ---------- 理由 ---------- */
.reasons { display: grid; gap: 14px; margin-top: 28px; }
.reasons li { position: relative; padding: 24px 20px 22px 76px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.reasons .num { position: absolute; left: 18px; top: 22px; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--red); color: #fff; font-family: var(--mincho); font-size: 24px; font-weight: 800; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3.500px var(--red); }
.reasons h3 { font-family: var(--mincho); font-size: 22px; font-weight: 800; line-height: 1.45; letter-spacing: 0; }
.reasons p { margin-top: 8px; font-size: 16px; color: var(--dim); }
.honest { margin-top: 16px; padding: 20px 20px 22px; border-radius: 18px; background: var(--sumi); color: #fff; }
.honest b { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #fff; color: var(--sumi); font-size: 14px; font-weight: 900; letter-spacing: .06em; }
.honest p { margin-top: 10px; font-size: 16px; color: #E7E1D8; }
.honest strong { color: #fff; font-weight: 900; background: linear-gradient(transparent 62%, rgba(230,32,11,.85) 62%); }

/* ---------- 塗装できるもの ---------- */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.services li { position: relative; overflow: hidden; border-radius: 16px; background: var(--sumi); }
.services img { width: 100%; aspect-ratio: 1 / 1.180; object-fit: cover; }
.services div { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; color: #fff; background: linear-gradient(transparent, rgba(23,19,15,.9) 62%); }
.services h3 { font-family: var(--mincho); font-size: 19px; font-weight: 800; line-height: 1.35; letter-spacing: 0; }
.services p { margin-top: 2px; font-size: 12.500px; line-height: 1.5; opacity: .92; font-weight: 700; }
.service-more { margin-top: 22px; font-size: 17px; font-weight: 700; }
.service-more strong { font-weight: 900; background: linear-gradient(transparent 62%, rgba(230,32,11,.25) 62%); }
.service-note { margin-top: 10px; font-size: 14px; color: var(--faint); }

/* ---------- 仕上がり ---------- */
.tabs { display: flex; gap: 7px; margin: 24px -20px 0; padding: 2px 20px 10px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; font-weight: 900; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.tabs button.on { background: var(--sumi); border-color: var(--sumi); color: #fff; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.ph { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--mist); cursor: zoom-in; }
.ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s var(--ease); }
.ph:hover img { transform: scale(1.05); }
.ph span { position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(23,19,15,.78); color: #fff; font-size: 11.500px; font-weight: 700; }
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(15,12,9,.92); cursor: zoom-out; }
.lb img { max-width: 100%; max-height: calc(100vh - 32px); border-radius: 10px; }
.lb button { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

/* ---------- 早めの相談（赤） ---------- */
.sec.red { background: linear-gradient(160deg, #F0331C, var(--red) 50%, var(--red-d)); color: #fff; }
.now-p { margin-top: 16px; font-size: 16.500px; color: #FFE9E4; }
.now-p strong { display: block; margin-top: 10px; color: #fff; font-weight: 900; font-size: 17.500px; }

/* ---------- 対応エリア ---------- */
.areas { display: grid; gap: 10px; margin-top: 26px; }
.areas li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); }
.areas b { flex: none; min-width: 96px; font-family: var(--mincho); font-size: 26px; font-weight: 800; letter-spacing: 0; }
.areas span { font-size: 15.500px; font-weight: 700; color: var(--dim); }
.areas li:first-child { border: 2px solid var(--sumi); }
.area-note { margin-top: 14px; font-size: 15.500px; color: var(--dim); }

/* ---------- 流れ ---------- */
.flow { position: relative; display: grid; gap: 12px; margin-top: 28px; }
.flow li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 18px 18px 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.flow i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sumi); color: #fff; font-style: normal; font-family: var(--mincho); font-size: 25px; font-weight: 800; }
.flow h3 { font-size: 18.500px; font-weight: 900; line-height: 1.5; }
.flow h3 em { font-style: normal; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; vertical-align: 2px; }
.flow p { margin-top: 3px; font-size: 15.500px; color: var(--dim); line-height: 1.7; }

/* ---------- 質問 ---------- */
.faq { display: grid; gap: 10px; margin-top: 26px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.faq details[open] { border-color: var(--sumi); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 17px 16px; font-size: 17px; font-weight: 900; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 15px; font-weight: 900; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 24px; font-weight: 500; color: var(--faint); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 16px 18px 58px; font-size: 16px; color: var(--dim); }

/* ---------- お問い合わせ（墨） ---------- */
.sec.ink { background: var(--sumi); color: #fff; text-align: center; }
.sec.ink .ttl small { justify-content: center; } .sec.ink .ttl small::before { display: none; }
.contact-p { margin-top: 14px; font-size: 16.500px; color: #D9D2C7; font-weight: 700; }
.cta.stack { max-width: 440px; margin: 24px auto 0; }

/* ---------- 事業者情報 ---------- */
.info { margin-top: 24px; border-top: 2px solid var(--sumi); }
.info div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.info dt { font-size: 14.500px; font-weight: 900; color: var(--faint); padding-top: 2px; }
.info dd { font-size: 17px; font-weight: 700; }
.info dd span { display: inline-block; margin-left: 10px; padding: 1px 9px; border-radius: 999px; background: var(--mist); font-size: 13px; font-weight: 900; color: var(--dim); }
.info dd a { font-size: 21px; font-weight: 900; color: var(--red); letter-spacing: .01em; }
.ftr { padding: 36px 20px 30px; text-align: center; background: var(--mist); font-size: 14px; color: var(--dim); }
.ftr img { width: 170px; height: auto; margin: 0 auto 12px; }   /* 정사각형 로고 */
.ftr .cr { margin-top: 6px; font-size: 12.500px; color: var(--faint); }

/* ---------- 画面下の連絡バー ---------- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1.150fr 1fr; gap: 8px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .35s var(--ease); }
.bar.show { transform: none; }
body.has-line .bar { grid-template-columns: 1.150fr 1fr .800fr; }
.bar a { display: flex; align-items: center; justify-content: center; gap: 7px; height: 56px; border-radius: 14px; font-size: 17.500px; font-weight: 900; color: #fff; white-space: nowrap; }
.bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.200; stroke-linecap: round; stroke-linejoin: round; }
.b-tel { background: var(--red); box-shadow: 0 6px 16px rgba(230,32,11,.34); }
.b-sms { background: var(--sumi); }
.b-line { background: var(--line-green); }

/* ---------- 広い画面 ---------- */
@media (min-width: 900px) {
  body { font-size: 18px; padding-bottom: 0; }
  .hdr { height: 78px; padding: 0 max(24px, calc((100% - 1080px) / 2)); }
  .brand img { height: 60px; }
  .hdr-tel { height: 52px; padding: 0 20px 0 16px; } .hdr-tel b { font-size: 19px; } .hdr-tel small { font-size: 11px; }
  .hero { display: grid; grid-template-columns: 1.050fr .950fr; align-items: center; gap: 56px; width: min(1080px, 100% - 48px); margin: 0 auto; padding: 44px 0 80px; overflow: visible; }
  .hero::before { left: -50vw; right: -50vw; top: 46%; height: 60%; }
  .h1-a, .h1-b { font-size: 60px; } .h1-c { font-size: 40px; }
  .hero-lead { font-size: 20px; } .hero-points li { height: 40px; font-size: 16px; }
  .hero-photo { margin-top: 0; }
  .hero-photo img { aspect-ratio: 4 / 4.700; }
  .stamp { width: 128px; height: 128px; right: -22px; top: -26px; } .stamp b { font-size: 21px; } .stamp i { font-size: 38px; }
  .cta { grid-template-columns: 1fr 1fr; max-width: 560px; } .cta.stack, .cta.center { grid-template-columns: 1fr; }
  .sec { padding: 96px 0; }
  .ttl { font-size: 42px; } .ttl small { font-size: 16px; }
  .reasons { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
  .reasons li { padding: 84px 26px 28px; } .reasons .num { left: 26px; top: 26px; }
  .honest { margin-top: 20px; padding: 26px 30px; } .honest p { font-size: 18px; }
  .services { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
  .services h3 { font-size: 22px; } .services p { font-size: 14px; }
  .tabs { margin: 32px 0 0; padding: 2px 0 12px; }
  .grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .areas { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
  .areas li { flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px; }
  .flow { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
  .flow li { grid-template-columns: 1fr; padding: 24px 22px; }
  .bar { left: auto; right: 22px; bottom: 22px; width: 380px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 40px rgba(23,19,15,.18); padding: 10px; }
  .bar { transform: translateY(140%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.tel::after { animation: none; }
  .wait { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* 見出しは文節で折り返す（「担／当」のような切れ方を防ぐ） */
h1, .ttl, .reasons h3, .services h3, .flow h3, .faq summary, .hero-lead, .now-p strong { word-break: auto-phrase; text-wrap: balance; }
.reasons h3 { font-size: 20.500px; }
@media (min-width: 900px) { .reasons h3 { font-size: 22px; } }

/* ---------- ごあいさつ（職人のイラスト） ---------- */
.sec.greet { padding-top: 0; }
.greet-in { display: grid; gap: 26px; }
.greet-pic { position: relative; transition: opacity .6s, transform .7s var(--ease); }
.greet-pic img { width: 100%; aspect-ratio: 1 / 1.080; object-fit: cover; object-position: 50% 12%; border-radius: 20px; box-shadow: 0 22px 44px rgba(23,19,15,.18); }
.greet-name { position: absolute; left: 14px; bottom: -18px; display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 10px; padding: 12px 18px 13px; border-radius: 14px; background: var(--sumi); color: #fff; box-shadow: 0 12px 26px rgba(23,19,15,.3); }
.greet-name small { grid-column: 1 / -1; font-size: 12.500px; font-weight: 700; letter-spacing: .08em; opacity: .85; }
.greet-name b { font-family: var(--mincho); font-size: 27px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; }
.greet-name i { font-style: normal; margin-bottom: 4px; padding: 1px 9px; border-radius: 999px; background: var(--red); font-size: 12.500px; font-weight: 900; }
.greet-copy { padding-top: 10px; }
.greet-copy p { margin-top: 12px; font-size: 17px; }
.greet-copy .ttl + p { margin-top: 16px; font-weight: 900; }
.greet-note { display: block; margin-top: 14px; font-size: 12.500px; color: var(--faint); }
.contact-face { width: 104px; height: 104px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
@media (min-width: 900px) {
  .greet-in { grid-template-columns: .900fr 1.100fr; gap: 64px; align-items: center; }
  .greet-pic img { aspect-ratio: 1 / 1.180; }
  .greet-copy p { font-size: 19px; }
}


/* ==================== v02 (2026-10-03): 動きのリニューアル ==================== */
/* 上の進みぐあい */
.prog { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.prog i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--red-d), #FF5A3C); }

/* --- 最初の画面: 文字が順に出る ・ 35 の下に筆の線 ・ 写真が切り替わる --- */
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-area, h1 span, .hero-lead, .hero-points, .hero .cta, .hero-photo { animation: up .8s var(--ease) both; }
h1 .h1-a { animation-delay: .08s; } h1 .h1-b { animation-delay: .2s; } h1 .h1-c { animation-delay: .34s; }
.hero-lead { animation-delay: .46s; } .hero-points { animation-delay: .56s; } .hero .cta { animation-delay: .66s; } .hero-photo { animation-delay: .3s; }
.h1-b em { display: inline-block; min-width: 1.150em; text-align: center; font-variant-numeric: tabular-nums; background: none; position: relative; }
.h1-b em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .060em; height: .200em; border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; background: rgba(230,32,11,.2); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) 1.100s; z-index: -1; }
body.ready .h1-b em::after { transform: scaleX(1); }
.slides { position: relative; aspect-ratio: 4 / 4.300; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 44px rgba(23,19,15,.2); background: var(--mist); }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 60%; border-radius: 0; box-shadow: none; opacity: 0; transition: opacity 1.200s ease; }
.slides img.on { opacity: 1; animation: ken 6.500s ease-out both; }
@keyframes ken { from { transform: scale(1.090); } to { transform: scale(1); } }
.dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: width .4s var(--ease), background .3s; }
.dots i.on { width: 22px; background: #fff; }
.stamp { animation: stamp .6s cubic-bezier(.3, 1.500, .5, 1) 1s both, sway 5s ease-in-out 1.800s infinite; }
@keyframes stamp { from { opacity: 0; transform: rotate(-18deg) scale(2.200); } to { opacity: 1; transform: rotate(10deg) scale(1); } }
@keyframes sway { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(4deg) scale(1.040); } }
.btn.tel svg, .b-tel svg, .hdr-tel svg { animation: wig 3.200s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes wig { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-16deg); } 90% { transform: rotate(13deg); } 94% { transform: rotate(-9deg); } 97% { transform: rotate(5deg); } }

/* --- 流れる文字の帯 --- */
.tmarq { overflow: hidden; background: var(--sumi); color: #fff; padding: 15px 0; transform: skewX(var(--skew, 0deg)); transition: transform .5s var(--ease); }
.tmarq .track, .pmarq .track { display: flex; width: max-content; animation: flow var(--dur, 40s) linear infinite; }
@keyframes flow { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--shift, 50%))); } }
@keyframes flowr { from { transform: translateX(calc(-1 * var(--shift, 50%))); } to { transform: translateX(0); } }
.tmarq span { display: inline-flex; align-items: center; font-family: var(--mincho); font-size: 22px; font-weight: 800; white-space: nowrap; letter-spacing: .04em; }
.tmarq span::after { content: ""; width: 9px; height: 9px; margin: 0 22px; border-radius: 50%; background: var(--red); }
.tmarq span.r { color: #FF6A52; }

/* --- 数字 --- */
.stats-sec { padding: 34px 0 6px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; width: min(1080px, 100% - 40px); margin: 0 auto; border: 2px solid var(--sumi); border-radius: 18px; overflow: hidden; }
.stats li { padding: 18px 8px 16px; text-align: center; border-top: 1px solid var(--line); }
.stats li:nth-child(-n+2) { border-top: 0; }
.stats li:nth-child(even) { border-left: 1px solid var(--line); }
.stats b { display: block; font-family: var(--mincho); font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stats b em { font-style: normal; font-size: .420em; margin-left: 3px; color: var(--red); letter-spacing: 0; }
.stats li > span { display: block; margin-top: 4px; font-size: 13.500px; font-weight: 900; color: var(--dim); }

/* --- スクロールで出る動き（.wait が外れると出る） --- */
.ttl, .stats li, .greet-copy, .faq details, .info div, .g-more { transition: opacity .6s, transform .7s var(--ease), clip-path .8s var(--ease); transition-delay: var(--d, 0ms); }
.reasons li, .services li, .flow li, .areas li, .honest, .greet-pic { transition-delay: var(--d, 0ms); }
.ttl.wait { opacity: 1; transform: translateY(14px); clip-path: inset(0 0 100% 0); }
.ttl { clip-path: inset(-10% -5% -14% -5%); }
.ttl small::before { transition: width .7s var(--ease) .250s; }
.ttl.wait small::before { width: 0; }
.reasons li.wait { transform: translateX(-34px); }
.reasons li:nth-child(even).wait { transform: translateX(34px); }
.services li.wait { transform: scale(.900); }
.greet-pic.wait { transform: translateY(26px) rotate(-3deg); }
.reasons li:not(.wait) .num { animation: seal .55s cubic-bezier(.3, 1.500, .5, 1) both; animation-delay: calc(var(--d, 0ms) + 250ms); }
@keyframes seal { from { opacity: 0; transform: scale(2) rotate(-14deg); } to { opacity: 1; transform: none; } }
.flow li:not(.wait) i { animation: seal .5s cubic-bezier(.3, 1.500, .5, 1) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
.greet-pic img { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.services img { transition: transform .8s var(--ease); }
.services li:hover img { transform: scale(1.060); }

/* --- 赤・墨の帯は、ローラーで塗るように左から現れる --- */
.sec.red, .sec.ink { clip-path: inset(0 0 0 0); transition: clip-path 1.100s cubic-bezier(.6, 0, .2, 1); }
.sec.red.wait, .sec.ink.wait { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.sec.red { position: relative; overflow: hidden; }
.sec.red::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.060) 46px 92px); animation: slide 9s linear infinite; }
@keyframes slide { to { background-position: 204px 0; } }
.sec.red > .wrap { position: relative; z-index: 1; }

/* --- 流れる写真 --- */
.g-hint { margin-top: 10px; font-size: 14.500px; color: var(--faint); font-weight: 700; }
.pmarq { overflow: hidden; margin-top: 18px; padding: 6px 0; transform: skewX(var(--skew, 0deg)); transition: transform .5s var(--ease); }
.pmarq + .pmarq { margin-top: 4px; }
.pmarq .track { gap: 10px; padding-right: 10px; }
.pmarq.rev .track { animation-name: flowr; }
.pmarq:hover .track, body.lb-open .pmarq .track { animation-play-state: paused; }
.pm { position: relative; flex: none; width: 156px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--mist); cursor: zoom-in; box-shadow: 0 8px 18px rgba(23,19,15,.12); }
.pm img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s var(--ease); }
.pm:hover img { transform: scale(1.070); }
.pm span, .ph span { position: absolute; left: 7px; bottom: 7px; padding: 2px 8px; border-radius: 999px; background: rgba(23,19,15,.78); color: #fff; font-size: 11px; font-weight: 700; }
.g-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 58px; margin-top: 22px; border: 2px solid var(--sumi); border-radius: 14px; background: #fff; font-size: 17px; font-weight: 900; cursor: pointer; }
.g-more i { width: 11px; height: 11px; border-right: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
.g-more.open i { transform: rotate(-135deg) translate(-2px, -2px); }
.g-all { animation: up .5s var(--ease) both; }
.g-all .tabs { margin-top: 14px; }

@media (min-width: 900px) {
  .tmarq { padding: 20px 0; } .tmarq span { font-size: 28px; } .tmarq span::after { margin: 0 30px; }
  .stats-sec { padding: 56px 0 0; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats li { border-top: 0; padding: 26px 10px 22px; } .stats li + li { border-left: 1px solid var(--line); }
  .stats b { font-size: 60px; } .stats li > span { font-size: 15px; }
  .slides { aspect-ratio: 4 / 4.700; }
  .pm { width: 230px; } .pmarq .track { gap: 14px; padding-right: 14px; }
  .g-more { width: 360px; margin: 30px auto 0; }
  .reasons li, .services li { transition: opacity .6s, transform .25s var(--ease), box-shadow .3s; }
  .reasons li:hover { box-shadow: 0 18px 36px rgba(23,19,15,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-area, h1 span, .hero-lead, .hero-points, .hero .cta, .hero-photo, .stamp, .btn.tel svg, .b-tel svg, .hdr-tel svg, .slides img.on, .greet-pic img, .sec.red::after, .tmarq .track, .pmarq .track, .reasons li .num, .flow li i { animation: none !important; }
  .pmarq, .tmarq { overflow-x: auto; }
  .h1-b em::after { transform: scaleX(1); transition: none; }
}


/* ==================== v03 (2026-10-03): 赤い帯の白いカード ・ 地域3つ ・ 下のバーの案内 ほか ==================== */
/* --- 赤い帯: 文章は白いカードの中に（赤地に白文字は読みにくいので） --- */
.now-card { margin-top: 22px; padding: 24px 20px 22px; border-radius: 24px; background: #fff; color: var(--sumi); box-shadow: 0 24px 50px rgba(110,10,0,.38); }
.now-card .now-p { margin-top: 12px; font-size: 16.500px; color: var(--dim); }
.now-card .now-p strong { color: var(--sumi); font-size: 17px; }
.now-lead { font-size: 21px; font-weight: 900; line-height: 1.5; }
.now-pride { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--mist); font-size: 16.500px; font-weight: 700; }
.now-pride strong { font-weight: 900; background: linear-gradient(transparent 62%, rgba(230,32,11,.26) 62%); }
.now-free { margin-top: 12px; font-size: 16.500px; font-weight: 900; }
.now-card .btn { margin-top: 18px; }
/* お菓子の袋: カラー → 白黒 */
.bags { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.bag { position: relative; width: 62px; height: 82px; border-radius: 7px; background: linear-gradient(180deg, #FFC62B, #FF8A00); box-shadow: 0 8px 16px rgba(23,19,15,.18); }
.bag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 7px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 5px) top / 100% 9px no-repeat, repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 5px) bottom / 100% 9px no-repeat; }
.bag::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 26px; margin: -13px 0 0 -17px; border-radius: 50%; background: #FFF0B8; box-shadow: 0 -15px 0 -9px #E6200B, inset 0 -3px 0 rgba(0,0,0,.08); }
.bag.mono { animation: mono 4.500s ease-in-out infinite; }
@keyframes mono { 0%, 18% { filter: grayscale(0); } 40%, 100% { filter: grayscale(1) contrast(1.150); } }
.bags b { width: 30px; height: 12px; background: var(--sumi); clip-path: polygon(0 34%, 62% 34%, 62% 0, 100% 50%, 62% 100%, 62% 66%, 0 66%); animation: arr 1.500s ease-in-out infinite; }
@keyframes arr { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

/* --- ごあいさつ ・ 塗装できるもの の追加の一文 --- */
.greet-copy p.greet-warm { padding: 14px 16px; border-radius: 14px; background: var(--mist); font-weight: 900; }
.any-age { margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: var(--sumi); color: #fff; font-size: 17.500px; font-weight: 700; text-align: center; }
.any-age strong { color: #FFD9A0; font-weight: 900; }
.any-age + .service-more { margin-top: 16px; }

/* --- 対応エリア: 県の名前だけを3つ並べる --- */
.areas { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.areas li, .areas li:first-child { display: grid; place-items: center; padding: 20px 4px; border: 2px solid var(--sumi); border-radius: 16px; }
.areas b { min-width: 0; font-size: 23px; text-align: center; }

/* --- 下の連絡バー: 押してもらうための案内 --- */
.bar-hint { position: absolute; left: 50%; bottom: calc(100% + 9px); padding: 7px 15px; border-radius: 999px; background: var(--sumi); color: #fff; font-size: 13.500px; font-weight: 900; white-space: nowrap; box-shadow: 0 8px 18px rgba(23,19,15,.3); transform: translateX(-50%); animation: hint 1.400s ease-in-out infinite; pointer-events: none; }
.bar-hint::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--sumi); }
@keyframes hint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
.bar a::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-top: 2.500px solid currentColor; border-right: 2.500px solid currentColor; transform: rotate(45deg); animation: chev 1.200s ease-in-out infinite; }
@keyframes chev { 0%, 100% { transform: translateX(-2px) rotate(45deg); opacity: .65; } 50% { transform: translateX(3px) rotate(45deg); opacity: 1; } }

@media (min-width: 900px) {
  .now-card { max-width: 760px; padding: 34px 36px 32px; }
  .now-lead { font-size: 25px; } .now-card .now-p, .now-pride, .now-free { font-size: 18px; }
  .now-card .btn { width: min(420px, 100%); }
  .areas { gap: 16px; } .areas li, .areas li:first-child { padding: 34px 10px; } .areas b { font-size: 34px; }
  .any-age { font-size: 20px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .bag.mono { animation: none; filter: grayscale(1); } .bags b, .bar-hint, .bar a::after { animation: none; } }


/* ==================== v04 (2026-10-03): 対応エリアに九州の地図 ==================== */
.area-in { display: grid; gap: 18px; margin-top: 24px; }
.area-in .areas { margin-top: 0; }
.jmap-wrap { padding: 12px; border-radius: 22px; background: var(--mist); transition: opacity .6s, transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.jmap { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.jp { fill: #DDD6CA; stroke: #fff; stroke-width: 2.500; stroke-linejoin: round; }
.jp.hit { fill: var(--red); transition: fill .9s var(--ease); transition-delay: calc(var(--n, 0) * 380ms + 350ms); }     /* ローラーで塗るように、順に赤くなる */
.jmap-wrap.wait .jp.hit { fill: #DDD6CA; }
.jl { font-size: 15px; font-weight: 700; fill: #9A9184; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.jl.hit { font-family: var(--mincho); font-size: 24px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(140,14,0,.55); stroke-width: 4px; stroke-linejoin: round; transition: opacity .6s; transition-delay: 1.300s; }
.jmap-wrap.wait .jl.hit { opacity: 0; }
@media (min-width: 900px) {
  .area-in { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 40px; }
  .jmap { max-width: 440px; }
  .area-in .areas { grid-template-columns: 1fr; gap: 12px; }
  .area-in .areas li, .area-in .areas li:first-child { padding: 24px 10px; }
}
@media (prefers-reduced-motion: reduce) { .jp.hit, .jl.hit { transition: none; } }

/* 熊本県の島は対応エリア外（地図では灰色） */
.area-ex { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--mist); font-size: 15px; font-weight: 700; color: var(--sumi); }


/* ==================== v05 (2026-10-03): iPhone で使いやすく ==================== */
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn { min-height: 72px; } .btn:active, .bar a:active, .hdr-tel:active { transform: scale(.970); filter: brightness(.950); }
.tabs button, .g-more, .faq summary { min-height: 48px; }
.faq summary { padding: 18px 16px; }
.lb { padding: calc(16px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
.lb img { max-height: calc(100dvh - 60px); }
.lb button { width: 52px; height: 52px; }
.bar a { height: 60px; font-size: 18.500px; }
:root { --bar: 80px; }
/* 案内の吹き出しは、バーが出てから数秒だけ（ずっと出ていると本文が読みにくい） */
.bar-hint { opacity: 0; }
.bar.show .bar-hint { animation: hint 1.400s ease-in-out 4, hintLife 5.600s linear both; }
@keyframes hintLife { 0% { opacity: 0; } 6%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 380px) { .hdr-tel small { display: none; } .hdr-tel b { font-size: 15px; } .brand img { height: 42px; } .btn b { font-size: 22px; } }
/* 短い文は文節で折り返す（「親／切丁寧」のような切れ方を防ぐ） */
.greet-copy p, .now-lead, .now-pride, .now-free, .now-card .now-p, .area-ex, .area-note, .any-age, .honest p, .reasons p, .flow p, .faq p, .contact-p { word-break: auto-phrase; }

/* ショートメール（SMS）の表記 */
.btn b em { font-style: normal; margin-left: 6px; font-size: .580em; font-weight: 700; opacity: .8; vertical-align: .120em; }
.btn.sms b, .btn.white b { font-size: 20px; }
.bar .b-sms { font-size: 17px; }
@media (max-width: 380px) { .btn.sms b, .btn.white b { font-size: 18.500px; } .bar .b-sms { font-size: 15.500px; gap: 5px; } }
.bar .b-sms::after { display: none; }          /* 文字が長いので、矢印は電話ボタンだけ */
.bar a { padding: 0 6px; }
.btn b { white-space: nowrap; }
@media (min-width: 900px) { .cta { max-width: 640px; grid-template-columns: 1fr 1.150fr; } .btn { padding: 10px 14px; gap: 10px; } .btn.sms b, .btn.white b { font-size: 19px; } }

/* ==================== iPhone で横にずれないように（2026-10-03） ==================== */
/* 指で横に動かすとページの外が見えた件: 横にはみ出す動きをなくし、はみ出しは必ず切り取る */
main { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: hidden; } body, main { overflow-x: clip; } }
html, body { max-width: 100%; overscroll-behavior-x: none; }
.reasons li.wait, .reasons li:nth-child(even).wait { transform: translateY(24px) scale(.970); }   /* 横からではなく下から出す */
.greet-pic.wait { transform: translateY(26px); }
@media (hover: none) { .tmarq, .pmarq { transform: none !important; } }                            /* スマホでは帯をかたむけない */
.stamp { right: 4px; }