/* そらまど会計事務所（デモ）
   空色 #3876A8（白い字が読める濃さ。元は #4A90C2）× 白 × 濃紺 #1C2B4A。地は白と空色を交互に。角は丸めない
   書体: IBM Plex Sans JP 400/700、数字・日付は Inter 600
   あしらい: 窓枠（細い白の十字の線）を空色の区画の右上に1つだけ。表と暦は細い濃紺の線
   動き: 窓枠の線が引かれる／暦の日付が順に塗られる／報告の見本の行が上から並ぶ／1年の帯が左から入る */

:root {
  --sky: #3876A8;
  --sky-mid: #BFD8EC;
  --sky-pale: #EEF5FB;
  --navy: #1C2B4A;
  --navy-2: #43506B;
  --white: #FFFFFF;
  --rule: #C7D3E0;
  --jp: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --num: "Inter", "IBM Plex Sans JP", "Helvetica Neue", Arial, sans-serif;
  --head-h: 84px;
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0; background: var(--white); color: var(--navy);
  font-family: var(--jp); font-weight: 400;
  font-size: clamp(15px, .25vw + 14px, 17px); line-height: 1.85; letter-spacing: .02em;
  overflow-x: clip; word-break: auto-phrase;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
p + p { margin-top: .9em; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.4; font-feature-settings: "palt"; letter-spacing: .03em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
table { border-collapse: collapse; }
p, li, td, th, dd { text-wrap: pretty; }
.n { font-family: var(--num); font-weight: 600; letter-spacing: 0; font-feature-settings: "tnum"; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

/* ---------- 窓の印 ---------- */
.mado__pane { fill: var(--sky); }
.mado__frame { fill: none; stroke: var(--mado-line, var(--navy)); stroke-width: 2.6; }
.logo { display: block; width: 232px; height: 40px; overflow: visible; }
.logo__a, .logo__b { font-family: var(--jp); fill: var(--navy); }
.logo__a { font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.logo__b { font-size: 18px; font-weight: 400; letter-spacing: .06em; }
.logo--ft .logo__a, .logo--ft .logo__b { fill: var(--white); }
.logo--ft { --mado-line: var(--white); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 12px 28px; border: 1.5px solid var(--navy); border-radius: 0;
  font: 700 15px/1.4 var(--jp); letter-spacing: .06em; text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: #2B3E63; }
.btn--white { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--white:hover { background: var(--sky-pale); }
.btn--lg { min-height: 60px; padding-inline: 40px; font-size: 16px; }
.btn--line { background: var(--white); color: var(--navy); }
.btn--line:hover { background: var(--sky-pale); }
.btn__ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.more {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px;
  border-bottom: 1.5px solid var(--navy); color: var(--navy);
  font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: .04em;
}
.arw { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .3s var(--ease); }
.more:hover .arw, a:hover > .arw { transform: translateX(4px); }

/* ---------- ヘッダー ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--rule); }
.hd__in { display: flex; align-items: center; gap: 14px; height: var(--head-h); width: min(1320px, 100% - 40px); margin-inline: auto; }
.brand { display: block; flex: none; }
.demo { flex: none; padding: 0 5px; border: 1px solid var(--rule); font: 600 9px/1.6 var(--num); letter-spacing: .16em; color: var(--navy-2); }
.gnav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.gnav__list { display: flex; gap: 26px; }
.gnav__list a { position: relative; display: block; padding: 6px 0; font-size: 14.5px; font-weight: 700; text-decoration: none; letter-spacing: .04em; white-space: nowrap; }
.gnav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.gnav__list a:hover::after, .gnav__list a[aria-current="page"]::after { transform: scaleX(1); }
.gnav__list a[aria-current="page"] { color: var(--navy); }
.gnav__act { display: flex; align-items: center; gap: 18px; }
.tel { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; line-height: 1.25; white-space: nowrap; }
.tel__n { display: inline-flex; align-items: center; gap: 6px; font: 600 19px/1.2 var(--num); letter-spacing: .02em; }
.i-tel { width: .9em; height: .9em; flex: none; fill: currentColor; vertical-align: -.08em; }
.tel__h { font-size: 11.5px; color: var(--navy-2); }
.btn--hd { min-height: 48px; padding: 10px 20px; font-size: 14px; white-space: nowrap; }
.menu { display: none; }

@media (max-width: 1199px) {
  :root { --head-h: 68px; }
  .logo { width: 196px; height: 34px; }
  .menu {
    display: flex; flex-direction: column; align-items: center; gap: 4px; margin-left: auto;
    width: 56px; height: 56px; padding: 10px 0 0; border: 0; background: none; color: var(--navy); cursor: pointer;
  }
  .menu__bars { position: relative; display: block; width: 28px; height: 16px; }
  .menu__bars i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
  .menu__bars i:nth-child(1) { top: 0; } .menu__bars i:nth-child(2) { top: 7px; } .menu__bars i:nth-child(3) { top: 14px; }
  .menu__label { font: 600 10px/1 var(--num); letter-spacing: .14em; }
  .is-menu .menu__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .is-menu .menu__bars i:nth-child(2) { opacity: 0; }
  .is-menu .menu__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .gnav {
    position: fixed; top: var(--head-h); left: 0; right: 0; bottom: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 28px; margin: 0; padding: 20px 24px 40px;
    background: var(--white); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s;
  }
  .is-menu .gnav { visibility: visible; opacity: 1; transform: none; transition: opacity .3s, transform .3s var(--ease); }
  .gnav__list { flex-direction: column; gap: 0; }
  .gnav__list li { border-bottom: 1px solid var(--rule); }
  .gnav__list a { padding: 16px 4px; font-size: 16px; }
  .gnav__list a::after { display: none; }
  .gnav__list a[aria-current="page"] { color: var(--sky); }
  .gnav__list a[aria-current="page"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--sky); vertical-align: middle; }
  .gnav__act { flex-direction: column; align-items: stretch; gap: 16px; }
  .tel { align-items: flex-start; }
  .btn--hd { min-height: 56px; }
  .is-menu { overflow: hidden; }
}

/* ---------- 窓枠のあしらい ---------- */
.frame { position: absolute; top: 34px; right: max(24px, 5vw); width: clamp(120px, 15vw, 210px); aspect-ratio: 1; pointer-events: none; }
.frame i { position: absolute; display: block; }
@media (max-width: 640px) { .frame { width: 58px; top: 14px; right: 16px; } .cta .frame { top: -20px; } }
.frame__o { inset: 0; border: 1.5px solid rgba(255,255,255,.9); }
.frame__v { left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: rgba(255,255,255,.9); }
.frame__h { top: 50%; left: 0; right: 0; height: 1.5px; margin-top: -.75px; background: rgba(255,255,255,.9); }

/* ---------- 最初の画面 ---------- */
.hero { position: relative; background: var(--sky); color: var(--white); padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 7vw, 104px); }
.hero__in { position: relative; z-index: 1; }
.hero__text { max-width: 620px; }
.hero__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.hero__eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1.5px; margin-right: 12px; background: currentColor; vertical-align: middle; }
.hero__title { margin-top: 18px; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.32; letter-spacing: .02em; }
.hero__title > span { display: block; }
.hero__num { display: inline-block; margin: 0 .06em; font-size: 1.55em; line-height: 1; letter-spacing: -.02em; vertical-align: -.06em; }
.hero__lead { margin-top: 26px; max-width: 30em; font-size: clamp(15.5px, .35vw + 14.5px, 17.5px); line-height: 1.9; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__btns .btn--navy { border-color: var(--navy); }
.hero__photo {
  position: absolute; right: 0; bottom: clamp(-250px, -16vw, -150px); z-index: 2;
  width: 45%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky-pale);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero .frame { z-index: 0; }

@media (max-width: 1023px) {
  .hero { padding-bottom: 0; }
  .hero__photo { position: relative; bottom: auto; width: auto; margin: 40px 0 -64px 14%; aspect-ratio: 1344 / 768; }
  .hero__text { max-width: none; }
}

/* ---------- お知らせ ---------- */
.news { padding: 40px 0 36px; }
.p-top .news { padding-right: 0; }
.news__in { display: grid; grid-template-columns: 120px 1fr; gap: 0 32px; align-items: start; }
.p-top .news__in { padding-right: 47%; min-height: clamp(150px, 16vw, 250px); }
.news__h { font-size: 17px; letter-spacing: .1em; padding-top: 10px; }
.news__list li { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.news__list li:first-child { border-top: 1px solid var(--navy); }
.news__list time { color: var(--sky); font-size: 14px; padding-top: 2px; }
.news__more { grid-column: 2; margin-top: 14px; text-align: right; }
.news__more .more { font-size: 14px; }
@media (max-width: 1023px) {
  .p-top .news { padding-top: 104px; }
  .p-top .news__in { padding-right: 0; min-height: 0; }
}
@media (max-width: 640px) {
  .news__in { grid-template-columns: 1fr; }
  .news__more { grid-column: 1; }
  .news__list li { grid-template-columns: 1fr; gap: 0; }
}
.news--page { padding: clamp(56px, 7vw, 96px) 0; }

/* ---------- 区画の共通 ---------- */
.sec { position: relative; padding: clamp(64px, 8vw, 112px) 0; }
.sec--pale { background: var(--sky-pale); }
.sec--line { border-top: 1px solid var(--rule); }
.h2 { position: relative; font-size: clamp(24px, 1.6vw + 16px, 36px); padding-left: 0; }
.h2::before { content: ""; display: block; width: 14px; height: 14px; margin-bottom: 16px; background: var(--sky); box-shadow: 4px 4px 0 0 var(--white), 4px 4px 0 1.5px var(--navy); }
.sec--pale .h2::before { box-shadow: 4px 4px 0 0 var(--sky-pale), 4px 4px 0 1.5px var(--navy); }
.h2__sub { font-size: .6em; font-weight: 400; margin-left: .3em; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.sec-lead { font-size: clamp(16px, .4vw + 15px, 19px); font-weight: 700; }
.small-note { margin-top: 18px; font-size: 14px; color: var(--navy-2); }
.dg__t { font-weight: 700; font-size: 15px; letter-spacing: .06em; margin-bottom: 14px; }
.dg__note { margin-top: 14px; font-size: 13.5px; color: var(--navy-2); line-height: 1.7; }

/* ---------- KK-1 暦 ---------- */
.kk1 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; margin-top: 40px; padding: 36px; border: 1px solid var(--navy); align-items: center; }
.kk1__ttl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--navy); }
.kk1__case { font-weight: 700; font-size: 15px; }
.kk1__ym { font-size: 14px; }
.kk1__ym b { font-size: 18px; }
.kk1__ym .kk1__mo { font-size: 34px; line-height: 1; margin: 0 2px 0 6px; color: var(--sky); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__wd { padding: 8px 0 6px; text-align: center; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--rule); }
.cal__d { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 58px; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.cal__d b { position: relative; z-index: 1; font: 600 16px/1 var(--num); }
.cal__d small { position: relative; z-index: 1; font-size: 10px; margin-top: 4px; }
.cal__d.is-sun b, .cal__wd.is-sun { color: #3E6FA0; }
.cal__d::before { content: ""; position: absolute; inset: 3px 0; z-index: 0; }
.cal__d.is-send::before { background: var(--sky); }
.cal__d.is-send b, .cal__d.is-send small { color: var(--white); }
.cal__d.is-check::before { background: var(--sky-mid); }
.cal__d.is-report::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--navy); z-index: 0; }
.cal__d.is-report { align-items: center; justify-content: center; }
.cal__d.is-report b { color: var(--white); font-size: 18px; }
.cal__d.is-meet::before { inset: 3px 0; border: 0 solid var(--navy); }
.cal__d.m-t::before { border-top-width: 1.5px; }
.cal__d.m-b::before { border-bottom-width: 1.5px; }
.cal__d.m-l::before { border-left-width: 1.5px; }
.cal__d.m-r::before { border-right-width: 1.5px; }
.kk1__key ul { display: grid; gap: 16px; }
.kk1__key li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 14px; font-weight: 700; font-size: 15.5px; line-height: 1.5; }
.kk1__key i { display: block; width: 34px; height: 24px; }
.k-send i { background: var(--sky); }
.k-check i { background: var(--sky-mid); }
.k-report i { width: 24px; border-radius: 50%; background: var(--navy); margin-left: 5px; }
.k-meet i { border: 1.5px solid var(--navy); }
.kk1--big { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.kk1--big .cal__d { height: 76px; }
@media (max-width: 860px) {
  .kk1 { grid-template-columns: 1fr; gap: 28px; padding: 20px 16px; }
  .kk1--big { grid-template-columns: 1fr; }
  .cal__d, .kk1--big .cal__d { height: 50px; padding: 5px; }
  .cal__d b { font-size: 14px; }
  .cal__d.is-report::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}
.flow__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: 32px; }
.flow__foot p { max-width: 40em; }

/* ---------- KK-3 報告の見本 ---------- */
.deliver { background: var(--sky-pale); }
.deliver--rev { background: var(--white); }
.deliver__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.deliver__text .h2 { margin-bottom: 28px; }
.kk3 { position: relative; }
.paper {
  position: relative; padding: 32px 32px 26px; background: var(--white);
  box-shadow: 0 1px 2px rgba(28,43,74,.08), 0 14px 32px -12px rgba(28,43,74,.22);
  max-width: 540px;
}
.deliver--rev .paper { border: 1px solid var(--rule); margin-left: auto; }
.paper__mihon { position: absolute; top: 14px; right: 14px; padding: 0 8px; border: 1px solid var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.paper__ttl { font-weight: 700; font-size: 18px; letter-spacing: .06em; }
.paper__ttl span { margin-left: 14px; font-weight: 400; font-size: 14px; }
.paper__to { margin-top: 4px !important; padding-bottom: 14px; border-bottom: 2px solid var(--navy); font-size: 14px; }
.paper__t { width: 100%; margin-top: 10px; font-size: 14.5px; }
.paper__t caption { caption-side: top; text-align: right; font-size: 11.5px; color: var(--navy-2); padding-bottom: 4px; }
.paper__t th, .paper__t td { padding: 9px 6px; border-bottom: 1px solid var(--rule); }
.paper__t thead th { font-size: 12px; font-weight: 700; text-align: right; border-bottom: 1px solid var(--navy); white-space: nowrap; }
.paper__t tbody th { text-align: left; font-weight: 700; width: 18%; }
.paper__t tbody td { text-align: right; font-family: var(--num); font-weight: 600; font-feature-settings: "tnum"; }
.paper__t tbody td:last-child { background: var(--sky-pale); }
.paper__t .is-profit th, .paper__t .is-profit td { border-bottom: 1px solid var(--navy); }
.paper__t strong { font-weight: 800; font-size: 1.12em; }
.paper__note { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--rule); font-size: 14px; line-height: 1.7; }
.paper__note p + p { margin-top: 0; }
.paper__lbl { font-weight: 700; font-size: 12px; padding: 1px 8px; background: var(--navy); color: var(--white); align-self: start; }
.paper__next { margin-top: 14px !important; text-align: right; font-size: 12px; color: var(--navy-2); }
@media (max-width: 860px) {
  .deliver__in { grid-template-columns: 1fr; }
  .deliver--rev .kk3 { order: 2; }
  .paper { padding: 26px 16px 20px; }
  .paper__t { font-size: 13px; }
  .paper__t thead th { font-size: 10.5px; white-space: normal; }
}

/* ---------- お引き受けしていること ---------- */
.works__list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
.works__list li + li { border-left: 1px solid var(--rule); }
.works__list a { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; padding: 36px 32px 30px; text-decoration: none; transition: background-color .3s; }
.works__list a:hover { background: var(--sky-pale); }
.works__list h3 { margin-top: 20px; font-size: 20px; }
.works__list p { margin-top: 10px; font-size: 15px; color: var(--navy-2); }
.works__list .arw { margin-top: 22px; width: 26px; height: 26px; color: var(--sky); }
.ico { width: 52px; height: 52px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: miter; }
.works__sub { margin-top: 18px; text-align: right; font-size: 14px; }
.works__sub a { color: var(--navy-2); }
@media (max-width: 860px) {
  .works__list { grid-template-columns: 1fr; }
  .works__list li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .works__list a { grid-template-columns: 52px 1fr; grid-template-rows: auto auto; gap: 4px 20px; padding: 26px 4px; }
  .works__list .ico { grid-row: 1 / 3; }
  .works__list h3 { margin-top: 4px; font-size: 18px; }
  .works__list p { grid-column: 2; margin: 0; }
  .works__list .arw { position: absolute; right: 4px; top: 28px; margin: 0; }
  .works__sub { text-align: left; }
}

/* ---------- KK-2 顧問料の表 ---------- */
.fee-top { background: var(--sky-pale); }
.fee-top__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.fee-top__head p { margin: 22px 0 26px; }
.kk2__t { width: 100%; background: var(--white); border: 1px solid var(--navy); font-size: 15px; }
.kk2__t thead th { padding: 14px 12px; background: var(--sky); color: var(--white); font-size: 13.5px; font-weight: 700; line-height: 1.5; text-align: center; border-left: 1px solid rgba(255,255,255,.5); }
.kk2__t thead td { background: var(--sky); }
.kk2__t tbody th { padding: 18px 16px; text-align: left; font-weight: 700; white-space: nowrap; border-top: 1px solid var(--navy); }
.kk2__t tbody td { padding: 18px 12px; text-align: center; border-top: 1px solid var(--navy); border-left: 1px solid var(--rule); white-space: nowrap; }
.kk2__t tbody td .n { font-size: 1.15em; }
.kk2--big .kk2__t { font-size: 16.5px; }
.kk2--big .kk2__t tbody th, .kk2--big .kk2__t tbody td { padding-block: 26px; }
.kk2--big { margin-top: 36px; }
.kk2--nocap .dg__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 860px) {
  .fee-top__in { grid-template-columns: 1fr; }
  .kk2__t, .kk2__t tbody, .kk2__t tr { display: block; width: 100%; }
  .kk2__t thead { display: none; }
  .kk2__t tbody tr + tr { border-top: 1px solid var(--navy); }
  .kk2__t tbody th { display: block; padding: 12px 16px; background: var(--sky); color: var(--white); border: 0; }
  .kk2__t tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px !important; text-align: right; border: 0; border-top: 1px solid var(--rule); white-space: normal; }
  .kk2__t tbody td::before { content: attr(data-th); text-align: left; font-size: 13px; font-weight: 700; color: var(--navy-2); }
}

/* ---------- 所長から ---------- */
.director__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.director__text .h2 { margin-bottom: 30px; }
.voice { padding-left: 24px; border-left: 1.5px solid var(--sky); }
.sign { margin-top: 26px !important; font-size: 14.5px; }
.sign b { font-size: 19px; margin-right: 4px; }
.sign span { display: block; font-size: 13px; color: var(--navy-2); }
.director__text .more { margin-top: 28px; }
.director__photo, .greet__photo { position: relative; padding: 0 22px 22px 0; }
.director__photo::before, .greet__photo::before { content: ""; position: absolute; left: 22px; top: 22px; right: 0; bottom: 0; border: 1.5px solid var(--navy); }
.director__photo img, .greet__photo img { position: relative; width: 100%; aspect-ratio: 896 / 1024; object-fit: cover; }
@media (max-width: 860px) {
  .director__in { grid-template-columns: 1fr; }
  .director__photo { order: -1; max-width: 420px; }
}

/* ---------- ご相談の流れ・アクセス ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.steps::before { content: ""; position: absolute; left: 28px; right: calc((100% - 64px) / 3 - 28px); top: 28px; height: 1.5px; background: var(--navy); transform-origin: left; }
.steps li { position: relative; }
.steps__no { position: relative; display: grid; place-items: center; width: 56px; height: 56px; background: var(--white); border: 1.5px solid var(--navy); font-size: 22px; }
.steps li:first-child .steps__no { background: var(--sky); color: var(--white); border-color: var(--sky); }
.steps h3 { margin-top: 20px; font-size: 18px; }
.steps p { margin-top: 8px; font-size: 15px; color: var(--navy-2); }
.sec--pale .steps__no { background: var(--sky-pale); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 1.5px; height: auto; transform-origin: top; }
  .steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; }
  .steps__no { grid-row: 1 / 3; }
  .steps h3 { margin-top: 12px; }
}
.access__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-top: 56px; align-items: center; }
.access__info .btn { margin-top: 28px; }
.info { width: 100%; font-size: 15.5px; }
.info th, .info td { padding: 14px 4px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.info tr:first-child th, .info tr:first-child td { border-top: 1px solid var(--navy); }
.info th { width: 6.5em; font-weight: 700; white-space: nowrap; }
@media (max-width: 860px) { .access__in { grid-template-columns: 1fr; } }

/* ---------- KK-5 地図 ---------- */
.map { display: block; width: 100%; height: auto; font-family: var(--jp); }
.map__bg { fill: var(--sky-pale); }
.map__blocks rect { fill: var(--white); stroke: var(--rule); stroke-width: 1; }
.map__road { fill: none; stroke: var(--white); stroke-width: 18; }
.map__rail { fill: none; stroke: var(--navy); stroke-width: 6; }
.map__rail--tie { stroke: var(--white); stroke-width: 4; stroke-dasharray: 14 14; }
.map__station rect { fill: var(--navy); }
.map__station text { fill: var(--white); font-size: 15px; font-weight: 700; }
.map__bld { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.map__walk { fill: none; stroke: var(--sky); stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; }
.map__lbl { fill: var(--navy); font-size: 14px; }
.map__lbl--road { font-size: 13px; fill: var(--navy-2); }
.map__lbl--walk { font-weight: 700; fill: var(--sky); font-size: 15px; }
.map__lbl--office { font-weight: 700; font-size: 16px; }
.map__lbl--sub { font-size: 13px; }
.map__lbl--p { font-size: 12px; }
.map__tie { stroke: var(--navy); stroke-width: 1.5; }
.map__call rect { fill: var(--white); stroke: var(--navy); stroke-width: 1.5; }
.map__p rect { fill: var(--navy); }
.map__p text:first-of-type { fill: var(--white); font-family: var(--num); font-weight: 600; font-size: 13px; }
.map__p .map__lbl--p { fill: var(--navy); font-family: var(--jp); font-weight: 400; }
.kk5 { border: 1px solid var(--navy); }
@media (max-width: 640px) {
  .map__lbl--office { font-size: 20px; } .map__lbl--sub { font-size: 17px; }
  .map__station text { font-size: 20px; } .map__lbl--walk { font-size: 20px; }
  .map__lbl--p { font-size: 15px; } .map__lbl--road { font-size: 16px; }
  .cta .frame { display: none; }
}

/* ---------- 下層の頭 ---------- */
.phead { position: relative; background: var(--sky); color: var(--white); padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); overflow: hidden; }
.phead__in { position: relative; z-index: 1; }
.phead__text { max-width: 720px; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.crumb li + li::before { content: "／"; margin-right: 10px; opacity: .8; }
.crumb a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6); }
.phead__t { margin-top: 26px; font-size: clamp(32px, 3vw + 18px, 54px); letter-spacing: .04em; }
.phead__lead { margin-top: 20px; max-width: 34em; font-size: clamp(15.5px, .35vw + 14.5px, 18px); line-height: 1.9; }
.phead--photo .phead__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.phead--photo .phead__photo { position: relative; z-index: 2; margin-bottom: calc(-1 * clamp(48px, 6vw, 88px) - 56px); aspect-ratio: 4 / 3; overflow: hidden; }
.phead--photo .phead__photo img { width: 100%; height: 100%; object-fit: cover; }
.phead--photo { overflow: visible; margin-bottom: 56px; }
.phead--photo .frame { display: none; }
.phead--wide { padding-bottom: 0; }
.phead__band { position: relative; z-index: 1; width: min(1320px, 100% - 48px); margin: clamp(36px, 4vw, 56px) 0 0 auto; height: clamp(200px, 26vw, 380px); overflow: hidden; }
.phead__band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.phead__band--tall { height: clamp(220px, 32vw, 470px); }
.phead__band--tall img { object-position: 50% 50%; }
@media (max-width: 860px) {
  .phead--photo .phead__in { grid-template-columns: 1fr; gap: 32px; }
  .phead--photo .phead__photo { margin-left: 12%; margin-right: -24px; }
  .phead__band { width: calc(100% - 24px); }
}

