@charset "UTF-8";
/* 文具アトリエ綴り — 文具・画材のセレクトショップ型
   1カラム基調・余白多め・低彩度ミニマル。背景はグレー、商品エリアは白 */

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

:root {
  --bg: #e9e9e7;          /* ページ地(無彩色寄りのグレー) */
  --surface: #ffffff;     /* 商品エリア・各セクションの面 */
  --line: #dcdcd8;
  --line-soft: #ebebe7;
  --text: #2a2a28;
  --text-sub: #767470;
  --text-faint: #9d9b96;

  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  /* サイトタイトル用。端末内蔵の明朝のみで、外部フォントは読まない */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "MS PMincho", serif;

  /* ---- CM の取り出し位置に合わせる調整用 ----
     ★縦位置はこの --pad-top ひとつで決まる。撮影素材と合わせるときはここだけ動かす。
       値 = スケッチパッド"実体"の上端を、画面上端から何 px に置くか。
       小さくしていくと 地色帯(20px) → 0 → 負マージン と .stage 側で自動的に
       切り替わるので、どの値を入れてもレイアウトは崩れない(下の .stage を参照)。
       index.html?dev で右上に出る調整パネルからライブで動かせる(dev-panel.js) */
  --pad-top: 61px;

  --product-offset-x: 0px;
  /* --pad-top で足りるときは 0 のままでよい。商品画像だけを画像の枠内で
     微妙にずらしたい場合の予備(transform なので下の要素はまったく動かない) */
  --product-offset-y: 0px;
  --product-size: 460px;   /* 商品画像の幅。高さは 3:4 で決まる(460px なら 613px) */

  /* product-main.jpg の 3:4 の枠の中で、パッド実体の上に入る白余白の比率。
     「枠の上端」と「パッド実体の上端」がずれる画像でも --pad-top を実体基準で扱えるよう、
     その分を比率で持っておく(商品サイズを変えても実体の上端が動かない)。
     画像を作り直したら要更新。
     2026-09-07 の差し替え(スケッチブック仮 0907 v2.png)は余白を落として整形した結果、
     上下余白 0・左右 0.52% なので 0(旧 STUDIO CREATIONS 表紙のときは 0.0327) */
  --pad-inset-ratio: 0;
  --pad-inset-top: calc(var(--product-size) * 4 / 3 * var(--pad-inset-ratio));

  --content-w: 940px;
  --stage-pad-x: 32px;   /* 白面(.stage)の左右パディング */

  /* ---- 左レール(画面左端の帯) ----
     言の葉と彩(sites/aigado)の左レールに合わせた紺×金。5サイトのうち
     この2つだけ左レールを持つので、配色・字組みも揃えてある。
     コントラストは 4.5:1 以上を確認済み(実測値は aigado の style.css 冒頭)。

     帯の幅は「白面(.stage)の左に出る地色の分」＋ --rail-inset(白面に潜り込む分)。
     1080×1080 の切り出しでは (1080-940)/2 + 150 = 220px(= aigado の正方形時のレール幅)。
     こう持っておくと、?shoot でステージが 1440px に広がっても帯が必ず白面の左端に届き、
     あいだに地色の隙間ができない。
     ★商品画像には画面幅によらず掛からない。帯の右端は「地色の帯 + 150px」、
       商品画像の左端は「地色の帯 + (940 - 460)/2 = + 240px」なので常に 90px 空く。
       --rail-inset を 240px 以上にすると商品画像に掛かる */
  --rail-inset: 150px;
  --navy: #33415a;
  --navy-edge: #4a5871;
  --gold: #d9c391;
  --on-navy: #e8ecf3;
  --on-navy-sub: #bcc7d8;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* ---------- サイトタイトル ----------
   明朝＋広い字間の縦に短いロックアップ。地色に直に置き、白い商品カードとの
   面の違いだけで見せる(罫線・影・箱は使わない)。
   高さを増やすと商品画像の位置が下がるため、上下パディングは控えめに保つ */
/* 2026-08-31 暫定: CM 用に商品画像を画面上端へ寄せるため、ヘッダーの占有高さを 0 にした。
   サイトタイトルの見せ方(サイズ・位置・出す出さない)は後で決める。
   タイトルを戻すときは height / overflow の 2 行を消せば元の位置関係に戻る */
.site-head { background: var(--bg); height: 0; overflow: hidden; }
.site-head-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 26px 32px 20px;
  text-align: center;
}
.site-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: .42em;
  /* 字間の分だけ右に余白が出るので、視覚的な中央に戻す */
  text-indent: .42em;
  line-height: 1.2;
  color: var(--text);
}
.site-title-en {
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--text-faint);
}

