@charset "utf-8";
/* ==========================================================================
   C案 ── 人を前に出す
   顧客が「税理士本人の顔と人柄が前に出ていて親しみやすい」と評価した
   円満相続税理士法人の方向を、この事務所の材料で組み直したもの。

   考え方
     不安な状態で来た人が最初に知りたいのは「誰が担当するのか」。
     数字や料金より先に、人を見せる。文章は一人称の語りで通す。
     読み物として上から下へ読ませる。1カラム、余白広め。

   アンカー: 和文の読み物（明朝見出し＋広い行間＋大きな人物写真）
   崩壊条件: 一人称をやめること／カードで並列に見せること／
             彩度の高い色／情報を詰めること
   ========================================================================== */

:root{
  --paper:#fdfcfa;          /* わずかに温かい白。クリーム #f4f1ea には寄せない */
  --paper-2:#ffffff;
  --sumi:#1a1714;           /* 墨 */
  --sumi-2:#4a423b;
  --sumi-3:#7d746b;
  --line:#e0dbd3;
  --ai:#26456b;             /* 藍 */
  --ai-l:#eef2f7;
  --kuchiba:#9c6b3f;        /* 朽葉。差し色 */

  --max:1080px;
  --read:660px;             /* 読み物の版面幅。和文25〜40字 */
  --gut:22px;
  --bar:74px;

  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",
         "Yu Gothic",Meiryo,sans-serif;
  --num:"Helvetica Neue",Arial,sans-serif;
  --e:cubic-bezier(.2,.8,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--sumi);font-family:var(--sans);
  font-size:18px;line-height:2;font-feature-settings:"palt" 1;padding-bottom:var(--bar)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ai)}
:focus-visible{outline:3px solid var(--kuchiba);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.read{max-width:var(--read);margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{margin:0;font-family:var(--mincho);font-weight:600;line-height:1.6;
  letter-spacing:.02em;word-break:auto-phrase}
h1{font-size:clamp(1.5rem,4.6vw,2.2rem)}
h2{font-size:clamp(1.3rem,3.6vw,1.72rem)}
h3{font-size:1.14rem}
p{margin:0 0 1.6em}
p:last-child{margin-bottom:0}

/* ── ヘッダー ─────────────────────────── */
.site-header{border-bottom:1px solid var(--line);background:var(--paper)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:72px}
.brand{text-decoration:none;color:var(--sumi);font-family:var(--mincho);font-weight:600;
  font-size:1.08rem;line-height:1.3;display:flex;flex-direction:column;
  justify-content:center;min-height:48px}
.brand small{font-family:var(--sans);font-size:.68rem;color:var(--sumi-3);font-weight:400}
.head-tel{text-decoration:none;color:var(--ai);text-align:right}
.head-tel b{display:block;font-family:var(--num);font-size:1.24rem;font-weight:700}
.head-tel span{font-size:.68rem;color:var(--sumi-3)}
@media(max-width:760px){.head-tel{display:none}}

.nav{border-bottom:1px solid var(--line)}
.nav ul{display:flex;margin:0 auto;padding:0 var(--gut);list-style:none;max-width:var(--max)}
.nav a{display:flex;align-items:center;min-height:48px;padding:0 20px 0 0;margin-right:20px;
  text-decoration:none;color:var(--sumi-2);font-size:.92rem}
.nav a[aria-current="page"]{color:var(--sumi);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--kuchiba)}
@media(max-width:760px){
  .nav ul{overflow-x:auto;scrollbar-width:none}.nav ul::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:.88rem;margin-right:14px}
}

/* ── 主役の人物 ───────────────────────── */
.person-hero{padding:0;border-bottom:1px solid var(--line)}
.person-hero .grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
/* 写真は画面の端まで断ち切る。人物を主役に置くための版面 */
@media(max-width:860px){.person-hero .grid{grid-template-columns:1fr}}

.person-photo{background:var(--ai-l);border-right:1px solid var(--line);
  min-height:clamp(340px,52vh,560px);display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--sumi-3);font-size:.86rem;padding:24px;line-height:1.8}
@media(max-width:860px){.person-photo{border-right:0;border-bottom:1px solid var(--line);
  min-height:280px}}

.person-say{padding:clamp(34px,6vw,72px) clamp(22px,5vw,64px);display:flex;
  flex-direction:column;justify-content:center;max-width:660px}
.person-say .who{font-size:.78rem;letter-spacing:.14em;color:var(--kuchiba);
  font-weight:700;margin-bottom:16px}
