@charset "utf-8";
/* ============================================================================
   鎬野鍛冶(架空)— 第21号
   組版の決め(方針 9-3):
     ・見出しは明朝、本文はゴシック。字間と行間を明示する
     ・余白は広く。段の上下は clamp(56px, 9vw, 132px)
     ・主色は「火色(ひいろ)」1色だけ。罫・釦・強調にしか使わない
     ・動きは1画面に1つ。視界に入ったときだけ現れる
   端末に入っている書体しか指定しない(外部フォントは読まない)。
   ========================================================================== */

:root{
  --kinari:#f6f3ee;      /* 生成り(地) */
  --kami:#fbf9f6;        /* 紙(箱の地) */
  --sumi:#1b1917;        /* 墨(本文) */
  --usu:#5d564f;         /* 薄墨(添え文) */
  --usu2:#8c837a;        /* さらに薄い */
  --hi:#97381a;          /* 火色 ─ 主色。ここだけ */
  --tetsu:#22201e;       /* 鉄(帯・footer) */
  --keisen:#ded6ca;      /* 罫 */
  --keisen2:#eae4da;
  --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,860px);margin-inline:auto}

/* ---------------------------------------------------------------- 帯・見出し */
.dan{padding-block:var(--dan)}
.dan--kami{background:var(--kami)}
.dan--tetsu{background:var(--tetsu);color:#e9e3d9}
.dan--tetsu h2,.dan--tetsu h3{color:#f3ede3}
.dan--tetsu .no{color:#c99a7d}
.dan--tetsu p{color:#c8c0b5}

.no{
  display:block;font-family:var(--mincho);font-size:.72rem;letter-spacing:.34em;
  color:var(--hi);margin-bottom:1.1em;
}
.midashi{max-width:44em;margin-bottom:clamp(30px,4.4vw,58px)}
.midashi h2{font-size:clamp(1.42rem,3.5vw,2.15rem)}
.midashi p{margin-top:1.1em;color:var(--usu);font-size:.92rem;line-height:2.15}
.lead{font-size:1.02rem;line-height:2.2}

/* ---------------------------------------------------------------- 頭 */
header.top{
  position:sticky;top:0;z-index:40;background:rgba(246,243,238,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--keisen);
}
.top .in{
  width:min(100% - 32px,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:18px;min-height:62px;
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.logo svg{width:30px;height:30px;flex:0 0 auto}
.logo b{font-family:var(--mincho);font-size:1.02rem;letter-spacing:.2em;font-weight:500}
.logo small{display:block;font-size:.54rem;letter-spacing:.28em;color:var(--usu2);margin-top:2px}
nav.mise{margin-left:auto;display:flex;gap:clamp(12px,1.9vw,26px);align-items:center}
nav.mise a{
  text-decoration:none;font-size:.79rem;letter-spacing:.13em;color:var(--usu);
  padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
nav.mise a:hover,nav.mise a[aria-current="page"]{color:var(--hi);border-bottom-color:var(--hi)}
nav.mise a.btn{
  border:1px solid var(--hi);color:var(--hi);border-radius:2px;padding:7px 15px;
}
nav.mise a.btn:hover{background:var(--hi);color:#fff;border-color:var(--hi)}
.hamb{display:none}

/* ---------------------------------------------------------------- 連番スクロール */
.seq-stage{position:relative}
.seq-sticky{position:sticky;top:62px;height:calc(100vh - 62px);display:flex;align-items:center}
.seq-layout{
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3.6vw,54px);align-items:center;
}
.seq{
  position:relative;margin:0;aspect-ratio:1/1;width:100%;
  background:linear-gradient(180deg,#e6e1d9,#d5cec4);overflow:hidden;border-radius:2px;
}
.seq canvas,.seq .seq-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.seq canvas{opacity:0;transition:opacity .5s ease}
.seq.is-ready canvas{opacity:1}
.seq-corner{
  position:absolute;left:14px;bottom:12px;font-family:var(--mincho);
  font-size:.62rem;letter-spacing:.22em;color:#4a443d;
}
.seq-angle{
  position:absolute;right:14px;bottom:12px;font-size:.62rem;letter-spacing:.16em;
  color:#4a443d;font-variant-numeric:tabular-nums;
}
.seq-load{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:10px;text-align:center;background:rgba(232,227,219,.86);
  transition:opacity .45s ease,visibility .45s;pointer-events:none;
}
.seq.is-ready .seq-load{opacity:0;visibility:hidden}
.seq-load b{display:block;font-family:var(--mincho);font-size:.7rem;letter-spacing:.3em;color:var(--hi);font-weight:500}
.seq-load .bar{width:min(46vw,190px);height:2px;background:#cdc5b9;overflow:hidden;margin-inline:auto}
.seq-load .bar i{display:block;height:100%;width:0;background:var(--hi);transition:width .25s linear}
.seq-load small{font-size:.6rem;letter-spacing:.2em;color:var(--usu2);font-variant-numeric:tabular-nums}
.seq-motion{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.seq-motion span{font-size:.64rem;letter-spacing:.06em;color:var(--usu);line-height:1.7;flex:1 1 180px}
.seq-motion button{
  font:inherit;font-size:.68rem;letter-spacing:.14em;padding:7px 14px;border-radius:2px;
  border:1px solid var(--hi);background:transparent;color:var(--hi);cursor:pointer;
}
.seq-motion button:hover{background:var(--hi);color:#fff}
.seq--drag{cursor:grab;touch-action:pan-y}
.seq--drag.is-grab{cursor:grabbing}

.seq-hero h1{font-size:clamp(1.45rem,3.4vw,2.15rem);line-height:1.78}
.seq-hero p{margin-top:1.2em;font-size:.7rem;letter-spacing:.3em;color:var(--usu2)}
.seq-caps{position:relative;margin-top:clamp(18px,3vw,38px);min-height:12.5em}
.seq-cap{
  position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;pointer-events:none;
}
.seq-cap.is-on{opacity:1;transform:none}
.seq-cap h2{font-size:clamp(1.05rem,2.2vw,1.32rem);margin-bottom:.7em}
.seq-cap p{font-size:.86rem;color:var(--usu);line-height:2.1}
.seq-progress{margin-top:22px;height:1px;background:var(--keisen);position:relative}
.seq-progress i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--hi)}

/* ---------------------------------------------------------------- 部品 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-on{opacity:1;transform:none}

.hako{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(20px,3vw,42px)}
.hako h3{font-size:1.02rem;margin-bottom:.75em}
.hako p{font-size:.85rem;color:var(--usu);line-height:2.1}

.shina{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:clamp(18px,2.6vw,32px)}
.shina a{
  text-decoration:none;background:var(--kami);border:1px solid var(--keisen2);
  display:block;transition:border-color .25s,transform .25s;
}
.shina a:hover{border-color:var(--hi);transform:translateY(-3px)}
.shina .e{aspect-ratio:14/9;overflow:hidden;background:#e6e1d9}
.shina .e img{width:100%;height:100%;object-fit:cover}
.shina .t{padding:18px 20px 22px}
.shina .t h3{font-size:1.02rem}
.shina .t .sub{font-size:.72rem;letter-spacing:.16em;color:var(--usu2);margin-top:.5em}
.shina .t .nedan{margin-top:.9em;font-family:var(--mincho);color:var(--hi);font-size:.95rem}

.hyou{width:100%;border-collapse:collapse;font-size:.84rem}
.hyou th,.hyou td{border-bottom:1px solid var(--keisen);padding:12px 10px;text-align:left;vertical-align:top}
.hyou th{width:8.5em;font-weight:500;color:var(--usu);letter-spacing:.1em}
.hyou td{font-variant-numeric:tabular-nums}

.btn-hi{
  display:inline-block;text-decoration:none;font-size:.82rem;letter-spacing:.16em;
  border:1px solid var(--hi);color:var(--hi);padding:12px 26px;border-radius:2px;
  transition:background .2s,color .2s;background:transparent;font-family:var(--gothic);cursor:pointer;
}
.btn-hi:hover{background:var(--hi);color:#fff}
.btn-hi--tetsu{border-color:#c99a7d;color:#f0e7db}
.btn-hi--tetsu:hover{background:#c99a7d;color:#22201e}

.shashin{position:relative;border-radius:2px;overflow:hidden;background:#e6e1d9}
.shashin img{width:100%;display:block}
.shashin figcaption{
  font-size:.7rem;color:var(--usu2);letter-spacing:.1em;padding:9px 2px 0;line-height:1.9;
}

/* ---------------------------------------------------------------- 品目の詳細 */
.hin{
  border-top:1px solid var(--keisen);padding-top:clamp(26px,4vw,48px);
  margin-top:clamp(30px,4.6vw,60px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,48px);align-items:start;
  scroll-margin-top:78px;
}
.hin .midashi{margin-bottom:22px}
.hin h3{font-size:clamp(1.15rem,2.5vw,1.5rem)}

/* ---------------------------------------------------------------- 工程(つくり方) */
.kotei{counter-reset:k;display:grid;gap:clamp(22px,3.4vw,40px)}
.kotei li{
  list-style:none;display:grid;grid-template-columns:76px 1fr;gap:clamp(14px,2.4vw,30px);
  padding-bottom:clamp(20px,3vw,34px);border-bottom:1px solid var(--keisen2);
}
.kotei li::before{
  counter-increment:k;content:counter(k,decimal-leading-zero);
  font-family:var(--mincho);font-size:1.5rem;color:var(--hi);line-height:1.2;letter-spacing:.06em;
}
.kotei h3{font-size:1.04rem;margin-bottom:.6em}
.kotei p{font-size:.86rem;color:var(--usu);line-height:2.1}
.kotei .toki{display:block;margin-top:.7em;font-size:.72rem;letter-spacing:.14em;color:var(--usu2)}

/* ---------------------------------------------------------------- 受付(主な行為) */
.uke{
  background:var(--kami);border:1px solid var(--keisen);padding:clamp(22px,3.4vw,40px);
}
.uke fieldset{border:0;margin:0 0 clamp(20px,2.8vw,30px);padding:0}
.uke legend{
  font-family:var(--mincho);font-size:.92rem;letter-spacing:.14em;padding:0 0 12px;
  display:flex;align-items:baseline;gap:10px;
}
.uke legend span{font-size:.64rem;letter-spacing:.22em;color:var(--hi)}
.erabi{display:flex;flex-wrap:wrap;gap:8px}
.erabi button{
  font:inherit;font-size:.8rem;letter-spacing:.08em;padding:10px 15px;cursor:pointer;
  background:transparent;border:1px solid var(--keisen);color:var(--sumi);border-radius:2px;
  transition:border-color .18s,color .18s,background .18s;line-height:1.5;
}
.erabi button:hover{border-color:var(--hi);color:var(--hi)}
.erabi button[aria-pressed="true"]{background:var(--hi);border-color:var(--hi);color:#fff}
.erabi button small{display:block;font-size:.66rem;letter-spacing:.06em;opacity:.72;margin-top:2px}
.tsuika{display:grid;gap:10px}
.tsuika label{display:flex;gap:11px;align-items:flex-start;font-size:.84rem;cursor:pointer;line-height:1.9}
.tsuika input{margin-top:.55em;accent-color:var(--hi);width:15px;height:15px;flex:0 0 auto}
.tsuika em{font-style:normal;color:var(--hi);font-variant-numeric:tabular-nums}
.honsu{display:flex;align-items:center;gap:12px}
.honsu button{
  width:40px;height:40px;font-size:1.1rem;line-height:1;cursor:pointer;
  border:1px solid var(--keisen);background:transparent;color:var(--sumi);border-radius:2px;
}
.honsu button:hover{border-color:var(--hi);color:var(--hi)}
.honsu output{font-family:var(--mincho);font-size:1.2rem;min-width:3.2em;text-align:center;font-variant-numeric:tabular-nums}

.shimei{
  position:sticky;top:78px;background:var(--tetsu);color:#eee7dc;padding:clamp(20px,3vw,30px);
}
.shimei dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:9px 12px;font-size:.82rem}
.shimei dt{color:#b3aaa0;letter-spacing:.1em}
.shimei dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.shimei .gou{
  border-top:1px solid #453f3a;margin-top:16px;padding-top:16px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.shimei .gou b{font-family:var(--mincho);font-size:1.75rem;color:#f6efe4;font-weight:500;font-variant-numeric:tabular-nums}
.shimei .shiage{margin-top:14px;font-size:.78rem;color:#c9c0b5;line-height:1.95}
.shimei .shiage b{color:#f0c9a6;font-weight:500}
.shimei button{margin-top:18px;width:100%}
.shimei .kotowari{margin-top:12px;font-size:.66rem;color:#a49a8f;line-height:1.85}

.hikae{
  margin-top:22px;border:1px solid var(--hi);background:#fff;padding:clamp(18px,2.6vw,26px);
}
.hikae[hidden]{display:none}
.hikae h3{font-size:1.02rem;color:var(--hi);margin-bottom:.7em}
.hikae .ban{font-family:var(--mincho);font-size:1.5rem;letter-spacing:.12em;margin:.2em 0 .6em}
.hikae ul{margin:0;padding-left:1.15em;font-size:.82rem;color:var(--usu);line-height:2}

/* ---------------------------------------------------------------- 問い合わせ・その他 */
.form{display:grid;gap:16px;max-width:640px}
.form label{display:grid;gap:7px;font-size:.8rem;letter-spacing:.1em;color:var(--usu)}
.form input,.form textarea,.form select{
  font:inherit;font-size:.9rem;padding:11px 13px;border:1px solid var(--keisen);
  background:#fff;color:var(--sumi);border-radius:2px;width:100%;
}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--hi);outline-offset:1px}
.form textarea{min-height:130px;line-height:1.9;resize:vertical}

details.qa{border-bottom:1px solid var(--keisen)}
details.qa summary{
  cursor:pointer;padding:16px 34px 16px 0;position:relative;font-size:.92rem;
  list-style:none;font-family:var(--mincho);letter-spacing:.08em;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1px solid var(--hi);border-bottom:1px solid var(--hi);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
details.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.qa .a{padding:0 0 18px;font-size:.85rem;color:var(--usu);line-height:2.1}

.nenpyo{display:grid;gap:0}
.nenpyo div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--keisen2)}
.nenpyo dt{font-family:var(--mincho);color:var(--hi);letter-spacing:.1em;font-size:.9rem}
.nenpyo dd{margin:0;font-size:.86rem;color:var(--usu);line-height:2}

.chizu{background:var(--kami);border:1px solid var(--keisen2);padding:14px}
.chizu svg{width:100%;height:auto;display:block}

/* ---------------------------------------------------------------- 足 */
footer.ashi{background:var(--tetsu);color:#b7aea3;padding:clamp(40px,6vw,72px) 0 34px;font-size:.8rem}
footer.ashi a{color:#ddd4c8;text-decoration:none}
footer.ashi a:hover{color:#fff;text-decoration:underline}
.ashi-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(20px,3vw,40px)}
.ashi-in h4{font-family:var(--mincho);color:#f0e9de;font-size:.88rem;letter-spacing:.18em;margin-bottom:1.1em;font-weight:500}
.ashi-in ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ashi-in p{line-height:2.05}
.kakuu{
  margin-top:clamp(28px,4vw,46px);padding-top:20px;border-top:1px solid #3a352f;
  font-size:.72rem;line-height:2;color:#9a9086;
}
.kakuu b{color:#d9b9a2;font-weight:500}

/* ---------------------------------------------------------------- 幅の面倒 */
@media (max-width:900px){
  /* 狭い画面でも sticky のまま。ここで position:relative に戻すと、
     420vh ぶんの空白が写真の下に残る(2026-09-10 に気づいて直した)。 */
  .seq-layout{grid-template-columns:1fr;gap:12px}
  .seq-sticky{height:calc(100svh - 62px);min-height:520px;align-items:center}
  .seq{max-width:min(72vw,380px);max-height:min(44svh,380px);margin-inline:auto}
  .seq-hero h1{font-size:clamp(1.28rem,5.4vw,1.7rem)}
  .seq-caps{min-height:13em;margin-top:14px}
  .seq-cap p{font-size:.8rem;line-height:1.95}
  .hin{grid-template-columns:1fr}
  .ashi-in{grid-template-columns:1fr;gap:26px}
  .shimei{position:static}
  [data-uke]{grid-template-columns:1fr !important}
}
@media (max-width:720px){
  body{font-size:14.5px;line-height:1.95}
  .top .in{min-height:56px;gap:10px}
  .seq-sticky{top:56px;height:calc(100svh - 56px)}
  .seq{max-width:min(64vw,300px);max-height:min(38svh,300px)}
  .hamb{
    /* 幅を決め打ちにすると「メ ニ ュ ー」と1字ずつ折り返す(2026-09-10 実測)。
       文字は折り返さず、釦の幅を文字に合わせる。指で押せる高さ44pxは守る。 */
    display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
    min-width:62px;height:44px;padding:0 12px;white-space:nowrap;
    border:1px solid var(--keisen);background:transparent;
    color:var(--sumi);font:inherit;font-size:.72rem;letter-spacing:.02em;border-radius:2px;cursor:pointer;
  }
  nav.mise{
    position:fixed;inset:56px 0 auto 0;background:var(--kinari);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 20px 22px;border-bottom:1px solid var(--keisen);
    margin-left:0;
  }
  nav.mise[hidden]{display:none}
  nav.mise a{padding:14px 2px;border-bottom:1px solid var(--keisen2);font-size:.88rem}
  nav.mise a.btn{margin-top:14px;text-align:center;border:1px solid var(--hi)}
  .kotei li{grid-template-columns:1fr;gap:6px}
  .kotei li::before{font-size:1.15rem}
  .honsu button{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}