@charset "UTF-8";
/* 禅座布団 | 丹羽ふとん店
   common.css の指定に左右されないよう、すべて #zz 配下に閉じています。
   配色: Aesop / Agobay / Ogata を参考に、生成りの地・墨色の文字・深い藍黒の面。 */

#zz {
  --bone: #f2eee6;      /* 生成りの地 */
  --bone-2: #e9e3d8;
  --ink: #2b2723;       /* 墨色の文字 */
  --ink-soft: #6f665b;  /* 補助文字 */
  --line: #d6cec1;
  --night: #14171b;     /* 藍黒の面 */
  --night-ink: #dcd5c9; /* 暗い面の文字 */
  --night-soft: #8f897f;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --latin: "Cormorant Garamond", "Times New Roman", serif;

  display: block;
  position: relative;
  padding-top: 80px; /* 固定ヘッダー分。実際の高さは下のJSで上書き */
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .08em;
  font-weight: 400;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
#zz, #zz * { box-sizing: border-box; }
#zz h1, #zz h2, #zz h3, #zz p, #zz figure, #zz table, #zz article, #zz section {
  margin: 0; padding: 0; float: none; background: none; border: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit;
  text-transform: none; width: auto; height: auto; position: static;
}
#zz img { display: block; width: 100%; height: auto; max-width: 100%; border: 0; }
#zz a { color: inherit; text-decoration: none; }
#zz p + p { margin-top: 1.6em; }
#zz p { text-wrap: pretty; word-break: auto-phrase; line-break: strict; }

/* ---------- 共通パーツ ---------- */
#zz .zz-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 40px; }
#zz .zz-sec { padding: 128px 0; }
#zz .zz-en {
  font-family: var(--latin); font-size: 13px; line-height: 1.6; letter-spacing: .32em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 28px;
}
#zz .zz-h2 { font-size: 26px; line-height: 2; letter-spacing: .14em; font-weight: 500; margin: 0 0 40px; }
#zz .zz-h2-xl { font-size: 34px; letter-spacing: .3em; margin-bottom: 0; }
#zz .zz-h3 { font-size: 20px; line-height: 2; letter-spacing: .14em; font-weight: 500; margin: 0 0 32px; }
#zz .zz-head { text-align: center; margin-bottom: 88px; }
#zz .zz-lead { max-width: 560px; margin: 36px auto 0; color: var(--ink-soft); }
#zz .zz-caption, #zz figcaption {
  max-width: 560px; margin: 28px auto 0; text-align: center; font-size: 13px; line-height: 2; color: var(--ink-soft);
}

/* 2カラム */
#zz .zz-split { display: grid; grid-template-columns: 5.4fr 5.6fr; gap: 0 6%; align-items: center; }
#zz .zz-split-rev { grid-template-columns: 5.6fr 5.4fr; }
#zz .zz-body { max-width: 640px; }
#zz .zz-fig-tall img { aspect-ratio: 4 / 5; object-fit: cover; }
#zz .zz-fig-wide { margin-top: 128px; }
#zz .zz-fig-wide img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 65%; }

/* ---------- HERO（敷きふとんページを実測：黒帯6% / 写真54% / 暗い面40% / 高さ=幅の47%） ---------- */
#zz .zz-hero { display: flex; height: max(480px, min(47.1vw, calc(100vh - 80px))); background: #3d3235; color: #f1ece4; }
#zz .zz-hero-bar { flex: 0 0 6vw; min-width: 56px; background: #000; display: flex; align-items: center; justify-content: center; }
#zz .zz-hero-bar span { writing-mode: vertical-rl; font-size: clamp(13px, 1vw, 16px); letter-spacing: .5em; color: #fff; }
#zz .zz-hero-photo { flex: 1 1 auto; position: relative; overflow: hidden; background: #0d1014; }
#zz .zz-hero .zz-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
#zz .zz-hero-panel { flex: 0 0 40%; display: flex; flex-direction: column; padding: 5.8vw 2.2vw 5.2vw 5.4vw; background: #3d3235; }
#zz .zz-hero-title { display: flow-root; align-self: flex-start; writing-mode: vertical-rl; font-size: clamp(14px, 1.16vw, 19px); line-height: 2.6; letter-spacing: .43em; font-weight: 400; color: #f6f1e9; }
#zz .zz-hero-info { margin-top: auto; }
#zz .zz-hero-text { font-size: clamp(12px, .87vw, 15px); line-height: 2.4; letter-spacing: .03em; color: rgba(246,241,233,.9); }
#zz .zz-hero-price { margin: 2.2em 0 0; font-size: clamp(12px, .94vw, 15px); }
#zz .zz-hero-price div { display: flex; align-items: baseline; }
#zz .zz-hero-price div + div { margin-top: .5em; }
#zz .zz-hero-price dt { flex: 0 0 5.8em; letter-spacing: .2em; color: rgba(246,241,233,.72); }
#zz .zz-hero-price dd { margin: 0; font-family: var(--serif); font-size: 1.45em; font-weight: 500; letter-spacing: .15em; color: #f6f1e9; }
#zz .zz-hero-price small { margin-left: .5em; font-size: .62em; font-weight: 700; letter-spacing: .1em; }

