/* ============================================================
   PC固有スタイル
   本文の器・共通スタイルは main-content.css（両デバイス共通）。
   ここは PC の寸法基準 --dpx の定義と、PC専用の上書き・
   PC専用コンテンツ（固定FV画像／サイドナビ等）を書く。
   ============================================================ */

:root {
  /* PC本文の寸法基準（内部数値はSPと同じ750px幅カンプ基準を流用）。
     コンテンツ幅 = 30vw（420/1400）＝常に画面幅に比例（可変のみ）
     その幅を 750 で割り「カンプ1px→実寸」の単位にする。 */
  --dpx: calc(30vw / 750);
}

/* CMSのbody直下にある器。PCでは幅いっぱいに使う */
.l-container { width: 100%; }

/* CMSテンプレート側フッターの余白をPCではリセット */
.l-footer, .pc-footer { margin: 0; padding: 0; }

/* CMS共通CSS（PC系統）の旧式クリアフィックス対策：
   .l-container:after { content:"."; height:0; visibility:hidden } の「.」が
   height:0 の箱から1行分（約17px）はみ出し、ページ最下部に白帯を作る。
   content を空にすれば clear:both は生きたまま余白だけ消える */
.l-container::after { content: ""; }

.pc-header-main.is-fixed {
   display: none;
}

/* ============================================================
   PCレイアウト土台（中央本文ラッパー＋左右スティッキー）
   全て可変：帯は画面いっぱい、中身は --dpx で画面幅に比例。
   帯 .pc-frame は mode（--mode=fluid）によらず常に width:100%＝画面いっぱい。
   mode の可変/固定に従うのはメインコンテンツ .main-content の --dpx だけ
   （「B以上は固定」＝.main-content の頭打ちの意味。帯までBで止めない）。
   .pc-main ＝「見た目の本文領域」（本文＋左右のデザイン余白）。
   左右スティッキーはこのラッパーの外縁に接する。
   ▼スティッキー成立の前提（この2つは崩さない）
     1. .pc-frame を display:flex; align-items:stretch にして
        左右カラム(.pc-side)を本文の高さまで伸ばす。
     2. 追従させる中身は必ず .pc-side-inner に入れる
        （伸びた .pc-side の中を position:sticky で移動して上端で止まる）。
   寸法・余白・装飾（gap や寄せ方など）は案件ごとに人間が足す。
   ============================================================ */
.pc-frame {
  background-color: #f4f4f4;
  width: 100%;
  display: flex;
  justify-content: center;   /* 中央ラッパーを帯の中心に固定 */
  align-items: stretch;      /* ★左右カラムを本文の高さまで伸ばす（sticky成立の前提） */
}
.pc-main {
  /* 本文ラッパー（見た目の本文領域）。中の .main-content は margin:0 auto で中央 */
  flex: 0 0 50%;                          /* 帯(.pc-frame)の50%（--wrap=50%・左右スティッキーが残りを等分） */
  min-width: calc(750 * var(--dpx));      /* 本文より狭くならない保険 */
}
.pc-side { flex: 1 1 0; }                /* 左右は余白を等分＝中央が常に中心・本文高までstretch */
.pc-side-inner {
  position: sticky;          /* ★スクロール追従（伸びた.pc-side内を移動して上端で止まる） */
  top: 0;
}

/* PC専用の上書き・コンテンツ（固定FV画像・サイドナビ等）はこれから記述 */

/* FVアセットはPCでは非表示（PCはFVを使わない） */
.fv-image01 { display: none; }

/* 追従グループを pc-main の端に寄せる。
   本文列 .main-content(30vw) は pc-main(50vw) の中央にあり、片側の設計余白は
   (50vw - 30vw)/2 = 10vw。グループはこの余白ぶん外へ transform で出す＝pc-main の端に一致。
   translateX は sticky の追従計算に影響しない（縦追従はそのまま）。
   LOOKナンバーはグループ内の absolute なので一緒にずれる（個別指定不要）。
   ※ scaffold の wrap(50%)・コンテンツ幅(30vw) 前提。値を変えたらこの 10vw も見直す。 */
.fv-heading01 { transform: translateX(10vw); }


/* pc-head / pc-foot：CMS共通CSSの .pc-header / .pc-footer と衝突するため改名済み */
.pc-head {
   position: relative;
   & > img {
      width: 100%;
      height: 100vh;
      object-fit: cover;
   }
}

.pc-head-title {
   width: calc(609 * (100vw / 1400));
   position: absolute;
   top: calc(290 * (100vw / 1400));
   left: calc(250 * (100vw / 1400));
   img {
      width: 100%;
      height: auto;
      vertical-align: top;
   }
}

/* 左スティッキーのMV：カンプ＝列700pxに対し画像660px（左右20ずつ）。
   %padding は幅基準で四辺同値＝天地にも同じ実寸の余白が付く。
   画面高いっぱいの箱の中で天地中央、縦がはみ出す低い画面では contain で縮む */
.pc-side-left {
   .pc-side-inner {
      box-sizing: border-box;
      height: 100vh;
      padding: calc(20 / 700 * 100%);
      display: flex;
      align-items: center;      /* 天地中央 */
      justify-content: center;
   }
   img {
      width: 100%;               /* padding済みの内側幅＝列の660/700 */
      height: 100%;
      object-fit: cover;
   }
}

/* ==== ホバーフェード（anim-hover-fade） ====
   HTML側：効かせたい要素に目印クラス anim-hover を付けるだけ（動きを知らない）。
   PC専用（このファイルは pc.html だけが読む＝SPには一切出ない）。
   @media (hover: hover) は「hoverできる入力装置」限定の保険
   （PCページをタッチ端末で開いたときの張り付き防止）。
   透け具合・速さ・動きを変えたいときはこのブロックだけ触る。 */
@media (hover: hover) {
  .anim-hover { transition: opacity 0.3s; }
  .anim-hover:hover { opacity: 0.6; }
}