/* ルピナスマーケット(旧 Xモール) — 黒基調のメーカー商品ページ風(ミニマル・大きな商品画像) */
/* 2026-08-29: オレンジ/ブルー基調 → 黒基調に全面変更。
   ヘッダー・ナビ・フッターを黒、本文は白、購入導線のみ朱色。
   ファーストビューは「大きな商品画像ステージ + 下端のサムネ列 + 右下の購入カード」
   2026-08-30: パンくずを削除。1478x935 のファーストビューでタブ(商品トップ等)が
   映り込まないよう、商品見出しの余白とステージ画像の高さを調整
   2026-08-30(2): ファーストビューを2カラム化。画像ステージを左寄せ、右に空いた
   スペースへ購入情報を移設。写真は object-fit:contain で「高さ」に律速されており
   (1600x1226 → 高さ544px時に横710px)、左カラムを 1400→960px に絞っても
   実寸は変わらない。役割が重複するフローティング購入カードは削除 */
:root {
  --black: #0a0a0a;
  --black-2: #1c1c1c;
  --ink: #141414;
  --ink-2: #3c3c3c;
  --muted: #6e6e6e;
  --muted-2: #8c8c8c;
  --line: #dcdcdc;
  --line-2: #ededed;
  --stage: #f1f1f1;
  --surface: #f7f7f7;
  --accent: #d8321f;      /* 購入導線・強調表示 */
  --star: #6e6e6e;
  --gutter: 40px;
  --page-max: 1240px;
  /* ヒーロー写真は contain で高さ律速なので、横幅 = (枠の高さ - 上下padding36) x 縦横比。
     ステージ枠800pxとの差の半分が写真の左余白で、その分だけ見出しも右にずらす。
     画面の高さが変わっても追従するよう固定値ではなく計算で出す
     (1478x935 では写真720px → --stage-inset は40pxになる) */
  --photo-w: calc((clamp(300px, 100vh - 347px, 660px) - 36px) * 1.305057);
  --stage-inset: max(0px, calc((800px - var(--photo-w)) / 2));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--ink); background: #fff; font-size: 14px; line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, select { font-family: inherit; }

