@charset "utf-8";
/* ============================================================================
   蕎麦 碾初(ひきぞめ・架空)— 第22号
   組版の決め(方針 9-3):
     ・見出しは明朝、本文はゴシック。字間と行間を明示する
     ・余白は広く。段の上下は clamp(56px, 9vw, 132px)
     ・主色は「藍」1色だけ。罫・釦・強調にしか使わない
     ・動きは1画面に1つ(トップは碾き時計だけ)。prefers-reduced-motion で止める
   端末に入っている書体しか指定しない(外部フォントは読まない)。
   ========================================================================== */

:root{
  --kinari:#efeee8;      /* 生成り(地) */
  --kami:#faf9f4;        /* 紙(箱の地) */
  --sumi:#191b19;        /* 墨(本文) */
  --usu:#585b55;         /* 薄墨(添え文) */
  --usu2:#8a8c84;        /* さらに薄い */
  --ai:#1f3d5c;          /* 藍 ─ 主色。ここだけ */
  --ai-usu:#eaeef3;      /* 藍のごく薄い地 */
  --tetsu:#172230;       /* 帯・footer */
  --keisen:#dcd9cf;      /* 罫 */
  --keisen2:#e8e5db;
  --mincho:"游明朝","YuMincho","Hiragino Mincho ProN","Yu Mincho",
           "MS PMincho",serif;
  --gothic:"游ゴシック","YuGothic","Yu Gothic","Hiragino Kaku Gothic ProN",
           "Meiryo",system-ui,sans-serif;
  --dan:clamp(56px,9vw,132px);
  --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--kinari);color:var(--sumi);
  font-family:var(--gothic);
  font-size:15px;line-height:2.0;letter-spacing:.055em;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:500;letter-spacing:.09em;line-height:1.62;margin:0}
p{margin:0}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - 40px,840px);margin-inline:auto}

