@charset "utf-8";

/* ==============================================
   アウター特集2026 — スタンドアロンCSS（このLPのCSSはこの1ファイルのみ）
   (_system/base.css + _system/components.css + テーマを統合済み)
   index_local.html（ローカル確認用）・index.html（W2本番用）の両方から
   このファイルを直接読み込む。編集はこのファイルだけでOK。
   ============================================== */

/* ======================
   CSS Variables（テーマ）
   ====================== */
:root {
  /* --- Brand Colors --- */
  --lp-primary:     #2996CC;
  --lp-primary-dark:#1A6FA0;
  --lp-accent:      #C17A4D;
  --lp-accent-dark: #A6603A;

  /* --- Text --- */
  --lp-text-main:   #1A1A1A;
  --lp-text-sub:    #777777;
  --lp-white:       #FFFFFF;
  --lp-black:       #1A1A1A;

  /* --- Background --- */
  --lp-bg-body:     #1A1A1A;
  --lp-bg-main:     #FFFFFF;
  --lp-bg-alt:      #F5F5F5;

  /* --- Typography ---
       このLPはOutfit(英字)+Zen Kaku Gothic Antique(和文)を使う */
  --lp-font-base:   'Zen Kaku Gothic Antique', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --lp-font-en:     'Outfit', 'Helvetica Neue', sans-serif;

  /* Adobe Fonts「Brush Up」の代用（本番は見出しを画像化してここを使わなくなる想定） */
  --oc-brush: 'Permanent Marker', cursive;
  --oc-ink:   #1a1a1a;
  --oc-line:  #e5e5e5;

  /* セクション別カラー（ダルトーン＝くすんだ中間色。PCのタブと同じ色にして付箋のように見せる）
     色付きの面に直接のる小さな文字は、グレー(#777)だと読みにくいので ink にしている
     （.oc-staff__comment / .oc-recommend__note / .oc-recommend__comment） */
  --oc-price-color:  #B99D64;
  --oc-design-color: #BB7958;
  --oc-staff-color:  #95A06A;

  /* アウター早割10%OFFの価格表示(.oc-sale)の色。早割バナー(images/261021_outer_hayawari_1040.jpg)の「10%OFF」の濃い赤に合わせた */
  --oc-sale-color:   #832421;

  /* STAFFセクション内「RECOMMEND」エリアの背景。いまはSTAFF記事(--oc-staff-bg)と同じ薄い黄緑（ユーザー指定） */
  --oc-recommend-bg: #EAF3C8;

  /* STAFF記事(.oc-staff)の背景。セクションの背景(--oc-staff-color)の上に、記事ごとのカードとして載る薄い黄緑 */
  --oc-staff-bg: #EAF3C8;

  /* STAFF記事どうしのすき間（セクションの背景のオリーブが見える）と、スタッフ写真(.oc-staff__photo)の縁取り・影 */
  --oc-staff-gap: 24px;
  --oc-staff-photo-border: #FFFFFF;
  --oc-staff-photo-shadow: 4px 4px 0 var(--oc-staff-color);

  /* OTHER ITEM（注力品番以外のアウター）セクションの背景。白いカード・白背景の商品写真がなじみすぎない薄いグレー */
  --oc-other-bg: #EBEBEB;

  /* --- Spacing --- */
  --lp-section-py:    56px;
  --lp-section-px:    24px;
  --lp-section-py-pc: 72px;
  --lp-section-px-pc: 48px;

  /* --- Layout --- */
  --lp-max-width:    650px;
  --lp-max-width-pc: 650px;

  /* --- Radius --- */
  --lp-radius-sm:  8px;
  --lp-radius-md:  16px;
  --lp-radius-lg:  20px;
  --lp-radius-pill:60px;

  /* --- Shadow --- */
  --lp-shadow-card:  0 4px 20px rgba(0,0,0,.08);
  --lp-shadow-hover: 0 12px 36px rgba(0,0,0,.14);
  --lp-shadow-wrap:  0 0 40px rgba(0,0,0,.18);

  /* --- Transition --- */
  --lp-ease: cubic-bezier(.25, 1, .5, 1);
  --lp-duration: .8s;
}

/* ======================
   Reset
   ====================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--lp-font-base);
  font-size: 1.4rem;
  color: var(--lp-text-main);
  background: var(--lp-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

li { list-style: none; }

a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ======================
   W2 Vendor Overrides（完全版）
   #tblLayoutはtable-layout:fixed必須。無いとSPでコンテンツ幅がはみ出すバグが既知。
   参照: ec/自社/LP/osoroi/css/style.css、feedback_w2_lp_markup_rules.md
   ====================== */
.global-header,
.l-header,
.p-header,
.p-product-list__category-title { display: none; }

.global-contents__inner {
  width: 100% !important;
  padding: 0 !important;
}

#tblLayout { width: 100% !important; table-layout: fixed !important; }
#tblLayout td:has(#lp-wrap) { width: 100% !important; }
#tblLayout td:not(:has(#lp-wrap)) { width: 0 !important; }

table { border-collapse: collapse; margin: 0; padding: 0; }
td, th { padding: 0; margin: 0; }

main + div { display: none; }
main.global-contents { min-width: 0; }

/* ======================
   Responsive Utilities
   ====================== */
.sp-only { display: block; }
.pc-only { display: none; }

@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: block; }
}

/* ======================
   LP Wrapper
   sticky なタブナビを使うため overflow は visible にする
   （hiddenだとposition:stickyの基準がずれる環境があるため）
   ====================== */
.lp-wrap {
  width: 100%;
  max-width: var(--lp-max-width);
  margin: 0 auto;
  overflow: visible;
  background: var(--lp-bg-main);
  box-shadow: var(--lp-shadow-wrap);
}

@media (min-width: 640px) {
  .lp-wrap {
    max-width: var(--lp-max-width-pc);
  }
}

/* ======================
   Hero Section
   ====================== */
.lp-hero {
  position: relative;
  overflow: hidden;
}

.lp-hero__kv img {
  display: block;
  width: 100%;
}

.lp-hero__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--lp-black);
  padding: 14px var(--lp-section-px);
  border-top: 1px solid rgba(255,255,255,.07);
}

