/* Generated: 2026-08-02 JST
   お品書き（index.php）とお知らせ（news.php）の版面。
   共通の変数・ヘッダー・品書メニュー・フッターは site.css にある。ここには足すものだけ。
   ・カード・角丸・影は使わない。罫線と余白で一覧をつくる
   ・売っていないものは薄く、しかし隠さない。次に何が出るかが分かる状態を保つ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- 版面 --------------------------------------------------------------- */
/* site.css の .wrap-narrow（880px・商品ページ用）とは別。一覧はもう少し広く取る */
.wrap-list { width: 100%; max-width: 1060px; margin-inline: auto; padding-inline: var(--gutter); }

/* 数字はライニング（Cormorant の既定はオールドスタイルで金額が読みにくい） */
.num { font-family: var(--roman); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* --- ページの見出し ------------------------------------------------------
   もとはトップの「お品書き」を大きく見せるためのもの。
   トップを作り直したあと、使っているのは お知らせ（news.php）だけになった。
   ページの見出しとしては 5.5rem は大きすぎるので、
   他の見出し（.blk h2 は最大 2.75rem、法務ページは 3.25rem）に合わせて詰めた。
   ------------------------------------------------------------------------ */
.top { padding-top: clamp(96px, 15vw, 150px); padding-bottom: clamp(40px, 7vw, 70px); }
.top-eyebrow { font-family: var(--gothic); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.26em; color: var(--ink-3); }
.top-h {
  margin-top: clamp(16px, 2.6vw, 24px);
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.5; letter-spacing: 0.18em;
  color: var(--ink);
}
.top-txt { margin-top: clamp(26px, 4.4vw, 40px); max-width: 30em; line-height: 2.4; font-size: clamp(1.0875rem, 4.5vw, 1.1875rem); }

/* --- 一覧の頭 ------------------------------------------------------------ */
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: clamp(20px, 3.4vw, 30px); }
.list-title { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.1875rem, 4.8vw, 1.625rem); letter-spacing: 0.16em; color: var(--ink); }
.list-note { font-family: var(--gothic); font-size: 0.90625rem; letter-spacing: 0.14em; color: var(--ink-3); }
.list-more {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.18em;
  color: var(--ink); text-decoration: none; padding-bottom: 7px;
  border-bottom: 1px solid var(--hair); transition: border-color .5s var(--ease);
}
.list-more i { font-size: 0.6875rem; color: var(--kin); transition: transform .5s var(--ease); }
.list-more:hover { border-color: var(--ink); }
.list-more:hover i { transform: translateX(5px); }

/* --- 品目一覧 ------------------------------------------------------------ */
.list { padding-bottom: var(--rhythm); }
.item {
  display: grid; gap: clamp(18px, 3vw, 30px);
  padding-block: clamp(30px, 5vw, 46px);
  border-top: 1px solid var(--hair-2);
  text-decoration: none; color: inherit;
}
/* 承り中は a、準備中は div なので :last-of-type だと取りこぼす */
.list > .item:last-child { border-bottom: 1px solid var(--hair-2); }

.item-photo { overflow: hidden; }
.item-photo img { width: 100%; transition: transform 1.4s var(--ease); }
a.item:hover .item-photo img { transform: scale(1.03); }

.item-name {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.5rem, 6.4vw, 2.25rem); letter-spacing: 0.14em; line-height: 1.5;
  color: var(--ink);
}
.item-name .yomi { font-family: var(--mincho); font-weight: 500; font-size: 0.46em; letter-spacing: 0.14em; color: var(--kin); margin-left: 0.8em; }
.item-desc { margin-top: 14px; font-size: clamp(1rem, 4.1vw, 1.0625rem); line-height: 2.1; color: var(--ink-2); max-width: 28em; }

.item-foot { margin-top: clamp(20px, 3vw, 28px); display: flex; align-items: baseline; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }
.item-price { font-family: var(--roman); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; font-weight: 400; font-size: clamp(1.625rem, 6.6vw, 2.125rem); line-height: 1; color: var(--ink); }
.item-price .tax { font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.16em; color: var(--ink-3); margin-left: 12px; }

.item-more {
  margin-top: clamp(22px, 3.4vw, 30px);
  display: inline-flex; align-items: center; gap: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hair);
  font-family: var(--gothic); font-size: 0.90625rem; font-weight: 500; letter-spacing: 0.22em;
  color: var(--ink); transition: border-color .5s var(--ease);
}
.item-more i { font-size: 0.78125rem; color: var(--kin); transition: transform .5s var(--ease); }
a.item:hover .item-more { border-color: var(--ink); }
a.item:hover .item-more i { transform: translateX(5px); }

