/* Page-specific styles */
:root {

      --bg-main: #05060b;
      --bg-panel: rgba(9, 15, 25, 0.96);
      --bg-panel-soft: rgba(16, 22, 40, 0.9);
      --border-strong: #20ffaf;
      --border-soft: #155f4f;
      --accent: #20ffaf;
      --accent-soft: #00b894;
      --text-main: #e9fff5;
      --text-muted: #7f9ea0;
      --alert: #ff4f81;
      --shadow-strong: 0 0 25px rgba(32, 255, 175, 0.55);
      --radius-lg: 18px;
    }

.main_image {
      display: flex; 
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      gap: 12px;
    }

@media screen and (max-width: 768px) {
      .main_image img {
        width: 100%;
      }
    }

.main_logo{
      width: 600px;
      height: auto;
      max-width: 100%;
    }

.sub_logo1{
      width: 300px;
      height: auto;
      max-width: 28%;
    }

.sub_logo2{
      width: 300px;
      height: auto;
      max-width: 28%;
      transform: scaleX(-1);
    }

body {
      background: url("../images/bg.jpg") no-repeat center center fixed;
      background-size: cover;
      background-color: #000;
      margin: 0;
      min-height: 100vh;
      color: var(--text-main);

      font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      display: flex;
      flex-direction: column;
    }

body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.3);
      pointer-events: none;
      z-index: -1;
    }

.bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 16px;
      width: 100%;
      border-radius: 999px;
      border: 1px solid rgba(32, 255, 175, 0.3);
      background: radial-gradient(120% 220% at 0 0, rgba(32, 255, 175, 0.19), transparent 55%),
                  radial-gradient(120% 250% at 100% 0, rgba(94, 92, 255, 0.23), transparent 52%),
                  rgba(4, 8, 18, 0.98);
      box-shadow: 0 0 0 1px rgba(9, 255, 183, 0.18),
                  0 18px 35px rgba(2, 5, 12, 0.85);
      position: sticky;
      top: 12px;
      z-index: 20;
      backdrop-filter: blur(14px);
    }

.nav-link {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 6px 11px;
      border-radius: 999px;
      color: var(--text-main);
      border: 1px solid transparent;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: transparent;
      transition: all 0.18s ease-out;
      box-sizing: border-box;
    }

.grid {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 14px;
      margin-top: 18px;
      align-items: flex-start;
    }

@media (max-width: 900px) {
      .grid {
        grid-template-columns: 1fr;
      }

      .bar {
        position: sticky;
        top: 12px;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 10px 12px;
      }

      .logo {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        gap: 8px;
      }

      .logo img {
        width: 28px;
        height: 28px;
      }

      .burger {
        display: inline-flex;
        margin-left: auto;
      }

      nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        display: none;
        z-index: 999;
        box-sizing: border-box;
        flex: none;
      }

      nav.open {
        display: block;
      }

      .nav-list {
        flex-direction: column;
        width: 100%;
        background: radial-gradient(circle at 0 0, rgba(32, 255, 175, 0.25), transparent 60%),
                    rgba(2, 6, 15, 0.98);
        padding: 10px;
        margin: 0;
        border-radius: 16px;
        border: 1px solid rgba(32, 255, 175, 0.55);
        box-sizing: border-box;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
      }

      .nav-item {
        width: 100%;
      }

      .nav-link {
        display: flex;
        width: 100%;
        padding: 12px 14px;
        font-size: 10px;
      }

      .nav-link .jp {
        font-size: 10px;
      }

      .nav-link .en {
        font-size: 9px;
      }

      .panel-sticky {
        position: static;
      }
    }

.panel{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(32, 255, 175, 0.28);
      background: #050214;
      opacity: 88%;
      overflow: hidden;
      position: relative;
    }

.panel .body {
      padding: 14px 16px 0px;
    }

@media (min-width: 901px) {
      .panel-sticky {
        position: sticky;
        top: 96px;
        align-self: flex-start;
      }
    }

