:root{
      --bg: #fbfbfb;
      --paper: rgba(255,255,255,.72);
      --paper2: rgba(255,255,255,.55);
      --ink: #121212;
      --muted: rgba(18,18,18,.62);
      --muted2: rgba(18,18,18,.46);
      --line: rgba(18,18,18,.10);
      --line2: rgba(18,18,18,.14);
      --shadow: 0 16px 46px rgba(0,0,0,.10);
      --shadow2: 0 10px 28px rgba(0,0,0,.08);
      --radius: 22px;
      --radius2: 16px;
      --max: 1100px;
      --pad: 22px;
      --font:
        ui-sans-serif, system-ui, -apple-system,
        "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:var(--bg);
      letter-spacing:.01em;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
    }
    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

    

    /* ✅ About準拠：SPの白い空白事故を避ける */
    .page{
      min-height:100svh;
      display:grid;
      grid-template-rows:auto 1fr auto;
      position:relative;
      overflow-x:hidden;
    }

    /* ✅ About準拠：背景は fixed（スクロールしても途切れない） */
    .bg{
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.95;
      z-index:0;
    }
    .bg canvas{ width:100%; height:100%; display:block; }

    /* Header */
    .header{
      position:sticky;
      top:0;
      z-index:30;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      background:rgba(251,251,251,.62);
      border-bottom:1px solid var(--line);
    }
    .header-inner{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:14px 0;
      min-height:56px;
    }
    .brand{
      display:inline-flex;
      align-items:baseline;
      gap:10px;
      white-space:nowrap;
      user-select:none;
    }
    .brand-sub{
      font-size:12.5px;
      letter-spacing:.12em;
      color:var(--muted2);
      font-weight:520;
    }





    /* Hamburger */
    .menu-btn{
      position:absolute;
      right:0;
      top:50%;
      transform:translateY(-50%);
      border:none;
      background:transparent;
      box-shadow:none;
      width:44px;
      height:44px;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .menu-icon{ width:20px; height:14px; position:relative; }
    .menu-icon i{
      position:absolute;
      left:0; right:0;
      height:1.8px;
      border-radius:999px;
      background:rgba(18,18,18,.85);
      transition:transform .18s ease, top .18s ease, opacity .18s ease;
    }
    .menu-icon i:nth-child(1){ top:0; }
    .menu-icon i:nth-child(2){ top:6px; }
    .menu-icon i:nth-child(3){ top:12px; }
    .is-menu-open .menu-icon i:nth-child(1){ top:5px; transform:rotate(45deg); }
    .is-menu-open .menu-icon i:nth-child(2){ opacity:0; }
    .is-menu-open .menu-icon i:nth-child(3){ top:5px; transform:rotate(-45deg); }

    /* ✅ Menu（About準拠：最小・罫線） */
    .menu-overlay{
      position:fixed;
      inset:0;
      z-index:40;
      background:rgba(18,18,18,.10);
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
    }
    .is-menu-open .menu-overlay{ opacity:1; pointer-events:auto; }

    .menu-panel{
      position:absolute;
      right:var(--pad);
      top:74px;
      width:min(300px, calc(100vw - (var(--pad) * 2)));
      border-radius:18px;
      border:none;
      background:rgba(255,255,255,.92);
      box-shadow:0 18px 40px rgba(0,0,0,.08);
      overflow:hidden;
      transform:translateY(-6px);
      transition:transform .18s ease;
    }
    .is-menu-open .menu-panel{ transform:translateY(0); }

    .menu-head{
      padding:18px 18px 6px;
      display:flex;
      align-items:center;
      justify-content:end;
    }
    .menu-title{ display:none; }
    .menu-close{
      border:none;
      background:transparent;
      width:44px;
      height:44px;
      cursor:pointer;
      color:rgba(18,18,18,.72);
      font-size:22px;
      line-height:1;
    }

    .menu-list{
      margin:0;
      padding:6px 18px 18px;
      list-style:none;
      display:grid;
      gap:0;
    }
    .menu-item a{
      display:flex;
      align-items:baseline;
      justify-content:flex-end;
      padding:16px 0;
      border-bottom:1px solid rgba(18,18,18,.10);
      background:transparent;
      font-weight:720;
      letter-spacing:.02em;
    }
    .menu-item:last-child a{ border-bottom:none; }
    .menu-item a:hover{ opacity:.75; }
    .menu-item small{
      font-size:11px;
      letter-spacing:.18em;
      opacity:.45;
      font-weight:700;
      display:flex;
      gap:12px;
      align-items:baseline;
    }





    .main{
      position:relative;
      z-index:10;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px 0;
    }




    .card{
      width:100%;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--paper);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .card::after{
      content:"";
      position:absolute;
      inset:14px;
      pointer-events:none;
      border-radius:calc(var(--radius) - 8px);
      background:
        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) left top/22px 1px no-repeat,
        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) left top/1px 22px no-repeat,

        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) right top/22px 1px no-repeat,
        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) right top/1px 22px no-repeat,

        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) left bottom/22px 1px no-repeat,
        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) left bottom/1px 22px no-repeat,

        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) right bottom/22px 1px no-repeat,
        linear-gradient(rgba(18,18,18,.10), rgba(18,18,18,.10)) right bottom/1px 22px no-repeat;
      opacity:.55;
    }

    .card-inner{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:0;
      min-height:420px;
    }

    .col{ padding:28px 26px; }
    .col + .col{
      border-left:1px solid var(--line);
      background:var(--paper2);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      color:var(--muted2);
      font-weight:750;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .kicker .dot{
      width:7px; height:7px;
      border-radius:999px;
      background:rgba(18,18,18,.42);
    }

    .hero-title{
      margin:14px 0 10px;
      font-size:clamp(26px, 3.2vw, 42px);
      line-height:1.18;
      letter-spacing:.01em;
      font-weight:620;
    }

    .lead{
      margin:0 0 18px;
      font-size:15px;
      line-height:1.9;
      letter-spacing:.02em;
      color:var(--muted);
      max-width:40em;
    }

    .lead br{ display: block; }

    .divider{margin:16px 0; border-top:1px solid rgba(18,18,18,.08);}

            .block{
      border: 1px solid rgba(18,18,18,.10);
      border-radius: var(--radius2);
      background: rgba(255,255,255,.62);
      padding: 14px 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,.06);
    }
    .block-title{
      margin: 0 0 10px;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(18,18,18,.46);
      font-weight: 750;
    }










    .footer{
      position:relative;
      z-index:10;
      border-top:1px solid var(--line);
      background:rgba(251,251,251,.55);
    }
    .footer-inner{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:14px 0;
      color:var(--muted2);
      font-size:12.5px;
      letter-spacing:.06em;
      text-align:center;
    }



    @media (max-width: 920px){
      .main{
        align-items:flex-start;   /* ✅ About準拠 */
        padding:18px 0 26px;
      }
      .card-inner{ grid-template-columns:1fr; }
      .col + .col{
        border-left:none;
        border-top:1px solid var(--line);
      }
      .hero-title{ font-size:clamp(24px, 7vw, 36px); }
      .lead{ font-size:14.5px; }
      .header-inner{ padding:12px 0; }
      .menu-panel{ right:12px; top:68px; }
    }

    @media (max-height: 720px){
      .main{ padding:16px 0; }
      .col{ padding:22px 20px; }
      .card-inner{ min-height:380px; }
    }

    @media (prefers-reduced-motion: reduce){
      .menu-overlay, .menu-panel, .menu-icon i, .btn{ transition:none !important; }
    }



    @media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}




/* FIX: softWorld の背景領域だけ全画面化（最小） */
.bg{
  height: 100svh !important;
}
#softWorld{
  height: 100svh !important;
}