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

:root {
  /* PC本文の寸法基準（内部数値はSPと同じ750px幅カンプ基準を流用）。
     コンテンツ幅 = min(35vw, 490px)
       ・35vw = 490/1400 → 画面幅1400px未満は画面に比例して縮む
       ・1400px以上は 490px で頭打ち＝固定
     その幅を 750 で割り「カンプ1px→実寸」の単位にする。 */
  --dpx: calc(min(35vw, 490px) / 750);
}

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

/* ============================================================
   PCレイアウト土台（中央本文ラッパー＋左右スティッキー）
   帯 .pc-frame は常に画面いっぱい（width:100%）。.pc-main も帯の50%のまま
   画面と一緒に広がる＝画面全体を使う構造は維持。1400px以上で固定される
   のはメインコンテンツ .main-content（490px）だけ。
   .pc-main ＝「見た目の本文領域」（本文＋左右のデザイン余白）。
   左右スティッキーはこのラッパーの外縁に接する。
   ▼スティッキー成立の前提（この2つは崩さない）
     1. .pc-frame を display:flex; align-items:stretch にして
        左右カラム(.pc-side)を本文の高さまで伸ばす。
     2. 追従させる中身は必ず .pc-side-inner に入れる
        （伸びた .pc-side の中を position:sticky で移動して上端で止まる）。
   寸法・余白・装飾（gap や寄せ方など）は案件ごとに人間が足す。
   ============================================================ */
.pc-frame {
  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 {
  height: calc(100vh - 80px);
  position: sticky;
  top: 80px;
}


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

.hero-image {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
}
.hero-title {
  width: 100%;
  position: absolute;
  bottom: 60px;
  left: 0;
  text-align: center;
  .hero-title-inr {
    /* 1400px以上は477px固定・未満は画面幅に比例して可変（--dpxの頭打ち機構に相乗り）。
       係数730 = 477 ÷ (490/750)＝1400px時に477pxになる値。 */
    width: calc(730 * var(--dpx));
    display: inline-block;
    img {
      width: 100%;
      height: auto;
      vertical-align: top;
    }
  }
}

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