/* ============================================================
   たてやま司法書士事務所 | HP + 相続LP
   palette: washi #f5f0e8 / ink #212121 / vermillion #db3356
   ============================================================ */
:root{
  --paper:#f5f0e8;
  --paper-2:#ede5d5;
  --ink:#212121;
  --ink-soft:#5a544a;
  --vermil:#db3356;
  --vermil-deep:#a3162f;
  --line:rgba(33,33,33,.28);
  --line-soft:rgba(33,33,33,.13);
  --font-s:"Noto Serif JP",serif;
  --font-e:"Cormorant Garamond","Noto Serif JP",serif;
  --font-b:"Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;line-height:1.9;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--vermil);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--vermil-deep);outline-offset:3px}

.wrap{width:min(100% - 48px,1160px);margin-inline:auto}
.en{font-family:var(--font-e);letter-spacing:.22em;text-transform:uppercase}

/* ---------- vertical lines motif ---------- */
.vlines{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:space-between;padding:0 8vw}
.vlines i{width:1px;background:var(--line-soft);transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease)}
.vlines.is-in i{transform:scaleY(1)}
.vlines i:nth-child(2){transition-delay:.1s}
.vlines i:nth-child(3){transition-delay:.2s}
.vlines i:nth-child(4){transition-delay:.3s}
.vlines i:nth-child(5){transition-delay:.4s}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line-soft);transition:box-shadow .3s ease}
.header.is-scrolled{box-shadow:0 1px 12px rgba(33,33,33,.08)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;flex-direction:column;line-height:1.4}
.logo strong{font-family:var(--font-s);font-weight:600;font-size:19px;letter-spacing:.06em}
.logo small{font-family:var(--font-e);font-size:9.5px;letter-spacing:.26em;color:var(--ink-soft);text-transform:uppercase}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-size:13.5px;letter-spacing:.06em;padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--vermil);transition:width .3s ease}
.nav a:hover::after{width:100%}
.nav a[aria-current]{color:var(--vermil-deep)}
.nav .btn-lp{background:var(--vermil);color:#fff;padding:12px 24px;font-size:13px;letter-spacing:.1em;transition:background .3s ease}
.nav .btn-lp:hover{background:var(--vermil-deep)}
.nav .btn-lp::after{display:none}
.menu-btn{display:none;flex-direction:column;gap:6px;padding:10px}
.menu-btn i{display:block;width:26px;height:1.5px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
.menu-btn.is-open i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn.is-open i:nth-child(2){opacity:0}
.menu-btn.is-open i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:110px 0 0;overflow:hidden}
.hero-center{text-align:center;position:relative;z-index:1}
.hero-center .en{font-size:11px;color:var(--vermil-deep);display:block;margin-bottom:26px}
.hero-title{font-family:var(--font-s);font-weight:600;font-size:clamp(34px,5vw,60px);line-height:1.6;letter-spacing:.05em}
.hero-lead{margin:30px auto 0;max-width:52ch;color:var(--ink-soft);font-size:15px}
.hero-cta{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 34px;font-size:14px;letter-spacing:.1em;min-height:52px;border:1px solid var(--ink);transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn-vermil{background:var(--vermil);border-color:var(--vermil);color:#fff}
.btn-vermil:hover{background:var(--vermil-deep);border-color:var(--vermil-deep)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.hero-img{margin:80px auto 0;width:min(100% - 48px,960px);position:relative}
.hero-img img{width:100%;height:clamp(300px,44vw,480px);object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.hero-img.is-in img{transform:scale(1)}
.hero-img figcaption{position:absolute;right:0;bottom:-28px;font-family:var(--font-e);font-size:10px;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase}

/* ---------- trust band (dark) ---------- */
.band{background:var(--ink);color:var(--paper);padding:72px 0;margin-top:100px}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.band-grid b{font-family:var(--font-e);font-weight:400;font-size:clamp(34px,4vw,52px);display:block;letter-spacing:.04em}
.band-grid b small{font-size:.45em;margin-left:.15em}
.band-grid span{font-size:12.5px;color:#b9b2a4;letter-spacing:.08em}
.band-grid .vb{color:var(--vermil)}

/* ---------- section w/ sticky side ---------- */
.sec{padding:110px 0;border-bottom:1px solid var(--line-soft);position:relative}
.sec-grid{display:grid;grid-template-columns:300px 1fr;gap:64px}
.sec-side{position:sticky;top:130px;align-self:start}
.sec-side .en{font-size:10.5px;color:var(--vermil-deep);display:block;margin-bottom:16px}
.sec-side h2{font-family:var(--font-s);font-weight:600;font-size:clamp(26px,2.8vw,36px);line-height:1.6;letter-spacing:.04em}
.sec-side p{margin-top:20px;font-size:13.5px;color:var(--ink-soft)}
.sec-body{min-width:0}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.svc{background:var(--paper);padding:40px 36px;transition:background .35s ease,transform .35s var(--ease);position:relative}
.svc:hover{background:var(--paper-2);transform:translateY(-4px)}
.svc .en{font-size:10px;color:var(--vermil-deep);display:block;margin-bottom:14px}
.svc h3{font-family:var(--font-s);font-weight:600;font-size:20px;letter-spacing:.04em;margin-bottom:12px}
.svc p{font-size:13.5px;color:var(--ink-soft)}
.svc .price{margin-top:18px;font-family:var(--font-e);font-size:15px;color:var(--vermil-deep);letter-spacing:.08em}

/* ---------- rows (news / price) ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--line-soft);transition:background .3s ease}
a.row:hover{background:var(--paper-2)}
.row .en{font-size:12px;color:var(--vermil-deep)}
.row p{font-size:14.5px}
.row .arr{color:var(--ink-soft);font-size:13px}

/* ---------- about / profile ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>.split-img{order:2}
.split-img{overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.split-img.is-in img{transform:scale(1)}
.split-txt h3{font-family:var(--font-s);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.7;margin-bottom:20px;letter-spacing:.04em}
.split-txt p{font-size:14.5px;color:var(--ink-soft)}
.split-txt p+p{margin-top:1em}
.profile-name{margin-top:28px;font-family:var(--font-s);font-size:18px}
.profile-name small{display:block;font-family:var(--font-e);font-size:10px;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase;margin-top:6px}

/* ---------- flow ---------- */
.flow{counter-reset:step}
.flow-item{display:grid;grid-template-columns:88px 1fr;gap:28px;padding:32px 0;border-bottom:1px solid var(--line-soft)}
.flow-item::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-e);font-size:30px;color:var(--vermil);letter-spacing:.06em;
}
.flow-item h3{font-family:var(--font-s);font-weight:600;font-size:18px;margin-bottom:8px;letter-spacing:.04em}
.flow-item p{font-size:14px;color:var(--ink-soft)}

/* ---------- access / contact ---------- */
.info-table{border-top:1px solid var(--line)}
.info-table div{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:16px 4px;border-bottom:1px solid var(--line-soft);font-size:14px}
.info-table dt{color:var(--ink-soft);letter-spacing:.06em}
.map{margin-top:32px;border:1px solid var(--line-soft)}
.map iframe{width:100%;height:360px;border:0;display:block;filter:grayscale(1) sepia(.12)}
.tel-box{background:var(--paper-2);border:1px solid var(--line-soft);padding:44px;text-align:center}
.tel-box .en{font-size:10.5px;color:var(--vermil-deep);display:block;margin-bottom:14px}
.tel-box a.tel{font-family:var(--font-e);font-size:clamp(30px,4vw,44px);letter-spacing:.06em;color:var(--ink)}
.tel-box a.tel:hover{color:var(--vermil-deep)}
.tel-box p{margin-top:12px;font-size:13px;color:var(--ink-soft)}

/* ---------- footer ---------- */
.footer{position:relative;background:var(--ink);color:#d9d2c4;padding:90px 0 44px;overflow:hidden}
.footer .vlines i{background:rgba(245,240,232,.09)}
.footer-grid{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;position:relative;z-index:1}
.footer .logo strong{color:var(--paper)}
.footer .logo small{color:#8d8678}
.footer-nav{display:flex;gap:56px;flex-wrap:wrap}
.footer-nav h4{font-family:var(--font-e);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#8d8678;margin-bottom:16px;font-weight:400}
.footer-nav a{display:block;font-size:13.5px;padding:5px 0;transition:color .3s ease}
.footer-nav a:hover{color:var(--vermil)}
.footer-bottom{margin-top:64px;padding-top:24px;border-top:1px solid rgba(245,240,232,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:#8d8678;position:relative;z-index:1}

/* ============================================================
   LP
   ============================================================ */
.lp-hero{position:relative;min-height:88dvh;display:flex;align-items:center;color:var(--paper);overflow:hidden}
.lp-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.8s var(--ease)}
.lp-hero.is-in img.bg{transform:scale(1)}
.lp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,14,.82) 0%,rgba(20,16,14,.55) 55%,rgba(20,16,14,.25) 100%)}
.lp-hero-in{position:relative;z-index:1;padding:120px 0}
.lp-badge{display:inline-block;background:var(--vermil);color:#fff;font-size:12px;letter-spacing:.16em;padding:8px 18px;margin-bottom:28px}
.lp-title{font-family:var(--font-s);font-weight:600;font-size:clamp(32px,4.6vw,56px);line-height:1.6;letter-spacing:.05em}
.lp-lead{margin-top:26px;max-width:50ch;font-size:15px;color:#e8e1d3}
.lp-hero .hero-cta{justify-content:flex-start}
.lp-note{margin-top:22px;font-size:12px;color:#c9c1b1;letter-spacing:.06em}

.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.check{background:var(--paper);padding:32px 28px;font-size:14px;display:flex;gap:14px;align-items:flex-start}
.check::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:4px;border:1.5px solid var(--vermil);background:
  linear-gradient(45deg,transparent 55%,var(--vermil) 55%,var(--vermil) 65%,transparent 65%);position:relative}
.check b{display:block;font-family:var(--font-s);font-weight:600;margin-bottom:4px}
.check span{color:var(--ink-soft);font-size:13px}

.risk{background:var(--paper-2)}
.risk-list li{list-style:none;display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);font-size:14.5px;align-items:baseline}
.risk-list li:last-child{border-bottom:0}
.risk-list .en{color:var(--vermil-deep);font-size:12px;flex-shrink:0}

.price-table{border-top:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.price-row h3{font-family:var(--font-s);font-weight:600;font-size:17px;letter-spacing:.04em}
.price-row small{display:block;font-family:var(--font-b);font-size:12.5px;color:var(--ink-soft);margin-top:6px;letter-spacing:0}
.price-row b{font-family:var(--font-e);font-weight:400;font-size:22px;color:var(--vermil-deep);white-space:nowrap;letter-spacing:.04em}
.price-row b i{font-style:normal;font-size:12px;font-family:var(--font-b);color:var(--ink-soft);margin-left:6px}
.price-note{margin-top:18px;font-size:12px;color:var(--ink-soft)}

.voice{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.voice blockquote{background:var(--paper-2);padding:32px 28px;font-size:13.5px;color:var(--ink);position:relative}
.voice blockquote::before{content:"“";font-family:var(--font-e);font-size:44px;color:var(--vermil);display:block;line-height:.8;margin-bottom:14px}
.voice figcaption{margin-top:16px;font-size:12px;color:var(--ink-soft);letter-spacing:.06em}

.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;text-align:left;font-family:var(--font-s);font-weight:600;font-size:16px;letter-spacing:.04em;min-height:56px}
.faq-q .ic{color:var(--vermil);font-size:20px;flex-shrink:0;transition:transform .3s var(--ease)}
.faq-item.is-open .faq-q .ic{transform:rotate(45deg)}
.faq-a{height:0;overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.faq-a p{padding:0 4px 24px;font-size:14px;color:var(--ink-soft)}

/* form */
.form-sec{background:var(--ink);color:var(--paper)}
.form-sec .sec-side .en{color:var(--vermil)}
.form-sec .sec-side p{color:#b9b2a4}
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.f-field{display:flex;flex-direction:column;gap:8px}
.f-field.full{grid-column:1/-1}
.f-label{font-size:13px;letter-spacing:.08em}
.f-label .req{color:var(--vermil);font-size:11px;margin-left:8px;letter-spacing:.06em}
.f-input,select.f-input,textarea.f-input{
  background:transparent;border:1px solid rgba(245,240,232,.35);color:var(--paper);
  padding:14px 16px;font:inherit;font-size:14.5px;transition:border-color .3s ease;
  border-radius:0;
}
.f-input::placeholder{color:#8d8678}
.f-input:focus{outline:none;border-color:var(--vermil)}
.f-field.is-error .f-input{border-color:#ff6f8d}
.f-err{font-size:12px;color:#ff9fb2;display:none}
.f-field.is-error .f-err{display:block}
select.f-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
select.f-input option{color:var(--ink)}
.f-submit{grid-column:1/-1;margin-top:8px}
.f-submit .btn{width:100%;font-size:15px;padding:20px}
.f-note{grid-column:1/-1;font-size:11.5px;color:#8d8678;text-align:center}
.f-success{grid-column:1/-1;text-align:center;padding:56px 24px;border:1px solid var(--vermil);display:none}
.f-success.is-show{display:block}
.f-success h3{font-family:var(--font-s);font-size:22px;margin-bottom:14px;color:#fff}
.f-success p{font-size:13.5px;color:#d9d2c4}

.fixed-tel{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--vermil);color:#fff;text-align:center;padding:16px;font-size:15px;letter-spacing:.08em}
.fixed-tel b{font-family:var(--font-e);letter-spacing:.06em}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .sec-grid{grid-template-columns:1fr;gap:36px}
  .sec-side{position:static}
  .band-grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev>.split-img{order:0}
  .check-grid{grid-template-columns:1fr}
  .voice{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media(max-width:860px){
  .nav{
    position:fixed;inset:0;background:var(--paper);z-index:55;
    flex-direction:column;justify-content:center;gap:26px;
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
  }
  .nav.is-open{opacity:1;visibility:visible}
  .nav a{font-size:18px}
  .menu-btn{display:flex;z-index:56;position:relative}
  .row{grid-template-columns:100px 1fr;gap:16px}
  .row .arr{display:none}
}
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .flow-item{grid-template-columns:56px 1fr;gap:18px}
  .flow-item::before{font-size:22px}
  .info-table div{grid-template-columns:1fr;gap:4px}
  .hero{padding-top:72px}
  .fixed-tel{display:block}
  body.is-lp{padding-bottom:60px}
  .band{margin-top:64px}
  .sec{padding:72px 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .vlines i{transform:scaleY(1)}
}

/* lining figures: 電話番号・料金など機能的な数字は等揃いに */
body{font-feature-settings:"palt" 1,"lnum" 1}