@charset "UTF-8";

/*==================================================================================
  14-42_35-56_3_top.css  ―  基本情報（トップ）ページ専用【PC】

  OMDS M.ZUIKO DIGITAL 14-42mm F3.5-5.6 III
  ---------------------------------------------------------------------------------
  【読み込み方】ページの「追加ヘッダー情報（PC）」から読み込む。SPは *_top_sp.css。

  ---------------------------------------------------------------------------------
  【方針】100-400mm II 基本情報ページ（#prdTop_mv）の**完全トレース**。
    採取元: download_pages/2026-08-15-02/…/100-400_50-63is_2/
            css/top-100-400_50-63is_2_pc.css / js/top-100-400_50-63is_2.js

    差し替えるのは画像と原稿だけ。仕掛けは元ページのまま使う。

  【元ページの仕掛け（3点セット）】
    1. 背景も見出し・レンズも **position: fixed** で画面に貼り付ける（sticky ではない）
    2. 後続ブロックを `position:relative` ＋ 背景色で覆い、貼り付いた層を隠す
       → **余白は margin ではなく padding で作る。** margin には背景が乗らず、
         そこだけ固定背景が透けるため（実測で241pxの透けが発生した）
    3. スクロールが閾値を超えたら #prdTop_mv ごと opacity:0 にする（JS側）

  【本案件の器に合わせて変えた点】
    ・元ページのヘッダーは固定で `bg-inner { top: 112px; }`。本案件の器のヘッダーは
      通常時 position:relative のため `top: 0` とし、ヘッダー(z-index:100/999)が
      固定背景(z-index:0)の上に来る積み重ねで解決している。
    ・書体は元ページの明朝ではなく、本案件カンプのゴシックに合わせている。

  【結界】body#page-item-detail.lens-14-42_35-56_3
==================================================================================*/
#page-item-detail.lens-14-42_35-56_3 {
  /* --- パンくずを隠す（元ページと同じ） ---------------------------------------- */
  /* 固定した層は overflow を抜けるため、MVより上に在る要素を覆ってしまう */
}

#page-item-detail.lens-14-42_35-56_3 .block-breadcrumb-wrap {
  display: none;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* --- ヘッダー帯を低くする（修正依頼 P1 / 2026-08-17） ------------------------ */
  /* ★このファイルには書かない。4ページで高さを揃えるため、指定は
       **共通ヘッダーブロック**（14-42_35-56_3--common）の <style> へ移した。
       2026-08-27 に _base/_ヘッダー高さ調整.ejs から移設。共通ヘッダーは5ページで
       共有される唯一のブロックのため、そこに置けば貼り忘れが構造的に起きない。
       トップ専用CSSは下層3ページが読まないため、ここに置くとトップだけ低くなる。 */
  /* --- MVの帯 ----------------------------------------------------------------- */
}

#page-item-detail.lens-14-42_35-56_3 #prdTop_mv {
  position: relative;
  height: 100vh;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* --- 背景（画面に貼り付け） -------------------------------------------------- */
}

#page-item-detail.lens-14-42_35-56_3 .js-prllx-bg .bg-inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* ⚠ .swiper-wrapper と .swiper-slide(.bg-img__item) には触らないこと（2026-08-17）
       Swiper の fade は「スライドを横一列に並べ、transform で同じ位置へ引き戻して重ね、
       opacity で切り替える」仕組み。その前提が .swiper-wrapper { display: flex; }。
       ここを display:block にすると各スライドの offsetLeft が全部 0 になり、
       引き戻し量も 0 → 重ならず縦積みになる。しかも fade の既定は crossFade:false で
       前のスライドが opacity:1 のまま残るため、**送りは動いているのに見た目が変わらない**。
       （STG実機で発生。slide-active は移動していたが transform が全て translate3d(0,0,0) だった）
       Swiper本体のCSSが wrapper の flex / height:100% も slide の height:100% も持っているので、
       こちらで指定する必要は無い。 */
}

