@charset "UTF-8";
/* ============================================================
   AOKI TAX OFFICE — style.css
   デザイン憲法 v2（2026-07-31 全面刷新）
   アンカー: 荻野鷹也税理士事務所（実測踏襲）
   アクセント: 早川総合法律事務所（縦組み・左右分割） / 東京共同会計事務所（金）
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
  /* color */
  --paper:      #FFFFFF;
  --paper-2:    #F4F4F1;
  --navy:       #073061;
  --navy-deep:  #05224A;
  --blue:       #1D4E89;
  --ink:        #222222;
  --ink-2:      #63635F;
  --ink-3:      #74746F;   /* WCAG AA (4.6:1 on paper) — 小さいラベルにも使うため薄くしない */
  --gold:       #B8963E;
  --gold-l:     #D4B366;
  --line:       #DCDCD6;
  --line-dark:  rgba(255,255,255,.22);
  --white:      #FFFFFF;
  --error:      #A33227;

  /* z-index scale */
  --z-cta: 55; --z-logo: 60; --z-nav: 70; --z-menu: 80; --z-fade: 200; --z-skip: 300;

  /* type */
  --font-ja:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en:     "Inter", "Helvetica Neue", Arial, sans-serif;

  /* space */
  --gap-s: 160px;
  --gap-m: 180px;
  --gap-l: 210px;
  --container: 1010px;
  --edge: 95px;

  /* motion */
  --ease-anchor: cubic-bezier(0, .56, .44, 1);
  --ease-expo:   cubic-bezier(.19, 1, .22, 1);
}

@media (max-width: 1023px) {
  :root { --gap-s: 110px; --gap-m: 124px; --gap-l: 144px; --edge: 40px; }
}
@media (max-width: 767px) {
  :root { --gap-s: 80px; --gap-m: 90px; --gap-l: 105px; --edge: 24px; }
}

/* ------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip を使う（hidden は overflow-y を auto に昇格させ、sticky/慣性スクロールを壊す） */
  overflow-x: hidden;
  overflow-x: clip;
  /* 禁則（日本語の行末孤立を防ぐ） */
  line-break: strict;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; border: none; background: none; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; top: -200%; left: 16px;
  background: var(--navy); color: var(--white);
  padding: 10px 18px; z-index: var(--z-skip); font-size: 13px;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ------------------------------------------------------------
   3. Utilities
   ------------------------------------------------------------ */
.inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); }

.gap-s { margin-bottom: var(--gap-s); }
.gap-m { margin-bottom: var(--gap-m); }
.gap-l { margin-bottom: var(--gap-l); }

/* 縦組み（PC/タブレットのみ・SPは横組みへ） */
.tate {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-orientation: upright;
  font-feature-settings: "vkrn" 1;
}
@media (max-width: 767px) {
  .tate { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; text-orientation: mixed; -webkit-text-orientation: mixed; }
}

/* reveal（アンカーの人格: 1.2s cubic-bezier(0,.56,.44,1)） */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--ease-anchor), transform 1.2s var(--ease-anchor);
  will-change: opacity, transform;
}
html.js-ready .reveal.is-in,
.reveal.is-in { opacity: 1; transform: translateY(0); }

.reveal-child > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s var(--ease-anchor), transform 1.1s var(--ease-anchor);
}
.reveal-child.is-in > * { opacity: 1; transform: translateY(0); }
.reveal-child.is-in > *:nth-child(1) { transition-delay: 0s; }
.reveal-child.is-in > *:nth-child(2) { transition-delay: .08s; }
.reveal-child.is-in > *:nth-child(3) { transition-delay: .16s; }
.reveal-child.is-in > *:nth-child(4) { transition-delay: .24s; }
.reveal-child.is-in > *:nth-child(5) { transition-delay: .32s; }
.reveal-child.is-in > *:nth-child(6) { transition-delay: .40s; }
.reveal-child.is-in > *:nth-child(7) { transition-delay: .48s; }
.reveal-child.is-in > *:nth-child(8) { transition-delay: .56s; }

/* 文字分割（FVスローガン） */
.split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(-.35em);
  transition: opacity .9s var(--ease-anchor), transform 1.6s var(--ease-anchor);
}
.split.is-in .ch { opacity: 1; transform: translateY(0); }
[data-split-row] { display: block; }

