/* 家具工房 木ねずみ（デモ）
   胡桃 #6B4A33・オイルの琥珀 #C88B3A・生成り #F3ECE0。地は生成りと #FAF6EF、本文の字は #3B2A1E。
   印は焼き印（リスの影絵）・木口の年輪・かんな屑の線・木目の地・寸法線。写真は角を丸めない。 */

:root {
  --kurumi: #6B4A33;
  --kohaku: #C88B3A;
  --kinari: #F3ECE0;
  --shiro: #FAF6EF;
  --white: #FFFEFB;
  --koge: #3B2A1E;
  --kuzu: #E6D3B3;
  --kurumi-70: color-mix(in srgb, #6B4A33 72%, #FAF6EF);
  --kurumi-20: color-mix(in srgb, #6B4A33 20%, #FAF6EF);
  --kurumi-10: color-mix(in srgb, #6B4A33 10%, #FAF6EF);
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --lora: "Lora", "Noto Serif JP", Georgia, serif;
  --wrap: 1240px;
  --pad: clamp(20px, 4.4vw, 60px);
  --ease: cubic-bezier(.25, .6, .25, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='260' viewBox='0 0 900 260'%3E%3Cg fill='none' stroke='%236B4A33' stroke-opacity='.05' stroke-width='1.1'%3E%3Cpath d='M0 18 C150 10 300 30 450 20 S750 8 900 18'/%3E%3Cpath d='M0 46 C160 38 280 60 470 50 S760 36 900 46'/%3E%3Cpath d='M0 70 C120 66 260 86 420 78 C520 73 560 62 600 70 C680 86 800 66 900 70'/%3E%3Cpath d='M0 104 C180 96 320 116 480 108 S780 96 900 104'/%3E%3Cpath d='M520 126 C560 112 640 112 680 128 C640 142 560 142 520 126Z'/%3E%3Cpath d='M0 128 C160 122 360 140 500 128 C540 106 660 104 700 128 C760 140 840 124 900 128'/%3E%3Cpath d='M0 156 C200 148 330 170 500 160 S780 148 900 156'/%3E%3Cpath d='M0 188 C140 182 300 200 460 192 S770 180 900 188'/%3E%3Cpath d='M0 222 C170 214 320 236 480 226 S760 212 900 222'/%3E%3Cpath d='M0 248 C160 242 300 258 460 250 S770 240 900 248'/%3E%3C/g%3E%3C/svg%3E");
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='260' viewBox='0 0 900 260'%3E%3Cg fill='none' stroke='%236B4A33' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 18 C150 10 300 30 450 20 S750 8 900 18'/%3E%3Cpath d='M0 46 C160 38 280 60 470 50 S760 36 900 46'/%3E%3Cpath d='M0 70 C120 66 260 86 420 78 C520 73 560 62 600 70 C680 86 800 66 900 70'/%3E%3Cpath d='M0 104 C180 96 320 116 480 108 S780 96 900 104'/%3E%3Cpath d='M520 126 C560 112 640 112 680 128 C640 142 560 142 520 126Z'/%3E%3Cpath d='M0 128 C160 122 360 140 500 128 C540 106 660 104 700 128 C760 140 840 124 900 128'/%3E%3Cpath d='M0 156 C200 148 330 170 500 160 S780 148 900 156'/%3E%3Cpath d='M0 188 C140 182 300 200 460 192 S770 180 900 188'/%3E%3Cpath d='M0 222 C170 214 320 236 480 226 S760 212 900 222'/%3E%3Cpath d='M0 248 C160 242 300 258 460 250 S770 240 900 248'/%3E%3C/g%3E%3C/svg%3E");
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23C88B3A' stroke-width='1'%3E%3Cpath d='M12 1.2c6.2-.1 10.9 4.6 10.8 10.9-.1 6-4.9 10.8-11 10.7C5.7 22.7 1.1 18 1.2 11.8 1.3 5.9 6 1.3 12 1.2z'/%3E%3Cpath d='M12.3 4.3c4.4.1 7.5 3.4 7.4 7.8-.1 4.3-3.5 7.4-7.9 7.3-4.2-.1-7.3-3.5-7.2-7.7.2-4.3 3.5-7.5 7.7-7.4z'/%3E%3Cpath d='M12.1 7.4c2.8 0 4.7 2.1 4.6 4.8-.1 2.6-2.2 4.4-4.8 4.3-2.6-.1-4.4-2.1-4.3-4.6.1-2.6 2-4.5 4.5-4.5z'/%3E%3Cpath d='M11.9 10.2c1.1 0 1.9.8 1.9 1.9 0 1-.9 1.8-2 1.8-1 0-1.8-.9-1.7-1.9.1-1 .8-1.8 1.8-1.8z'/%3E%3C/g%3E%3C/svg%3E");
  --kuzu-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C120 3.6 300 2 500 2.2 C700 2.4 880 3.6 1000 5 C880 6.4 700 8 500 7.8 C300 7.6 120 6.4 0 5Z' fill='%23E6D3B3'/%3E%3C/svg%3E");
  --kuzu-curl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 24'%3E%3Cpath d='M0 13.4 C10 12 20 11 27 11.4 C35 11.8 40 8.6 39.4 5.4 C38.8 2.6 35 1.6 32.6 3.4 C30.4 5 31 8 33.6 8.4 C35.4 8.6 36.4 7.4 36 6.2 C38.2 7.6 37.6 11.6 33 13.8 C28 16.2 18 16.4 0 16.6Z' fill='%23E6D3B3'/%3E%3Cpath d='M33 4.6 C31.4 6 32.2 7.6 33.8 7.6' fill='none' stroke='%23C9AF85' stroke-width='.7'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--shiro);
  color: var(--koge);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, .86rem + .25vw, 17px);
  line-height: 1.9;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
  line-break: strict;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--kurumi); font-feature-settings: "palt"; letter-spacing: .04em; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--kohaku); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--pad); }
