/* ===== index 最適化版 ===== */
body {
  background-color: rgb(0, 0, 0);
}

/* コンテナ */
.FV {
  width: 100%;
  height: 100%;
  aspect-ratio: 1280 / 832;
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* レイヤー内枠 */
.FV .div {
  position: absolute;
  inset: 0;
}

/* 左カラム（固定） */
.FV .LEFT {
  position: fixed;
  left: 0;
  width: 24%;
  height: 100%;
  z-index: 1003;
}

/* 中央フレーム（NEWSと同寸・同枠線） */
.FV .CENTER{
  position: relative;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 100%;
  height:76%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 30px;
  border-top: 2px solid rgb(0,22,222);
  border-bottom: 2px solid rgb(0,22,222);
  z-index: 1;
}

/* ===== Menu ===== */
.FV .MENU{
  position:absolute;                 /* ← relativeに統一（anchor用） */
  top: calc(12% );
  left:0;             /* ← 無効化していた指定は削除 */
  display:flex; 
  flex-direction:column; 
  align-items:flex-start;
}
.FV .menu-icon{
  position:relative; 
  width:40px; 
  height:40px; 
  background:#0016de; 
  cursor:pointer; 
  flex-shrink:0;
}
.FV .menu-icon span:nth-child(1),
.FV .menu-icon span:nth-child(2){
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%);
}
.FV .menu-icon span:nth-child(1){
  width:0; 
  height:2px; 
  background:#000; 
  transition:width .3s;}
.FV .menu-icon span:nth-child(2){
  width:2px; 
  height:0; 
  background:#000; 
  transition:height .3s;
}
.FV .menu-icon::before,
.FV .menu-icon::after{
  content:""; position:absolute; top:50%; left:50%;
  width:137%; height:2px; background:#000; transform-origin:center;
  transition:width .3s, opacity .2s; opacity:1;
}
.FV .menu-icon::after{transform:translate(-50%,-50%) rotate(-45deg);}
.FV .menu-icon::before{transform:translate(-50%,-50%) rotate(45deg);}
.FV .menu-icon:hover::before,
.FV .menu-icon:hover::after{width:0; opacity:0;}
.FV .menu-icon:hover span:nth-child(1){width:100%;}
.FV .menu-icon:hover span:nth-child(2){height:100%;}