.lp-hero__bar-text {
  color: var(--lp-white);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .1em;
}

/* ======================
   Section Base
   ====================== */
.lp-section {
  padding: var(--lp-section-py) var(--lp-section-px);
}

.lp-section--white { background: var(--lp-white); }
.lp-section--alt   { background: var(--lp-bg-alt); }
.lp-section--dark  { background: var(--lp-black); color: var(--lp-white); }

.lp-section--center { text-align: center; }

@media (min-width: 640px) {
  .lp-section {
    padding: var(--lp-section-py-pc) var(--lp-section-px-pc);
  }
}

/* ======================
   Section Header
   ====================== */
.lp-section-head {
  text-align: center;
  margin-bottom: 40px;
}

.lp-section-head__en {
  display: block;
  font-family: var(--lp-font-en);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: 6px;
}

.lp-section-head__title {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--lp-text-main);
  letter-spacing: .1em;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.lp-section-head__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: var(--lp-accent);
  border-radius: 2px;
}

/* ======================
   Lead Section（共感ゾーン）
   ====================== */
.lp-lead {
  background: var(--lp-white);
  text-align: center;
  padding: 52px var(--lp-section-px) 56px;
}

.lp-lead__badge {
  display: inline-block;
  background: var(--lp-accent);
  color: var(--lp-white);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 5px 22px;
  border-radius: 30px;
  letter-spacing: .12em;
  margin-bottom: 22px;
}

.lp-lead__title {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--lp-text-main);
  line-height: 1.45;
  letter-spacing: .04em;
  margin-bottom: 28px;
}

.lp-lead__title em {
  font-style: normal;
  color: var(--lp-accent);
}

.lp-lead__desc {
  font-size: 1.4rem;
  color: var(--lp-text-sub);
  line-height: 2;
}

@media (min-width: 640px) {
  .lp-lead__title { font-size: 3.4rem; }
}

/* ======================
   Buttons
   ====================== */
.lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--lp-accent);
  color: var(--lp-white);
  padding: 22px 28px;
  border-radius: var(--lp-radius-pill);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: .06em;
  max-width: 480px;
  margin: 0 auto;
  transition: opacity .3s, transform .2s;
  border: none;
  cursor: pointer;
}

.lp-btn:hover { opacity: .9; }
.lp-btn:active { transform: scale(.97); }

/* ======================
   Footer
   ====================== */
.lp-footer {
  background: var(--lp-black);
  color: rgba(255,255,255,.35);
  padding: 28px var(--lp-section-px);
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: .04em;
}

/* ======================
   Product Grid（商品一覧）
   ====================== */
.lp-product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

.lp-product-card {
  background: var(--lp-white);
  overflow: hidden;
  box-shadow: none;
  transition: transform .3s ease;
}

.lp-product-card:hover {
  transform: translateY(-4px);
}

/* 商品カードの画像はカラーバリエーションを切り替えるスライダーにする（js/script.js）
   画像の周りに余白(padding)を付ける。余白の大きさは --lp-slider-pad だけ変えればOK。
   ・下は0。直下の .lp-product-card__body の padding-top(12px)があるので、画像の四方がどれも同じ余白になる。
   ・画像の縦横比(aspect-ratio:1)は img 自身に持たせ、親の高さに対する割合(height:100%)は使わない。
     W2の table#tblLayout の中では、Safari(iPhone)が slides → slide → img と続く height:100% を解決できず、
     img が height属性(700px)の高さで描画されて、object-fit:cover により拡大表示になってしまうため。
     slider に padding と aspect-ratio を同居させるのも、Safariが余白込みの高さで計算して画像が縦に伸びるので避ける。
   ・padding だけだと overflow:hidden の切り取り位置が余白の外側になり、隣のスライドが余白に覗いてしまう。
     clip-path で画像エリア(余白の内側)ぴったりに切り取って防ぐ。 */
.lp-product-card__slider {
  --lp-slider-pad: 28px;
  position: relative;
  padding: 40px var(--lp-slider-pad) 0;
  overflow: hidden;
  clip-path: inset(40px var(--lp-slider-pad) 0);
  touch-action: pan-y;
}

.lp-product-card__slides {
  display: flex;
  width: 100%;
  transition: transform .3s ease;
}

.lp-product-card__slide {
  flex: none;
  width: 100%;
}

.lp-product-card__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.lp-product-card__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.lp-product-card__dot {
  appearance: none;
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(26,26,26,.3);
  cursor: pointer;
}

.lp-product-card__dot.is-active {
  background: var(--oc-ink);
}

/* PCではマウスで画像を左右にドラッグしてカラーを切り替えられる（js/script.js）。
   つかめると分かるよう、2枚以上あるカード（JSが .is-draggable を付ける）ではカーソルを「つかむ手」にする。
   ドラッグ中（.is-dragging）は画像がカーソルに遅れず付いてくるよう、スライドのアニメーション(transition)を止める。
   ドラッグで文字や画像が選択状態になって反転しないよう、選択も止める（画像そのものの引っ張り出しはJS側で止める） */
