/*
 Theme Name: Twenty Seventeen Child
 Template: twentyseventeen
 Version: 2025.12.20
*/


/* ================================
   TOP 最終固定レイアウト（締切用）
   対象: page-id-46
   ※このブロックだけ差し替え
================================ */
/* =================================================
   ① BASE / DESIGN RULE（前半）
   ─ 何度見ても意味が分かる設計ルール
================================================= */

/* 共通色 */
:root{
  --accent-hover: rgba(255,255,255,0.70);
}

/* フォント */
body{
  font-family: "Shippori Mincho B1", serif;
}



/* TOPだけ：背景色を確実に出す（blob が白に負ける事故防止） */
body.page-id-46{
  background: #191970 !important;
}

/* TOPだけ：中の白背景を殺して blob を見せる */
body.page-id-46 .site-content-contain,
body.page-id-46 .site-content,
body.page-id-46 #primary,
body.page-id-46 #main{
  background: transparent !important;
}

/* 前景レイヤーを必ず上に */
body.page-id-46 #content{
  position: relative;
  z-index: 1;
}


/* =========================
   TOP：SP 最小調整（壊さない）
========================= */
@media (max-width: 768px){

  /* ① ヘッダ高さぶんだけ上に余白（ヘッダが被ったらここだけ増やす） */
  body.page-id-46 .hero-wrap{
    padding-top: 56px !important; /* ←ヘッダで被るなら 64 / 72 に上げる */
  }

  /* ② 画像サイズ（ここだけで調整） */
  /*  body.page-id-46 .hero-main img{
    width: 75vw !important;
    max-width: 75vw !important;
    height: auto !important;
  } */

  /* ③ NEWSを初期表示で見せたくない（少し下へ） */
  body.page-id-46 .scroll-section{
    margin-top: 110vh !important; /* ←見えてたら 120vh、下げすぎたら 105vh */
  }

}

/* ----------------
   HEADER（固定 + 余白を変数で管理）
---------------- */
:root{ --header-h: 168px; }  /* 56×3 */

/* ==================================================
   HEADER 基盤（全ページ共通で使い回し）
   - 固定ヘッダー（管理バー対応）
   - 高さは --header-h で一元管理
   - 中身は 800px でセンター
   - 左：homeアイコン / 右：メニュー
   - 装飾なし、hoverのみ色変更
================================================== */

/* 高さはここだけ触る */
:root{
  --header-h: 168px;   /* 56×3（通常に戻すなら 56px） */
  --adminbar-h: 0px;
}

body.admin-bar{ --adminbar-h: 32px; }
@media (max-width:782px){
  body.admin-bar{ --adminbar-h: 46px; }
}