/* ------------------------------------------------------------
   4. Components
   ------------------------------------------------------------ */
/* 小見出し帯（18px / ls .12em / 罫線つき） */
.band {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 18px;
  letter-spacing: .12em;
  line-height: 1.8;
  color: var(--ink);
  font-weight: 400;
}
.band::before {
  content: "";
  width: 44px; height: 1px;
  background: var(--gold);
  flex: none;
}
.band--light { color: var(--white); }
.band--light::before { background: var(--gold-l); }
@media (max-width: 767px) { .band { font-size: 15px; gap: 12px; } .band::before { width: 28px; } }

/* 欧文見出し */
.h-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--ink);
}
.h-en--sm { font-size: 20px; }
.h-en--light { color: var(--white); }
@media (max-width: 767px) { .h-en { font-size: 20px; } .h-en--sm { font-size: 17px; } }

/* 欧文キッカー（極小ラベル） */
.kicker {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--blue);
  text-transform: uppercase;
}
.kicker--gold { color: var(--gold); }
.kicker--light { color: var(--gold-l); }

/* 和文見出し（明朝・ls .2em） */
.h-ja {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .2em;
  line-height: 1.9;
  color: var(--ink);
}
.h-ja--lg { font-size: 29px; line-height: 1.9; letter-spacing: .16em; }
.h-ja--light { color: var(--white); }
@media (max-width: 1023px) { .h-ja { font-size: 22px; letter-spacing: .14em; } .h-ja--lg { font-size: 26px; } }
@media (max-width: 767px)  { .h-ja { font-size: 19px; letter-spacing: .1em; line-height: 1.95; } .h-ja--lg { font-size: 21px; } }

/* 本文 */
.lede { font-size: 15px; line-height: 2.1; letter-spacing: .04em; color: var(--ink); }
.lede--muted { color: var(--ink-2); }
@media (max-width: 767px) { .lede { font-size: 14px; line-height: 2; } }

/* View More（塗らない・下線が伸びる） */
.more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--blue);
  position: relative;
  padding-bottom: 8px;
}
.more::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .6s var(--ease-expo);
}
.more:hover::after { transform: scaleX(.4); }
.arw {
  display: inline-block;
  width: 26px; height: 1px; background: currentColor; position: relative;
  transition: width .6s var(--ease-expo);
  flex: none;
}
.arw::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.more:hover .arw, .fixed-cta:hover .arw { width: 40px; }
.more--light { color: var(--gold-l); }

/* 主CTA（金の塗り・唯一の塗りボタン） */
.btn-gold {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 14px;
  min-width: 280px;
  padding: 22px 40px;
  background: var(--gold);
  color: var(--white);
  font-size: 14px;
  letter-spacing: .16em;
  border-radius: 0;
  transition: background .6s var(--ease-expo), color .6s var(--ease-expo);
}
.btn-gold:hover { background: var(--navy); color: var(--white); }
.btn-gold--line {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.btn-gold--line:hover { background: var(--navy); color: var(--white); }
.btn-gold--onnavy { background: var(--gold); color: var(--white); }
.btn-gold--onnavy:hover { background: var(--white); color: var(--navy); }
@media (max-width: 767px) {
  .btn-gold { min-width: 0; width: 100%; padding: 20px 24px; font-size: 13px; letter-spacing: .12em; }
}

/* 罫線 */
.rule { height: 1px; background: var(--line); border: 0; }

/* ------------------------------------------------------------
   5. 固定要素（アンカー準拠: 名刺ブロック / ハンバーガー / 相談ボタン）
   ------------------------------------------------------------ */
.site-logo {
  position: fixed;
  top: 0; left: var(--edge);
  z-index: 60;
  width: 144px;
  padding: 26px 0 30px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  transition: transform .8s var(--ease-anchor), opacity .8s var(--ease-anchor);
}
.site-logo__mark {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: block;
}
.site-logo__ja {
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: .38em;
  line-height: 1.9;
  display: inline-block;
}
.site-logo__en {
  display: block;
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold-l);
  line-height: 1.6;
}
.site-logo.is-min { transform: translateY(-14px) scale(.86); }
@media (max-width: 1023px) {
  .site-logo {
    left: 0; right: 0; width: 100%;
    padding: 12px 20px; display: flex; align-items: center; gap: 12px;
    text-align: left;
  }
  .site-logo__mark { width: 34px; height: 34px; margin: 0; }
  .site-logo__ja { font-size: 13px; letter-spacing: .18em; }
  .site-logo__en { display: none; }
  .site-logo.is-min { transform: none; }
  /* 紺のヘッダーバー上に重なるため白抜きにする */
  .menu-btn__bar { background: var(--white); }
  .menu-btn { top: 15px; }
}

