@charset "utf-8";
/* ============================================================================
   柊野検眼所(ひいらぎの けんがんじょ・架空)— 第23号
   組版の決め(方針 9-3):
     ・見出しは明朝、本文はゴシック。字間と行間を明示する
     ・余白は広く。段の上下は clamp(58px, 9vw, 136px)
     ・主色は「飴色(鼈甲)」1色だけ。罫・釦・強調にしか使わない
     ・動きは1画面に1つ。表紙は「にじみが像になる」だけ、
       九十分の頁は「0.25ずつの物差し」だけ、予約の頁は控えが出るところだけ
     ・prefers-reduced-motion で全部止める(にじみは最初から像で出す)
   端末に入っている書体しか指定しない(外部フォントは読まない)。
   ========================================================================== */

:root{
  --ji:#efece4;          /* 地(生成り) */
  --kami:#faf8f3;        /* 紙 */
  --sumi:#1c1a16;        /* 墨(本文) */
  --usu:#57534a;         /* 薄墨 */
  --usu2:#8b867a;        /* さらに薄い */
  --ame:#8f5418;         /* 飴色 ─ 主色。ここだけ */
  --ame-usu:#f2e8db;     /* 飴色のごく薄い地 */
  --kuro:#171512;        /* 帯・footer */
  --kei:#ddd7c9;         /* 罫 */
  --kei2:#e9e4d8;
  --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(58px,9vw,136px);
  --wrap:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ji);color:var(--sumi);
  font-family:var(--gothic);
  font-size:15px;line-height:2.02;letter-spacing:.05em;
  -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:.085em;
  line-height:1.6;margin:0}
p{margin:0}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - 40px,800px);margin-inline:auto}
.num{font-family:var(--mincho);font-feature-settings:"tnum"}

/* ---------------------------------------------------------------- 頭 */
.atama{position:sticky;top:0;z-index:40;background:rgba(239,236,228,.95);
  border-bottom:1px solid var(--kei)}