#page-item-detail.lens-14-42_35-56_3 .js-prllx-bg .bg-inner .bg-img,
#page-item-detail.lens-14-42_35-56_3 .js-prllx-bg .bg-inner .bg-img__slide,
#page-item-detail.lens-14-42_35-56_3 .js-prllx-bg .bg-inner picture {
  display: block;
  height: 100%;
}

#page-item-detail.lens-14-42_35-56_3 .js-prllx-bg .bg-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* --- 見出し・レンズ（画面に貼り付け） ---------------------------------------- */
  /* ⚠ 生の vh/vw はここ2箇所だけ（後審 2026-08-27）。
     トレース元（100-400mm II）の実装をそのまま採用したもので、MVを画面に貼り付ける
     仕掛けの一部。ビューポート基準が意図された挙動のため許容。PC専用CSSのため
     SP絶対値ポリシーの対象外。他の可変値は calc(N / 1920 * 100vw) で設計値から導出している */
}

#page-item-detail.lens-14-42_35-56_3 .main-read-item {
  position: fixed;
  top: calc(327px + 5vh);
  left: 5vw;
  z-index: 0;
  width: -webkit-fit-content;
  width: fit-content;
  color: #fff;
  pointer-events: none;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 元ページと同じ。DOM順は画像→テキストで、column-reverse により文字が上に来る */
}

#page-item-detail.lens-14-42_35-56_3 .main-read-item .inner {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-direction: column-reverse;
}

#page-item-detail.lens-14-42_35-56_3 .main-read-item .mv-img-wrap .lenz-img {
  width: 12.65625vw;
}

#page-item-detail.lens-14-42_35-56_3 .main-read-item .mv-img-wrap .lenz-img img {
  width: 100%;
  height: auto;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 余白は padding で作る（margin は使わない） */
}

#page-item-detail.lens-14-42_35-56_3 .main-read-item .lenz-name {
  margin: 0;
  padding-bottom: 0.5208333333vw;
  font-size: 1.8229166667vw;
  font-weight: bold;
  line-height: 1.1;
}

#page-item-detail.lens-14-42_35-56_3 .main-read-item .lenz-text {
  margin: 0;
  font-size: 0.78125vw;
  line-height: 1.4;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 明るいカットでも文字が沈まないようにする（元ページと同じ） */
}

#page-item-detail.lens-14-42_35-56_3 .main-read-item p {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.8));
}

#page-item-detail.lens-14-42_35-56_3 {
  /* --- MVより後ろのブロック ---------------------------------------------------- */
  /* 貼り付いた層を隠すため、背景色で覆って重ね順を上げる。
     **余白は margin を全て 0 にし、padding で作り直す。**
     margin には背景色が乗らず、そこだけ固定背景が透けてしまうため。
     値は改修前の実測（ブロック間の隙間 100 / 80 / 80 / 10px）をそのまま再現している。 */
}

#page-item-detail.lens-14-42_35-56_3 .block-read-area,
#page-item-detail.lens-14-42_35-56_3 .block-topics-area,
#page-item-detail.lens-14-42_35-56_3 .block-contents-area,
#page-item-detail.lens-14-42_35-56_3 .block-item-detail,
#page-item-detail.lens-14-42_35-56_3 .block-itemhistory--wrap {
  position: relative;
  z-index: 1;
  margin: 0;
  background-color: #fff;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 020 PICK UP も同じく前面へ出す（2026-09-04 追加）
     MVの .bg-inner は position:fixed + z-index:0 の「配置済み」レイヤー。
     対して素の .block-bnr-area は position:static ＝ z-index が効かないため、
     **配置済みの固定背景に覆われてMV区間を過ぎるまで見えなかった。**
     上の一覧に入れなかったのは背景色の違いだけが理由なので、
     background-color は共通CSSの #434343 のまま position/z-index だけ与える。 */
}