/* ---------------------------------------------------------------- 頭 */
.atama{
  position:sticky;top:0;z-index:40;
  background:rgba(239,238,232,.94);
  border-bottom:1px solid var(--keisen);
  backdrop-filter:saturate(150%) blur(6px);
}
.atama-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;}
.yagou{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.yagou b{font-family:var(--mincho);font-size:20px;letter-spacing:.16em;font-weight:500}
.yagou span{font-size:10px;letter-spacing:.30em;color:var(--usu2)}
.michi{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.michi a{font-size:13px;text-decoration:none;letter-spacing:.10em;color:var(--usu);
  padding-bottom:3px;border-bottom:1px solid transparent}
.michi a:hover,.michi a[aria-current="page"]{color:var(--ai);border-bottom-color:var(--ai)}
.hiraku{display:none;min-width:66px;height:44px;border:1px solid var(--keisen);
  background:transparent;border-radius:2px;color:var(--usu);font-size:11px;
  letter-spacing:.06em;white-space:nowrap;padding:0 8px;
  font-family:var(--gothic);cursor:pointer}
@media(max-width:860px){
  .hiraku{display:block}
  .michi{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--kami);border-bottom:1px solid var(--keisen);padding:6px 20px 14px}
  .michi[hidden]{display:none}
  .michi a{display:block;padding:12px 0;border-bottom:1px solid var(--keisen2)}
}

/* ---------------------------------------------------------------- 段 */
.dan{padding-block:var(--dan)}
.dan--kami{background:var(--kami)}
.dan--tetsu{background:var(--tetsu);color:#e7e3da}
.dan--tetsu h2,.dan--tetsu h3{color:#f2eee5}
.dan--tetsu .soe{color:#a9b2bd}
.midashi{font-size:clamp(21px,3.2vw,30px);margin-bottom:10px}
.midashi-s{font-size:clamp(18px,2.4vw,23px);margin-bottom:8px}
.soe{font-size:12px;letter-spacing:.20em;color:var(--usu2);margin-bottom:22px;
  font-family:var(--gothic)}
.honbun{color:var(--usu);max-width:62ch}
.honbun+.honbun{margin-top:1.1em}
.hosoku{font-size:12.5px;color:var(--usu2);line-height:1.95}

/* ---------------------------------------------------------------- 表紙 */
.hyoushi{padding-block:clamp(34px,6vw,74px) clamp(46px,7vw,96px);background:var(--kami);
  border-bottom:1px solid var(--keisen)}
.hyoushi-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(26px,4vw,64px);align-items:center}
@media(max-width:900px){.hyoushi-in{grid-template-columns:1fr}}
.hyoushi h1{font-size:clamp(30px,6.4vw,58px);line-height:1.44;letter-spacing:.06em}
.hyoushi h1 small{display:block;font-size:clamp(12px,1.6vw,14px);letter-spacing:.28em;
  color:var(--ai);font-family:var(--gothic);margin-bottom:18px}
.hyoushi-honbun{margin-top:20px;color:var(--usu);max-width:46ch}
.hyoushi-e{border:1px solid var(--keisen);background:#fff}
.hyoushi-e img{width:100%}

/* 碾き時計 ------------------------------------------------------------- */
.tokei{margin-top:26px;border:1px solid var(--keisen);background:var(--kinari);
  padding:16px 18px 14px;border-radius:2px;max-width:430px}
.tokei-mi{font-size:11px;letter-spacing:.22em;color:var(--usu2);margin-bottom:6px}
.tokei-honbun{font-family:var(--mincho);font-size:clamp(16px,2.5vw,20px);line-height:1.7;
  letter-spacing:.06em}
.tokei-honbun b{color:var(--ai);font-weight:500;font-size:1.28em}
.tokei-shita{display:flex;align-items:flex-end;gap:14px;margin-top:10px}
.tokei canvas{display:block;width:132px;height:90px;background:#fff;
  border:1px solid var(--keisen2)}
.tokei-soe{font-size:12px;color:var(--usu2);line-height:1.8;flex:1}

/* ---------------------------------------------------------------- 部品 */
.kumi{display:grid;gap:clamp(20px,3vw,46px)}
.kumi--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kumi--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.kumi--2,.kumi--3{grid-template-columns:1fr}}
.hako{background:var(--kami);border:1px solid var(--keisen);padding:clamp(20px,3vw,32px)}
.dan--kami .hako{background:var(--kinari)}
.e{border:1px solid var(--keisen);background:#fff}
.e img{width:100%}
.e-soe{font-size:11.5px;color:var(--usu2);padding:8px 10px;letter-spacing:.08em}

.hyo{width:100%;border-collapse:collapse;font-size:14px}
.hyo th,.hyo td{border-bottom:1px solid var(--keisen);padding:13px 10px;text-align:left;
  vertical-align:top}
.hyo th{width:34%;font-weight:normal;color:var(--usu);font-family:var(--gothic)}
.hyo td b{font-weight:500}
.hyo--kai th{width:auto}
.hyo--kai thead th{color:var(--usu2);font-size:12px;letter-spacing:.14em;
  border-bottom:1px solid var(--sumi)}
.hyo--kai td:last-child,.hyo--kai th:last-child{text-align:right}

.shina{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  border-bottom:1px solid var(--keisen);padding:15px 0}
.shina-na{font-family:var(--mincho);font-size:17px;letter-spacing:.08em}
.shina-setsu{font-size:13px;color:var(--usu);margin-top:2px;max-width:52ch}
.shina-ne{font-family:var(--mincho);font-size:16px;white-space:nowrap;color:var(--ai)}

.kotae{border-top:1px solid var(--keisen)}
.kotae details{border-bottom:1px solid var(--keisen)}
.kotae summary{cursor:pointer;padding:16px 0;font-family:var(--mincho);font-size:16px;
  letter-spacing:.08em;list-style:none}
.kotae summary::-webkit-details-marker{display:none}
.kotae summary::before{content:"問 ";color:var(--ai);font-size:12px;letter-spacing:.2em}
.kotae p{padding:0 0 18px;color:var(--usu);font-size:14px}

.botan{display:inline-block;text-decoration:none;font-size:13.5px;letter-spacing:.14em;
  padding:14px 30px;border:1px solid var(--ai);color:var(--ai);background:transparent;
  font-family:var(--gothic);cursor:pointer;border-radius:2px;transition:.18s}
.botan:hover{background:var(--ai);color:#fff}
.botan--nuri{background:var(--ai);color:#fff}
.botan--nuri:hover{background:#16304a}
.botan[disabled]{opacity:.38;cursor:not-allowed}
.botan[disabled]:hover{background:transparent;color:var(--ai)}

.fuda{display:inline-block;font-size:11px;letter-spacing:.18em;color:var(--ai);
  border:1px solid var(--ai);padding:3px 10px;border-radius:2px}
.kazu{font-family:var(--mincho);font-size:clamp(26px,4.4vw,42px);color:var(--ai);
  line-height:1.2;letter-spacing:.02em}
.kazu small{font-size:13px;color:var(--usu2);letter-spacing:.12em;margin-left:6px;
  font-family:var(--gothic)}

/* 工程 */
.kotei{list-style:none;margin:0;padding:0;counter-reset:k}
.kotei li{counter-increment:k;border-bottom:1px solid var(--keisen);padding:20px 0 20px 58px;
  position:relative}
.kotei li::before{content:counter(k,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:var(--mincho);color:var(--ai);font-size:15px;letter-spacing:.1em}
.kotei h3{font-size:16.5px;margin-bottom:4px}
.kotei .jikan{font-size:12px;color:var(--usu2);letter-spacing:.12em;margin-bottom:6px}

/* ---------------------------------------------------------------- 予約 */
.yoyaku{background:var(--kami);border:1px solid var(--keisen);padding:clamp(20px,3.2vw,36px)}
.dan--kami .yoyaku{background:var(--kinari)}
.yoyaku-gyo{padding:20px 0;border-bottom:1px solid var(--keisen)}
.yoyaku-gyo:first-of-type{padding-top:0}
.yoyaku-mi{font-size:12px;letter-spacing:.20em;color:var(--usu2);margin-bottom:12px}
.eraberu{display:flex;flex-wrap:wrap;gap:10px}
.eraberu button{font-family:var(--gothic);font-size:13.5px;letter-spacing:.06em;
  background:transparent;border:1px solid var(--keisen);color:var(--sumi);
  padding:11px 16px;cursor:pointer;border-radius:2px;text-align:left;line-height:1.6;
  transition:.16s}
.eraberu button small{display:block;font-size:11px;color:var(--usu2);letter-spacing:.08em}
.eraberu button:hover:not([disabled]){border-color:var(--ai)}
.eraberu button[aria-pressed="true"]{border-color:var(--ai);background:var(--ai-usu);
  box-shadow:inset 0 0 0 1px var(--ai)}
.eraberu button[aria-pressed="true"] small{color:var(--ai)}
.eraberu button[disabled]{opacity:.42;cursor:not-allowed;text-decoration:line-through}
.ninzu{display:flex;align-items:center;gap:14px}
.ninzu button{width:46px;height:46px;font-size:19px;border:1px solid var(--keisen);
  background:transparent;cursor:pointer;border-radius:2px;color:var(--sumi);
  font-family:var(--mincho)}
.ninzu button:hover{border-color:var(--ai);color:var(--ai)}
.ninzu-kazu{font-family:var(--mincho);font-size:22px;min-width:4.2em;letter-spacing:.08em}
.shirase{margin-top:16px;background:var(--ai-usu);border-left:2px solid var(--ai);
  padding:14px 16px;font-size:13.5px;line-height:1.95;color:var(--sumi)}
.shirase b{color:var(--ai);font-weight:500}
.hikae{margin-top:18px;border:1px dashed var(--ai);padding:18px 20px;background:#fff;
  font-size:14px;line-height:2.0;white-space:pre-line}
.hikae[hidden]{display:none}
.hikae b{font-family:var(--mincho);font-size:16px;letter-spacing:.1em;color:var(--ai)}

/* 問い合わせ(送信しない) */
.kaki{display:grid;gap:16px;max-width:620px}
.kaki label{font-size:12.5px;letter-spacing:.12em;color:var(--usu);display:grid;gap:7px}
.kaki input,.kaki textarea,.kaki select{font-family:var(--gothic);font-size:15px;
  padding:12px 13px;border:1px solid var(--keisen);background:#fff;color:var(--sumi);
  border-radius:2px;letter-spacing:.05em}
.kaki textarea{min-height:120px;resize:vertical}

/* ---------------------------------------------------------------- 地図 */
.chizu{background:#fff;border:1px solid var(--keisen)}
.chizu svg{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- 足 */
.ashi{background:var(--tetsu);color:#cfd4da;padding-block:clamp(40px,6vw,72px) 34px;
  font-size:13px}
.ashi h4{font-size:14px;color:#f2eee5;margin-bottom:10px;letter-spacing:.14em}
.ashi-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
@media(max-width:820px){.ashi-in{grid-template-columns:1fr}}
.ashi ul{list-style:none;margin:0;padding:0}
.ashi li{margin-bottom:8px}
.ashi a{color:#cfd4da;text-decoration:none}
.ashi a:hover{color:#fff;text-decoration:underline}
.kakuu{margin-top:34px;padding-top:20px;border-top:1px solid #2b3949;
  font-size:11.5px;line-height:1.95;color:#98a2ae}
.kakuu b{color:#d8dee5;font-weight:500}

/* ---------------------------------------------------------------- 動き */
.deru{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.deru.dete{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deru{opacity:1;transform:none;transition:none}
}