@charset "utf-8";

/* ===========================================
   top_journal_stage.css
   トップpage の最新JOURNAL記事ステージ（#top_journal_stage）専用。
   詳細ページ（news_single.css）とは別管理。
   .pic / .bg-layer / .is-ready のクラスは詳細と共通の見た目だが、
   .stage（詳細では position:fixed 等）の影響を受けないよう
   #top_journal_stage の id で配置を固有指定して上書きする。
   =========================================== */

/* ===== リンクラッパー ===== */
.top_journal_link {
position: absolute;
top: 0;
left: 0;
z-index: 5;
display: block;
width: 100%;
height: 100%;
}

.top_journal_link:hover {
  opacity: 1;            /* 画像エリアなので hover で薄くしない */
}

/* ===== ステージ本体（高さは80vh、JSが上書き） ===== */
/* id で指定して、詳細の .stage(position:fixed 等) を上書きする */
#top_journal_stage.stage {
  position: relative;    /* 詳細の fixed を打ち消す */
  z-index: 0;
  top: auto;
  left: auto;
width: 100%;
  height: 90vh;        /* SP初期値。JSが上書き */
  padding: 0;
  overflow: hidden;
}



/* ===== 画像レイヤー（写真3枚） ===== */
#top_journal_stage .pic {
  position: absolute;
  overflow: hidden;
  will-change: transform;
  visibility: hidden;    /* JSが配置し終えるまで隠す */
}

#top_journal_stage .pic picture {
  display: block;
  width: 100%;
  height: 100%;
}

#top_journal_stage .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--op-pc, center center);
  display: block;
}

@media screen and (min-width: 768px) {
  #top_journal_stage .pic img {
    object-position: var(--op-sp, center center);  /* WP管理（SP値） */
  }
}






/* ===== 青背景レイヤー（一番奥） ===== */
#top_journal_stage .bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: var(--stage-bg, greenyellow);/* 変数が無ければ緑黄 */
  will-change: transform;
  visibility: hidden;
}

/* JSが配置完了（is-ready）したら表示 */
#top_journal_stage.stage.is-ready .pic,
#top_journal_stage.stage.is-ready .bg-layer {
  visibility: visible;
}





@media screen and (min-width: 768px) {






  #top_journal_stage.stage {
    height: 90vh;        /* PC初期値。JSが上書き */
  }






}