:root{
  /* === カラートークン（設計書準拠） === */
  --sky-50:#EAF6FC;  --sky-100:#D4ECF8; --sky-200:#BBE1F4;
  --sky-300:#7FC8EB; --sky-400:#54B6E6; --sky-500:#3BA9E0;
  --sky-600:#1E88C7; --sky-700:#1565A0;
  --accent:#F5A623;  --accent-soft:#FFC857; --accent-deep:#E58E0C;
  --green-soft:#E5F4E3; --green:#5BAE5B;
  --cream:#FAF7F0;   --white:#FFFFFF;
  --text:#2B2B2B;    --text-soft:#4A5560; --text-mute:#5B6772;
  --line:#E7EEF3;
  --shadow-sm:0 2px 8px rgba(30,80,120,.08);
  --shadow:0 10px 30px rgba(30,80,120,.10);
  --shadow-lg:0 18px 50px rgba(30,80,120,.16);
  --radius:22px; --radius-sm:14px; --radius-lg:32px;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--text); background:var(--white);
  font-family:'Noto Sans JP',sans-serif; font-size:17px; line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-wrap:anywhere; word-break:auto-phrase;
}
h1,h2,h3{font-family:'Zen Maru Gothic',sans-serif;}
img{max-width:100%; display:block;}
a{color:inherit;}

/* キーボード操作時のフォーカス可視化（アクセシビリティ） */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, details.faq summary:focus-visible{
  outline:3px solid var(--sky-600); outline-offset:3px; border-radius:6px;
}
.btn-tel:focus-visible, .head-btn:focus-visible, .sticky-call a:focus-visible{
  outline-color:var(--accent-deep);
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.section{padding:80px 0;}
section[id]{scroll-margin-top:80px;}
.section--tint{background:var(--sky-50);}
.section--cream{background:var(--cream);}

/* === 見出し === */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Zen Maru Gothic',sans-serif; font-weight:700;
  color:var(--sky-700); font-size:15px; letter-spacing:.04em;
  background:var(--sky-100); padding:7px 16px; border-radius:999px;
}
.sec-title{
  font-size:clamp(27px,5vw,38px); font-weight:900; line-height:1.45;
  margin:18px 0 10px; text-wrap:balance;
}
.sec-lead{color:var(--text-soft); font-size:17px; margin:0 auto; max-width:640px;}
.center{text-align:center;}

/* === ボタン === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Zen Maru Gothic',sans-serif; font-weight:700; text-decoration:none;
  border-radius:999px; padding:16px 30px; font-size:18px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  border:none;
}
.btn-tel{
  background:linear-gradient(135deg,var(--accent-soft),var(--accent));
  color:#5a3a00; box-shadow:0 8px 22px rgba(245,166,35,.35);
}
.btn-tel:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(245,166,35,.45);}
.btn-tel .num{font-size:21px; letter-spacing:.02em;}
.btn-ghost{background:#fff; color:var(--sky-700); border:2px solid var(--sky-200);}
.btn-ghost:hover{background:var(--sky-50); transform:translateY(-2px);}

.free-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--green-soft); color:#1f6e2a; font-weight:700;
  font-family:'Zen Maru Gothic',sans-serif; font-size:14px;
  padding:6px 14px; border-radius:999px;
}

/* === ヘッダー === */
header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.head-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 22px; max-width:var(--maxw); margin:0 auto; gap:14px;}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none;}
.logo-mark{flex:none; width:46px; height:46px;}
.logo-txt{display:flex; flex-direction:column; line-height:1.15;}
.logo-main{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:20px; color:var(--text); letter-spacing:.01em;}
.logo-sub{font-size:11.5px; color:var(--text-mute); font-weight:500;}
.head-cta{display:flex; align-items:center; gap:14px;}
.head-tel{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; text-decoration:none;}
.head-tel small{font-size:13px; color:#1f6e2a; font-weight:700;}
.head-tel .n{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:23px; color:var(--sky-700);}
.head-btn{
  display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--accent-soft),var(--accent));
  color:#5a3a00; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; text-decoration:none;
  padding:11px 20px; border-radius:999px; font-size:16px; box-shadow:0 6px 16px rgba(245,166,35,.32);
  transition:transform .18s ease;
}
.head-btn:hover{transform:translateY(-2px);}

