:root{
      --navy:#07111f;
      --navy2:#0d1d35;
      --paper:#f7f5f1;
      --white:#fff;
      --muted:rgba(255,255,255,.66);
      --line:rgba(255,255,255,.14);
      --peach:#e7aa92;
      --max:920px;
    }

    *{box-sizing:border-box}

    html{
      scroll-behavior:smooth;
      background:var(--navy);
    }

    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",YuGothic,sans-serif;
      background:
        radial-gradient(circle at 80% 20%,rgba(231,170,146,.12),transparent 28%),
        linear-gradient(180deg,#07111f 0%,#0b1d34 55%,#081427 100%);
      color:#fff;
      line-height:1.8;
      letter-spacing:.02em;
      -webkit-font-smoothing:antialiased;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    .container{
      width:min(var(--max),calc(100% - 32px));
      margin-inline:auto;
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:10;
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:66px;
      padding:0 20px;
      background:rgba(5,11,22,.72);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .brand{
      display:flex;
      align-items:baseline;
      gap:9px;
    }

    .brand .jp{
      font-family:"Yu Mincho",serif;
      font-size:28px;
    }

    .brand .en{
      font-family:Georgia,serif;
      font-size:11px;
      letter-spacing:.18em;
      opacity:.68;
    }

    .back{
      font-size:11px;
      letter-spacing:.12em;
      opacity:.72;
    }

    .hero{
      padding:86px 0 50px;
      text-align:center;
    }

    .eyebrow{
      margin:0 0 14px;
      font-size:10px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(255,255,255,.5);
    }

    h1{
      margin:0;
      font-family:Georgia,"Yu Mincho",serif;
      font-weight:400;
      font-size:clamp(48px,9vw,92px);
      line-height:1;
      letter-spacing:.02em;
    }

    .lead{
      margin:28px auto 0;
      max-width:700px;
      font-family:"Yu Mincho",serif;
      font-size:clamp(20px,3vw,30px);
      line-height:1.7;
    }

    .sublead{
      margin:20px auto 0;
      max-width:650px;
      color:var(--muted);
      font-size:14px;
    }

    .letter-card{
      margin:35px auto 80px;
      padding:34px;
      border:1px solid var(--line);
      border-radius:26px;
      background:rgba(255,255,255,.045);
      box-shadow:0 28px 90px rgba(0,0,0,.18);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    .field{
      margin-bottom:24px;
    }

    label{
      display:block;
      margin-bottom:9px;
      font-size:11px;
      letter-spacing:.12em;
      color:rgba(255,255,255,.72);
    }

    .required{
      color:#f4c3b2;
      margin-left:6px;
    }

    input,
    textarea,
    select{
      width:100%;
      border:1px solid rgba(255,255,255,.14);
      border-radius:16px;
      background:rgba(255,255,255,.055);
      color:#fff;
      padding:15px 16px;
      font:inherit;
      outline:none;
      transition:border-color .2s,background .2s;
    }

    textarea{
      min-height:220px;
      resize:vertical;
    }

    input::placeholder,
    textarea::placeholder{
      color:rgba(255,255,255,.34);
    }

    input:focus,
    textarea:focus,
    select:focus{
      border-color:rgba(255,255,255,.34);
      background:rgba(255,255,255,.075);
    }

    option{
      color:#111;
    }

    .helper{
      margin-top:8px;
      font-size:12px;
      color:rgba(255,255,255,.45);
    }

    .consent{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:16px 0 8px;
      font-size:13px;
      color:rgba(255,255,255,.66);
    }

    .consent input{
      width:18px;
      height:18px;
      margin-top:4px;
      accent-color:#fff;
      flex:0 0 auto;
    }

    .submit{
      width:100%;
      min-height:58px;
      margin-top:18px;
      border:0;
      border-radius:999px;
      background:#fff;
      color:#07111f;
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      cursor:pointer;
      transition:transform .2s,opacity .2s;
    }

    .submit:hover{
      transform:translateY(-2px);
    }

    .note{
      margin:24px 0 0;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.1);
      font-size:12px;
      line-height:1.9;
      color:rgba(255,255,255,.5);
    }

    .footer{
      padding:38px 0 calc(44px + env(safe-area-inset-bottom));
      text-align:center;
      color:rgba(255,255,255,.48);
      font-size:11px;
    }

    .footer strong{
      display:block;
      margin-bottom:8px;
      font-family:"Yu Mincho",serif;
      font-size:18px;
      font-weight:400;
      color:rgba(255,255,255,.78);
    }

    @media(max-width:640px){
      .hero{
        padding:66px 0 34px;
      }

      .lead{
        font-size:24px;
      }

      .letter-card{
        padding:22px 18px;
        border-radius:20px;
        margin-bottom:58px;
      }

      textarea{
        min-height:200px;
      }
    }