/* ---------- 月次の顧問 ---------- */
.sched { margin-top: 40px; border-top: 1px solid var(--navy); }
.sched li { display: grid; grid-template-columns: 11em 9em 1fr; gap: 8px 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.sched__d { font-weight: 700; font-size: 17px; }
.sched__d .n { font-size: 26px; margin: 0 2px; }
.sched__who { justify-self: start; padding: 2px 12px; border: 1px solid var(--navy); font-size: 13.5px; font-weight: 700; }
.sched .is-key .sched__d { color: var(--sky); }
.sched .is-key .sched__who { background: var(--navy); color: var(--white); }
@media (max-width: 760px) {
  .sched li { grid-template-columns: auto 1fr; }
  .sched__txt { grid-column: 1 / -1; }
}
.sendlist { margin-top: 40px; border-top: 1px solid var(--navy); }
.sendlist li { display: grid; grid-template-columns: 52px 12em 1fr; gap: 8px 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.sendlist h3 { font-size: 18px; }
.sendlist__foot { margin-top: 24px; }
.sendlist__foot .more { margin-left: 6px; }
@media (max-width: 760px) {
  .sendlist li { grid-template-columns: 52px 1fr; }
  .sendlist p { grid-column: 1 / -1; }
}
.meet__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.meet__photo { position: relative; }
.meet__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.meet__photo::after { content: ""; position: absolute; left: -16px; bottom: -16px; width: 38%; height: 14px; background: var(--sky); }
.meet__text .h2 { margin-bottom: 26px; }
@media (max-width: 860px) { .meet__in { grid-template-columns: 1fr; } }

/* KK-4 1年の帯 */
.kk4 { margin-top: 44px; }
.yr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.yr__m { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.yr__ev { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 150px; padding: 0 4px 10px; position: relative; }
.yr__ev p { position: relative; padding: 6px 7px; background: var(--white); border: 1px solid var(--navy); font-size: 12px; font-weight: 700; line-height: 1.45; }
.yr__m.has-ev .yr__ev::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 10px; background: var(--navy); }
.yr__cell { display: flex; flex-direction: column; align-items: center; padding: 14px 2px 12px; border: 1px solid var(--navy); border-left-width: 0; background: var(--white); }
.yr__m:first-child .yr__cell { border-left-width: 1px; }
.yr__cell b { font-size: 15px; }
.yr__cell b .n { font-size: 22px; }
.yr__cell small { margin-top: 4px; font-size: 10.5px; color: var(--navy-2); white-space: nowrap; }
.yr__m.is-sky .yr__cell { background: var(--sky); color: var(--white); }
.yr__m.is-sky .yr__cell small, .yr__m.is-navy .yr__cell small { color: rgba(255,255,255,.92); }
.yr__m.is-navy .yr__cell { background: var(--navy); color: var(--white); }
.yr__m.is-navy .yr__ev p { background: var(--navy); color: var(--white); }
.year__foot { margin-top: 32px; max-width: 46em; }
@media (max-width: 1023px) {
  .yr { grid-template-columns: 1fr; align-items: stretch; }
  .yr__m { flex-direction: row-reverse; justify-content: flex-end; align-items: stretch; }
  .yr__cell { flex: none; width: 136px; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 6px; padding: 10px 12px; border-left-width: 1px; border-top-width: 0; }
  .yr__m:first-child .yr__cell { border-top-width: 1px; }
  .yr__ev { flex: 1; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 6px 0 6px 14px; border-bottom: 1px solid var(--rule); }
  .yr__m.has-ev .yr__ev::after { left: 0; top: 50%; bottom: auto; width: 14px; height: 1px; }
  .yr__ev p { font-size: 12.5px; }
}
.solo__in, .paperbook__in, .excl__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .solo__in, .paperbook__in, .excl__in { grid-template-columns: 1fr; } }

/* ---------- クラウド会計 ---------- */
.tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.tags li { position: relative; padding: 28px 26px 26px 54px; border: 1.5px solid var(--navy); background: var(--white); }
.tags li::before { content: ""; position: absolute; left: 22px; top: 34px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--navy); }
.tags li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--sky); }
.tags__name { font-weight: 700; font-size: 18px; line-height: 1.5; }
.tags li p + p { margin-top: 8px; font-size: 15px; color: var(--navy-2); }
.tags__foot { margin-top: 24px; max-width: 46em; }
@media (max-width: 960px) { .tags { grid-template-columns: 1fr; } }