.lp-product-card__slider.is-draggable {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.lp-product-card__slider.is-dragging {
  cursor: grabbing;
}

.lp-product-card__slider.is-dragging .lp-product-card__slides {
  transition: none;
}

/* カラーのスウォッチ（商品画像と商品名の間の小さな四角）。1色につき1つ。押すとそのカラーの写真に切り替わる（js/script.js）。
   色は --swatch に入れる（単色は #RRGGBB、切替・柄は linear-gradient(...)。どれも写真の被写体から取った色）。
   写真を差し替えたら、HTMLの style="--swatch:..." も合わせて変える。
   淡い色が白いカードに溶けないよう薄い枠線を付け、選択中は外側に黒い輪を付ける。
   四角の大きさは --lp-swatch-size（24px。3色でも商品カードの幅に収まる） */
.lp-product-card__swatches {
  --lp-swatch-size: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 28px 0;
}

.lp-product-card__swatch {
  position: relative;
  appearance: none;
  width: var(--lp-swatch-size);
  height: var(--lp-swatch-size);
  padding: 0;
  border: 1px solid rgba(26, 26, 26, .18);
  border-radius: 2px;
  background: var(--swatch, #ccc);
  background-clip: padding-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 見た目(24px)より広い範囲（約32px四方）で押せるようにする */
.lp-product-card__swatch::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.lp-product-card__swatch.is-active {
  outline: 1.5px solid var(--oc-ink);
  outline-offset: 2px;
}

.lp-product-card__swatch:focus-visible {
  outline: 2px solid var(--oc-ink);
  outline-offset: 2px;
}

/* 1つのカラーに写真が2枚ある商品（M66102のリバーシブル：タフタ柄の面／ボアの面）。
   2枚を重ね、6秒周期で3秒ごとにパッと切り替える（RECOMMENDの写真と同じ動き）。
   透過PNGなので、1枚目を残したまま2枚目を重ねると、2枚目の縁から1枚目がはみ出して見える。
   そのため2枚とも交互に表示・非表示にする。フェードしないのも同じ理由（フェードすると2着が透けて重なる） */
.lp-product-card__slide--switch {
  position: relative;
}

.lp-product-card__slide--switch img {
  animation: oc-card-switch-a 6s step-end infinite;
}

.lp-product-card__slide--switch img + img {
  position: absolute;
  top: 0;
  left: 0;
  animation-name: oc-card-switch-b;
}

@keyframes oc-card-switch-a {
  0%  { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes oc-card-switch-b {
  0%  { opacity: 0; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-product-card__slide--switch img { animation: none; }
  .lp-product-card__slide--switch img + img { opacity: 0; }
}

.lp-product-card__body {
  padding: 12px 28px 40px;
}

.lp-product-card__name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lp-text-main);
  line-height: 1.4;
  margin-bottom: 8px;
}

.lp-product-card__price {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--oc-ink);
}

.lp-product-card__buy {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-family: var(--lp-font-en);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 8px;
  color: var(--lp-white);
  background: var(--oc-ink);
  border: 1px solid var(--oc-ink);
  border-radius: 2px;
  max-width: 100px;
}

@media (min-width: 640px) {
  .lp-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ======================
   画像プレースホルダー（ダミー表示用）
   実装時は <div class="ph"> を <img> に差し替える
   ====================== */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #eee 0 8px, #e2e2e2 8px 9px);
  color: #999;
  font-family: var(--lp-font-en);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .06em;
  overflow: hidden;
}

/* ======================
   スクロール・アンカー
   ====================== */
html { scroll-behavior: smooth; }
/* タブを押したとき、セクションの上端が「ページの上端」にぴったり合うようにする。
   --oc-nav-h は script.js が入れる値。SPは上端に張り付くタブバーの高さ（その下端にセクションが着く）、PCは0。
   JSが動かない環境では0（画面の最上端に着く） */
#price-select, #design-select, #staff-select {
  scroll-margin-top: var(--oc-nav-h, 0px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ======================
   HERO ROW（MOVIE + LEAD）
   SP: MOVIEは余白なしで横幅いっぱい・画面高さいっぱい(100vh)に最上部へ通常配置し、その下にLEADが続く縦積み。
       PCでは左半分に固定する横並びになる（下部のPCレイアウト参照）
   ====================== */
.oc-movie {
  padding: 0;
  height: 100vh;
}

.oc-movie__frame {
  height: 100%;
  padding: 0;
}

.oc-movie__ph {
  position: relative;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background: #000;
}

/* 動画（images/C0013.mp4）。ファイルは960×1080だが、左右に96pxずつ黒帯が焼き込まれていて、さらに5.9〜8.6秒だけ
   右側に12pxの黒い隙間が出る。そこで左右とも108pxずつ切り落とし、中央の744×1080だけを映像として扱う。
   SPでは、その映像の全体が .oc-movie__ph に収まる(contain)大きさにする。横幅いっぱいに映り、余った上下は黒背景が帯になる。
   切り落とした左右は枠の外へ追い出す。枠の大きさを cqw/cqh（.oc-movie__ph が container）で参照して計算している。
   動画を書き出し直したら下の3つの数値(px)を合わせる（帯なしで書き出したら --oc-video-pic-w を --oc-video-w と同じ値にする）。
   ※min を max に変えると contain ではなく cover（枠いっぱいに拡大して、はみ出した分を切る）になる
   ※PC(1024px〜)は下部のPCレイアウトで幅・高さ(100vh)・--oc-video-w を上書きしている（焼き込みの黒帯は .oc-movie__ph の黒背景になじませる） */
.oc-movie__video {
  --oc-video-w: 960;
  --oc-video-h: 1080;
  --oc-video-pic-w: 744;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  width: min(calc(100cqw * var(--oc-video-w) / var(--oc-video-pic-w)), calc(100cqh * var(--oc-video-w) / var(--oc-video-h)));
  height: min(calc(100cqw * var(--oc-video-h) / var(--oc-video-pic-w)), 100cqh);
}

.oc-movie__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 20px;
}

.oc-movie__year {
  font-family: var(--lp-font-en);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .12em;
  color: var(--lp-text-sub);
}

.oc-movie__title {
  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: 900;
  color: var(--oc-ink);
}

/* 上の重ね表示は、動画に同じ文字が焼き込まれている間は使わない（二重になるため）。
   画面上は隠し、h1などとして読み上げ・検索用にだけDOMに残す。
   文字なしの動画に差し替えたら、このブロックを消すと上の重ね表示に戻る */
.oc-movie__copy {
  inset: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* LEAD（テーマ上書き）
   SP・タブレット(〜1023px): 黒背景に白文字。PCは下部のPCレイアウトで白背景・グレー文字に戻している */
.oc-lead {
  padding: 12px 32px 60px;
  text-align: left;
  background: #000;
}

.oc-lead__text {
  font-size: 1.3rem;
  line-height: 2.2em;
  color: #fff;
}

/* ======================
   タブナビ（SP: 上端に張り付く横並びの付箋 / PC: 右サイド縦並びに変更）
   各タブはセクションと同じ色の付箋。色・文字色はSPとPCで共通のトンマナ
   （SPは隙間・角丸なしで横一列にぴったり並べる。PCは右端なので左側の角を丸め、縦に3pxずつ空ける）
   ====================== */
.oc-tabnav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
}

.oc-tabnav__item {
  flex: 1;
  text-align: center;
  padding: 15px 4px;
  font-family: var(--lp-font-en);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--oc-ink);
  transition: color .2s;
}

.oc-tabnav__item:nth-child(1) { background: var(--oc-price-color); }
.oc-tabnav__item:nth-child(2) { background: var(--oc-design-color); }
.oc-tabnav__item:nth-child(3) { background: var(--oc-staff-color); }

.oc-tabnav__item.is-active {
  color: #fff;
}

/* ======================
   セクション共通
   PRICE/DESIGN/STAFFそれぞれ専用の背景色を持ち、PCではタブの色と統一する
   ====================== */
.oc-section {
  padding: 48px 52px;
}
.oc-section.oc-section--staff {
  padding: 48px 20px;
}

.oc-section--price  { background: var(--oc-price-color); }
.oc-section--design { background: var(--oc-design-color); }
.oc-section--staff  { background: var(--oc-staff-color); }

.oc-section__title {
  text-align: center;
  margin-bottom: 30px;
}

.oc-section__title img {
  display: inline-block;
  width: auto;
  max-width: 220px;
  height: auto;
}

/* ======================
   PRICE SELECT
   ====================== */
.oc-pricegroup {
  margin-bottom: 34px;
}

.oc-pricegroup:last-child {
  margin-bottom: 0;
}

.oc-pricegroup__label {
  font-family: var(--lp-font-en);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: .1em;
  text-align: center;
  color: var(--lp-text-main);
  margin-bottom: 14px;
}

/* ======================
   STAFF SELECT
   「STAFF SELECT / NO.x」バー → 店舗名バナー → プロフィール(写真は右)
   ====================== */
.oc-staff {
  padding: 40px 20px;
  background: var(--oc-staff-bg);
  border-bottom: 1px solid var(--oc-line);
}

.oc-staff:last-child {
  border-bottom: none;
}

/* STAFF記事とSTAFF記事の間を少し開ける */
.oc-staff + .oc-staff {
  margin-top: var(--oc-staff-gap);
}

.oc-staff__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 4px solid var(--oc-ink);
  margin-bottom: 0;
}

.oc-staff__label {
  font-family: var(--lp-font-en);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: .04em;
}

.oc-staff__no {
  font-family: var(--lp-font-en);
  font-weight: 800;
  font-size: 6rem;
  line-height: 1;
  color: var(--oc-ink);
}

.oc-staff__shopname {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--oc-ink);
  padding: 14px 0;
  border-bottom: 4px solid var(--oc-ink);
  margin-bottom: 26px;
}