/* 外枠：固定（全ページ共通） */
.site-header.custom-site-header{
  position: fixed !important;
  top: var(--adminbar-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* 黒帯（外側） */
.site-header.custom-site-header .navigation-top{
  background: #000 !important;
  width: 100% !important;
}

/* 高さを確実に作る（外側と内側両方に） */
.site-header.custom-site-header .navigation-top,
.site-header.custom-site-header .navigation-top .wrap-inner{
  min-height: var(--header-h) !important;
  display: flex !important;
  align-items: center !important;
}

/* 中身：800pxセンター（これが“使い回しの核”） */
.site-header.custom-site-header .navigation-top .wrap-inner{
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;

  justify-content: space-between !important;
  gap: 16px !important;
}

/* 左：戻る（home）アイコン */
.site-header.custom-site-header .navigation-top .wrap-inner > a.home-icon-link{
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

/* 右：メニュー */
.site-header.custom-site-header .navigation-top nav.main-navigation{
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.site-header.custom-site-header .navigation-top nav.main-navigation > ul#top-menu{
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  white-space: nowrap !important;

  /* “広め間隔”はページ幅に応じて可変で安全 */
  gap: clamp(24px, 5vw, 72px) !important;
}

.site-header.custom-site-header .navigation-top nav.main-navigation > ul#top-menu > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 文字：太ゴシック + 装飾なし + hoverだけ色 */
.site-header.custom-site-header .navigation-top a{
  color: #D3D3D3 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
  font-weight: 700 !important;
}
.site-header.custom-site-header .navigation-top a:hover,
.site-header.custom-site-header .navigation-top a:focus{
  color: #808080 !important;
}

/* コンテンツ押し下げ（全ページ共通） */
.site-content-contain,
.site-content{
  padding-top: calc(var(--adminbar-h) + var(--header-h)) !important;
}

/* SP：バーガー展開後 背景60%透過（全ページ共通でOK） */
@media (max-width: 768px){
  .site-header.custom-site-header .navigation-top .main-navigation.toggled-on{
    background: rgba(0,0,0,0.60) !important;
  }
}


  /* メニュー項目が読みやすいように（必要なら） */
  .navigation-top .main-navigation.toggled-on a{
    color: #D3D3D3 !important;
  }
}
/* =========================
   TOPメニュー：左アイコン／右メニュー
========================= */

/* ナビ全体をフレックス化 */
.navigation-top .main-navigation{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* ← 左右分離 */
}

/* 左：TOPに戻るアイコン（先頭に入っている前提） */
.navigation-top .main-navigation > .menu-toggle,
.navigation-top .main-navigation > a,
.navigation-top .main-navigation > .home-link{
  margin-right: auto !important;  /* ← 左に寄せ切る */
  display: flex !important;
  align-items: center !important;
}

/* 右：メニュー文字 */
.navigation-top .menu-main-menu-container,
.navigation-top ul#top-menu{
  margin-left: auto !important;   /* ← 右に寄せ切る */
  display: flex !important;
  align-items: center !important;
}

/* メニュー文字の横並び＆間隔 */
.navigation-top ul#top-menu{
  gap: 18px !important;
}

/* 文字・アイコン共通（太ゴシック＋色） */
.navigation-top,
.navigation-top a{
  color: #D3D3D3 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
  font-weight: 700 !important;
}

/* ===== SP：バーガー展開後 60% 透過（再保証） ===== */
@media (max-width: 768px){
  .navigation-top .main-navigation.toggled-on{
    background: rgba(0,0,0,0.60) !important;
  }
}
/* =========================
   TOPメニュー：800px内で左右揃え（PC/SP共通）
========================= */

/* ナビの中身を800pxに固定して中央へ */
.navigation-top .wrap{
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;   /* 左右の安全余白 */
}

/* 左（アイコン）／右（メニュー）を分離 */
.navigation-top .main-navigation{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
}

/* 右側メニュー（ul）を横並び＋間隔を4倍に */
.navigation-top ul#top-menu{
  display:flex !important;
  align-items:center !important;
  gap: 72px !important;         /* ← “今の4倍”相当。必要なら調整 */
  margin: 0 !important;
  padding: 0 !important;
}

/* 文字装飾不要：下線・枠などを消す */
.navigation-top a{
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ホバー色だけ指定 */
.navigation-top a:hover,
.navigation-top a:focus{
  color: #808080 !important;
}

/* =========================
   HEADER：高さ正常化 + 800px内整列 + 丸(・)消す
========================= */

/* 黒帯の高さを調整 */
.navigation-top{
 width: 100%;
}
.navigation-top .main-navigation{
 min-height: 50px !important;
}


/* 中身は天地センターを維持 */
.navigation-top .main-navigation{
  display: flex !important;
  align-items: right !important;
  justify-content: space-between !important;
}


/* 800px内で左右揃え（左右16pxの安全余白） */
.navigation-top .wrap{
  max-width: 800px !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ヘッダーの高さを固定して天地センターに */
.navigation-top .main-navigation{
  min-height: 56px !important;         /* ←黒帯の高さ（必要なら 52〜60で調整） */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 右メニュー：はみ出さない“可変gap”にする（4倍指定の代替） */
.navigation-top ul#top-menu{
  display: flex !important;
  align-items: center !important;
  gap: clamp(14px, 3.6vw, 48px) !important;  /* ←狭い時は詰まり、広い時は広がる */
  margin: 0 !important;
  padding: 0 !important;
}

/* 先頭の丸(・)を完全に消す */
.navigation-top ul#top-menu,
.navigation-top ul#top-menu li{
  list-style: none !important;
}

/* 文字装飾なし + hover色 */
.navigation-top a{
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}
.navigation-top a:hover,
.navigation-top a:focus{
  color: #808080 !important;
}

/* SP：バーガー展開後の背景 60%透過（維持） */
@media (max-width: 768px){
  .navigation-top .main-navigation.toggled-on{
    background: rgba(0,0,0,0.60) !important;
  }
}
/* =========================
   HEADER：800pxセンター + 左アイコン + 右メニュー（PC）
========================= */
@media (min-width: 769px){

  /* 800pxの箱を作ってセンターに置く（この要素が本体） */
  body.home #masthead .header-wrap-inner{
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  /* 戻るアイコン：絶対に表示（消えてたら復活） */
  body.home #masthead a.home-icon-link{
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  /* ナビ本体は残り幅 */
  body.home #masthead nav.main-navigation{
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* メニューulを右寄せ */
  body.home #masthead nav.main-navigation > ul#top-menu{
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    /* 800pxからはみ出さない“可変の広いアキ” */
    gap: clamp(24px, 5vw, 72px) !important;
  }

  /* 先頭の丸(・)を消す */
  body.home #masthead nav.main-navigation > ul#top-menu,
  body.home #masthead nav.main-navigation > ul#top-menu > li{
    list-style: none !important;
  }
}





