:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#5b667a;
  --line:#e7edf5;

  /* 水色（ブランド） */
  --primary:#38bdf8;
  --primary-deep:#0ea5e9;
  --chip:#e0f2fe;

  /* LINE */
  --linegreen:#06C755;

  --radius:18px;
  --max:1140px;
  --shadow:0 10px 30px rgba(11,18,32,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif,system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:var(--max);margin:0 auto;padding:0 18px;}

.topbar{font-size:12px;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff, #fbfdff);}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;}

.brand{display:flex;align-items:center;gap:10px;min-width:220px;}
.brand img{height:36px;width:auto;border-radius:10px;border:1px solid var(--line);background:#fff;}
.brand .name{line-height:1.15}
.brand .name b{display:block;font-size:14px;letter-spacing:.04em}
.brand .name span{display:block;font-size:12px;color:var(--muted)}

nav{display:none;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;}
nav a{font-size:13px;color:var(--muted);padding:8px 10px;border-radius:999px;}
nav a:hover{background:var(--chip);color:var(--text);}

.cta{display:flex;gap:10px;align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:900;font-size:13px;white-space:nowrap;transition:.12s transform,.12s box-shadow;}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn.phone{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 10px 20px rgba(56,189,248,.22);}
.btn.line{background:var(--linegreen);border-color:var(--linegreen);color:#fff;box-shadow:0 10px 20px rgba(6,199,85,.25);}
.btn.ghost{background:#fff}

.hero{padding:46px 0 26px;background:
  radial-gradient(1200px 500px at 20% -10%, rgba(56,189,248,.18), transparent 60%),
  radial-gradient(1200px 500px at 80% 0%, rgba(14,165,233,.12), transparent 55%),
  linear-gradient(180deg, #ffffff, #fbfdff);
}
.hero-grid{display:grid;gap:22px;align-items:center;}
.kicker{display:inline-flex;gap:10px;align-items:center;background:var(--chip);border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:12px;color:var(--muted);}
.kicker b{color:var(--text)}
h1{font-size:30px;line-height:1.2;margin:14px 0 10px;letter-spacing:.02em;}
.lead{font-size:15px;color:var(--muted);line-height:1.9;margin:0 0 18px;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.hero-actions .note{font-size:12px;color:var(--muted);}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.chip{background:var(--chip);border:1px solid var(--line);padding:8px 10px;border-radius:999px;font-size:12px;color:var(--muted);}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.p16{padding:16px}
.hero-card{padding:18px}
.hero-card .row{display:flex;gap:14px;align-items:center;}
.qr{width:124px;border-radius:14px;border:1px solid var(--line);background:#fff;}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:#f6fffd;border:1px solid rgba(6,199,85,.25);color:#047857;font-size:12px;font-weight:900;}
.small{font-size:12px;color:var(--muted);line-height:1.8;margin:8px 0 0;}
.nowrap{white-space:nowrap;}

section{padding:34px 0;border-top:1px solid var(--line);}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;}
.section-title h2{margin:0;font-size:22px;}
.section-title p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

.grid3{display:grid;gap:14px}
.grid2{display:grid;gap:14px}

.service h3{margin:0 0 8px;font-size:16px;}
.service p{margin:0;color:var(--muted);line-height:1.8;font-size:13px;}
.service ul{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.8;font-size:13px;}
.service li{margin:4px 0;}

.steps{counter-reset:step;display:grid;gap:10px;}
.step{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;}
.step:before{counter-increment:step;content:counter(step);width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;background:var(--primary-deep);flex:0 0 auto;}
.step b{display:block;margin-bottom:4px;}
.step span{display:block;color:var(--muted);font-size:13px;line-height:1.7;}

details{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff;}
summary{cursor:pointer;font-weight:900;}
details p{margin:10px 0 0;color:var(--muted);line-height:1.9;font-size:13px;}

footer{padding:28px 0 56px;border-top:1px solid var(--line);background:linear-gradient(180deg,#fff, #fbfdff);}
.footer-grid{display:grid;gap:14px;align-items:start;}
.foot-meta{color:var(--muted);font-size:12px;line-height:1.8;}
.foot-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

.sticky-line{position:fixed;right:16px;bottom:16px;z-index:60;}
.sticky-line a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;background:var(--linegreen);color:#fff;font-weight:900;box-shadow:0 14px 26px rgba(6,199,85,.35);border:1px solid rgba(6,199,85,.35);}
.sticky-line img{width:26px;height:26px;border-radius:8px;background:#fff;padding:2px;border:1px solid rgba(231,237,245,.9);}

.breadcrumb{font-size:12px;color:var(--muted);margin:16px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}

.page-hero{padding:28px 0 8px;background:linear-gradient(180deg, rgba(56,189,248,.10), transparent 70%);}
.page-hero h1{margin:10px 0 0;font-size:26px;}

.table{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.table .row{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line)}
.table .row:first-child{border-top:none}
.table .cell{padding:12px 14px;font-size:13px;line-height:1.8}
.table .k{background:#f7fbff;color:#22324d;font-weight:900}

.notice{border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.08);border-radius:16px;padding:12px 14px;color:#22324d;font-size:13px;line-height:1.85}

@media (min-width:920px){
  nav{display:flex;}
  .hero-grid{grid-template-columns:1.35fr .9fr;}
  .grid3{grid-template-columns:repeat(3,1fr);}
  .grid2{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1.3fr .7fr;}
  h1{font-size:40px;}
  .lead{font-size:16px;}
}

/* heading oneline */
h1, h2, h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
}

/* === Force single-line headings on mobile (no wrap) === */
@media (max-width: 768px) {
  h1, h2, h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: 0.02em;
  }
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }
}


/* === Mobile overlap fixes (fixed CTA + section heading) === */
@media (max-width: 768px) {
  /* Reserve space for fixed CTA buttons so content never sits underneath */
  body { padding-bottom: 130px; }

  /* Make section header stack safely to avoid text overlap */
  .section-title,
  .section-head,
  .sectionHeader {
    display: block !important;
  }

  /* If a title wrapper uses flex, prevent overlap */
  .section-title > *,
  .section-head > *,
  .sectionHeader > * {
    max-width: 100%;
  }

  /* Ensure headings stay one line but don't collide with adjacent text */
  .section-title h2,
  .section-title h3,
  h1, h2, h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Fixed CTA buttons: keep above content, smaller height on mobile */
  .fixed-contact,
  .fixed-line,
  .floating-cta,
  .cta-fixed,
  .sticky-cta {
    z-index: 9999;
  }

  .fixed-contact a,
  .fixed-line a,
  .floating-cta a,
  .cta-fixed a,
  .sticky-cta a {
    height: 56px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 999px;
  }

  /* If two CTAs are side-by-side on mobile, allow wrapping */
  .fixed-cta-wrap,
  .cta-wrap,
  .floating-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}


/* === Mobile overflow fixes (header CTA + sticky LINE) === */
@media (max-width: 768px) {
  /* Header: allow safe wrapping and prevent pill overflow */
  .header-inner{flex-wrap:wrap; align-items:center; gap:10px; padding:10px 0;}
  .brand{min-width:0; flex:1 1 auto;}
  .brand .name b{font-size:13px}
  .brand .name span{font-size:11px}

  .cta{flex:0 0 auto; max-width:100%; flex-wrap:wrap; justify-content:flex-end; gap:8px;}
  .btn{max-width:100%; overflow:hidden; text-overflow:ellipsis; line-height:1.1;}
  .btn.phone{font-size:12px; padding:9px 12px;}
  .btn.line{font-size:12px; padding:9px 12px;}

  /* Make the phone icon smaller on iPhone */
  .btn .ico{font-size:14px; line-height:1; display:inline-flex; align-items:center;}
  .btn.phone .ico{margin-right:4px;}
}

/* Sticky LINE button: keep fully inside viewport on mobile */
@media (max-width: 480px) {
  .sticky-line{left:12px; right:12px; bottom:12px;}
  .sticky-line a{
    width:100%;
    justify-content:center;
    max-width:100%;
    padding:10px 12px;
    font-size:14px;
    gap:8px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .sticky-line img{width:22px; height:22px; border-radius:7px;}
}


/* === Mobile fix: section-title (料金など) heading + lead overlap === */
@media (max-width: 768px) {
  /* Force vertical stack even if flex rules remain */
  .section-title{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:6px !important;
  }
  .section-title h2{
    width:100% !important;
    margin:0 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .section-title p{
    width:100% !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.7 !important;
  }
}