/* =========================================
   tarotnow.net  Dark Mystic UI (shared)
   - 黒基調・ネオンサイキック
   - レイアウト/DOM/クラスは不変更
   - スマホ最適は維持
========================================= */

:root{
  --bg-0:#05060a; --bg-1:#080a12; --bg-2:#0d0f1a;
  --ink:#e7e9ff; --muted:#9aa0b8;
  --pri:#8e79ff; --pri-2:#b792ff; --aura:#00e0ff;
  --bd:rgba(142,121,255,.35); --soft:rgba(255,255,255,.05); --glass:rgba(20,22,30,.50);
  --header-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Background */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -10%, #161a2a 0%, #0c0f1c 40%, #070912 70%, #05060a 100%),
    radial-gradient(900px 500px at 80% 10%, rgba(0,224,255,.08), transparent 60%),
    radial-gradient(800px 500px at 20% 0%, rgba(185,146,255,.10), transparent 60%),
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.14) 0 1px, transparent 1px),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.12) 0 1px, transparent 1px),
    radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.16) 0 1px, transparent 1px);
  background-color:var(--bg-0);
  background-blend-mode:screen,screen,screen,normal,normal,normal,normal;
}

/* Frame */
.wrap{max-width:980px;margin:0 auto;padding:16px}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 16px;}
h1{margin:0;font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:.02em}

/* 置換: ヘッダーアクション */
.head-actions{
  display:flex; align-items:center;
  gap:10px 10px;
  flex-wrap:wrap;
  overflow-x:visible;
}
.head-actions > *{ flex:0 0 auto; }
.lang-switch{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* 旧バナーは常に非表示（HTML側に残っていても隠す） */
.banner{ display:none !important; margin:0 !important; padding:0 !important; height:0 !important; }

/* Card (glass) */
.card{
  background:var(--glass); border:1px solid var(--soft); border-radius:16px;
  padding:14px 16px; margin:0 0 12px; position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.45),0 10px 26px rgba(142,121,255,.12);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.card.note{color:var(--muted)}
.center{text-align:center}

/* Inputs */
.label{display:inline-block;margin:0 8px 8px 0;color:#cfd3ff;font-weight:700}
.topic-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#topicInput{
  flex:1 1 520px;min-width:280px;max-width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);
  font-size:1rem;background:rgba(7,9,16,.65);color:var(--ink);outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
#topicInput::placeholder{color:rgba(200,205,235,.55)}
#topicInput:focus{border-color:var(--pri);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 0 3px rgba(142,121,255,.22)}

/* Buttons */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;user-select:none;
  border:0;border-radius:12px;padding:11px 16px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--aura) -10%,var(--pri) 45%,var(--pri-2) 110%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 8px 22px rgba(142,121,255,.28),0 4px 12px rgba(0,224,255,.18);
  transition:transform .08s ease,filter .18s ease,box-shadow .18s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:#dfe2ff;border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 6px 16px rgba(0,0,0,.35);
}
.btn.like-btn{padding:8px 12px}
.like-wrap{display:flex;align-items:center;gap:8px}
.like-count{color:var(--pri);font-weight:800}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:920px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:560px){
  .head-actions{ gap:8px 8px; }
  .head-actions .btn, .lang-switch .btn{ padding:10px 12px; font-size:.95rem; }
}

.slot{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;text-align:left;perspective:1000px}
.slot[disabled]{cursor:default}
.caption{margin-top:6px;color:#c8cfff;font-size:.92rem;text-shadow:0 0 8px rgba(142,121,255,.24)}

/* Card images / flip */
.slot img,.chosen-item .thumb img,.face{
  width:90px;height:160px;object-fit:cover;object-position:center;display:block;border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 24px rgba(142,121,255,.24),0 4px 12px rgba(0,224,255,.18);
}
.rev{transform:rotate(180deg);transform-origin:center;transition:transform .25s ease}
.flip{position:relative;width:90px;height:160px;transform-style:preserve-3d;transition:transform 820ms cubic-bezier(.22,1,.36,1);will-change:transform}
.flip.is-flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden}
.face.front{transform:rotateY(180deg)}
.face.front.rev{transform:rotateY(180deg) rotate(180deg)}