/* 準備中の品は薄く。ただし隠さない（次に何が出るかを伝える）
   写真がないぶん、行の高さも詰めて、承り中の品との差をつける */
/* opacity で薄めると本文が 2.48:1 まで落ちる。色で差をつける */
.item.soon { padding-block: clamp(22px, 3.4vw, 32px); }
.item.soon .item-name { color: var(--ink-3); }
.item.soon .item-desc { color: var(--ink-3); }
.item.soon .item-name { font-size: clamp(1.125rem, 4.6vw, 1.4375rem); letter-spacing: 0.18em; }
.item.soon .item-desc { margin-top: 10px; }

/* --- 状態（承り中 / 準備中 / 締切） -------------------------------------- */
.tag {
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.22em; line-height: 1; white-space: nowrap;
  padding: 9px 15px; border: 1px solid var(--hair);
  color: var(--ink-3);
}
.tag.now { color: var(--shu); border-color: rgba(156,58,40,0.34); }
.tag.due { color: var(--kin); border-color: rgba(156,132,73,0.4); }

/* --- 季節の品 ------------------------------------------------------------ */
.season { padding-bottom: var(--rhythm); }
.season-lead { margin-top: clamp(22px, 3.6vw, 32px); max-width: 30em; }
.season-list { margin-top: clamp(30px, 5vw, 46px); }
.srow {
  display: grid; gap: 10px;
  padding-block: clamp(22px, 3.6vw, 30px);
  border-top: 1px solid var(--hair-2);
  color: inherit; text-decoration: none;
}
.season-list .srow:last-child { border-bottom: 1px solid var(--hair-2); }
.srow-name { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.15625rem, 4.6vw, 1.3125rem); letter-spacing: 0.14em; color: var(--ink); }
.srow-when { font-family: var(--gothic); font-size: 0.875rem; letter-spacing: 0.16em; color: var(--ink-2); }
.srow-tag { justify-self: start; }

/* --- まとめてのご用命 ---------------------------------------------------- */
.bulk { padding-bottom: var(--rhythm); }
.bulk-inner { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding-block: clamp(30px, 5vw, 44px); display: grid; gap: 14px; }
.bulk-h { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.09375rem, 4.2vw, 1.1875rem); letter-spacing: 0.14em; color: var(--ink); }
.bulk-p { font-size: 0.95625rem; line-height: 2.1; color: var(--ink-2); max-width: 34em; }
.bulk-tel { font-family: var(--roman); font-variant-numeric: lining-nums; font-size: clamp(1.5rem, 6vw, 1.875rem); letter-spacing: 0.04em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.bulk-tel i { font-size: 0.5em; color: var(--kin); }

/* --- お知らせ（トップの抜粋） -------------------------------------------- */
.news { padding-bottom: var(--rhythm); }
.news-list { margin-top: clamp(22px, 3.6vw, 32px); }
.nrow {
  display: grid; gap: 10px; text-decoration: none;
  padding-block: clamp(20px, 3.4vw, 28px); border-top: 1px solid var(--hair-2);
}
.news-list .nrow:last-child { border-bottom: 1px solid var(--hair-2); }
.nrow time {
  font-family: var(--roman); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: 1rem; letter-spacing: 0.06em; color: var(--ink-3);
}
.nrow-title {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(1.0625rem, 4.4vw, 1.25rem); letter-spacing: 0.1em; line-height: 1.8; color: var(--ink);
  transition: color .4s var(--ease);
}
.nrow:hover .nrow-title { color: var(--kin); }
.nrow-tag { justify-self: start; }

/* --- お知らせ一覧（news.php） -------------------------------------------- */
.posts { padding-bottom: var(--rhythm); }
.post { padding-block: clamp(32px, 5vw, 50px); border-top: 1px solid var(--hair-2); display: grid; gap: clamp(14px, 2.4vw, 20px); scroll-margin-top: 110px; }
.posts .post:last-child { border-bottom: 1px solid var(--hair-2); }
.post-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.post-meta time {
  font-family: var(--roman); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: 1.0625rem; letter-spacing: 0.06em; color: var(--ink-3);
}
.post-tag {
  font-family: var(--gothic); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.18em; line-height: 1; white-space: nowrap;
  padding: 8px 14px; border: 1px solid var(--hair); color: var(--ink-3);
}
.post-tag.oka { color: var(--shu); border-color: rgba(156,58,40,0.32); }
.post-tag.season { color: var(--kin); border-color: rgba(156,132,73,0.4); }
.post-title { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.25rem, 5.2vw, 1.75rem); line-height: 1.75; letter-spacing: 0.1em; color: var(--ink); }
.post-body { max-width: 36em; }
.post-body p + p { margin-top: 1.4em; }
.post-body a { color: var(--ink); text-underline-offset: 5px; }
.post-none { padding-block: clamp(40px, 7vw, 70px); border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); color: var(--ink-3); }