/* === ヒーロー === */
.hero{position:relative; overflow:hidden; background:
    radial-gradient(900px 480px at 78% -8%, var(--sky-200), transparent 60%),
    linear-gradient(180deg,var(--sky-50),#fff 78%);}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:64px 22px 70px; display:grid; grid-template-columns:1.06fr .94fr; gap:42px; align-items:center;}
.hero-rating{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px 8px 12px; box-shadow:var(--shadow-sm); font-size:14px;}
.hero-rating .stars{color:#FFB400; letter-spacing:2px; font-size:15px;}
.hero-rating b{font-family:'Zen Maru Gothic',sans-serif; font-size:18px; color:var(--text);}
.hero h1{font-size:clamp(31px,5.4vw,50px); line-height:1.34; margin:20px 0 16px; font-weight:900; letter-spacing:.01em;}
.hero h1 .hl{color:var(--sky-700);}
.hero-sub{font-size:clamp(16px,2.4vw,19px); color:var(--text-soft); margin:0 0 14px; font-weight:500;}
.hero-pers{display:inline-flex; align-items:center; gap:8px; color:#9a5a00; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:15px; background:#fff7ea; padding:8px 15px; border-radius:999px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:26px;}
.hero-note{display:flex; gap:16px; flex-wrap:wrap; margin-top:18px; color:var(--text-soft); font-size:15px;}
.hero-note span{display:inline-flex; align-items:center; gap:6px;}
.rating-note{color:var(--text-soft); font-size:13px;}

/* ヒーロー・イラスト（差し替え可能なプレースホルダー） */
.hero-art{position:relative;}
.hero-card{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line);}
.hero-photo{position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,var(--sky-100),var(--sky-300));}
.hero-photo svg{position:absolute; inset:0; width:100%; height:100%;}
.photo-tag{position:absolute; left:14px; bottom:12px; background:rgba(255,255,255,.85); color:var(--text-soft); font-size:11px; padding:4px 10px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.hero-chip{position:absolute; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px 16px; display:flex; align-items:center; gap:10px; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:14px;}
.hero-chip .ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;}
.chip-a{top:-16px; left:-14px;} .chip-b{bottom:-18px; right:-12px;}
.chip-a .ic{background:var(--green-soft);}
.chip-b .ic{background:#FFF1D6;}

/* === お悩み共感 === */
.worry-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:38px;}
.worry{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-left:5px solid var(--sky-300); border-radius:var(--radius-sm); padding:20px 22px; box-shadow:var(--shadow-sm);}
.worry .q{flex:none; width:34px; height:34px; border-radius:50%; background:var(--sky-100); color:#0F4C75; font-family:'Zen Maru Gothic',sans-serif; font-weight:900; display:grid; place-items:center;}
.worry p{margin:3px 0 0; font-weight:500;}
.worry-bridge{text-align:center; margin-top:40px; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:clamp(20px,3.2vw,26px);}
.worry-bridge .em{color:var(--sky-700);}
.bridge-arrow{display:block; margin:8px auto 0; color:var(--sky-300);}

/* === サービス === */
.svc-main{display:grid; grid-template-columns:1.15fr 1fr; gap:26px; margin-top:40px; align-items:stretch;}
.svc-hero-card{background:linear-gradient(150deg,#12557C,#0B3A5C); color:#fff; border-radius:var(--radius); padding:36px; position:relative; overflow:hidden; box-shadow:var(--shadow);}
.svc-hero-card .tag{display:inline-block; background:rgba(255,255,255,.92); color:#0F4C75; padding:5px 14px; border-radius:999px; font-size:13px; font-weight:700; font-family:'Zen Maru Gothic',sans-serif;}
.svc-hero-card h3{font-size:30px; margin:14px 0 10px; font-weight:900;}
.svc-hero-card p{margin:0; color:#fff; font-size:15.5px;}
.svc-hero-card .big-icon{position:absolute; right:-26px; bottom:-30px; opacity:.18;}
.svc-hero-feats{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.svc-hero-feats span{background:rgba(0,0,0,.22); padding:6px 13px; border-radius:999px; font-size:13px; font-weight:500;}
.svc-side{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.svc-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px 20px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.svc-card .ic{width:50px; height:50px; border-radius:14px; background:var(--sky-50); display:grid; place-items:center; margin-bottom:12px;}
.svc-card h3{margin:0 0 5px; font-size:18px; font-weight:700; font-family:'Zen Maru Gothic',sans-serif;}
.svc-card p{margin:0; font-size:15.5px; color:var(--text-soft);}
.svc-more{grid-column:1/-1; background:var(--green-soft); border:none; display:flex; align-items:center; gap:12px;}
.svc-more .ic{background:#fff;}
.svc-more h3{color:#1f6e2a;}

/* === 選ばれる理由 === */
.reason-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:42px;}
.reason{background:#fff; border-radius:var(--radius); padding:30px 22px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--line); position:relative;}
.reason .no{position:absolute; top:16px; right:18px; font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:13px; color:var(--sky-600); font-weight:700;}
.reason .ic{width:66px; height:66px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center;}
.ic-a{background:var(--sky-100);} .ic-b{background:#FFF1D6;} .ic-c{background:var(--green-soft);} .ic-d{background:#FCE4E6;}
.reason h3{margin:0 0 8px; font-size:19px; font-weight:900; font-family:'Zen Maru Gothic',sans-serif;}
.reason p{margin:0; font-size:15.5px; color:var(--text-soft);}

/* === 料金 === */
.price-wrap{max-width:780px; margin:40px auto 0; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line);}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 26px; border-bottom:1px solid var(--line);}
.price-row:last-child{border-bottom:none;}
.price-row:nth-child(odd){background:var(--sky-50);}
.price-row .name{font-weight:700; font-family:'Zen Maru Gothic',sans-serif; font-size:16.5px;}
.price-row .name small{display:block; font-size:13px; color:var(--text-mute); font-weight:400; font-family:'Noto Sans JP';}
.price-row .val{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:22px; color:var(--sky-700); white-space:nowrap;}
.price-row .val small{font-size:13px; color:var(--text-soft); font-weight:500;}
.price-note{text-align:center; color:var(--text-soft); font-size:14px; margin:18px auto 0; max-width:680px;}

/* === お客様の声 === */
.voice-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:34px;}
.voice-score{display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 30px; box-shadow:var(--shadow-sm);}
.voice-score .big{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:52px; color:var(--text); line-height:1;}
.voice-score .stars{color:#FFB400; font-size:20px; letter-spacing:2px;}
.voice-score .cnt{font-size:13px; color:var(--text-soft);}
.voice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px;}
.voice{background:#fff; border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column;}
.voice .stars{color:#FFB400; letter-spacing:2px; font-size:15px;}
.voice p{font-size:16px; margin:12px 0 16px; flex:1;}
.voice .who{display:flex; align-items:center; gap:10px;}
.voice .av{width:38px; height:38px; border-radius:50%; background:var(--sky-100); color:#0F4C75; display:grid; place-items:center; font-family:'Zen Maru Gothic',sans-serif; font-weight:900;}
.voice .who small{color:var(--text-mute); font-size:12px;}
.voice-src{text-align:center; color:var(--text-mute); font-size:12.5px; margin-top:18px;}
.voice-label{font-family:'Zen Maru Gothic';font-weight:700;}

/* === 流れ === */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:42px;}
.step{background:#fff; border-radius:var(--radius-sm); padding:24px 16px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--line); position:relative;}
.step .n{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#1565A0,#0F4C75); color:#fff; font-family:'Zen Maru Gothic',sans-serif; font-weight:900; display:grid; place-items:center; margin:0 auto 12px;}
.step .ic{margin:0 auto 10px;}
.step h3{margin:0 0 4px; font-size:15.5px; font-weight:700; font-family:'Zen Maru Gothic',sans-serif;}
.step p{margin:0; font-size:13.5px; color:var(--text-soft);}
.step:not(:last-child)::after{content:"›"; position:absolute; right:-11px; top:50%; transform:translateY(-50%); color:var(--sky-300); font-size:26px; font-weight:700; z-index:1;}

/* === エリア === */
.area-wrap{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px;}
.area-chip{background:#fff; border:1.5px solid var(--sky-200); color:var(--sky-700); font-family:'Zen Maru Gothic',sans-serif; font-weight:700; padding:11px 22px; border-radius:999px; font-size:16px;}
.area-chip.main{background:linear-gradient(135deg,#1565A0,#0F4C75); color:#fff; border-color:transparent;}

/* === FAQ === */
.faq-wrap{max-width:760px; margin:38px auto 0;}
details.faq{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:14px; box-shadow:var(--shadow-sm); overflow:hidden;}
details.faq summary{list-style:none; cursor:pointer; padding:20px 56px 20px 22px; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:16.5px; position:relative; display:flex; gap:12px; align-items:flex-start;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary .qmark{color:#0F4C75; font-weight:900; flex:none;}
details.faq summary::after{content:"+"; position:absolute; right:22px; top:18px; font-size:24px; color:var(--sky-400); transition:transform .2s ease;}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq .ans{padding:0 22px 20px 50px; color:var(--text-soft); font-size:16px;}

/* === 問い合わせCTA === */
.cta-sec{background:
    radial-gradient(700px 360px at 20% 0%, rgba(30,136,199,.55), transparent 60%),
    linear-gradient(160deg,#0F4C75,#0B3A5C); color:#fff; text-align:center;}
.cta-sec .sec-title{color:#fff;}
.cta-sec .eyebrow{background:rgba(255,255,255,.92); color:#0F4C75;}
.cta-lead{color:#fff; max-width:560px; margin:0 auto 8px;}
.cta-tel-box{display:inline-flex; flex-direction:column; align-items:center; gap:6px; background:#fff; border-radius:var(--radius); padding:30px 44px; margin-top:26px; box-shadow:var(--shadow-lg); color:var(--text);}
.cta-tel-box .free-badge{margin-bottom:4px;}
.cta-tel-box a.num{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:clamp(30px,7vw,48px); color:var(--sky-700); text-decoration:none; letter-spacing:.01em; display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; overflow-wrap:anywhere;}
.cta-tel-box .hours{color:var(--text-soft); font-size:14px;}
.cta-tel-box .btn-tel{margin-top:8px;}

/* === 会社情報・地図 === */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:46px; align-items:start;}
.info-table{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--line); overflow:hidden;}
.info-table dl{display:grid; grid-template-columns:120px 1fr; margin:0;}
.info-table dt{background:var(--sky-50); font-family:'Zen Maru Gothic',sans-serif; font-weight:700; padding:16px 18px; font-size:14px; color:var(--sky-700); border-bottom:1px solid var(--line);}
.info-table dd{margin:0; padding:16px 18px; font-size:16px; border-bottom:1px solid var(--line);}
.info-table dl:last-child dt,.info-table dl:last-child dd{border-bottom:none;}
.info-tel{color:var(--sky-700); font-weight:700; text-decoration:none; display:inline-block; padding:10px 0;}
.map-frame{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); height:100%; min-height:320px;}
.map-frame iframe{width:100%; height:100%; min-height:320px; border:0; display:block;}

/* === フッター === */
footer{background:#15333f; color:#cfe3ee; padding:48px 0 110px; text-align:center;}
footer .f-logo{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:22px; color:#fff;}
footer .f-sub{font-size:12px; color:#8fb3c4; margin-top:4px;}
footer .f-meta{font-size:13.5px; margin-top:18px; line-height:2;}
footer .f-tel{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:24px; color:#fff; text-decoration:none; display:inline-block; padding:10px 16px;}
footer .copy{font-size:11.5px; color:#9fbdce; margin-top:24px;}
footer .demo-note{font-size:12px; color:#9fbdce; margin-top:20px; line-height:1.7;}

/* === モバイル追従CTA === */
.sticky-call{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(30,80,120,.12);}
.sticky-call a{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 10px; line-height:1.3; background:linear-gradient(135deg,var(--accent-soft),var(--accent)); color:#5a3a00; font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:18px; text-decoration:none; padding:14px; border-radius:999px; box-shadow:0 6px 18px rgba(245,166,35,.4);}
.sticky-call small{display:block; font-size:13px; color:#1f6e2a; text-align:center; margin-bottom:5px; font-weight:700;}

/* === スクロール演出（JS有効時のみ隠す＝フェイルセーフ） === */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

/* === レスポンシブ === */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr; gap:30px;}
  .hero-art{max-width:440px; margin:0 auto; width:100%;}
  .svc-main{grid-template-columns:1fr;}
  .reason-grid{grid-template-columns:repeat(2,1fr);}
  .voice-grid{grid-template-columns:1fr;}
  .flow{grid-template-columns:repeat(2,1fr);}
  .step:not(:last-child)::after{display:none;}
  .info-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  body{font-size:16px;}
  .section{padding:60px 0;}
  .head-tel,.head-btn{display:none;}
  .worry-grid{grid-template-columns:1fr;}
  .svc-side{grid-template-columns:1fr;}
  .reason-grid{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr;}
  .info-table dl{grid-template-columns:96px 1fr;}
  .cta-tel-box{padding:24px 22px;}
  .sticky-call{display:block; transform:translateY(110%); transition:transform .3s ease;}
  /* JS無効時は常に表示（電話導線を失わないためのフェイルセーフ） */
  .no-js .sticky-call{ transform:translateY(0); }
  .sticky-call.is-visible{transform:translateY(0);}
  .price-row{flex-direction:column; align-items:flex-start; gap:4px;}
  .price-row .val{font-size:20px;}
  .chip-a{top:8px; left:8px;}
  .chip-b{bottom:8px; right:8px;}
  .hero-chip{font-size:13px; padding:10px 13px;}
}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}