.small { font-size: .86em; line-height: 1.8; color: color-mix(in srgb, var(--koge) 82%, var(--shiro)); }
.num { font-family: var(--lora); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
.en { font-family: var(--lora); font-weight: 500; letter-spacing: .04em; }
.it { font-family: var(--lora); font-style: italic; font-weight: 500; }
.pc { display: inline; }
@media (max-width: 700px) { .pc { display: none; } }

/* ---------- 地 ---------- */
.bg-shiro { background: var(--shiro); }
.bg-white { background: var(--white); }
.bg-grain { background-color: var(--kinari); background-image: var(--grain); background-size: 900px 260px; }

/* ---------- ロゴ ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--koge); }
.logo svg { display: block; width: auto; height: 50px; overflow: visible; }
.lg-en { font-family: var(--lora); font-weight: 600; font-size: 27px; letter-spacing: .02em; fill: var(--koge); }
.lg-ja { font-family: var(--serif); font-weight: 600; font-size: 11.4px; letter-spacing: .26em; fill: var(--kurumi); }
.seal { color: var(--koge); --cut: var(--shiro); }
.demo { white-space: nowrap; font-family: var(--lora); font-size: 9.5px; letter-spacing: .14em; color: var(--kurumi-70); border: 1px solid var(--kurumi-20); padding: 0 5px; line-height: 16px; margin-left: 10px; align-self: center; }

/* ---------- ヘッダー ---------- */
.head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--shiro) 96%, transparent); border-bottom: 1px solid var(--kurumi-10); }
.head__in { display: flex; align-items: center; gap: 24px; min-height: 78px; }
.head__brand { display: flex; align-items: center; margin-right: auto; }
.gnav { display: flex; gap: clamp(14px, 1.9vw, 30px); font-size: 14.5px; font-weight: 600; letter-spacing: .06em; }
.gnav a { text-decoration: none; position: relative; padding: 6px 0; color: var(--kurumi); }
.gnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kohaku); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.gnav a:hover::after { transform: scaleX(.5); }
.gnav a[aria-current="page"]::after { transform: scaleX(1); }
.gnav__tel { display: none; }
.head__tel { text-decoration: none; text-align: right; line-height: 1.25; color: var(--kurumi); }
.head__tel b { display: block; font-family: var(--lora); font-weight: 600; font-size: 21px; letter-spacing: .03em; font-variant-numeric: lining-nums; }
.head__tel small { font-size: 11px; letter-spacing: .04em; color: var(--kurumi-70); }
.head__call { display: none; }
.head__menu { display: none; }

/* トップでは写真に重ねる */
.home .head { position: absolute; left: 0; right: 0; background: linear-gradient(to bottom, rgba(250,246,239,.92), rgba(250,246,239,.6) 65%, rgba(250,246,239,0)); border-bottom: 0; }

@media (max-width: 1000px) {
  .head__tel { display: none; }
  .head__call { white-space: nowrap; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; text-decoration: none; background: var(--kurumi); color: var(--kinari); padding: 0 14px; min-height: 44px; letter-spacing: .08em; }
  .head__menu { white-space: nowrap; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 54px; min-height: 44px; background: none; border: 1px solid var(--kurumi); color: var(--kurumi); font: 600 10px/1 var(--lora); letter-spacing: .06em; cursor: pointer; }
  .head__menu i { display: block; width: 20px; height: 1.5px; background: currentColor; box-shadow: 0 -5px 0 currentColor; margin-top: 5px; }
  .gnav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--shiro); border-top: 1px solid var(--kurumi-10); border-bottom: 1px solid var(--kurumi-20); padding: 8px var(--pad) 18px; font-size: 16px; }
  .gnav a { padding: 14px 0; border-bottom: 1px solid var(--kurumi-10); }
  .gnav a::after { bottom: -1px; right: auto; width: 3em; }
  .gnav__tel { display: block; font-family: var(--lora); }
  .nav-open .gnav { display: flex; }
  .head__in { gap: 10px; min-height: 66px; }
  .logo svg { height: 42px; }
}
@media (max-width: 420px) { .demo { margin-left: 4px; font-size: 8.5px; padding: 0 3px; } .logo svg { height: 34px; } .head__call { padding: 0 10px; font-size: 12px; } .head__menu { width: 48px; } }