.gantt { margin-top: 40px; background: var(--white); border: 1px solid var(--navy); }
.gantt__head, .gantt__rows li { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.gantt__head span { padding: 12px 16px; font-size: 14px; font-weight: 700; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--navy); }
.gantt__head span:first-child { border-left: 0; }
.gantt__head b { font-size: 18px; margin-right: 2px; }
.gantt__rows li { position: relative; border-bottom: 1px solid var(--rule); background-image: linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)); background-size: 1px 100%; background-repeat: no-repeat; background-position: 33.333% 0, 55.555% 0, 77.777% 0; }
.gantt__rows li:last-child { border-bottom: 0; }
.gantt__lbl { grid-column: 1; display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; padding: 22px 18px; }
.gantt__no { grid-row: 1 / 4; display: grid; place-items: center; width: 34px; height: 34px; background: var(--navy); color: var(--white); font-size: 15px; }
.gantt__lbl h3 { font-size: 17px; }
.gantt__when { display: none; }
.gantt__lbl p:last-child { font-size: 14.5px; color: var(--navy-2); margin-top: 4px; }
.gantt__bar { grid-row: 1; grid-column: calc(var(--s) + 1); align-self: center; height: 22px; margin: 0 14px; background: var(--sky); transform-origin: left; }
.gantt__rows li:nth-child(1) .gantt__bar { background: var(--sky-mid); }
.gantt__rows li:nth-child(4) .gantt__bar { background: var(--navy); }
.gantt__foot { margin-top: 20px; font-weight: 700; }
@media (max-width: 860px) {
  .gantt__head { display: none; }
  .gantt__rows li { display: block; background: none; }
  .gantt__when { display: block; justify-self: start; margin-top: 6px !important; padding: 0 10px; border: 1px solid var(--navy); font: 600 12.5px/1.8 var(--jp); }
  .gantt__bar { display: none; }
  .gantt__lbl { padding: 20px 16px; }
}

