/* よこいと畳店（架空）の見本・第3版。墨の暗がりに、障子越しの日差しと畳。色は 墨・生成り・金茶 の3つ、書体は 明朝1つ＋数字1つ。 */
@font-face{font-family:"YM";src:url(fonts/ym-num.woff2?v=6) format("woff2");unicode-range:U+0030-0039,U+002C,U+002E,U+003A;font-weight:500;font-display:optional;size-adjust:116%}
@font-face{font-family:"YM";src:url(fonts/ym.woff2?v=6) format("woff2");font-weight:500;font-display:optional}
:root{
  --sumi:#0e0d0a; --sumi-2:#16140f; --kinari:#ece5d3; --kinari-2:rgba(236,229,211,.68); --kinari-3:rgba(236,229,211,.2); --kincha:#c4a46a;
  --mincho:"YM","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --pad:clamp(16px,4.2vw,64px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--mincho);font-weight:500;font-synthesis:none;color:var(--kinari);line-height:1.8;font-size:15px;background:var(--sumi);overflow-x:clip;
  word-break:keep-all;overflow-wrap:anywhere;letter-spacing:.04em;font-feature-settings:"palt" 0;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2{font-weight:500;margin:0;text-wrap:balance}
h1{font-size:clamp(1.75rem,3.3vw,2.9rem);line-height:1.62;letter-spacing:.1em}
h2{font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.6;letter-spacing:.09em}
p{margin:.5em 0 0}
button{font:inherit;color:inherit;letter-spacing:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.su{font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}

/* 頭（固定・地を持たない） */
.kashira{position:fixed;left:0;right:0;top:0;z-index:30;height:64px;display:flex;align-items:center;gap:12px;padding:0 var(--pad);color:var(--kinari)}
.yago{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-width:0}
.yago svg{width:26px;height:26px;flex:none;color:var(--kincha)}
.yago b{font-weight:500;font-size:1.02rem;letter-spacing:.2em;white-space:nowrap}
.yago small{display:block;font-size:.62rem;color:var(--kinari-2);letter-spacing:.16em;line-height:1.3;white-space:nowrap}
.michi{display:flex;gap:clamp(10px,2.4vw,34px)}
.michi a{text-decoration:none;font-size:.8rem;letter-spacing:.16em;white-space:nowrap;padding:.4em 0;color:var(--kinari-2);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.michi a:hover{color:var(--kinari)}
.michi a[aria-current]{color:var(--kinari);border-bottom-color:var(--kincha)}
@media (max-width:560px){.yago small{font-size:.56rem;letter-spacing:.08em}.yago b{font-size:.92rem;letter-spacing:.14em}.michi{gap:12px}.michi a{font-size:.74rem;letter-spacing:.08em}.yago svg{width:22px;height:22px}}

/* 断り書き（上と下） */
.mihon-bar{position:relative;z-index:3;background:rgba(14,13,10,.6);font-size:.7rem;line-height:1.6;letter-spacing:.06em;color:var(--kinari-2);padding:.4em var(--pad);margin:64px 0 0;text-align:center}
.mihon-bar b{font-weight:500;color:var(--kinari)}

/* 3D の舞台と、止めた絵・字を読ませる陰 */
#butai{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.4s ease;display:block;touch-action:pan-y}
.gl-on #butai{opacity:1}
.e{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity 1.4s ease}
.e img{width:100%;height:100%;object-fit:cover;display:block}
.gl-on .e{opacity:0}
.kage{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,10,.86) 0,rgba(14,13,10,.5) 70px,rgba(14,13,10,0) 150px),linear-gradient(90deg,rgba(14,13,10,.78) 0,rgba(14,13,10,.5) 30%,rgba(14,13,10,0) 56%),
  linear-gradient(0deg,rgba(14,13,10,.6) 0,rgba(14,13,10,0) 140px)}
@media (max-width:759px){.kage{background:linear-gradient(180deg,rgba(14,13,10,.92) 0,rgba(14,13,10,.72) 36%,rgba(14,13,10,0) 58%),linear-gradient(0deg,rgba(14,13,10,.7) 0,rgba(14,13,10,0) 110px)}}

/* 節（読み進める量で場面が進む）。字は枠に入れず、陰の上にじかに置く */
main{position:relative;z-index:2;pointer-events:none}
.ba{min-height:var(--h,100svh);padding:0 var(--pad)}
.kotoba{position:sticky;top:clamp(110px,24vh,230px);pointer-events:auto;max-width:27em;padding-top:2px}
.kotoba.hero{top:clamp(130px,30vh,300px);max-width:min(36em,52vw)}
.fv .btn{margin-top:2.2em}
.fv{pointer-events:none}.fv .btn{pointer-events:auto}
.kotoba h2{position:relative;padding-top:20px}
.kotoba h2::before{content:"";position:absolute;left:0;top:0;width:28px;height:1px;background:var(--kincha)}
.kotoba > p{color:var(--kinari-2)}
.fuda{font-size:.74rem;letter-spacing:.3em;color:var(--kincha)!important;margin:0 0 1.4em}
.sub{font-size:.86rem;letter-spacing:.32em;margin-top:1.6em!important}
.mi{font-size:.76rem;letter-spacing:.06em;color:rgba(236,229,211,.52)!important}
.toki{font-size:clamp(3rem,7vw,5.4rem);line-height:1.1;margin:.25em 0 .1em!important;color:var(--kinari)!important;letter-spacing:.02em}
.toki small{font-size:.32em;margin-left:.3em;letter-spacing:.2em;color:var(--kinari-2)}
.nedan{margin-top:1.2em!important;font-size:.92rem;color:var(--kinari)!important;letter-spacing:.1em}
.nedan .su{font-size:1.9em;margin:0 .08em}
@media (max-width:759px){
  body{font-size:14px}
  .mihon-bar{font-size:12px;letter-spacing:.02em}
  .mi{font-size:12px}
  .kotoba,.kotoba.hero{top:96px;max-width:none}
  .kotoba{max-width:none}
  .kotoba h2{padding-top:16px}
  .toki{font-size:3.2rem}
}

/* 並び（事例・0円）・声・流れ */
.narabi,.koe,.nagare{list-style:none;margin:1.3em 0 0;padding:0}
.narabi li{display:grid;grid-template-columns:1fr auto;gap:0 1.2em;align-items:baseline;padding:.75em 0;border-top:1px solid var(--kinari-3);font-size:.86rem}
.narabi li:last-child{border-bottom:1px solid var(--kinari-3)}
.narabi li span:nth-child(2){grid-column:1;color:var(--kinari-2);font-size:.78rem}
.narabi li b{grid-column:2;grid-row:1/span 2;font-weight:500;font-size:1.5rem;align-self:center}
.narabi.zero li{grid-template-columns:1fr auto}
.narabi.zero li b::after{content:"円";font-size:.5em;margin-left:.2em;font-family:var(--mincho)}
.koe li{padding:.8em 0;border-top:1px solid var(--kinari-3)}
.koe li:last-child{border-bottom:1px solid var(--kinari-3)}
.koe q{display:block;font-size:.98rem;letter-spacing:.08em;quotes:"「" "」"}
.koe span{display:block;font-size:.72rem;color:var(--kinari-2);margin-top:.2em}
.nagare{counter-reset:n}
.nagare li{counter-increment:n;display:grid;grid-template-columns:2em 1fr;gap:0 .6em;padding:.5em 0;border-top:1px solid var(--kinari-3);font-size:.86rem}
.nagare li:last-child{border-bottom:1px solid var(--kinari-3)}
.nagare li::before{content:counter(n);grid-row:1/span 2;font-size:1.2rem;color:var(--kincha);font-variant-numeric:lining-nums}
.nagare b{font-weight:500}
.nagare li > span{color:var(--kinari-2);font-size:.76rem}
@media (max-width:759px){.nagare li{padding:.35em 0}.koe li{padding:.55em 0}.narabi li{padding:.55em 0}}

/* 押すもの */
.erabu{display:flex;flex-wrap:wrap;margin-top:1.1em}
.erabu button{border:1px solid rgba(236,229,211,.34);background:rgba(14,13,10,.35);padding:0 1.05em;cursor:pointer;min-height:42px;font-size:.84rem;letter-spacing:.12em;margin:0 -1px -1px 0;transition:background .35s,color .35s}
.erabu button:hover{background:rgba(236,229,211,.08)}
.erabu button[aria-pressed=true]{background:var(--kinari);color:var(--sumi);border-color:var(--kinari);position:relative;z-index:1}
.erabu + .erabu{margin-top:10px}
.goukei{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:.9em!important;color:var(--kinari)!important}
.goukei b{font-weight:500;font-size:clamp(2.3rem,4.6vw,3.3rem);line-height:1.1;min-width:6.4ch}
.goukei span{font-size:.8rem;color:var(--kinari-2);letter-spacing:.12em}
.chiisai{border:0;background:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.72rem;padding:.4em 0;min-height:40px;color:var(--kinari-2)}
.iro{gap:10px}
.iro button{width:44px;height:44px;padding:0;margin:0;border:1px solid rgba(236,229,211,.3);background:var(--c)!important;border-radius:50%}
.iro button[aria-pressed=true]{outline:1px solid var(--kinari);outline-offset:4px}
.tsumami{-webkit-appearance:none;appearance:none;width:100%;max-width:340px;height:36px;margin:1em 0 0;background:transparent;cursor:pointer}
.tsumami::-webkit-slider-runnable-track{height:1px;background:var(--kinari-2)}
.tsumami::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--kinari);margin-top:-9px;border:0}
.tsumami::-moz-range-track{height:1px;background:var(--kinari-2)}
.tsumami::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--kinari);border:0}
.hyo{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:.4em}
.hyo td{padding:.4em 0;border-bottom:1px solid var(--kinari-3)}
.hyo td:last-child{text-align:right;white-space:nowrap}
details{margin-top:.9em;border-top:1px solid var(--kinari-3)}
details:last-of-type{border-bottom:1px solid var(--kinari-3)}
summary{cursor:pointer;font-size:.88rem;min-height:44px;display:flex;align-items:center;letter-spacing:.08em;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:8px;height:8px;border-right:1px solid var(--kincha);border-bottom:1px solid var(--kincha);transform:rotate(45deg);margin:0 4px 4px auto;transition:transform .3s}
details[open] summary::after{transform:rotate(225deg);margin-bottom:-2px}
details p{font-size:.84rem;color:var(--kinari-2);margin:0 0 .8em}
.kotoba details + details{margin-top:0;border-top:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.5em 1.8em;border:1px solid var(--kinari);text-decoration:none;cursor:pointer;background:var(--kinari);color:var(--sumi);margin-top:1.4em;font-size:.9rem;letter-spacing:.14em;transition:background .35s,color .35s}
.btn:hover{background:transparent;color:var(--kinari)}