/* ---------- ボタン ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: .7em; min-height: 50px; padding: 0 1.5em; font: 600 15px/1.4 var(--serif); letter-spacing: .08em; text-decoration: none; background: var(--kurumi); color: var(--kinari); border: 1px solid var(--kurumi); box-shadow: inset 0 -3px 0 var(--kohaku); transition: background-color .25s; }
.btn:hover { background: var(--koge); }
.btn--ghost { background: transparent; color: var(--kurumi); box-shadow: none; }
.btn--ghost:hover { background: var(--kurumi-10); }
.btn .arr { width: 18px; height: 10px; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.tlink { color: var(--kurumi); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--kohaku); padding-bottom: 2px; }
.tlink:hover { color: var(--koge); }

/* ---------- 区画と見出し ---------- */
.sec { padding: clamp(64px, 8vw, 116px) 0; position: relative; }
.sec--tight { padding: clamp(48px, 6vw, 80px) 0; }
.h2 { font-size: clamp(23px, 1.2rem + 1.1vw, 33px); display: flex; align-items: center; gap: 14px; margin-bottom: .9em; }
.h2::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--ring) no-repeat center / contain; transform: rotate(var(--rot, 0deg)); }
.h3 { font-size: clamp(18px, 1rem + .45vw, 22px); margin-bottom: .5em; }
.lead { max-width: 40em; }
.eyebrow { font-family: var(--lora); font-weight: 500; font-style: normal; font-size: 15px; letter-spacing: .2em; color: var(--kohaku); margin: 0 0 .3em; text-transform: none; }
.endmark { display: block; width: 30px; height: 30px; margin: clamp(40px, 5vw, 64px) auto 0; color: var(--koge); opacity: .78; --cut: var(--shiro); }

/* かんな屑の線 */
.kz { position: relative; height: 24px; margin: 0 auto; width: min(100% - 2 * var(--pad), 1120px); }
.kz::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 10px; background: var(--kuzu-band) no-repeat center / 100% 100%; }
.kz::after { content: ""; position: absolute; top: 0; left: var(--at, 30%); width: 46px; height: 24px; background: var(--kuzu-curl) no-repeat center / contain; transform: scaleX(var(--flip, 1)); }
.kz--in { width: 100%; margin: clamp(28px, 4vw, 48px) 0; }

/* 写真 */
.ph { margin: 0; }
.ph img { width: 100%; object-fit: cover; box-shadow: 0 2px 2px rgba(59,42,30,.16); }
.ph figcaption { font-size: 13px; line-height: 1.7; margin-top: .7em; color: color-mix(in srgb, var(--koge) 80%, var(--shiro)); }
.ph figcaption .it { color: var(--kurumi-70); margin-right: .6em; }

/* 寸法線（数字は線の上のまん中） */
.dim { position: relative; display: flex; justify-content: center; color: var(--kurumi); height: 26px; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; border-bottom: 1px solid currentColor; }
.dim i { position: absolute; bottom: 0; width: 1px; height: 13px; background: currentColor; }
.dim i:first-of-type { left: 0; } .dim i:last-of-type { right: 0; }
.dim b { font-family: var(--lora); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums lining-nums; background: inherit; padding: 0 8px; position: relative; line-height: 18px; }

/* ---------- トップ：最初の画面 ---------- */
.hero { position: relative; background: var(--shiro); }
.hero__ph { position: relative; height: min(84vh, 860px); min-height: 520px; overflow: hidden; }
.hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__box { position: absolute; left: var(--pad); bottom: clamp(36px, 5vw, 64px); width: min(560px, 46vw); background: var(--kinari); padding: clamp(28px, 3vw, 44px) clamp(26px, 3vw, 46px) clamp(26px, 3vw, 40px); }
.hero__h { font-size: clamp(26px, 1rem + 1.7vw, 40px); line-height: 1.5; letter-spacing: .03em; margin-bottom: .7em; }
.hero__box p { font-size: .95em; }
.hero__cap { position: absolute; right: var(--pad); bottom: 14px; margin: 0; text-align: right; color: var(--kinari); text-shadow: 0 1px 3px rgba(40,26,16,.55); line-height: 1.6; }
.hero__cap .it { font-size: 14px; display: block; }
.hero__cap small { font-size: 12px; letter-spacing: .04em; }
.js .hero__box { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .hero.is-in .hero__box { opacity: 1; transform: none; }
.js .hero__ph img { animation: settle 6s cubic-bezier(.2,.5,.3,1) both; }
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }

@media (max-width: 760px) {
  .home .head { position: sticky; background: var(--shiro); border-bottom: 1px solid var(--kurumi-10); }
  .hero__ph { height: 50vh; min-height: 260px; }
  .hero__ph img { object-position: 50% 60%; }
  .hero__box { position: relative; left: auto; bottom: auto; width: auto; padding: 28px var(--pad) 34px; }
  .hero__cap { position: static; text-align: right; color: var(--kurumi-70); text-shadow: none; background: var(--kinari); padding: 8px var(--pad) 0; }
  .hero__cap .it { font-size: 12.5px; }
  .hero__cap small { font-size: 11px; }
}