.person-say h1{margin-bottom:22px}
.person-say p{color:var(--sumi-2);font-size:1rem;margin-bottom:1.2em}
.person-say .sign{font-family:var(--mincho);font-size:1.06rem;margin-top:8px}
.person-say .sign small{display:block;font-family:var(--sans);font-size:.74rem;
  color:var(--sumi-3);margin-top:4px}

/* ── 区画 ─────────────────────────────── */
section{padding:clamp(52px,8vw,88px) 0;border-bottom:1px solid var(--line)}
section.tint{background:var(--paper-2)}
.kicker{font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;color:var(--kuchiba);
  font-weight:700;margin:0 0 16px;display:block}
.lead{color:var(--sumi-2);margin-top:20px}

/* ── 語り（読み物） ───────────────────── */
.story p{font-size:1.02rem}
.story p.big{font-family:var(--mincho);font-size:1.24rem;line-height:1.9;color:var(--sumi)}
.story blockquote{margin:2em 0;padding:0 0 0 22px;border-left:2px solid var(--kuchiba);
  font-family:var(--mincho);font-size:1.14rem;color:var(--sumi);line-height:1.9}

/* ── 約束（3つ） ──────────────────────── */
.promises{margin-top:44px;border-top:1px solid var(--line)}
.promise{padding:30px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:auto 1fr;gap:26px;align-items:baseline}
.promise .n{font-family:var(--mincho);font-size:1.9rem;color:var(--kuchiba);line-height:1}
.promise h3{margin-bottom:8px}
.promise p{margin:0;color:var(--sumi-2);font-size:.97rem}
@media(max-width:620px){.promise{grid-template-columns:1fr;gap:8px}}

/* ── 料金（控えめに、しかし明示） ─────── */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:30px}
table{border-collapse:collapse;width:100%;min-width:400px;font-size:.98rem}
caption{text-align:left;font-family:var(--mincho);font-weight:600;font-size:1.08rem;
  padding:0 0 14px}
th,td{border-bottom:1px solid var(--line);padding:15px 16px 15px 0;text-align:left;
  vertical-align:baseline}
thead th{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;color:var(--sumi-3);
  font-weight:700;border-bottom:1px solid var(--sumi-3)}
tbody th{font-weight:400;color:var(--sumi-2)}
td.money{font-family:var(--num);font-size:1.2rem;font-weight:700;text-align:right;
  padding-right:0;white-space:nowrap;color:var(--ai)}

.notes{margin:20px 0 0;padding-left:1.15em;font-size:.9rem;color:var(--sumi-3)}
.notes li{margin:6px 0}
.caution{background:var(--ai-l);border-left:3px solid var(--ai);padding:16px 18px;
  font-size:.92rem;color:var(--sumi-2);margin-top:24px}

/* ── 経歴 ─────────────────────────────── */
.hist{margin-top:30px}
.hist dl{display:grid;grid-template-columns:auto 1fr;margin:0}
.hist dt{border-top:1px solid var(--line);padding:12px 22px 12px 0;font-family:var(--num);
  font-size:.86rem;color:var(--sumi-3);white-space:nowrap}
.hist dd{border-top:1px solid var(--line);padding:12px 0;margin:0;font-size:.96rem;
  color:var(--sumi-2)}

/* ── ボタン ───────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;
  padding:15px 32px;text-decoration:none;font-weight:700;font-size:1rem;
  background:var(--ai);color:#fff;border:1px solid var(--ai);
  transition:background .3s var(--e)}
.btn:hover{background:#1b3452}
.btn.o{background:transparent;color:var(--ai)}
.btn.o:hover{background:var(--ai-l)}
.btn.k{background:var(--kuchiba);border-color:var(--kuchiba)}
.btn.k:hover{background:#82562f}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
@media(max-width:560px){.btns{flex-direction:column}.btn{width:100%}}

/* ── 下部バー ─────────────────────────── */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper-2);
  border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;
  box-shadow:0 -2px 12px rgba(26,23,20,.08)}
.actionbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:var(--bar);text-decoration:none;font-weight:700;font-size:1rem;
  border-right:1px solid var(--line)}