.receipt__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.receipt__text .h2 { margin-bottom: 26px; }
.receipt__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.line-box { margin-top: 32px; padding: 24px 26px; border: 1.5px solid var(--navy); background: var(--sky-pale); }
.line-box .btn { margin-top: 16px; }
.line-box__note { margin-top: 14px !important; font-size: 13px; color: var(--navy-2); }
@media (max-width: 860px) { .receipt__in { grid-template-columns: 1fr; } .receipt__photo { order: -1; } }

/* ---------- 料金 ---------- */
.fee__after { margin-top: 20px; }
.fee2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(32px, 5vw, 72px); align-items: start; }
.ptable { width: 100%; margin-top: 28px; background: var(--white); font-size: 15px; }
.ptable thead th { padding: 10px 14px; text-align: left; font-size: 13px; background: var(--navy); color: var(--white); }
.ptable thead th:last-child { text-align: right; }
.ptable tbody th { padding: 16px 14px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--rule); }
.ptable tbody td { padding: 16px 14px; text-align: right; font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--rule); }
@media (max-width: 960px) { .fee2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ptable { font-size: 14px; } .ptable tbody th, .ptable tbody td { padding-inline: 10px; } }
.excl__list li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--rule); }
.excl__list li:first-child { border-top: 1px solid var(--navy); }
.excl__list li::before { content: ""; position: absolute; left: 4px; top: 1.45em; width: 12px; height: 1.5px; background: var(--navy); }