/* ---------- 画像プレースホルダー ----------
   実ファイルが無い間だけ枠を表示する。images/ に実ファイルを置けば自動で差し替わる */
.ph {
  position: relative;
  aspect-ratio: var(--ph-ar, 1 / 1);
  background: repeating-linear-gradient(-45deg, #f4f4f2 0 10px, #eeeeeb 10px 20px);
  border: 1px dashed #c9c9c4;
  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: var(--text-faint);
}
.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; }

/* ===== 商品ステージ(ページ最上部) ===== */

.stage {
  /* 図版枠(figure)の上端位置 = パッド実体の位置 - 画像内の白余白 */
  --frame-top: calc(var(--pad-top) - var(--pad-inset-top));
  background: var(--surface);
  max-width: var(--content-w);
  /* 地色の帯は最大 20px。--frame-top がそれより小さくなったら帯を詰め、
     さらに小さければ負マージンになって白面ごと画面上端より上へ出る */
  margin: min(20px, var(--frame-top)) auto 0;
  /* 帯の 20px を使い切るまでは、余りをこちらの余白で持つ */
  padding: max(0px, calc(var(--frame-top) - 20px)) var(--stage-pad-x) 72px;
}

.product {
  /* 画面中央基準。--product-offset-x で中央からずらせる。
     極端に狭いときは親幅まで縮めて、はみ出さないようにする */
  width: min(var(--product-size), 100%);
  margin: 0 auto;
  transform: translate(var(--product-offset-x), var(--product-offset-y));
  text-align: center;
}

.product-photo { border: none; }
.product-photo:not(.ph) { aspect-ratio: 3 / 4; }

/* 画像 → 商品名 → 価格 → 補足 の順に積む */
.product-info { margin-top: 34px; }
.product-maker {
  font-size: 11.5px; letter-spacing: .24em; color: var(--text-faint);
  margin-bottom: 12px;
}
.product-name {
  font-size: 21px; font-weight: 500; letter-spacing: .08em; line-height: 1.7;
}
.product-price {
  font-size: 20px; font-weight: 400; color: var(--text);
  letter-spacing: .06em; margin-top: 14px;
}
.product-price .tax { font-size: 12px; color: var(--text-sub); letter-spacing: .02em; }
.product-note { font-size: 13.5px; color: var(--text-sub); margin-top: 12px; }

.product-buy { display: flex; gap: 10px; margin-top: 30px; }
.btn-cart {
  flex: 1; background: var(--text); color: #fff; border: none;
  padding: 15px 20px; font-size: 14px; letter-spacing: .14em;
  cursor: pointer; font-family: inherit;
}
.btn-fav {
  background: transparent; color: var(--text); border: 1px solid var(--line);
  padding: 15px 22px; font-size: 13px; letter-spacing: .1em;
  cursor: pointer; font-family: inherit;
}

/* 在庫・配送・品番は画像下に1行で集約(旧: ポイント還元・お届け目安は撤去) */
.product-sub {
  font-size: 11.5px; color: var(--text-faint); letter-spacing: .04em; margin-top: 18px;
}