/* お知らせの帯 */
.notice { border-top: 1px solid var(--kurumi-10); border-bottom: 1px solid var(--kurumi-10); padding: 16px 0; font-size: 14.5px; font-weight: 600; letter-spacing: .05em; color: var(--koge); }
.notice .wrap { display: flex; align-items: center; gap: 14px; }
.notice svg { flex: none; width: 22px; height: 22px; color: var(--koge); --cut: var(--kinari); }
.notice p { margin: 0; }

/* 作っている家具（大きさをそろえず互い違い） */
.lineup { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 3.4vw, 52px) clamp(16px, 2.4vw, 36px); margin-top: clamp(30px, 4vw, 54px); }
.lineup .ph { display: flex; flex-direction: column; }
.lineup h3 { font-size: 18px; margin-top: .9em; }
.lineup .price { font-size: 15px; margin: .1em 0 0; }
.lineup .price .num { font-size: 18px; color: var(--kurumi); }
.lineup .ph figcaption { margin-top: .2em; }
.lu-table { grid-column: 1 / 8; }
.lu-table img { aspect-ratio: 3 / 2; }
.lu-isu { grid-column: 9 / 12; margin-top: clamp(40px, 7vw, 110px); }
.lu-isu img { aspect-ratio: 2 / 3; }
.lu-low { grid-column: 2 / 7; }
.lu-low img { aspect-ratio: 4 / 3; }
.lu-bench { grid-column: 7 / 13; margin-top: clamp(30px, 6vw, 90px); }
.lu-bench img { aspect-ratio: 3 / 1; object-position: 50% 100%; }
@media (max-width: 700px) {
  .lineup { grid-template-columns: 1fr 1fr; }
  .lu-table, .lu-bench { grid-column: 1 / -1; margin-top: 0; }
  .lu-isu { grid-column: 2; grid-row: 2; margin-top: 0; }
  .lu-low { grid-column: 1; grid-row: 2; margin-top: 36px; }
  .lu-low img { aspect-ratio: 3 / 4; }
}

/* 2列（写真と文） */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.split--wide { grid-template-columns: 1.25fr 1fr; }
.split--narrow { grid-template-columns: 1fr 1.2fr; }
.split .ph img { aspect-ratio: 3 / 2; }
.split--rev > :first-child { order: 2; }
@media (max-width: 800px) { .split, .split--wide, .split--narrow { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

/* 2つの面（注文のしかた） */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--kurumi-20); background: var(--white); }
.pair > div { padding: clamp(26px, 3vw, 42px); }
.pair > div + div { border-left: 1px solid var(--kurumi-20); }
.pair h3 { display: flex; align-items: center; gap: 12px; }
.pair h3::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--ring) no-repeat center / contain; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } .pair > div + div { border-left: 0; border-top: 1px solid var(--kurumi-20); } }

/* 表（営業・特商法） */
.dl { width: 100%; font-size: .95em; }
.dl th, .dl td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--kurumi-20); }
.dl tr:first-child th, .dl tr:first-child td { border-top: 1px solid var(--kurumi-20); }
.dl th { width: 9.5em; padding-right: 1.2em; font-weight: 600; color: var(--kurumi); }
.dl--law th { width: 13em; }
@media (max-width: 600px) { .dl th, .dl td { display: block; width: auto; } .dl th { padding-bottom: 0; border-bottom: 0; } .dl tr:first-child td { border-top: 0; } }

/* 値段の表 */
.price-t { width: 100%; background: color-mix(in srgb, var(--white) 70%, transparent); }
.price-t th, .price-t td { padding: 16px 14px; border-bottom: 1px solid var(--kurumi-20); text-align: left; vertical-align: middle; }
.price-t thead th { font-size: 13.5px; font-weight: 600; color: var(--kurumi); border-bottom: 2px solid var(--kurumi); white-space: nowrap; }
.price-t thead th .it { display: block; font-size: 12px; color: var(--kohaku); font-weight: 500; }
.price-t tbody th { font-weight: 600; color: var(--koge); }
.price-t td.yen { text-align: right; font-family: var(--lora); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: 18px; color: var(--kurumi); white-space: nowrap; }
.price-t td.yen span { font-family: var(--serif); font-size: 13px; margin-left: 1px; }
.price-t .size { font-family: var(--lora); font-variant-numeric: tabular-nums lining-nums; font-size: 14.5px; white-space: nowrap; }
.price-t thead th.r { text-align: right; }
@media (max-width: 760px) {
  .price-t thead { display: none; }
  .price-t, .price-t tbody, .price-t tr, .price-t th, .price-t td { display: block; }
  .price-t tr { padding: 16px 0; border-bottom: 1px solid var(--kurumi-20); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
  .price-t tbody th { grid-column: 1 / -1; padding: 0; border: 0; font-size: 16.5px; }
  .price-t td { padding: 0; border: 0; }
  .price-t td.sz { grid-column: 1 / -1; margin-bottom: 6px; }
  .price-t td.yen { text-align: left; font-size: 16.5px; }
  .price-t td.yen::before { content: attr(data-ki); display: block; font-family: var(--serif); font-size: 12px; color: var(--kurumi-70); font-weight: 600; }
}

/* 段（左に写真、右に文。偶数は逆） */
.rows > .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.rows > .row--r > .ph { order: 2; }
.rows .row .ph img { aspect-ratio: 3 / 2; }
.rows .spec { margin: .8em 0 1em; font-size: .94em; }
.rows .spec div { display: flex; gap: 1em; padding: 6px 0; border-bottom: 1px dotted var(--kurumi-20); }
.rows .spec dt { flex: none; width: 6.5em; font-weight: 600; color: var(--kurumi); }
.rows .spec dd { margin: 0; }
.rows .say { padding-left: 1em; border-left: 2px solid var(--kohaku); }
.rows .step-en { font-family: var(--lora); font-style: italic; color: var(--kohaku); font-size: 15px; margin: 0 0 .2em; }
@media (max-width: 760px) { .rows > .row { grid-template-columns: 1fr; } .rows > .row--r > .ph { order: 0; } }

/* 決まりの段（縦に積む） */
.rules { border-top: 1px solid var(--kurumi-20); }
.rules > div { display: grid; grid-template-columns: 8em 1fr; gap: 1.2em; padding: 18px 0; border-bottom: 1px solid var(--kurumi-20); }
.rules dt { font-weight: 700; color: var(--kurumi); display: flex; align-items: baseline; gap: 10px; }
.rules dt::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--ring) no-repeat center / contain; transform: translateY(2px); }
.rules dd { margin: 0; }
@media (max-width: 600px) { .rules > div { grid-template-columns: 1fr; gap: .3em; } }