/* ----------------
   HERO（画像は fixed）
---------------- */
body.page-id-46 .hero-wrap{
  position: relative;
  height: 100vh;     /* 1画面ぶん確保 → NEWS を画面外から開始 */
  z-index: 10;
}

body.page-id-46 .hero-main{
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  overflow: visible;
}

body.page-id-46 .hero-main img{
  width: 420px;
  max-width: 92vw;
  height: auto;
  display: block;
}

/* ガラスBOX */
body.page-id-46 .glass-box{
  background: rgba(255,255,255,.45);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1.75;
  font-size: 14px;
}

body.page-id-46 .scroll-section{
  margin-top: 120vh !important; /* 110→120 に上げる */
}
/* NEWS：最初は透明＋少し下 */
body.page-id-46 .scroll-section .glass-box{
  opacity: 0.9 !important;
  transform: translateY(12px) !important;
  transition: opacity .6s ease, transform .6s ease !important;
  will-change: opacity, transform;
}


/* ----------------
   SP
---------------- */
@media (max-width: 768px){
  body.page-id-46 .glass-box{ font-size: 13px; padding: 16px; }
}


/* ================================
   TOP(page-id-46) 背景 blob アニメ（復旧版）
   ※transform衝突しない / 3つ全部動く
================================ */

/* 回転アニメーション（そのまま） */
@keyframes blob_rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 背景レイヤー（TOPだけ） */
body.page-id-46 .bg-blobs {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;               /* ← -5やめる（落ち事故防止） */
}

/* 前景を必ず上に（TOPだけ） */
body.page-id-46 #content{
  position: relative;
  z-index: 1;
}

/* 各 blob 共通（TOPだけ） */
body.page-id-46 .blob {
  position: absolute;
  left: 50%;
  top: 50%;
  animation-name: blob_rotate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 丸の中身（TOPだけ） */
body.page-id-46 .blob::before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  transform: translate(-50%, -50%);
}

/* ===== 各 blob ===== */

/* 青 */
body.page-id-46 .blob:nth-child(1) { animation-duration: 28000ms; }
body.page-id-46 .blob:nth-child(1)::before {
  left: -150px;
  top: 150px;
  width: 350px;
  height: 350px;
  background: radial-gradient(rgb(178 195 248) 0%,
	  rgba(68, 102, 206, 0) 70%);

}

/* 水色 */
body.page-id-46 .blob:nth-child(2) {
  animation-duration: 25000ms;
  animation-direction: reverse;
}
body.page-id-46 .blob:nth-child(2)::before {
  left: 250px;
  top: -250px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    rgb(206, 255, 252) 0%,
    rgba(206, 255, 252, 0) 70%
  );
}

/* 白っぽい水色 */
body.page-id-46 .blob:nth-child(3) { animation-duration: 21000ms; }
body.page-id-46 .blob:nth-child(3)::before {
  left: 550px;
  top: 300px;
  width: 700px;
  height: 700px;
  background: radial-gradient(
    rgba(193, 26, 81, 0.5) 0%,
    rgba(193, 26, 81, 0) 70%
  );
}

