/* === Mobile Drawer tweaks (override) === */
@media (max-width: 900px){
  :root{
    --drawer-w: 86vw;
    --drawer-max: 380px;
    --brand: #ff0033;
    --ink:   #111;
  }

  /* ▼ 黒いボーダーと帯を削除し、柔らかい影だけにする */
  .site-nav{
    position: fixed; top:0; right:0; bottom:0;
    width: var(--drawer-w); max-width: var(--drawer-max);
    background:#fff; padding:0; overflow:auto;
    transform: translateX(100%); transition: transform .22s ease;
    z-index: 1200;
    border-left: none;
    box-shadow: -18px 0 32px rgba(0,0,0,.18);
  }
  body.nav-open .site-nav{ transform: translateX(0); }

  /* ドロワーヘッダ */
  .drawer-head{
    position: sticky; top:0; z-index:2;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px 16px;
    padding-right: 64px;
    background: var(--brand); color:#fff;
  }
  .drawer-head span{
    font-weight:800; letter-spacing:.02em;
    font-size:18px; line-height:36px;
  }

  .drawer-close{
    position: absolute; right:12px; top: calc(8px + env(safe-area-inset-top));
    width:40px; height:40px;
    border:3px solid var(--ink); border-radius:12px;
    background:#fff; color:var(--ink);
    font-size:22px; line-height:1; display:grid; place-items:center;
    box-shadow:0 2px 0 var(--ink);
  }

  /* メニュー項目 */
  .drawer-list{ list-style:none; margin:14px; padding:0; display:flex; flex-direction:column; gap:12px; }
  .site-nav .drawer-list a{
    background:#fff !important; color:var(--ink);
    border:3px solid var(--ink); border-radius:14px;
    padding:14px 16px; text-decoration:none; font-weight:800; font-size:18px;
    box-shadow:0 4px 0 var(--ink); display:flex; align-items:center; justify-content:space-between;
    touch-action: manipulation;
  }
  .site-nav .drawer-list a::after{ content:"›"; font-size:22px; line-height:1; }
  .site-nav .drawer-list a:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--ink); }

  /* 背景の暗幕 */
  .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(1px); z-index:1100; display:none; }
  body.nav-open .nav-backdrop{ display:block; }

  /* ▼ ハンバーガー */
  header .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:50px; height:50px; border:3px solid var(--ink);
    background:#fff; border-radius:12px; box-shadow:0 3px 0 var(--ink);
    z-index:1300;
  }
  header .menu-toggle .bar{
    width:28px; height:4px; background:var(--ink);
    margin:4px 0; border-radius:2px; transition:transform .2s, opacity .2s;
  }
  body.nav-open .menu-toggle .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.nav-open .menu-toggle .bar:nth-child(2){ opacity:0; }
  body.nav-open .menu-toggle .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* ===== スマホ時のヘッダー・ロゴを特大に ===== */
  /* ヘッダーを1行に収めつつ高さ確保 */
  .site-header{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:10px !important; padding:10px 12px !important; box-sizing:border-box !important;
    width:100% !important; max-width:100vw !important;
  }

  .site-header .logo-area{ display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important; }
  .site-header .logo-area img{
    width:88px !important; height:auto !important;        /* ← 54px から大幅UP */
    flex:0 0 auto !important;
  }
  .site-header .logo-area span{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
    font-size:24px !important;        /* ← 16px → 24px */
    font-weight:900 !important; line-height:1.15 !important;
    white-space:normal !important; overflow:hidden !important;
    max-width:62vw !important;
  }

  /* ハンバーガーの最終位置 */
  .menu-toggle{
    position:static !important; margin-left:auto !important; flex:0 0 auto !important;
  }
  .menu-toggle .bar{ width:26px !important; height:3px !important; }

  /* ドロワー閉時の横スクロール対策 */
  .site-nav{ transform: translateX(110%) !important; box-shadow: none !important; }
  body.nav-open .site-nav{ transform: translateX(0) !important; box-shadow: -18px 0 32px rgba(0,0,0,.18) !important; }

  /* ===== ヒーロー内「アフレコ大喜利」を特大に ===== */
  .fv-kicker{
    font-size: 26px !important;        /* しっかり大きく */
    font-weight: 900 !important;
    display:inline-block !important;
    padding:8px 14px !important;
    background:#fff !important;
    border:3px solid var(--fv-ink) !important;
    border-radius:10px !important;
    -webkit-text-stroke:0 !important;
  }

  /* ヒーロー上の余白を拡張（ヘッダーが高くなる分） */
  .fv-hero{ padding-top: 168px !important; }
}

