@charset "UTF-8";
/* 言の葉と彩 — 画材ブランドの製品ページ（版面型・右に臙脂の台紙・明朝見出し）
   旧 CREATIVE SANCTUARY。サイト名・ナビ・シリーズ表記はすべて日本語

   2026-09-03 レイアウト変更（クライアント指示）
   ------------------------------------------------------------------
   1) 左レール型をやめた。
      文具アトリエ綴り(sites/kami-to-yohaku)が「紺の左レール + 明朝の店名 → 罫 →
      副題2行 → 縦ナビ(現在地は金の左罫) → 下端にカート」になり、
      配色を変えても“同じ雛形”に見えてしまうため、型そのものを分けた。
      いまは 左=明るい版面(店名・横ナビ・商品情報) ／ 右=臙脂の縦長パネルに商品写真。
      5サイトのうち左レールを持つのは文具アトリエ綴りだけ、濃色の縦パネルを持つのは
      このサイトだけになる。

   2) 配色は臙脂。木漏れ日文具店(モス #4c5745 + 生成り #f4f2e9)とは色相で、
      トビワタリ(旧 KOI & FLOW) のテラコッタ #b5502a とは明度で分けている(#5c2f31 は L*≈25)。
      紺 #33415a は文具アトリエ綴りが使うので触らない。

   3) 商品画像は 1080×1080 でもフルスクリーンでも同じ位置・同じ大きさ。
      紙面の左から 565px・上から 236.8px、454 × 605.3px（下記「紙面」）。
      型を変えた今回も、この4つの数値は変えていない。

   コントラストは 4.5:1 以上を維持:
     臙脂パネル #5c2f31 … 白 #ffffff = 11.0:1 ／ 白茶 #d8bfa3 = 6.24:1
     本文面 #f6f1ee … 本文 #3a3033 = 11.35:1 ／ 副文 #6b5c5f = 5.64:1
                    ／ 補足 #7a696c = 4.61:1 ／ 差し色 #8f4a43 = 5.81:1
                    ／ 店名・現在地 #5c2f31 = 9.83:1 ／ 在庫 #456b4c = 5.41:1 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --wine: #5c2f31;           /* 商品パネル・フッター・ボタンの地 */
  --wine-deep: #412224;      /* 紙面の外側。フルスクリーンで左右に出る地色 */
  --sand: #d8bfa3;           /* 濃い地の上に置く差し色 */
  --sand-dim: #8f4a43;       /* 明るい面の上に置く差し色 */
  --surface: #f6f1ee;        /* 版面。生成りではなく桃寄りの白 */
  --surface-alt: #efe7e3;
  --ink: #3a3033;            /* 墨は真っ黒にせず、面との差を抑える */
  --ink-sub: #6b5c5f;
  --ink-faint: #7a696c;
  --line: #e4dbd6;
  --on-wine: #f7ece9;
  --on-wine-sub: #d9c4c1;

  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "MS PMincho", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  /* ファーストビューの2カラム。fr ではなく px で持つ。
     fr にすると紙面の幅がわずかに変わっただけで画像の寸法まで動くため。
     34(左余白) + 472 + 32 + 508 + 34(右余白) = 1080 = --fv-w */
  --tx-w: 472px;             /* 左の版面(店名・ナビ・商品情報) */
  --ph-w: 508px;             /* 右の臙脂パネル */
  --head-gap: 32px;
  --pad-x: 34px;             /* 紙面の左右パディング(.head / .sec / .ft 共通) */

  /* 本文の1行の長さ。日本語で 40〜45字程度に収める */
  --measure: 43em;

  /* ★写真の天地位置はこの1値で決まる。
     値 = 臙脂パネルの内側の上端から、写真の上端までの px。
     169.8px がパネルの天地中央（＝紙面の上から 236.8px）。小さくするほど画像が画面上部に寄り、
     0 でパネルの上端（同 67px）、339.7px でパネルの下端に接する。
     横位置と大きさはこの値では動かない。
     :root に置いてあるのは、URL の ?photo-top= で上書きできるようにするため
     （index.html の script／CSS 変数はインラインの指定が最優先になる） */
  --photo-top: 169.8px;
}