/* ---------- 事務所と職員 ---------- */
.greet__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.greet__text .h2 { margin-bottom: 30px; }
@media (max-width: 860px) { .greet__in { grid-template-columns: 1fr; } .greet__photo { max-width: 400px; } }
.career { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px clamp(32px, 5vw, 80px); }
.career__list { position: relative; }
.career__list::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1.5px; background: var(--navy); transform-origin: top; }
.career__list li { position: relative; display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 10px 0 10px 32px; }
.career__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 12px; height: 12px; background: var(--sky); border: 1.5px solid var(--navy); }
.career__list li:last-child::before { background: var(--navy); }
.career__list .n { font-size: 16px; color: var(--sky); }
.career__belong { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; }
@media (max-width: 860px) { .career { grid-template-columns: 1fr; } }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair figcaption { margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--sky); font-size: 15px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* ---------- ご相談の申し込み ---------- */
.form-wrap { max-width: 860px; }
.form { margin-top: 36px; padding: clamp(24px, 4vw, 48px); background: var(--white); border: 1px solid var(--navy); }
.field { display: grid; grid-template-columns: 13em 1fr; gap: 8px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); margin: 0; }
fieldset.field { border: 0; border-bottom: 1px solid var(--rule); padding: 16px 0; min-width: 0; }
.field > label, .field legend { font-weight: 700; font-size: 15px; }
.field legend { float: left; width: 13em; padding: 0; }
.field--pair { display: block; }
.field--pair > div { display: grid; grid-template-columns: 5em 1fr; align-items: center; gap: 12px; margin-left: calc(13em + 24px); }
.field--pair > div + div { margin-top: 10px; }
.field--pair > div label { font-size: 14px; }
.req { display: inline-block; margin-left: 10px; padding: 0 6px; background: var(--navy); color: var(--white); font-size: 11px; font-weight: 700; vertical-align: 2px; }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #8C9AB0; border-radius: 0; background: var(--white);
  font: 400 16px/1.6 var(--jp); color: var(--navy);
}
textarea { resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.form.is-checked :invalid { border-color: #B23A3A; background-color: #FFF6F6; }
.field--agree { display: block; border-bottom: 0; padding-top: 24px; }
.field--agree label { display: flex; align-items: center; gap: 12px; font-weight: 400; cursor: pointer; }
.field--agree input { width: 22px; height: 22px; accent-color: var(--navy); }
.form__send { margin-top: 20px; text-align: center; }
.form__send p { margin-top: 14px; font-size: 14px; color: var(--navy-2); }
@media (max-width: 760px) {
  .field { grid-template-columns: 1fr; }
  .field legend { float: none; width: auto; margin-bottom: 8px; }
  .field--pair > div { margin-left: 0; }
}
.telbox__in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.telbox__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.telbox__n a { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(30px, 3vw + 14px, 46px); text-decoration: none; }
.faq { max-width: 960px; }
.faq__list { margin-top: 36px; border-top: 1px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--rule); background: var(--white); }
.faq summary { position: relative; display: grid; grid-template-columns: 36px 1fr 24px; gap: 14px; align-items: center; padding: 22px 20px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; justify-self: end; background: linear-gradient(var(--navy), var(--navy)) center / 14px 1.5px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 1.5px 14px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__q, .faq__a { display: grid; place-items: center; width: 36px; height: 36px; font-size: 16px; }
.faq__q { background: var(--sky); color: var(--white); }
.faq__a { border: 1.5px solid var(--navy); flex: none; }
.faq details p { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 0 20px 24px; }

/* ---------- 共通の空色の帯 ---------- */
.cta { position: relative; overflow: hidden; background: var(--sky); color: var(--white); padding: clamp(56px, 7vw, 96px) 0; }
.cta__in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.cta__t { font-weight: 700; font-size: clamp(22px, 1.6vw + 14px, 32px); line-height: 1.55; font-feature-settings: "palt"; }
.cta__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta__tel { display: inline-flex; align-items: center; gap: 8px; font: 600 clamp(22px, 1vw + 16px, 28px)/1.2 var(--num); text-decoration: none; white-space: nowrap; }
.cta .frame { top: auto; bottom: -40px; right: max(24px, 6vw); }
.cta .frame { top: -110px; bottom: auto; width: clamp(120px, 12vw, 170px); }

/* ---------- フッター ---------- */
.ft { background: var(--navy); color: var(--white); padding: 64px 0 28px; font-size: 14px; }
.ft__in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; }
.ft__logo { display: inline-block; margin-bottom: 22px; }
.ft__brand p + p { margin-top: 6px; }
.ft__who span { display: block; font-size: 12.5px; opacity: .85; }
.ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-content: start; }
.ft__nav a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.ft__copy { width: min(var(--wrap), 100% - 48px); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); font-size: 12px; opacity: .8; }
@media (max-width: 760px) { .ft__in { grid-template-columns: 1fr; } }