/* レスポンシブ（blob 縮小） */
@media (max-width: 767px) {
  body.page-id-46 .blob:nth-child(1)::before {
    left: -50px;
    top: 50px;
    width: 250px;
    height: 250px;
  }
  body.page-id-46 .blob:nth-child(2)::before {
    left: 150px;
    top: -150px;
    width: 350px;
    height: 350px;
  }
  body.page-id-46 .blob:nth-child(3)::before {
    left: 450px;
    top: 150px;
    width: 500px;
    height: 500px;
  }
}
/* TOPだけ：blob を見えやすくする（まずこれ） */
body.page-id-46 .blob::before{
  opacity: 0.65 !important;   /* 0.4 → 0.65 */
}
@media (max-width: 768px){

  /* NEWSは“画像の上に重なる”運用なので位置は触らない */

/* ===============================
   TOP（SPだけ）：画像の上にNEWSが来る＋最初は画面外
   対象: page-id-46
=============================== */
@media (max-width: 768px){

  /* ① 1画面ぶん確保（NEWSを最初は画面外スタートにする） */
  body.page-id-46 .hero-wrap{
    position: relative;
    height: 100vh;
    z-index: 1;
  }

  /* ② 画像は固定（下のNEWSが“上にかぶさる”土台） */
  body.page-id-46 .hero-main{
    position: fixed !important;
    top: 64px;                 /* ヘッダに被るなら数値だけ上下調整 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    width: 100%;
    pointer-events: none;
  }

  /* ③ 画像サイズ（今の 75vw を維持） */
  /*  body.page-id-46 .hero-main img{
    width: 75vw !important;
    max-width: 75vw !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  } */

  /* ④ NEWSは画像より前面（＝画像の上に来る） */
  body.page-id-46 .scroll-section{
    position: relative !important;
    z-index: 30 !important;
  }

@media (max-width: 768px){
  body.top-arrow-detached > .scroll-arrow-sp{
    position: fixed !important;
    left: 50% !important;
    bottom: -100px !important;  /* ←テスト：必ず画面外へ落ちるはず */
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
  }
}
/* === TOP SP : ARROW BACK TO FIXED (FINAL) === */
@media (max-width: 768px){

  body.home .hero-wrap .scroll-arrow-sp,
  body[class*="page-id-46"] .hero-wrap .scroll-arrow-sp{
    position: sticky !important;              /* ← スクロールしても同じ位置に残る */
    top: calc(100vh - 120px) !important;      /* ← 天地調整はここ */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    display: flex !important;
    justify-content: center !important;       /* ← センター揃え */
    margin: 0 !important;
    width: auto !important;

    z-index: 50 !important;
    pointer-events: none !important;
  }
}
/* === TOP SP : ARROW HARD FIX (NO TOUCH) === */
@media (max-width: 768px){

  /* TOPだけ */
  body.home .scroll-arrow-sp,
  body[class*="page-id-46"] .scroll-arrow-sp{
    position: fixed !important;
    left: 50% !important;
    bottom: 22px !important;              /* 天地はここ */
    transform: translateX(-50%) !important;

    z-index: 9999 !important;

    /* これが重要：長押し・タッチで掴めないようにする */
    pointer-events: none !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* SVG側も完全にタッチ無効（iOS対策） */
  body.home .scroll-arrow-sp svg,
  body[class*="page-id-46"] .scroll-arrow-sp svg,
  body.home .scroll-arrow-sp svg * ,
  body[class*="page-id-46"] .scroll-arrow-sp svg *{
    pointer-events: none !important;
    touch-action: none !important;
  }
}

@media (max-width: 768px){
  .scroll-arrow-sp.is-hidden{
    opacity: 0 !important;
    transition: opacity .25s ease !important;
  }
}




/* =========================
   TOP：NEWSガラス効果
   PCは一切触らない / SPだけ上書き
========================= */

/* PC（769px以上）：明示的に何もしない（保険） */
@media (min-width: 769px){
  body.page-id-46 .scroll-section .glass-box{
    background: inherit;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
  }
}






/* ==================================================
   SP：ヘッダー黒帯45px＋右端バーガー＋下に展開（70%透過）
================================================== */
@media (max-width: 768px){

  /* 1) 黒帯（navigation-top）を 45px に */
  #masthead .navigation-top{
    min-height: 45px !important;
    height: 45px !important;
  }

  /* 中身も45pxに揃える（縦センター） */
  #masthead .navigation-top .wrap-inner{
    min-height: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* 2) チェックボックスは機能だけ残して不可視 */
  #masthead input#nav-toggle{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* 3) 右端：バーガー（三本線） */
  #masthead label.nav-toggle-label[for="nav-toggle"]{
    width: 28px !important;
    height: 20px !important;
    display: inline-block !important;
    cursor: pointer !important;

    /* 右端の安全余白 */
    margin-right: 16px !important;

    /* 文字を消す */
    font-size: 0 !important;
    line-height: 0 !important;

    /* 三本線（色はグレー） */
    color: #D3D3D3 !important;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* 4) 通常時：navが“帯を広げる”のを止める（絶対配置で重ねて高さ0扱い） */
  #masthead nav.main-navigation.menu-top-container{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 45px !important;      /* 黒帯の直下 */
    z-index: 9999 !important;

    /* 通常は見えない＆高さに影響させない */
    display: block !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 5) 通常時：メニューは非表示 */
  #masthead nav.main-navigation.menu-top-container > ul#top-menu{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 6) 開いた時：下に展開（背景70%透過・文字グレー） */
  #masthead input#nav-toggle:checked ~ nav.main-navigation.menu-top-container{
    height: auto !important;
    overflow: visible !important;
  }

  #masthead input#nav-toggle:checked ~ nav.main-navigation.menu-top-container > ul#top-menu{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;

    padding: 16px !important;
    background: rgba(0,0,0,0.70) !important;

    color: #D3D3D3 !important;
  }

  /* リンク色もグレー、ホバーは少し濃く */
  #masthead nav.main-navigation.menu-top-container a{
    color: #D3D3D3 !important;
    text-decoration: none !important;
  }
  #masthead nav.main-navigation.menu-top-container a:hover{
    color: #808080 !important;
  }
}

 /* ==================================================
   SP：バーガー（三本線→X）安定版
================================================== */
@media (max-width: 768px){

  /* バーガーの基準（右端固定のため） */
  #masthead .navigation-top{
    position: relative !important;
    min-height: 45px !important;
    height: 45px !important;
  }

  /* checkboxは機能だけ残して不可視（白い四角も消える） */
  #masthead input#nav-toggle{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* 右端：バーガー本体 */
  #masthead label.nav-toggle-label[for="nav-toggle"]{
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 28px !important;
    height: 20px !important;
    display: block !important;
    cursor: pointer !important;

    /* 文字があれば消す */
    font-size: 0 !important;
    line-height: 0 !important;

    /* 中央線（これが一番安定） */
    background: linear-gradient(#D3D3D3,#D3D3D3) center / 100% 2px no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* 上下線 */
  #masthead label.nav-toggle-label[for="nav-toggle"]::before,
  #masthead label.nav-toggle-label[for="nav-toggle"]::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: #D3D3D3 !important;
    transition: transform .2s ease, top .2s ease, bottom .2s ease !important;
  }
  #masthead label.nav-toggle-label[for="nav-toggle"]::before{ top: 0 !important; }
  #masthead label.nav-toggle-label[for="nav-toggle"]::after{ bottom: 0 !important; }

  /* 開いたら：中央線を消して X に */
  #masthead input#nav-toggle:checked + label.nav-toggle-label[for="nav-toggle"]{
    background-size: 0 0 !important; /* 中央線を消す */
  }
  #masthead input#nav-toggle:checked + label.nav-toggle-label[for="nav-toggle"]::before{
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }
  #masthead input#nav-toggle:checked + label.nav-toggle-label[for="nav-toggle"]::after{
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(-45deg) !important;
  }

  /* 展開メニュー：白70%透過＋文字グレー（必要なら） */
  #masthead nav.main-navigation.menu-top-container{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 45px !important;
    z-index: 9999 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  #masthead nav.main-navigation.menu-top-container > ul#top-menu{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #masthead input#nav-toggle:checked ~ nav.main-navigation.menu-top-container{
    height: auto !important;
    overflow: visible !important;
  }
  #masthead input#nav-toggle:checked ~ nav.main-navigation.menu-top-container > ul#top-menu{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 16px !important;
    background: rgba(255,255,255,0.70) !important;
  }
  #masthead nav.main-navigation.menu-top-container a{
    color: #808080 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }
}

