/* ===== Dark Base (Compatibility準拠) ===== */
:root{
  --bg:#000; --fg:#fff; --fg-soft:#cfcfcf;
  --overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55) 40%, rgba(0,0,0,.7));
  --header-h: 64px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto,
    "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic", Meiryo, sans-serif;
}

/* ===== Header (共通) ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; gap:12px; padding:0 12px 0 16px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.08em; font-size:18px; color:#fff; text-decoration:none; }
.brand img{ display:block; }

/* 右側の並び（言語＋ハンバーガー） */
.header-right{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  min-width: max-content;
}

.hamburger{ width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; }
.hamburger span{ position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:transform .25s ease, opacity .25s ease; }
.hamburger span:nth-child(1){ top:14px; } .hamburger span:nth-child(2){ top:21px; } .hamburger span:nth-child(3){ top:28px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Menu panel */
.menu-panel{
  position:absolute; top:var(--header-h); right:12px; width:min(280px,90vw);
  background: rgba(10,10,10,.92); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; overflow:hidden; z-index:60; box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.menu-panel[hidden]{ display:none; }
.menu-panel ul{ list-style:none; padding:8px; margin:0; }
.menu-panel li a{ display:block; padding:14px 16px; color:#fff; text-decoration:none; border-radius:8px; }
.menu-panel li a:hover{ background: rgba(255,255,255,.06); }

/* Lang switch（常に右寄せ／ハンバーガーの左隣） */
.lang-switch{
  display:flex; gap:8px; align-items:center;
}
.lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:42px; padding:0 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#fff; text-decoration:none; font-size:12px; letter-spacing:.04em;
  background:rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.lang-switch a:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
.lang-switch a.is-active{ background:#fff; color:#000; border-color:#fff; }

/* ===== Top Banner Video (共通) ===== */
.about-hero{
  margin-top: var(--header-h);
  position: relative;
  height: 500px;          /* PCの見え方（1920x500に合わせる） */
  background: #000;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hero-video--pc{ display:block; }
.hero-video--sp{ display:none; }

@media (max-width: 768px){
  .about-hero{ height: 200px; }   /* SPの見え方（768x200） */
  .hero-video--pc{ display:none; }
  .hero-video--sp{ display:block; }
}

/* ===== Personality Quiz ===== */
main{ padding: clamp(22px, 6vw, 40px) 6vw; }
#pquiz-center{ display:flex; justify-content:center; width:100%; }
#pquiz{
  --pz-primary:#59b0ff; --pz-primary-strong:#2a7fe6;
  --pz-text:#e7eef7; --pz-muted:#a8b6c9; --pz-border:rgba(89,176,255,.22);
}
#pquiz .pz-wrap{ width:min(100%,820px); padding:18px 6px 28px; margin:0 auto; }

.pz-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 16px; }
.pz-title{ margin:0; font-size: clamp(1.2rem, 2.5vw, 1.7rem); letter-spacing:.02em; color: var(--pz-text); }
.pz-sub{ color: var(--pz-muted); margin:6px 0 10px; font-size:.95rem; }
.pz-back-site{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  text-decoration:none; background:linear-gradient(90deg,#132033,#0f1a2c);
  color:#d1e5ff; padding:10px 14px; border-radius:12px; border:1px solid var(--pz-border);
  box-shadow: 0 2px 8px rgba(18,40,70,.35);
}

.pz-card{
  background:#0f1720; border-radius:16px; border:1px solid var(--pz-border);
  box-shadow: 0 12px 28px rgba(10,20,35,.35), inset 0 0 .5px rgba(255,255,255,.05);
  padding:18px; margin:0 0 14px;
}
.pz-hidden{ display:none !important; }
.pz-center{ text-align:center; }
.pz-h2{ margin:0 0 10px; color:#cfe4ff; font-size:1.12rem; }

.pz-progress{ height:10px; background:#0d1520; border-radius:999px; overflow:hidden; margin:10px 0 14px; border:1px solid rgba(89,176,255,.12); }
.pz-bar{ height:100%; width:0%; background:linear-gradient(90deg,#6bb6ff,#2a7fe6); transition:width .25s ease; }

.pz-qno{ color:#8aa2c6; font-size:.95rem; }
.pz-qtxt{ font-size: clamp(1.05rem, 3.6vw, 1.28rem); margin:10px 0 18px; line-height:1.6; min-height:3.6em; color:#e7eef7; }

.pz-btns{ display:flex; gap:12px; flex-wrap:wrap; }
button.pz-btn{
  border:none; padding:14px 18px; border-radius:12px; cursor:pointer; font-size:1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform .05s ease, filter .2s ease, background .2s ease;
  touch-action:manipulation; min-height:48px; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; outline:none;
  color:#0f1823;
}
.pz-b1{ background:#cfe4ff; }
.pz-b2{ background:#b7d7ff; }
.pz-b3{ background:#a4ccff; }
.pz-btn:focus-visible{ box-shadow:0 0 0 4px rgba(77,163,255,.28); }
.pz-btn:active{ transform: translateY(1px) scale(.99); filter: brightness(.98); }

.pz-nav{ display:flex; justify-content:space-between; margin-top:14px; gap:10px; flex-wrap:wrap; }
.pz-nav .pz-btn{ background:#d2e7ff; color:#0f1823; }

.pz-spinner{ width:32px;height:32px;border:3px solid #1a2533;border-top-color:var(--pz-primary-strong); border-radius:50%; animation:pzSpin 1s linear infinite; margin:18px auto;}
@keyframes pzSpin{ to{ transform: rotate(360deg); } }
.pz-blink{ color:#ff8686; font-weight:bold; animation: pzBlink 1s steps(2, start) infinite; }
@keyframes pzBlink{ to { visibility: hidden; } }

.pz-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.pz-item{
  background:#0f1720; border-left:6px solid var(--pz-primary);
  padding:14px 16px; border-radius:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  opacity:0; transform: translateY(8px);
}
.pz-item h3{ margin:0 0 8px; font-size:1.05rem; color:#d1e5ff; }
.pz-footnote{ color:#7fa0c9; font-size:.9rem; margin-top:14px; }

/* Ripple */
.pz-ripple{ position:absolute; border-radius:999px; transform:scale(0); opacity:.25; pointer-events:none; mix-blend-mode:screen; background:#fff; animation: pzRipple .45s ease-out forwards; }
@keyframes pzRipple{ to{ transform:scale(12); opacity:0; } }

/* Appear animation */
.pz-card.pz-pop{ animation: pzCardPop .44s ease-out both; }
@keyframes pzCardPop{ from{ opacity:0; transform: translateY(6px) scale(.995); } to{ opacity:1; transform: translateY(0) scale(1); } }
.pz-result-in .pz-item{ animation: pzFadeUp .48s ease-out forwards; animation-delay: .12s; }
.pz-result-in .pz-item:nth-child(2){ animation-delay: .22s; }
.pz-result-in .pz-item:nth-child(3){ animation-delay: .32s; }
.pz-result-in .pz-item:nth-child(4){ animation-delay: .42s; }
.pz-result-in .pz-item:nth-child(5){ animation-delay: .52s; }
@keyframes pzFadeUp{ to{ opacity:1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 520px){
  #pquiz .pz-wrap{ padding:12px 0 22px; }
  .pz-btns{ gap:10px; }
  .pz-btns .pz-btn{ flex:1 1 calc(50% - 10px); }
  .pz-nav{ gap:8px; }
}

/* Footer */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: #0b0f14;
  padding: 18px 16px 26px;
  color: #9db2ce;
}
.footer-content{ max-width: 1200px; margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap: wrap; }
.footer a{ color:#b7d7ff; text-decoration: none; }
.footer a:hover{ text-decoration: underline; }
/* ===== Dark Base (Compatibility準拠) ===== */
:root{
  --bg:#000; --fg:#fff; --fg-soft:#cfcfcf;
  --overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55) 40%, rgba(0,0,0,.7));
  --header-h: 64px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto,
    "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic", Meiryo, sans-serif;
}

/* ===== Header (共通) ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.08em; font-size:18px; color:#fff; text-decoration:none; }
.brand img{ display:block; }

.hamburger{ width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; }
.hamburger span{ position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:transform .25s ease, opacity .25s ease; }
.hamburger span:nth-child(1){ top:14px; } .hamburger span:nth-child(2){ top:21px; } .hamburger span:nth-child(3){ top:28px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Menu panel */
.menu-panel{
  position:absolute; top:var(--header-h); right:12px; width:min(280px,90vw);
  background: rgba(10,10,10,.92); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; overflow:hidden; z-index:60; box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.menu-panel ul{ list-style:none; padding:8px; margin:0; }
.menu-panel li a{ display:block; padding:14px 16px; color:#fff; text-decoration:none; border-radius:8px; }
.menu-panel li a:hover{ background: rgba(255,255,255,.06); }

/* Lang switch */
.lang-switch{
  display:flex; gap:10px; align-items:center; margin-right:8px;
}
.lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:42px; padding:0 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#fff; text-decoration:none; font-size:12px; letter-spacing:.04em;
  background:rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lang-switch a:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
.lang-switch a.is-active{ background:#fff; color:#000; border-color:#fff; }

/* ===== Top Banner Video (共通) ===== */
.about-hero{
  margin-top: var(--header-h);
  position: relative;
  height: 500px;          /* PCの見え方（1920x500に合わせる） */
  background: #000;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hero-video--pc{ display:block; }
.hero-video--sp{ display:none; }

@media (max-width: 768px){
  .about-hero{ height: 200px; }   /* SPの見え方（768x200） */
  .hero-video--pc{ display:none; }
  .hero-video--sp{ display:block; }
}

/* ===== Personality Quiz ===== */
main{ padding: clamp(22px, 6vw, 40px) 6vw; }
#pquiz-center{ display:flex; justify-content:center; width:100%; }
#pquiz{
  --pz-primary:#59b0ff; --pz-primary-strong:#2a7fe6;
  --pz-text:#e7eef7; --pz-muted:#a8b6c9; --pz-border:rgba(89,176,255,.22);
}
#pquiz .pz-wrap{ width:min(100%,820px); padding:18px 6px 28px; margin:0 auto; }

.pz-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 16px; }
.pz-title{ margin:0; font-size: clamp(1.2rem, 2.5vw, 1.7rem); letter-spacing:.02em; color: var(--pz-text); }
.pz-sub{ color: var(--pz-muted); margin:6px 0 10px; font-size:.95rem; }
.pz-back-site{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  text-decoration:none; background:linear-gradient(90deg,#132033,#0f1a2c);
  color:#d1e5ff; padding:10px 14px; border-radius:12px; border:1px solid var(--pz-border);
  box-shadow: 0 2px 8px rgba(18,40,70,.35);
}

.pz-card{
  background:#0f1720; border-radius:16px; border:1px solid var(--pz-border);
  box-shadow: 0 12px 28px rgba(10,20,35,.35), inset 0 0 .5px rgba(255,255,255,.05);
  padding:18px; margin:0 0 14px;
}
.pz-hidden{ display:none !important; }
.pz-center{ text-align:center; }
.pz-h2{ margin:0 0 10px; color:#cfe4ff; font-size:1.12rem; }

.pz-progress{ height:10px; background:#0d1520; border-radius:999px; overflow:hidden; margin:10px 0 14px; border:1px solid rgba(89,176,255,.12); }
.pz-bar{ height:100%; width:0%; background:linear-gradient(90deg,#6bb6ff,#2a7fe6); transition:width .25s ease; }

.pz-qno{ color:#8aa2c6; font-size:.95rem; }
.pz-qtxt{ font-size: clamp(1.05rem, 3.6vw, 1.28rem); margin:10px 0 18px; line-height:1.6; min-height:3.6em; color:#e7eef7; }

.pz-btns{ display:flex; gap:12px; flex-wrap:wrap; }
button.pz-btn{
  border:none; padding:14px 18px; border-radius:12px; cursor:pointer; font-size:1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform .05s ease, filter .2s ease, background .2s ease;
  touch-action:manipulation; min-height:48px; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; outline:none;
  color:#0f1823;
}
.pz-b1{ background:#cfe4ff; }
.pz-b2{ background:#b7d7ff; }
.pz-b3{ background:#a4ccff; }
.pz-btn:focus-visible{ box-shadow:0 0 0 4px rgba(77,163,255,.28); }
.pz-btn:active{ transform: translateY(1px) scale(.99); filter: brightness(.98); }

.pz-nav{ display:flex; justify-content:space-between; margin-top:14px; gap:10px; flex-wrap:wrap; }
.pz-nav .pz-btn{ background:#d2e7ff; color:#0f1823; }

.pz-spinner{ width:32px;height:32px;border:3px solid #1a2533;border-top-color:var(--pz-primary-strong); border-radius:50%; animation:pzSpin 1s linear infinite; margin:18px auto;}
@keyframes pzSpin{ to{ transform: rotate(360deg); } }
.pz-blink{ color:#ff8686; font-weight:bold; animation: pzBlink 1s steps(2, start) infinite; }
@keyframes pzBlink{ to { visibility: hidden; } }

.pz-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.pz-item{
  background:#0f1720; border-left:6px solid var(--pz-primary);
  padding:14px 16px; border-radius:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  opacity:0; transform: translateY(8px);
}
.pz-item h3{ margin:0 0 8px; font-size:1.05rem; color:#d1e5ff; }
.pz-footnote{ color:#7fa0c9; font-size:.9rem; margin-top:14px; }

/* Ripple */
.pz-ripple{ position:absolute; border-radius:999px; transform:scale(0); opacity:.25; pointer-events:none; mix-blend-mode:screen; background:#fff; animation: pzRipple .45s ease-out forwards; }
@keyframes pzRipple{ to{ transform:scale(12); opacity:0; } }

/* Appear animation */
.pz-card.pz-pop{ animation: pzCardPop .44s ease-out both; }
@keyframes pzCardPop{ from{ opacity:0; transform: translateY(6px) scale(.995); } to{ opacity:1; transform: translateY(0) scale(1); } }
.pz-result-in .pz-item{ animation: pzFadeUp .48s ease-out forwards; animation-delay: .12s; }
.pz-result-in .pz-item:nth-child(2){ animation-delay: .22s; }
.pz-result-in .pz-item:nth-child(3){ animation-delay: .32s; }
.pz-result-in .pz-item:nth-child(4){ animation-delay: .42s; }
.pz-result-in .pz-item:nth-child(5){ animation-delay: .52s; }
@keyframes pzFadeUp{ to{ opacity:1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 520px){
  #pquiz .pz-wrap{ padding:12px 0 22px; }
  .pz-btns{ gap:10px; }
  .pz-btns .pz-btn{ flex:1 1 calc(50% - 10px); }
  .pz-nav{ gap:8px; }
}

/* Footer */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: #0b0f14;
  padding: 18px 16px 26px;
  color: #9db2ce;
}
.footer-content{ max-width: 1200px; margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap: wrap; }
.footer a{ color:#b7d7ff; text-decoration: none; }
.footer a:hover{ text-decoration: underline; }