.menu-btn {
  position: fixed;
  top: 34px; right: var(--edge);
  z-index: 80;
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
}
.menu-btn__bar {
  display: block; width: 30px; height: 1px; background: var(--ink);
  transition: transform .6s var(--ease-expo), opacity .3s ease, background .3s ease;
}
.menu-btn__label {
  position: absolute; right: 54px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-en); font-size: 10px; letter-spacing: .18em; color: var(--ink);
  white-space: nowrap;
}
.menu-btn.is-open .menu-btn__bar { background: var(--white); }
.menu-btn.is-open .menu-btn__bar:nth-child(2) { transform: translateY(5px) rotate(20deg); }
.menu-btn.is-open .menu-btn__bar:nth-child(3) { opacity: 0; }
.menu-btn.is-open .menu-btn__bar:nth-child(4) { transform: translateY(-5px) rotate(-20deg); }
.menu-btn.is-open .menu-btn__label { color: var(--white); }
@media (max-width: 1023px) { .menu-btn { top: 12px; right: 12px; } .menu-btn__label { display: none; } }

.nav {
  position: fixed; inset: 0;
  z-index: 70;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .8s var(--ease-anchor), visibility .8s;
  overflow-y: auto;
}
.nav.is-open { opacity: 1; visibility: visible; }
.nav__inner {
  width: 100%;
  max-width: 1010px;
  margin: 0 auto;
  padding: 120px var(--edge) 80px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 60px;
}
.nav__list li { border-bottom: 1px solid var(--line-dark); }
.nav__list a {
  display: flex; align-items: baseline; gap: 20px;
  padding: 22px 4px;
  transition: padding .6s var(--ease-expo), color .6s var(--ease-expo);
}
.nav__list a:hover { padding-left: 18px; color: var(--gold-l); }
.nav__num { font-family: var(--font-en); font-size: 11px; letter-spacing: .16em; color: var(--gold-l); }
.nav__ja { font-family: var(--font-mincho); font-size: 21px; letter-spacing: .18em; }
.nav__en { font-family: var(--font-en); font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.75); margin-left: auto; }
.nav__side { font-size: 13px; line-height: 2.2; color: rgba(255,255,255,.85); }
.nav__side dt { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--gold-l); margin-top: 24px; }
.nav__side dt:first-child { margin-top: 0; }
@media (max-width: 1023px) {
  .nav__inner { grid-template-columns: 1fr; gap: 40px; padding: 100px 24px 60px; }
  .nav__ja { font-size: 18px; }
}

.fixed-cta {
  position: fixed;
  right: 0; bottom: 0;
  z-index: 55;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 20px 26px;
  background: var(--gold);
  color: var(--white);
  font-size: 12px; letter-spacing: .14em;
  transform: translateY(120%);
  transition: transform .8s var(--ease-anchor), background .6s var(--ease-expo);
}
.fixed-cta.is-shown { transform: translateY(0); }
.fixed-cta:hover { background: var(--navy); }
@media (max-width: 767px) {
  .fixed-cta { left: 0; right: 0; justify-content: center; padding: 16px; font-size: 13px; }
}

/* ページ遷移フェード */
.page-fade {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  pointer-events: none;
  opacity: 1;
  transition: opacity .9s var(--ease-anchor);
}
html.js-ready .page-fade { opacity: 0; }
html.is-leaving .page-fade { opacity: 1; }

/* ------------------------------------------------------------
   6. KV（トップ）左右分割 + 4枚スライダー + 縦組みスローガン
   ------------------------------------------------------------ */
.kv {
  position: relative;
  padding-top: 0;
  margin-bottom: var(--gap-s);
}
.kv__stage { position: relative; }
.kv__media {
  position: relative;
  margin-left: 240px;
  margin-right: var(--edge);
  height: 82vh;
  min-height: 520px;
  max-height: 860px;
  overflow: hidden;
}
.kv__slides {
  position: absolute;
  left: 0; right: 0;
  top: -7%; bottom: -7%;
}
.kv__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.kv__slide.is-active { opacity: 1; }
.kv__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
}
.kv__slide.is-active img { animation: kvZoom 9s linear forwards; }
@keyframes kvZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