/* ==========================================================================
   スマホ（〜767px）
   ========================================================================== */
@media (max-width: 767px) {
  .item-photo { margin-inline: calc(var(--gutter) * -1); }
  .top-h { letter-spacing: 0.14em; }

  .srow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .srow-name { grid-column: 1; }
  .srow-when { grid-column: 1; }
  .srow-tag { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

  .nrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .nrow time { grid-column: 1; }
  .nrow-tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .nrow-title { grid-column: 1 / -1; }
}

/* ==========================================================================
   タブレット以上（768px〜）
   ========================================================================== */
@media (min-width: 768px) {
  .top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 52px); align-items: end; }
  .top-head { grid-column: 1 / span 7; }
  .top-txt  { grid-column: 8 / span 5; margin-top: 0; }

  /* 品目：写真7 / 文5 の非対称。奇数番は左右を入れ替えて単調さを避ける */
  .item { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 52px); align-items: center; }
  .item-photo { grid-column: 1 / span 7; }
  .item-body  { grid-column: 8 / span 5; }
  .item.rev .item-photo { grid-column: 6 / span 7; grid-row: 1; }
  .item.rev .item-body  { grid-column: 1 / span 5; grid-row: 1; }

  /* 写真のない品（準備中）は文だけを横一列に置く */
  .item.soon { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .item.soon .item-body { grid-column: 1 / span 8; }
  .item.soon .item-state { grid-column: 10 / span 3; justify-self: end; }

  .srow { grid-template-columns: 16em minmax(0, 1fr) auto; align-items: baseline; gap: clamp(20px, 3vw, 40px); }
  .srow-tag { justify-self: end; }

  .nrow { grid-template-columns: 11em 9em minmax(0, 1fr); align-items: baseline; gap: clamp(18px, 3vw, 36px); }

  .bulk-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 60px); }
  .bulk-tel { justify-self: end; }

  .post { grid-template-columns: 12em minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); }
  .post-meta { grid-column: 1; grid-row: 1 / span 2; align-content: start; align-items: baseline; }
  .post-title { grid-column: 2; }
  .post-body { grid-column: 2; }
}

/* ==========================================================================
   トップページ（2026-09-18）

   _deploy/preview/top.html ／ top.css に合わせた。
   共通の色・書体・reveal は site.css のものを使い、ここでは
   トップ固有の組みだけを持つ。冒頭の写真（.openshot / .opening）も
   詳細ページと同じ仕掛けを使い回す。
   ========================================================================== */

/* 冒頭。詳細ページより題字を小さくし、上に欧文を添える */
.opening--top .opening__title { font-size: max(2.5rem, min(15vw, 18svh, 5.25rem)); }
.opening__en {
  /* 承認版は Cormorant Garamond。冒頭の欧文も cræft と書体を揃える */
  writing-mode: vertical-rl; font-family: var(--roman); color: rgba(255,255,255,.88);
  font-size: 1rem; letter-spacing: .5em; margin-bottom: 1.5rem;
  text-shadow: 0 1px 16px rgba(0,0,0,.7);
  opacity: 0; animation: okafade 1.2s ease 1s forwards;
}
.opening--top .opening__copy { right: var(--gutter); bottom: 6.5rem; max-width: 32em; }
.opening--top .opening__copy b {
  display: block; font-weight: 500; font-size: 1.25rem; letter-spacing: .16em; margin-bottom: .6rem;
}
.opening--top .opening__copy span { font-size: 1rem; letter-spacing: .1em; line-height: 1.9; }

/* ---------- 章の器 ---------- */
.blk { padding: clamp(4rem, 12vh, 9rem) var(--gutter); }
.blk-in { width: min(1080px, 100%); margin-inline: auto; }
.blk-in.narrow { width: min(760px, 100%); }
.eyebrow {
  font-family: var(--mincho); font-size: 0.9375rem; letter-spacing: .42em; text-indent: .42em;
  color: var(--ink-3); margin-bottom: 1.5rem;
}
.blk h2 {
  font-family: var(--mincho); font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.55; letter-spacing: .12em;
  color: var(--ink); margin-bottom: 2rem;
}
.blk h3 {
  font-family: var(--mincho); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  letter-spacing: .12em; color: var(--ink); margin-bottom: 1rem;
}
.blk p { font-size: 1.0625rem; line-height: 2.1; color: var(--ink-2); letter-spacing: .03em; }
.blk p + p { margin-top: 1.5rem; }
/* 写真の枠。御嘉ページの .fig（数字の行）と名前が衝突していたため、
   罫線と余白がそのまま写真に付いていた。名前を分ける。 */
