@charset "utf-8";
/* ============================================================================
   帳合舎(ちょうあいしゃ)税理士事務所 ─ 第24号(架空)
   組版の決め(方針 9-3):
     ・見出しは明朝、本文はゴシック。字間・行間を明示する
     ・余白は広く。段の上下は clamp(56px, 8.6vw, 132px)
     ・主色は「朱(しゅ)」1色だけ。罫・釦・強調・朱印にしか使わない
     ・動きは1画面に1つ
        表紙 = 帳面に罫と数字が入り、最後に朱印が捺される(一度だけ)
        帳合 = 12日間の帯が左から伸びる
        暦   = 12か月の濃淡が順に濃くなる
        相談 = 控えが出るところ
     ・prefers-reduced-motion では、全部「終わった状態」で静止して出す
   端末に入っている書体しか指定しない(外部フォント・外部CDNは1件も読まない)。
   ========================================================================== */

:root{
  --ji:#f3f0e9;          /* 地(生成り) */
  --kami:#fbf9f4;        /* 紙 */
  --sumi:#191713;        /* 墨(本文) */
  --usu:#54504a;         /* 薄墨 */
  --usu2:#8a857c;        /* さらに薄い */
  --shu:#a3322a;         /* 朱 ─ 主色。ここだけ */
  --shu-usu:#f4e6e2;     /* 朱のごく薄い地 */
  --kuro:#16140f;        /* footer */
  --kei:#dcd6c8;         /* 罫 */
  --kei2:#e7e2d5;
  --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,8.6vw,132px);
  --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,svg{max-width:100%;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,820px);margin-inline:auto}
.num{font-family:var(--mincho);font-feature-settings:"tnum"}
:focus-visible{outline:2px solid var(--shu);outline-offset:2px}

/* ---------------------------------------------------------------- 頭 */
.atama{position:sticky;top:0;z-index:40;background:rgba(243,240,233,.95);
  border-bottom:1px solid var(--kei);backdrop-filter:saturate(120%) blur(2px)}
.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:.16em;font-weight:500}
.yagou span{font-size:9px;letter-spacing:.28em;color:var(--usu2)}
.michi{display:flex;gap:22px;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;transition:color .16s ease}
.michi a:hover{color:var(--shu);border-bottom-color:var(--shu)}
.michi a[aria-current="page"]{color:var(--sumi);border-bottom-color:var(--shu)}

/* ---------------------------------------------------------------- 表紙 */
.hyoushi{padding:clamp(38px,6.6vw,84px) 0 0}
.hyoushi h1{font-size:clamp(29px,7.2vw,58px);line-height:1.4;letter-spacing:.055em}
.hyoushi h1 small{display:block;font-family:var(--gothic);font-size:11px;
  letter-spacing:.3em;color:var(--shu);margin-bottom:20px;line-height:2}
.hyoushi-honbun{margin-top:26px;max-width:33em;color:var(--usu)}
.e{margin:clamp(30px,5vw,58px) 0 0;position:relative}
.e svg{width:100%;height:auto;border:1px solid var(--kei)}
.e figcaption{font-size:11.5px;color:var(--usu2);letter-spacing:.12em;margin-top:10px;line-height:1.9}

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

/* 数字の帯 */
.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(26px,4vw,56px);align-items:start}

/* 工程 */
.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:64px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--kei)}
.kotei .hi{font-family:var(--mincho);font-size:17px;color:var(--shu);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}

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

/* 表 */
.yoko{overflow-x:auto;-webkit-overflow-scrolling:touch}
.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);letter-spacing:.08em}
.hyou thead th{color:var(--sumi);border-bottom:1px solid var(--sumi);font-size:12px;letter-spacing:.16em}
.hyou td{font-family:var(--mincho);font-size:15px}
.hyou td small,.hyou th small{font-family:var(--gothic);font-size:12px;color:var(--usu2);
  display:block;letter-spacing:.06em;line-height:1.8}
.hyou .migi{text-align:right;white-space:nowrap}