/* =========================
   固定ページ：entry-title を中央寄せ
========================= */
body.page:not(.home) .entry-header .entry-title{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;

/* =========================
   SP：ヘッダー由来の横スクロールを止める
========================= */
@media (max-width: 768px){

  /* ヘッダー周りは横にはみ出させない */
  header#masthead,
  .site-header,
  .custom-site-header,
  .navigation-top{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* navコンテナが横に伸びるのを止める */
  .navigation-top .wrap,
  .navigation-top nav,
  .navigation-top .main-navigation{
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

/* =========================
   SHOP 固定ページ
========================= */

.shop-page{
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  text-align: center;
}

/* 黒い中央エリア */
.shop-hero{
  position: relative;
  height: 320px;
  background: #191970;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 32px;
}

/* blobレイヤ */
.shop-blob{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* blob本体（TOPと同思想） */
.shop-blob .blob{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 90vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(24px);
  opacity: .85;
}

.blob--1{
  background: radial-gradient(circle,
    rgba(80,140,200,.55) 0%,
    rgba(80,140,200,.15) 60%,
    transparent 75%);
  animation: blob1 10s ease-in-out infinite;
}
.blob--2{
  background: radial-gradient(circle,
    rgba(160,90,180,.45) 0%,
    rgba(160,90,180,.15) 60%,
    transparent 75%);
  animation: blob2 14s ease-in-out infinite;
}
.blob--3{
  background: radial-gradient(circle,
    rgba(90,180,150,.35) 0%,
    rgba(90,180,150,.12) 60%,
    transparent 75%);
  animation: blob3 18s ease-in-out infinite;
}

/* アニメ */
@keyframes blob1{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-48%,-52%) scale(1.08); }
}
@keyframes blob2{
  0%,100%{ transform: translate(-50%,-50%) scale(1.05); }
  50%{ transform: translate(-52%,-48%) scale(1); }
}
@keyframes blob3{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-54%) scale(1.06); }
}

/* テキスト */
.shop-text p{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.9;
}

/* リンク */
.shop-links{
  margin: 28px 0;
  display: grid;
  gap: 14px;
}
.shop-links a{
  color: #000;
  text-decoration: underline;
  font-size: 15px;
}

/* YouTube */
.shop-youtube{
  margin: 32px 0;
}
.shop-youtube a{
  color: #000;
  font-weight: 500;
  text-decoration: none;
}

/* コピーライト */
.shop-footer{
  margin-top: 48px;
  font-size: 11px;
  line-height: 1.7;
  opacity: .65;
}
/* =========================
   SHOP：中央エリアをTOPと同じ黒に
========================= */
body .shop-hero{
  background: radial-gradient(
    ellipse at center,
    rgba(20, 24, 32, 1) 0%,
    rgba(10, 12, 18, 1) 55%,
    rgba(0, 0, 0, 1) 100%
  ) !important;
}

/* =========================
  Lyrics
========================= */

/* ==================================================
   LYRIC NEW – SCOPE（このページだけ）
   ※固定ページ本文の先頭に <div class="lyric-new-scope"></div>
================================================== */
.lyric-new-scope{ display:none !important; }

/* ==================================================
   LYRIC NEW – WRAP（幅800 + 左右余白）
================================================== */
.lyric-new-scope ~ .entry-content .lyric-wrap{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 仮導入文は使わない（出てきたら消す） */
.lyric-new-scope ~ .entry-content .lyric-intro{
  display:none !important;
}

/* 旧SCROLL系（出てきたら全部消す） */
.lyric-new-scope ~ .entry-content .lyric-hero__arrow,
.lyric-new-scope ~ .entry-content .lyric-hero__arrowText,
.lyric-new-scope ~ .entry-content .lyric-scroll,
.lyric-new-scope ~ .entry-content .scroll-ui,
.lyric-new-scope ~ .entry-content .scroll-label,
.lyric-new-scope ~ .entry-content .scroll-arrow-sp{
  display:none !important;
}
/* ==================================================
   ここから下：LYRIC NEW – BLOB / HERO 新系
   ※旧blob・保険CSSは一切書かない
================================================== */
.lyric-new-scope ~ .entry-content .lyric-hero{
  position: relative;
  min-height: 70vh;
  margin: 0 0 120px;
  --hero-y: 500px;   /* ← 調整はここだけ */
}

.lyric-new-scope ~ .entry-content .lyric-hero__blob{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 78vw);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) translateY(var(--hero-y));
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;

  background: radial-gradient(circle at 50% 50%,
    rgba(30,70,110,.70) 0%,
    rgba(60,120,175,.48) 38%,
    rgba(120,180,220,.20) 70%,
    rgba(120,180,220,.08) 82%,
    rgba(120,180,220,0) 95%
  );
  filter: blur(20px);
  opacity: .92;

  animation: blobPulsePC 6.5s ease-in-out infinite;
}