/* Loading */
.loading{display:flex;gap:10px;align-items:center;justify-content:center}
.spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--pri);border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 12px rgba(142,121,255,.35)}
.blink{color:#ff6b8b;font-weight:800;animation:blink 1s steps(2,start) infinite;text-shadow:0 0 10px rgba(255,107,139,.4)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{to{visibility:hidden}}

/* Result */
.title{font-weight:900;color:#eae8ff;margin:2px 0 12px;font-size:clamp(1.05rem,2.4vw,1.25rem);text-shadow:0 0 14px rgba(142,121,255,.28),0 0 28px rgba(0,224,255,.14)}
.title.with-icon{display:flex;align-items:center;gap:8px}
.chosen h3{margin:0 0 8px;color:#d6d9ff;font-size:1rem}
.chosen-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:920px){.chosen-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:560px){.chosen-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.chosen-item .cap{margin-top:6px;font-size:.88rem;color:#c8cfff}

.reading{
  margin-top:10px;line-height:1.9;color:#f2f3ff;padding:14px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.35);
  text-wrap:pretty;hyphens:auto;
}
#resultBox .reading{width:100%!important;max-width:none!important;display:block}
.foot{color:var(--muted);font-size:.9rem;margin-top:10px}
.actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* State */
.hidden{display:none!important}
.pop{animation:pop .42s ease-out both}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Slots locked */
.cards.slots-locked .slot{opacity:.55;cursor:not-allowed}
.cards.slots-locked .slot img{
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 6px 14px rgba(142,121,255,.18),0 2px 6px rgba(0,224,255,.10);
}

/* Social */
.social-links{margin-top:40px}
.social-links h4{font-size:18px;margin-bottom:20px;color:#dbe0ff}
.social-buttons{display:flex;gap:15px}
.social-btn{
  width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.40);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.social-btn svg{width:20px;height:20px;fill:#e6e9ff}
.social-btn:hover{
  transform:translateY(-3px);background:linear-gradient(135deg,var(--aura) 0%,var(--pri) 100%);border-color:transparent;
  box-shadow:0 14px 28px rgba(142,121,255,.35),0 8px 18px rgba(0,224,255,.28);
}
.social-btn:hover svg{fill:#fff}

/* Footer */
.footer,.footercopyright,.footer-copyright{color:var(--muted)}
.footer a{color:#cfe6ff;text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Focus visible */
:where(a,button,[role="button"],input,textarea):focus-visible{
  outline:2px solid var(--aura);outline-offset:2px;box-shadow:0 0 0 4px rgba(0,224,255,.22);
}
.like-wrap{ margin-left:25px; }

/* ===== BBS ===== */
body.bbs .wrap{ max-width:980px; }
body.bbs .bbs-list{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
body.bbs .bbs-item{
  background:#121521;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.bbs .bbs-item .meta{ color:var(--muted); font-size:.9rem; margin-bottom:6px; }
body.bbs .bbs-form input[type="text"],
body.bbs .bbs-form input[type="email"],
body.bbs .bbs-form textarea{
  width:100%; max-width:100%;
  background:rgba(7,9,16,.65);
  border:1px solid var(--bd);
  color:var(--ink);
  border-radius:12px;
  padding:12px 14px; font-size:1rem;
}
body.bbs .bbs-form textarea{ min-height:160px; resize:vertical; }
body.bbs form textarea{ width:100%!important; min-height:160px; }
body.bbs ul.bbs-list > li{ background:#121521; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:12px 14px; }
body.bbs .form-row{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
body.bbs #content{
  width:100% !important; min-width:100% !important; flex:1 1 100% !important; box-sizing:border-box; min-height:160px;
}
body.bbs #postBtn{ flex:0 0 auto; height:44px; }
body.bbs .bbs-item .bbs-meta{ display:flex; gap:10px; align-items:center; }
body.bbs .bbs-item .bbs-meta .count{ margin-left:auto; }
body.bbs .bbs-item .bbs-meta .js-like{ margin-left:8px; }

/* =========================
   Shared Global Header
   （重複を1本化・sticky運用）
========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:var(--glass);
  border-bottom:1px solid var(--soft);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.site-header .brand{
  display:flex; align-items:center; gap:8px; color:#fff;
  text-decoration:none; font-weight:900;
}
.site-header .brand img{ width:65px; height:65px; border-radius:8px }

/* menu (desktop) */
.main-menu{display:flex; align-items:center; gap:10px; margin-left:auto;}
.main-menu .menu-item{
  color:#dfe2ff; text-decoration:none; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.main-menu .menu-item:hover{filter:brightness(1.08)}
.menu-right{display:flex; align-items:center; gap:8px; margin-left:10px}
.menu-label{color:#9aa0b8; font-size:.9rem}
.chip{
  padding:8px 12px; border:1px solid rgba(255,255,255,.18); border-radius:999px;
  text-decoration:none; color:#e7e9ff
}
.chip.is-active{
  background:linear-gradient(135deg,var(--aura) -10%,var(--pri) 45%,var(--pri-2) 110%);
  color:#fff; border-color:transparent
}

/* hamburger */
.menu-toggle{
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  display:none; position:relative; cursor:pointer;
}
.menu-toggle span{
  position:absolute; left:50%; width:22px; height:2px; background:#fff; border-radius:2px; transform:translateX(-50%);
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle span:nth-child(1){ top:12px }
.menu-toggle span:nth-child(2){ top:19px }
.menu-toggle span:nth-child(3){ top:26px }
.menu-toggle.active span:nth-child(1){ transform:translateX(-50%) rotate(45deg); top:19px }
.menu-toggle.active span:nth-child(2){ opacity:0 }
.menu-toggle.active span:nth-child(3){ transform:translateX(-50%) rotate(-45deg); top:19px }

/* mobile menu */
@media (max-width: 840px){
  .menu-toggle{display:block}
  .main-menu{
    position:fixed; left:0; right:0; top:56px; z-index:999;
    transform:translateY(-120%); transition:transform .2s ease;
    background:var(--glass); border-bottom:1px solid var(--soft);
    padding:10px 14px; gap:10px; flex-wrap:wrap;
  }
  .main-menu.active{ transform:translateY(0) }
}

/* =========================
   Hero Video（1本のみ表示・中央寄せ）
   ※ 競合を完全に打ち消す
========================= */
.about-hero{
  /* フルブリードにしない：中央寄せの枠 */
  width:100% !important;
  max-width:980px !important;
  margin:6px auto 16px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),
             0 14px 28px rgba(0,0,0,.55),
             0 10px 30px rgba(142,121,255,.20),
             0 4px 12px rgba(0,224,255,.16);
  /* 過去のズレ指定を無効化 */
  transform:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* まず全動画を隠し、個別に表示切替 */
.hero-video{
  display:none !important;
  width:100% !important;
  height:clamp(200px, 42vh, 520px) !important; /* 小さすぎ対策 */
  object-fit:cover !important;
  object-position:center !important;
}

/* PCデフォルト＝PC版のみ表示 */
.hero-video--pc{ display:block !important; }
.hero-video--sp{ display:none !important; }

/* スマホ＝SP版のみ表示 */
@media (max-width: 720px){
  .hero-video{ height:clamp(180px, 44vh, 460px) !important; }
  .hero-video--pc{ display:none !important; }
  .hero-video--sp{ display:block !important; }
}

/* ヘッダー直後の余白最小化（sticky想定） */
.site-header + .about-hero{ margin-top:4px !important; }
/* もし .wrap が先頭に来るページでも詰める */
.site-header + .wrap{ padding-top:8px !important; }
/* ===== TarotNow: HERO full-bleed (強制上書き) ===== */
/* ヘッダー直後の余白を最小化 */
.site-header + .about-hero{ margin-top: 0 !important; }

/* ラッパー内にあっても画面端まで広げる（相性診断と同じ手法） */
.about-hero{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;     /* ←枠・影を完全に外す */
  overflow: hidden !important;
}

/* まず両方隠して、必要な方だけ出す */
.hero-video{
  display: none !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;            /* 比率固定で小さく潰れない */
  object-fit: cover !important;
  object-position: center !important;
}

/* PCはPC動画だけ表示 */
.hero-video--pc{ display: block !important; }
.hero-video--sp{ display: none !important; }

/* スマホはSP動画だけ表示 */
@media (max-width: 720px){
  .hero-video--pc{ display: none !important; }
  .hero-video--sp{ display: block !important; }
}
/* ===== Header (right-end hamburger, non-overlapping) ===== */
:root { --header-h: 56px; }

.site-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; background:var(--glass); border-bottom:1px solid var(--soft);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.site-header .brand{display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:900;}
.site-header .brand img{width:65px; height:65px; border-radius:8px}

/* デスクトップ横並びメニュー */
.main-menu{
  display:none;                  /* モバイルではドロワー */
  align-items:center; gap:10px; margin-left:16px;
}
.menu-item{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:800; font-size:14px; color:#e6f0ff;
  border:1px solid rgba(142,121,255,.25);
  background:linear-gradient(180deg,#101325,#0c0f1c);
  transition:transform .1s ease, box-shadow .2s ease, border-color .2s ease;
}
.menu-item:hover{ transform:translateY(-1px); border-color:rgba(142,121,255,.4); box-shadow:0 6px 18px rgba(142,121,255,.22); }
.menu-item.is-current{ border-color:rgba(142,121,255,.6); }

/* 言語チップは右寄せ（ハンバーガーと別レーンに） */
.menu-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.menu-label{ color:#9aa0b8; font-size:12px; }
.chip{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:28px; padding:0 10px; font-size:12px;
  border-radius:999px; text-decoration:none; color:#dfe2ff; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.chip.is-active{ background:#fff; color:#000; border-color:#fff; }
.chip:hover{ border-color:rgba(255,255,255,.35); }

/* ハンバーガー：常に一番右（menu-right の更に右） */
.menu-toggle{
  flex:0 0 auto;
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  position:relative; cursor:pointer; margin-left:8px;
}
.menu-toggle span{
  position:absolute; left:50%; width:22px; height:2px; background:#fff; border-radius:2px; transform:translateX(-50%);
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle span:nth-child(1){ top:12px }
.menu-toggle span:nth-child(2){ top:19px }
.menu-toggle span:nth-child(3){ top:26px }
.menu-toggle.active span:nth-child(1){ transform:translateX(-50%) rotate(45deg); top:19px }
.menu-toggle.active span:nth-child(2){ opacity:0 }
.menu-toggle.active span:nth-child(3){ transform:translateX(-50%) rotate(-45deg); top:19px }

/* モバイル：ドロワーメニュー。言語チップは隠し、ドロワー内に表示 */
.only-mobile{ display:none; }
@media (max-width: 840px){
  .menu-right{ display:none; }                  /* ← 言語チップを隠すので重ならない */
  .main-menu{
    position:fixed; left:0; right:0; top:var(--header-h); z-index:999;
    display:flex; flex-direction:column; gap:10px; padding:12px 14px;
    transform:translateY(-120%); transition:transform .18s ease;
    background:var(--glass); border-bottom:1px solid var(--soft);
  }
  .main-menu.active{ transform:translateY(0); }
  .only-mobile{ display:block; }
}

/* デスクトップ：横並び。ハンバーガーは非表示 */
@media (min-width: 841px){
  .main-menu{ display:flex; }
  .menu-toggle{ display:none; }
}

/* ヒーロー（ビデオ）とヘッダーの間隔を詰める＆フルブリードは前回の追記を使用 */
.site-header + .about-hero{ margin-top:4px !important; }
/* ===== FIX: ハンバーガー常時表示＋言語と重ならない配置 ===== */

/* 旧ルールの上書き：常に表示 */
.menu-toggle{ display:block !important; }

/* ヘッダーを4カラムのグリッドに（brand | main | lang | hamburger） */
.site-header{
  display:grid !important;
  grid-template-columns: auto 1fr auto auto;
  align-items:center;
  gap:12px;
}

/* 右端固定（言語のさらに右） */
.menu-toggle{
  justify-self:end;
  margin-left:8px;     /* 言語との間隔 */
  z-index:2;
}

/* 言語チップは右寄せだが、ハンバーガー分の余白は自動確保される */
.menu-right{ justify-self:end; display:flex; align-items:center; gap:8px; }

/* モバイルでは言語チップをしまって、ドロワー内の言語リンクを使う */
@media (max-width: 840px){
  .menu-right{ display:none !important; }
  /* ドロワー（.main-menu）はあなたの現CSSのままでOK。activeでスライド表示 */
}

/* デスクトップでもドロワーは横並びで表示してOK。
   以前の「min-widthでmenu-toggleを消す」ルールを無効化 */
@media (min-width: 841px){
  .main-menu{ display:flex !important; }
  .menu-toggle{ display:block !important; } /* ←ここも明示 */
}
/* ====== Hamburger dropdown panel ====== */
.menu-panel[hidden]{ display:none !important; }

.menu-panel{
  position:fixed;
  left:0; right:0;
  /* 下のJSで header 高さに合わせて top を動的に上書きします */
  top: var(--header-h, 56px);
  z-index: 999;

  background: rgba(10,12,18,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.60);

  padding: 10px 12px;
}

.menu-panel ul{
  margin:0; padding:6px 0;
  list-style:none;
  display:flex; flex-direction:column; gap:6px;
}
.menu-panel a{
  display:block;
  padding:12px 14px;
  text-decoration:none;
  color:#e7e9ff; font-weight:800; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.menu-panel a:hover{ filter:brightness(1.08); }

/* デスクトップでは右上にドロップダウン的に */
@media (min-width: 841px){
  .menu-panel{
    left:auto; right:12px; width:320px;
    top: calc(var(--header-h,56px) + 8px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
}

/* スマホでは .main-menu は使わず、このパネルのみ */
@media (max-width: 840px){
  .main-menu{ display:none !important; }
}

/* ヘッダーのレイアウト（brand | main | lang | hamburger） */
.site-header{
  display:grid !important;
  grid-template-columns: auto 1fr auto auto;
  align-items:center; gap:12px;
}

/* ハンバーガーは常時表示＆最右 */
.menu-toggle{ display:block !important; justify-self:end; margin-left:8px; z-index:1000; }

/* 言語チップはハンバーガーの左隣に整列（重なり防止） */
.menu-right{ justify-self:end; display:flex; align-items:center; gap:8px; }

/* Stickyヘッダー直後の余白を最小化（ビデオとの間延び解消） */
.has-fixed-header .wrap{ padding-top:8px !important; }
.site-header + .about-hero{ margin-top:4px !important; }

/* ビデオは1本のみ表示・横幅いっぱい（相性診断と同様） */
.about-hero{ margin:4px 0 12px !important; max-width:none !important; width:100% !important; border-radius:0 !important; box-shadow:none !important; }
.hero-video{ display:none !important; width:100% !important; height:clamp(200px, 42vh, 480px) !important; object-fit:cover; object-position:center; }
.hero-video--pc{ display:block !important; }
.hero-video--sp{ display:none !important; }
@media (max-width:720px){
  .hero-video--pc{ display:none !important; }
  .hero-video--sp{ display:block !important; }
}
/* --- menu panel: language row --- */
.menu-panel .menu-lang{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:8px; padding-top:10px;
}

.menu-panel .chip-row{
  display:flex; gap:8px; flex-wrap:wrap;
}

/* 既存の .chip スタイルが使われます。is-active はJSで付与 */
/* ===== Full-bleed Hero Video ===== */
/* コンテナ幅に関係なくビューポートいっぱい */
.about-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;         /* ヘッダー直下の余白を詰める */
  margin-bottom: 12px;
  border: 0;
  box-shadow: none;
}

/* デフォルトは非表示 → PC/SPで片方だけ表示 */
.hero-video{
  display: none;
  width: 100%;
  height: clamp(220px, 45vh, 540px);  /* 小さく潰れない高さ */
  object-fit: cover;
  object-position: center;
  border: 0;
  box-shadow: none;
}

/* PC表示 */
.hero-video--pc{ display: block; }
/* スマホではSP動画だけ出す */
@media (max-width: 720px){
  .hero-video--pc{ display: none; }
  .hero-video--sp{ display: block; height: clamp(200px, 46vh, 520px); }
}

/* 旧バナーは完全にオフ（もし残っていたら） */
.banner{ display: none !important; }

/* 固定ヘッダー直後の余白を最小化（任意） */
.site-header + .about-hero{ margin-top: 0; }