/* ============================================================
   水野健一税理士事務所 — 制作サンプル (SmartConnect)
   document / formal / sidebar layout
   ============================================================ */
:root{
  --washi:#F7F7F5;
  --white:#FFFFFF;
  --navy:#1B3A5B;
  --navy-d:#122A44;
  --ink:#2A2E33;
  --sub:#6B7280;
  --silver:#D7DBDE;
  --rule:#C9CFD4;
  --accent:#8A6D3B;
  --line-green:#06C755;
  --serif:"Noto Serif JP",serif;
  --sans:"Noto Sans JP",sans-serif;
  --sidebar:248px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;background:var(--washi);color:var(--ink);line-height:2;font-size:14.5px;letter-spacing:.05em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:var(--sans);cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ================= layout: fixed sidebar ================= */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:var(--white);border-right:1px solid var(--rule);display:flex;flex-direction:column;padding:44px 30px 30px;z-index:100}
.main{margin-left:var(--sidebar);min-height:100vh}
.inner{max-width:860px;margin:0 auto;padding:0 48px}
section{padding:90px 0;position:relative}

/* sidebar parts */
.sb-logo{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.8;letter-spacing:.1em;color:var(--navy);border-bottom:1px solid var(--rule);padding-bottom:24px}
.sb-logo small{display:block;font-family:var(--sans);font-size:10px;color:var(--sub);letter-spacing:.18em;margin-top:8px;font-weight:400}
.sb-nav{margin-top:34px;flex:1}
.sb-nav a{display:flex;align-items:baseline;gap:12px;padding:11px 2px;font-size:13.5px;letter-spacing:.12em;color:var(--ink);border-bottom:1px dotted var(--silver);transition:color .3s,padding-left .3s}
.sb-nav a i{font-style:normal;font-size:10px;color:var(--rule);letter-spacing:.06em;min-width:20px;transition:color .3s}
.sb-nav a:hover,.sb-nav a.current{color:var(--navy);padding-left:6px}
.sb-nav a:hover i,.sb-nav a.current i{color:var(--accent)}
.sb-contact{border-top:1px solid var(--rule);padding-top:20px;font-size:11.5px;color:var(--sub);line-height:1.9}
.sb-contact .tel{font-family:var(--serif);font-size:19px;color:var(--navy);letter-spacing:.06em;display:block;margin:6px 0 2px}
.sb-contact .hours{font-size:10.5px}
.sb-line{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;border:1px solid var(--line-green);color:var(--line-green);font-size:12px;font-weight:500;padding:10px;letter-spacing:.1em;transition:background .3s,color .3s}
.sb-line:hover{background:var(--line-green);color:#fff}
.sb-line svg{width:15px;height:15px}

/* mobile top bar */
.mb-bar{display:none;position:fixed;inset:0 0 auto;height:64px;background:var(--white);border-bottom:1px solid var(--rule);z-index:100;align-items:center;justify-content:space-between;padding:0 18px}
.mb-bar .sb-logo{border:none;padding:0;font-size:15px}
.mb-bar .sb-logo small{display:none}
.hamburger{flex-direction:column;gap:6px;padding:10px;display:flex}
.hamburger span{width:24px;height:1.5px;background:var(--navy);transition:all .35s}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--white);z-index:99;flex-direction:column;justify-content:center;padding:80px 36px 40px;gap:0}
.mobile-nav.open{display:flex}
.mobile-nav a{display:flex;gap:14px;align-items:baseline;padding:16px 4px;font-size:15px;letter-spacing:.14em;border-bottom:1px dotted var(--silver)}
.mobile-nav a i{font-style:normal;font-size:10px;color:var(--accent)}
.mobile-nav .tel-row{margin-top:26px;border:none;font-family:var(--serif);font-size:20px;color:var(--navy);justify-content:center}

/* ================= typography ================= */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--navy);letter-spacing:.08em}
.doc-head{margin-bottom:52px}
.doc-head h2{font-size:clamp(21px,2.6vw,27px);line-height:1.9;padding-bottom:18px;border-bottom:2px solid var(--navy);display:inline-block;padding-right:40px}
.doc-head .note{font-size:12px;color:var(--sub);margin-top:12px}
.lead-serif{font-family:var(--serif);font-size:clamp(15px,1.8vw,17px);line-height:2.6;color:var(--ink)}

