/* ============================================================
   まちの相談屋 — 姪浜の困りごと相談窓口
   運営：合同会社LocalAd
   トーン＝のれん（藍×生成り×朱）。やさしく・大きく・迷わせない。
   ============================================================ */
:root{
  --ai:#153E5E;          /* 藍 */
  --ai-d:#0E2C44;
  --ai-l:#2E6288;
  --shu:#E0552B;         /* 朱＝CTAのみ */
  --shu-d:#c4441f;
  --kin:#E3A21B;         /* 差し色 */
  --kinari:#FAF6EE;      /* 生成り */
  --kinari2:#F2ECE0;
  --sumi:#221F1B;
  --tx:#3A3733;
  --gy:#7A736A;
  --bd:#E2D9C9;
  --w:#fff;
  --rad:18px;
  --sh:0 10px 34px rgba(21,62,94,.10);
  --head:'Zen Maru Gothic','Noto Sans JP',sans-serif;
  --mx:1040px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--kinari);color:var(--tx);font-family:'Noto Sans JP',sans-serif;line-height:1.95;font-size:16.5px;overflow-x:hidden;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--mx);margin:0 auto;padding:0 22px}
section{padding:78px 0;position:relative}
.skip{position:absolute;left:-9999px}
::selection{background:var(--kin);color:var(--sumi)}

h2.st{font-family:var(--head);font-weight:700;font-size:clamp(24px,5vw,36px);line-height:1.5;color:var(--ai);letter-spacing:.01em;margin-bottom:14px}
h2.st .s{color:var(--shu)}
.lead{font-size:15.5px;color:var(--gy);max-width:680px;margin-bottom:38px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--ai-l);background:var(--w);border:1px solid var(--bd);border-radius:999px;padding:7px 16px;margin-bottom:16px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--shu)}