.kv__panel {
  position: absolute;
  right: var(--edge); bottom: 0;
  background: var(--paper);
  padding: 52px 40px 44px 56px;
  display: flex;
  align-items: flex-start;
}
.kv__slogan {
  font-family: var(--font-mincho);
  font-size: 21px;
  letter-spacing: .6em;
  line-height: 1.05;
  color: var(--ink);
  height: 392px;
}
.kv__slogan-rule {
  position: absolute; top: 52px; right: 22px; bottom: 44px;
  width: 1px; background: var(--line);
}
.kv__side {
  position: absolute;
  left: calc(var(--edge) + 46px); bottom: 74px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ink-3);
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  margin: 0;
}
.kv__pager {
  display: flex; align-items: center; gap: 28px;
  margin: 26px 0 0 240px;
  padding-right: var(--edge);
}
.kv__count {
  font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
}
.kv__count .curr { color: var(--navy); }
.kv__bar { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.kv__bar span { position: absolute; left: 0; top: 0; height: 100%; background: var(--navy); width: 25%; transition: transform .8s var(--ease-anchor); }
.kv__scroll {
  position: absolute; left: 240px; bottom: -78px;
  font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--ink-2);
  display: flex; align-items: center; gap: 12px;
}
.kv__scroll i { display: block; width: 46px; height: 1px; background: var(--ink-3); position: relative; overflow: hidden; }
.kv__scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--navy);
  animation: scrollLine 2.4s var(--ease-anchor) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (max-width: 1023px) {
  .kv__media { margin-left: 0; margin-right: 0; height: 64vh; min-height: 420px; }
  .kv__panel { position: static; padding: 30px var(--edge) 0; display: block; }
  .kv__slogan { height: auto; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; letter-spacing: .28em; line-height: 2.1; font-size: 19px; margin-left: 0; }
  .kv__slogan-rule, .kv__side { display: none; }
  .kv__pager { margin: 22px 0 0; padding: 0 var(--edge); }
  .kv__scroll { display: none; }
}
@media (max-width: 767px) {
  .kv__media { height: 58vh; min-height: 360px; }
  .kv__slogan { font-size: 17px; letter-spacing: .2em; line-height: 2.2; }
}

/* ------------------------------------------------------------
   7. About（非対称・右寄せ写真）
   ------------------------------------------------------------ */
.about { position: relative; margin-bottom: var(--gap-m); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 0 74px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
.about__body { padding-top: 30px; }
.about__band { margin-bottom: 30px; }
.about__h { margin-bottom: 30px; }
.about__text { max-width: 460px; margin-bottom: 40px; }
.about__photo { position: relative; align-self: start; }
.about__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about__photo-cap {
  position: absolute; left: -34px; bottom: 26px;
  writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
  font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--ink-3);
}
@media (max-width: 1023px) {
  .about__grid { grid-template-columns: 1fr; gap: 36px; }
  .about__body { padding-top: 0; order: 2; }
  .about__photo { order: 1; }
  .about__photo-cap { display: none; }
  .about__text { max-width: none; }
}

/* ------------------------------------------------------------
   8. Menu cards（Service / Voice / Price）— 非対称3ブロック
   ------------------------------------------------------------ */
.menus { margin-bottom: var(--gap-l); }
.menus__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.menus__item { display: block; position: relative; }
.menus__item:nth-child(2) { margin-top: 56px; }
.menus__item:nth-child(3) { margin-top: 112px; }
.menus__photo { overflow: hidden; margin-bottom: 22px; }
.menus__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1.2s var(--ease-expo);
}
.menus__item:hover .menus__photo img { transform: scale(1.06); }
.menus__en { margin-bottom: 10px; }
.menus__ja { font-family: var(--font-mincho); font-size: 15px; letter-spacing: .18em; color: var(--ink-2); margin-bottom: 18px; }
.menus__text { font-size: 13.5px; line-height: 2; color: var(--ink-2); margin-bottom: 20px; }
@media (max-width: 1023px) {
  .menus__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .menus__item:nth-child(2) { margin-top: 40px; }
  .menus__item:nth-child(3) { margin-top: 0; }
}
@media (max-width: 767px) {
  .menus__grid { grid-template-columns: 1fr; gap: 48px; }
  .menus__item:nth-child(n) { margin-top: 0; }
}

