/* site.css — みんなのITサポーターどば先生（GitHub Pages 向けビルドレスCSS）
   層構造: reset → tokens → base → layout → components → utilities → print */
@layer reset,tokens,base,layout,components,utilities,print;

/* ========== reset ========== */
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0}
  img{max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  a:hover,a:focus{text-decoration:underline}
}

/* ========== tokens (色・数) ========== */
@layer tokens{
  :root{
    --blue:#2B6CB0; --blue-d:#1f4f85;
    --yellow:#FFD966; --green:#2F855A;
    --ink:#222; --muted:#5a6470;
    --bg:#fff; --card:#f7fafc;
    --radius:14px; --shadow:0 6px 20px rgba(0,0,0,.08);
    --ring:#94c6ff; --bg-subtle:#fffef6;
  }
}

/* ========== base (文字・フォント) ========== */
@layer base{
  body{
    background:var(--bg); color:var(--ink);
    font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-size:16px; line-height:1.75;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    font-feature-settings:"palt" 1;
  }
  h1,h2,h3{color:var(--blue); line-height:1.3; margin:0 0 12px}
  h1{font-size:clamp(26px,4vw,40px); font-weight:700; margin-bottom:14px}
  h2{font-size:clamp(22px,3vw,30px); font-weight:700}
  h3{font-size:clamp(18px,2.4vw,22px); font-weight:600; color:var(--ink)}
  p{margin:0 0 12px}
  ul{padding-left:1.2em; margin:0}
  img{border-radius:8px}
}

/* ========== layout (横幅・セクション・ヘッダー) ========== */
@layer layout{
  .container{width:min(1100px,92vw); margin-inline:auto}
  .section{padding:64px 0}
  .section--tight{padding:32px 0}

  /* スキップリンク */
  .skip a{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
  .skip a:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 14px;background:#000;color:#fff;border-radius:8px}

  header{position:sticky; top:0; z-index:50; background:#ffffffcc; backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #edf2f7}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
  .brand{display:flex; align-items:center; gap:12px}
  .brand__logo{width:44px;height:44px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-weight:700;color:var(--blue)}
  .brand__title{font-weight:700;color:var(--blue)}
  .brand__subtitle{color:var(--muted);font-size:13px}

  .hero{background:linear-gradient(180deg,#fff 0%,var(--bg-subtle) 100%)}
  .hero__wrap{display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:center}
  @media (max-width:900px){.hero__wrap{grid-template-columns:1fr}}

  .grid{display:grid; gap:18px}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  @media (max-width:820px){.grid--2,.grid--3{grid-template-columns:1fr}}
}

/* ========== components (カード・ボタン・価格・FAQなど) ========== */
@layer components{
  .lead{font-size:clamp(16px,2.4vw,18px); color:#2b2b2b}
  .muted{color:var(--muted)}
  .card{background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:1px solid #e6eef8}
  .center{text-align:center}

  .btn{
    display:inline-block; min-height:48px;
    background:var(--blue); color:#fff; padding:12px 18px; border-radius:10px; font-weight:700;
    box-shadow:0 4px 12px rgba(43,108,176,.25);
  }
  .btn:hover{background:var(--blue-d)}
  .btn--ghost{background:#fff; color:var(--blue); border:2px solid var(--blue)}
  .btn--accent{background:var(--green)}
  .btn--wide{display:flex; gap:8px; align-items:center; justify-content:center}
  .btn + .btn{margin-left:10px}
  .btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}

  .phone{font-weight:700; color:var(--ink)}

  .hero__badge{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #e2e8f0; padding:6px 10px; border-radius:999px; font-size:14px}
  .hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}

  .features .item{display:flex; gap:12px; align-items:flex-start}
  .icon{width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; background:#fff; border:1px solid #e2e8f0; border-radius:10px; color:var(--blue)}

  .pricing .price{font-size:28px; font-weight:700; color:var(--blue)}
  .pricing .note{font-size:14px}

  .flow .step{display:flex; gap:12px; align-items:flex-start}
  .badge{background:var(--yellow); color:#000; font-weight:700; padding:4px 10px; border-radius:999px}

  details{background:var(--card); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow)}
  details + details{margin-top:10px}
  summary{cursor:pointer; font-weight:700}
  summary::marker{color:#2B6CB0}

  .footer__cols{display:grid; gap:20px; grid-template-columns:2fr 1fr}
  @media (max-width:820px){.footer__cols{grid-template-columns:1fr}}

  .pill{display:inline-block; padding:6px 10px; background:#e6fffa; color:#065f46; border:1px solid #99f6e4; border-radius:999px; font-size:13px}

  /* モバイル下部 固定CTA */
  .sticky-cta{
    position:fixed; inset:auto 0 0 0; z-index:60;
    background:#ffffffee; backdrop-filter:saturate(160%) blur(6px);
    border-top:1px solid #e5e7eb; display:flex; gap:8px; padding:10px 12px;
  }
  .sticky-cta a{flex:1; text-align:center}
  @media (min-width:821px){ .sticky-cta{display:none} }
}

/* ========== utilities (間隔など小ユーティリティ) ========== */
@layer utilities{
  .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mt-32{margin-top:32px}
}

/* ========== print（チラシ印刷用） ========== */
@layer print{
  @media print{
    header,.hero,#services,#pricing,#flow,#faq,#voices,#area,#safety,#about,.sticky-cta{display:none !important}
    body{font-size:14pt}
    #contact{display:block !important; padding-top:0}
    .phone{font-size:20pt}
  }
}

/* アニメーションを苦手とする方向け */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto; transition:none !important; animation:none !important}

}

/* 20250816 sr-only追加 */
/* まだ無ければ sr-only を追加 */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}