/* ================= hero (typographic, no photo) ================= */
.hero{padding:120px 0 70px;background:var(--white);border-bottom:1px solid var(--rule)}
.hero .kanban{font-size:11.5px;letter-spacing:.3em;color:var(--sub);display:block;margin-bottom:30px}
.hero h1{font-size:clamp(26px,3.6vw,40px);line-height:2;font-weight:600}
.hero .sub{margin-top:28px;font-size:14px;color:var(--sub);line-height:2.3;max-width:560px}
.hero .actions{display:flex;gap:1px;margin-top:44px;border:1px solid var(--navy);width:fit-content;background:var(--navy)}
.hero .actions a{background:var(--white);color:var(--navy);padding:16px 34px;font-size:13.5px;letter-spacing:.14em;transition:background .3s,color .3s;display:inline-flex;align-items:center;gap:10px}
.hero .actions a:hover,.hero .actions a.dark{background:var(--navy);color:#fff}
.hero .actions a.dark:hover{background:var(--navy-d)}
/* data strip */
.data-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);border-width:1px 1px 1px 1px;margin-top:56px;background:var(--white)}
.data-strip .d + .d{border-left:1px solid var(--rule)}
.data-strip .d{padding:22px 26px}
.data-strip .d b{font-family:var(--serif);font-size:24px;color:var(--navy);font-weight:600;letter-spacing:.04em}
.data-strip .d b small{font-size:12px;margin-left:2px;color:var(--accent)}
.data-strip .d span{display:block;font-size:11px;color:var(--sub);letter-spacing:.14em;margin-top:2px}

/* duotone photo treatment */
.duo{position:relative;overflow:hidden}
.duo img{width:100%;object-fit:cover;filter:grayscale(1) contrast(1.02) brightness(1.02)}
.duo::after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.35}
.photo-strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.photo-strip .duo img{height:230px}

/* ================= services (numbered document list) ================= */
.svc-list{border-top:1px solid var(--navy)}
.svc-item{display:grid;grid-template-columns:90px 1fr auto;gap:26px;align-items:baseline;padding:34px 4px;border-bottom:1px solid var(--rule);transition:background .3s}
.svc-item:hover{background:var(--white)}
.svc-item .no{font-family:var(--serif);font-size:13px;color:var(--accent);letter-spacing:.2em}
.svc-item h3{font-size:17.5px;margin-bottom:8px}
.svc-item p{font-size:13px;color:var(--sub);line-height:2.1}
.svc-item .to{font-size:11.5px;color:var(--navy);letter-spacing:.18em;white-space:nowrap;border-bottom:1px solid var(--navy);padding-bottom:3px}