/* ------------------------------------------------------------
   9. Record（紺の全幅バンド：資格 / 実績 / 対応領域）
   ------------------------------------------------------------ */
.record {
  background: var(--navy);
  color: var(--white);
  padding: 120px 0 126px;
  margin-bottom: var(--gap-m);
  position: relative;
  overflow: hidden;
}
.record::before {
  content: "";
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 1px; height: 74px; background: var(--gold);
}
.record__inner {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--edge);
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  gap: 0 64px;
  align-items: center;
}
.record__side { font-size: 13px; line-height: 2.3; }
.record__side--r { text-align: right; }
.record__side dt {
  font-family: var(--font-en); font-size: 10px; letter-spacing: .2em;
  color: var(--gold-l); margin-bottom: 18px;
}
.record__side li { color: rgba(255,255,255,.9); }
.record__note { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.78); letter-spacing: .06em; }
.record__demo { margin-top: 46px; text-align: center; font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.62); }
.record__center { text-align: center; padding: 0 20px; border-left: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); }
.record__label { font-family: var(--font-en); font-size: 11px; letter-spacing: .3em; color: var(--gold-l); margin-bottom: 34px; }
.record__body {
  font-family: var(--font-mincho);
  font-size: 20px; line-height: 2.4; letter-spacing: .14em;
  color: var(--white);
}
.record__num {
  font-family: var(--font-en);
  font-size: 38px; font-weight: 300; letter-spacing: .02em;
  color: var(--gold-l);
  padding: 0 6px;
  line-height: 1;
}
@media (max-width: 1023px) {
  .record { padding: 84px 0 88px; }
  .record__inner { grid-template-columns: 1fr; gap: 40px; }
  .record__center { border: 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding: 34px 0; }
  .record__side--r { text-align: left; }
  .record__body { font-size: 17px; line-height: 2.3; }
  .record__num { font-size: 30px; }
}

/* ------------------------------------------------------------
   10. Voice（お客様の声・エディトリアル）
   ------------------------------------------------------------ */
.voice { margin-bottom: var(--gap-m); }
.voice__head {
  max-width: var(--container); margin: 0 auto 56px; padding: 0 var(--edge);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.voice__list { max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); }