#page-item-detail.lens-14-42_35-56_3 .block-bnr-area {
  position: relative;
  z-index: 1;
  margin: 0;
}

#page-item-detail.lens-14-42_35-56_3 .block-read-area {
  padding-top: 100px;
  /* MVとの間 */
  padding-bottom: 80px;
  /* topics との間。元は p.is-read の margin-bottom:80px */
}

#page-item-detail.lens-14-42_35-56_3 {
  /* サイトCSSの margin-bottom:80px が親を突き抜けて透けの隙間になる（マージンの相殺）。
     余白は上の padding-bottom へ移した */
}

#page-item-detail.lens-14-42_35-56_3 .block-read-area .is-read {
  margin-bottom: 0;
  line-height: 1.5;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 文字サイズ・書体をカンプ値へ（サイト既定は明朝53.2px / 本文16.8px と食い違う）。
     カンプの見出しはゴシック（NotoSansJP-Bold #333）。is-mincho の明朝指定を打ち消す */
}

#page-item-detail.lens-14-42_35-56_3 .block-read-area h2 {
  font-family: "Noto Sans JP", "Noto Sans Japanese", sans-serif;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.3;
  /* カンプ実測: 行送り42px ÷ 32px ＝ 1.30 */
  color: #333;
  margin-bottom: 25px;
}

#page-item-detail.lens-14-42_35-56_3 .block-read-area .is-read {
  font-size: 18px;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* リード文の脚注マーカー「*」だけ 18px（契約者指定 2026-09-07）。
     既定は親32pxの30%＝9.6pxで小さすぎるため。
     ⚠ **ここだけに当てる**。当てすぎないよう二重に絞ってある:
       ・このファイル（_top.css）は**トップページの追加ヘッダからしか読まれない**。
         製品特長ページは common_item_patch しか読まないので、あちらの
         h2「防塵・防滴対応<sup>*</sup>」には**波及しない**（実測で確認）
       ・セレクタも .block-read-area h2 sup に限定（ページ内の他の sup を巻き込まない）
     line-height: 0 を添えるのは、18pxへ上げると sup の行ボックスが親の行送り
     （32px×1.3＝41.6px）を押し広げて**見出しの行間が開くため**。
     0 にすると行送りの計算から外れ、vertical-align: super の位置だけが残る。 */
}

#page-item-detail.lens-14-42_35-56_3 .block-read-area h2 sup {
  font-size: 18px;
  line-height: 0;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 中身が空の器。元の余白（margin上下80・padding上80）を padding だけで再現する。
     上の80は read 側の padding-bottom が担うため、ここは元の padding-top 80 と
     contents との間の 80 を padding-bottom に持つ */
}

#page-item-detail.lens-14-42_35-56_3 .block-topics-area {
  padding-top: 80px;
  padding-bottom: 80px;
}

#page-item-detail.lens-14-42_35-56_3 .block-contents-area {
  padding-top: 0;
  padding-bottom: 10px;
  /* 商品情報との間 */
}

#page-item-detail.lens-14-42_35-56_3 {
  /* --- 050 コンテンツ（01/02トピック）をカンプの構成へ ------------------------- */
  /* サイト既定（common_item.css）は「灰色帯・50/50・奇数は画像左・ボタン右下」で
     カンプ（白地・テキスト細列＋大判画像・01はテキスト左・青ピルボタン）と正反対。
     ここで全て上書きする。数値はカンプ実測（幅1400相当の列・画像は原寸表示）。 */
}