/* =================== 動き ===================
   隠すのは html.js のときだけ（JSなし・動きを減らす設定では最初から完成形） */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slideL { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.js .hero__eyebrow { animation: rise .7s var(--ease-out) .05s both; }
.js .hero__title > span { animation: rise .8s var(--ease-out) both; }
.js .hero__title > span:nth-child(1) { animation-delay: .15s; }
.js .hero__title > span:nth-child(2) { animation-delay: .3s; }
.js .hero__title > span:nth-child(3) { animation-delay: .45s; }
.js .hero__lead { animation: rise .8s var(--ease-out) .6s both; }
.js .hero__btns { animation: rise .8s var(--ease-out) .7s both; }
.js .hero__photo { animation: slideL 1s var(--ease-out) .3s both; }
.js .frame__o { animation: fade .9s var(--ease) .1s both; }
.js .frame__v { transform-origin: top; animation: drawY 1s var(--ease-out) .2s both; }
.js .frame__h { transform-origin: left; animation: drawX 1s var(--ease-out) .35s both; }
.js .phead__text > * { animation: rise .7s var(--ease-out) both; }
.js .phead__text > *:nth-child(2) { animation-delay: .1s; }
.js .phead__text > *:nth-child(3) { animation-delay: .2s; }
.js .phead__photo, .js .phead__band { animation: slideL 1s var(--ease-out) .2s both; }

.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .9s var(--ease-out); }
.js .rv.is-in { opacity: 1; transform: none; }

