/* ===== STORY 最適化版（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:auto; /* 既存踏襲 */
}

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

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

/* 中央フレーム（indexと同寸・同枠線） */
.FV .CENTER{
  position:relative;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%;
  height:76%;
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  gap:30px;
  border-top:2px solid rgb(0,22,222);
  border-bottom:2px solid rgb(0,22,222);
  z-index:1; /* 動画(0)より前面、上下帯より背面にしない */
  overflow: hidden; 
}

/* ===== MENU（index準拠） ===== */
.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; opacity:1;
  transition:width .3s, opacity .2s;
}
.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;
}
.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;
}
.FV .menu-list li:last-child{ margin-bottom:0; }
.FV .menu-list .glitch-text { pointer-events: none; }

.glitch-text{ display:inline-block; transition:all .2s ease; font-family:inherit; font-weight:inherit; }
.glitch-text.active{ color:#0016de; }

a, a:visited, a:hover, a:active{ color:inherit; text-decoration:none; }

/* 上下帯（index準拠） */
.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内で全面フィット（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;  }

/* ===== STORY 本文（提示CSSの見え方を維持） ===== */
.story{
  position:relative; 
  z-index:1;
  width:56%;
  min-height: 0;         /* flex 子要素の縮小を許可（既定=auto だと溢れやすい） */
  max-height: 100%;      /* CENTERの高さを上限に */            /* 100vh → CENTERの枠内に合わせて100% */
  display:flex; 
  justify-content:center; 
  align-items:center; 
  flex-direction:column;
}

/* 1行ごとのスタイル（提示CSSを尊重） */
.story-line{
  width:100%;
  position:relative;
  font-size:clamp(8px, 1.5vw, 16px);
  font-family:"DotGothic16", sans-serif;
  font-weight:400;
  font-style:normal;
  padding:2px 2px 4px 2px;
  white-space:nowrap;
  color:#000;
  background-color:#0016de;
  background-size:0% 100%;
  background-repeat:no-repeat;
  background-position:left;
  pointer-events:none;
  line-height:1em;
  letter-spacing:0.15em;
  margin-bottom:1.5em;
}


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

  html, body { height: 100%; }
  body { font-size: clamp(14px, 3.5vw, 16px); line-height: 1.6; }

  /* iOSノッチ対応 */
  .app, body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

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

      /* レイヤー内枠 */
  .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: 0px solid rgb(0,22,222);
      border-bottom: 0px solid rgb(0,22,222);
    }


/* ===== 上下帯 ===== */
    /* 上下帯 */
.FV .UP, .FV .DOWN{
  position: fixed; 
  left:0; 
  width:100%; 
  height:50px; background:#000;
  z-index: 1;
  color:#0016de;
  display: flex;
  align-items: center; 
  justify-content: center;  
}

.FV .DOWN p1 {
 text-align: static; 
 transform: none ;
 margin: 0;
 font:clamp(9px, 1vw, 10px); 
 font-family: lores-9-narrow, sans-serif;
 position: absolute;
 letter-spacing: 0.45rem;
 display: block;
}
/* ===== 上下帯 ===== */

.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:none; 
  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: 1002;   
}


.FV .menu-list.active{display:flex;}
.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(22px, 6cqh, 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; }
  }

  .FV .menu-list{
    /* 既存の position:fixed / top/bottom 等はそのまま活かしてOK */
    display: flex !important;            /* ← display:none は使わない */
    flex-direction: column;

    /* 初期は見えない（タップで可視化） */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity .28s ease,
      visibility 0s linear .28s;
  }

  /* 2) メニューアイコンに .clicked が付いた時だけ表示
        （script.jsが .menu-icon に .clicked をトグル済み） */
  .FV .MENU .menu-icon.clicked ~ .menu-list{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
      opacity .28s ease,
      visibility 0s linear 0s;
  }

/* ===== STORY 本文（提示CSSの見え方を維持） ===== */
.story{
  position:relative; 
  z-index:1;
  width:85%;
  min-height: 0;         /* flex 子要素の縮小を許可（既定=auto だと溢れやすい） */
  max-height: 100%;      /* CENTERの高さを上限に */            /* 100vh → CENTERの枠内に合わせて100% */
  display:flex; 
  justify-content:center; 
  align-items:center; 
  flex-direction:column;
}


.story-line{
  width:85vw;
  position:relative;
  font-size: clamp(14px, 4vw, 18px);
  font-family:"DotGothic16", sans-serif;
  font-weight:400;
  font-style:normal;
  padding:2px 2px 4px 2px;
  white-space:nowrap;
  color:#000;
  background-color:#0016de;
  background-size:0% 100%;
  background-repeat:no-repeat;
  background-position:left;
  pointer-events:none;
  line-height:0.8em;
  letter-spacing:0.15em;
  margin-bottom:1.5em;
  
}


}