:root{
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#f7fafc;
  --panel:#ffffff;
  --brand:#7c3aed; /* keep brand identity */
  --brand2:#06b6d4;
  --max:1140px;
  /* extended tokens for theming */
  --border-1:#e5e7eb;
  --border-2:#e5e7eb;
  --border-3:#e5e7eb;
  --border-4:#d1d5db;
  --panel-alt:#f3f4f6;
  --btn-border:#d1d5db;
  --menu-link:#1f2937;
  --menu-link-hover:#111827;
  --header-bg:rgba(255,255,255,.75);
  --mobile-menu-bg:rgba(255,255,255,.98);
  --screen-grad-top:#ffffff;
  --screen-grad-bottom:#f7fafc;
}

/* dark theme overrides */
[data-theme="dark"]{
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --bg:#0b0f14;
  --panel:#111827;
  --brand:#7c3aed;
  --brand2:#06b6d4;
  /* extended tokens for theming */
  --border-1:#111827; /* header border */
  --border-2:#1f2937; /* card/surface border */
  --border-3:#121826; /* band/footer/menu borders */
  --border-4:#374151; /* screen border */
  --panel-alt:#0e131a; /* band background, image bg */
  --btn-border:#2c3340;
  --menu-link:#e5e7eb;
  --menu-link-hover:#ffffff;
  --header-bg:rgba(11,15,20,.7);
  --mobile-menu-bg:rgba(14,19,26,.98);
  --screen-grad-top:#1f2937;
  --screen-grad-bottom:#0b0f14;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,Helvetica,Arial,sans-serif}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:var(--header-bg);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border-1);z-index:9;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 20px;position:relative}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;color:var(--ink);text-decoration:none;font-size:1.25rem}
.logo img{width:1.25em;height:1.25em}
.menu{display:flex;gap:22px;font-size:16px;align-items:center}
.menu a{color:var(--menu-link);text-decoration:none}
.menu a:hover{color:var(--menu-link-hover)}
.menu a:visited{color:var(--menu-link)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--btn-border);color:var(--menu-link);border-radius:8px;padding:8px 12px;font-size:22px}
/* theme toggle button styles */
.theme-toggle{display:inline-block;background:transparent;border:1px solid var(--btn-border);color:var(--menu-link);border-radius:8px;padding:8px 10px;font-size:16px}
.hero{position:relative;overflow:hidden;}
.hero-top{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;color:var(--ink);text-decoration:none;font-size:1.25rem}
.hero-top img{width:2.25em;height:2.25em}
.hero-top h1{font-size:clamp(34px,6vw,58px);line-height:1.02;}
.cta{padding:0px 4px 15px 4px}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:80vh;pointer-events:none;background:radial-gradient(600px 300px at 20% 20%, rgba(124,58,237,.25), transparent 60%),
  radial-gradient(600px 300px at 80% 10%, rgba(6,182,212,.25), transparent 60%)}
.hero-inner{position:relative;padding:84px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.lead{color:var(--muted);margin:0 0 20px}
.logo:visited{color:var(--ink)}
/* global link styles */
a{color:var(--brand2);text-decoration:none;transition:color .15s ease,text-decoration-color .15s ease}
a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:visited{color:var(--brand2)}
a:active{opacity:.9}
a:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:4px}
.btn:visited{color:inherit}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700;border:1px solid var(--btn-border)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#0b0f14}
.btn.ghost{color:var(--ink)}
.screen{border-radius:16px;border:1px solid var(--border-4);box-shadow:0 10px 40px rgba(0,0,0,.2);background:linear-gradient(180deg,var(--screen-grad-top),var(--screen-grad-bottom));overflow:hidden}
.hero-img{display:block;width:100%;height:auto;object-fit:cover;border-radius:16px}
section{padding:56px 0}
h2{font-size:22px;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 20px}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--border-2);border-radius:14px;padding:16px}
.card-img{width:100%;aspect-ratio:4 / 3;height:auto;object-fit:cover;border-radius:10px;display:block;margin-bottom:12px;border:1px solid var(--border-2);background:var(--panel-alt)}
.card-img-s{width:100%;aspect-ratio:3 / 4;height:auto;object-fit:cover;border-radius:10px;display:block;margin-bottom:12px;border:1px solid var(--border-2);background:var(--panel-alt)}
.officer-card{display:flex;align-items:flex-start;gap:16px}
.officer-card .card-body{flex:1}
.officer-card .card-img{width:220px;max-width:30%;height:auto;aspect-ratio:auto;margin:0 0 0 16px;flex-shrink:0;align-self:flex-start}
.band{background:var(--panel-alt);border-top:1px solid var(--border-3);border-bottom:1px solid var(--border-3)}
footer{padding:24px 0;color:var(--muted);border-top:1px solid var(--border-3)}
@media (max-width:900px){
  .officer-card{flex-direction:column}
  .officer-card .card-img{max-width:200px;width:50%;margin:12px 0 0 auto}
  .hero-inner{grid-template-columns:1fr;padding:56px 0}
  .list{grid-template-columns:1fr}
  .menu-toggle{display:inline-block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--mobile-menu-bg);border-top:1px solid var(--border-3);flex-direction:column;gap:0}
  .menu a{padding:16px 20px;border-bottom:1px solid var(--border-3)}
  .menu.open{display:flex}
  .menu-toggle,.theme-toggle{display:inline-block}
}

.iframe-content {
  position: relative;
  padding-bottom: 600px;
  height: 0;
  overflow: hidden;
  background-color: #fff;
}
.iframe-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 667px) {
  .iframe-content {
    position: relative;
    padding-bottom: 120%;
    height: 0;
    overflow: hidden;
  }
  .iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }  
}