.oc-staff__profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 80%;
  max-width: 270px;
  margin: 64px auto 0;
}

.oc-staff__info {
  flex: 1;
  min-width: 0;
}

.oc-staff__role {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--oc-ink);
  margin-bottom: 10px;
  text-align: center;
}

.oc-staff__comment {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--oc-ink);
}

/* 丸い写真に、縁取り(border)とドロップシャドウ(box-shadow)。色・影は :root の --oc-staff-photo-border / --oc-staff-photo-shadow で変える。
   aspect-ratio:1 は、SPの height:auto のとき写真が無い仮枠(.ph)がつぶれず、写真が正方形でなくても丸くなるようにするため */
.oc-staff__photo {
  width: 120px;
  height: 120px;
  flex: none;
  font-size: .9rem;
  object-fit: cover; /* img のとき、枠(正方形)に合わせて中央を切り出す。歪ませない */
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid var(--oc-staff-photo-border);
  box-shadow: var(--oc-staff-photo-shadow);
}

/* SP（〜1023px）: プロフィールは縦積み。写真を上・中央、役職は太字・中央、コメントは左揃え。
   （PCは上のルールどおり、左にテキスト／右に写真の横並びのまま。表示順はorderで入れ替えるのでHTMLは変えない） */
@media (max-width: 1023.98px) {
  .oc-staff__profile {
    flex-direction: column;
    gap: 14px;
  }

  .oc-staff__photo {
    order: -1;
    width: 64%;
    height: auto;
  }

  .oc-staff__info {
    flex: none;
    width: 100%;
  }

  .oc-staff__role {
    text-align: center;
  }
}

/* RECOMMEND エリア（おすすめ2点＋コーディネート2点をまとめる背景付きの枠。先頭に見出し） */
.oc-recommend-area {
  background: var(--oc-recommend-bg);
  padding: 60px 14px 64px;
}

/* RECOMMEND と OTHER ITEM の見出しは同じスタイル（ルールを共有。PCの大きさも下のPCレイアウトで共有） */
.oc-recommend-area__title,
.oc-other__title {
  font-family: var(--lp-font-en);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  color: var(--oc-ink);
  margin-bottom: 32px;
}

/* RECOMMEND ITEMS（SP・PC共通）
   上段 = 写真A(左)と写真B(右下。Aの右下に少し重なる) / 下段 = Aのテキスト、その下にBのテキスト（縦に並べる）
   .oc-recommend をグリッドにして、item を display:contents で外し、写真・テキストを .oc-recommend 直下のグリッドに並べ直す。
   HTMLの順番（写真A→テキストA→写真B→テキストB）は変えず、見た目の順番だけ grid-row で決めている。 */
.oc-recommend {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 4%;
  margin-bottom: 60px;
}

.oc-recommend__item {
  display: contents;
}

/* 上段: 写真A */
.oc-recommend__item--a .oc-recommend__visual {
  grid-row: 1;
  position: relative;
  width: 70%;
}

/* 上段: 写真B。右寄せでAの下端に少し食い込ませる（Aより手前に出すため position:relative）。
   Bが1枚のとき(img直下)も、2枚が切り替わるとき(.oc-recommend__photos で包む)も、同じ置き方 */
.oc-recommend__item--b > .oc-recommend__img,
.oc-recommend__item--b > .oc-recommend__photos {
  grid-row: 2;
  justify-self: end;
  position: relative;
  width: 70%;
  margin-top: -6%;
}

/* 下段: テキスト。Aの下にBを縦に並べ、Bの上に区切り線を入れる */
.oc-recommend__info {
  grid-column: 1;
}