/* ---------- 暗い面 ---------- */
#zz .zz-dark { background: var(--night); color: var(--night-ink); }
#zz .zz-dark .zz-en, #zz .zz-dark .zz-caption { color: var(--night-soft); }
#zz .zz-dark .zz-split { margin-bottom: 128px; }
#zz .zz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#zz .zz-pair img { aspect-ratio: 1 / 1; object-fit: cover; }

/* 仕様 */
#zz .zz-spec { max-width: 480px; margin: 128px auto 0; }
#zz .zz-spec .zz-en { text-align: center; margin-bottom: 20px; }
#zz .zz-table { width: 100%; border-collapse: collapse; }
#zz .zz-table th, #zz .zz-table td {
  display: table-cell; padding: 18px 4px; font-size: 14px; line-height: 1.8; letter-spacing: .1em;
  border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; background: none; color: inherit;
}
#zz .zz-table tr:first-child th, #zz .zz-table tr:first-child td { border-top: 1px solid var(--line); }
#zz .zz-table th { width: 34%; color: var(--ink-soft); }
#zz .zz-dark .zz-table th, #zz .zz-dark .zz-table td { border-color: rgba(220,213,201,.18); }
#zz .zz-dark .zz-table th { color: var(--night-soft); }
#zz .zz-spec-inline { margin: 64px 0 0; max-width: none; }
#zz .zz-spec-inline .zz-en { text-align: left; }

/* ---------- ZAFU ---------- */
#zz .zz-zafu { background: var(--bone-2); }
#zz .zz-figs { width: 100%; }
#zz .zz-figs img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 78%; }

/* ---------- 手仕事 ---------- */
#zz .zz-step { display: grid; grid-template-columns: 7fr 4fr; gap: 0 7%; align-items: center; margin-bottom: 96px; }
#zz .zz-step:last-child { margin-bottom: 0; }
#zz .zz-step:nth-child(even) { grid-template-columns: 4fr 7fr; }
#zz .zz-step:nth-child(even) .zz-fig { order: 2; }
#zz .zz-step img { aspect-ratio: 3 / 2; object-fit: cover; }
#zz .zz-num { font-family: var(--latin); font-size: 15px; letter-spacing: .3em; color: var(--ink-soft); margin: 0 0 16px; }
#zz .zz-step .zz-h3 { margin-bottom: 20px; font-size: 22px; }

/* ---------- お手入れ / 商品写真 ---------- */
#zz .zz-care { padding-bottom: 128px; border-top: 1px solid var(--line); }
#zz .zz-center { text-align: center; }
#zz .zz-center p { max-width: 480px; margin-left: auto; margin-right: auto; }
/* 商品写真＋文章（敷きふとん／まくらページの下部と同じ構成） */
#zz .zz-band { position: relative; height: clamp(380px, 46vw, 780px); overflow: hidden; background: #1c1815; color: #fff; }
#zz .zz-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; }
#zz .zz-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,12,10,.62) 0%, rgba(16,12,10,.3) 40%, rgba(16,12,10,0) 66%); pointer-events: none; }
#zz .zz-band-inner { position: absolute; z-index: 2; left: 12.2%; top: 14%; max-width: 560px; }
#zz .zz-band-title { font-size: clamp(18px, 1.55vw, 30px); line-height: 2; letter-spacing: .12em; font-weight: 400; margin: 0 0 2.2em; color: #fff; }
#zz .zz-band-text { font-size: clamp(12px, .88vw, 16px); line-height: 2.6; letter-spacing: .08em; color: rgba(255,255,255,.94); }