/* ================= fee tables ================= */
.fee-table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--white)}
.fee-table caption{text-align:left;font-family:var(--serif);font-size:15.5px;color:var(--navy);padding-bottom:14px;letter-spacing:.1em}
.fee-table th,.fee-table td{border:1px solid var(--rule);padding:13px 18px;text-align:left;vertical-align:top}
.fee-table thead th{background:var(--navy);color:#fff;font-weight:500;letter-spacing:.1em;font-size:12.5px;border-color:var(--navy-d)}
.fee-table tbody th{background:#EEF1F1;font-weight:500;width:34%}
.fee-table .price{font-family:var(--serif);color:var(--navy);white-space:nowrap}
.fee-note{font-size:11.5px;color:var(--sub);margin-top:14px;line-height:2}
.fee-block{margin-bottom:56px}

/* ================= profile / chronology ================= */
.prof-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:54px;align-items:start}
.prof-photo{border:1px solid var(--rule);padding:10px;background:var(--white)}
.prof-photo .duo img{height:400px}
.prof-photo figcaption{font-size:11px;color:var(--sub);text-align:center;padding:12px 0 4px;letter-spacing:.14em}
.prof-body .greeting{font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:2.3;color:var(--navy);margin-bottom:26px}
.prof-body p{font-size:13.5px;color:#494f57;margin-bottom:16px;text-align:justify}
.prof-sign{text-align:right;margin-top:30px;font-family:var(--serif);font-size:16px;letter-spacing:.2em;color:var(--navy)}
.prof-sign small{display:block;font-family:var(--sans);font-size:10.5px;color:var(--sub);letter-spacing:.14em}
.chrono{border-left:2px solid var(--navy);margin-left:6px;padding-left:34px;margin-top:44px}
.chrono li{position:relative;padding:12px 0;font-size:13.5px;display:flex;gap:24px;align-items:baseline}
.chrono li::before{content:"";position:absolute;left:-39px;top:22px;width:8px;height:8px;background:var(--white);border:2px solid var(--navy)}
.chrono time{font-family:var(--serif);color:var(--accent);font-size:13px;letter-spacing:.08em;min-width:74px}

/* ================= flow (ordered doc) ================= */
.flow-doc{counter-reset:fl;border-top:1px solid var(--navy)}
.flow-doc li{counter-increment:fl;display:grid;grid-template-columns:64px 1fr;gap:26px;padding:30px 4px;border-bottom:1px solid var(--rule)}
.flow-doc li::before{content:"第" counter(fl) "段";font-family:var(--serif);color:var(--accent);font-size:13px;letter-spacing:.1em;padding-top:3px}
.flow-doc h3{font-size:16px;margin-bottom:6px}
.flow-doc p{font-size:13px;color:var(--sub)}
.flow-doc .chip{display:inline-block;border:1px solid var(--rule);background:var(--white);font-size:11px;color:var(--navy);padding:2px 12px;margin-left:10px;letter-spacing:.1em;vertical-align:middle}

/* ================= static QA ================= */
.qa{border-top:1px solid var(--navy)}
.qa dt{font-family:var(--serif);font-size:15px;color:var(--navy);padding:26px 4px 6px;letter-spacing:.08em}
.qa dt::before{content:"問　";color:var(--accent)}
.qa dd{font-size:13.5px;color:#494f57;padding:0 4px 26px 0;border-bottom:1px solid var(--rule);line-height:2.1}
.qa dd::before{content:"答　";color:var(--sub);font-family:var(--serif)}

/* ================= news list ================= */
.news-doc{border-top:1px solid var(--navy)}
.news-doc li{display:flex;gap:26px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--rule);font-size:13.5px}
.news-doc time{font-family:var(--serif);color:var(--accent);font-size:12.5px;letter-spacing:.06em;white-space:nowrap}
.news-doc .cat{font-size:10.5px;border:1px solid var(--rule);padding:1px 10px;color:var(--sub);white-space:nowrap;background:var(--white)}

/* ================= contact ================= */
.contact-panel{background:var(--white);border:1px solid var(--rule);padding:50px;position:relative}
.contact-panel::before{content:"";position:absolute;inset:6px;border:1px solid var(--silver);pointer-events:none}
.contact-panel .lead-serif{margin-bottom:34px}
.c-methods{display:grid;grid-template-columns:1fr 1fr;gap:34px;position:relative}
.c-method{text-align:center;padding:30px 20px;border:1px solid var(--rule)}
.c-method h3{font-size:15px;margin-bottom:12px}
.c-method .big{font-family:var(--serif);font-size:26px;color:var(--navy);letter-spacing:.04em;display:block;margin-bottom:6px}
.c-method p{font-size:11.5px;color:var(--sub)}
.c-method .btn-line{display:inline-flex;align-items:center;gap:10px;background:var(--line-green);color:#fff;padding:14px 36px;font-size:13.5px;letter-spacing:.1em;margin:8px 0 10px;transition:opacity .3s}
.c-method .btn-line:hover{opacity:.85}
.c-method .btn-line svg{width:17px;height:17px}
/* demo form */
.demo-form{margin-top:44px;border-top:1px dashed var(--rule);padding-top:40px}
.demo-form h3{font-size:15.5px;margin-bottom:22px}
.demo-form .row{display:grid;grid-template-columns:180px 1fr;gap:14px;margin-bottom:16px;align-items:center}
.demo-form label{font-size:13px;letter-spacing:.1em}
.demo-form label .req{font-size:10px;color:#B4372E;border:1px solid #B4372E;padding:0 6px;margin-left:8px}
.demo-form input,.demo-form textarea,.demo-form select{width:100%;border:1px solid var(--rule);background:var(--washi);padding:12px 14px;font-family:var(--sans);font-size:14px}
.demo-form input:focus,.demo-form textarea:focus{outline:none;border-color:var(--navy);background:#fff}
.demo-form button{margin-top:10px;background:var(--navy);color:#fff;padding:15px 60px;font-size:14px;letter-spacing:.2em;transition:background .3s}
.demo-form button:hover{background:var(--navy-d)}

/* ================= footer ================= */
.footer{border-top:1px solid var(--rule);background:var(--white);padding:36px 0;font-size:11.5px;color:var(--sub)}
.footer .inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline}
.footer .fx a{margin-right:22px}
.footer .fx a:hover{color:var(--navy);text-decoration:underline}
.f-sample{font-size:10.5px;line-height:2;margin-top:8px}
.f-sample a{text-decoration:underline;color:var(--accent)}

/* sample pill / toast */
.sample-pill{position:fixed;right:18px;bottom:18px;z-index:90;background:rgba(18,42,68,.94);color:#fff;border-radius:2px;padding:9px 16px;font-size:11px;letter-spacing:.06em;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sample-pill a{color:#E5C990;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,16px);background:var(--navy-d);color:#fff;font-size:13px;padding:14px 28px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:200;max-width:88vw;text-align:center;letter-spacing:.06em}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* subtle fade (headings only) */
.fd{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.fd.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .fd{opacity:1!important;transform:none!important}
}
@media (max-width:1000px){
  .sidebar{display:none}
  .main{margin-left:0}
  .mb-bar{display:flex}
  body{padding-top:64px}
  .inner{padding:0 24px}
  section{padding:64px 0}
  .hero{padding:70px 0 54px}
  .hero .actions{width:100%;flex-direction:column}
  .hero .actions a{justify-content:center}
  .data-strip{grid-template-columns:1fr}
  .data-strip .d + .d{border-left:none;border-top:1px solid var(--rule)}
  .photo-strip{grid-template-columns:1fr 1fr}
  .photo-strip .duo:first-child{grid-column:1/3}
  .svc-item{grid-template-columns:1fr;gap:8px}
  .prof-grid{grid-template-columns:1fr;gap:36px}
  .c-methods{grid-template-columns:1fr}
  .demo-form .row{grid-template-columns:1fr;gap:6px}
  .contact-panel{padding:30px 22px}
}