@charset "UTF-8";
/* ============================================================
   BANNISTAR TOP ｜ OUR WORK チラ見せ差分（CSS）
   既存の style.css / common.js / navigation.css は変更せず、
   このCSSを最後に読み込むだけで動作します。
   ------------------------------------------------------------
   ▼設計
   1画面（100vh）を次の3段で構成し、重なりを構造的に排除する。
     ┌ #se1 …………… calc(100vh - peek - head-h)
     ├ .ourwork-head … head-h（JSが実測。初期は透明だが場所は確保）
     └ .box_cnt2 …… peek（＝チラ見せ分だけ覗く）
   ※FVの .contentInner の縦位置・サイズは既存のまま一切変更しない
   ============================================================ */
:root {
  --peek: 150px; /* チラ見せの高さ（PC）*/
  --head-h: 92px; /* OUR WORKヘッダー帯。JSが実測して上書き */
  --head-gap: 40px; /* ヘッダーとサムネイル群の間隔 */
  --arrow-gap: 50px; /* 矢印の下端とサムネイル上端の距離 */
  --peek-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   1) Hero(#se1)の高さ ＝ 100vh −（覗き量）−（ヘッダー帯）
   インラインJS( height=window.height() )を !important で上書き
   ------------------------------------------------------------ */
#se1 {
  height: calc(100vh - var(--peek) - var(--head-h)) !important;
  box-sizing: border-box;
}
@supports (height: 100dvh) {
  /* スマホのアドレスバー分を吸収 */
  #se1 {
    height: calc(100dvh - var(--peek) - var(--head-h)) !important;
  }
}

/* ------------------------------------------------------------
   2) Hero直下の余白を詰める
   ------------------------------------------------------------ */
#container,
#contents {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#cnt2 {
  position: relative;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#cnt2 .box_cnt2 {
  margin-top: 0 !important;
}

/* ------------------------------------------------------------
   3) OUR WORK ヘッダー（タイトル＋説明）
   通常フローのまま帯として場所を確保し、初期は透明。
   スクロールで上からすっと降りてくる／戻ると再び消える（可逆）
   ------------------------------------------------------------ */
#cnt2 .ourwork-head {
  margin: 0 !important;
  padding: 0 0 var(--head-gap); /* ← サムネイル群との間隔 */
  opacity: 0;
  transform: translateY(-14px);
  transition:
    opacity 0.9s var(--peek-ease),
    transform 0.9s var(--peek-ease);
}
#cnt2.peek-revealed .ourwork-head {
  opacity: 1;
  transform: translateY(0);
}
/* 見出し内側は既存 .fadein の影響を受けないよう固定表示にする */
#cnt2 .ourwork-head h2,
#cnt2 .ourwork-head h3 {
  opacity: 1 !important;
  transform: none !important;
}
#cnt2 .ourwork-head h2 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-top: 0 !important;
}
#cnt2 .ourwork-head h3 {
  margin: 0 !important;
}
/* 既存の h3.under_txt が持つ padding-bottom:40px を打ち消し、
   帯の下余白は --head-gap で一元管理する */
#cnt2 .ourwork-head h3.under_txt {
  padding-bottom: 0 !important;
}

/* JS実行前の一瞬のちらつき防止（ラップされると自動的に外れる）*/
html:not(.peek-ready) #cnt2 > h2,
html:not(.peek-ready) #cnt2 > h3.under_txt {
  opacity: 0;
}

/* ------------------------------------------------------------
   4) サムネイルは初期状態から“表示”
   ------------------------------------------------------------ */
#cnt2 .box_cnt2,
#cnt2 .cs_thum {
  opacity: 1 !important;
  transform: none !important;
}

/* ------------------------------------------------------------
   5) スクロールダウン矢印
   ・初期位置：ちら見せサムネイルのすぐ上（＝ヘッダー帯の中）
     Hero下端から --head-h ぶん下がった位置がサムネイル上端なので、
     そこから --arrow-gap だけ上に置く
   ・スクロールが始まったらフェードアウト
   ------------------------------------------------------------ */
#se1 .arrowWrap {
  bottom: calc(var(--arrow-gap) - var(--head-h));
  transition:
    opacity 0.45s var(--peek-ease),
    visibility 0.45s var(--peek-ease);
}
html.peek-scrolled #se1 .arrowWrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ------------------------------------------------------------
   6) FVキャッチコピー：OUR WORKヘッダーの出現に合わせてフェードアウト
      上に戻ると同じイージングでフェードイン（可逆）
   ------------------------------------------------------------ */
#top > #se1 .contentInner h2 {
  transition: opacity 0.9s var(--peek-ease);
}
html.peek-copy-out #top > #se1 .contentInner h2 {
  opacity: 0;
}

/* ------------------------------------------------------------
   7)【任意】縦が極端に短い／横に極端に広い画面での保険
   通常は最上部で .ourwork-head が非表示のため問題にならないが、
   FVのコピーがサムネイルにまで掛かる場合のみコメントを外す。
   ------------------------------------------------------------ */
/*
@media screen and (min-width: 801px){
  #top > #se1 .logo{ width: min(90%, 200vh); }
  #top > #se1 h2{ font-size: min(3vw, 7.5vh); }
}
*/

/* ------------------------------------------------------------
   縦が短い画面：覗き量を控えめに
   ------------------------------------------------------------ */
@media (max-height: 900px) {
  :root {
    --peek: 120px;
  }
}
@media (max-height: 760px) {
  :root {
    --peek: 100px;
    --head-gap: 30px;
  }
}

/* ------------------------------------------------------------
   レスポンシブ（横幅）
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  :root {
    --peek: 120px;
  }
}
@media (max-width: 560px) {
  :root {
    --peek: 104px;
    --head-gap: 24px;
  }
}

/* ------------------------------------------------------------
   モーション低減設定を尊重（フェード類は無効化）
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #cnt2 .ourwork-head {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.peek-copy-out #top > #se1 .contentInner h2 {
    opacity: 1;
  }
}