/* ===== Desktop (>=901px) reset & layout for header nav ===== */
@media (min-width: 901px){
  .site-nav{
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
    margin-left: auto;
  }
  .nav-backdrop{ display:none !important; }
  .drawer-head, .drawer-foot, .drawer-close{ display:none !important; }
  .menu-toggle{ display:none !important; }

  .drawer-list{
    display:flex !important; flex-direction:row !important; align-items:center;
    gap:12px; margin:0; padding:0; list-style:none;
  }
  .drawer-list li{ margin:0; }
  .drawer-foot{ color:#000; }

  .site-nav .drawer-list a{
    background:#000 !important; color:#fff !important;
    border:0 !important; box-shadow:none !important; border-radius:9999px;
    padding:8px 14px; font-weight:700; font-size:14px; text-decoration:none; display:inline-flex; align-items:center;
  }
  .site-nav .drawer-list a::after{ content:"" !important; }
  .site-nav .drawer-list a:hover{ opacity:.85; }
}

/* ===== Fukidashi Footer (namespaced) ===== */
.fd-footer{ background:#111; color:#fff; margin-top:40px; }

.fd-footer__nav{
  max-width:1100px; margin:0 auto; padding:28px 16px;
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
.fd-footer a{
  background:none !important; color:#eee !important; text-decoration:none !important;
  padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; display:inline-block;
}
.fd-footer a:hover{ opacity:.85; }
.fd-footer__col{ list-style:none; margin:0; padding:0; }
.fd-footer__title{ font-size:14px; font-weight:700; color:#ffdbdb; margin:0 0 8px; }
.fd-footer__col li{ margin:8px 0; }
.fd-footer__copy{
  border-top:1px solid rgba(255,255,255,.15);
  text-align:center; padding:14px 16px; font-size:12px; color:#bbb;
}

/* モバイル1カラム */
@media (max-width: 900px){
  .fd-footer__nav{ grid-template-columns: 1fr; }
}

/* 超狭幅（〜360px）：微調整 */
@media (max-width: 360px){
  .site-header .logo-area img{ width: 80px !important; }   /* 88px→80pxに抑えてレイアウトを保つ */
  .site-header .logo-area span{ font-size: 20px !important; }
  .fv-hero{ padding-top: 160px !important; }
}

/* ===== SP only: 横スクロール根絶オーバーライド ===== */
@media (max-width: 900px){
  /* まずは根本対策 */
  html, body{
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* コンテナ類は必ずビューポート内に収める */
  .site-root, .page, .container, .contents, .wrapper,
  section, .section, .fv-hero, .fv-wrap, .fv-visual{
    max-width: 100% !important;
  }

  /* 回転やボックスシャドウでの“はみ出し”をクリップ */
  .fv-hero, .fv-visual{
    overflow: clip !important;   /* Safari対策に overflow:hidden; でもOK */
    overflow-x: hidden !important;
  }

  /* 画像/埋め込みのオーバーフロー禁止 */
  img, video, canvas, svg, iframe{
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ヒーロー画像の微はみ出し(回転)を吸収 */
  .fv-scene{
    max-width: calc(100% - 2px) !important;
    transform-origin: center !important;
  }

  /* グリッド/カードの最小幅ではみ出さないように */
  .video-list, .card-list, .post-list, .grid, .items, ul, ol{
    overflow: hidden !important;
  }
  .video-list > *, .card-list > *, .grid > *, .items > *{
    min-width: 0 !important;
  }

  /* 100vw指定の要素がいる場合の“100vwトラップ”回避 */
  .w-100vw, [class*="100vw"], [style*="100vw"]{
    width: 100% !important;
  }

  /* 左右の安全インセット（端末の安全領域を考慮） */
  section, .section{
    padding-left:  max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  /* モバイルドロワーが閉じている時に横幅へ影響しないように */
  .site-nav{
    transform: translateX(110%) !important;
    box-shadow: none !important;
  }
  body.nav-open .site-nav{
    transform: translateX(0) !important;
  }
}