/* 1001〜1079px の窓では紙面(--fv-w)が入りきらない。
   横スクロールバーを出さずに右のパディングだけ切り落とす */
html { overflow-x: hidden; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--wine-deep);
  font-size: 15px;
  line-height: 1.9;
}
img { max-width: 100%; display: block; }

/* ---------- 画像プレースホルダー ---------- */
.ph {
  position: relative;
  aspect-ratio: var(--ph-ar, 3 / 4);
  background: repeating-linear-gradient(-45deg, #ece4e0 0 10px, #e5dcd8 10px 20px);
  border: 1px dashed #c5b8b4;
  overflow: hidden;
}
.ph::after {
  content: "画像支給待ち " attr(data-ph);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; letter-spacing: .04em; color: #8b807e; text-align: center; padding: 8px;
}
.ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

/* 実ファイルが入ったら枠(点線・網掛け・「支給待ち」表記)は消す。
   比率が完全に一致しない画像でも枠が透けないようにするため */
.ph:has(img) { border: none; background: none; }
.ph:has(img)::after { display: none; }

/* ===== 紙面 =====
   1080×1080 の切り出しでもフルスクリーンでも商品画像を同じ位置・同じ大きさで出す。
   守っているのは「画面のサイズに比例させない」ことだけ:
     - .layout の幅を --fv-w に固定して中央寄せ  → 画面が広くても紙面の中身は動かない
     - .head の高さを --fv-h に固定              → 画面が低くても画像の天地位置が動かない
     - .head のカラムを px 固定(--tx-w / --ph-w) → 幅の端数で画像の寸法が動かない
   結果、幅 1001px 以上ならどの画面でも 商品画像は紙面の左から 565px・上から 236.8px、
   454 × 605.3px に出る。画面高さが 1080 未満(1440×900 など)でも画像の下端は
   842px なので表紙は全体が見える。
   1080px より広い画面では、紙面の左右に地色(--wine-deep)が出るだけ。 */
.layout {
  width: var(--fv-w);
  margin-inline: auto;
  min-height: 100vh;
  background: var(--surface);
}

.main { background: var(--surface); }

/* ===== ファーストビュー ===== */
.head {
  display: grid;
  grid-template-columns: minmax(0, var(--tx-w)) var(--ph-w);
  gap: var(--head-gap);
  padding: 40px var(--pad-x);
  /* 画面高さではなく案件のファーストビュー高さで区切る。
     次のセクション(01 紙について)が中途半端に入るのを防ぐと同時に、
     画面が低くても画像の天地位置が動かないようにするため。
     border-bottom の 1px は height に含まれる(box-sizing: border-box) */
  height: var(--fv-h);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

/* 左の版面。店名を上、商品情報を余りの中央、かごを下端に置く */
.head-tx { display: flex; flex-direction: column; }

/* 店名まわり。表記は変えられない(クライアント指示)ので、組み立てで
   文具アトリエ綴りの縦レール(店名 → 罫 → 副題2行 → 縦ナビ)と分けている。
   カテゴリナビは 2026-09-04 の指示で撤去した */
.brand { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.brand-name {
  font-family: var(--serif);
  font-size: 30px; letter-spacing: .3em; line-height: 1.4; color: var(--wine);
  white-space: nowrap;
}
.brand-sub {
  margin-top: 10px;
  font-size: 11px; letter-spacing: .18em; color: var(--ink-faint);
}
/* 商品情報は店名ブロックの罫の直下に詰める(2026-09-04 指示: ナビと「混合技法シリーズ」を消し、
   空いた分を上に詰める)。罫と見出しが触れないよう最小限だけ空ける */
.copy { margin-top: 32px; margin-bottom: auto; }
.copy h1 {
  font-family: var(--serif);
  font-size: 38px; font-weight: 500; line-height: 1.42; letter-spacing: .06em;
  margin-bottom: 20px;
}
.sub {
  font-size: 14px; line-height: 2.1; color: var(--ink-sub);
  margin-bottom: 24px; max-width: var(--measure);
}
.sub b { border-bottom: 1px solid var(--sand-dim); font-weight: 600; }
.price {
  font-family: var(--serif);
  font-size: 26px; letter-spacing: .04em; margin-bottom: 18px;
}
.price small { font-size: 12px; color: var(--ink-faint); }
.buy-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn {
  background: var(--wine); color: #fff; border: none; padding: 14px 40px;
  font-size: 14px; letter-spacing: .1em; cursor: pointer; font-family: inherit;
}
.stock { font-size: 12px; color: #456b4c; }

.tx-foot {
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: .12em; color: var(--ink-faint);
}

/* 右の臙脂パネル。商品写真はこの中で天地中央、余った縦は台紙(マット)として見せる。
   ★ border 1px + padding 26px で内寸が 454px に決まり、写真の寸法がここで確定する。
     色だけ変えるのはよいが、この2つの数値は動かさないこと */
.head-ph {
  background: var(--wine); border: 1px solid var(--wine); padding: 26px;
}
.head-ph .ph { width: 100%; margin-top: var(--photo-top); border-color: rgba(255,255,255,.22); }
.head-ph .ph::after { color: var(--on-wine-sub); }
.head-ph img { width: 100%; height: 100%; object-fit: contain; }

/* ===== セクション ===== */
.sec { padding: 52px var(--pad-x); border-bottom: 1px solid var(--line); }
.h2 {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500; letter-spacing: .1em;
  margin-bottom: 34px; display: flex; align-items: baseline; gap: 16px;
}
.h2 span {
  font-size: 11px; letter-spacing: .2em; color: var(--sand-dim);
  border: 1px solid #e0cfc9; border-radius: 2px; padding: 3px 9px;
}

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
/* 小さめの本文は行間を広めに、1行は40〜45字程度で折り返す */
.tx p {
  font-size: 14.5px; line-height: 2.3; margin-bottom: 20px;
  color: var(--ink-sub); max-width: var(--measure);
}
.tx b { color: var(--ink); font-weight: 600; }

.spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec tr { border-bottom: 1px solid var(--line); }
.spec tr:first-child { border-top: 1px solid var(--line); }
.spec th {
  text-align: left; padding: 13px 16px; width: 130px; font-weight: 400;
  color: var(--ink-faint); letter-spacing: .06em; vertical-align: top; background: var(--surface-alt);
}
.spec td { padding: 13px 16px; line-height: 2.1; }
.spec b { font-weight: 600; }

.series { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.series figure { background: #fcf8f6; border: 1px solid var(--line); }
.series figure > .ph { border: none; border-bottom: 1px solid var(--line); }
.series figcaption { padding: 14px 16px 18px; }
.series b { display: block; font-size: 14px; letter-spacing: .06em; margin-bottom: 4px; }
.series span { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .04em; }

.rev { list-style: none; display: grid; gap: 22px; }
.rev li { background: #fcf8f6; border: 1px solid var(--line); padding: 22px 26px; }
.rv-t { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.stars { color: var(--sand-dim); letter-spacing: 2px; font-size: 14px; }
.rev b { font-size: 15px; }
.rev p { font-size: 14px; line-height: 2.2; color: var(--ink-sub); max-width: var(--measure); }
.rev em { font-size: 12px; color: var(--ink-faint); font-style: normal; }

/* ===== フッター ===== */
.ft { padding: 46px var(--pad-x); background: var(--wine); color: var(--on-wine-sub); }
.ft-logo {
  font-family: var(--serif);
  font-size: 18px; letter-spacing: .34em; color: #faf2ef; margin-bottom: 18px;
}
.ft-nav { list-style: none; display: flex; gap: 24px; font-size: 12px; letter-spacing: .12em; margin-bottom: 20px; flex-wrap: wrap; }
.ft-note { font-size: 12px; color: var(--on-wine-sub); }
.ft-copy { font-size: 11px; color: var(--on-wine-sub); margin-top: 10px; letter-spacing: .14em; }

/* 横はみ出し防止 */
.head > *, .two > *, .series > *, .rev li { min-width: 0; }