@charset "UTF-8";

/* ===== 固定動画背景の上を情報だけが流れる ===== */
.techPage { background: #0a0908; }

.techBgs { position: fixed; inset: 0; z-index: 0; }
.techBg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.techBg video { width: 100%; height: 100%; object-fit: cover; }
.techBg::after { content: ""; position: absolute; inset: 0; background: rgba(6, 5, 4, .32); }
.techBgShade { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity 2.2s ease; }
.techBgShade.is-smoke { opacity: .55; }
.techBgShade.is-clear { opacity: 0; }
.techBg--flat { background: var(--c-ink); }
.techBg--flat::after { display: none; }
.techBg.is-show { opacity: 1; }

/* 固定動画背景(.techBgs=z-index:0)より前面に出す。
   ※.fixedCvはSPで position:fixed(z-index:90)で追従させるため、ここに含めない
     (含めると position:relative で上書きされ、追従しなくなる) */
.techPage .main, .techPage .footer { position: relative; z-index: 1; }

/* ===== scenes ===== */
.techScene { min-height: 100svh; display: flex; color: #fff; padding: calc(var(--header-h) + 40px) var(--gutter) 80px; }

/* シーン1: MV 文字はセンタリング・動画は下付き(下部の煙が見える) */
.techScene--mv { align-items: center; justify-content: center; }
.techScene__mvBody { max-width: 760px; text-align: center; }
.techBg[data-bg="mv"] video { object-position: center bottom; }
.techScene__mvTtl {
  font-family: var(--ff-en); font-size: clamp(42px, 6vw, 88px); font-weight: 400;
  letter-spacing: .2em; line-height: 1.25; text-shadow: 0 1px 24px rgba(0,0,0,.6);
}
.techScene__mvLead { margin-top: 26px; font-size: 15px; line-height: 2.3; letter-spacing: .05em; color: rgba(255,255,255,.9); text-shadow: 0 1px 16px rgba(0,0,0,.6); }

/* シーン2/3: タグはsticky固定・本文だけがスクロール */
.techScene--kijiku, .techScene--shinzui {
  display: block; min-height: 170svh; position: relative;
}
.techScene__tag--sticky { transition: opacity .45s ease; }
.techScene__tag--sticky.is-avoid { opacity: 0; }
.techScene__tag--sticky {
  position: sticky; top: 50%; float: left; margin-top: 0;
  transform: translateY(-50%); opacity: 0; transition: opacity .45s ease;
}
.techScene__tag--sticky.is-centered { opacity: 1; }
.techScene__tag--stickyRight { float: right; }
/* 機軸の指定改行(最長行=515px)がそのまま収まる幅にする。460pxだと最終行が折り返して7行になる。
   ただしタグは画面中央にsticky固定されるため、50%を超えて広げるとタグに重なる。
   → min()で「540px」と「中央から50px手前まで」の狭い方を採用し、右端は余白なしで content 端に寄せる */
.techScene__text--flowRight {
  max-width: min(540px, calc(50% - 50px)); margin-left: auto; margin-top: 26svh;
  margin-right: 0; clear: none;
}
.techScene__text--flowLeft {
  max-width: 460px; margin-right: auto; margin-top: 26svh;
  margin-left: calc(var(--gutter) * 1.5);
}
.techScene__tag {
  display: inline-flex; gap: 10px; background: rgba(255,255,255,.94); color: var(--c-ink);
  padding: 18px 14px 22px; margin-bottom: 26px;
}
.techScene__tag.techScene__tag--sticky { transition: opacity .45s ease; }
.techScene__tag--sticky.is-avoid { opacity: 0; }
.techScene__tag--sticky {
  display: flex; width: max-content; float: none;
  margin-left: auto; margin-right: auto;
}
.techScene__tag--plain { background: none; color: #fff; padding: 0; text-shadow: 0 1px 16px rgba(0,0,0,.6); }
.techScene__tag--plain .techScene__tagEn { color: rgba(255,255,255,.7); }
.techScene__side--right { margin-left: auto; text-align: left; }
.techBg__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease; }
.techBg__alt.is-front { opacity: 1; }
.techScene__tagJa { writing-mode: vertical-rl; font-size: clamp(20px, 2vw, 26px); font-weight: 400; letter-spacing: .4em; line-height: 1.2; }
.techScene__tagEn { writing-mode: vertical-rl; font-family: var(--ff-en); font-style: italic; font-size: 11px; letter-spacing: .18em; color: var(--c-gray); }
.techScene__text { font-size: 15px; line-height: 2.4; letter-spacing: .04em; text-shadow: 0 1px 14px rgba(0,0,0,.65); }
.techScene__ph { max-width: 320px; margin-bottom: 22px; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.techScene__ph img { width: 100%; }

/* ===== SP ===== */
@media (max-width: 860px) {
  .techScene__mvLead { font-size: 12.5px; letter-spacing: .02em; line-height: 2.1; white-space: nowrap; }
  .techScene { padding: calc(var(--header-h) + 28px) var(--gutter) 56px; }
  .techScene--kijiku, .techScene--shinzui { min-height: 165svh; }
  /* .techSceneの左右paddingで既にgutter分の余白があるため、ここでもgutterを足すと二重になり
     指定改行が295pxしか使えなくなっていた(CB 8/20)。左右marginは0にして幅いっぱいに広げる */
  .techScene__text--flowRight, .techScene__text--flowLeft { max-width: none; margin: 62svh 0 0; }
}