/* ---------- Hero stacked (like pillow page) ---------- */
@media screen and (max-width: 960px) {
  #zz .zz-hero { display: block; height: auto; }
  #zz .zz-hero-bar { flex: none; width: auto; min-width: 0; height: 78px; }
  #zz .zz-hero-bar span { writing-mode: horizontal-tb; font-size: 15px; letter-spacing: .6em; padding-left: .6em; }
  #zz .zz-hero-photo { height: 62vw; min-height: 260px; }
  #zz .zz-hero-panel { display: block; padding: 56px 24px 60px; text-align: center; }
  #zz .zz-hero-title { display: block; writing-mode: horizontal-tb; font-size: clamp(19px, 3.2vw, 26px); line-height: 2; letter-spacing: .2em; margin: 0 0 32px; }
  #zz .zz-hero-info { margin-top: 0; }
  #zz .zz-hero-text { font-size: clamp(13px, 1.9vw, 15px); line-height: 2.4; text-align: center; max-width: 640px; margin: 0 auto; }
  #zz .zz-hero-price { font-size: clamp(13px, 1.9vw, 15px); margin-top: 2.4em; display: inline-block; text-align: left; }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
  #zz { padding-top: 52px; }
  #zz { font-size: 14px; line-height: 2.1; }
  #zz .zz-wrap { padding: 0 24px; }
  #zz .zz-sec { padding: 80px 0; }
  #zz .zz-h2 { font-size: 21px; margin-bottom: 28px; }
  #zz .zz-h2-xl { font-size: 26px; letter-spacing: .26em; }
  #zz .zz-h3 { font-size: 18px; margin-bottom: 22px; }
  #zz .zz-head { margin-bottom: 56px; }
  #zz .zz-split, #zz .zz-split-rev, #zz .zz-step, #zz .zz-step:nth-child(even) { display: block; }
  #zz .zz-split .zz-fig, #zz .zz-figs { margin-bottom: 40px; }
  #zz .zz-split-rev .zz-fig { margin: 40px 0 0; }
  #zz .zz-body { max-width: none; }
  #zz .zz-fig-wide { margin-top: 80px; }
  #zz .zz-fig-wide img { aspect-ratio: 4 / 3; }
  #zz .zz-dark .zz-split { margin-bottom: 80px; }
  #zz .zz-pair { grid-template-columns: 1fr; gap: 16px; }
  #zz .zz-band { height: 560px; }
  #zz .zz-band img { object-position: 64% 100%; }
  #zz .zz-band::after { background: linear-gradient(to bottom, rgba(16,12,10,.7) 0%, rgba(16,12,10,.35) 45%, rgba(16,12,10,0) 70%); }
  #zz .zz-band-inner { left: 24px; right: 24px; top: 36px; }
  #zz .zz-band-title { font-size: 18px; margin-bottom: 1.4em; }
  #zz .zz-band-text { font-size: 12.5px; line-height: 2.3; }
  #zz .zz-spec { margin-top: 80px; }
  #zz .zz-step { margin-bottom: 64px; }
  #zz .zz-step .zz-fig { margin-bottom: 24px; }
}


/* =====================================================
   問い合わせ / 戻るバー（ヘッダー・フッターは header_main.html / footer_main.html を使用）
   ===================================================== */
.nf-cta, .nf-cta * { box-sizing: border-box; }
/* 問い合わせ / 戻る */
.nf-cta { font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.nf-cta a { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 78px; color: #fff; text-decoration: none; font-size: 14px; letter-spacing: .14em; line-height: 1; transition: opacity .3s; }
.nf-cta a:hover { opacity: .8; }
.nf-cta .nf-cta-main { background: #050505; }
.nf-cta .nf-cta-back { background: #555; }
.nf-cta svg { display: block; flex: none; }


@media screen and (max-width: 960px) {
  .nf-cta a { height: 64px; font-size: 13px; }
}
#zz figcaption { text-wrap: balance; }
@media screen and (max-width: 768px) {
  #zz .zz-caption, #zz figcaption { font-size: 12px; letter-spacing: 0; }
}
/* 上部がずれる対策：ヘッダー側のfloatを回り込ませない */
#zz { clear: both; width: 100%; box-sizing: border-box; overflow-x: clip; }
#zz .zz-hero { clear: both; width: 100%; box-sizing: border-box; float: none; margin: 0; }
#zz .zz-band img { object-position: 50% 75%; }
#zz .zz-band img { object-position: 50% 75%; }
#zz .zz-pair .zz-fig-single img { object-position: 60% 50%; }
/* 価格：（税込）を折り返さない */
#zz .zz-hero-price dd, #zz .zz-hero-price small { white-space: nowrap; }
@media screen and (max-width: 960px) {
  #zz .zz-hero-price dt { flex: 0 0 5.2em; letter-spacing: .12em; white-space: nowrap; }
  #zz .zz-hero-price dd { letter-spacing: .1em; }
}
@media screen and (max-width: 400px) {
  #zz .zz-hero-price { font-size: 12px; }
  #zz .zz-hero-price dt { flex-basis: 4.8em; letter-spacing: .06em; }
}