@charset "UTF-8";
/* 木漏れ日文具店 — 文具メーカー公式型（モスグリーン地・生成りの面・明朝見出し）
   旧 ARTISAN'S CANVAS。サイト名は日本語のみ、丸ロゴマークは廃止
   配色はテキストコントラスト 4.5:1 以上を確認済み
     生成り #f4f2e9 on モス #4c5745 = 6.79:1
     淡モス #cbd2bd on モス #4c5745 = 4.89:1
     墨   #2b2a28 on 生成り #f4f2e9 = 12.78:1
     副文 #6b675f on 生成り #f4f2e9 = 5.02:1 */

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

:root {
  --moss: #4c5745;          /* 地のモスグリーン */
  --moss-deep: #3d4638;
  --paper: #f4f2e9;         /* 生成りの面 */
  --paper-soft: #eae7db;
  --ink: #2b2a28;
  --ink-sub: #6b675f;
  --on-moss: #f4f2e9;
  --on-moss-sub: #cbd2bd;
  --line: #ddd8c9;

  --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;

  --content-w: 1180px;
}

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

/* ---------- 画像プレースホルダー ---------- */
.ph {
  position: relative;
  aspect-ratio: var(--ph-ar, 1 / 1);
  background: repeating-linear-gradient(-45deg, #eeebe0 0 10px, #e6e2d5 10px 20px);
  border: 1px dashed #b9b3a1;
  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: #8d8878;
}
.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; }

/* ===== ヘッダー ===== */
.hd { background: var(--moss-deep); }
.hd-inner {
  max-width: var(--content-w); margin: 0 auto; padding: 22px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.brand {
  font-family: var(--serif);
  /* 店名が7文字あるため字間をわずかに詰める(旧3文字時は .34em) */
  font-size: 22px; letter-spacing: .28em; color: var(--on-moss);
}
.nav ul { list-style: none; display: flex; gap: 30px; }
.nav li { font-size: 13px; letter-spacing: .08em; color: var(--on-moss-sub); cursor: pointer; padding-bottom: 3px; }
.nav li.on { color: var(--on-moss); border-bottom: 1px solid var(--on-moss); }

.crumb {
  max-width: var(--content-w); margin: 0 auto; padding: 18px 32px 0;
  font-size: 12px; letter-spacing: .06em; color: var(--on-moss-sub);
}
.crumb span { color: var(--on-moss); }

/* ===== ヒーロー(左=商品画像／右=商品名・仕様表) ===== */
.hero {
  max-width: var(--content-w); margin: 0 auto; padding: 40px 32px 70px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.hero-img { background: var(--paper-soft); padding: 40px; }
.hero-img img { width: 100%; height: auto; }
.series {
  font-size: 11px; letter-spacing: .28em; color: var(--on-moss-sub); margin-bottom: 14px;
}
.hero-text h1 {
  font-family: var(--serif);
  font-size: 40px; font-weight: 500; line-height: 1.35; letter-spacing: .04em;
  margin-bottom: 22px; color: var(--on-moss);
}
.hero-text h1 .size {
  display: inline-block; font-size: 15px; letter-spacing: .12em;
  border: 1px solid var(--on-moss-sub); border-radius: 2px; padding: 2px 12px;
  margin-left: 14px; vertical-align: middle; font-family: inherit; color: var(--on-moss-sub);
}
.lead { font-size: 15px; line-height: 2.1; color: var(--on-moss); margin-bottom: 28px; }
.lead b { font-weight: 600; border-bottom: 1px solid var(--on-moss-sub); }

.quick { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px; }
.quick tr { border-top: 1px solid rgba(244, 242, 233, .28); }
.quick tr:last-child { border-bottom: 1px solid rgba(244, 242, 233, .28); }
.quick th {
  text-align: left; padding: 9px 0; width: 90px;
  font-weight: 400; color: var(--on-moss-sub); letter-spacing: .06em;
}
.quick td { padding: 9px 0; color: var(--on-moss); }
.price {
  font-family: var(--serif);
  font-size: 20px; letter-spacing: .04em; margin-bottom: 8px; color: var(--on-moss);
}
.note { font-size: 12px; color: var(--on-moss-sub); }

/* ===== ブロック ===== */
.block {
  background: var(--paper);
  max-width: var(--content-w); margin: 0 auto; padding: 62px 32px;
}
.block.band { background: var(--paper-soft); max-width: none; }
.block.band > * { max-width: var(--content-w); margin-left: auto; margin-right: auto; }
.h2 {
  font-family: var(--serif);
  font-size: 25px; font-weight: 500; letter-spacing: .1em;
  margin-bottom: 38px; text-align: center; color: var(--ink);
}

.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.col-no {
  font-family: var(--serif);
  font-size: 13px; letter-spacing: .2em; color: #8a8f7c; margin-bottom: 10px;
}
.cols3 h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; letter-spacing: .04em; }
.cols3 p { font-size: 14px; color: #4f4c46; line-height: 2; }

.usage {
  margin-top: 44px; border: 1px solid var(--line); background: #fbfaf4;
  padding: 22px 28px; font-size: 14px; line-height: 2; color: #40403a;
}
.usage b { font-weight: 600; color: var(--ink); }

.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec tr { border-bottom: 1px solid var(--line); }
.spec tr:first-child { border-top: 1px solid var(--line); }
.spec th {
  text-align: left; padding: 15px 20px; width: 220px;
  font-weight: 400; color: var(--ink-sub); letter-spacing: .06em; vertical-align: top;
}
.spec td { padding: 15px 20px; }
.spec b { font-weight: 600; }

.scene { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 820px; }
.scene img { width: 100%; height: 380px; object-fit: cover; }
.scene figcaption {
  margin-top: 14px; font-size: 13px; color: var(--ink-sub); letter-spacing: .04em; text-align: center;
}

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.rel { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
.rel img { width: 100%; height: 150px; object-fit: cover; }
.rel figcaption { font-size: 13px; line-height: 2; color: #4f4c46; }
.rel figcaption b { font-size: 15px; color: var(--ink); }
.rel figcaption span { color: #5c6a52; }
.rel-text { display: block; }
.rel-text b { font-size: 15px; }
.rel-text p { font-size: 13px; color: #4f4c46; }
.rel-text span { font-size: 13px; color: #5c6a52; }

/* ===== フッター ===== */
.ft { background: var(--moss-deep); padding: 44px 32px; }
.ft-inner { max-width: var(--content-w); margin: 0 auto; text-align: center; }
.ft-brand {
  font-family: var(--serif);
  font-size: 17px; letter-spacing: .34em; margin-bottom: 20px; color: var(--on-moss);
}
.ft-nav {
  list-style: none; display: flex; justify-content: center; gap: 28px;
  flex-wrap: wrap; font-size: 12px; color: var(--on-moss-sub); margin-bottom: 22px;
}
.ft-note { font-size: 12px; color: var(--on-moss-sub); }
.ft-copy { font-size: 11px; color: var(--on-moss-sub); margin-top: 10px; letter-spacing: .1em; }

/* 横はみ出し防止 */
.hero > *, .cols2 > *, .scene > * { min-width: 0; }