/* =========================================================
   NEWS 個別ページ（news-*.html）専用。トップの style.css とは独立。
   配色はトップの :root と揃えてある（変えたら両方直すこと）
   ========================================================= */
:root{
  --bg:#07040e;
  --fg:#f6f2ff;
  --muted:rgba(226,214,255,.62);
  --accent:#ff45c8;
  --accent-2:#a259ff;
  --accent-3:#e9c9ff;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
/* トップのミニバナーから見出し・画像がモーフしてくる遷移（style.css 側と対） */
@view-transition{navigation:auto;}
.np__title{view-transition-name:news-title;}
::view-transition-group(news-title),
::view-transition-group(news-image){animation-duration:.55s;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* 上：ロゴ（クリックでトップへ） */
.np__head{
  padding:34px 20px 8px;
  text-align:center;
}
.np__head img{
  width:min(52vw,240px); height:auto;
  filter:drop-shadow(0 0 20px rgba(255,69,200,.3));
  transition:filter .3s var(--ease);
}
.np__head a:hover img{filter:drop-shadow(0 0 28px rgba(255,69,200,.6));}

/* 記事 */
.np__main{
  max-width:720px;
  margin:0 auto;
  padding:22px 20px calc(48px + env(safe-area-inset-bottom));
}
.np__label{
  margin:0 0 12px;
  font-size:11px; font-weight:700; letter-spacing:.34em; text-indent:.34em;
  color:var(--accent);
}
.np__title{
  margin:0 0 22px;
  font-size:clamp(21px,4.6vw,30px);
  font-weight:700; letter-spacing:.1em; line-height:1.5;
}
.np__title::after{
  content:"";
  display:block; width:56px; height:4px;
  margin-top:16px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.np__img{
  width:100%; height:auto;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.np__body{
  margin-top:24px;
  font-size:clamp(13px,1.6vw,15px);
  line-height:2.2; letter-spacing:.05em;
  color:rgba(246,242,255,.85);
}
.np__body p{margin:0;}

/* リンクボタン（トップの CTA と同じ雰囲気のピル） */
.np__btnwrap{margin:28px 0 0;}
.np__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px;
  font-size:13px; font-weight:700; letter-spacing:.08em;
  color:#fff; text-decoration:none;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  border-radius:999px;
  box-shadow:0 10px 30px -10px rgba(255,69,200,.65);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.np__btn::after{content:"→";}
.np__btn:hover{transform:translateY(-2px); box-shadow:0 14px 36px -10px rgba(255,69,200,.85);}

/* 戻る・フッター */
.np__back{margin:44px 0 0; font-size:13px; letter-spacing:.08em;}
.np__back a{color:var(--muted); text-decoration:none; transition:color .3s;}
.np__back a:hover{color:var(--fg);}
.np__foot{
  padding:26px 20px calc(26px + env(safe-area-inset-bottom));
  text-align:center;
  font-size:11px; letter-spacing:.2em;
  color:rgba(246,242,255,.45);
  border-top:1px solid rgba(255,255,255,.08);
}

@media (hover:none){
  .np__head a:hover img{filter:drop-shadow(0 0 20px rgba(255,69,200,.3));}
  .np__btn:hover{transform:none; box-shadow:0 10px 30px -10px rgba(255,69,200,.65);}
  .np__back a:hover{color:var(--muted);}
  .np__backtop:hover{background:rgba(7,4,14,.82); border-color:rgba(255,255,255,.2);}
}

/* ============================================================
   背景: bga2 のぼかし焼き込み・低解像度ループ（web_newsbg.mp4・152KB。
   元の web_bga2.mp4 6MB を直接敷くと重いので専用素材にした 2026-09-04）
   ============================================================ */
.np__bg{position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg);}
.np__bg video{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.85);
}
.np__bg::after{content:""; position:absolute; inset:0; background:rgba(5,3,10,.62);}

/* 記事本文はロゴヘッダー廃止ぶん上から開始（MENU を避ける） */
.np__main{padding-top:96px;}

/* ---- 左上の戻るボタン（1個だけ）----
   ミニバナー経由 = 「トップへ戻る」（./#lobby・ムービーなしでロビーへ）
   NEWS一覧経由 = 「NEWS一覧へ戻る」（./#news）
   直接来訪（SNSシェア等）= 「トップへ戻る」（./ = ムービーから）
   経由の記録はトップの main.js が sessionStorage(ommNewsFrom) に書き、
   各ページ末尾のインライン JS が label/href を切り替える */
.np__backtop{
  position:fixed; z-index:60;
  top:calc(clamp(12px,2vw,24px) + env(safe-area-inset-top));
  left:clamp(12px,2vw,24px);
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 18px 0 14px;
  border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.14em; color:#fff; text-decoration:none;
  background:rgba(7,4,14,.82);
  border:1px solid rgba(255,255,255,.2);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.np__backtop svg{width:14px; height:14px;}
.np__backtop:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5);}

/* ---- 右上 MENU（トップの style.css と同じ見た目） ---- */
.topbar{
  position:fixed; z-index:60;
  top:calc(clamp(12px,2vw,24px) + env(safe-area-inset-top));
  right:clamp(12px,2vw,24px);
  display:flex; align-items:center; gap:10px;
}
.menu{position:relative;}
.menu__btn{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 14px 0 18px;
  border-radius:999px;
  font-size:11px; letter-spacing:.22em; text-indent:.22em; color:#fff;
  font-family:inherit; cursor:pointer;
  background:rgba(7,4,14,.82);
  border:1px solid rgba(255,255,255,.2);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.menu__btn svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.menu__btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);}
.menu__btn[aria-expanded="true"]{background:rgba(255,69,200,.25);border-color:rgba(255,69,200,.6);}
.menu__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.menu__list{
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:240px;
  margin:0; padding:8px; list-style:none;
  border-radius:16px;
  background:rgba(10,6,18,.94);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  animation:menuIn .28s var(--ease) both;
}
.menu__list[hidden]{display:none;}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.menu__list a{
  display:flex; flex-direction:column; gap:3px;
  padding:11px 16px;
  border-radius:10px;
  text-decoration:none;
  transition:background .2s var(--ease);
}
.menu__list span{font-size:12px;font-weight:700;letter-spacing:.2em;color:#fff;}
.menu__list small{font-size:10px;letter-spacing:.08em;color:var(--muted);}
.menu__list a:hover{background:rgba(255,255,255,.08);}
.menu__list a:hover span{color:var(--accent-3);}

@media (prefers-reduced-motion: reduce){
  .np__bg video{display:none;}     /* 動きを減らす設定では背景動画ごと止める */
}