/* ---------- 左レール ----------
   WEBCM の正方形の切り出し(framing.css の --fv-w / --fv-h)だと、商品画像の左右が空いて
   ファーストビューが寂しくなる。その左に紺の帯を敷き、店名・ナビ・カートを置いた
   (2026-09-03 改定。それまでは白地にサムネイル4点を並べていた)。
   構成・配色は 言の葉と彩(sites/aigado)の .rail に合わせている。

   ★.stage-wrap を基準にした絶対配置なので、商品画像の位置・大きさ
     (--pad-top / --product-size / --product-offset-*)には一切影響しない。
     位置合わせパネル(?dev)の値もそのまま使える。
   ★天地は商品カード(.stage)の下端まで。正方形の切り出しではカードが
     ファーストビューいっぱいに伸びるので、帯も画面の天地いっぱいになる。
   ★狭幅では商品画像に重なるため responsive.css で非表示。
     撮影モード(?shoot)では responsive.css が無効化されるので、撮影時は常に出る */
/* 商品カードと帯を束ねるだけのラッパ。ステージ全幅・高さは中身ぶん・見た目は持たない。
   flow-root にして .stage の上マージン(20px)を内側に閉じ込めているので、
   ラッパの上端 = 画面上端・下端 = 商品カードの下端 になる */
.stage-wrap { position: relative; display: flow-root; }

.stage-left {
  position: absolute;
  left: 0;
  /* 天地は「画面上端 〜 商品カード(.stage)の下端」。正方形の切り出しでは
     下の @media で白面がファーストビューいっぱいに伸びるので、帯もそこまで届く */
  top: 0; bottom: 0;
  width: calc((100% - var(--content-w)) / 2 + var(--rail-inset));
  /* 白面(.stage)より手前に出す。白面の左端は帯の下に潜る */
  z-index: 5;
  background: var(--navy);
  color: var(--on-navy);
  padding: 36px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--navy-edge);
  text-align: left;
}

/* 店名。ヘッダー(.site-head)は商品画像を上端へ寄せるため非表示にしてあるので、
   サイトの身元はここで見せる。縦位置を動かさずに出せるのが左レールの利点。
   店名は帯の内寸(1080幅で 171px)に1行で収める。全角なら1文字 = (1 + letter-spacing)em
   なので、必要な幅は 文字数 x font-size x (1 + letter-spacing) で計算できる。
   「文具アトリエ綴り」8文字 = 8 x 18 x 1.12 = 161px(内寸 171px)。
   店名を変えるときは、この式で収まるか確かめて font-size / letter-spacing を調整すること */
.rail-brand {
  font-family: var(--serif);
  font-size: 18px; letter-spacing: .12em; line-height: 1.5;
  color: #f2f5fa; white-space: nowrap;
}
.rail-sub {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 11px; letter-spacing: .18em; line-height: 2; color: var(--on-navy-sub);
}

/* 縦ナビ。現在地(この商品のカテゴリ)を金＋左の金罫で示す */
.rail-nav ul { list-style: none; }
.rail-nav li {
  font-size: 13.5px; letter-spacing: .14em; padding: 10px 0;
  color: var(--on-navy-sub); cursor: pointer;
}
.rail-nav li:hover { color: var(--on-navy); }
.rail-nav li.on { color: var(--gold); border-left: 2px solid var(--gold); padding-left: 12px; }

.rail-foot {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; letter-spacing: .12em; color: var(--on-navy-sub);
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px;
}

/* ===== 以降のセクション ===== */

.section {
  background: var(--surface);
  max-width: var(--content-w);
  margin: 20px auto 0;
  padding: 60px 64px;
}
.section:last-of-type { margin-bottom: 20px; }
.section h2 {
  font-size: 15px; font-weight: 500; letter-spacing: .24em;
  color: var(--text-sub); text-align: center; margin-bottom: 40px;
}

