@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');

  :root{
    --bg:#FFFFFF;
    --surface:#FFFFFF;
    --surface-2:#EEF2FA;
    --ink:#11182A;
    --ink-deep:#0B1B4D;
    --muted:#5B6478;
    --line:#E1E5EE;
    --accent:#FF5A1F;
    --accent-deep:#D6430E;
    --accent-contrast:#FFFFFF;
    --blue:#0B4FE0;
    --blue-deep:#083CB0;
    --hero-bg:#0B4FE0;
    --hero-text:#FFFFFF;
    --hero-muted:rgba(255,255,255,0.82);
    --hero-line:rgba(255,255,255,0.35);
    --shadow: 0 28px 56px -26px rgba(11,24,52,0.38);
    --shadow-sm: 0 16px 32px -18px rgba(11,24,52,0.3);
    --radius: 20px;
    --radius-sm: 14px;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A0E1C; --surface:#121A2E; --surface-2:#172038;
      --ink:#EDEFF4; --muted:#9AA3B9; --line:#28324A;
      --accent:#FF6B34; --accent-deep:#FF6B34; --accent-contrast:#0A0E1C;
      --blue:#3E7BFF; --blue-deep:#3E7BFF;
      --shadow: 0 28px 56px -22px rgba(0,0,0,0.6);
      --shadow-sm: 0 16px 32px -16px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A0E1C; --surface:#121A2E; --surface-2:#172038;
    --ink:#EDEFF4; --muted:#9AA3B9; --line:#28324A;
    --accent:#FF6B34; --accent-deep:#FF6B34; --accent-contrast:#0A0E1C;
    --blue:#3E7BFF; --blue-deep:#3E7BFF;
    --shadow: 0 28px 56px -22px rgba(0,0,0,0.6);
    --shadow-sm: 0 16px 32px -16px rgba(0,0,0,0.55);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--surface-2); color:var(--ink);
    font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;
    line-height:1.75; -webkit-font-smoothing:antialiased;
    padding-inline: 20px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  h1,h2,h3{ font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; text-wrap:balance; margin:0; }
  p{margin:0;}
  a{color:inherit;}
  ul{margin:0; padding:0; list-style:none;}
  .num{font-family:"Bebas Neue","Zen Kaku Gothic New",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:0.02em;}
  .icon{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none;}

  .wrap{max-width:1120px; margin-inline:auto;}
  .gutter{padding-inline: clamp(16px, 4vw, 48px);}
  .kicker{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; color:var(--accent-deep); font-size:0.82rem; letter-spacing:0.05em; display:inline-flex; align-items:center; gap:8px;}
  .kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none;}
  .lede{margin-top:10px; color:var(--muted); font-size:0.95rem; max-width:58ch;}

  /* ---------- band / section backgrounds ---------- */
  .band{ margin-inline:-20px; padding-inline:20px; }
  .band-inner{ max-width:1120px; margin-inline:auto; padding-block:76px; }
  .band-white{ background:var(--surface); }
  .band-warm{ background:var(--surface-2); }
  .band-dark{ background:var(--hero-bg); color:var(--hero-text); position:relative; overflow:hidden; }
  .band-dark::after{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:var(--accent); bottom:-190px; left:-140px; pointer-events:none; }
  .band-dark::before{ content:""; position:absolute; width:240px; height:240px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); bottom:-30px; left:120px; pointer-events:none; }

  .section-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
  .section-top h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-top:10px; }
  .section-note{ font-size:0.84rem; color:var(--muted); max-width:280px; text-align:right; text-wrap:balance; }
  @media (max-width:700px){ .section-note{text-align:left;} }
  .nowrap-note{ max-width:none; white-space:nowrap; }
  @media (max-width:480px){ .nowrap-note{ white-space:normal; max-width:280px; } }

  .reveal{opacity:1; transform:none;}
  .js .reveal{opacity:0; transform:translateY(22px) scale(0.98); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 100ms);}
  .js .reveal.in{opacity:1; transform:none;}

  /* ---------- Top bar ---------- */
  .topbar{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); margin-inline:-20px; padding-inline:20px; border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
  .topbar-inner{ max-width:1120px; margin-inline:auto; display:flex; align-items:center; gap:20px; padding-block:14px; }
  .brand{ font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:1.15rem; }
  .brand span{color:var(--accent);}
  .topnav{ display:flex; gap:22px; margin-inline-start:8px; font-size:0.86rem; color:var(--muted); flex:1; }
  .topnav a{text-decoration:none; white-space:nowrap;}
  .topnav a:hover{color:var(--ink);}
  @media (max-width:860px){ .topnav{display:none;} }
  .top-cta{ margin-left:auto; display:flex; align-items:center; gap:14px; white-space:nowrap; }
  .top-tel{font-size:0.92rem; font-weight:700;}
  .top-tel small{display:block; font-weight:400; color:var(--muted); font-size:0.68rem;}
  @media (max-width:600px){ .top-tel{display:none;} }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; background:var(--accent); color:var(--accent-contrast); font-weight:700; font-size:0.88rem; border:none; border-radius:999px; text-decoration:none; cursor:pointer; transition:background 0.2s ease, transform 0.2s ease, box-shadow .2s ease; }
  .btn:hover{background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 14px 26px -12px color-mix(in srgb, var(--accent) 65%, transparent);}
  .btn-ghost{ background:transparent; color:var(--hero-text); border:1px solid var(--hero-line); }
  .btn-ghost:hover{background:rgba(255,255,255,0.08);}
  .btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line); }
  .btn-outline:hover{background:var(--surface-2);}

  /* ---------- Hero ---------- */
  .hero{ background:var(--hero-bg); color:var(--hero-text); margin-inline:-20px; padding-inline:20px; border-radius: 0 0 28px 28px; position:relative; overflow:hidden; }
  .hero::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--accent); top:-160px; right:-110px; pointer-events:none; }
  .hero::after{ content:""; position:absolute; width:300px; height:300px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); top:52px; right:96px; pointer-events:none; animation: ringspin 50s linear infinite; }
  @keyframes ringspin{ to{ transform:rotate(360deg); } }
  .hero-inner{ max-width:1120px; margin-inline:auto; display:grid; grid-template-columns: 1fr 0.92fr; gap:48px; padding-block:60px 96px; position:relative; align-items:center; }
  @media (max-width:900px){ .hero-inner{grid-template-columns:1fr; padding-block:44px 70px;} }
  .eyebrow{ font-size:0.78rem; letter-spacing:0.06em; color:var(--hero-muted); border:1px solid var(--hero-line); border-radius:999px; padding:6px 14px; display:inline-block; margin-bottom:22px; }
  .hero h1{font-size:clamp(1.9rem, 4vw, 2.7rem); line-height:1.4;}
  .hero h1 em{color:var(--accent); font-style:normal;}
  .hero-copy{margin-top:20px; color:var(--hero-muted); font-size:0.98rem; max-width:46ch;}
  .hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}

  .hero-visual{position:relative;}

  /* ---------- photo mock ---------- */
  .photo-mock{
    position:relative; border-radius: var(--radius); overflow:hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 24%, var(--surface)), color-mix(in srgb, var(--accent) 20%, var(--surface)));
    box-shadow: var(--shadow-sm);
    display:flex; align-items:center; justify-content:center;
    aspect-ratio: 4 / 3;
  }
  .photo-mock .badge{ width:66px; height:66px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
  .photo-mock .badge .icon{ width:28px; height:28px; color:var(--ink); }
  .photo-mock .cap{ position:absolute; left:14px; right:14px; bottom:14px; font-size:0.72rem; color:var(--ink); background:color-mix(in srgb, var(--surface) 90%, transparent); padding:8px 14px; border-radius:999px; text-align:center; backdrop-filter:blur(6px); }
  .hero-visual .photo-mock{aspect-ratio: 5/4;}

  /* ---------- icon chip (circular badge, categorical color) ---------- */
  .icon-chip{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .25s ease; }
  .chip-1, .chip-3{ background:var(--accent); color:#fff; }
  .chip-2, .chip-4{ background:var(--blue); color:#fff; }

  /* ---------- Odometer ---------- */
  .odo{display:inline-flex; align-items:baseline;}
  .odo-digit{ display:inline-block; overflow:hidden; height:1em; width:0.62em; vertical-align:baseline; }
  .odo-digit .strip{display:block; transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
  .odo-digit .strip div{height:1em; line-height:1;}
  .odo-comma{display:inline-block; width:0.3em; text-align:center;}
  .odo-mid{font-size:clamp(1.8rem,3.6vw,2.2rem); font-weight:700;}

  /* ---------- Stats row ---------- */
  .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:760px){ .stats{grid-template-columns:1fr;} }
  .stat{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 24px; display:flex; align-items:center; gap:16px; }
  .stat .odo-mid{color:var(--ink);}
  .stat .label{font-size:0.82rem; color:var(--muted); margin-top:4px;}

  /* ---------- grid of cards, generic ---------- */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
  @media (max-width:640px){ .grid-3{grid-template-columns:1fr;} }
  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media (max-width:900px){ .grid-4{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .grid-4{grid-template-columns:1fr;} }
  .card-sm{padding:24px 22px;}
  .card-sm .icon-chip{width:44px; height:44px;}
  .card-sm h3{font-size:0.98rem; margin-top:14px;}
  .card-sm p{margin-top:8px; font-size:0.85rem;}

  .card{ background:var(--surface); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; }
  .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .card:hover .icon-chip{ transform:scale(1.1); }
  .card h3{font-size:1.05rem; margin-top:18px;}
  .card p{margin-top:10px; font-size:0.89rem; color:var(--muted);}
  .card .more{ margin-top:18px; display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:700; color:var(--accent-deep); text-decoration:none; }
  .card .more .icon{width:14px; height:14px;}

  /* ---------- flow (workflow timeline) ---------- */
  .flow{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  @media (max-width:820px){ .flow{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .flow{grid-template-columns:1fr;} }
  .flow-step{ background:var(--surface); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; }
  .flow-step:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
  .flow-step:hover .icon-chip{ transform:scale(1.1); }
  .flow-step h3{font-size:0.98rem; margin-top:16px;}
  .flow-step ul{margin-top:12px; font-size:0.86rem; color:var(--muted); display:grid; gap:6px;}
  .flow-step ul li{position:relative; padding-left:14px;}
  .flow-step ul li::before{content:""; position:absolute; left:0; top:0.6em; width:5px; height:5px; background:var(--accent); border-radius:50%; opacity:0.6;}

  /* ---------- pricing cards ---------- */
  .price-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch;}
  @media (max-width:760px){ .price-grid{grid-template-columns:1fr;} }
  .price-card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
  .price-card .ph{ display:flex; align-items:center; gap:14px; padding:24px 24px 18px; border-bottom:1px solid var(--line); }
  .price-card h3{font-size:1.04rem;}
  .price-card .sub{font-size:0.78rem; color:var(--muted); margin-top:2px;}
  .price-body{padding:6px 24px 22px; flex:1;}
  .price-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-block:11px; border-top:1px solid var(--line); font-size:0.9rem; }
  .price-row:first-of-type{border-top:none;}
  .price-row .name small{display:block; color:var(--muted); font-size:0.74rem; font-weight:400;}
  .price-row .amt{font-weight:700; white-space:nowrap;}
  .price-row .amt small{font-weight:400; color:var(--muted); font-size:0.7rem;}
  .price-card.highlight{ background:var(--accent); color:var(--accent-contrast); justify-content:space-between; padding:28px 26px; }
  .price-card.highlight .kicker{color:color-mix(in srgb, var(--accent-contrast) 80%, transparent);}
  .price-card.highlight h3{color:inherit; font-size:1.25rem; margin-top:12px;}
  .price-card.highlight ul{margin-top:16px; display:grid; gap:9px; font-size:0.84rem; opacity:0.92;}
  .price-card.highlight ul li{position:relative; padding-left:18px;}
  .price-card.highlight ul li::before{content:"›"; position:absolute; left:0; font-weight:700;}
  .price-card.highlight .btn{background:var(--accent-contrast); color:var(--accent-deep); margin-top:18px;}
  .price-card.highlight .btn:hover{background:color-mix(in srgb, var(--accent-contrast) 88%, var(--ink));}
  .price-note{ margin-top:26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.82rem; color:var(--muted); }

  /* ---------- onboarding ---------- */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media (max-width:820px){ .steps{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .steps{grid-template-columns:1fr;} }
  .step{border-radius:var(--radius); padding:24px 22px; background:var(--surface); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;}
  .step:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
  .step:hover .icon-chip{ transform:scale(1.1); }
  .step .step-no{ position:absolute; top:10px; right:16px; font-weight:900; color:color-mix(in srgb, var(--ink) 8%, transparent); font-size:2.6rem; line-height:1; }
  .step h3{font-size:0.98rem; margin-top:16px; position:relative;}
  .step p{font-size:0.86rem; color:var(--muted); margin-top:6px; position:relative;}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px; margin-inline:auto; display:grid; gap:12px;}
  .faq details{background:var(--surface); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);}
  .faq summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; gap:16px; font-weight:700; font-size:0.95rem; }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary .q-mark{color:var(--accent); font-weight:700;}
  .faq summary .chev{margin-left:auto; width:18px; height:18px; transition:transform .25s ease; color:var(--muted);}
  .faq details[open] summary .chev{transform:rotate(180deg);}
  .faq .a{padding:0 24px 20px 58px; font-size:0.88rem; color:var(--muted);}

  /* ---------- Area ---------- */
  .area-grid{display:grid; grid-template-columns:1.05fr 1.4fr; gap:24px;}
  @media (max-width:760px){ .area-grid{grid-template-columns:1fr;} }
  .area-card{ background:var(--hero-bg); color:var(--hero-text); border-radius:var(--radius); padding:32px; position:relative; overflow:hidden; }
  .area-card h3{color:inherit; font-size:1.4rem; margin-top:16px; line-height:1.5;}
  .area-card p{margin-top:14px; font-size:0.85rem; color:var(--hero-muted);}
  .area-list{border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm);}
  .area-row{display:grid; grid-template-columns:88px 1fr; gap:14px; padding:19px 24px;}
  .area-row + .area-row{border-top:1px solid var(--line);}
  .area-row .pref{font-weight:700; font-size:0.9rem;}
  .area-row .cities{font-size:0.86rem; color:var(--muted);}

  /* ---------- Terms ---------- */
  .terms{border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm);}
  .term-row{display:grid; grid-template-columns:180px 1fr; gap:18px; padding:19px 26px; align-items:flex-start;}
  .term-row + .term-row{border-top:1px solid var(--line);}
  .term-row dt{display:flex; align-items:center; gap:10px; font-weight:700; font-size:0.88rem; color:var(--ink);}
  .term-row dd{margin:0; font-size:0.92rem; color:var(--muted);}
  @media (max-width:560px){ .term-row{grid-template-columns:1fr; gap:6px;} }

  /* ---------- Closing / footer ---------- */
  .closing-inner{max-width:1120px; margin-inline:auto; padding-block:80px; text-align:center; position:relative;}
  .closing h2{color:var(--hero-text); font-size:clamp(1.6rem,3.4vw,2.2rem);}
  .closing p{color:var(--hero-muted); margin-top:14px;}
  .closing-actions{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap;}

  footer{background:#141B2C; color:#8891A6; margin-inline:-20px; padding-inline:20px;}
  .foot-inner{max-width:1120px; margin-inline:auto; padding-block:44px 34px; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; font-size:0.82rem;}
  .foot-inner a{text-decoration:none; color:inherit;}
  .foot-inner a:hover{color:#fff;}
  .foot-nav{display:flex; gap:18px; flex-wrap:wrap;}
  .foot-legal{max-width:1120px; margin-inline:auto; padding-block:16px 30px; border-top:1px solid rgba(255,255,255,0.08); font-size:0.74rem; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;}