/* ============ header ============ */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,246,238,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.hd-in{max-width:1180px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:20px}
.hd-logo{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:19px;color:var(--ai);letter-spacing:.02em}
.hd-logo .mark{width:34px;height:34px;border-radius:9px;background:var(--ai);color:#fff;display:grid;place-items:center;font-size:16px;line-height:1;flex:none}
.hd-nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.hd-nav a{font-size:13.5px;font-weight:700;color:var(--tx);white-space:nowrap}
.hd-nav a:hover{color:var(--ai)}
.hd-cta{background:var(--shu);color:#fff!important;font-weight:800;font-size:14px;line-height:1;padding:14px 24px;border-radius:999px;box-shadow:0 6px 18px rgba(224,85,43,.32);transition:.18s}
.hd-cta:hover{background:var(--shu-d);transform:translateY(-1px)}
@media(max-width:860px){.hd-nav a:not(.hd-cta){display:none}.hd-logo{font-size:17px}.hd-cta{padding:12px 18px;font-size:13px}}

/* ============ hero ============ */
.hero{margin-top:64px;padding:0;background:linear-gradient(158deg,#0E2C44 0%,#153E5E 52%,#1F5279 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.5px);background-size:20px 20px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:var(--kinari);
  -webkit-mask:radial-gradient(22px at 50% 0,transparent 98%,#000) repeat-x 0 0/44px 26px;
  mask:radial-gradient(22px at 50% 0,transparent 98%,#000) repeat-x 0 0/44px 26px}
.hero-in{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:44px 22px 60px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;border-radius:999px;transition:.18s;text-align:center}
.btn-p{background:var(--shu);color:#fff;font-size:17px;padding:20px 40px;box-shadow:0 10px 28px rgba(224,85,43,.42)}
.btn-p:hover{background:var(--shu-d);transform:translateY(-2px)}
.btn-g{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);font-size:15px;padding:18px 30px}
.btn-g:hover{background:rgba(255,255,255,.1)}
.hero .chat{max-width:none}

/* ============ 困りごと例 ============ */
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:11px}
.cases li{display:flex;align-items:center;gap:14px;background:var(--w);border:1px solid var(--bd);border-radius:14px;padding:17px 20px;font-size:15.5px;font-weight:700;color:var(--ai);line-height:1.6}
.cases li .ico{font-size:22px;line-height:1;flex:none}
.cases-note{margin-top:26px;font-size:14px;color:var(--gy);line-height:1.95;border-left:3px solid var(--bd);padding-left:16px}
.cases-note a{color:var(--ai);text-decoration:underline;font-weight:700}

/* ============ 流れ ============ */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;counter-reset:f}
.fl{background:var(--w);border:1px solid var(--bd);border-radius:var(--rad);padding:28px 22px;position:relative}
.fl::before{counter-increment:f;content:counter(f);position:absolute;top:-14px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--ai);color:#fff;font-family:var(--head);font-size:16px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(21,62,94,.28)}
.fl h3{font-family:var(--head);font-weight:700;font-size:17px;color:var(--ai);margin:10px 0 8px}
.fl p{font-size:14px;color:var(--gy);line-height:1.85}

/* ============ エリア ============ */
.area-box{background:var(--w);border:1px solid var(--bd);border-radius:var(--rad);padding:30px;box-shadow:var(--sh)}
.area-box p{font-size:15px;line-height:2}
.area-note{font-size:14.5px;color:var(--gy);margin-top:16px;padding-top:16px;border-top:1px dashed var(--bd)}

/* ============ 料金 ============ */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.pc{background:var(--w);border:1px solid var(--bd);border-radius:var(--rad);padding:28px 24px}
.pc.hi{border:2px solid var(--shu);position:relative}
.pc.hi::after{content:"まずはここから";position:absolute;top:-13px;right:20px;background:var(--shu);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:5px 13px;border-radius:999px}
.pc h3{font-family:var(--head);font-weight:700;font-size:18px;color:var(--ai);margin-bottom:6px}
.pc .amt{font-family:var(--head);font-size:30px;color:var(--sumi);line-height:1.3;margin:8px 0 12px}
.pc .amt small{font-size:14px;color:var(--gy);font-family:'Noto Sans JP',sans-serif;font-weight:700}
.pc p{font-size:14px;color:var(--gy);line-height:1.85}
.pc-link{display:inline-block;margin-top:8px;color:var(--ai);font-weight:700;text-decoration:underline}
.price-note{margin-top:22px;font-size:13.5px;color:var(--gy);background:var(--w);border:1px dashed var(--bd);border-radius:12px;padding:18px 20px;line-height:1.9}

/* ============ できる/できない ============ */
.yn{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.yn{grid-template-columns:1fr}}
.yn-box{border-radius:var(--rad);padding:28px 24px;border:1px solid var(--bd);background:var(--w)}
.yn-box.no{background:#FBF3F0;border-color:#EED9D1}
.yn-box h3{font-family:var(--head);font-weight:700;font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.yn-box.ok h3{color:var(--ai)} .yn-box.no h3{color:#B03A18}
.yn-box li{font-size:14.5px;line-height:1.95;padding-left:26px;position:relative;color:var(--tx)}
.yn-box.ok li::before{content:"○";position:absolute;left:0;color:var(--ai-l);font-weight:800}
.yn-box.no li::before{content:"×";position:absolute;left:0;color:#C4552F;font-weight:800}
.yn-box .fin{margin-top:14px;padding-top:14px;border-top:1px dashed var(--bd);font-size:13.5px;color:var(--gy)}

/* ============ チャット相談 ============ */
.chat-sec{background:linear-gradient(170deg,#0E2C44,#153E5E);color:#fff}
.chat-sec h2.st{color:#fff}
.chat-sec .lead{color:rgba(255,255,255,.8)}
.chat{max-width:660px;margin:0 auto;background:var(--w);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden}
.chat-hd{background:var(--ai);color:#fff;padding:16px 22px;display:flex;align-items:center;gap:12px}
.chat-hd .av{width:38px;height:38px;border-radius:50%;background:var(--kin);color:var(--ai-d);display:grid;place-items:center;font-size:18px;flex:none}
.chat-hd .nm h1{font-family:var(--head);font-weight:700;font-size:17px;line-height:1.4;letter-spacing:.01em}
.chat-hd .nm small{display:block;font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:400;opacity:.78}
.chat-bar{height:4px;background:rgba(255,255,255,.18)}
.chat-bar i{display:block;height:100%;width:0;background:var(--kin);transition:width .35s ease}
.chat-body{padding:22px 22px 10px;min-height:0;max-height:300px;overflow-y:auto;background:#F7F4EE;overscroll-behavior:contain}
.bub{max-width:88%;background:var(--w);border:1px solid var(--bd);border-radius:16px 16px 16px 4px;padding:14px 17px;font-size:15px;line-height:1.85;color:var(--tx);margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.04);animation:pop .3s ease both}
.bub.me{margin-left:auto;background:var(--ai);color:#fff;border:none;border-radius:16px 16px 4px 16px}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-in{padding:16px 22px 24px;background:var(--w);border-top:1px solid var(--bd)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{background:var(--kinari);border:1.5px solid var(--bd);border-radius:999px;padding:11px 16px;font-size:14px;font-weight:700;color:var(--ai);cursor:pointer;transition:.15s;font-family:inherit}
.chip:hover{border-color:var(--ai);background:var(--w)}
.chip.on{background:var(--ai);color:#fff;border-color:var(--ai)}
.f-row{margin-bottom:12px}
.f-row label{display:block;font-size:13.5px;font-weight:700;color:var(--ai);margin-bottom:6px}
.chat-in textarea,.chat-in input{width:100%;font-family:inherit;font-size:16px;color:var(--tx);background:var(--kinari);border:1.5px solid var(--bd);border-radius:12px;padding:14px 15px;line-height:1.8;transition:.15s}
.chat-in textarea:focus,.chat-in input:focus{outline:none;border-color:var(--ai);background:var(--w)}
.chat-in textarea{min-height:118px;resize:vertical}
.c-btns{display:flex;gap:10px;margin-top:14px;align-items:center}
.c-next{flex:1;background:var(--shu);color:#fff;border:none;border-radius:999px;padding:17px;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;transition:.18s}
.c-next:hover{background:var(--shu-d)}
.c-next:disabled{background:#CFC7BA;cursor:not-allowed}
.c-back{background:none;border:none;color:var(--gy);font-size:13.5px;font-family:inherit;cursor:pointer;padding:10px 12px;text-decoration:underline}
.c-priv{margin-top:12px;font-size:12px;color:var(--gy);line-height:1.8;text-align:center}
.c-priv a{color:var(--ai);text-decoration:underline}
.hp{position:absolute!important;left:-9999px!important}
.chat-done{padding:44px 26px;text-align:center;background:var(--w)}
.chat-done .ck{width:64px;height:64px;border-radius:50%;background:var(--ai);color:#fff;font-size:30px;display:grid;place-items:center;margin:0 auto 18px}
.chat-done h3{font-family:var(--head);font-weight:700;font-size:22px;color:var(--ai);margin-bottom:12px}
.chat-done p{font-size:15px;color:var(--tx);line-height:1.95}
.chat-alt{margin-top:22px;text-align:center;font-size:13.5px;color:rgba(255,255,255,.8);line-height:2.05}
.chat-alt a{color:var(--kin);font-weight:700;text-decoration:underline}
.err{background:#FBE9E4;border:1px solid #E9C4B6;color:#A93A16;border-radius:10px;padding:12px 14px;font-size:13.5px;margin-top:12px;line-height:1.8}

/* ============ 運営者 ============ */
.who{display:grid;grid-template-columns:1fr 1.35fr;gap:32px;align-items:center;background:var(--w);border:1px solid var(--bd);border-radius:var(--rad);padding:34px;box-shadow:var(--sh)}
@media(max-width:760px){.who{grid-template-columns:1fr;padding:26px}}
.who img{border-radius:14px;width:100%;object-fit:cover;max-height:300px}
.who h3{font-family:var(--head);font-weight:700;font-size:21px;color:var(--ai);margin-bottom:12px;line-height:1.5}
.who p{font-size:15px;line-height:2;margin-bottom:14px}
.who .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.who .links a{font-size:13.5px;font-weight:700;color:var(--ai);background:var(--kinari);border:1px solid var(--bd);border-radius:999px;padding:9px 16px;transition:.15s}
.who .links a:hover{background:var(--ai);color:#fff;border-color:var(--ai)}

/* ============ FAQ ============ */
.faq details{background:var(--w);border:1px solid var(--bd);border-radius:14px;margin-bottom:11px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:19px 52px 19px 22px;font-weight:700;font-size:15.5px;color:var(--ai);position:relative;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--shu);font-weight:800;font-size:18px}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 22px 20px;font-size:14.5px;color:var(--tx);line-height:1.95;border-top:1px dashed var(--bd);padding-top:16px;margin:0 0 0}

/* ============ 最終CTA ============ */
.fin-cta{background:var(--ai);color:#fff;text-align:center}
.fin-cta h2{font-family:var(--head);font-weight:700;font-size:clamp(24px,5.6vw,38px);line-height:1.5;margin-bottom:16px}
.fin-cta p{font-size:15.5px;color:rgba(255,255,255,.85);margin-bottom:30px;line-height:2}

/* ============ footer ============ */
.ft{background:var(--ai-d);color:rgba(255,255,255,.7);padding:52px 0 34px;font-size:13.5px}
.ft-top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.14)}
.ft-brand{font-family:var(--head);font-weight:700;font-size:19px;color:#fff;margin-bottom:10px}
.ft-top p{line-height:1.95;max-width:400px}
.ft-nav{display:flex;flex-wrap:wrap;gap:10px 22px;align-content:start}
.ft-nav a{color:rgba(255,255,255,.82);font-weight:700}
.ft-nav a:hover{color:var(--kin)}
.ft-btm{padding-top:22px;font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.55)}

/* ============ 下層ページ ============ */
.p-hero{margin-top:64px;background:var(--ai);color:#fff;padding:56px 0 46px}
.p-hero h1{font-family:var(--head);font-weight:700;font-size:clamp(24px,5.4vw,36px);line-height:1.5}
.p-hero p{color:rgba(255,255,255,.75);font-size:14.5px;margin-top:10px}
.doc{max-width:820px;margin:0 auto;padding:64px 22px 84px}
.doc h2{font-family:var(--head);font-weight:700;font-size:21px;color:var(--ai);margin:38px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--bd)}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{font-size:15px;line-height:2.05;margin-bottom:10px}
.doc ul{margin:0 0 14px 4px}
.doc li{padding-left:20px;position:relative}
.doc li::before{content:"・";position:absolute;left:0;color:var(--shu);font-weight:800}
.doc table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14.5px}
.doc th,.doc td{border:1px solid var(--bd);padding:12px 14px;text-align:left;line-height:1.85}
.doc th{background:var(--kinari2);color:var(--ai);width:32%;font-weight:700;white-space:nowrap}
@media(max-width:600px){.doc th{width:38%;white-space:normal}}
.doc a{color:var(--ai);text-decoration:underline}

@media(max-width:760px){
  section:not(.hero){padding:56px 0}
  .hero-in{padding:26px 18px 46px}
  .btn-p{width:100%;font-size:16px;padding:18px 24px}
  .chat-body{max-height:260px}
  .chat-hd{padding:14px 18px}
  .chat-body,.chat-in{padding-left:18px;padding-right:18px}
  h2.st{margin-bottom:12px}
  .lead{margin-bottom:26px}
}

/* reveal ＝ html.js のときだけ隠す（JSが動かない環境では最初から見える） */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}