.voice__item {
  display: grid;
  grid-template-columns: 190px 1fr 150px;
  gap: 36px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.voice__item:last-child { border-bottom: 1px solid var(--line); }
.voice__photo { align-self: start; }
.voice__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.voice__q { font-family: var(--font-mincho); font-size: 18px; letter-spacing: .12em; line-height: 1.95; margin-bottom: 16px; }
.voice__text { font-size: 14px; line-height: 2.05; color: var(--ink-2); }
.voice__meta { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); line-height: 2; }
.voice__meta b { display: block; font-family: var(--font-ja); font-weight: 400; font-size: 13px; color: var(--ink); letter-spacing: .08em; }
@media (max-width: 1023px) {
  .voice__item { grid-template-columns: 120px 1fr; gap: 24px; }
  .voice__meta { grid-column: 2; }
}
@media (max-width: 767px) {
  .voice__item { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .voice__photo { max-width: 140px; }
  .voice__meta { grid-column: 1; }
  .voice__head { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------
   11. News
   ------------------------------------------------------------ */
.news { margin-bottom: var(--gap-l); }
.news__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--edge);
  display: grid; grid-template-columns: 260px 1fr; gap: 40px;
}
.news__list li { border-bottom: 1px solid var(--line); }
.news__list li:first-child { border-top: 1px solid var(--line); }
.news__row {
  display: grid; grid-template-columns: 110px 90px 1fr; gap: 18px;
  align-items: baseline; padding: 22px 0;
}
.news__date { font-family: var(--font-en); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }
.news__cat { font-size: 11px; letter-spacing: .1em; color: var(--gold); border: 1px solid currentColor; text-align: center; padding: 2px 0; }
.news__ttl { font-size: 14px; line-height: 1.9; }
@media (max-width: 1023px) { .news__inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 767px) {
  .news__row { grid-template-columns: 100px 1fr; gap: 8px 14px; }
  .news__cat { grid-row: 1; }
  .news__ttl { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   12. CTA（紺 + 写真の左右分割）
   ------------------------------------------------------------ */
.cta { position: relative; margin-bottom: 0; }
.cta__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.cta__photo { position: relative; overflow: hidden; min-height: 460px; }
.cta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__body {
  background: var(--navy);
  color: var(--white);
  padding: 96px clamp(28px, 5vw, 84px);
  display: flex; flex-direction: column; justify-content: center;
}
.cta__h { margin: 26px 0 22px; }
.cta__text { font-size: 14px; line-height: 2.1; color: rgba(255,255,255,.82); margin-bottom: 40px; }
.cta__tel {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-dark);
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.cta__tel-num { font-family: var(--font-en); font-size: 28px; letter-spacing: .04em; color: var(--white); }
.cta__tel-label { font-size: 12px; color: rgba(255,255,255,.7); letter-spacing: .08em; }
@media (max-width: 1023px) {
  .cta__grid { grid-template-columns: 1fr; }
  .cta__photo { min-height: 260px; }
  .cta__body { padding: 64px var(--edge); }
  .cta__tel-num { font-size: 24px; }
}

/* ------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------ */
.footer { background: var(--paper-2); padding: 80px 0 40px; }
.footer__inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--edge); }
.footer__top { display: grid; grid-template-columns: 340px 1fr; gap: 60px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.footer__name { font-family: var(--font-mincho); font-size: 19px; letter-spacing: .22em; margin-bottom: 20px; }
.footer__info { font-size: 13px; line-height: 2.1; color: var(--ink-2); }
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; align-content: start; }
.footer__nav a {
  font-size: 13px; letter-spacing: .08em; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 10px;
  transition: color .6s var(--ease-expo);
}
.footer__nav a::before { content: ""; width: 12px; height: 1px; background: var(--line); transition: width .6s var(--ease-expo), background .6s var(--ease-expo); }
.footer__nav a:hover { color: var(--navy); }
.footer__nav a:hover::before { width: 22px; background: var(--gold); }
.footer__bottom {
  padding-top: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer__copy, .footer__credit { font-family: var(--font-en); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.footer__note { margin-top: 12px; font-size: 11px; line-height: 1.9; color: var(--ink-3); letter-spacing: .04em; }
@media (max-width: 1023px) {
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------
   14. 下層ページ共通
   ------------------------------------------------------------ */
.phero {
  position: relative;
  padding: 210px 0 0;
  margin-bottom: var(--gap-s);
}
.phero__inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--edge); }
.phero__en { font-family: var(--font-en); font-size: 12px; letter-spacing: .3em; color: var(--gold); margin-bottom: 18px; }
.phero__h { font-family: var(--font-mincho); font-size: 38px; letter-spacing: .2em; line-height: 1.6; }
.phero__lead { margin-top: 26px; max-width: 640px; color: var(--ink-2); }
.phero__photo { margin-top: 56px; }
.phero__photo img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
@media (max-width: 1023px) { .phero { padding-top: 140px; } .phero__h { font-size: 27px; } }
@media (max-width: 767px)  { .phero { padding-top: 116px; } .phero__h { font-size: 22px; letter-spacing: .14em; } .phero__photo img { aspect-ratio: 3 / 2; } }

.crumbs {
  margin: 0 0 30px;
  font-size: 11px; letter-spacing: .08em; color: var(--ink-3);
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--navy); }
.crumbs span { margin: 0 8px; }

.sec { margin-bottom: var(--gap-m); }
.sec__head { max-width: var(--container); margin: 0 auto 48px; padding: 0 var(--edge); }
.sec__body { max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); }

/* ------------------------------------------------------------
   15. Service（左右交互の大判）
   ------------------------------------------------------------ */
