/* REGINA / Winter Edit｜整理版
   このファイルで style.css 全体を置き換えてください（追記ではありません）。

   よく変更する場所
   01   ：ページ全体の色・フォント
   01-B ：商品ごとの色（見出しと本文の文字色は別々に設定）
   03   ：ページ幅・ヘッダー
   06   ：表紙の文字・画像サイズ
   07   ：目次の画像幅
   08   ：商品の切り抜き画像・見出し
   09   ：着用写真の枠・余白
   10   ：縦書きコピーの位置
   14   ：購入ボタンの形・文字サイズ
   17   ：PC表示
   19   ：Coming Soonの背景・画像サイズ・フェード時間
   20   ：ルワーヌの後ろ姿セクション

   ※ 商品の画像URL・商品名はHTML、カラー切り替えはJSで変更します。
   ※ 共通フッターの専用デザインは、別ファイル footer.css で管理します。
   ※ クレアの写真枠は、添付CSSどおり濃いピンクを維持しています。
*/

/* ========================================
   01. 共通設定｜季節の色・フォント
   ======================================== */
:root {
  --paper:#f5f5f1; /* 冬のアイボリー */
  --ink:#344b59; /* ブルーグレーの文字 */
  --wine:#455f70; /* 変数名は既存互換：冬のスレートブルー */
  --olive:#697f8c; /* 変数名は既存互換：くすみブルー */
  --outer-background: #e2e8ec; /* PC表示の左右の背景 */
  --serif:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
}


/* ========================================
   01-B. 商品別の色｜色を変更するときはここ

   --chapter-background：大きな切り抜き画像の章の背景
   --chapter-text      ：その章だけの文字色
   --section-text      ：通常本文・縦書き・カラー名の文字色
   --figure-background ：着用写真の周囲の枠色
   --figure-text       ：写真枠内のキャプション文字色
   --section-accent    ：購入ボタンの背景・枠・選択色の外枠
   --section-hover     ：購入ボタンにマウスを重ねたときの色
   ======================================== */

/* 01｜クレア：ダスティピンク */
[data-product="1056"] {
  --chapter-background: #805e6b;
  --chapter-text: #f0e2e6;
  --section-text: #765b65;
  --figure-background: #805e6b;
  --figure-text: #765b65;
  --section-accent: #805e6b;
  --section-hover: #6d4e5a;
}

/* 02｜ルミエール：ミントグリーン */
[data-product="1054"] {
  --chapter-background: #526f62;
  --chapter-text: #e0ebe4;
  --section-text: #4d665b;
  --figure-background: #e0ebe4;
  --figure-text: #4d665b;
  --section-accent: #526f62;
  --section-hover: #425b4f;
}

/* 03｜ルワーヌ：くすみブルー */
[data-product="1034"] {
  --chapter-background: #4d6b7c;
  --chapter-text: #dce9ef;
  --section-text: #435e6c;
  --figure-background: #dce9ef;
  --figure-text: #435e6c;
  --section-accent: #4d6b7c;
  --section-hover: #3d5665;
}

/* 04｜ケイト：深いグレージュ。章の文字と本文の文字は別々に設定 */
[data-product="48-k21"] {
  --chapter-background: #f2e9df;
  --chapter-text: #665e58;
  --section-text: #62574e;
  --figure-background: #e9e0d6;
  --figure-text: #62574e;
  --section-accent: #665e58;
  --section-hover: #514943;
}

/* 共通パーツへの色の引き渡し。通常は変更不要です。 */
[data-product] {
  --wine: var(--section-accent);
  --olive: var(--section-text);
  --ink: var(--section-text);
  color: var(--section-text);
}

/* ========================================
   02. 基本スタイル
   ======================================== */
* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
  background:var(--outer-background);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
}

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

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

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

p,h1,h2,figure {
  margin:0;
}

h1,h2 {
  font-weight:400;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px;
}

[hidden] {
  display:none!important;
}

/* ========================================
   03. ページ幅・ヘッダー
   ======================================== */
.page {
  width:100%;
  max-width:540px;
  margin:auto;
  background:var(--paper);
  overflow:clip;
  position:relative;
}

