/*
 * 商品詳細ページ共通レイアウト（2026-10-23）
 * 対象：main.pvc-page を持つ詳細ページ（membership-point-card.html など28ページ）。
 *
 * 方針（Appleの製品ページと同じ考え方。文字・画像・ボタンの大きさは変えず、面積だけを決める）
 *  - 各ブロックの中身の幅＝画面の87.5%（左右6.25%ずつ余白）、最大1440px。
 *  - ファーストビューは角丸28の白いカードを背景の上に浮かせる。どの画面幅でもカードのまま。
 *  - 背景の銀灰色は --detail-page-bg に統一する（以前は #f4f3f8 / #f5f5f7 / #fbfbfd が混在）。
 */
:root {
  --detail-page-bg: var(--page-bg-silver);
  --detail-width: var(--layout-width);
  --detail-radius: 28px;
}

/* ---- 背景色の統一 ---- */
html body main.pvc-page,
html body main.pvc-page .pvc-hero,
html body main.pvc-page .member-services-section,
html body main.pvc-page .member-order-journey,
html body main.pvc-page .pvc-spec-block.desktop-spec-redesign,
html body main.pvc-page .csd-hero {
  background-color: var(--detail-page-bg) !important;
}
html body main.pvc-page .card-type-nav {
  background: #fff !important;
}

/* ---- 幅：全ブロックを同じ幅にそろえる ---- */
html body main.pvc-page > nav > .container,
html body main.pvc-page > section > .container,
html body main.pvc-page > section.container {
  width: var(--detail-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* ID卡系ページはサンプル申込ブロックとその直前のブロックをID指定で1280pxに固定しているため、同じ強さで上書きする */
html body main.pvc-page .pvc-section:has(+ #card-sample-request) > .container,
html body main.pvc-page #card-sample-request > .container {
  width: var(--detail-width) !important;
  max-width: none !important;
}
/* 白い枠のブロック（基本仕様・料金表など）は枠の内側の余白をそのまま残す */
html body main.pvc-page > nav > .container,
html body main.pvc-page > section:not(.detail-spec-frame):not(.detail-unified-frame) > .container,
html body main.pvc-page > section.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body main.pvc-page .member-order-journey {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ---- ファーストビュー：浮いた白いカード（2種類の構造どちらにも効く） ---- */
html body main.pvc-page .pvc-hero {
  padding: 32px 0 !important;
}
@media (min-width: 1441px) {
  html body main.pvc-page .pvc-hero {
    padding-top: 48px !important;
  }
}
html body main.pvc-page .pvc-hero::before,
html body main.pvc-page .pvc-hero::after {
  display: none !important;
}
html body main.pvc-page .pvc-hero > .container {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body main.pvc-page .pvc-hero .employee-card-intro-v2,
html body main.pvc-page .pvc-hero .pvc-hero-layout,
html body main.pvc-page .pvc-hero .pvc-feature-band {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  border-radius: var(--detail-radius) !important;
  box-sizing: border-box !important;
}
html body main.pvc-page .pvc-hero .employee-card-intro-v2,
html body main.pvc-page .pvc-hero .pvc-hero-layout {
  margin-top: 0 !important;
  padding: clamp(40px, 5.5vw, 80px) clamp(32px, 6.25vw, 90px) !important;
}
html body main.pvc-page .pvc-hero .employee-card-intro-v2::before,
html body main.pvc-page .pvc-hero .employee-card-intro-v2::after {
  display: none !important;
}
html body main.pvc-page .pvc-hero .pvc-feature-band {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding: 28px clamp(16px, 2vw, 48px) !important;
  column-gap: 12px !important;
}
/* 見出しは単語の途中で折り返さない（「・」の後ろに <wbr> を入れたページはそこで折り返す） */
html body main.pvc-page .pvc-hero .pvc-product-title-compact {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* ---- カードを選ぶ（会員カード）：カードが広くなってもボタンは伸ばしすぎない ---- */
html body main.pvc-page .member-choice-section .member-choice-grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html body main.pvc-page .member-choice-section .member-choice-footer {
  grid-template-columns: repeat(2, minmax(0, 240px)) !important;
}

/* Uniform navigation thumbnail canvases; preserve every source image ratio. */
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image{display:flex!important;align-items:center!important;justify-content:center!important;width:76px!important;height:52px!important;padding:0!important;margin:0 auto 9px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;box-sizing:border-box!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;margin:0!important;padding:0!important;transform:none!important;border:0!important;box-shadow:none!important}

/* Clip source-image edge shadows only in compact navigation previews. */
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img{filter:none!important;outline:0!important;clip-path:inset(2% round 4px)}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card13."]{clip-path:inset(7% 5% round 5px)!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card29."]{clip-path:inset(13.5% 9% 11% round 5px)!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card5."]{clip-path:inset(1% 2% 2.5% 0 round 5px)!important}

html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card21."]{clip-path:inset(16% 10.8% 13% 10.8% round 4px)!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card34."]{clip-path:inset(17.2% 11% 19% 8.5% round 4px)!important}

/* Compensate for larger source-image margins without changing card proportions. */
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="Copilot_20260528_180458."]{transform:scale(1.65)!important;transform-origin:50% 48%!important;clip-path:inset(25% 25% 27% 23% round 3px)!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card34."]{transform:scale(1.13)!important;transform-origin:49% 49%!important}

/* Slightly smaller, optically balanced product thumbnails. */
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image{width:64px!important;height:44px!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card13."]{transform:scale(1.04)!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card21."]{transform:scale(1.18)!important;transform-origin:50% 52%!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card29."]{transform:scale(1.14)!important;transform-origin:50% 51%!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card34."]{transform:scale(1.2)!important;transform-origin:49% 49%!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="Copilot_20260528_180458."]{transform:scale(1.78)!important;transform-origin:49% 48%!important}
html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card5."]{transform:scale(.94)!important}

html body main.pvc-page .card-type-nav .card-type-mini-card.has-image img[src*="card16."]{transform:scale(1.25)!important;transform-origin:center!important}