.svc { margin-bottom: var(--gap-m); }
.svc__grid {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--edge);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; align-items: center;
}
.svc--rev .svc__photo { order: 2; }
.svc__photo { align-self: center; }
.svc__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svc__num { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; color: var(--gold); margin-bottom: 18px; }
.svc__h { margin-bottom: 20px; }
.svc__price {
  font-family: var(--font-en); font-size: 24px; letter-spacing: .02em; color: var(--navy);
  margin-bottom: 26px; display: flex; align-items: baseline; gap: 8px;
}
.svc__price small { font-family: var(--font-ja); font-size: 12px; color: var(--ink-2); letter-spacing: .06em; }
.svc__list { margin: 0 0 26px; }
.svc__list li {
  font-size: 13.5px; line-height: 1.9; color: var(--ink-2);
  padding: 12px 0 12px 20px; border-bottom: 1px solid var(--line); position: relative;
}
.svc__list li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 1px; background: var(--gold); }
@media (max-width: 1023px) {
  .svc__grid { grid-template-columns: 1fr; gap: 28px; }
  .svc--rev .svc__photo { order: 0; }
}

/* ------------------------------------------------------------
   16. Price table
   ------------------------------------------------------------ */
.ptable { width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.ptable caption {
  text-align: left; font-family: var(--font-mincho); font-size: 18px;
  letter-spacing: .18em; padding-bottom: 18px;
}
.ptable th, .ptable td { border-bottom: 1px solid var(--line); padding: 20px 16px; vertical-align: top; text-align: left; }
.ptable thead th {
  font-family: var(--font-en); font-size: 11px; letter-spacing: .18em; color: var(--ink-2);
  border-bottom: 1px solid var(--navy); padding-bottom: 12px; font-weight: 400;
}
.ptable td.num { font-family: var(--font-en); color: var(--navy); white-space: nowrap; }
.ptable tbody th { font-weight: 400; width: 34%; }
.ptable tbody th small { display: block; font-size: 12px; color: var(--ink-2); letter-spacing: .04em; margin-top: 4px; }
.ptable-wrap { overflow-x: auto; }
@media (max-width: 767px) {
  .ptable { min-width: 560px; }
}

/* ------------------------------------------------------------
   17. FAQ
   ------------------------------------------------------------ */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 34px 1fr 26px; gap: 16px; align-items: center;
  padding: 26px 4px;
  font-size: 15px; letter-spacing: .06em; line-height: 1.8;
  transition: color .6s var(--ease-expo);
}
.faq__q:hover { color: var(--blue); }
.faq__mark { font-family: var(--font-en); font-size: 13px; letter-spacing: .1em; color: var(--gold); }
.faq__icon { position: relative; width: 16px; height: 16px; justify-self: end; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 16px; height: 1px; background: var(--ink);
  transition: transform .6s var(--ease-expo);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-anchor); }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a-in { overflow: hidden; }
.faq__a-in p {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  font-size: 14px; line-height: 2.05; color: var(--ink-2);
  padding: 0 4px 30px;
}
.faq__a-in p::before { content: "A"; font-family: var(--font-en); font-size: 13px; letter-spacing: .1em; color: var(--blue); }

/* ------------------------------------------------------------
   18. Profile（about）
   ------------------------------------------------------------ */
.profile__grid {
  display: grid; grid-template-columns: 420px 1fr; gap: 64px;
  max-width: 1180px; margin: 0 auto; padding: 0 var(--edge); align-items: start;
}
.profile__photo { position: relative; align-self: start; }
.profile__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.profile__photo-cap {
  position: absolute; right: -30px; top: 20px;
  writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
  font-family: var(--font-mincho); font-size: 12px; letter-spacing: .3em; color: var(--ink-3);
}
.profile__name { font-family: var(--font-mincho); font-size: 30px; letter-spacing: .24em; margin-bottom: 10px; }
.profile__yomi { font-family: var(--font-en); font-size: 11px; letter-spacing: .22em; color: var(--ink-3); margin-bottom: 26px; }
.profile__quote {
  font-family: var(--font-mincho); font-size: 17px; line-height: 2.3; letter-spacing: .1em;
  padding: 26px 0 26px 26px; border-left: 1px solid var(--gold); margin: 30px 0;
}
.history { max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); }
.history li {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.history .y { font-family: var(--font-en); font-size: 13px; letter-spacing: .1em; color: var(--gold); }
.deftable { width: 100%; font-size: 14px; }
.deftable th, .deftable td { border-bottom: 1px solid var(--line); padding: 18px 12px; text-align: left; vertical-align: top; }
.deftable th { width: 200px; font-weight: 400; color: var(--ink-2); letter-spacing: .1em; }
@media (max-width: 1023px) {
  .profile__grid { grid-template-columns: 1fr; gap: 34px; }
  .profile__photo-cap { display: none; }
  .profile__name { font-size: 24px; }
  .deftable th { width: 120px; }
  .history li { grid-template-columns: 84px 1fr; gap: 14px; }
}

/* ------------------------------------------------------------
   19. Contact form
   ------------------------------------------------------------ */
.contact__grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 70px;
  max-width: 1180px; margin: 0 auto; padding: 0 var(--edge); align-items: start;
}
.field { margin-bottom: 34px; }
.field__label {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: .1em; margin-bottom: 12px;
}
.tag {
  font-family: var(--font-en); font-size: 10px; letter-spacing: .1em;
  padding: 3px 8px; color: var(--white); background: var(--gold);
}
.tag--opt { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.input, .textarea, .select {
  width: 100%;
  border-bottom: 1px solid var(--line);
  padding: 14px 2px;
  font-size: 15px;
  background: transparent;
  transition: border-color .6s var(--ease-expo);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--navy); outline: none; }