.masthead {
  padding:24px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.masthead>a {
  font-size:23px;
  letter-spacing:.12em;
}

.masthead>span {
  font:9px Arial,sans-serif;
  letter-spacing:.15em;
  margin-right:38px;
}

/* ========================================
   04. 固定メニューボタン・メニュー
   ======================================== */
.menu-button {
  position:fixed;
  right:max(14px,calc((100vw - 540px)/2 + 14px));
  top:16px;
  z-index:30;
  width:44px;
  height:48px;
  border:0;
  border-radius:3px 3px 18px 3px;
  background:var(--wine);
  display:grid;
  align-content:center;
  gap:7px;
  padding:12px;
  color:#fff;
}

.menu-button span {
  display:block;
  height:1px;
  background:currentColor;
  transition:transform .2s;
}

.menu-button[aria-expanded=true] span:first-child {
  transform:translateY(4px) rotate(45deg);
}

.menu-button[aria-expanded=true] span:last-child {
  transform:translateY(-4px) rotate(-45deg);
}

.menu {
  position:fixed;
  z-index:25;
  right:max(14px,calc((100vw - 540px)/2 + 14px));
  top:74px;
  width:min(310px,calc(100vw - 28px));
  background:var(--wine);
  color:var(--paper);
  padding:32px;
  box-shadow:0 12px 30px #243c4c25;
}

.menu p {
  font:11px Arial,sans-serif;
  letter-spacing:.15em;
  margin-bottom:20px;
}

.menu a {
  display:block;
  padding:14px 0;
  border-bottom:1px solid #ffffff30;
  font-size:15px;
}

/* ========================================
   05. 英文小見出し
   ======================================== */
.eyebrow {
  font:10px Arial,sans-serif;
  letter-spacing:.2em;
}

/* ========================================
   06. 表紙（ファーストビュー）
   ======================================== */
.cover {
  padding-top:26px;
  text-align:center;
}

.cover h1 {
  font-family:Georgia,serif;
  font-size:clamp(62px,18vw,98px);
  line-height:.95;
  letter-spacing:-.06em;
  margin:24px 0 -10px;
  position:relative;
  z-index:2;
}

.cover h1 i {
  font-weight:400;
  font-size:.8em;
}

.cover-visual {
  position:relative;
  background:var(--olive);
  margin:0 6%;
  border-radius:48% 48% 0 0;
  padding-top:12px;
}

.cover-visual img {
  width:96%;
  margin:auto;
}

.season-mark {
  position:absolute;
  left:7%;
  bottom:22px;
  font:10px/1.8 Arial,sans-serif;
  letter-spacing:.12em;
  color:#fff;
}

.cover h2 {
  font-size:25px;
  line-height:1.8;
  letter-spacing:.14em;
  margin:34px 0;
}

.scroll-link {
  font:9px Arial,sans-serif;
  letter-spacing:.18em;
  display:inline-flex;
  gap:32px;
  padding:12px;
}

/* ========================================
   07. 導入文・商品目次
   ======================================== */
.intro {
  padding:80px 10% 64px;
}

.intro>p {
  font-size:14px;
  line-height:2.5;
  text-align:center;
  letter-spacing:.06em;
}

/* 目次の画像幅：grid-template-columns の2列目を調整 */
.index-link {
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: auto clamp(84px,24vw,120px) minmax(0,1fr) auto;
  gap: 10px;
  border-top: 1px solid #344b5940;
  border-bottom: 1px solid #344b5940;
  margin-top: 50px;
  padding: 8px 0;
}

.index-link + .index-link {
  margin-top: 0;
  border-top: 0;
}

.index-link>.index-title {
  font:28px Georgia,serif;
  min-width:0;
}

/* 目次の画像自体。幅は上のグリッド2列目で調整します。 */
.index-image {
  width:100%;
  height:auto;
  align-self:end;
}

.index-link small {
  display:inline-block;
  font:11px var(--serif);
}

.index-number {
  font-size:14px;
}


/* ========================================
   08. 商品チャプター｜大きな切り抜き
   ======================================== */
.chapter {
  background:var(--chapter-background, var(--wine));
  color:var(--chapter-text, var(--paper));
  position:relative;
  text-align:center;
  padding:36px 0 45px;
}

/* 子要素にも明示し、本文色と混ざらないようにします。 */
[data-product] .chapter .eyebrow,
[data-product] .chapter .chapter-no,
[data-product] .chapter h2,
[data-product] .chapter .chapter-copy,
[data-product] .chapter .chapter-caption {
  color: var(--chapter-text);
}

.chapter-no {
  font:38px Georgia,serif;
  margin-top:13px;
}

.chapter h2 {
  font:italic 76px Georgia,serif;
  position:relative;
  z-index:1;
  margin-top:6px;
}

.lumiere .chapter h2,
.louane .chapter h2 {
  font-size: clamp(56px, 16vw, 76px);
}

.chapter>img {
  width:112%;
  max-width:none;
  margin:-20px 0 -5px -6%;
}

.chapter-copy {
  font-size:20px;
  letter-spacing:.16em;
  line-height:1.9;
  margin-top:10px;
}

.chapter-caption {
  display:block;
  font:8px Arial,sans-serif;
  letter-spacing:.19em;
  margin-top:24px;
}

/* ========================================
   09. 着用写真・余白
   ======================================== */
.scene {
  padding:64px 0 90px;
}

.scene figure {
  width:80%;
  margin-left:8%;
  padding:12px;
  background:var(--figure-background, var(--olive));
  color:var(--figure-text, #fff);
}

.scene figcaption {
  font:italic 20px Georgia,serif;
  padding:14px 0 4px;
}

.scene>p {
  text-align:right;
  padding:38px 10% 0;
  font-size:17px;
  letter-spacing:.12em;
  line-height:2;
}

/* ========================================
   10. 縦書きコピー・WINTER文字
   ======================================== */
.poster {
  position:relative;
  margin-bottom:85px;
}

.poster>img {
  width:100%;
}

/* 写真の左側に重ねる、波形の紙。
   width：写真を覆う幅（文字が収まるように38%を推奨）
   background：紙の色。共通設定の --paper と連動します。
   SVGは輪郭だけを指定し、写真そのものは加工しません。 */
.poster::before {
  content: "";
  position: absolute;
  top: -2px;
bottom: -2px;
left: -1px;
height: auto;
  width: 38%;
  background: var(--paper);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 600' preserveAspectRatio='none'%3E%3Cpath d='M0 0H145C105 100 160 180 130 290S95 450 150 600H0Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 600' preserveAspectRatio='none'%3E%3Cpath d='M0 0H145C105 100 160 180 130 290S95 450 150 600H0Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.vertical-copy {
  position:absolute;
  top:7%;
  left:8%;
  writing-mode:vertical-rl;
  font-size:clamp(15px,4.5vw,23px);
  line-height:2;
  letter-spacing:.15em;
  color:var(--olive);
}

.outline-word {
  position:absolute;
  bottom:-7%;
  left:1%;
  font:clamp(65px,18.5vw,100px) Georgia,serif;
  letter-spacing:-.07em;
  transform:rotate(-8deg);
  color:var(--paper);
  -webkit-text-stroke:1px var(--ink);
  pointer-events:none;
}

/* ========================================
   11. ディテール写真・コラージュ
   ======================================== */
.details {
  padding:22px 0 65px;
}

.details>.eyebrow,.details>h2 {
  margin-left:9%;
}

.details h2 {
  font-size:25px;
  line-height:1.8;
  letter-spacing:.12em;
  margin-top:18px;
}

.detail-one {
  width:71%;
  margin:35px 0 0 23%;
  transform:rotate(4deg);
}

.detail-one img {
  clip-path:polygon(5% 0,97% 3%,100% 94%,3% 100%,0 8%);
}

.details figcaption {
  color: var(--section-text, inherit);
  font-size:11px;
  margin-top:12px;
  letter-spacing:.04em;
}

.detail-two {
  width:61%;
  margin:38px 0 0 6%;
  transform:rotate(-5deg);
}

.detail-two img {
  clip-path:polygon(7% 0,100% 3%,95% 100%,0 94%,2% 9%);
}

.detail-copy {
  margin:48px 9% 0;
  font-size:14px;
  line-height:2.3;
  letter-spacing:.05em;
}

/* ========================================
   12. 街歩き・フレア写真
   ======================================== */
.movement {
  padding-top:35px;
}

.small-scene {
  width:54%;
  margin-left:34%;
}

.movement>p {
  font-size:18px;
  line-height:2;
  letter-spacing:.12em;
  margin:36px 9% 38px;
}

.full-detail {
  width:100%;
}

/* ========================================
   13. 商品紹介・カラー切り替え
   ======================================== */
.item {
  text-align:center;
  padding:65px 7% 70px;
}

.item h2 {
  font-size:24px;
  line-height:1.8;
  letter-spacing:.12em;
  margin-top:23px;
}

.item-description {
  font-size:13px;
  line-height:2.3;
  margin:25px -2% 0;
}

.color-preview {
  margin:30px 3% 0;
}

.color-name {
  color: var(--section-text, inherit);
  font:italic 19px Georgia,serif;
  margin-top:18px;
}

.swatches {
  display:flex;
  justify-content:center;
  gap:22px;
  margin:24px 0 45px;
}

.swatch {
  width:44px;
  height:44px;
  border:7px solid var(--paper);
  border-radius:50%;
  outline:1px solid transparent;
}

.beige {
  background:#b8ad9c;
}

.charcoal {
  background:#373d47;
}

/* 商品そのものの色。ページのテーマ色とは別に管理します。 */
.frosty-pink { background: #dec9ce; }
.ice-blue { background: #adcccf; }
.louane .frost-mint { background: #bfcfc2; }
.louane .kobe-navy { background: #142d3e; }

.swatch[aria-pressed=true] {
  outline-color:var(--section-accent, var(--ink));
}

/* ========================================
   14. 商品詳細ボタン
   ======================================== */
.shop-button {
  border:1px solid var(--wine);
  border-radius:50%;
  width:100%;
  min-height:132px;
  background:var(--wine);
  color:var(--paper);
  font:30px Georgia,serif;
  letter-spacing:.06em;
  outline:1px dashed var(--wine);
  outline-offset:7px;
}

/* aタグの購入ボタンの配置 */
a.shop-button {
  display: block;
  padding: 32px 12px;
}

.shop-button span {
  margin-left:20px;
}

.shop-button small {
  display:block;
  font:12px var(--serif);
  margin-top:10px;
  letter-spacing:.1em;
}

/* 商品ごとの購入ボタン：背景・枠は --wine と連動 */
[data-product] .shop-button {
  border-color: var(--section-accent);
  outline-color: var(--section-accent);
  color: #ffffff;
  transition: background-color .25s ease,
              border-color .25s ease,
              outline-color .25s ease;
}

@media (hover: hover) {
  [data-product] .shop-button:hover {
    background: var(--section-hover);
    border-color: var(--section-hover);
    outline-color: var(--section-hover);
  }
}

[data-product] .shop-button:focus-visible {
  outline: 2px solid var(--section-text);
  outline-offset: 7px;
}

.rough-note {
  font:10px/1.8 sans-serif;
  margin-top:28px;
  color:#617380;
}

#shop-message {
  font-size:13px;
  line-height:1.8;
  margin-top:18px;
}

/* ========================================
   15. 結び・フッター
   ======================================== */
.closing {
  text-align:center;
  border-top:1px solid #344b5930;
  padding:65px 20px;
}

.closing>p {
  font-size:19px;
  letter-spacing:.06em;
}

.closing>span {
  display:block;
  font:italic 28px Georgia,serif;
  margin-top:24px;
}

.closing>a {
  display:inline-block;
  font:10px Arial,sans-serif;
  letter-spacing:.12em;
  padding:20px;
  margin-top:35px;
}

footer {
  text-align:center;
  background:var(--wine);
  color:var(--paper);
  padding:40px 20px;
}

footer p {
  font:28px Georgia,serif;
  letter-spacing:.12em;
}

footer small {
  display:block;
  font-size:10px;
  margin-top:15px;
  letter-spacing:.12em;
}

/* ========================================
   16. PC用サイドテキスト・本文スキップ
   ======================================== */
.desktop-note {
  display:none;
}

.skip {
  position:fixed;
  z-index:50;
  top:0;
  left:10px;
  transform:translateY(-120%);
  background:#fff;
  padding:12px;
}

.skip:focus {
  transform:none;
}

/* ========================================
   17. PC表示（画面幅1000px以上）
   ======================================== */
@media(min-width:1000px) {
  .desktop-note {
    display:block;
    position:fixed;
    left:5%;
    top:35%;
    width:190px;
  }

  .desktop-note>a {
    font:32px Georgia,serif;
    letter-spacing:.15em;
  }

  .desktop-note p {
    font-size:14px;
    line-height:2.5;
    margin:25px 0;
  }

  .desktop-note>span {
    font:9px Arial,sans-serif;
    letter-spacing:.12em;
  }

  .page {
    box-shadow:0 0 80px #344b5910;
  }

}

/* ========================================
   18. 動きを抑える端末設定への対応
   ======================================== */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  * {
    transition:none!important;
  }

}

/* ========================================
   19. 次の2着の予告｜Coming Soon
   ・背景色：--preview-bg
   ・シルエットの濃さ：画像のfilter内 opacity(.72)
   ・画像の大きさ：stageのwidth / height
   ・フェード時間：transitionの1s
   ・切り替え間隔：HTMLのdata-interval（5500 = 5.5秒）
   透過PNGの輪郭を利用し、色・柄をCSSで隠します。
   ======================================== */
.next-preview {
  --preview-bg: #657D8A;
  background: var(--preview-bg);
  color: var(--paper);
  padding: 48px 7% 30px;
  text-align: center;
}

.next-preview h2 {
  margin-top: 20px;
  font-size: clamp(20px, 5.4vw, 27px);
  line-height: 1.9;
  letter-spacing: .12em;
}

/* 固定の表示枠に2枚を重ね、画像が変わっても高さを動かしません。 */
.next-preview__stage {
  position: relative;
  width: 92%;
  height: clamp(290px, 90vw, 440px);
  margin: 24px auto 30px;
}

.next-preview__silhouette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) opacity(.72);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.next-preview__silhouette.is-active { opacity: 1; }

.next-preview__notice {
  border: 1px solid #f5f5f180;
  border-radius: 50%;
  padding: 27px 10px;
}

.next-preview__notice p {
  font: italic clamp(30px, 8vw, 42px) Georgia, serif;
  letter-spacing: .03em;
}

.next-preview__notice span {
  display: block;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .07em;
  margin-top: 10px;
}

.next-preview__schedule {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .12em;
}

.next-preview__pause {
  display: block;
  min-height: 44px;
  margin: 15px auto 0;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ========================================
   20. ルワーヌ専用レイアウト｜ルワーヌ（1034）
   後ろ姿の画像とコピーの配置。色は01-Bで管理します。
   ======================================== */
.louane {
  --paper: #f5f5f1;
  background: var(--paper);
}
.louane-back { padding: 30px 0 75px; }
.louane-back > .eyebrow, .louane-back > h2 { margin-left: 9%; }
.louane-back h2 { font-size: 25px; line-height: 1.8; letter-spacing: .12em; margin-top: 18px; }
.louane-back > img { width: 100%; margin-top: 30px; }


/* 21. ケイト専用｜商品の実色を表すカラーボタン */
.kate .chocolat { background: #746650; }
.kate .kobe-navy { background: #1c304b; }

/* iPhone：波形の端から写真が線状に見えるのを防ぐ */
.poster {
  overflow: hidden;
  background: var(--paper);
}

.poster > img {
  display: block;
}

/* ヘッダー｜公式ロゴを横幅100pxに固定 */
.masthead > a {
  display: block;
  width: 120px !important;
  max-width: 120px !important;
  flex: 0 0 100px !important;
}

.masthead > a > img {
  display: block;
  width: 120px !important;
  max-width: 120px !important;
  height: auto !important;
}

/* ========================================
   商品写真｜スクロールでふんわりフェードイン
   ======================================== */

/* 最初はアニメーションせず、すぐに透明にする */
.rr-lp-photo-fade {
  --photo-fade-time: 1.6s;

  opacity: 0;
  transition: none !important;
}

/* 表紙・各商品の大きなモデル画像はゆっくり */
.rr-lp-photo-fade.rr-lp-photo-slow {
  --photo-fade-time: 3.2s;
}

/* 表示するときだけ、フェードをかける */
.rr-lp-photo-fade.is-photo-visible {
  opacity: 1;
  transition: opacity var(--photo-fade-time) ease !important;
}

/* 端末で「動きを抑える」が設定されている場合 */
@media (prefers-reduced-motion: reduce) {
  .rr-lp-photo-fade,
  .rr-lp-photo-fade.is-photo-visible {
    opacity: 1;
    transition: none !important;
  }
}