:root{
    --bg:#F1FAFD; --surface:#FFFFFF; --surface-2:#E9F5FB;
    --ink:#082A3A; --ink-soft:#3A5E70; --muted:#6E8C9A;
    --line:#D6E9F2;
    --aqua:#2AA6D6; --aqua-bright:#63CBEC; --teal:#0F6E99; --teal-deep:#0B577C;
    --grad:linear-gradient(135deg,#63CBEC 0%,#249AC9 52%,#0F6E99 100%);
    --shadow:0 18px 50px -24px rgba(15,90,130,.45);
    --radius:18px;
    --maxw:1180px;
    --font: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP","Meiryo",system-ui,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#051C28; --surface:#0A2835; --surface-2:#0E313F;
      --ink:#EAF7FD; --ink-soft:#AECCDB; --muted:#7B9EAC;
      --line:#163846;
      --aqua:#40B7E0; --aqua-bright:#68D0EF; --teal:#3BB0D8; --teal-deep:#2C9BC4;
      --grad:linear-gradient(135deg,#33C0E6 0%,#1188B5 52%,#0B627F 100%);
      --shadow:0 22px 60px -26px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="light"]{
    --bg:#F1FAFD; --surface:#FFFFFF; --surface-2:#E9F5FB;
    --ink:#082A3A; --ink-soft:#3A5E70; --muted:#6E8C9A; --line:#D6E9F2;
    --aqua:#2AA6D6; --aqua-bright:#63CBEC; --teal:#0F6E99; --teal-deep:#0B577C;
    --grad:linear-gradient(135deg,#63CBEC 0%,#249AC9 52%,#0F6E99 100%);
    --shadow:0 18px 50px -24px rgba(15,90,130,.45);
  }
  :root[data-theme="dark"]{
    --bg:#051C28; --surface:#0A2835; --surface-2:#0E313F;
    --ink:#EAF7FD; --ink-soft:#AECCDB; --muted:#7B9EAC; --line:#163846;
    --aqua:#40B7E0; --aqua-bright:#68D0EF; --teal:#3BB0D8; --teal-deep:#2C9BC4;
    --grad:linear-gradient(135deg,#33C0E6 0%,#1188B5 52%,#0B627F 100%);
    --shadow:0 22px 60px -26px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  body{margin:0; padding:0}
  img{max-width:100%}
  .page{
    background:var(--bg); color:var(--ink);
    font-family:var(--font); line-height:1.75;
    -webkit-font-smoothing:antialiased; letter-spacing:.01em;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px)}
  a{color:inherit; text-decoration:none}
  .eyebrow{
    font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--teal); font-weight:700; display:inline-flex; gap:.6em; align-items:center;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--teal); opacity:.6}
  h2.sec{font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.3; margin:.5rem 0 0; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
  .lead{color:var(--ink-soft); max-width:60ch}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(1.4) blur(12px);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; height:70px}
  .brand{display:flex; align-items:baseline; gap:.6rem}
  .brand .mark{font-size:1.35rem; font-weight:800; letter-spacing:.08em}
  .brand .en{font-size:.62rem; letter-spacing:.34em; color:var(--muted); text-transform:uppercase}
  /* ロゴ画像があればロゴ＋社名テキスト。画像が無ければ社名テキストだけ */
  .brand .logo{height:52px; width:auto; display:block}
  header .brand:has(.logo) .en, .foot > div:has(.logo) > .en{display:none}
  .foot .brand .logo{height:64px}
  .brand:has(.logo){align-items:center; gap:.9rem}
  .brand:has(.logo) .mark{font-size:1rem; letter-spacing:.14em; color:var(--ink)}
  nav.links{display:flex; gap:1.6rem; align-items:center}
  nav.links a{font-size:.86rem; font-weight:600; color:var(--ink-soft); position:relative; padding:.2rem 0}
  nav.links a::after{content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--grad); transition:width .25s}
  nav.links a:hover{color:var(--ink)}
  nav.links a:hover::after{width:100%}
  .tel-chip{
    display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .95rem; border-radius:999px;
    background:var(--grad); color:#fff; font-weight:800; letter-spacing:.03em; font-size:.9rem;
    box-shadow:0 8px 22px -10px rgba(15,110,150,.7);
  }
  .menu-btn{display:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; padding:.4rem .6rem; font-size:1.1rem}

  /* ---------- hero ---------- */
  .hero{position:relative; padding:clamp(56px,10vw,120px) 0 0; overflow:hidden}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,5vw,64px); align-items:center}
  .hero h1{
    font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.12; margin:1rem 0 0; font-weight:800;
    letter-spacing:-.02em; text-wrap:balance;
  }
  .hero h1 .accent{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero .sub{margin-top:1.4rem; font-size:clamp(1rem,1.6vw,1.15rem); color:var(--ink-soft); max-width:46ch}
  .hero .cta-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem}
  .btn{display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.5rem; border-radius:999px; font-weight:700; font-size:.95rem; transition:transform .2s, box-shadow .2s}
  .btn-primary{background:var(--grad); color:#fff; box-shadow:0 14px 30px -12px rgba(15,120,160,.75)}
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-ghost{border:1.5px solid var(--line); color:var(--ink); background:var(--surface)}
  .btn-ghost:hover{border-color:var(--aqua); color:var(--teal)}

  .hero-card{
    position:relative; aspect-ratio:4/5; border-radius:26px;
    /* 上から：ブランド色の半透明レイヤー → 写真 → 写真が無いとき用のグラデ */
  /* --img の url() はこの CSS ファイルの場所が基準になるので、HTML 側では ../images/ と書く */
    background:
      linear-gradient(160deg, rgba(99,203,236,.55) 0%, rgba(36,154,201,.62) 50%, rgba(15,110,153,.82) 100%),
      var(--img, none) center/cover no-repeat,
      var(--grad);
    box-shadow:var(--shadow); overflow:hidden; display:flex; align-items:flex-end;
  }
  .hero-card .glass{
    margin:22px; padding:20px 22px; border-radius:16px; color:#fff;
    background:rgba(6,45,60,.28); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
  }
  .hero-card .glass b{font-size:1.05rem; letter-spacing:.02em}
  .hero-card .glass span{display:block; font-size:.82rem; opacity:.9; margin-top:.25rem}
  .hero-card .ring{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.35)}
  .hero-card .r1{width:280px; height:280px; top:-70px; right:-60px}
  .hero-card .r2{width:180px; height:180px; top:40px; right:60px; border-color:rgba(255,255,255,.2)}
  .hero-card .kicker{position:absolute; top:26px; left:26px; color:#fff; font-weight:800; letter-spacing:.2em; font-size:.7rem; opacity:.85}

  .wave{display:block; width:100%; margin-top:clamp(30px,7vw,80px); color:var(--surface-2)}
  .stats{background:var(--surface-2)}
  .stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-top:1.6rem; padding-bottom:2.4rem}
  .stat b{display:block; font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:800; letter-spacing:-.01em; color:var(--teal); font-variant-numeric:tabular-nums}
  .stat span{font-size:.82rem; color:var(--muted); font-weight:600}

  /* ---------- section shell ---------- */
  section.block{padding:clamp(56px,9vw,110px) 0}
  .sec-head{max-width:70ch}

  /* ---------- strengths ---------- */
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem}
  .pillar{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:2rem 1.7rem; position:relative; transition:transform .25s, box-shadow .25s, border-color .25s;
  }
  .pillar:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
  .pillar .idx{font-size:.72rem; letter-spacing:.24em; color:var(--muted); font-weight:700}
  .pillar .ic{width:52px; height:52px; border-radius:14px; background:var(--grad); display:grid; place-items:center; margin:.4rem 0 1.1rem; box-shadow:0 10px 22px -12px rgba(15,120,160,.7)}
  .pillar .ic svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.9}
  .pillar h3{margin:0 0 .5rem; font-size:1.22rem; font-weight:700}
  .pillar p{margin:0; color:var(--ink-soft); font-size:.95rem}

  /* ---------- services ---------- */
  .services{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem}
  .svc{
    --veil:78%;
    border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem;
    /* 写真の上に背景色の薄いベールを重ねて、文字を読みやすく・写真を控えめに */
    background:
      linear-gradient(color-mix(in srgb, var(--surface) var(--veil), transparent), color-mix(in srgb, var(--surface) var(--veil), transparent)),
      var(--img, none) center/cover no-repeat,
      var(--surface);
    display:flex; flex-direction:column; gap:.5rem; transition:border-color .25s, transform .25s, background .25s;
  }
  .svc:hover{--veil:70%; border-color:var(--aqua); transform:translateY(-4px)}
  .svc .num{font-size:.72rem; letter-spacing:.2em; color:var(--teal); font-weight:800}
  .svc h3{margin:.2rem 0 .1rem; font-size:1.12rem; font-weight:700}
  .svc p{margin:0; color:var(--ink); font-size:.9rem}
  .svc .tag{margin-top:.4rem; font-size:.75rem; color:var(--ink-soft); font-weight:600}

  /* ---------- partners ---------- */
  .partners{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-2)}
  .partners .wrap{padding-top:2.4rem; padding-bottom:2.4rem}
  .plabel{font-size:.72rem; letter-spacing:.24em; color:var(--muted); font-weight:700; text-transform:uppercase; text-align:center}
  .logos{display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.6rem; margin-top:1.4rem}
  .logos span{font-weight:800; letter-spacing:.04em; font-size:1.05rem; color:var(--ink-soft); opacity:.85}

  /* ---------- area ---------- */
  .area-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,56px); align-items:center; margin-top:2.6rem}
  .area-map{aspect-ratio:5/4; border-radius:var(--radius); background:
      radial-gradient(120% 120% at 30% 20%, color-mix(in srgb,var(--aqua) 30%, var(--surface)) 0%, var(--surface) 60%);
      border:1px solid var(--line); position:relative; overflow:hidden}
  .area-list{display:grid; gap:1rem}
  .area-item{display:flex; gap:.9rem; align-items:flex-start}
  .dot{width:10px; height:10px; border-radius:50%; background:var(--grad); margin-top:.5rem; flex:none}
  .area-item b{font-weight:700}
  .area-item p{margin:.1rem 0 0; color:var(--ink-soft); font-size:.9rem}

  /* ---------- company ---------- */
  .company{background:var(--surface-2)}
  .info{display:grid; grid-template-columns:220px 1fr; margin-top:2.4rem; border-top:1px solid var(--line)}
  .info .row{display:contents}
  .info dt,.info dd{border-bottom:1px solid var(--line); padding:1.05rem .4rem; margin:0}
  .info dt{font-weight:700; color:var(--teal); font-size:.9rem}
  .info dd{color:var(--ink-soft)}

  /* ---------- contact CTA ---------- */
  .cta{position:relative; border-radius:28px; background:var(--grad); color:#fff; overflow:hidden; box-shadow:var(--shadow)}
  .cta-in{padding:clamp(36px,6vw,68px); display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:center; position:relative; z-index:2}
  .cta h2{font-size:clamp(1.6rem,3.4vw,2.5rem); margin:0 0 .6rem; font-weight:800; letter-spacing:-.01em}
  .cta p{margin:0; opacity:.94; max-width:44ch}
  .cta .contact-box{background:rgba(6,40,55,.28); border:1px solid rgba(255,255,255,.28); border-radius:18px; padding:1.4rem 1.6rem; backdrop-filter:blur(6px)}
  .cta .contact-box small{letter-spacing:.2em; font-size:.68rem; opacity:.85; font-weight:700}
  .cta .tel{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:.02em; margin:.2rem 0 .1rem; font-variant-numeric:tabular-nums}
  .cta .hours{font-size:.8rem; opacity:.9}
  .cta .btn-white{margin-top:1rem; background:#fff; color:var(--teal-deep); display:inline-flex; padding:.75rem 1.3rem; border-radius:999px; font-weight:800}
  .cta .orb{position:absolute; border-radius:50%; background:rgba(255,255,255,.14); filter:blur(6px)}
  .cta .o1{width:340px; height:340px; right:-90px; top:-120px}
  .cta .o2{width:200px; height:200px; left:-60px; bottom:-100px; background:rgba(255,255,255,.1)}

  /* ---------- footer ---------- */
  footer{padding:3rem 0 3.4rem; border-top:1px solid var(--line); margin-top:clamp(48px,8vw,90px)}
  .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.4rem; align-items:flex-start}
  .foot .en{font-size:.62rem; letter-spacing:.34em; color:var(--muted); text-transform:uppercase; margin-top:.4rem}
  .foot address{font-style:normal; color:var(--ink-soft); font-size:.88rem; line-height:1.9}
  .foot nav{display:flex; gap:1.3rem; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft); font-weight:600}
  .badges{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; margin-top:2rem}
  .badges img{height:64px; width:auto; display:block}
  .copy{margin-top:2.4rem; font-size:.75rem; color:var(--muted)}
  .note{max-width:var(--maxw); margin:1.2rem auto 0; padding:0 clamp(20px,5vw,48px); font-size:.72rem; color:var(--muted)}

  /* ---------- reveal ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}

  /* ---------- sub pages ---------- */
  .svc .more{margin-top:auto; padding-top:.6rem; font-size:.8rem; font-weight:700; color:var(--teal)}
  .crumb{font-size:.78rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.5rem}
  .crumb a:hover{color:var(--teal)}
  .page-hero{padding:clamp(28px,5vw,56px) 0 clamp(40px,7vw,80px)}
  .page-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px); align-items:center; margin-top:1.6rem}
  .page-hero h1{font-size:clamp(2rem,5vw,3.4rem); line-height:1.2; margin:.8rem 0 0; font-weight:800; letter-spacing:-.02em; text-wrap:balance}
  .page-hero .sub{margin-top:1.2rem; color:var(--ink-soft); max-width:44ch}
  .page-photo{
    aspect-ratio:3/2; border-radius:26px; box-shadow:var(--shadow); overflow:hidden;
    background:
      linear-gradient(160deg, rgba(99,203,236,.18) 0%, rgba(15,110,153,.32) 100%),
      var(--img, none) center/cover no-repeat,
      var(--grad);
  }

  /* 帯状の濃い色のセクション */
  .band{background:var(--grad); color:#fff; position:relative; overflow:hidden}
  .band .eyebrow{color:#fff; opacity:.85}
  .band h2.sec{color:#fff}
  .band .lead{color:#fff; opacity:.92; max-width:62ch}
  .shift{display:grid; grid-template-columns:1fr auto 1fr; gap:1.2rem; align-items:center; margin-top:2.6rem}
  .shift-box{border-radius:var(--radius); padding:1.5rem 1.6rem; background:rgba(6,40,55,.22); border:1px solid rgba(255,255,255,.25)}
  .shift-box small{display:block; font-size:.7rem; letter-spacing:.24em; font-weight:800; opacity:.8}
  .shift-box b{display:block; font-size:1.25rem; margin:.3rem 0 .4rem}
  .shift-box p{margin:0; font-size:.9rem; opacity:.92}
  .shift-box.next{background:#fff; color:var(--ink); border-color:transparent}
  .shift-box.next small{color:var(--teal); opacity:1}
  .shift-box.next p{color:var(--ink-soft); opacity:1}
  .shift .arrow{font-size:1.8rem; font-weight:800; opacity:.9}
  .bridge{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:1.6rem}
  .bridge-item{border-radius:var(--radius); padding:1.5rem 1.6rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22)}
  .bridge-item h3{margin:0 0 .4rem; font-size:1.08rem}
  .bridge-item p{margin:0; font-size:.9rem; opacity:.92}

  .lineup{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem}
  .lineup-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.6rem}
  .lineup-item h3{margin:0 0 .4rem; font-size:1.05rem}
  .lineup-item p{margin:0; font-size:.9rem; color:var(--ink-soft)}
  .chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
  .chips span{padding:.45rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-weight:700; font-size:.85rem; color:var(--ink-soft)}

  .flow{list-style:none; padding:0; margin:2.4rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:step}
  .flow li{counter-increment:step; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.4rem; position:relative}
  .flow li::before{content:"STEP " counter(step); display:block; font-size:.7rem; letter-spacing:.2em; font-weight:800; color:var(--teal); margin-bottom:.5rem}
  .flow b{display:block; font-size:1.02rem; margin-bottom:.3rem}
  .flow p{margin:0; font-size:.88rem; color:var(--ink-soft)}

  .faq{margin-top:2.2rem; border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line); padding:1.1rem .4rem}
  .faq summary{cursor:pointer; font-weight:700; list-style:none; display:flex; gap:.8rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"Q"; color:var(--aqua); font-weight:800}
  .faq details p{margin:.7rem 0 0 1.6rem; color:var(--ink-soft); font-size:.92rem}
  .back{display:inline-block; margin-top:2rem; font-weight:700; color:var(--teal); font-size:.9rem}

  /* 箇条書きのラインナップと、料金のカード（JAM） */
  .lineup-item ul{margin:.5rem 0 0; padding-left:1.1rem; font-size:.9rem; color:var(--ink-soft)}
  .lineup-item li{margin:.2rem 0}
  .lineup.four{grid-template-columns:repeat(4,1fr)}
  .plan .size{display:block; font-size:.7rem; letter-spacing:.2em; font-weight:800; color:var(--teal)}
  .plan .yen{display:block; font-size:1.7rem; font-weight:800; margin:.5rem 0 .2rem; color:var(--ink)}
  .plan .yen small{font-size:.8rem; font-weight:600; color:var(--muted)}
  .notes{margin:1.6rem 0 0; padding-left:1.2rem; color:var(--ink-soft); font-size:.88rem}
  .notes li{margin:.25rem 0}

  /* お問い合わせページ：formrun の埋め込みフォームを置く枠 */
  .form-slot{max-width:760px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,4vw,40px)}
  .form-slot iframe{width:100%; border:0; display:block}
  /* formrun の URL 埋め込みは高さが自動で変わらないので、フォームが全部入る高さを固定で指定する（項目を増やしたら見直す） */
  .formrun-frame{height:1950px}
  .form-note{max-width:760px; margin:0 auto 1.2rem; font-size:.88rem; color:var(--ink-soft)}
  .form-note a{color:var(--teal); font-weight:700}

  /* 個人情報保護方針 */
  .policy{max-width:760px}
  .policy h2{font-size:1.1rem; margin:2.2rem 0 .6rem; padding-left:.8rem; border-left:3px solid var(--aqua)}
  .policy h2:first-child{margin-top:0}
  .policy p, .policy li{color:var(--ink-soft); font-size:.95rem}
  .policy ul{padding-left:1.3rem}
  .form-slot-empty{margin:0; padding:3rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    nav.links{display:none}
    .menu-btn{display:inline-block}
    .hero-grid{grid-template-columns:1fr}
    .hero-card{max-width:420px; margin-top:1rem}
    .pillars,.services{grid-template-columns:1fr}
    .stats .wrap{grid-template-columns:repeat(2,1fr); row-gap:1.4rem}
    .area-grid{grid-template-columns:1fr}
    .cta-in{grid-template-columns:1fr}
    .info{grid-template-columns:120px 1fr}
    .page-hero-grid,.bridge,.lineup{grid-template-columns:1fr}
    .shift{grid-template-columns:1fr}
    .shift .arrow{transform:rotate(90deg); justify-self:center}
    .flow{grid-template-columns:repeat(2,1fr)}
    .lineup.four{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:520px){
    .brand .logo{height:36px}
    .brand:has(.logo){gap:.5rem}
    header .brand:has(.logo) .mark{font-size:.78rem; letter-spacing:.04em}
    .brand .mark, .tel-chip{white-space:nowrap}
    .tel-chip{padding:.4rem .65rem; font-size:.78rem; gap:.3rem}
    .flow{grid-template-columns:1fr}
    .lineup.four{grid-template-columns:1fr}
    .formrun-frame{height:2300px}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{transition:none; opacity:1; transform:none}
    *{scroll-behavior:auto}
    .btn,.pillar,.svc{transition:none}
  }