.oc-recommend__item--a .oc-recommend__info {
  grid-row: 3;
  margin-top: 3.4rem;
}

.oc-recommend__item--b .oc-recommend__info {
  grid-row: 4;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(26, 26, 26, .3);
}

.oc-recommend__info .lp-product-card__buy {
  max-width: 100px;
  margin-top: 4px;
  padding: 12px 8px;
  font-size: 1.2rem;
}

/* 1点目の写真に ITEMs ラベルを重ねる。ラベルは写真(枠)の右上に重なり、右側へはみ出す。
   ラベルの位置・幅は枠(.oc-recommend__visual)に対する%。
   写真は2枚を同じ位置に重ね、2枚目をフェードなしでパッと出し入れして切り替える（1枚目が枠の高さを決める）。
   ラベルは写真より前面に出すため z-index:1 */
.oc-recommend__photos { position: relative; }
.oc-recommend__photos .oc-recommend__img { width: 100%; }
.oc-recommend__photos .oc-recommend__img + .oc-recommend__img { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; animation: oc-recommend-switch 6s step-end infinite; }
.oc-recommend__label { position: absolute; z-index: 1; top: 13.7%; left: 85%; width: 62%; height: auto; pointer-events: none; }

/* 2枚目：0〜3秒は非表示（1枚目が見える）、3〜6秒は表示（2枚目が見える）。step-end なので補間せず瞬時に切り替わる */
@keyframes oc-recommend-switch {
  0%  { opacity: 0; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-recommend__photos .oc-recommend__img + .oc-recommend__img { animation: none; opacity: 0; }
}

.oc-recommend__img {
  display: block;
  width: 100%;
  height: auto;
}

/* 商品名。長い名前は語の途中（「ジャケ／ット」）で折り返さず、HTML側の <wbr>（言葉の切れ目）で折り返す（OTHER ITEMの名前と同じ方法） */
.oc-recommend__note {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--oc-ink);
  margin-bottom: 8px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.oc-recommend__comment {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--oc-ink);
  margin-bottom: 12px;
}

.oc-recommend__price {
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--oc-ink);
  margin-bottom: 8px;
}

/* COORDINATE */
.oc-coordinate {
  margin-bottom: 28px;
}

.oc-coordinate:last-child {
  margin-bottom: 0;
}

/* COORDINATE画像は .oc-coordinate__media で包む。タップ（クリック）で拡大表示する（js/script.js のCOORDINATE拡大のIIFE。拡大中の見た目は下の「COORDINATE画像の拡大表示」）。
   拡大できることが分かるよう、画像の右上に「タップで拡大」のヒント(.oc-coordinate__hint)を重ねる。
   ヒントは、画像が読み込まれて拡大できる状態になったらJSが .is-zoomable を付けて出し、拡大中は .is-zoomed で隠す。
   右上にしたのは、画像の下の白枠に説明文が焼き込まれていて、下側に重ねると文字を隠すため（右上は白い余白と写真の端）。
   ただしCOORDINATE 2の画像は、縦タブ「COORDINATE 2」が右上に焼き込まれているので、包み枠に .oc-coordinate__media--hint-left を付けて左上に置く */
.oc-coordinate__media {
  position: relative;
  margin-bottom: 14px;
}

.oc-coordinate__visual {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.oc-coordinate__visual:focus-visible {
  outline: 2px solid var(--oc-ink);
  outline-offset: 3px;
}

/* 拡大ヒント: 虫めがねのアイコン(::before) + 文言(::after)。画像より前面だが、タップは画像へ通す(pointer-events:none)。
   文言はスマホ・タブレット(指)で「タップで拡大」、マウスの環境で「クリックで拡大」。アイコンは白線のSVG(＋入りの虫めがね) */
.oc-coordinate__hint {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: rgba(26, 26, 26, .82);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
  color: var(--lp-white);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

/* 縦タブが右上にあるCOORDINATE 2は、ヒントを左上へ */
.oc-coordinate__media--hint-left .oc-coordinate__hint {
  right: auto;
  left: 8px;
}

.oc-coordinate__hint::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6M10 7v6M7 10h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.oc-coordinate__hint::after { content: "タップで拡大"; }

@media (hover: hover) and (pointer: fine) {
  .oc-coordinate__hint::after { content: "クリックで拡大"; }
}

.oc-coordinate__media.is-zoomable .oc-coordinate__hint { opacity: 1; }
.oc-coordinate__media.is-zoomed .oc-coordinate__hint { opacity: 0; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .oc-coordinate__hint { transition: none; }
}

.oc-coordinate__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 2em;
  max-width: 400px;
  margin: 0 auto;
}

.oc-coordinate__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oc-coordinate__name {
  font-family: var(--lp-font-en);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--oc-ink);
  flex: 1;
  min-width: 0;
}

.oc-coordinate__price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--oc-ink);
  white-space: nowrap;
}

.oc-coordinate__buy {
  font-family: var(--lp-font-en);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 6px 12px;
  background: var(--oc-ink);
  color: var(--lp-white);
  border: 1px solid var(--oc-ink);
  border-radius: 2px;
  white-space: nowrap;
}

/* Coming Soon（商品ページがまだ無い品番で、BUYの代わりに置く。<span>なのでリンクにならない）
   BUYと同じ位置・ほぼ同じ大きさ(約50×34px)の枠に「Coming / Soon」を2行で入れる。BUYの行と価格の右端がそろい、スマホ(320px)でもはみ出さない。
   BUYの文字サイズ・余白・行の高さを変えたら、ここの width・padding・line-height も合わせる（BUYの高さは 行の高さ20.4px＋padding12px＋枠2px）。
   塗りなし・グレーの枠にして、塗りつぶしのBUYとは別物に見せる。文字は背景(薄い黄緑)の上でも読める濃さ(#666。#777だとコントラストが足りない) */
.oc-coordinate__buy--soon {
  width: 50px;
  padding: 3px 2px;
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  background: transparent;
  color: #666;
  border-color: #999;
  cursor: default;
}