/* 札（注意・調整） */
.fuda { border: 1px solid var(--kurumi); background: var(--white); padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px); position: relative; }
.fuda h3 { font-size: 18px; margin-bottom: .5em; }
.fuda p:last-child { margin-bottom: 0; }
.fuda--grain { background-color: var(--kinari); background-image: var(--grain); }
.kz-sandwich { padding: 6px 0; }

/* よく聞かれること */
.faq { border-top: 1px solid var(--kurumi-20); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--kurumi-20); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2em 1fr 20px; gap: .4em; align-items: baseline; padding: 20px 0; font-weight: 600; color: var(--kurumi); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q."; font-family: var(--lora); font-weight: 600; font-size: 1.15em; color: var(--kohaku); }
.faq summary::after { content: ""; width: 12px; height: 12px; border-right: 1.5px solid var(--kurumi); border-bottom: 1.5px solid var(--kurumi); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); justify-self: end; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq .a { display: grid; grid-template-columns: 2em 1fr; gap: .4em; padding: 0 0 22px; }
.faq .a::before { content: "A."; font-family: var(--lora); font-weight: 600; font-size: 1.15em; color: var(--kurumi-70); line-height: 1.6; }
.faq .a p { margin: 0; }

/* 下層の頭 */
.crumb { font-size: 12.5px; padding-top: 18px; padding-bottom: 18px; color: var(--kurumi-70); letter-spacing: .05em; }
.crumb a { color: var(--kurumi); }
.crumb span { margin: 0 .6em; }
.phead { padding-bottom: clamp(48px, 6vw, 84px); }
.phead__ph { margin: 0; }
.phead__ph img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; box-shadow: 0 2px 2px rgba(59,42,30,.16); }
.phead__box { position: relative; margin-top: clamp(-90px, -6vw, -40px); margin-left: clamp(0px, 4vw, 60px); width: min(640px, 100%); background: var(--shiro); padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 44px) 0; }
.phead h1 { font-size: clamp(28px, 1.2rem + 1.7vw, 44px); margin-bottom: .5em; }
.phead p:last-child { margin-bottom: 0; }
.js .phead__box { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .phead.is-in .phead__box { opacity: 1; transform: none; }
@media (max-width: 700px) { .phead__ph img { aspect-ratio: 16 / 10; } .phead__box { margin: -28px 12px 0; padding-inline: 20px; width: auto; } }

/* 見本の部屋 */
.mihon .ph img { aspect-ratio: 4 / 3; }
.map { margin-top: 32px; background: #D9D4CC; aspect-ratio: 16 / 6; display: grid; place-items: center; color: #6F6A63; font-size: 15px; letter-spacing: .3em; }
@media (max-width: 600px) { .map { aspect-ratio: 4 / 3; } }

/* 焼き印の跡（工房のこと） */
.yakiin { position: relative; aspect-ratio: 3 / 2; background-color: #C99A5E; background-image: var(--grain-strong), linear-gradient(100deg, #D4A86C, #BF8E54 45%, #CFA165); background-size: 640px 185px, auto; box-shadow: 0 2px 2px rgba(59,42,30,.16); display: grid; place-items: center; overflow: hidden; }

.yakiin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(90,52,24,.42) 0 52%, rgba(90,52,24,.16) 62%, rgba(90,52,24,0) 72%); }
.yakiin svg { position: relative; z-index: 1; width: 34%; height: auto; color: #3A2414; opacity: .86; filter: blur(.6px); --cut: #B48450; }

/* ---------- 図 D-1 3つの木の色 ---------- */
.d1 { margin: clamp(30px, 4vw, 50px) 0 0; }
.d1__in { position: relative; display: grid; grid-template-columns: 2.4em repeat(3, 1fr); gap: 0 clamp(14px, 2.4vw, 34px); padding: 26px clamp(16px, 2.6vw, 34px) 44px; background: var(--white); border: 1px solid var(--kurumi-10); }
.d1__side { display: grid; grid-template-rows: auto 1fr 1fr; font-size: 12.5px; color: var(--kurumi-70); }
.d1__side span { writing-mode: vertical-rl; letter-spacing: .2em; align-self: center; justify-self: center; }
.d1__side span:first-child { visibility: hidden; writing-mode: horizontal-tb; }
.d1__col { display: grid; grid-template-rows: auto 1fr; }
.d1__name { margin-bottom: 12px; }
.d1__name .it { display: block; font-size: 14px; color: var(--kohaku); line-height: 1.3; }
.d1__name b { font-size: 19px; color: var(--kurumi); font-weight: 600; }
.d1__col .lbl { display: none; }
.d1 svg { width: 100%; height: auto; display: block; overflow: visible; }
.d1 .lower { transform-box: fill-box; transform-origin: top; }
.d1__note { position: absolute; right: clamp(16px, 2.6vw, 34px); bottom: 12px; margin: 0; font-size: 12px; color: var(--kurumi-70); }
.d1 + .small, .d1-after { margin-top: 12px; }
.js .d1 .d1__col { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .2s); }
.js .d1 .lower { transform: scaleY(0); transition: transform .8s var(--ease); transition-delay: calc(var(--i) * .2s + .55s); }
.js .d1.is-in .d1__col { opacity: 1; transform: none; }
.js .d1.is-in .lower { transform: none; }
@media (max-width: 700px) {
  .d1__in { grid-template-columns: 1fr; gap: 22px; padding-bottom: 54px; }
  .d1__side { display: none; }
  .d1__col { grid-template-columns: 5.2em 1fr; grid-template-rows: none; align-items: center; gap: 12px; }
  .d1__name { margin: 0; }
  .d1__col .lbl { display: grid; }
}
@media (max-width: 700px) {
  .d1__fig { position: relative; }
  .d1__fig .lbl { position: absolute; right: 8px; top: 0; bottom: 0; grid-template-rows: 1fr 1fr; font-size: 11px; color: var(--koge); align-items: center; text-shadow: 0 0 4px rgba(255,255,255,.7); }
}

/* ---------- 図 D-2 ご相談から納品まで ---------- */
.d2 { margin: clamp(28px, 4vw, 44px) 0 0; }
.d2__band { position: relative; height: 300px; }
.d2__scale { position: absolute; left: 0; right: 0; top: 136px; height: 28px; background-color: var(--kinari); background-image: var(--grain); background-size: 600px 170px; border: 1px solid var(--kurumi-20); }
.d2__tick { position: absolute; top: 108px; transform: translateX(-50%); font-family: var(--lora); font-size: 12.5px; color: var(--kurumi); white-space: nowrap; }
.d2__tick::after { content: ""; position: absolute; left: 50%; top: 22px; width: 1px; height: 8px; background: var(--kurumi); }
.d2__dim { position: absolute; top: 102px; height: 8px; left: 30%; right: 3%; border-top: 1px solid var(--kurumi); }
.d2__dim::before, .d2__dim::after { content: ""; position: absolute; top: -5px; width: 1px; height: 10px; background: var(--kurumi); }
.d2__dim::before { left: 0; } .d2__dim::after { right: 0; }
.d2__line { position: absolute; top: 148px; height: 3px; left: 42%; right: 10%; background: var(--kohaku); transform-origin: left; }
.d2__lineen { position: absolute; top: 168px; left: 56%; font-family: var(--lora); font-style: italic; font-size: 13.5px; color: var(--kohaku); white-space: nowrap; }
.d2__pt { position: absolute; left: var(--x); top: 0; width: 0; height: 100%; }
.d2__pt::before { content: ""; position: absolute; left: -6px; top: 144px; width: 12px; height: 12px; border-radius: 50%; background: var(--kurumi); box-shadow: 0 0 0 3px var(--shiro); }
.d2__pt.big::before { left: -9px; top: 141px; width: 18px; height: 18px; background: var(--kohaku); }
.d2__lab { position: absolute; width: 196px; left: -98px; font-size: 13px; line-height: 1.55; text-align: center; }
.d2__lab b { display: block; font-size: 15px; color: var(--kurumi); font-weight: 700; margin-bottom: 2px; }
.d2__pt.up .d2__lab { bottom: 196px; }
.d2__pt.dn .d2__lab { top: 194px; }
.d2__pt.up::after, .d2__pt.dn::after { content: ""; position: absolute; left: 0; width: 1px; background: var(--kurumi-20); }
.d2__pt.up::after { top: 100px; height: 40px; display: none; }
.d2__pt.dn::after { top: 160px; height: 30px; }
.d2__pt.first .d2__lab { left: -14px; text-align: left; }
.d2__pt.last .d2__lab { left: auto; right: -14px; text-align: right; }
.d2__note { margin-top: 6px; }
.js .d2 .d2__line { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.js .d2 .d2__pt { opacity: 0; transition: opacity .45s var(--ease); transition-delay: calc(1.1s + var(--i) * .12s); }
.js .d2.is-in .d2__line { transform: none; }
.js .d2.is-in .d2__pt { opacity: 1; }
.d2--s .d2__lab { font-size: 12.5px; }
@media (max-width: 860px) {
  .d2__band { height: auto; padding: 4px 0 4px 34px; }
  .d2__scale { left: 6px; right: auto; top: 0; bottom: 0; width: 14px; height: auto; }
  .d2__tick, .d2__dim, .d2__lineen { display: none; }
  .d2__line { left: 11.5px; right: auto; width: 3px; top: var(--ly1); height: var(--lh); transform-origin: top; }
  .js .d2 .d2__line { transform: scaleY(0); }
  .d2__pt { position: relative; left: auto; top: auto; height: auto; width: auto; padding: 10px 0 14px; }
  .d2__pt::before { left: -27px; top: 15px; }
  .d2__pt.big::before { left: -30px; top: 12px; }
  .d2__pt.up::after, .d2__pt.dn::after { display: none; }
  .d2__lab, .d2__pt.first .d2__lab, .d2__pt.last .d2__lab { position: static; width: auto; text-align: left; }
  .d2__lab .when { display: inline-block; font-family: var(--lora); font-size: 12px; color: var(--kohaku); margin-right: .6em; }
}
.d2__lab .when { display: none; }
@media (max-width: 860px) { .d2__lab .when { display: inline-block; } }

/* ---------- 図 D-3 測ってほしい所 ---------- */
.d3 { margin: clamp(28px, 4vw, 44px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); }
.d3--half { grid-template-columns: 1fr; max-width: 560px; margin-top: 0; }
.d3 figure { margin: 0; background: var(--white); border: 1px solid var(--kurumi-10); padding: 18px 18px 12px; }
.d3 figcaption { font-weight: 700; color: var(--kurumi); font-size: 16px; margin-bottom: 6px; display: flex; gap: .6em; align-items: baseline; }
.d3 figcaption .it { color: var(--kohaku); font-size: 13.5px; font-weight: 500; }
.d3 svg { width: 100%; height: auto; display: block; }
.d3 .ln { fill: none; stroke: var(--kurumi); stroke-width: 1.4; }
.d3 .ln2 { fill: none; stroke: var(--kurumi); stroke-width: 1.2; stroke-dasharray: 5 5; }
.d3 .fur { fill: var(--kinari); stroke: var(--kurumi); stroke-width: 1.2; }
.d3 .dm { fill: none; stroke: var(--kohaku); stroke-width: 1.8; }
.d3 .ar { fill: var(--kohaku); }
.d3 text { font-family: var(--serif); font-size: 17px; font-weight: 600; fill: var(--koge); }
.d3 .tsub { font-size: 14px; font-weight: 400; fill: var(--kurumi); }
.d3-notes { display: flex; justify-content: space-between; gap: 1em 2em; flex-wrap: wrap; margin-top: 12px; }
.d3-notes p { margin: 0; }
@media (max-width: 800px) { .d3 { grid-template-columns: 1fr; } .d3 text { font-size: 19px; } .d3 .tsub { font-size: 16px; } }

/* ---------- 図 D-4 表示の札 ---------- */
.d4 { position: relative; margin: 0; padding-right: 0; }
.d4__card { background: var(--shiro); border: 1px solid var(--kurumi); padding: 20px 22px 16px; box-shadow: 0 2px 2px rgba(59,42,30,.12); position: relative; }
.d4__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.d4__top svg { width: 30px; height: 30px; color: var(--koge); --cut: var(--shiro); }
.d4__top span { font-family: var(--lora); font-weight: 600; font-size: 13px; letter-spacing: .1em; color: var(--kurumi); }
.d4 table { width: 100%; font-size: 13.5px; line-height: 1.65; }
.d4 th, .d4 td { text-align: left; vertical-align: top; padding: 7px 0; border-top: 1px solid var(--kurumi-20); }
.d4 th { width: 8em; font-weight: 600; color: var(--kurumi); padding-right: 1em; }
.d4 .num { font-size: 14.5px; }
.d4__lead { position: absolute; right: -8px; top: -36px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--kurumi); }
.d4__lead::before { content: ""; width: 48px; height: 1px; background: var(--kurumi); transform: rotate(-24deg) translateY(10px); transform-origin: right; }
.d4-wrap { padding-top: 40px; }

/* テーブルの線画（寸法を変えるとき） */
.tdraw { max-width: 520px; }
.tdraw svg { width: 100%; height: auto; display: block; }
.tdraw .ln { fill: none; stroke: var(--kurumi); stroke-width: 1.4; }
.tdraw .dm { fill: none; stroke: var(--kurumi); stroke-width: 1; }
.tdraw .ar { fill: var(--kurumi); }
.tdraw text { font-family: var(--lora); font-size: 15px; font-weight: 500; fill: var(--kurumi); font-variant-numeric: tabular-nums lining-nums; }
.tdraw .ja { font-family: var(--serif); font-size: 13px; font-weight: 600; fill: var(--koge); }

/* 置く場所の線画 */
.ico-rows > div { display: grid; grid-template-columns: 64px 1fr; gap: 1.2em; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--kurumi-20); }
.ico-rows > div:first-child { border-top: 1px solid var(--kurumi-20); }
.ico-rows svg { width: 64px; height: 48px; }
.ico-rows .ln { fill: none; stroke: var(--kurumi); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ico-rows .am { fill: none; stroke: var(--kohaku); stroke-width: 1.4; stroke-linecap: round; }
.ico-rows h3 { font-size: 17px; margin-bottom: .2em; }
.ico-rows p { margin: 0; }

/* 段の流れ（ご相談から納品まで・7段） */
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: var(--kurumi-20); }
.steps li { display: grid; grid-template-columns: 24px 8.5em 1fr; gap: 0 1em; padding: 14px 0; position: relative; }
.steps li::before { content: ""; width: 24px; height: 24px; background: var(--shiro) var(--ring) no-repeat center / contain; grid-row: 1; margin-top: 2px; }
.steps b { color: var(--kurumi); font-weight: 700; }
.steps p { margin: 0; }
@media (max-width: 600px) { .steps li { grid-template-columns: 24px 1fr; } .steps li p { grid-column: 2; } }
.flow-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 960px) { .flow-grid { grid-template-columns: 1fr; } }