/* 暦: 日付が順に塗られる */
.js .kk1 .cal__d::before, .js .kk1 .cal__d.is-report::after { opacity: 0; transform: scaleX(.2); transform-origin: left; transition: opacity .35s var(--ease) calc(var(--i) * 30ms + .3s), transform .45s var(--ease-out) calc(var(--i) * 30ms + .3s); }
.js .kk1 .cal__d.is-report::after { transform: scale(.4); transform-origin: center; }
.js .kk1.is-in .cal__d::before, .js .kk1.is-in .cal__d.is-report::after { opacity: 1; transform: none; }
.js .kk1 .cal__d.is-send b, .js .kk1 .cal__d.is-send small, .js .kk1 .cal__d.is-report b { transition: color .3s calc(var(--i) * 30ms + .3s); color: var(--navy); }
.js .kk1.is-in .cal__d.is-send b, .js .kk1.is-in .cal__d.is-send small, .js .kk1.is-in .cal__d.is-report b { color: var(--white); }
.js .kk1__key li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.js .kk1.is-in .kk1__key li { opacity: 1; transform: none; }
.js .kk1.is-in .kk1__key li:nth-child(1) { transition-delay: .4s; }
.js .kk1.is-in .kk1__key li:nth-child(2) { transition-delay: .65s; }
.js .kk1.is-in .kk1__key li:nth-child(3) { transition-delay: .85s; }
.js .kk1.is-in .kk1__key li:nth-child(4) { transition-delay: 1s; }