/* ===== ヘッダー(黒) ===== */
.site-header { background: var(--black); color: #fff; }
.header-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* ロゴは文字のみのワードマーク。欧文の X はカタカナより小さく見えるので光学的に少し大きくし、
   全体を同じウェイト+広めの字間にして「マーク+店名」ではなく一続きの店名として読ませる */
.logo {
  font-size: 21px; font-weight: 700; letter-spacing: .1em;
  color: #fff; white-space: nowrap;
}
.logo i { font-style: normal; font-size: 25px; font-weight: 700; }

/* 支給ロゴ(images/logo-lupinus-market.svg)。白ヌキ+青のマークなので黒地のヘッダー/フッター専用。
   2026-09-10 に「Xモール」から差し替え。横長のワードマーク(約 5.9:1)なので、カタカナの見た目の高さが
   旧ロゴの「モール」(約 20px)と同程度になるよう、旧 34px より低い height にしている */
.logo img { height: 28px; width: auto; display: block; }
.header-icons { display: flex; list-style: none; gap: 26px; }
/* 薄めの白は opacity ではなく色で出す。opacity を掛けると PDF 書き出し(WebKit createPDF)が
   要素を透明レイヤーにして境界ボックスでクリップし、ラベル文字の端(アカウント・カート等)が
   1px 弱はみ出して見切れる。色で薄くすればクリップ自体が出ない */
.header-icons a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255, 255, 255, .9); font-size: 9.5px; line-height: 1.2; }
.header-icons a:hover { color: #fff; }
.header-icons svg { width: 20px; height: 20px; }

/* 告知ライン(黒) */
.notice-bar {
  background: var(--black-2); color: #e6e6e6; font-size: 12px; letter-spacing: .02em;
  text-align: center; padding: 7px 16px;
}
.notice-bar span { color: #fff; font-weight: 700; margin-right: 10px; }

/* ===== 商品見出し(全幅・ファーストビュー最上段) ===== */
/* 左パディングだけ --stage-inset ぶん深くして、真下のメイン写真と左端をそろえる */
.product-head {
  max-width: var(--page-max); margin: 0 auto;
  padding: 30px var(--gutter) 12px calc(var(--gutter) + var(--stage-inset)); /* 下は 24→12。見出しと価格の間を詰める(先方指示 0907) */
}
.series { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }
.product-head h1 { font-size: 34px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; margin: 6px 0 6px; }
.tag-rank {
  display: inline-block; vertical-align: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; padding: 2px 9px; margin-left: 6px;
}
.tag-rank { border: 1px solid var(--line); color: var(--ink-2); font-weight: 400; }
.product-sub { font-size: 13.5px; color: var(--ink-2); }
.rating { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.rating strong { color: var(--ink); }
.rating a { text-decoration: underline; }
.stars { color: var(--star); letter-spacing: 1px; }
.seller { margin-left: 16px; }
.seller a { text-decoration: underline; }

.product-tabs { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.product-tabs ul { display: flex; list-style: none; gap: 28px; font-size: 13px; overflow-x: auto; white-space: nowrap; }
.product-tabs a { display: block; padding: 14px 0; color: var(--muted); border-bottom: 2px solid transparent; }
.product-tabs .current a { color: var(--ink); font-weight: 700; border-bottom-color: var(--black); }
.product-tabs a:hover { color: var(--ink); }

/* ===== ファーストビュー(2カラム) ===== */
/* 左800 + 間隔40 + 右320 = 1160 で、--page-max 1240 の内寸ちょうど。
   ヒーロー写真 752px は左枠に24pxずつ余らせて収まるので、写真と金額セクションの
   間隔は実質64pxで収まる(ページ幅1400のままだと248px開いてしまう) */
/* .fv.fv と重ねて詳細度を上げているのは PDF 書き出し対策。書き出しスクリプトは
   効いている @media の中身を head 末尾に焼き付けるため、framing.css の
   .fv { display:flex; flex-direction:column } がこの grid より後ろに回り、
   PDF だけ写真と価格パネルが縦積み(1カラム)になっていた(korea/site01 と同じ回避) */
.fv.fv {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 800px) 320px;
  justify-content: space-between; gap: 40px; align-items: start;
  border-bottom: 1px solid var(--line-2);
}

/* ===== 商品画像ステージ(主役) ===== */
.stage {
  background: #fff; /* 商品写真の白背景と馴染ませる */
  min-width: 0; padding-bottom: 48px;
}
/* height はボーダーボックス基準(padding 込みの高さ)。差し引く 347px = ヘッダー52
   + 告知36 + 商品見出し143 + サムネ横列90(余白12+高さ78) + 画面下の余裕10。
   1478x935 で 588px になり、サムネ列の下端がフォールドの10px手前で止まる */
.stage-image { width: 100%; height: clamp(300px, calc(100vh - 331px), 660px); object-fit: contain; display: block; padding: 18px 0; }
/* 写真は枠の中で中央。サムネ列も中央なので、写真の幅がカットごとに変わっても
   両者の中心が常にそろう */
.stage-image { object-position: center; }
/* インフォグラフィックは灰色の枠が主役なので、枠の中では中央に置く */
.stage-image.is-graphic { object-position: center; padding: 26px 0; background: var(--stage); }
/* サムネは5枚を等幅(16:9)に伸縮させ、横幅の合計をメイン写真の実幅にぴったり合わせる */
.thumbs { display: flex; gap: 8px; width: var(--photo-w); margin: 12px auto 0; }
.thumb {
  flex: 1 1 0; aspect-ratio: 16 / 9; padding: 0; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: #fff; overflow: hidden; cursor: pointer; display: block;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { border-color: var(--black); }
.thumb.active { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }

/* ===== 購入情報 ===== */
/* 右カラム。画像の光学的な天(ステージ上端のpadding 18px)に価格の1行目を合わせる */
.purchase { padding-top: 18px; }
.purchase-inner { display: grid; gap: 22px; align-items: start; }
.purchase-price { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.old-price { font-size: 12.5px; color: var(--muted); }
.price { font-size: 36px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
.price .off {
  display: inline-block; vertical-align: 8px; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700; padding: 2px 9px; margin-right: 10px;
}
.price .tax { font-size: 13px; font-weight: 400; color: var(--muted); }
.point { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.point strong { color: var(--ink); }
.limit { font-size: 12.5px; color: var(--accent); font-weight: 700; margin-top: 4px; }

.option-row { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 14px; }
.option-row select { flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; border: 1px solid var(--line); background: #fff; border-radius: 0; }
/* カラムが狭いのでボタンは縦積み。高さ・文字サイズは従来のまま */
.buy-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.buy-buttons button { flex: 1; padding: 14px 10px; font-size: 14.5px; font-weight: 700; cursor: pointer; border-radius: 0; letter-spacing: .04em; }
.btn-cart { background: #fff; border: 1px solid var(--black); color: var(--ink); }
.btn-cart:hover { background: var(--surface); }
.btn-buy { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.btn-buy:hover { background: #bb2917; border-color: #bb2917; }
.shipping-info { list-style: none; font-size: 12.5px; color: var(--ink-2); }
.shipping-info li { padding: 2px 0 2px 14px; position: relative; }
.shipping-info li::before { content: ""; position: absolute; left: 0; top: .85em; width: 5px; height: 5px; background: var(--black); }

/* カラー/数量のラベル幅をそろえて選択欄の左端を通す */
.option-row label { flex: none; width: 42px; color: var(--ink-2); }
/* お届け・支払い・保証。仕様表と同じ「見出し+値」の見せ方で余白を埋める */
.purchase-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.purchase-meta > div { display: flex; gap: 10px; padding: 3px 0; }
.purchase-meta dt { flex: none; width: 68px; color: var(--muted); }
.purchase-meta dd { margin: 0; color: var(--ink-2); }
.purchase-meta strong { color: var(--ink); }

/* ===== 詳細 ===== */
.detail-section { max-width: var(--page-max); margin: 0 auto; padding: 8px var(--gutter) 56px; }
.detail-section h2 {
  font-size: 20px; font-weight: 700; letter-spacing: .02em;
  margin: 44px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.detail-section h2:first-child { margin-top: 34px; }
.review-summary { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 12px; }
.lead { font-size: 15px; margin-bottom: 16px; max-width: 900px; }
.detail-section > p { margin-bottom: 12px; max-width: 900px; color: var(--ink-2); }
.features { list-style: none; max-width: 1000px; }
.features li { padding: 11px 0 11px 22px; position: relative; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.features li strong { color: var(--ink); }
.features li::before { content: ""; position: absolute; left: 2px; top: 1.5em; width: 6px; height: 6px; background: var(--black); }

.note-box { background: var(--surface); border-left: 3px solid var(--black); padding: 16px 20px; margin-top: 20px; max-width: 1000px; }
.note-box h3 { font-size: 14px; margin-bottom: 8px; }
.note-box ul { padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.note-box li { margin-bottom: 4px; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--stage); }
.photo-grid figcaption { font-size: 12px; color: var(--muted); padding: 8px 0 0; }

.full-spec { width: 100%; border-collapse: collapse; font-size: 13px; max-width: 1100px; }
.full-spec th, .full-spec td { border-bottom: 1px solid var(--line-2); padding: 11px 14px; text-align: left; vertical-align: top; }
.full-spec th { background: var(--surface); width: 30%; font-weight: 400; color: var(--muted); }

.review { border-bottom: 1px solid var(--line-2); padding: 16px 0; max-width: 1000px; }
.review-head { font-size: 14px; }
.review-meta { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.review p { font-size: 13px; color: var(--ink-2); }

/* ===== フッター(黒) ===== */
.site-footer { background: var(--black); color: #b9b9b9; font-size: 12px; }
.footer-inner { max-width: var(--page-max); margin: 0 auto; padding: 30px var(--gutter); }
.footer-logo { font-size: 19px; font-weight: 700; letter-spacing: .1em; color: #fff; margin-bottom: 10px; }
.footer-logo i { font-style: normal; font-size: 22px; font-weight: 700; }
.footer-logo img { height: 24px; width: auto; display: block; }
.copyright { margin-top: 6px; color: #8a8a8a; }

/* ページ最大幅を下回ると左カラムが800pxより狭くなり、写真が枠を埋めるのでずらさない */
@media (max-width: 1240px) {
  :root { --stage-inset: 0px; }
}

@media (max-width: 1000px) {
  :root { --gutter: 24px; }
  .fv.fv { grid-template-columns: 1fr; gap: 0; }
  .purchase { padding-top: 0; padding-bottom: 30px; }
  .purchase-inner { gap: 24px; }
  .product-head h1 { font-size: 28px; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  :root { --gutter: 16px; }
  body { font-size: 13px; }
  .header-icons { gap: 16px; }
  .header-icons a span { display: none; }
  .product-head h1 { font-size: 24px; }
  .stage { padding-bottom: 24px; }
  .stage-image { height: min(420px, calc(100vh - 300px)); padding: 12px 0; }
  /* 幅は縮まっても var(--photo-w) に追従して等幅5枚のまま縮小する。固定 width/height は指定しない */
  .thumbs { gap: 4px; margin-top: 8px; }
  .price { font-size: 30px; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .full-spec th, .full-spec td { padding: 9px 10px; font-size: 12px; }
  .full-spec th { width: 38%; }
}

@media (max-width: 480px) {
  .logo { font-size: 18px; }
  .logo i { font-size: 21px; }
  .photo-grid { grid-template-columns: 1fr; }
  .detail-section h2 { font-size: 17px; }
}