#page-item-detail.lens-14-42_35-56_3 .item-point {
  max-width: 1400px;
  margin: 0 auto;
  /* 横センタリングのみ。縦余白は padding で作る */
  padding: 0 20px;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  margin-bottom: 0;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 2件目以降との間隔（カンプ実測 約128px） */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail+.point-detail {
  padding-top: 128px;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 左右交互（カンプ準拠）: 01=テキスト左/画像右、02=画像左/テキスト右。
     サイト既定は奇数で画像左に置くため、奇数・偶数とも明示して入れ替える */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail:nth-child(odd) .detail-text {
  order: 0;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail:nth-child(odd) .img-block {
  order: 1;
  text-align: left;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail:nth-child(even) .detail-text {
  order: 1;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail:nth-child(even) .img-block {
  order: 0;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text {
  width: auto;
  max-width: none;
  padding: 0 40px 0 0;
  flex-shrink: 0;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail:nth-child(even) .detail-text {
  margin-left: 0;
  padding: 0 0 0 40px;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .point-num {
  margin: 0;
  padding-bottom: 12px;
  color: #2D82C1;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text h2 {
  margin: 0;
  padding-bottom: 28px;
  color: #333;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 画像は原寸で右（or左）に置く。
     ⚠ PC素材は 2026-08-26 に**角丸なしの矩形**へ差し替えた（旧素材は角丸を白で焼き込み済みだった）。
       PCの角丸はCSS側（下の 050 ホバー演出ブロック）が作る。
       SP素材（`_sp.jpg`）は焼き込みのまま＝`_sp.scss` 側は従来どおり角丸指定なし */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block {
  width: auto;
  flex: 0 1 auto;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* --- 050 ホバー演出（2026-08-26 / PC素材の差し替えに合わせて再構成） -------------
       ①②画像（マスクグループ582/583）… ホバーで画像だけが拡大。器は不動
       ③詳細を見るボタン … 塗りと枠は不動で、文字と矢印だけを透過する

     ◆ 角丸20px（XD: 長方形59113/59114 r=[20,20,20,20]）は**CSSが作る**。
       PC素材を角丸なしの矩形へ差し替えたため、器の
       `border-radius` + `overflow: hidden` が唯一の角丸になった。
       拡大しても角の形が崩れないのはこの器が切り抜いているから。

     ◆ `transform: translateZ(0)` は器を合成レイヤーへ昇格させる指定。二役ある。
       1. 角丸クリップ付きの要素はGPU合成に載らず毎フレーム再描画になり、
          拡大がカクつく。昇格させるとクリップがコンポジタ側で処理される
       2. **中の img が `will-change: transform` で自前のレイヤーを持つと、
          親の角丸クリップが効かず角が四角く出るエンジンがある**（Safari系）。
          親を先に昇格させておくと角丸がレイヤーのマスクとして適用され回避できる
       `-webkit-mask-image` は上記2の旧Safari向けの保険 */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block {
  overflow: hidden;
  border-radius: 20px;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 画像リンク。器いっぱいに広げてホバー判定面とする */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block a {
  display: block;
  text-decoration: none;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block a:hover,
#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block a:focus {
  opacity: 1;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* 拡大の質感（2026-08-26 契約者指示で調整）:
       ・0.3s / 3% では変化が短く小さすぎて「一瞬で終わる」＝ぎこちなく見えた
       ・0.7s / 6% ＋ easeOutCubic 相当のベジェで、
         入りが速く終端がゆっくり止まる減速カーブにする
       ・will-change / backface-visibility はラスタライズを事前に確保し、
         拡大中の再ラスタライズによるチラつきを防ぐ */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  backface-visibility: hidden;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block a:hover img,
#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .img-block a:focus img {
  transform: scale(1.06);
}

#page-item-detail.lens-14-42_35-56_3 {
  /* ボタン。矢印(::after)は border 色を currentColor にして文字色へ追従させる */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text .detail-btn a {
  transition: color 0.3s ease-out;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text .detail-btn a:hover,
#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text .detail-btn a:focus {
  opacity: 1;
  color: rgba(255, 255, 255, 0.5);
}

#page-item-detail.lens-14-42_35-56_3 {
  /* ボタン: サイト既定(右下絶対配置・丸矢印)をやめ、カンプの青ピルにする。
     margin-top:20px も殺す（余白は h2 の padding-bottom が担う） */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text .detail-btn {
  position: static;
  margin: 0;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* ボタン: PCカンプ `_notes/修正資料_260817_全体/PC_OM_14-42lll.jpg` の実測（2026-08-17 修正依頼 P5）
       カンプは1680px＝設計値と等倍のため、採寸値をそのままCSS pxに使える。
       133×40 / 塗り #2D82C1 / 線 #027FC1 1px / 文字16px Medium #FFF / 完全なピル
       内訳: 左22 ＋ 文字78(16px×5字) ＋ 間10 ＋ 矢印5 ＋ 右19 ＝ 134（実測133・丸め1px）
     ※XDの図形データはSPにしか無い（PCアートボードにボタンの要素が存在しない）。
       PCはカンプ画像からの実測。SPは 122×36 / 14px で別値（_sp.scss 側） */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text .detail-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 133px;
  height: 40px;
  padding: 0;
  background-color: #2D82C1;
  border: 1px solid #027FC1;
  border-radius: 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  /* XD: NotoSansJP-Medium */
  line-height: 1;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* サイト既定のアイコン2種のうち ::before（25×25の丸枠）だけ殺す。
     ::after（山括弧の矢印）は**カンプにも在る**ため、白・右寄せに作り替えて活かす。
     サイト既定は absolute / left:8px / 6×6 / #333 なので位置・寸法・色を上書きする */
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text .detail-btn a::before {
  content: none;
}

#page-item-detail.lens-14-42_35-56_3 .item-point .point-detail .detail-text .detail-btn a::after {
  content: "";
  position: static;
  width: 5px;
  height: 5px;
  margin: 0;
  /* currentColor 指定。ホバー時に文字色と一緒に透過させるため */
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  border-bottom: 0;
  border-left: 0;
  transform: rotate(45deg);
  transition: border-color 0.3s ease-out;
  /* 文字との間隔。flexのgapはiOS Safari 14.1未満が未対応のため margin で作る */
  margin-left: 10px;
}

#page-item-detail.lens-14-42_35-56_3 {
  /* --- 060 基本情報 -------------------------------------------------------- */
  /* 見出しも 2026-09-04 に**サイト既定へ戻した**（契約者判断）。
     表だけ戻すと見出しとの釣り合いが崩れるため、基本情報セクションごと参照元に揃える。
     撤去後は common_item.css の `.block-item-detail h2 { font-size:2.4em; padding:70px 0 50px;
     text-align:center }` が効き、参照元の実測と一致する（33.6px / weight 400 / #404040）。

     ▼ 初期構築で当てていたXDカンプ値（復活させたくなったらこれを戻す）
     .block-item-detail h2 {
       font-size: 32px;
       font-weight: bold;
       color: #000;
     }
  */
  /* 表は 2026-09-03 依頼で**サイト既定へ戻した**。
     依頼原文（修正まとめ_260901.xlsx TOPシート図形）:
       「基本情報の余白やフォントサイズが大きいので、下記余白、フォントサイズに
         合わせていただきたいです ▼流用 …/premi/17_18_2/index.html」
     初期構築ではXDカンプ値（20px・padding 58px 25px・th 400px・境界2px）を
     当てていたが、依頼で参照元＝サイト既定に揃えることになったため**上書きを撤去**した。
     撤去後は common_item.css の値がそのまま効く（参照元の実測と一致）:
       th/td 16.8px(1.2em) / padding-top・bottom 35px
       th padding-left 20px・width 30%・border-bottom 1px solid #000
       td padding-left 50px・width 80%・border-bottom 1px solid #dfdfdf
     ※ ここに指定を足さないこと。足した瞬間に参照元とズレる。

     注記も同様に font-size の上書きを撤去（表 16.8px より大きい 20px が残ると逆転するため）。
     ::before の「*」打ち消しだけは残す（本文が既に「※」を持ち二重マーカーになるため・契約者指定）。 */
}

#page-item-detail.lens-14-42_35-56_3 .block-item-detail .noticeList li::before {
  content: none;
}