@charset "UTF-8";
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

    :root{
      --navy:#0a1530;
      --blue:#1f6fd6;
      --blue-d:#1559b8;
      --sky:#3f9ad8;
      --red:#e23b32;
      --red-d:#c92e26;
      --cyan:#2bb4e6;
      --ink:#1b2440;
      --text:#5c6470;
      --bg-feat:#eef2f8;
      --bg-faq:#f4f5f7;
      --border:#e4e8ef;
    }

    html{scroll-behavior:smooth;}
    body{
      font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif;
      color:#333;line-height:1.7;font-size:15px;
      background:#fff;-webkit-font-smoothing:antialiased;
    }
    a{text-decoration:none;color:inherit;}
    ul{list-style:none;}
    img,svg{display:block;}
    .ic{display:inline-block;vertical-align:middle;flex-shrink:0;}

    .wrap{max-width:1120px;margin:0 auto;padding:0 36px;}

    /* ===== logo ===== */
    .logo{font-weight:900;letter-spacing:.5px;line-height:1;font-style:italic;white-space:nowrap;}
    .logo .dot{font-style:normal;margin:0 .01em;}
    .logo .ex{color:var(--red);}

    /* ============ HEADER ============ */
    #header{
      position:sticky;top:0;z-index:1000;
      background:var(--navy);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .header-inner{height:66px;display:flex;align-items:center;justify-content:space-between;}
    .header-logo{display:flex;align-items:center;}
    .header-logo-img{height:25px;width:auto;display:block;}
    .header-nav{display:flex;align-items:center;gap:26px;}
    .header-nav a.nav-link{
      font-size:13px;color:rgba(255,255,255,.82);font-weight:500;transition:color .15s;
    }
    .header-nav a.nav-link:hover{color:#fff;}
    .btn-leave-outline{
      display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
      white-space:nowrap;line-height:1;
      border:1.5px solid var(--red);color:#ff6259;
      font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:6px;
      transition:background .15s,color .15s;
    }
    .btn-leave-outline:hover{background:var(--red);color:#fff;}

    /* ============ HERO ============ */
    #hero{
      position:relative;overflow:hidden;
      background:linear-gradient(118deg,#081020 0%,#0b1c3c 38%,#0f2c52 70%,#143568 100%);
    }
    #hero::before{
      content:'';position:absolute;inset:0;
      background:
        radial-gradient(720px 540px at 70% 42%,rgba(48,138,242,.6) 0%,transparent 60%),
        radial-gradient(360px 360px at 58% 54%,rgba(95,185,255,.42) 0%,transparent 70%),
        radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1.4px);
      background-size:auto,auto,30px 30px;pointer-events:none;
    }
    .streak{
      position:absolute;pointer-events:none;
      background:linear-gradient(90deg,transparent,rgba(150,212,255,.7),transparent);
      filter:blur(1.4px);
    }
    .streak.s1{width:780px;height:2px;top:118px;left:42%;transform:rotate(-26deg);opacity:.95;}
    .streak.s2{width:600px;height:3px;top:212px;left:36%;transform:rotate(-26deg);opacity:.7;}
    .streak.s3{width:860px;height:2px;top:322px;left:38%;transform:rotate(-26deg);opacity:.55;}
    .streak.s4{width:480px;height:2px;top:66px;left:52%;transform:rotate(-26deg);opacity:.8;}
    .streak.s5{width:700px;height:4px;top:404px;left:40%;transform:rotate(-26deg);opacity:.4;filter:blur(3px);}
    .streak.s6{width:430px;height:2px;top:262px;left:55%;transform:rotate(-26deg);opacity:.62;}

    .hero-inner{
      display:flex;align-items:center;gap:54px;
      padding:58px 0 50px;position:relative;z-index:2;
    }
    .hero-content{flex:1;min-width:0;}
    .hero-h1{
      font-size:clamp(26px,calc(3.2vw + 16px),53px);font-weight:900;color:#fff;
      line-height:1.4;letter-spacing:.5px;margin-bottom:24px;
    }
    .hero-desc{
      font-size:17.5px;color:rgba(255,255,255,.85);
      line-height:1.9;margin-bottom:34px;max-width:580px;
    }
    .hero-buttons{display:flex;flex-direction:column;gap:16px;max-width:362px;}
    .hbtn{
      position:relative;
      display:flex;align-items:center;justify-content:center;gap:11px;
      font-size:16.5px;font-weight:700;padding:18px 26px;border-radius:999px;
      transition:transform .14s,box-shadow .2s;
    }
    .hbtn-primary::before,.hbtn-sky::before{
      content:'';position:absolute;left:5px;right:5px;top:3px;height:44%;
      border-radius:999px;pointer-events:none;
      background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
    }
    .hbtn:hover{transform:translateY(-2px);}
    .hbtn-primary{
      background:linear-gradient(180deg,#4aa6f2 0%,#2178da 52%,#155cbb 100%);
      color:#fff;border:1px solid rgba(135,200,255,.65);
      box-shadow:0 0 26px rgba(45,135,235,.6),0 10px 22px rgba(8,30,70,.5),inset 0 1px 0 rgba(255,255,255,.35);
    }
    .hbtn-primary:hover{box-shadow:0 0 36px rgba(55,150,245,.85),0 12px 26px rgba(8,30,70,.55),inset 0 1px 0 rgba(255,255,255,.4);}
    .hbtn-sky{
      background:linear-gradient(180deg,#8ed2f7 0%,#46a3dd 52%,#3187c9 100%);
      color:#fff;border:1px solid rgba(175,222,255,.75);
      box-shadow:0 0 26px rgba(75,175,230,.55),0 10px 22px rgba(8,30,70,.45),inset 0 1px 0 rgba(255,255,255,.4);
    }
    .hbtn-sky:hover{box-shadow:0 0 36px rgba(95,195,245,.8),0 12px 26px rgba(8,30,70,.5),inset 0 1px 0 rgba(255,255,255,.45);}
    .hbtn-leave{
      background:rgba(229,52,43,.08);color:#ff5a52;border:2px solid #e5342b;
      box-shadow:0 0 22px rgba(229,52,43,.42),inset 0 0 16px rgba(229,52,43,.1);
    }
    .hbtn-leave:hover{background:rgba(229,52,43,.16);box-shadow:0 0 30px rgba(229,52,43,.62),inset 0 0 16px rgba(229,52,43,.14);}

    /* ---- phone ---- */
    .hero-phone{flex:0 0 318px;display:flex;justify-content:center;}
    .hero-phone-img{
      width:100%;max-width:340px;height:auto;display:block;
      filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));
    }
    .phone{
      width:288px;height:603px;background:#0d1424;border-radius:46px;
      padding:11px;position:relative;
      box-shadow:0 36px 70px rgba(0,0,0,.55),0 0 0 1.5px rgba(255,255,255,.07);
    }
    .phone::before{
      content:'';position:absolute;top:11px;left:50%;transform:translateX(-50%);
      width:128px;height:25px;background:#0d1424;border-radius:0 0 16px 16px;z-index:6;
    }
    .screen{
      width:100%;height:100%;background:#fff;border-radius:36px;
      overflow:hidden;display:flex;flex-direction:column;
    }
    .statusbar{
      display:flex;align-items:center;justify-content:space-between;
      padding:13px 22px 6px;font-size:12px;font-weight:700;color:#10182a;
    }
    .statusbar .sb-icons{display:flex;align-items:center;gap:5px;}
    .app-screen-img{
      flex:1;width:100%;min-height:0;display:block;
      object-fit:cover;object-position:top center;
    }
    .app-head{
      display:flex;align-items:center;justify-content:space-between;
      padding:5px 16px 11px;border-bottom:1px solid #eef0f3;
    }
    .app-head .logo{font-size:16px;color:var(--navy);}
    .app-head .burger{color:#3a4252;}
    .app-body{flex:1;overflow:hidden;padding:12px 13px;background:#fff;}
    .app-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
    .app-row .ttl{font-size:13px;font-weight:900;color:var(--ink);}
    .app-row .more{font-size:9.5px;color:var(--blue);font-weight:700;}
    .ev-card{
      border:1px solid #ebedf1;border-radius:11px;overflow:hidden;
      margin-bottom:10px;box-shadow:0 3px 9px rgba(20,30,60,.05);background:#fff;
    }
    .ev-img{position:relative;height:94px;}
    .ev-img svg{width:100%;height:100%;}
    .ev-badge{
      position:absolute;top:7px;left:7px;
      background:#1f9ec9;color:#fff;font-size:8px;font-weight:700;
      padding:2.5px 7px;border-radius:4px;letter-spacing:.5px;
    }
    .ev-info{padding:8px 10px 10px;}
    .ev-name{font-size:11px;font-weight:900;color:var(--ink);line-height:1.4;margin-bottom:5px;}
    .ev-meta{display:flex;align-items:center;gap:4px;font-size:8.5px;color:#8b919c;margin-bottom:2px;}
    .ev-meta svg{color:#aeb4bf;}
    .ev-btn{
      margin-top:7px;display:flex;align-items:center;justify-content:center;
      background:#e9f2fb;color:var(--blue);
      font-size:9.5px;font-weight:700;padding:7px;border-radius:6px;
    }
    .app-nav{display:flex;border-top:1px solid #eef0f3;background:#fff;padding:7px 0 9px;}
    .app-nav .it{
      flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
      font-size:7.5px;color:#aab0bb;
    }
    .app-nav .it.on{color:var(--blue);}

    /* ---- hero feature row ---- */
    .hero-feats{
      margin-top:38px;
      border-top:1px solid rgba(255,255,255,.14);
      padding:30px 0 0;
      display:flex;justify-content:space-between;
    }
    .hf{
      flex:1;position:relative;padding:0 16px;
      display:flex;flex-direction:column;align-items:center;text-align:center;
    }
    .hf:not(:first-child)::before{
      content:'';position:absolute;left:0;top:4px;bottom:8px;
      width:1px;background:rgba(255,255,255,.14);
    }
    .hf-ico{position:relative;display:inline-flex;margin-bottom:13px;}
    .hf-ico svg{color:var(--cyan);filter:drop-shadow(0 0 8px rgba(43,180,230,.95));}
    .hf-dot{
      position:absolute;top:-1px;right:-2px;width:10px;height:10px;border-radius:50%;
      background:#ff5b34;box-shadow:0 0 7px rgba(255,91,52,.95);
    }
    .hf .hf-ttl{font-size:15px;font-weight:700;color:#fff;margin-bottom:7px;}
    .hf .hf-desc{font-size:12px;color:rgba(255,255,255,.62);line-height:1.7;max-width:230px;}

    /* ============ SECTION COMMON ============ */
    .section{padding:64px 36px;}
    .section-inner{margin:0 auto;}
    .sec-head{text-align:center;margin-bottom:42px;}
    .sec-title{font-size:27px;font-weight:900;color:var(--ink);letter-spacing:.5px;display:inline-block;}
    .sec-title .logo{font-size:27px;color:var(--blue);}
    .sec-head .accent{width:50px;height:4px;border-radius:3px;background:var(--blue);margin:14px auto 0;}
    .sec-head.light .sec-title{color:#fff;}
    .sec-head.light .accent{background:var(--cyan);}

    /* ============ でできること ============ */
    #features{background:var(--bg-feat);}
    #features .section-inner{max-width:1000px;}
    .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
    .feat-card{
      background:#fff;border:1px solid var(--border);border-radius:14px;
      padding:32px 18px 26px;text-align:center;transition:transform .18s,box-shadow .18s;
    }
    .feat-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,40,90,.1);}
    .feat-ico{
      width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 17px;box-shadow:0 8px 18px rgba(31,111,214,.3);
    }
    .feat-name{font-size:15.5px;font-weight:900;color:var(--ink);margin-bottom:10px;}
    .feat-desc{font-size:12px;color:var(--text);line-height:1.85;}

    /* ============ 利用イメージ ============ */
    #usage{background:#fff;}
    #usage .section-inner{max-width:1040px;}
    .steps{display:flex;align-items:stretch;justify-content:center;}
    .step{
      flex:1;background:#fff;border:1px solid var(--border);border-radius:14px;
      padding:30px 14px 22px;text-align:center;position:relative;
    }
    .step-num{
      position:absolute;top:-15px;left:50%;transform:translateX(-50%);
      width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
      font-size:14px;font-weight:900;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 4px 10px rgba(31,111,214,.4);
    }
    .step-ico{
      width:58px;height:58px;border-radius:50%;background:var(--bg-feat);color:var(--blue);
      display:flex;align-items:center;justify-content:center;margin:6px auto 13px;
    }
    .step-name{font-size:13px;font-weight:900;color:var(--ink);line-height:1.5;margin-bottom:7px;}
    .step-desc{font-size:11px;color:var(--text);line-height:1.7;}
    .step-arrow{
      flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:var(--blue);
    }

    /* ============ 差し込みコンテンツ ============ */
    #promo{background:#fff;}
    #promo .section-inner{max-width:880px;}
    .promo-msg{
      background:linear-gradient(180deg,#f5f9fd 0%,#e9f1fb 100%);
      border:1px solid #d7e5f4;border-radius:14px;
      padding:34px 30px;text-align:center;margin-bottom:20px;
    }
    .promo-h2{
      font-size:21px;font-weight:900;color:var(--ink);
      line-height:1.78;letter-spacing:.1em;margin-bottom:15px;
    }
    .promo-lead{
      font-size:13px;color:#3f5e88;line-height:2.05;letter-spacing:.04em;font-weight:500;
    }
    .promo-dl{
      background:linear-gradient(180deg,#f7fafd 0%,#edf3fb 100%);
      border:1px solid #d7e5f4;border-radius:14px;
      padding:28px 32px;display:flex;align-items:center;gap:26px;
    }
    .promo-dl-icon{
      flex-shrink:0;width:74px;height:74px;border-radius:50%;
      background:#fff;border:1px solid #dbe7f4;color:var(--blue);
      display:flex;align-items:center;justify-content:center;
    }
    .promo-dl-main{flex:1;min-width:0;}
    .promo-dl-title{font-size:18px;font-weight:900;color:var(--ink);margin-bottom:8px;}
    .promo-dl-text{font-size:12.5px;color:var(--text);line-height:1.85;margin-bottom:14px;}
    .promo-stores{display:flex;gap:12px;flex-wrap:wrap;}
    .store-badge{
      display:inline-flex;align-items:center;gap:9px;
      background:#101216;border-radius:8px;padding:8px 16px;
    }
    .store-badge span{display:flex;flex-direction:column;line-height:1.18;color:#fff;text-align:left;}
    .store-badge small{font-size:9px;font-weight:500;opacity:.85;}
    .store-badge strong{font-size:15px;font-weight:700;letter-spacing:.02em;}
    .promo-qr{flex-shrink:0;text-align:center;}
    .promo-qr-img{
      width:118px;height:118px;display:block;
      border:1px solid #e2e6ec;border-radius:6px;
    }
    .promo-qr-note{font-size:10px;color:#9aa0ab;margin-top:7px;}

    /* ============ 会員退会について ============ */
    #leave{background:var(--navy);}
    #leave .section-inner{max-width:760px;}
    #leave .sec-head{margin-bottom:16px;}
    .leave-lead{
      text-align:center;font-size:15.5px;color:rgba(255,255,255,.9);
      line-height:1.8;margin-bottom:28px;
    }
    .alert{
      background:#fdeeec;border:1.5px solid #e8a59f;
      border-radius:12px;padding:20px 26px;
      display:flex;gap:16px;align-items:center;margin-bottom:20px;
    }
    .alert svg{color:var(--red);flex-shrink:0;}
    .alert .a-strong{font-size:14.5px;font-weight:700;color:#d83a30;margin-bottom:6px;line-height:1.6;}
    .alert .a-text{font-size:14.5px;font-weight:700;color:#d83a30;line-height:1.6;}
    .leave-box{
      background:#fff;border-radius:12px;padding:30px 34px;
      display:flex;gap:48px;align-items:center;justify-content:center;
      margin-bottom:22px;box-shadow:0 16px 36px rgba(0,0,0,.32);
    }
    .leave-left{flex:0 1 auto;}
    .leave-left .ll-ttl{
      font-size:19px;font-weight:900;color:var(--ink);
      display:inline-block;padding-bottom:7px;margin-bottom:14px;
      border-bottom:3px solid var(--blue);
    }
    .leave-left .ll-desc{font-size:13px;color:var(--text);line-height:1.85;}
    .leave-right{flex:0 0 320px;}
    .leave-card{
      background:#fbfcfd;border:1px solid var(--border);
      border-radius:10px;padding:18px 20px;text-align:center;
    }
    .leave-card .lc-label{font-size:11.5px;color:#9aa0ab;font-weight:700;margin-bottom:5px;}
    .leave-card .lc-url{
      font-size:13.5px;color:var(--blue);font-weight:700;
      word-break:break-all;margin-bottom:13px;
    }
    .btn-leave-full{
      display:flex;align-items:center;justify-content:center;gap:8px;
      background:var(--red);color:#fff;font-size:14.5px;font-weight:700;
      padding:14px;border-radius:8px;transition:background .15s;
    }
    .btn-leave-full:hover{background:var(--red-d);}
    .lc-note{font-size:11px;color:#aab0bb;margin-top:9px;}
    .leave-foot{font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.95;text-align:center;}

    /* ============ よくある質問 ============ */
    #faq{background:var(--bg-faq);}
    #faq .section-inner{max-width:780px;}
    .faq-item{
      background:#fff;border:1px solid var(--border);border-radius:10px;
      padding:18px 22px;margin-bottom:14px;transition:box-shadow .15s;
    }
    .faq-item:hover{box-shadow:0 6px 18px rgba(20,40,90,.07);}
    .faq-q{display:flex;align-items:center;gap:13px;cursor:pointer;}
    .qa-badge{
      flex-shrink:0;width:26px;height:26px;border-radius:6px;
      display:flex;align-items:center;justify-content:center;
      font-size:13px;font-weight:900;color:#fff;
    }
    .qa-badge.q{background:var(--blue);}
    .qa-badge.a{background:var(--red);}
    .faq-q-text{flex:1;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;}
    .faq-plus{flex-shrink:0;color:#9aa3b2;transition:transform .25s;}
    .faq-item.open .faq-plus{transform:rotate(45deg);color:var(--blue);}
    .faq-a{display:flex;gap:13px;align-items:flex-start;margin-top:14px;}
    .faq-a-text{flex:1;font-size:13px;color:var(--text);line-height:1.85;padding-top:3px;}
    .faq-item:not(.open) .faq-a{display:none;}

    /* ============ FOOTER (TSP太陽株式会社) ============ */
    #footer{background:#fff;border-top:1px solid #e6e8ec;padding:32px 36px 24px;}
    .footer-inner{max-width:1120px;margin:0 auto;}
    .footer-top{
      display:flex;align-items:center;justify-content:space-between;
      gap:30px;flex-wrap:wrap;padding-bottom:20px;
    }
    .footer-brand{display:flex;align-items:center;}
    .footer-tsp-logo{height:36px;width:auto;display:block;}
    .footer-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
    .footer-nav a.f-link{
      font-size:13px;color:#48505d;font-weight:500;transition:color .15s;
    }
    .footer-nav a.f-link:hover{color:var(--blue);}
    .footer-divider{border-top:1px solid #ebedf0;}
    .footer-copy{text-align:center;padding-top:18px;font-size:11.5px;color:#9aa0ab;letter-spacing:.3px;}

    /* ===== responsive ===== */
    @media(max-width:1024px){
      .hero-desc{font-size:15px;}
    }
    @media(max-width:920px){
      .hero-inner{flex-direction:column;gap:46px;}
      .hero-content{width:100%;}
      .hero-buttons{max-width:100%;}
      .hero-desc br{display:none;}
      .hero-feats{flex-direction:column;align-items:center;gap:32px;}
      .feat-grid{grid-template-columns:repeat(2,1fr);}
      .steps{flex-wrap:wrap;gap:16px;}
      .step{flex:0 0 calc(50% - 8px);}
      .step-arrow{display:none;}
      .leave-box{flex-direction:column;}
      .leave-left{width:100%;}
      .leave-right{flex:1;width:100%;}
      .promo-dl{flex-direction:column;text-align:center;}
      .promo-dl-main{text-align:center;}
      .promo-dl-text br{display:none;}
      .promo-stores{justify-content:center;}
      .header-nav{gap:14px;}
      .header-nav a.nav-link{display:none;}
      .wrap{padding:0 18px;}
      .header-logo-img{height:21px;}
      .btn-leave-outline{font-size:11px;padding:7px 12px;gap:5px;}
    }
    @media(max-width:560px){
      .feat-grid{grid-template-columns:1fr;}
      .step{flex:0 0 100%;}
      .sec-title,.sec-title .logo{font-size:22px;}
      .footer-top{flex-direction:column;align-items:flex-start;}
    }