/* ======================
   OTHER ITEM（注力品番以外のアウター。横スライダー）
   PC(1024px〜): 3商品が全体表示され、4商品目が見切れる / SP・タブレット: 2商品が全体表示され、3商品目が見切れる。ループなし。
   ・商品の幅は2つの変数だけで決まる: --oc-other-cols（全体が映る商品数）と --oc-other-peek（次の商品が見切れて見える割合。1 = 商品1つぶん）
   ・横スクロール(scroll-snap)なので、スマホはスワイプ、PCはトラックパッド・矢印・ドットで動かせる
   ・矢印・ドットは js/script.js が付ける（スクロール位置が左端なら左の矢印、右端なら右の矢印を非表示にする）
   ・スライダーの左右は、SPではセクションの余白を越えて画面の端まで広げる（見切れた商品が画面の端まで続いて見える）。
     PCは右端にタブナビが重なるので広げない（--oc-other-bleed: 0）
   ====================== */
.oc-section.oc-section--other {
  --oc-other-bleed: 20px;
  padding: 48px var(--oc-other-bleed) 44px;
  background: var(--oc-other-bg);
}

/* 見出し「OTHER ITEM」(.oc-other__title)は、RECOMMENDの見出しと同じスタイル（.oc-recommend-area__title とルールを共有している） */

.oc-other {
  --oc-other-cols: 2;
  --oc-other-peek: .3;
  --oc-other-gap: 10px;
}

.oc-other__viewport {
  margin: 0 calc(-1 * var(--oc-other-bleed));
  padding-left: var(--oc-other-bleed);
  scroll-padding-left: var(--oc-other-bleed);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.oc-other__viewport::-webkit-scrollbar {
  display: none;
}

.oc-other__track {
  display: flex;
  gap: var(--oc-other-gap);
}

/* 最後の商品の右にも、左と同じ余白を残す（flexのgap1つぶんは負のmarginで打ち消す） */
.oc-other__track::after {
  content: "";
  flex: none;
  width: var(--oc-other-bleed);
  margin-left: calc(-1 * var(--oc-other-gap));
}

/* 商品カード。幅 = (見えている幅 − 隙間 × 全体表示の数) ÷ (全体表示の数 + 見切れる割合) */
.oc-other__item {
  flex: none;
  width: calc((100% - var(--oc-other-gap) * var(--oc-other-cols)) / (var(--oc-other-cols) + var(--oc-other-peek)));
  display: flex;
  flex-direction: column;
  padding: 10px 10px 14px;
  background: var(--lp-white);
  scroll-snap-align: start;
}

/* 商品画像（ダミーの .ph でも img でも、正方形で表示する。display は .ph(flex) / img(block) のままにしておく） */
.oc-other__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* 商品名が2行・3行になっても、価格とBUYの高さがカード間でそろうよう、商品名に余りの高さを持たせる */
.oc-other__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

/* line-break:strict で「ー」「ッ」などが行頭に来ないようにする。overflow-wrap は、長い英数字の商品名でもカードからはみ出さないため。
   word-break:keep-all で語の途中（「ボアジャ／ケット」）では折り返さず、HTML側の <wbr>（言葉の切れ目）でだけ折り返す。
   商品名を差し替えるときは <wbr> も付け直す（付けなくても表示はできるが、語の途中で折り返す） */
.oc-other__name {
  flex: 1;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: var(--oc-ink);
  margin-bottom: 8px;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.oc-other__price {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: left;
  color: var(--oc-ink);
}

.oc-other__item .lp-product-card__buy {
  max-width: none;
  margin-top: 10px;
  padding: 10px 8px;
  font-size: 1.2rem;
}

/* 矢印・ドット（写真に被らないよう、スライダーの下に置く。両端に矢印、中央にドット）。JSが動くまでは隠す */
.oc-other__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.oc-other:not(.is-ready) .oc-other__controls {
  visibility: hidden;
}

/* 全商品が画面に収まっていて動かす必要がないときは、矢印・ドットごと隠す */
.oc-other.is-single .oc-other__controls {
  display: none;
}

.oc-other__arrow {
  position: relative;
  flex: none;
  appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--oc-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease, visibility 0s linear 0s;
}

/* 矢印の向き（枠線2辺を回転させた「く」の字）。10px四角を円の中心に置いて回転させ、
   「く」の字の見た目の幅(約8.5px)の中心が円の中心に来るよう、横に2.8pxずらしている */
.oc-other__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-style: solid;
  border-color: var(--lp-white);
  border-width: 2px 2px 0 0;
}

.oc-other__arrow--next::before {
  transform: translateX(-2.8px) rotate(45deg);
}

.oc-other__arrow--prev::before {
  transform: translateX(2.8px) rotate(-135deg);
}

/* 端まで来た側の矢印は非表示（レイアウトは動かさず、ドットは中央のまま） */
.oc-other__arrow.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.oc-other__dots {
  display: flex;
  justify-content: center;
}

/* 見た目は8pxの丸。押しやすいよう、押せる範囲は20px四方 */
.oc-other__dot {
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 6px;
  border: none;
  border-radius: 50%;
  background-color: rgba(26, 26, 26, .25);
  background-clip: content-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.oc-other__dot.is-active {
  background-color: var(--oc-ink);
}

.oc-other__arrow:focus-visible,
.oc-other__dot:focus-visible {
  outline: 2px solid var(--oc-ink);
  outline-offset: 2px;
}

/* ======================
   アウター早割 10%OFF の価格表示（.oc-sale）
   早割の対象商品だけ、価格の要素（.lp-product-card__price / .oc-recommend__price / .oc-other__price / .oc-coordinate__price）に .oc-sale を足し、
   中身を「アイコン(.oc-sale__badge)」「元の価格(.oc-sale__was。取り消し線)」「10%OFF後の価格(.oc-sale__now)」にする。
   ・文字の大きさ・太さは、それぞれの価格の要素のものをそのまま引き継ぐ。10%OFF後の価格はその大きさ・太さで色だけ --oc-sale-color、
     元の価格は一回り小さく・細く・グレー(#666)で取り消し線
   ・早割の期間が終わったら、js/script.js が .oc-sale を元の価格だけの表示に戻す（#lp-wrap の data-sale-until。日本時間）
   ・対象は施策商品リスト（【完成版元リスト】1021アウター早割タイムセール.xlsx）の品番。リストが変わったら、該当する価格の要素だけ付け外しする
   ====================== */
.oc-sale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.3;
}

/* アイコン。狭いカード(OTHER ITEM)では「アウター早割 / 10%OFF」の間で折り返す */
.oc-sale__badge {
  display: inline-block;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--oc-sale-color);
  color: var(--lp-white);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: left;
}