/* 報告の見本: 行が上から並ぶ */
.js .kk3 .paper__t tbody tr { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) calc(var(--r) * 140ms + .35s), transform .6s var(--ease-out) calc(var(--r) * 140ms + .35s); }
.js .kk3 .paper__note { opacity: 0; transition: opacity .6s var(--ease) 1.1s; }
.js .kk3.is-in .paper__t tbody tr, .js .kk3.is-in .paper__note { opacity: 1; transform: none; }

/* 1年の帯: 左から順に */
.js .kk4 .yr__m { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease) calc(var(--i) * 70ms), transform .6s var(--ease-out) calc(var(--i) * 70ms); }
.js .is-in .kk4 .yr__m { opacity: 1; transform: none; }

/* 工程の線・ガントの棒・経歴の線 */
.js .steps::before { transform: scaleX(0); transition: transform 1.2s var(--ease-out) .2s; }
.js .is-in .steps::before { transform: scaleX(1); }
@media (max-width: 860px) {
  .js .steps::before { transform: scaleY(0); }
  .js .is-in .steps::before { transform: scaleY(1); }
}
.js .gantt__bar { transform: scaleX(0); transition: transform .8s var(--ease-out) calc(var(--i) * 180ms + .3s); }
.js .gantt.is-in .gantt__bar { transform: scaleX(1); }
.js .career__list::before { transform: scaleY(0); transition: transform 1.2s var(--ease-out) .2s; }
.js .is-in .career__list::before { transform: scaleY(1); }

/* 地図: 道順と事務所の印 */
.js .kk5 .map__walk { opacity: 0; transition: opacity .9s var(--ease) .4s; }
.js .kk5 .map__office { opacity: 0; transform: translateY(-8px); transform-box: fill-box; transition: opacity .6s var(--ease) .9s, transform .7s var(--ease-out) .9s; }
.js .is-in .kk5 .map__walk, .js .kk5.is-in .map__walk { opacity: 1; }
.js .is-in .kk5 .map__office, .js .kk5.is-in .map__office { opacity: 1; transform: none; }

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