/* 区画の中の間合い */
.mt-s { margin-top: 18px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: clamp(36px, 5vw, 60px); }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.cols3 h3 { display: flex; align-items: center; gap: 10px; }
.cols3 h3::before { content: ""; width: 20px; height: 20px; flex: none; background: var(--ring) no-repeat center / contain; }
.cols3 > div { border-top: 2px solid var(--kurumi); padding-top: 18px; }
@media (max-width: 800px) { .cols3 { grid-template-columns: 1fr; } }
.box-line { border: 1px solid var(--kurumi); padding: clamp(24px, 3.6vw, 48px); background-color: var(--kinari); background-image: var(--grain); }
.cta-end { text-align: left; }
.cta-end .btns { margin-top: 20px; }

/* 現れ方（JS があるときだけ） */
.js .rv { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- フッター ---------- */
.foot { background-color: var(--kinari); background-image: var(--grain); padding: 0 0 28px; border-top: 1px solid var(--kurumi-10); }
.foot .kz { margin-top: -12px; }
.foot__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px 60px; padding-top: 56px; }
.foot__info { font-size: 14px; line-height: 1.9; margin-top: 18px; }
.foot__info a { text-decoration: none; font-family: var(--lora); font-weight: 600; }
.foot__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-content: start; font-size: 14px; }
.foot__nav a { text-decoration: none; color: var(--kurumi); font-weight: 600; }
.foot__nav a:hover { text-decoration: underline; text-decoration-color: var(--kohaku); }
.foot__copy { font-family: var(--lora); font-size: 12px; color: var(--kurumi-70); margin: 44px 0 0; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; } }

