/* お庭の着せかえ（2026-09-30 試作）。色はサイトの薄い橙・濃い橙に合わせる */
.niwa { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.niwa__stage { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 #eadfd4, 0 10px 30px rgba(120, 60, 20, .10); background: #cfe8f6; }
.niwa__scene { display: block; width: 100%; height: auto; }
.niwa__reset { position: absolute; right: 10px; top: 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink, #2b2320);
  font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.niwa__reset:disabled { opacity: .45; cursor: default; }
.niwa__say { margin: 0 0 10px; font-weight: 700; text-align: center; }
.niwa__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 10px; }
.niwa__tab { flex: 0 0 auto; border: 1px solid #efd7c4; background: #fff; color: var(--ink, #2b2320); border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; min-height: 40px; }  /* 9/30 金継ぎ: サイトのボタンの段16pxへ */
.niwa__tab.is-on { background: #fdebdd; border-color: #e35d0a; color: #9c4816; }  /* 9/30 金継ぎ: 比4.25→既存の焦げ茶で床4.5超え */
.niwa__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.niwa__opts--house { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.niwa__opt { display: grid; gap: 4px; justify-items: center; align-content: center; border: 1px solid #e6e3e0; background: #fff; border-radius: 12px;  /* 9/30 金継ぎ: 既存の罫線色・角丸12へ */
  padding: 8px 6px; min-height: 48px; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink, #2b2320); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.niwa__opt svg { width: 100%; max-width: 120px; height: 52px; }
.niwa__opts--house .niwa__opt svg { height: 72px; }
.niwa__opt:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(120, 60, 20, .12); }
.niwa__opt.is-on { border-color: #e35d0a; background: #fff7f1; box-shadow: inset 0 0 0 1px #e35d0a; }
.niwa__opt:focus-visible, .niwa__tab:focus-visible, .niwa__reset:focus-visible { outline: 2px solid #e35d0a; outline-offset: 2px; }
.niwa__ask { text-align: center; margin: 6px 0 0; }
.niwa__ask .btn { min-width: 260px; }
.niwa__note { margin: 0; font-size: 14px; color: var(--muted, #6b6b6b); text-align: center; }

/* ボフッ */
@keyframes niwaPop { 0% { transform: scale(.2, .1); opacity: 0; } 55% { transform: scale(1.08, .92); opacity: 1; } 75% { transform: scale(.96, 1.05); } 100% { transform: none; } }
@keyframes niwaUnpop { to { transform: scale(1.1, .05); opacity: 0; } }
@keyframes niwaDust { 0% { opacity: .9; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx, 0), -14px) scale(2.2); } }
@keyframes niwaBump { 0%, 100% { transform: none; } 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }
.niwa__pop { transform-box: fill-box; transform-origin: 50% 100%; animation: niwaPop .5s cubic-bezier(.2, .8, .3, 1.2) both; }
.niwa__unpop { transform-box: fill-box; transform-origin: 50% 100%; animation: niwaUnpop .25s ease-in forwards; }
.niwa__dust { fill: #efe6da; transform-box: fill-box; transform-origin: center; animation: niwaDust .7s ease-out both; }
.niwa__bump { animation: niwaBump .3s ease; }

/* 夜 */
.niwa__moon, .niwa__dusk { opacity: 0; transition: opacity .6s ease; }
.niwa__sun, .niwa__sky { transition: opacity .6s ease, fill .6s ease; }
.niwa.is-night .niwa__dusk { opacity: .5; }
.niwa.is-night .niwa__sky { fill: #34426e; }
/* 窓とあかりは夜だけ出す（昼は家の絵そのものの窓を見せる。ボフッの動きとずれないように） */
.niwa__glow { opacity: 0; transition: opacity .6s ease; }
.niwa.is-night .niwa__glow { opacity: 1; }
.niwa.is-night .niwa__moon { opacity: 1; }
.niwa.is-night .niwa__sun { opacity: 0; }
.niwa__win { fill: #a9c8dc; stroke: #e9eef1; stroke-width: 1.5; transition: fill .6s ease; }
.niwa.is-night .niwa__win { fill: #ffd98a; stroke: #ffe9b8; filter: drop-shadow(0 0 4px rgba(255, 200, 90, .9)); }
.niwa__lamp { fill: #d9d9d9; transition: fill .6s ease; }
.niwa.is-night .niwa__lamp { fill: #ffe7a6; filter: drop-shadow(0 0 6px rgba(255, 210, 110, 1)); }

@media (prefers-reduced-motion: reduce) {
  .niwa__pop, .niwa__unpop, .niwa__dust, .niwa__bump { animation: none; }
}

/* ---- 第2版（2026-09-30 先輩「もう少しリッチに・商材を増やして・置く場所も変えられる自由度」） ---- */
.niwa__scene { user-select: none; -webkit-user-select: none; }
/* 遊び始める（家を建てる）までは、絵の上を指でなぞってもページがスクロールする。建てたら部品のドラッグを優先 */
.niwa.is-playing .niwa__scene { touch-action: none; }
.niwa__it { cursor: grab; }
.niwa__it:active { cursor: grabbing; }
.niwa__it.is-sel > .niwa__body { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 2.5px #e35d0a); }
.niwa__win { fill: url(#n-glass); stroke: #ffffff; stroke-width: 2; }
.niwa__wing { fill: #ffd98a; stroke: #ffe9b8; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(255, 200, 90, .9)); }
.niwa.is-night .niwa__win { fill: #ffd98a; }
.niwa__spark { fill: #ffe27a; transform-box: fill-box; transform-origin: center; animation: niwaSpark .55s ease-out both; }
@keyframes niwaSpark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.1) rotate(30deg); } 100% { opacity: 0; transform: scale(.4) rotate(60deg); } }
.niwa__cloud { animation: niwaCloud 38s linear infinite alternate; }
.niwa__cloud--b { animation-duration: 52s; animation-direction: alternate-reverse; }
@keyframes niwaCloud { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.niwa.is-night .niwa__clouds { opacity: .25; }
.niwa__tool { position: absolute; z-index: 3; display: flex; gap: 4px; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.niwa__tool[hidden] { display: none; }
.niwa__tool button { border: 0; background: #fdebdd; color: #8a3f12; font: inherit; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.niwa__tool button[data-tool="del"] { background: #f3f3f3; color: #444; }
.niwa__tool button[hidden] { display: none; }
.niwa__hint { margin: -4px 0 0; text-align: center; font-size: 13.5px; font-weight: 700; color: #b4551c; }
.niwa__hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .niwa__cloud, .niwa__spark { animation: none; } }

/* 絵を見ながら選べるように（2026-09-30）。
   パソコン＝絵（左）と部品の欄（右）を並べ、絵は画面に固定。スマホ＝絵をヘッダーの下に固定し、部品の欄だけ流れる */
.niwa { max-width: 1120px; }
.niwa__stage { position: sticky; top: calc(var(--header-h, 64px) + 6px); z-index: 4; }
@media (min-width: 900px) {
  .niwa { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .niwa__stage { grid-column: 1; grid-row: 1 / span 6; }
  .niwa > :not(.niwa__stage) { grid-column: 2; }
  .niwa__opts { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .niwa__tabs { justify-content: flex-start; }
}
/* 夜の暗がり・月・あかり・土ぼこりは飾り。指の操作は下の部品へ通す */
.niwa__dusk, .niwa__moon, .niwa__glow, .niwa__fx, .niwa__clouds, .niwa__sun { pointer-events: none; }

/* ---- 見下ろし版（見本 2026-09-30） ---- */
.iso .iso__scene { touch-action: auto; }
.iso.is-playing .iso__scene { touch-action: none; }  /* 家を建てるまでは、絵の上でもページがスクロールする */
.iso__it { cursor: grab; }
.iso__it:active { cursor: grabbing; }
.iso__pop { transform-box: fill-box; transform-origin: 50% 100%; animation: niwaPop .5s cubic-bezier(.2, .8, .3, 1.2) both; }
.iso__fx, .iso__shadows, .iso__sel { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .iso__pop { animation: none; } }

/* ---- 見下ろし版 第2版（2026-09-30） ---- */
.iso { max-width: 1180px; }
.iso .iso__stage { position: sticky; top: calc(var(--header-h, 64px) + 6px); z-index: 4; }
@media (min-width: 900px) {
  .iso { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .iso .iso__stage { grid-column: 1; grid-row: 1; }
  .iso .iso__side { grid-column: 2; }
}
.iso__side { display: grid; gap: 10px; min-width: 0; }
.iso__tool { flex-wrap: wrap; align-items: center; max-width: calc(100% - 12px); }
.iso__cname { font-size: 12px; font-weight: 700; color: #6b5f58; padding: 0 6px 0 8px; }
.iso__check { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.iso__check li { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 5px 11px; background: #ffffff; color: #6b6b6b; box-shadow: inset 0 0 0 1px #e6e3e0; }  /* 9/30 金継ぎ: 比2.76→読める濃さ。色は既存の灰・罫線 */
.iso__check li.is-ok { background: #e6efe9; color: #1e4a3a; box-shadow: none; }  /* 既存の淡い緑と深緑 */
.iso__acts { display: flex; gap: 8px; }
.iso__acts button { flex: 1; border: 1px solid #efd7c4; background: #fff; color: #b4551c; font: inherit; font-weight: 700; font-size: 16px; border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.iso__acts .iso__auto { background: #fdebdd; color: #9c4816; }  /* 9/30 金継ぎ: 比4.25→既存の焦げ茶 */
.iso__finish { display: grid; gap: 8px; }
.iso__finish .btn { width: 100%; text-align: center; }
.iso__save { background: #fff; border: 2px solid #b4551c; color: #b4551c; font-weight: 700; border-radius: 999px; cursor: pointer; }
.iso__save:disabled { opacity: .45; cursor: default; }
.iso__preview img { width: 100%; border-radius: 12px; border: 1px solid #eee; }
.iso .niwa__opts { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }  /* 文字16pxで部品名が詰まらないように */
.iso__preview p { margin: 4px 0 0; font-size: 12.5px; color: #6b6b6b; }
.iso__done { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: #fff; border-radius: 999px; padding: 8px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.15); display: flex; gap: 10px; align-items: baseline; z-index: 3; animation: isoDone .5s cubic-bezier(.2,.8,.3,1.3) both; }
.iso__done[hidden] { display: none; }
.iso__done b { color: #e35d0a; font-size: 18px; }
.iso__done span { font-size: 13px; font-weight: 700; color: #5a4f49; }
@keyframes isoDone { from { transform: translate(-50%, -10px) scale(.8); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.iso__confetti { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: 5; animation: isoFall 1.8s ease-in both; }
@keyframes isoFall { to { transform: translateY(420px) rotate(var(--r, 180deg)); opacity: 0; } }
.iso .niwa__opt svg { height: 60px; }
@media (prefers-reduced-motion: reduce) { .iso__done, .iso__confetti { animation: none; } }

.iso__done { white-space: nowrap; }
@media (max-width: 600px) { .iso__done { top: 8px; padding: 6px 14px; } .iso__done b { font-size: 16px; } .iso__done span { font-size: 12px; } }
.iso__ask[hidden], .iso__preview[hidden] { display: none !important; }

/* ---- リフォーム対応（2026-10-01） ---- */
.iso__mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.iso__mode .niwa__opt { min-height: 64px; line-height: 1.4; }
.iso__mode .niwa__opt small { display: block; font-size: 14px; font-weight: 500; color: #6b6b6b; }
.iso__before { border: 2px solid #1e4a3a; background: #ffffff; color: #1e4a3a; font: inherit; font-weight: 700; font-size: 16px; border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.iso__before[hidden] { display: none; }
.iso.is-before .iso__before { background: #1e4a3a; color: #ffffff; }
.iso__beforebadge { display: none; position: absolute; left: 12px; top: 12px; z-index: 3; background: #2b2320; color: #ffffff; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 6px 14px; }
.iso.is-before .iso__beforebadge { display: block; }
.iso.is-before .iso__scene { cursor: default; }

/* ---- 見分 2026-10-02（金継ぎ）：リフォーム対応で足した値をサイトの既存の値にそろえる ---- */
.niwa__opt.is-on { background: #fdebdd; }
.iso__cname { color: #6b6b6b; }
.niwa__tool button[data-tool="del"] { background: #ffffff; color: #2b2320; box-shadow: inset 0 0 0 1px #e6e3e0; }
.niwa__tool button { font-size: 16px; }
.niwa__hint { font-size: 14px; }
.iso__beforebadge { background: #222222; font-size: 16px; }
/* 見比べのボタンは絵の左下に重ねる（問い7：スマホで隠れないように） */
.iso__stage .iso__before { position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 7px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }

/* ---- 保存した人をLINEへ（見分10/2の提案②） ---- */
.iso__line { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #e6efe9; }
.iso__line[hidden] { display: none; }
.iso__line p { margin: 0; font-size: 14px; font-weight: 700; color: #1e4a3a; }
.iso__line .btn { width: 100%; text-align: center; }

/* ---- お庭ができるまで（自動再生・2026-10-02） ---- */
.iso__demobadge { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: flex; gap: 10px; align-items: baseline; background: rgba(255, 255, 255, .94); border-radius: 999px; padding: 7px 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); pointer-events: none; }
.iso__demobadge[hidden] { display: none; }
.iso__demobadge b { font-size: 16px; color: #9c4816; }
.iso__demobadge span { font-size: 12px; font-weight: 700; color: #6b6b6b; }  /* その他の段（12/16/24）に合わせる */
@media (max-width: 600px) { .iso__demobadge span { display: none; } }

/* 最終点検 10/6：中身が描かれる前の部品欄の高さを先に取っておく（あとから伸びて下が押し下がる＝画面のずれ 0.12 を防ぐ） */
.iso__panel:empty { min-height: 410px; }
@media (max-width: 760px) { .iso__panel:empty { min-height: 530px; } }
.iso__check:empty { min-height: 35px; }