.oc-sale__off {
  font-family: var(--lp-font-en);
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: .03em;
}

.oc-sale__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.oc-sale__was {
  font-size: .72em;
  font-weight: 500;
  color: #666;
  text-decoration: line-through;
}

.oc-sale__now {
  color: var(--oc-sale-color);
}

/* COORDINATEの行: アイコン(.oc-sale__badge)は、行の上（1行目・左寄せ・1行）に置く。名前・価格・BUYは、ほかの行と同じ並びの2行目。
   価格は、元の価格（取り消し線）を上・早割価格を下に積んで右寄せ（BUYの左に、ほかの行の価格と右端をそろえる）。
   こうすると価格の欄が通常の行と同じ約40〜50pxで済み、狭い欄（名前・価格・BUYが1行に並ぶ。幅は画面幅−164px、PC 1024pxで約176px）でも
   名前を押しのけず、行の高さもBUYと同じ約34pxのまま（アイコンの分だけ、その行の上に余白が増える）。
   .oc-sale は display:contents にして、中のアイコンと価格を、行(li)のグリッドの子として並べる。
   :has() が使えない古いブラウザでは、このグリッドにならず、アイコンが価格の欄の中に入る（幅によっては名前に被る） */
.oc-coordinate__price.oc-sale {
  align-items: flex-end;
  text-align: right;
}

.oc-coordinate__price.oc-sale .oc-sale__badge {
  white-space: normal;
  text-align: right;
}

.oc-coordinate__price.oc-sale .oc-sale__row {
  justify-content: flex-end;
  white-space: nowrap;
}

.oc-coordinate__row:has(> .oc-sale) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
}

.oc-coordinate__row:has(> .oc-sale) > .oc-sale {
  display: contents;
}

.oc-coordinate__row:has(> .oc-sale) .oc-sale__badge {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: end;
  white-space: nowrap;
  text-align: left;
}

.oc-coordinate__row:has(> .oc-sale) .oc-coordinate__name {
  grid-row: 2;
  grid-column: 1;
}