.blk .blk-fig { margin-block: clamp(2rem, 5vw, 3.5rem); overflow: hidden; }
.blk .blk-fig img { width: 100%; }
/* 章の最後が写真のときは、下の余白を持たせない。
   章そのものが下に余白を持っているので、二重になって間延びする */
.blk .blk-fig:last-child { margin-bottom: 0; }

/* reveal の間合い。site.css の .rv に遅れを足すだけ */
.rv-d1 { transition-delay: .12s; }
.rv-d2 { transition-delay: .24s; }
.rv-d3 { transition-delay: .36s; }

/* ---------- 数字 ---------- */
.figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0; border-top: 1px solid var(--ink);
}
.figs article {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
  border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.figs article:first-child { border-left: 0; }
.figs .n {
  font-family: var(--mincho); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15;
  letter-spacing: .04em; color: var(--ink); margin-bottom: 1rem;
}
.figs .n small { font-size: .42em; letter-spacing: .16em; margin-left: .3em; color: var(--ink-3); }
.figs p { font-size: 0.9375rem; line-height: 1.9; color: var(--ink-2); }
@media (max-width: 600px) { .figs article { border-left: 0; } }

/* ---------- コンセプト ---------- */
.craeft { background: var(--paper-hi); }
/* 承認版は Cormorant Garamond（明朝系）。
   Jost のような幾何学的なゴシックだと、字面が硬く、和文の明朝と馴染まない。
   このサイトでは --roman が Cormorant Garamond を指している。 */
.craeft .word {
  font-family: var(--roman); font-size: clamp(2.5rem, 7vw, 5rem); letter-spacing: .06em;
  color: var(--ink); margin-bottom: 1.25rem; line-height: 1;
}
.craeft .gloss {
  font-size: 1rem; color: var(--ink-2); line-height: 2;
  padding-left: 1.25rem; border-left: 2px solid var(--shu); margin-bottom: 2.5rem;
}
/* 話題が変わるところを罫線で区切る */
.craeft-sub { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--hair-2); }
.craeft-sub h3 { letter-spacing: .2em; }
.craeft-sub h3::before { content: "【"; }
.craeft-sub h3::after  { content: "】"; }
.craeft-sub .lead-s {
  font-family: var(--mincho); font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--ink); letter-spacing: .08em; margin-bottom: 1.25rem;
}

/* ---------- お取り扱いの品 ---------- */
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.prods article { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding-top: 1.5rem; max-width: 36rem; }
.prods .ph { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-hi); margin-bottom: 1.5rem; }
.prods .ph img { width: 100%; height: 100%; object-fit: cover; }
.prods .ph-none {
  display: grid; place-items: center; height: 100%;
  font-family: var(--mincho); font-size: 1rem; letter-spacing: .24em; color: var(--ink-3);
}
.prods h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: .1em; margin-bottom: .5rem; }
.prods .grade { font-family: var(--mincho); font-size: 1rem; letter-spacing: .34em; color: var(--shu); margin-bottom: 1rem; }
.prods p { font-size: 1rem; line-height: 1.95; color: var(--ink-2); margin-bottom: 1.25rem; }
.prods .price { font-family: var(--mincho); font-size: 1.375rem; letter-spacing: .06em; color: var(--ink); margin-bottom: 1.5rem; }
.prods .price small { font-family: var(--gothic); font-size: .875rem; color: var(--ink-3); margin-left: .5em; letter-spacing: 0; }
/* 予告の品は価格の代わりに日付を出す。数字ではないので明朝で組む */
.prods .note-s { font-family: var(--mincho); font-size: 1.0625rem; line-height: 1.9; letter-spacing: .06em; color: var(--ink); margin-bottom: 1.5rem; }
.prods .go {
  margin-top: auto; font-family: var(--mincho); font-size: 1rem; letter-spacing: .24em; text-indent: .24em;
  text-decoration: none; color: var(--ink); border: 1px solid var(--ink);
  padding: .9rem 1.5rem; text-align: center; transition: background .4s var(--ease), color .4s var(--ease);
}
.prods .go:hover { background: var(--ink); color: var(--paper); }
.prods .go.off { color: var(--ink-3); border-color: var(--hair); cursor: default; }
.prods .state {
  display: inline-block; margin-left: 1em; padding: .2em .9em;
  font-family: var(--gothic); font-size: .875rem; letter-spacing: .16em; text-indent: .16em;
  color: #fff; background: var(--shu); vertical-align: .1em;
}
/* 予告：写真は出すが色を抜き、まだ買えないことを見た目で伝える */
[data-state="teaser"] .ph img { filter: saturate(.25) brightness(1.04); }