/* 下の入口（いつも見える） */
.iri{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1.25fr;background:rgba(14,13,10,.94);border-top:1px solid var(--kinari-3);
  padding:0 0 env(safe-area-inset-bottom)}
.iri a,.iri button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border:0;background:none;text-decoration:none;
  font-size:.8rem;letter-spacing:.1em;line-height:1.35;color:var(--kinari);cursor:pointer;padding:4px}
.iri a + a{border-left:1px solid var(--kinari-3)}
.iri small{font-size:.62rem;color:var(--kinari-2);letter-spacing:.06em}
.iri .shu{background:var(--kinari);color:var(--sumi)}
.iri .shu small{color:rgba(14,13,10,.66)}
@media (min-width:900px){
  .iri{left:auto;right:var(--pad);bottom:28px;width:auto;display:flex;align-items:stretch;gap:0;border:1px solid var(--kinari-3);background:rgba(14,13,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .iri a,.iri button{flex-direction:row;gap:.7em;padding:0 1.4em;min-height:50px}
  .iri .shu{padding:0 1.8em}
}

/* 足元 */
.ashimoto{position:relative;z-index:2;background:var(--sumi);padding:56px var(--pad) 120px;font-size:.78rem;color:var(--kinari-2);border-top:1px solid var(--kinari-3)}
.ashimoto .in{max-width:1180px;margin:0}
.ashimoto b{font-weight:500;color:var(--kinari);letter-spacing:.2em}
.ashimoto nav{display:flex;gap:22px;margin:1.2em 0}
.ashimoto nav a{text-decoration:none;letter-spacing:.14em}
.ashimoto .mihon-bar{margin:1.2em 0 0;text-align:left;padding:.8em 1em;border:1px solid var(--kinari-3)}

/* 見積もりの窓（生成りの紙） */
dialog.mado{border:0;padding:0;max-width:min(520px,calc(100vw - 24px));width:100%;background:var(--kinari);color:var(--sumi)}
dialog.mado::backdrop{background:rgba(8,7,5,.72)}
.mado form{padding:30px clamp(18px,5vw,36px) 28px;max-height:calc(100dvh - 60px);overflow-y:auto;position:relative}
.mado h2{font-size:1.2rem;letter-spacing:.12em}
.mado .mi{color:rgba(14,13,10,.6)!important}
.mado label{display:block;font-size:.82rem;margin:1.2em 0 .2em;letter-spacing:.08em}
.mado label small{color:rgba(14,13,10,.6)}
.mado input{width:100%;font:inherit;padding:.5em .1em;border:0;border-bottom:1px solid rgba(14,13,10,.4);background:transparent;min-height:44px;color:var(--sumi)}
.mado input:focus{outline:none;border-bottom-color:var(--sumi)}
.mado .btn{background:var(--sumi);color:var(--kinari);border-color:var(--sumi);width:100%}
.mado .btn:hover{background:#2a2720;color:var(--kinari)}
.mado .tojiru{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:transparent;font-size:1.5rem;cursor:pointer;color:var(--sumi)}
.mado .kotae{background:rgba(14,13,10,.06);border-left:2px solid var(--kincha);padding:.7em 1em;margin-top:1em;font-size:.84rem}
.shirase{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--kinari);color:var(--sumi);padding:.75em 1.3em;
  z-index:40;font-size:.84rem;letter-spacing:.06em;max-width:calc(100vw - 32px);opacity:0;pointer-events:none;transition:opacity .4s}
.shirase.mieru{opacity:1}
:focus-visible{outline:1px solid var(--kincha);outline-offset:3px}