.FV .menu-list{
  position:absolute; 
  top:100%; 
  left:0; 
  margin-top:15px;
  display:none; 
  flex-direction:column; 
  gap:0;
  color:#000; 
  font:700 18px/1 lores-9-narrow,sans-serif; text-align:left;
  padding:0;
  z-index:9999;
}
.FV .menu-list.active{display:flex;}
.FV .menu-list li{
  list-style:none; 
  margin:0 0 15px; 
  padding:0 0 1px;
  width:max-content; 
  background:#0016de; 
  color:#000;
  z-index:9999;
}
.FV .menu-list li:last-child{margin-bottom:0;}
.FV .menu-list .glitch-text { pointer-events: none; }
.glitch-text{display:inline-block; transition:.2s;}
.glitch-text.active{color:#0016de;}
a,a:visited,a:hover,a:active{color:inherit; text-decoration:none;}

.FV .menu-list a{
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== NEWS blocks ===== */
.update-fmt{
  /* 旧: absolute中央 → フロー配置 */
  --h: clamp(40px, 6vw, 60px);   /* 高さ基準（60px=現状） */
  height:var(--h);
  width:min(70%,1080px);
  display:flex; align-items:center; justify-content:space-between;
  gap:0; padding:0; box-sizing:border-box;
  background:#000; border:2px solid #0016de;
}
.FV .CENTER > .update-fmt{position:static; transform:none;}

.update-fmt .year{
  width:calc(var(--h)*.5); height:var(--h);
  background:#0016de; display:flex; align-items:center; justify-content:center;
}
.update-fmt .month, .update-fmt .day, .update-fmt .more{
  width:var(--h); height:var(--h);
  display:flex; align-items:center; justify-content:center;
}
.update-fmt .day, .update-fmt .more{background:#0016de;}
.update-fmt .official-web{
  flex:1; height:var(--h);
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(6px, calc(var(--h)*.2), 12px); overflow:hidden;
}

.update-fmt .text-wrapper{
  transform:rotate(90deg);
  color:#000; font:700 calc(var(--h)*16/60)/1 lores-9-narrow,sans-serif;
  letter-spacing:calc(var(--h)*-1.25/60);
}
.update-fmt .text-wrapper-2{
  color:rgb(0,22,222); font:700 calc(var(--h)*32/60)/1 lores-9-narrow,sans-serif;
  letter-spacing:calc(var(--h)*-3.2/60); text-align:center;
}
.update-fmt .text-wrapper-3{
  color:#000; font:700 calc(var(--h)*32/60)/1 lores-9-narrow,sans-serif;
  letter-spacing:calc(var(--h)*-3.2/60); text-align:center;
}
.update-fmt .text-wrapper-4{
  color:#000; font:700 calc(var(--h)*16/60)/1 lores-9-narrow,sans-serif;
  letter-spacing:calc(var(--h)*-1.5/60); text-align:center;
}
.update-fmt .text-wrapper-title{
  font-size:clamp(12px, calc(var(--h)*16/60), 16px);
  color:#0016de; font-family:"DotGothic16",sans-serif; font-weight:400; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.update-fmt .text-wrapper-title:hover{color:#000; background:#0016de;}
.update-fmt .text-wrapper:hover{color:#0016de;}


/* 上下帯 */
.FV .UP, .FV .DOWN{
  position: fixed; 
  left:0; 
  width:100%; 
  height:0%; background:#000;
}
.FV .UP{ top:0; } .FV .DOWN{ bottom:0; }
.FV .line-2, 
.FV .line-3{ position:absolute; 
  left:0; width:100%; height:2px; background:#0016de; }
.FV .line-2{ bottom:0; } .FV .line-3{ top:0; }

/* 背景動画：CENTER内で全面フィット（一本化） */
#news-bg-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0; pointer-events: none;
}
/* ===== 背景動画：CENTER内で全面フィット（indexと同仕様） ===== */
.story-bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none; /* 背景はクリックを拾わない */
}
.story-bg > video,
.story-bg > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;     /* 既存と同条件 */
  display:block;
}

/* 既定（PC想定）：videoを出してgifは隠す */
#story-bg-video{ display:block; }
#story-bg-gif{   display:none;  }

/* ロゴ：CENTER中央でレスポンシブ */
.FV .CENTER .logo{
  position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: min(57vw, 730px); height:auto; z-index:1;
}

/* indexで使う更新行（update-fmt）— 既存そのまま再編 */
.update-fmt{
  position: relative; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:space-between;
  height:60px; width:100%; max-width:100%;
  background:#000; border:2px solid #0016de; gap:0; padding:0; box-sizing:border-box;
}
.update-fmt .year{ width:30px; height:60px; background:#0016de; display:flex; align-items:center; justify-content:center; }
.update-fmt .text-wrapper{ transform:rotate(90deg); color:#000; font:700 16px/1 lores-9-narrow, sans-serif; letter-spacing:-1.25px; }
.update-fmt .month,.update-fmt .day,.update-fmt .more{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
.update-fmt .day,.update-fmt .more{ background:#0016de; }
.update-fmt .text-wrapper-2{ color:rgb(0,22,222); font:700 32px/1 lores-9-narrow, sans-serif; letter-spacing:-3.2px; text-align:center; }
.update-fmt .text-wrapper-3{ color:#000; font:700 32px/1 lores-9-narrow, sans-serif; letter-spacing:-3.2px; text-align:center; }
.update-fmt .text-wrapper-4{ color:#000; font:700 16px/1 lores-9-narrow, sans-serif; letter-spacing:-1.5px; text-align:center; }
.update-fmt .official-web{ flex:1; height:60px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:0 10px; }
.update-fmt .text-wrapper-title{ font-size:clamp(12px,1.5vw,16px); color:#0016de; font-family:"DotGothic16",sans-serif; font-weight:400; font-style:normal; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

/* === MENU を最前面に固定（Safari のヒットテスト回避） === */
.FV .LEFT{ z-index: 1000; }                 /* LEFT自体を引き上げ */
.FV .LEFT .MENU{ position: relative; z-index: 1001; }
.FV .LEFT .menu-list{
  position: absolute;
  z-index: 1002;            /* CENTER より上に固定 */
  isolation: isolate;       /* 独立スタッキング（Safari安定） */
  pointer-events: auto;     /* 念のため明示 */
}

/* 背景系はクリック透過（あれば） */
#news-bg-video,
.FV .CENTER .fv-bg-wrap,
.FV .CENTER canvas{ pointer-events: none; }

/* メニューを開いている間だけ CENTER のヒットテストを無効化 */
body.menu-open .FV .CENTER{ pointer-events: none; }

/* ただし CENTER 内の本当に必要な操作系は許可したい場合は個別に戻す例：
body.menu-open .FV .CENTER a,
body.menu-open .FV .CENTER button{ pointer-events:auto; }
*/

/* === SP overrides (≤ 768px) ===================================== */
@media (max-width: 768px) {
  :root{
    --sp-pad: clamp(12px, 4vw, 20px);
    --hit: 44px; /* 最小タップ領域 */
  }

  html, body { height: 100%; }
  body { font-size: clamp(14px, 3.5vw, 16px); line-height: 1.6; 
  background-color: #000000;}
  
  #story-bg-video{ display:none; }
  #story-bg-gif{   display:block; }
  /* iOSノッチ対応 */
  .app, body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ===== FV（背景動画/画像） ===== */
  .FV{
    position: relative;
    min-height: 100%;   /* ツールバー縮小時に安定 */
    height: 100%;
    aspect-ratio: auto;   /* PCの固定比率はSPで解除 */
    overflow: visible !important;
    background-color: #000000;
    
    }

      /* レイヤー内枠 */
  .FV .div {
    position: absolute;
    inset: 0;
  }

    /* 中央フレーム（NEWSと同寸・同枠線） */
    .FV .CENTER{
      position: relative;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 100%;
      height: 100%;
      display: flex; 
      align-items: 
      center; 
      justify-content: center; 
      flex-direction: column;
      gap: 30px;
      border-top: 2px solid rgb(0,22,222);
      border-bottom: 2px solid rgb(0,22,222);
    }

    /* 上下帯 */
.FV .UP, .FV .DOWN{
  position: fixed; 
  left:0; 
  width:100%; 
  height:50px; background:#000;
  z-index: 1;
}
.FV .UP{ top:0; } .FV .DOWN{ bottom:0; }
.FV .line-2, 
.FV .line-3{ position:absolute; 
  left:0; width:100%; height:2px; background:#0016de; }
.FV .line-2{ bottom:0; } .FV .line-3{ top:0; }

  /* ===== Menu ===== */
.FV .MENU{
  position:absolute;                 /* ← relativeに統一（anchor用） */
  top: 0;
  left:0;             /* ← 無効化していた指定は削除 */
  display:flex; 
  flex-direction:column; 
  align-items:flex-start;
}
.FV .menu-icon{
  position:relative; 
  aspect-ratio: 1 / 1; 
  width: auto;
  height: 50px;
  background-color: rgba(0, 0, 0,0);
  border: #0016de solid 2px;
  
  background-color: #000;
  display: grid; place-items: center;
  cursor:pointer; 
  flex-shrink:0;
  box-sizing: border-box;
}  
  .FV .menu-icon::before,
  .FV .menu-icon::after{
    content: none !important;
  }

  .FV .menu-icon span{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    background: rgb(0,22,222);
    transition: none !important;  /* モーション不要なので無効化 */
    z-index: 1; 
  }

  /* ＋は最初から見せる：アニメ無効化＆フル長さに */
  .FV .menu-icon span:nth-child(1),
  .FV .menu-icon span:nth-child(2){
    transition: none !important;            /* 伸縮アニメ停止 */
  }
 .FV .menu-icon span:nth-child(1){ /* 横線 */
    width: 100%;
    height: 2px;
  }
  .FV .menu-icon span:nth-child(2){ /* 縦線 */
    width: 2px;
    height: 100%;
  }

  /* hover時の上書きも無効化（保険） */
  .FV .menu-icon:hover span:nth-child(1){ width: 100% !important; }
  .FV .menu-icon:hover span:nth-child(2){ height: 100% !important; }

/* ＋（初期状態） */
  .FV .menu-icon span:nth-child(1){ /* 横線 */
    width: 100% !important;
    height: 2px !important;
    rotate: 0deg;
    background:rgb(0, 22, 222);
  }
  .FV .menu-icon span:nth-child(2){ /* 縦線 */
    width: 2px !important;
    height: 100% !important;
    rotate: 0deg;
    background:rgb(0, 22, 222);
  }

  .FV .menu-icon.clicked span{
    width: 140% !important;  /* 右2px(border) + 左2pxのマージン相当を回避 */
    height: 2px !important;
  
  }
  .FV .menu-icon.clicked span:nth-child(1){
transform: translate(-50%, -50%) rotate(45deg);
  }
  .FV .menu-icon.clicked span:nth-child(2){
transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* hover 上書きを無効化（SPのタップ時にブレないよう保険） */
  .FV .menu-icon:hover span:nth-child(1){
    width: 100% !important; height: 2px !important;
  }
  .FV .menu-icon:hover span:nth-child(2){
    width: 2px !important; height: 100% !important;
  }
  .FV .menu-icon.clicked:hover span{
    width: 140% !important; height: 2px !important;
  }

.FV .menu-list{
  position: fixed;
  top: calc(50px + env(safe-area-inset-top)); 
  bottom: calc(0px + env(safe-area-inset-bottom));
  left:0; 
  margin-top:0px;
  height: auto;
  display:flex; 
  flex-direction:column; 
  justify-content: space-between;
  align-items: flex-start; 
  gap:0;
  color:#000; 
  font:700　lores-9-narrow,sans-serif; text-align:left;
  padding: 0;
  overflow-y: auto;              /* 中身が多い場合にスクロール */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* 背景までバウンドしない */
  z-index: 4000;   
}

  .FV .LEFT .menu-list{
    position:fixed !important;
    top:calc(50px + env(safe-area-inset-top));
    left:0; right:0;
    margin:0; padding:0;
    width:100vw;

    display:flex !important;
    flex-direction:column;
    gap:0;

    z-index:4000;                     /* いちばん上に */
    isolation:isolate;                /* 独立スタッキング（Safari安定） */
    -webkit-transform:translateZ(0);
            transform:translateZ(0);
    will-change:opacity, transform;

    /* 初期は非表示（でもレイアウトは保つ） */
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    background:transparent;           /* 各 li が青ベタ */
    -webkit-overflow-scrolling:touch; /* ロングリスト時の慣性 */
  }

  .FV .LEFT .MENU .menu-icon.clicked ~ .menu-list,
  .FV .LEFT .menu-list.active{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
.FV .menu-list li{
  list-style:none; 
  margin:0px 0 0px; 
  padding:0 0 1px;
  width:auto; 
  background:rgb(0, 22, 222); 
  color:rgb(0, 0, 0);
  border: #0016de solid 2px;
  font-size: clamp(28px, 7cqh, 68px);
}

 .FV .menu-list::after{
    content:"";
    display:block;
    height: 0svh;                  /* DOWNと同じぶんダミー余白を確保 */
  }

  @supports not (height: 1svh){
    .FV .menu-list{
      top: calc(6vh + env(safe-area-inset-top));
      bottom: calc(6vh + env(safe-area-inset-bottom));
    }
    .FV .menu-list::after{ height: 6vh; }
  }

/* ロゴ：CENTER中央でレスポンシブ */
.FV .CENTER .logo{
  position: absolute; 
  top:50%; left:50%; 
  transform:translate(-50%,-50%);
  width: min(75vw, 730px); height:auto; z-index:1;
}


}