.atama-in{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 0}
.yagou{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.yagou b{font-family:var(--mincho);font-size:19px;letter-spacing:.15em;font-weight:500}
.yagou span{font-size:9px;letter-spacing:.28em;color:var(--usu2)}
.michi{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.michi a{font-size:13px;text-decoration:none;letter-spacing:.09em;color:var(--usu);
  padding-bottom:3px;border-bottom:1px solid transparent}
.michi a:hover{color:var(--ame);border-bottom-color:var(--ame)}
.michi a[aria-current="page"]{color:var(--sumi);border-bottom-color:var(--ame)}

/* ---------------------------------------------------------------- 表紙 */
.hyoushi{padding:clamp(40px,7vw,86px) 0 0}
.hyoushi h1{font-size:clamp(30px,7.4vw,60px);line-height:1.38;letter-spacing:.06em}
.hyoushi h1 small{display:block;font-family:var(--gothic);font-size:11px;
  letter-spacing:.30em;color:var(--ame);margin-bottom:20px;line-height:2}
.hyoushi-honbun{margin-top:26px;max-width:33em;color:var(--usu);font-size:15px}
.hyoushi-e{margin-top:clamp(30px,5vw,58px);position:relative}
.hyoushi-e img{width:100%;border:1px solid var(--kei)}
.hyoushi-e figcaption{font-size:11.5px;color:var(--usu2);letter-spacing:.12em;
  margin-top:10px}

/* にじみ → 像(この画面で動くのはこれ一つ) */
.nijimi{filter:blur(9px);opacity:.55;transition:filter 1.5s ease,opacity 1.5s ease}
.nijimi.mieta{filter:blur(0);opacity:1}

/* ---------------------------------------------------------------- 段 */
.dan{padding:var(--dan) 0}
.dan-kami{background:var(--kami);border-block:1px solid var(--kei2)}
.midashi{font-size:clamp(21px,3.5vw,33px);line-height:1.55}
.soe{font-size:11px;letter-spacing:.28em;color:var(--ame);margin-bottom:16px}
.honbun{margin-top:22px;color:var(--usu);max-width:34em}
.honbun + .honbun{margin-top:1.1em}

/* 数字の帯 */
.kazu{display:grid;gap:1px;background:var(--kei);border:1px solid var(--kei);
  grid-template-columns:repeat(2,1fr);margin-top:clamp(28px,4vw,44px)}
.kazu div{background:var(--ji);padding:22px 18px}
.kazu b{display:block;font-family:var(--mincho);font-size:clamp(26px,4.6vw,38px);
  letter-spacing:.04em;line-height:1.2;font-weight:500}
.kazu b i{font-style:normal;font-size:14px;letter-spacing:.1em;margin-left:4px;color:var(--usu)}
.kazu p{font-size:12px;color:var(--usu2);letter-spacing:.1em;margin-top:8px;line-height:1.8}

/* 二段組 */
.futatsu{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
.futatsu img{border:1px solid var(--kei)}

/* 工程(九十分) */
.kotei{list-style:none;margin:clamp(28px,4vw,46px) 0 0;padding:0;
  border-top:1px solid var(--kei)}
.kotei li{display:grid;grid-template-columns:58px 1fr;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--kei)}
.kotei .fun{font-family:var(--mincho);font-size:18px;color:var(--ame);
  letter-spacing:.02em;padding-top:2px}
.kotei h3{font-size:17px;margin-bottom:6px}
.kotei p{font-size:13.5px;color:var(--usu);line-height:1.95}

/* 0.25の物差し(九十分の頁で動くのはこれ一つ) */
.monosashi{margin-top:clamp(30px,4vw,52px);background:var(--kami);
  border:1px solid var(--kei);padding:clamp(20px,3.4vw,34px)}
.monosashi-mi{font-size:11px;letter-spacing:.26em;color:var(--ame)}
.mihon{font-family:var(--mincho);font-size:clamp(17px,3.4vw,25px);line-height:1.85;
  margin:18px 0 22px;letter-spacing:.06em;transition:filter .22s ease}
.monosashi input[type=range]{width:100%;accent-color:var(--ame);cursor:pointer}
.monosashi-shita{display:flex;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--usu2);letter-spacing:.08em;margin-top:8px}
.dosuu{font-family:var(--mincho);font-size:20px;color:var(--sumi);letter-spacing:.04em}

/* 断り */
.kotowari{list-style:none;margin:clamp(28px,4vw,46px) 0 0;padding:0;display:grid;gap:1px;
  background:var(--kei);border:1px solid var(--kei)}
.kotowari li{background:var(--ji);padding:24px clamp(18px,3vw,30px)}
.kotowari h3{font-size:18px;margin-bottom:8px}
.kotowari h3 span{font-family:var(--gothic);font-size:11px;letter-spacing:.2em;
  color:var(--ame);display:block;margin-bottom:8px}
.kotowari p{font-size:13.5px;color:var(--usu);line-height:1.95}

/* 表 */
.hyou{width:100%;border-collapse:collapse;margin-top:clamp(24px,3.4vw,40px);
  font-size:13.5px}
.hyou th,.hyou td{border-bottom:1px solid var(--kei);padding:14px 8px;text-align:left;
  vertical-align:top}
.hyou th{font-weight:500;color:var(--usu);width:44%;letter-spacing:.08em}
.hyou td{font-family:var(--mincho);font-size:15px}
.hyou td small{font-family:var(--gothic);font-size:12px;color:var(--usu2);
  display:block;letter-spacing:.06em}

/* 引用のような一文 */
.hitokoto{font-family:var(--mincho);font-size:clamp(19px,3.6vw,30px);line-height:1.85;
  letter-spacing:.07em;border-left:2px solid var(--ame);padding-left:clamp(16px,3vw,28px);
  margin-top:clamp(26px,4vw,44px);max-width:26em}

/* 釦 */
.botan{display:inline-flex;align-items:center;gap:10px;background:var(--ame);color:#fff;
  text-decoration:none;font-size:13.5px;letter-spacing:.14em;padding:15px 30px;
  border:0;cursor:pointer;font-family:var(--gothic);transition:background .18s ease}
.botan:hover{background:#743f10}
.botan-usu{background:transparent;color:var(--ame);border:1px solid var(--ame)}
.botan-usu:hover{background:var(--ame-usu)}

/* ---------------------------------------------------------------- 予約 */
.yoyaku{display:grid;gap:clamp(26px,3.6vw,44px);margin-top:clamp(26px,4vw,44px)}
.kumi{border:1px solid var(--kei);background:var(--kami);padding:clamp(20px,3.2vw,32px)}
.kumi-mi{font-size:11px;letter-spacing:.26em;color:var(--ame);margin-bottom:16px}
.eranbu{display:flex;flex-wrap:wrap;gap:8px}
.eranbu button{font-family:var(--gothic);font-size:13px;letter-spacing:.06em;
  background:var(--ji);border:1px solid var(--kei);color:var(--usu);
  padding:11px 15px;cursor:pointer;line-height:1.5;transition:all .16s ease}
.eranbu button:hover{border-color:var(--ame);color:var(--ame)}
.eranbu button[aria-pressed="true"]{background:var(--ame);border-color:var(--ame);color:#fff}
.eranbu button small{display:block;font-size:10.5px;letter-spacing:.1em;opacity:.8}
.eranbu button:disabled{opacity:.35;cursor:not-allowed}
.hikae{border:1px solid var(--ame);background:var(--ame-usu);
  padding:clamp(20px,3.2vw,32px);font-size:14px;line-height:2.05}
.hikae h3{font-size:19px;margin-bottom:12px}
.hikae dl{display:grid;grid-template-columns:6.5em 1fr;gap:6px 14px;margin:14px 0 0;
  font-size:13.5px}
.hikae dt{color:var(--usu);letter-spacing:.08em}
.hikae dd{margin:0;font-family:var(--mincho);font-size:15px}
.hikae .chui{font-size:12px;color:var(--usu);margin-top:16px;line-height:1.9;
  border-top:1px solid rgba(143,84,24,.25);padding-top:14px}

/* ---------------------------------------------------------------- 足 */
.ashi{background:var(--kuro);color:#cfc9bd;padding:clamp(44px,6vw,76px) 0 34px;
  font-size:13px;line-height:2.05;margin-top:var(--dan)}
.ashi-in{display:grid;gap:28px}
.ashi b{font-family:var(--mincho);font-size:18px;letter-spacing:.14em;color:#f2ede3;
  font-weight:500}
.ashi a{color:#cfc9bd;text-decoration:none}
.ashi a:hover{color:#fff}
.ashi ul{list-style:none;margin:0;padding:0}
.kokuchi{margin-top:30px;padding-top:20px;border-top:1px solid #33302a;
  font-size:11.5px;color:#8e887c;line-height:2}

/* ---------------------------------------------------------------- 現れ */
.deru{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.deru.mieta{opacity:1;transform:none}

/* ---------------------------------------------------------------- 広い画面 */
@media (min-width:760px){
  body{font-size:15.5px}
  .kazu{grid-template-columns:repeat(4,1fr)}
  .futatsu{grid-template-columns:1fr 1fr}
  .futatsu.hidari{grid-template-columns:1.05fr .95fr}
  .kotei li{grid-template-columns:82px 1fr;gap:26px}
  .kotowari{grid-template-columns:1fr 1fr}
  .ashi-in{grid-template-columns:1.4fr 1fr 1fr}
  .yoyaku{grid-template-columns:1.15fr .85fr}
}
@media (max-width:759px){
  .atama-in{flex-wrap:wrap;gap:8px}
  .michi{flex-wrap:wrap;gap:14px 18px;padding-bottom:4px}
  .michi a{font-size:12px}
  .yagou b{font-size:17px}
}

/* ---------------------------------------------------------------- 動きを止める */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deru{opacity:1;transform:none;transition:none}
  .nijimi{filter:none;opacity:1;transition:none}
  .mihon{transition:none}
}