/* 一文 */
.hitokoto{font-family:var(--mincho);font-size:clamp(19px,3.6vw,30px);line-height:1.85;
  letter-spacing:.07em;border-left:2px solid var(--shu);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(--shu);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:#822318}
.botan-usu{background:transparent;color:var(--shu);border:1px solid var(--shu)}
.botan-usu:hover{background:var(--shu-usu)}

/* ---------------------------------------------------------------- 相談 */
.soudan{display:grid;gap:clamp(26px,3.6vw,44px);margin-top:clamp(26px,4vw,44px);align-items:start}
.kumi{border:1px solid var(--kei);background:var(--kami);padding:clamp(20px,3.2vw,32px)}
.kumi + .kumi{margin-top:18px}
.kumi-mi{font-size:11px;letter-spacing:.26em;color:var(--shu);margin-bottom:14px}
.kumi-soe{font-size:12px;color:var(--usu2);line-height:1.9;margin-top:10px}
.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:border-color .16s ease,color .16s ease,background .16s ease}
.eranbu button:hover{border-color:var(--shu);color:var(--shu)}
.eranbu button[aria-pressed="true"]{background:var(--shu);border-color:var(--shu);color:#fff}
.eranbu button small{display:block;font-size:10.5px;letter-spacing:.1em;opacity:.85}
.hako{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hako label{font-size:12.5px;color:var(--usu);letter-spacing:.1em}
select,input[type=number]{font-family:var(--gothic);font-size:14px;color:var(--sumi);
  background:var(--ji);border:1px solid var(--kei);padding:11px 12px;letter-spacing:.06em;
  max-width:100%}
input[type=number]{width:8em}
select{width:100%}

.hikae{border:1px solid var(--shu);background:var(--shu-usu);padding:clamp(20px,3.2vw,32px);
  font-size:14px;line-height:2.05;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease}
.hikae.deta{opacity:1;transform:none}
.hikae h3{font-size:19px;margin-bottom:6px}
.hikae .gaku{font-family:var(--mincho);font-size:clamp(28px,6vw,42px);letter-spacing:.03em;
  line-height:1.3;margin:14px 0 4px}
.hikae .gaku i{font-style:normal;font-size:15px;letter-spacing:.1em;margin-left:6px;color:var(--usu)}
.hikae dl{display:grid;grid-template-columns:8.5em 1fr;gap:6px 14px;margin:16px 0 0;font-size:13px}
.hikae dt{color:var(--usu);letter-spacing:.08em}
.hikae dd{margin:0;font-family:var(--mincho);font-size:14.5px}
.hikae .chui{font-size:12px;color:var(--usu);margin-top:16px;line-height:1.9;
  border-top:1px solid rgba(163,50,42,.25);padding-top:14px}
.mada{font-size:13px;color:var(--usu2);letter-spacing:.08em;line-height:2}

/* ---------------------------------------------------------------- 足 */
.ashi{background:var(--kuro);color:#cbc5b9;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:#f1ece2;font-weight:500}
.ashi a{color:#cbc5b9;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 #322f29;font-size:11.5px;
  color:#8b857a;line-height:2}

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

/* ---------------------------------------------------------------- 帳面(表紙の絵) */
.kei-hiku{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.3s ease}
.kaita .kei-hiku{stroke-dashoffset:0}
.suuji{opacity:0;transition:opacity .8s ease}
.kaita .suuji{opacity:1}
.inkan{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(1.5) rotate(-8deg);
  transition:opacity .5s ease .9s,transform .5s cubic-bezier(.2,.9,.3,1) .9s}
.kaita .inkan{opacity:.92;transform:scale(1) rotate(-4deg)}

/* 12日間の帯 */
.obi-nobi{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
  transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.mieta .obi-nobi{transform:scaleX(1)}
/* 12か月の濃淡。CSSの opacity は SVG の opacity 属性を上書きしてしまうので、
   月ごとの濃さは --o(各rectのstyleに書く)で持つ(2026-09-13 実測で12本とも真っ赤になった) */
.tsuki-koku{opacity:0;transition:opacity .6s ease}
.mieta .tsuki-koku{opacity:var(--o,1)}

/* ---------------------------------------------------------------- 広い画面 */
@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.06fr .94fr}
  .kotei li{grid-template-columns:92px 1fr;gap:26px}
  .fuda{grid-template-columns:1fr 1fr}
  .fuda-3{grid-template-columns:repeat(3,1fr)}
  .ashi-in{grid-template-columns:1.4fr 1fr 1fr}
  .soudan{grid-template-columns:1.1fr .9fr}
  input[type=number]{width:9em}
}
@media (max-width:759px){
  .atama-in{flex-wrap:wrap;gap:8px}
  .michi{flex-wrap:wrap;gap:12px 16px;padding-bottom:4px}
  .michi a{font-size:12px}
  .yagou b{font-size:17px}
  .hikae dl{grid-template-columns:7.5em 1fr}
}

/* ---------------------------------------------------------------- 動きを止める */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deru{opacity:1;transform:none;transition:none}
  .kei-hiku{stroke-dashoffset:0;transition:none}
  .suuji{opacity:1;transition:none}
  .inkan{opacity:.92;transform:rotate(-4deg);transition:none}
  .obi-nobi{transform:scaleX(1);transition:none}
  .tsuki-koku{opacity:var(--o,1);transition:none}
  .hikae{transition:none}
}