.hero-sub {
      font-size: 24px;
      margin: 0 0 6px;
      text-align:center;
    }

.badge-phase {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 9px;
      border-radius: 999px;
      border: 1px solid rgba(32, 255, 175, 0.6);
      font-size: 11px;
      text-transform: uppercase;
      font-family: "Orbitron", system-ui;
      letter-spacing: 0.12em;
      background: radial-gradient(circle at 0 0, rgba(32, 255, 175, 0.25), transparent 55%);
    }

.badge-phase span { opacity: 0.8; }

.callout {
      border-radius: 11px;
      padding: 8px 10px;
      border: 1px solid rgba(32, 255, 175, 0.4);
      background: rgba(5, 20, 18, 0.85);
      font-size: 13px;
      color: var(--text-main);
    }

.form-text {
      font-size: 12px;
      color: var(--text-muted);
    }

.head{
      display: flex;
      justify-content: center;
    }

.form-control,
    .form-select {
      background-color: rgba(1, 7, 12, 0.95);
      border-color: rgba(32, 255, 175, 0.45);
      color: var(--text-main);
      font-size: 13px;
    }

.form-control:focus,
    .form-select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 0.2rem rgba(32, 255, 175, 0.25);
      background-color: rgba(1, 7, 12, 0.99);
    }

label.form-label {
      font-size: 13px;
      margin-bottom: 2px;
    }

.btn-primary {
      background: linear-gradient(135deg, var(--accent), #65ffe0);
      border-color: var(--accent-soft);
      color: #000;
      font-family: "Orbitron", system-ui;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

.btn-primary:hover {
      background: linear-gradient(135deg, #65ffe0, var(--accent));
      border-color: #9dffe0;
      box-shadow: 0 0 16px rgba(32, 255, 175, 0.7);
    }

.btn-secondary {
      background: rgba(2, 9, 14, 0.96);
      border-color: rgba(32, 255, 175, 0.5);
      color: var(--text-main);
    }

.summary-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-family: "DotGothic16", system-ui;
      font-size: 13px;
    }

.summary-list li {
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      gap: 6px;
    }

.summary-list span.value {
      font-family: "Orbitron", system-ui;
      white-space: nowrap;
    }

.checkbox-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 4px 12px;
      font-size: 13px;
      margin-bottom: 8px;
    }

.form-inner {
      max-width: none;
      margin: 0 auto;
    }

@media (max-width: 600px) {
      .hero-main {
        font-size: 18px;
      }
    }

.body{
      text-align: center;
    }

.checkbox-grid label,
    .form-check-label {
      font-size: 13px;
      line-height: 1.5;
      font-family: "Noto Sans JP", system-ui, sans-serif;
    }

.about-grid{display:grid;gap:14px;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}

.col-7{grid-column:span 7}

.col-5{grid-column:span 5}

.col-6{grid-column:span 6}

.col-12{grid-column:span 12}

@media (max-width: 980px){.col-7,.col-5,.col-6{grid-column:span 12}}

.re{opacity:1;transform:none}

table.neon{
      width:100%;
      border-collapse:collapse;
      margin:12px 0;
      background: rgba(1,7,12,0.75);
      color: var(--text-main);
      border: 1px solid rgba(32,255,175,0.28);
      border-radius: 14px;
      overflow:hidden;
      box-shadow: 0 0 18px rgba(32,255,175,0.18);
    }

table.neon th, table.neon td{
      border: 1px solid rgba(32,255,175,0.18);
      padding: .65em .9em;
      text-align:center;
    }

table.neon thead th{
      background: radial-gradient(circle at 0 0, rgba(32,255,175,0.18), transparent 60%), rgba(1,7,12,0.96);
    }

table.neon tbody tr:nth-child(odd){background: rgba(32,255,175,0.05)}

.note{color: var(--text-muted); font-size: 12px}

.muted{color: var(--text-muted)}