.textarea { resize: vertical; min-height: 150px; }
.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radios label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; font-size: 13px; letter-spacing: .06em;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: box-shadow .5s var(--ease-expo), color .5s var(--ease-expo);
}
.radios input { appearance: none; -webkit-appearance: none; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px var(--ink-3); border-radius: 50%; }
.radios input:checked { background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.radios label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); }
.err { display: none; margin-top: 8px; font-size: 12px; color: var(--error); letter-spacing: .04em; }
.field.is-err .err { display: block; }
.field.is-err .input, .field.is-err .textarea { border-color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.confirm { display: none; }
.confirm.is-shown { display: block; }
.confirm__row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.confirm__row dt { color: var(--ink-2); font-size: 13px; letter-spacing: .08em; }
.confirm__btns { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.form-done { display: none; text-align: center; padding: 60px 0; }
.form-done.is-shown { display: block; }
.form-done__mark { width: 54px; height: 54px; margin: 0 auto 26px; border: 1px solid var(--gold); position: relative; }
.form-done__mark::after {
  content: ""; position: absolute; left: 18px; top: 16px; width: 16px; height: 26px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(42deg);
}
.is-hidden { display: none !important; }

.office { background: var(--paper-2); padding: 44px 38px; }
.office__row { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.95; }
.office__row:last-of-type { border-bottom: 0; }
.office__label { font-family: var(--font-en); font-size: 10px; letter-spacing: .18em; color: var(--ink-3); display: block; margin-bottom: 4px; }
.office__photo { margin-bottom: 30px; }
.office__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.map-frame { width: 100%; aspect-ratio: 16 / 7; background: var(--paper-2); display: flex; align-items: center; justify-content: center; text-align: center; }
.map-frame p { font-size: 12px; color: var(--ink-3); line-height: 2; letter-spacing: .06em; }
@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: 1fr; gap: 46px; }
  .confirm__row { grid-template-columns: 110px 1fr; gap: 10px; }
  .map-frame { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------
   20. Policy / 404
   ------------------------------------------------------------ */
.policy { max-width: 820px; margin: 0 auto; padding: 0 var(--edge); }
.policy h2 { font-family: var(--font-mincho); font-size: 19px; letter-spacing: .16em; margin: 54px 0 18px; }
.policy h2:first-child { margin-top: 0; }
.policy p, .policy li { font-size: 14px; line-height: 2.1; color: var(--ink-2); }
.policy ul { margin: 14px 0 0 0; }
.policy li { padding-left: 18px; position: relative; }
.policy li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 1px; background: var(--gold); }

.nf { min-height: 70svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 200px var(--edge) var(--gap-s); }
.nf__num { font-family: var(--font-en); font-size: 92px; font-weight: 300; letter-spacing: .06em; color: var(--navy); line-height: 1; margin-bottom: 26px; }
.nf__h { font-family: var(--font-mincho); font-size: 22px; letter-spacing: .18em; margin-bottom: 20px; }
@media (max-width: 767px) { .nf__num { font-size: 62px; } .nf { padding-top: 150px; } }

/* ------------------------------------------------------------
   21. print
   ------------------------------------------------------------ */
@media print {
  .site-logo, .menu-btn, .nav, .fixed-cta, .page-fade { display: none !important; }
  .reveal, .reveal-child > *, .split span { opacity: 1 !important; transform: none !important; }
}