.oc-coordinate__row:has(> .oc-sale) .oc-sale__row {
  grid-row: 2;
  grid-column: 2;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

.oc-coordinate__row:has(> .oc-sale) .oc-coordinate__buy {
  grid-row: 2;
  grid-column: 3;
}

/* ======================
   COORDINATE画像の拡大表示
   js/script.js が、最初に開くときに .oc-zoom を body の末尾へ作る。
   元の画像の位置から画面中央へ、同じ縦横比のまま拡大する（画像の位置・大きさ left/top/width/height はJSが入れ、
   開閉は transform のアニメーション）。閉じるのは、画面のどこかをタップ・×ボタン・Escキー
   ====================== */
.oc-zoom {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(26, 26, 26, .86);
  opacity: 0;
  transition: opacity .3s ease;
  overscroll-behavior: contain;
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
}

.oc-zoom.is-active { display: block; }
.oc-zoom.is-open   { opacity: 1; }

/* 画像は .oc-zoom（fixed）の中に absolute で置く。上の共通ルール(img { width:100%; max-width:100%; height:auto })を打ち消すため、
   max-width:none にして、width / height はJSがpxで入れる。縦横比は元の枠(4:5)のままなので歪まない */
.oc-zoom__img {
  position: absolute;
  max-width: none;
  object-fit: cover;
  background: var(--lp-white);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
  transform-origin: 0 0;
  transition: transform .38s cubic-bezier(.22, .8, .24, 1);
  will-change: transform;
}

.oc-zoom__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  appearance: none;
  border: none;
  border-radius: 50%;
  background: var(--lp-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.oc-zoom__close::before,
.oc-zoom__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  background: var(--oc-ink);
  transform: rotate(45deg);
}

.oc-zoom__close::after { transform: rotate(-45deg); }

.oc-zoom__close:focus-visible {
  outline: 2px solid var(--lp-white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .oc-zoom,
  .oc-zoom__img { transition: none; }
}

/* ======================
   POPUP（左下の小さなお知らせ。アウター早割の画像）
   HTMLでは hidden。js/script.js が、画像の読み込み後に少し待ってから、下から ふわっと出す。
   閉じるのは「×」ボタンだけ（画面の別の場所をタップしても、Escキーを押しても閉じない）。閉じたら、ページを開き直すまで出ない。
   ・位置は画面の左下に固定。本番サイトの左下には翻訳ウィジェット(.stt-lang-select / 80×40px)があるので、その真上（4px空け）まで下げている。
     これより下げると本番では翻訳ウィジェットに隠れる（ローカルの確認画面にはウィジェットが無いので、下に少し余白が見える）
   ・前後: タブナビ(40)より上、W2のモーダル(1000)・クッキー同意バナー(1000000)・拡大表示(.oc-zoom / 10000)より下
   ・大きさは width だけで決まる（画像は正方形）。SPは画面幅の38%（上限168px）、PC(1024px〜)は200px
   ・画像に枠線・角丸は付けない（影だけ）
   ・調整用の変数（SP・PC共通）: --oc-popup-bottom＝画面の下からの距離／--oc-popup-close-top＝×ボタンの上端（マイナスが大きいほど上）
   ====================== */
.oc-popup {
  --oc-popup-bottom: 44px;
  --oc-popup-close-top: -22px;
  position: fixed;
  left: 12px;
  bottom: calc(var(--oc-popup-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  width: min(38vw, 168px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .8, .24, 1);
}

.oc-popup.is-open {
  opacity: 1;
  transform: none;
}

.oc-popup__img {
  aspect-ratio: 1;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .32);
}

/* ×ボタン: 画像の右上の角の上に、ほぼ外側へ出して重ねる（画像の中身にほとんどかからない）。位置は --oc-popup-close-top。
   閉じる方法はこのボタンだけなので、押せる範囲は見た目(32px)より一回り広げてある（::before＝透明の44px角） */
.oc-popup__close {
  position: absolute;
  top: var(--oc-popup-close-top);
  right: -10px;
  width: 32px;
  height: 32px;
  padding: 0;
  appearance: none;
  border: 2px solid var(--lp-white);
  border-radius: 50%;
  background: var(--oc-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.oc-popup__close::before {
  content: "";
  position: absolute;
  inset: -8px;
}

/* × の印: 横棒(12×2)と縦棒(2×12)を重ねて45度回す */
.oc-popup__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background:
    linear-gradient(var(--lp-white), var(--lp-white)) center / 12px 2px no-repeat,
    linear-gradient(var(--lp-white), var(--lp-white)) center / 2px 12px no-repeat;
  transform: rotate(45deg);
}

.oc-popup__close:focus-visible {
  outline: 2px solid var(--oc-ink);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  .oc-popup {
    left: 24px;
    width: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oc-popup {
    transition: none;
    transform: none;
  }
}

/* ======================
   フッターCTA
   ====================== */
.oc-footer-cta {
  background: var(--lp-black);
  padding: 24px 20px;
}

.oc-footer-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--lp-black);
  font-family: var(--lp-font-en);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .06em;
  padding: 18px;
  border-radius: 4px;
}

/* ======================================================
   PCレイアウト（1024px〜）
   ・画面横幅いっぱい、2カラムは画面均等2分割
   ・MOVIEエリアは画面高さいっぱい、動画自体はその2/3サイズで中央配置
   ・LEADはMOVIEエリアに対して縦中央揃え（=MOVIEと横並び）
   ・タブナビは画面右端に固定・縦並び。各タブはセクションと同色の付箋のように
   ====================================================== */
@media (min-width: 1024px) {
  .lp-wrap {
    max-width: none;
    display: flex;
    align-items: flex-start;
  }

  /* MOVIE: 左半分に固定し、footerまでスクロールに追従する */
  .oc-movie {
    flex: none;
    width: 50%;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 中身の要素(動画本体)は領域に対して90vh */
  .oc-movie__frame {
    width: 84%;
    height: 90vh;
    padding: 0;
  }

  .oc-movie__ph {
    width: 100%;
    height: 100%;
  }

  /* 動画（PC）: contain で960×1080の全体を映し、焼き込みの黒帯は黒背景になじませる。
     幅は枠の横幅とほぼ同じになる式(max)、高さは100vh（枠は90vhなので、はみ出した上下は切れる）。
     SPの式(min)とは別なので、幅の式をここで書き直している */
  .oc-movie__video {
    --oc-video-w: 670;
    object-fit: contain;
    width: max(calc(100cqw * var(--oc-video-w) / var(--oc-video-pic-w)), calc(100cqh * var(--oc-video-w) / var(--oc-video-h)));
    height: 100vh;
  }

  .oc-movie__title {
    font-size: 2.2rem;
  }

  /* 右半分: LEAD〜footerまでをここでスクロールさせる */
  .oc-pc-scroll {
    flex: 1;
    min-width: 0;
  }

  .oc-lead.lp-lead {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px;
    background: var(--lp-white);
  }

  .oc-lead__text {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.2em;
    color: var(--lp-text-sub);
    max-width: min(32em , 85%);
  }

  /* タブナビ: 画面右端に固定・縦並び。各タブはセクションと同じ色の付箋（色・文字色はSPと共通なので上の共通ルール） */
  .oc-tabnav {
    position: fixed;
    top: 50%;
    right: 0;
    left: auto;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 0;
    width: auto;
  }

  .oc-tabnav__item {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    flex: none;
    padding: 26px 11px;
    border-radius: 6px 0 0 6px;
    margin-bottom: 3px;
  }

  .oc-tabnav__item.is-active {
    padding-right: 18px;
  }

  /* 右側セクションはタブナビ(画面右端・固定)と重ならないよう、LEADと同じ左右余白を確保する。
     STAFFだけSPで左右20px(.oc-section.oc-section--staff)にしており、詳細度が上で.oc-sectionの指定が効かないため、
     同じ詳細度で並べて、PCでは PRICE/DESIGN/STAFF すべて同じ余白にする */
  .oc-section,
  .oc-section.oc-section--staff {
    padding-left: 64px;
    padding-right: 64px;
  }

  /* STAFF記事: SPは左右余白0（セクションの余白のみ）。PCは従来どおり左右20px */
  .oc-staff {
    padding-left: 20px;
    padding-right: 20px;
  }

  .oc-section__title img {
    max-width: 280px;
  }

  .lp-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* RECOMMEND ITEMS のテキスト: PCは少し大きくする */
  .oc-recommend__note { font-size: 1.5rem; }
  .oc-recommend__comment { font-size: 1.3rem; }
  .oc-recommend__price { font-size: 1.9rem; }
  .oc-recommend__info .lp-product-card__buy { font-size: 1.3rem; }

  /* RECOMMEND エリア: PCは余白を広げ、見出しも大きくする（写真・テキストの並びはSPと共通） */
  .oc-recommend-area {
    padding: 64px 56px 68px;
  }

  .oc-recommend-area__title,
  .oc-other__title {
    font-size: 3.6rem;
    margin-bottom: 48px;
  }

  .oc-staff__photo {
    width: 140px;
    height: 140px;
  }

  /* OTHER ITEM: PCは3商品が全体表示され、4商品目が見切れる。
     スライダーはセクションの余白(64px)の内側で止める（画面の右端にはタブナビが重なるので、SPのように画面の端までは広げない） */
  .oc-section.oc-section--other {
    --oc-other-bleed: 0px;
    padding: 72px 64px 68px;
  }

  .oc-other {
    --oc-other-cols: 3;
    --oc-other-gap: 12px;
  }

  .oc-other__item {
    padding: 12px 12px 16px;
  }

  .oc-other__name { font-size: 1.3rem; }
  .oc-other__price { font-size: 1.7rem; }
  .oc-other__item .lp-product-card__buy { font-size: 1.3rem; }

  .oc-other__controls {
    margin-top: 28px;
  }
}