@keyframes blobPulsePC{
  0%   { transform: translate(-50%, -50%) translateY(var(--hero-y)) scale(1); }
  50%  { transform: translate(-50%, -50%) translateY(var(--hero-y)) scale(1.08); }
  100% { transform: translate(-50%, -50%) translateY(var(--hero-y)) scale(1); }
}
/* ✅ BLOBが 0px になる事故を強制復旧（最下段に置く） */
.lyric-new-scope ~ .entry-content #lyric-hero .lyric-hero__blob{
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: min(520px, 78vw) !important;
  height: min(520px, 78vw) !important;   /* ←これが本体。0px防止 */
  border-radius: 50% !important;

  transform: translate(-50%, -50%) translateY(var(--hero-y, -30px)) !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background: radial-gradient(circle at 50% 50%,
    rgba(30,70,110,.70) 0%,
    rgba(60,120,175,.48) 38%,
    rgba(120,180,220,.20) 70%,
    rgba(120,180,220,.08) 82%,
    rgba(120,180,220,0) 95%
  ) !important;
  filter: blur(20px) !important;
  opacity: .92 !important;
}

/* ======================================
   SP ハンバーガー（三本線） 安定化
   ・古い Android の初期ズーム対策
   ・右はみ出し防止
====================================== */

@media (max-width: 768px) {

  /* 三本線本体 */
  .nav-toggle-label {
    position: relative;          /* absolute / fixed の暴発防止 */
    right: auto !important;      /* right:0 を使わない */
    margin-right: 6px;           /* ← 重要：逃げ */
    padding: 6px 8px;            /* タップ領域確保＋右余白 */
    box-sizing: border-box;
    transform: translateZ(0);    /* GPU レイヤ化（Android安定） */
  }

  /* 親（ヘッダー右端）にも保険 */
  .navigation-top {
    padding-right: 8px;
    box-sizing: border-box;
  }
}

/* 古い Android の文字サイズ暴発対策 */
html {
  -webkit-text-size-adjust: 100%;
}

	/* =====================================
   H1 統一（TOP除外）
   対象：固定ページ・投稿などの entry-title
===================================== */
body:not(.home):not(.page-id-46) .entry-header{
  text-align: center !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  background: transparent !important;
}

body:not(.home):not(.page-id-46) .entry-header .entry-title,
body:not(.home):not(.page-id-46) h1.entry-title{
  text-align: center !important;
  margin: 32px auto 10px !important;   /* ←位置（上下）を統一 */
  padding: 0 !important;
  font-size: 28px !important;          /* ←PCの統一サイズ */
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

/* SP */
@media (max-width: 768px){
  body:not(.home):not(.page-id-46) .entry-header .entry-title,
  body:not(.home):not(.page-id-46) h1.entry-title{
    margin: 22px auto 8px !important;
    font-size: 22px !important;        /* ←SPの統一サイズ */
  }
}