.actionbar a:last-child{border-right:0}
.actionbar .tel{color:var(--ai)}
.actionbar .tel span{font-size:.68rem;color:var(--sumi-3);font-weight:400}
.actionbar .tel b{font-family:var(--num);font-size:1.24rem}
.actionbar .cta{background:var(--kuchiba);color:#fff}
.actionbar .cta span{font-size:.68rem;font-weight:400;opacity:.92}

/* ── フッター ─────────────────────────── */
.site-footer{background:var(--sumi);color:#b3aaa0;padding:48px 0 32px;font-size:.92rem}
.site-footer a{color:#fff;text-decoration:none}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.foot-grid h3{font-family:var(--sans);color:#fff;font-size:.8rem;letter-spacing:.12em;
  margin-bottom:12px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:6px 0}
.foot-btm{border-top:1px solid #3a332c;margin-top:30px;padding-top:18px;font-size:.78rem;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.updated{font-size:.84rem;color:var(--sumi-3);margin-top:30px}

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

/* ── 欄外の注（シグネチャームーブ） ───────────────────── */
.note-inline{margin:26px 0 0;padding:16px 18px;background:var(--ai-l);
  border-left:2px solid var(--kuchiba);font-size:.94rem;line-height:1.9;color:var(--sumi-2)}
.note-inline span{display:block;font-size:.72rem;letter-spacing:.14em;font-weight:700;
  color:var(--kuchiba);margin-bottom:6px}

.note-rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:20;
  width:min(230px,20vw);opacity:0;transition:opacity .32s var(--e);pointer-events:none}
.note-rail.on{opacity:1}
.note-rail .lbl{display:block;font-size:.68rem;letter-spacing:.16em;font-weight:700;
  color:var(--kuchiba);margin-bottom:8px}
.note-rail .body{font-family:var(--mincho);font-size:.94rem;line-height:1.95;
  color:var(--sumi-2);margin:0;padding-left:14px;border-left:1px solid var(--line)}
@media(max-width:1180px){.note-rail{display:none}}
@media (prefers-reduced-motion:reduce){.note-rail{transition:none}}

/* ── 写真の配置枠 ───────────────────────────────────────────
   C案は写真が主役。撮影前のため、入る位置・向き・内容を枠で示している。
   撮影指示書のカット番号と対応。撮影後はこの figure を img に置き換える。 */
.shot{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;margin:0;padding:20px;text-align:center;
  background:repeating-linear-gradient(45deg,#f0f3f8 0 10px,#eaeef5 10px 20px);
  border:2px dashed var(--ai);color:var(--sumi-2)}
.shot.p{aspect-ratio:3/4}
.shot.l{aspect-ratio:16/9}
.shot.s{aspect-ratio:1/1}
.shot.w{aspect-ratio:21/9}
.shot-no{font-size:.7rem;font-weight:700;letter-spacing:.12em;color:#fff;
  background:var(--ai);padding:3px 10px;font-family:var(--sans)}
.shot-ttl{font-size:1rem;font-weight:700;color:var(--sumi);line-height:1.6;
  font-family:var(--sans)}
.shot-note{font-size:.78rem;color:var(--sumi-3);line-height:1.7;font-family:var(--sans)}
.shot-grid{display:grid;gap:16px;margin-top:24px}
.shot-grid.c2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.shot-grid.c3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.shot-lead{margin:26px 0 0;padding:12px 16px;background:#f7f1ea;
  border-left:3px solid var(--kuchiba);font-size:.86rem;color:var(--sumi-2);
  font-family:var(--sans)}

/* ── 相談フォーム ─────────────────────── */
.cform{margin-top:30px}
.fld{margin-bottom:26px;display:flex;flex-direction:column;gap:7px}
.fld label{font-size:.92rem;font-weight:700;color:var(--sumi)}
.fld .req{display:inline-block;font-size:.68rem;font-weight:700;color:#fff;
  background:var(--kuchiba);padding:2px 7px;margin-left:8px;vertical-align:2px}
.fld input,.fld select,.fld textarea{width:100%;min-height:52px;padding:12px 14px;
  font-size:1rem;font-family:inherit;line-height:1.8;color:var(--sumi);
  background:var(--paper-2);border:1px solid var(--line);border-radius:0}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:3px solid var(--kuchiba);outline-offset:1px}
.fld .hint{font-size:.8rem;color:var(--sumi-3);line-height:1.7}

/* ヒーローの写真枠は左半分いっぱいに置く */
.person-hero .shot{min-height:clamp(340px,52vh,560px);aspect-ratio:auto;border-width:0 2px 0 0;
  border-style:dashed}
@media(max-width:860px){.person-hero .shot{min-height:280px;border-width:0 0 2px 0}}