.demo-msg { display: block; margin-top: 8px; color: var(--kurumi); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .hero__box, .js .phead__box, .js .d1 .d1__col, .js .d2 .d2__pt { opacity: 1 !important; transform: none !important; }
  .js .d1 .lower, .js .d2 .d2__line { transform: none !important; }
}

/* お届けの費用の表 */
.price-t td.txt { text-align: right; font-size: 14.5px; }
@media (max-width: 760px) {
  .price-t--2 tr { grid-template-columns: 1fr; }
  .price-t--2 td.txt { text-align: left; }
}

/* 段の横に置くときは縦の流れ図にする */
.d2--v .d2__band { height: auto; padding: 4px 0 4px 34px; }
.d2--v .d2__scale { left: 6px; right: auto; top: 0; bottom: 0; width: 14px; height: auto; }
.d2--v .d2__tick, .d2--v .d2__dim, .d2--v .d2__lineen { display: none; }
.d2--v .d2__line { left: 11.5px; right: auto; width: 3px; top: var(--ly1); height: var(--lh); transform-origin: top; }
.js .d2--v .d2__line { transform: scaleY(0); }
.js .d2--v.is-in .d2__line { transform: none; }
.d2--v .d2__pt { position: relative; left: auto; top: auto; height: auto; width: auto; padding: 10px 0 14px; }
.d2--v .d2__pt::before { left: -27px; top: 15px; }
.d2--v .d2__pt.big::before { left: -30px; top: 12px; }
.d2--v .d2__pt.up::after, .d2--v .d2__pt.dn::after { display: none; }
.d2--v .d2__lab, .d2--v .d2__pt.first .d2__lab, .d2--v .d2__pt.last .d2__lab { position: static; width: auto; text-align: left; }
.d2--v .d2__lab .when { display: inline-block; font-family: var(--lora); font-size: 12px; color: var(--kohaku); margin-right: .6em; }
.d2--v .d2__lab b { display: inline; }
.d2--v .d2__lab b::after { content: ""; display: block; }
.flow-grid .d2 { margin-top: 0; position: sticky; top: 100px; background: var(--white); border: 1px solid var(--kurumi-10); padding: 22px 24px 18px; }
@media (prefers-reduced-motion: reduce) { .js .d2--v .d2__line { transform: none !important; } }