.lead { font-size: 14.5px; line-height: 2.2; color: #3d3c39; max-width: 40em; margin: 0 auto; }
.lead + .feature-grid { margin-top: 44px; }
.lead b { font-weight: 600; }
.feature-grid + .lead { margin-top: 44px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feature-grid img { width: 100%; height: 180px; object-fit: cover; }
.feature-grid figcaption {
  margin-top: 14px; font-size: 13px; line-height: 1.95; color: var(--text-sub);
}
.feature-grid figcaption b {
  display: block; color: var(--text); font-weight: 500;
  letter-spacing: .06em; margin-bottom: 4px;
}

.spec { width: 100%; border-collapse: collapse; font-size: 14px; max-width: 720px; margin: 0 auto; }
.spec tr { border-bottom: 1px solid var(--line-soft); }
.spec tr:first-child { border-top: 1px solid var(--line-soft); }
.spec th {
  text-align: left; padding: 14px 18px; width: 180px;
  font-weight: 400; color: var(--text-sub); letter-spacing: .08em; vertical-align: top;
}
.spec td { padding: 14px 18px; }
.spec b { font-weight: 600; }

.voices { list-style: none; max-width: 720px; margin: 0 auto; }
.voices li { border-bottom: 1px solid var(--line-soft); padding: 22px 0; }
.voices li:first-child { border-top: 1px solid var(--line-soft); }
.voices b { font-size: 14.5px; font-weight: 500; letter-spacing: .06em; }
.voices p { font-size: 13.5px; color: var(--text-sub); margin-top: 4px; }
.v-meta { font-size: 11.5px; color: var(--text-faint); }

.related { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.related li { text-align: center; }
.related img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 16px; }
.related span { display: block; }
.rl-name { font-size: 13.5px; letter-spacing: .04em; line-height: 1.8; }
.rl-price { font-size: 14px; color: var(--text); margin-top: 6px; letter-spacing: .04em; }
.rl-note { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* ===== フッター ===== */
.site-footer { background: var(--bg); padding: 56px 32px 64px; }
.ft-inner { max-width: var(--content-w); margin: 0 auto; text-align: center; }
.ft-brand { font-size: 17px; letter-spacing: .34em; color: var(--text); }
.ft-tag { font-size: 11.5px; letter-spacing: .2em; color: var(--text-faint); margin-top: 8px; }
.ft-links {
  list-style: none; display: flex; justify-content: center; gap: 26px;
  flex-wrap: wrap; font-size: 12px; color: var(--text-sub); margin: 26px 0 22px;
}
.ft-note { font-size: 12px; color: var(--text-sub); }
.ft-copy { font-size: 11px; color: var(--text-faint); margin-top: 10px; letter-spacing: .12em; }

/* 横はみ出し防止 */
.feature-grid > *, .related > * { min-width: 0; }

/* ===== 1080×1080 など正方形に近い切り出し =====
   ファーストビューを商品カード(.stage)だけで埋める。
   素のままだとカードの下端が 1044px で終わり、次のセクション(この紙について)の
   白い頭が 16px だけ画面下に覗いてしまうため。

   幅ではなく「見えている範囲の縦横比」で判定しているので撮影モード(?shoot)でも効く
   — body を等倍で縮小するだけなので縦横比は変わらないため。
   16:9 のフルスクリーン(1.78)や 9:16 の縦抜き(0.56)には掛からない。
   (同じ考え方を 言の葉と彩 sites/aigado の .head にも入れてある)

   ★伸びるのはカードの下側だけ。商品画像は上から流し込まれるので位置は動かない */
@media (min-aspect-ratio: 4 / 5) and (max-aspect-ratio: 5 / 4) {
  /* --shoot-vh は shoot.js が入れる「ステージ座標での画面高さ」。
     カードの上マージン(地色の帯)を引いた分が、カードに要る高さ */
  .stage { min-height: calc(var(--shoot-vh, 100vh) - min(20px, var(--frame-top))); }
}