/* ---------- お知らせ ---------- */
.news-list { border-top: 1px solid var(--hair); }
.nrow {
  display: grid; grid-template-columns: 10em 1fr; gap: 4px 20px; align-items: baseline;
  padding-block: 18px; border-bottom: 1px solid var(--hair); text-decoration: none;
}
.nrow time { font-family: var(--gothic); font-size: .875rem; letter-spacing: .1em; color: var(--ink-3); }
.nrow-title { font-size: 1.0625rem; color: var(--ink); }
.news-more { margin-top: 1.5rem; }
.news-more a { font-family: var(--mincho); letter-spacing: .14em; color: var(--ink); }
@media (max-width: 519px) { .nrow { grid-template-columns: 1fr; } }

/* ---------- 店 ---------- */
.shop { padding: clamp(4rem, 12vh, 9rem) var(--gutter); border-top: 1px solid var(--hair); }
.shop-in { width: min(880px, 100%); margin-inline: auto; text-align: center; }
.shop h2 { font-family: var(--mincho); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: .12em; color: var(--ink); margin-bottom: 1.5rem; }
.shop p { font-size: 1.0625rem; line-height: 2.1; color: var(--ink-2); }
.shop .visit {
  display: inline-block; margin-top: 2rem; font-family: var(--mincho); font-size: 1rem;
  letter-spacing: .24em; text-indent: .24em; text-decoration: none; color: var(--ink);
  padding: .9rem 2.25rem; border: 1px solid var(--ink);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.shop .visit:hover { background: var(--ink); color: var(--paper); }

/* ---------- お問い合わせ ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.contact article { border-top: 1px solid var(--hair); padding-top: 1.25rem; }
.contact h3 { font-size: 1.125rem; letter-spacing: .2em; margin-bottom: .9rem; }
.contact p { font-size: 1rem; line-height: 1.95; color: var(--ink-2); }
.contact p + p { margin-top: .75rem; }
.contact a { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
#contact .eyebrow { margin-bottom: 2.5rem; }

/* 数字の段だけ、器を広く取る。
   トップの章はDBから読むので、型で見分けて幅を変える（2026-09-29） */
.blk-figures .blk-in { width: min(1080px, 100%); }

/* 続きの章は、コンセプトの章の中へ束ね直した（2026-09-30）。
   .craeft-sub の見た目は既にこのファイルの上で定義してある。 */

/* ==========================================================================
   トップだけ生成りの地にする（2026-09-30）

   オーナー承認版のトップは生成り（#F2F0EB）。
   御嘉ページは 9/9 承認の v5 で白と決まっているので、地色はページで分ける。
   トップは「店の紹介」、御嘉は「商品の詳細」と役割が違うため、
   同じ白で揃える必要はないと判断した。
   ========================================================================== */
body.is-top {
  --washi:      #F2F0EB;   /* 生成り */
  --washi-deep: #E8E4DC;   /* 一段落とした地 */
  background: var(--washi);

  /* 地が白より暗いぶん、文字も濃くしないと基準を割る。
     色味（温かみ）は保ったまま明度だけ落とした。
     一番きびしい「一段落とした地」で
       本文 #22201D  12.82:1   （基準 12.6:1）
       補助 #262320  12.33:1   （基準 11:1）
     生成りの上ではさらに上がる（14.27:1 / 13.72:1）。 */
  --ink-2: #22201D;
  --ink-3: #262320;
}
body.is-top .page   { background: var(--washi); }
body.is-top .craeft { background: var(--washi-deep); }
body.is-top .ft     { background: var(--washi); }
/* 罫線も地色に合わせて温度を揃える。白地用の灰だと浮いて見える */
body.is-top .figs,
body.is-top .figs article,
body.is-top .contact article,
body.is-top .shop,
body.is-top .prods article,
body.is-top .craeft-sub,
body.is-top .news-list,
body.is-top .nrow { border-color: #D6D2CA; }
body.is-top .figs { border-top-color: var(--ink); }
body.is-top .prods article { border-top-color: var(--ink); }

/* トップの「SCROLL」も承認版は Cormorant Garamond。
   御嘉ページ（v5）は Jost のままなので、トップにだけ当てる。 */
.opening--top .opening__hint { font-family: var(--roman); }