/* web-design-control · mode: direction→build · ds: provisional（コンセプト作品 04 帆走税理士事務所）
 * read: 税理士事務所のサイト / 創業期の個人事業主・小さな会社 / 落ち着いて話が早い / 行動: 無料相談（60分）を予約
 * core: 約束=創業1年目の決算を一緒に迷わず終わらせる / 人格=几帳面・話が早い・先回り / 印=帳簿の罫でできた帆・締めの二重線・朱の角印 / 見せ場=創業1年目の道のり
 * refs: shonan-cloud.com（シンボルのロゴ・入口のカード・番号つきの特徴・Q&A）/ tax-taka.jp（法人・個人の入口・欧文の見出し）/ oginotax.com（紺の面・縦書き・固定の問い合わせ）
 * site: / · /services/ · /about/ · /first/ · /contact/
 * dials: V4 M3 D5
 */
/* design-lint: allow-file J-06,J-02 — 斜体は欧文（Spectral・lang="en"）の添え字だけ。1.1 未満の行送りは数字・角印だけの表示 */

/* ============ トークン ============ */
:root {
  /* 色（WCAG 2.x の相対輝度で計算） */
  --paper:     #F6F4EF; /* 地（帳簿の紙）。ink 14.92 / soft 6.88 / navy 10.50 / shu 4.93 */
  --card:      #FFFFFF; /* カード・表。ink 16.40 / navy 11.54 / shu 5.42 */
  --mist:      #E7EDF2; /* 一段濃い面。ink 13.90 / soft 6.40 / navy 9.78 */
  --ink:       #16202E; /* 文字 */
  --soft:      #3E4856; /* 補助の文字。paper 8.42 */
  --navy:      #163A63; /* 主色（帳簿の紺）。上の白 11.54 */
  --navy-deep: #0F2A49; /* 紺の面。on-navy 12.89 */
  --on-navy:   #EEF2F6;
  --on-navy-dim: #AFC0D3; /* 紺の面の補助の文字。7.81 */
  --sea:       #7FB3C8; /* 紺の面の差し色（線・小さな印）。6.34 */
  --shu:       #B8432C; /* 朱（角印・無料相談の印だけ）。上の白 5.42 / paper 4.93 */
  --line:      #D5D9DE; /* 罫線（装飾） */
  --rule:      rgba(22, 58, 99, .10); /* 帳簿の罫 */
  --rule-on-navy: rgba(238, 242, 246, .08);
  --line-on-navy: rgba(238, 242, 246, .22);
  --white:     #FFFFFF;
  --shadow:    0 1px 2px rgba(22, 32, 46, .06), 0 14px 34px -16px rgba(22, 32, 46, .22);
  --field-line: #7D8794; /* 入力欄の枠。white 3.71 */

  /* 書体 */
  --jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --en: "Spectral", "Georgia", serif;

  /* 余白 */
  --shell: 72rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --sec-y: clamp(4.5rem, 3rem + 5vw, 8.5rem);
  --header-h: 5rem;

  /* 形: 写真・カード = r-m（控えめ）/ ボタン = r-s / 角印 = 2px */
  --r-s: 6px; --r-m: 10px; --r-l: 18px;

  /* 動き */
  --ease: cubic-bezier(.25, .7, .2, 1);
  --t-fast: .2s;
  --t-reveal: .8s;
}

/* ============ 基本 ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--jp); font-size: 1rem; line-height: 1.95; letter-spacing: .03em;
  -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; overflow-x: clip; word-break: auto-phrase; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: .25em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 3px; }
.on-navy :focus-visible, .site-footer :focus-visible { outline-color: var(--on-navy); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
p, li, dd, td { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--white); padding: .5rem 1rem; border-radius: var(--r-s); }
.skip:focus { top: 1rem; }
.en { font-family: var(--en); letter-spacing: .02em; }
.num { font-family: var(--en); font-feature-settings: "lnum" 1, "tnum" 1; letter-spacing: .01em; }
.note { font-size: .8125rem; color: var(--soft); line-height: 1.85; }
.nw { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ ヘッダー ============ */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5, 1.5rem); height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; flex: none; }
.logo__mark { width: 2.875rem; height: 2.875rem; }
.logo__type { display: grid; line-height: 1.2; }
.logo__name { font-weight: 700; font-size: 1.1875rem; letter-spacing: .12em; }
.logo__en { font-family: var(--en); font-size: .6875rem; letter-spacing: .14em; color: var(--soft); }
.gnav__list { display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 1.75rem); }
.gnav__link { color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 500; letter-spacing: .08em; padding: .5rem 0; position: relative; white-space: nowrap; }
.gnav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 3px; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); transform: scaleX(0); transition: transform var(--t-fast) var(--ease); }
.gnav__link[aria-current="page"]::after { transform: none; }
.gnav__tel { display: grid; justify-items: end; line-height: 1.25; margin-left: .5rem; }
.gnav__tel .num { font-size: 1.25rem; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.gnav__tel small { font-size: .6875rem; color: var(--soft); }
.menu-btn { display: none; }
@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--ink); font: 700 .8125rem/1 var(--jp); letter-spacing: .14em; cursor: pointer; white-space: nowrap; flex: none; }
  .menu-btn__bars { width: 16px; height: 8px; position: relative; }
  .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--t-fast) var(--ease); }
  .menu-btn__bars::before { top: 0; } .menu-btn__bars::after { bottom: 0; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(3px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-3px) rotate(-45deg); }
  .gnav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--card); border-bottom: 1px solid var(--line); padding: 1rem var(--gutter) 2rem; display: none; }
  .gnav.is-open { display: block; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .gnav__link { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .gnav__link::after { display: none; }
  .gnav__tel { justify-items: start; margin: 1.25rem 0 0; }
  .gnav__cta { margin-top: 1rem; } .gnav__cta .btn { width: 100%; }
}
@media (max-width: 380px) { .logo__en { display: none; } .logo { gap: .4rem; } .logo__mark { width: 2rem; height: 2rem; } .logo__name { font-size: .875rem; letter-spacing: .04em; } .menu-btn { padding: 0 .7rem; letter-spacing: .08em; } .site-header__inner { gap: .5rem; } }

/* ============ ボタン ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3.25rem; padding: 0 1.6rem; border-radius: var(--r-s); border: 1.5px solid var(--navy); background: var(--navy); color: var(--white); font: 700 1rem/1 var(--jp); letter-spacing: .08em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 2.75rem; padding: 0 1.15rem; font-size: .875rem; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--navy-deep); }
.btn--line-light { background: transparent; border-color: var(--line-on-navy); color: var(--on-navy); }
.btn__arrow { width: 1rem; height: 1rem; flex: none; transition: transform var(--t-fast) var(--ease); }
/* 朱の角印（無料相談の印だけに使う） */
.seal { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 3px; background: var(--shu); color: var(--white); font-size: .75rem; font-weight: 700; line-height: 1.05; letter-spacing: .02em; text-align: center; flex: none; box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3.5px var(--white); }
.btn .seal { width: 2.2rem; height: 2.2rem; margin-left: -.75rem; }
.more { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy); font-weight: 700; text-decoration: none; padding: .35rem 0; border-bottom: 1px solid currentColor; }

/* ============ 見出しの型（下に帳簿の締めの二重線） ============ */
.sec { padding-block: var(--sec-y); position: relative; }
.sec--card { background: var(--card); }
.sec--mist { background: var(--mist); }
.sec-head { display: grid; justify-items: start; gap: .5rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head__en { font-family: var(--en); font-size: 1rem; font-style: italic; color: var(--navy); letter-spacing: .04em; }
.h2 { font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.375rem); font-weight: 700; line-height: 1.5; letter-spacing: .06em; padding-bottom: .9rem; position: relative; }
.h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 5px; border-top: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); }
.sec-head--center .h2::after { left: 50%; translate: -50% 0; }
.on-navy .h2::after { border-color: var(--sea); }
.h3 { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); font-weight: 700; line-height: 1.6; letter-spacing: .05em; }
.lead { font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); color: var(--soft); line-height: 2; max-width: 40em; }
.on-navy { background: var(--navy-deep); color: var(--on-navy); }
.on-navy .lead, .on-navy .note, .on-navy .sec-head__en { color: var(--on-navy-dim); }

/* ============ トップ: ファーストビュー（紺の面の罫が帆になる） ============ */
.hero { position: relative; overflow: clip; background: var(--navy-deep); color: var(--on-navy);
  background-image: repeating-linear-gradient(to bottom, transparent 0 39px, var(--rule-on-navy) 39px 40px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
  min-height: min(44rem, calc(100svh - var(--header-h))); padding-block: clamp(2rem, 1rem + 3vw, 4rem); }
.hero__copy { display: grid; gap: 1.4rem; justify-items: start; container-type: inline-size; }
.hero__eyebrow { font-size: .9375rem; font-weight: 500; color: var(--on-navy-dim); letter-spacing: .1em; }
.hero__title { font-size: clamp(1.75rem, 8.4cqi, 3.25rem); font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--white); }
.hero__title span { display: block; white-space: nowrap; }
.hero__lead { color: var(--on-navy-dim); max-width: 28em; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero__chips li { font-size: .8125rem; font-weight: 500; padding: .2rem .75rem; border: 1px solid var(--line-on-navy); border-radius: var(--r-s); color: var(--on-navy); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.hero__tel { display: grid; line-height: 1.3; color: var(--on-navy); text-decoration: none; }
.hero__tel .num { font-size: 1.5rem; font-weight: 600; white-space: nowrap; }
.hero__tel small { font-size: .75rem; color: var(--on-navy-dim); }

/* キービジュアル: 罫の帆＋航路＋小さな写真 */
.kv { position: relative; display: grid; justify-items: end; align-content: center; gap: 1rem; }
.kv__svg { width: min(100%, 32rem); height: auto; display: block; }
.kv__vertical { position: absolute; left: 0; top: 0; writing-mode: vertical-rl; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 500; letter-spacing: .32em; line-height: 2.2; color: var(--on-navy); }
.kv__vertical b { color: var(--white); font-weight: 700; }
.route { width: min(100%, 32rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.route::before { content: ""; position: absolute; left: .45rem; right: .45rem; top: .45rem; border-top: 1.5px dashed var(--on-navy-dim); }
.route li { position: relative; display: grid; gap: .15rem; padding-top: 1.4rem; font-size: .8125rem; line-height: 1.5; color: var(--on-navy); }
.route li::before { content: ""; position: absolute; left: 0; top: 0; width: .9rem; height: .9rem; border-radius: 50%; background: var(--navy-deep); border: 2px solid var(--sea); }
.route li:last-child::before { background: var(--shu); border-color: var(--shu); }
.route small { font-family: var(--en); font-size: .8125rem; font-weight: 600; color: var(--on-navy-dim); white-space: nowrap; }
.kv__photo { position: absolute; left: 0; bottom: 4.75rem; width: clamp(7.5rem, 5rem + 4vw, 9.5rem); background: var(--card); padding: .5rem .5rem .6rem; box-shadow: var(--shadow); }
.kv__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 75% 75%; }
.kv__photo figcaption { font-size: .6875rem; color: var(--ink); margin-top: .35rem; line-height: 1.5; white-space: nowrap; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .kv { justify-items: center; }
  .kv__svg { width: min(78%, 22rem); }
  .kv__vertical, .kv__photo { display: none; }
}
@media (max-width: 520px) { .route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; } .route::before { display: none; } }

/* ============ お客さま別の入口（写真カード） ============ */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.door { display: grid; grid-template-rows: auto 1fr; background: var(--card); border-radius: var(--r-m); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform var(--t-fast) var(--ease); }
.door__img { aspect-ratio: 3 / 2; overflow: hidden; }
.door__img img { width: 100%; height: 100%; object-fit: cover; }
.door__body { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .55rem; align-content: start; }
.door__for { font-family: var(--en); font-style: italic; font-size: .9375rem; color: var(--navy); }
.door__list { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .875rem; color: var(--soft); }
.door__list li::before { content: "・"; color: var(--navy); }
.door__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; font-weight: 700; color: var(--navy); font-size: .9375rem; }
@media (max-width: 860px) { .doors { grid-template-columns: minmax(0, 1fr); } .door { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: none; } .door__img { aspect-ratio: auto; } }
@media (max-width: 520px) { .door { grid-template-columns: minmax(0, 1fr); } .door__img { aspect-ratio: 16 / 9; } }

/* ============ 見せ場: 創業1年目の道のり（帳簿の罫の上の図） ============ */
.road { background: var(--card); border-radius: var(--r-l); box-shadow: var(--shadow); padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); overflow-x: auto; }
.road__grid { min-width: 58rem; display: grid; grid-template-columns: 5.75rem repeat(12, minmax(0, 1fr)); row-gap: 0; position: relative; }
.road__month + .road__month { border-left: 1px solid var(--rule); }
.road__month { grid-row: 1; font-family: var(--en); font-size: .8125rem; color: var(--soft); text-align: center; padding: .4rem 0 .6rem; border-bottom: 2px solid var(--navy); }
.road__month--label { text-align: left; font-family: var(--jp); font-weight: 700; color: var(--ink); }
.road__lane { grid-column: 1; font-size: .8125rem; font-weight: 700; padding: 1rem .5rem 1rem 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .4rem; }
.road__lane .swatch { width: .6rem; height: .6rem; border-radius: 2px; flex: none; }
.road__cell { border-bottom: 1px solid var(--line); padding: .7rem .25rem; display: flex; align-items: center; }
.task { width: 100%; font-size: .78rem; line-height: 1.5; padding: .45rem .6rem; border-radius: var(--r-s); font-weight: 500; letter-spacing: .02em; }
.task b { display: block; font-size: .6875rem; font-weight: 500; opacity: .85; }
.task--you { background: var(--mist); color: var(--ink); border-left: 3px solid var(--soft); }
.task--us { background: var(--navy); color: var(--white); }
.task--both { background: var(--card); color: var(--navy); border: 1.5px solid var(--navy); }
.road__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .8125rem; color: var(--soft); align-items: center; }
.road__legend span { display: inline-flex; gap: .4rem; align-items: center; }
.road__legend .swatch { display: inline-block; width: 1.4rem; height: .8rem; border-radius: 2px; }
.lg-you { background: var(--mist); border-left: 3px solid var(--soft); }
.lg-us { background: var(--navy); }
.lg-both { border: 1.5px solid var(--navy); }
.road__scroll-hint { display: none; font-size: .75rem; color: var(--soft); margin-top: .5rem; }
@media (max-width: 960px) { .road__scroll-hint { display: block; } }

/* ============ 3つの約束（番号つき） ============ */
.promises { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.promise { display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1rem, .5rem + 2vw, 3rem); align-items: start; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.promise__no { font-family: var(--en); font-size: clamp(3rem, 2rem + 3vw, 4.75rem); line-height: .9; color: var(--navy); font-weight: 500; }
.promise__title { display: grid; gap: .35rem; }
.promise__title small { font-family: var(--en); color: var(--navy); font-size: .9375rem; letter-spacing: .03em; }
.promise p { color: var(--soft); }
@media (max-width: 860px) { .promise { grid-template-columns: 4.5rem minmax(0, 1fr); } .promise > p { grid-column: 2; } }

/* ============ 料金 ============ */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.price { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.75rem 1.6rem; display: flex; flex-direction: column; gap: .9rem; position: relative; }
.price--pick { border: 2px solid var(--navy); }
.price__badge { position: absolute; top: -.8rem; left: 1.5rem; background: var(--navy); color: var(--white); font-size: .75rem; font-weight: 700; padding: .15rem .75rem; border-radius: var(--r-s); letter-spacing: .1em; }
.price__name { font-weight: 700; font-size: 1.125rem; letter-spacing: .06em; }
.price__for { font-size: .875rem; color: var(--soft); }
.price__amount { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; padding-bottom: .9rem; border-bottom: 5px double var(--line); }
.price__amount .num { font-size: 2.375rem; font-weight: 500; line-height: 1; color: var(--navy); }
.price__amount small { font-size: .8125rem; color: var(--soft); }
.price__list { display: grid; gap: .45rem; font-size: .9375rem; }
.price__list li { display: flex; gap: .5rem; }
.price__list svg { width: 1.05rem; height: 1.05rem; color: var(--navy); flex: none; margin-top: .4rem; }
.price .btn { margin-top: auto; width: 100%; }
@media (max-width: 900px) { .prices { grid-template-columns: minmax(0, 1fr); max-width: 32rem; } }

/* 料金表・対応範囲の表 */
.table-wrap { position: relative; overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); }
.tbl { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .9375rem; }
.tbl caption { text-align: left; padding: 1.25rem 1.5rem .25rem; font-weight: 700; letter-spacing: .06em; }
.tbl th, .tbl td { padding: .95rem 1.25rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { font-size: .8125rem; color: var(--soft); font-weight: 700; background: var(--paper); }
.tbl tbody th { min-width: 11rem; }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; font-size: 1rem; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tfoot td, .tbl tfoot th { border-top: 4px double var(--navy); font-weight: 700; }
.mark-yes, .mark-no, .mark-part { display: inline-flex; gap: .35rem; align-items: center; font-weight: 700; white-space: nowrap; }
.mark-yes { color: var(--navy); } .mark-no { color: var(--soft); } .mark-part { color: var(--ink); }
.mark-yes svg, .mark-no svg, .mark-part svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* ============ 代表から ============ */
.rep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.rep__photo { position: relative; }
.rep__photo figure { aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; }
.rep__photo img { width: 100%; height: 100%; object-fit: cover; }
.rep__text { display: grid; gap: 1.25rem; justify-items: start; }
.rep__quote { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 700; line-height: 1.8; letter-spacing: .06em; }
.rep__name { display: grid; gap: .1rem; padding-top: 1rem; border-top: 1px solid var(--line); width: 100%; }
.rep__name b { font-size: 1.125rem; letter-spacing: .12em; }
.rep__name small { color: var(--soft); font-size: .8125rem; }
@media (max-width: 860px) { .rep { grid-template-columns: minmax(0, 1fr); } .rep__photo figure { aspect-ratio: 4 / 3; } }

/* ============ よくある質問（開いて見せる Q&A） ============ */
.qa { display: grid; gap: 1.75rem; max-width: 50rem; }
.qa__item { display: grid; gap: .6rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.qa__q, .qa__a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.qa__q { font-weight: 700; font-size: 1.0625rem; }
.qa__a { color: var(--soft); }
.qa__q::before, .qa__a::before { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-family: var(--en); font-weight: 600; font-size: 1rem; }
.qa__q::before { content: "Q"; background: var(--navy); color: var(--white); }
.qa__a::before { content: "A"; background: var(--mist); color: var(--navy); }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
@media (max-width: 960px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } }

/* 相談の窓口のカード */
.desk { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.75rem; display: grid; gap: .9rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.desk__head { display: flex; gap: .75rem; align-items: center; }
.desk dl { display: grid; gap: .3rem; font-size: .9375rem; }
.desk dt { font-size: .75rem; color: var(--soft); font-weight: 700; margin-top: .4rem; }
.desk .num { font-size: 1.5rem; font-weight: 600; color: var(--navy); }
.desk .btn { width: 100%; }
@media (max-width: 960px) { .desk { position: static; } }

/* ============ 相談の予約の帯 ============ */
.cta { background: var(--navy-deep); color: var(--on-navy); padding-block: clamp(4rem, 3rem + 4vw, 6rem);
  background-image: repeating-linear-gradient(to bottom, transparent 0 39px, var(--rule-on-navy) 39px 40px); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; }
.cta h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); font-weight: 700; line-height: 1.6; letter-spacing: .06em; color: var(--white); }
.cta p { color: var(--on-navy-dim); margin-top: .6rem; }
.cta__actions { display: grid; gap: .9rem; justify-items: start; }
.cta__tel { color: var(--on-navy); text-decoration: none; display: grid; line-height: 1.3; }
.cta__tel .num { font-size: 1.75rem; font-weight: 600; }
.cta__tel small { font-size: .75rem; color: var(--on-navy-dim); }
@media (max-width: 760px) { .cta__inner { grid-template-columns: minmax(0, 1fr); } }

/* 固定の相談ボタン（OGINO の固定の問い合わせに学ぶ） */
.fixed-cta { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.25rem 0 .75rem; border-radius: var(--r-s); background: var(--navy); color: var(--white); text-decoration: none; font-weight: 700; font-size: .9375rem; letter-spacing: .06em; box-shadow: var(--shadow); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fixed-cta.is-hidden { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.fixed-cta .seal { width: 2rem; height: 2rem; }
@media (max-width: 600px) { .fixed-cta { left: 1rem; right: 1rem; justify-content: center; } }

/* ============ 下層: ページの頭 ============ */
.page-head { background: var(--navy-deep); color: var(--on-navy); padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(3rem, 2rem + 3vw, 4.5rem);
  background-image: repeating-linear-gradient(to bottom, transparent 0 39px, var(--rule-on-navy) 39px 40px); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: var(--on-navy-dim); margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; }
.crumbs a { color: var(--on-navy-dim); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.page-head__text { display: grid; gap: 1rem; justify-items: start; }
.page-head__en { font-family: var(--en); font-style: italic; font-size: 1.0625rem; color: var(--sea); letter-spacing: .04em; }
.page-head__title { font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem); font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--white); }
.page-head .lead { color: var(--on-navy-dim); }
.page-head__photo { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 3 / 2; }
.page-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-head__band { margin-top: clamp(2rem, 1rem + 3vw, 3rem); aspect-ratio: 16 / 5; overflow: hidden; border-radius: var(--r-m); }
.page-head__band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .page-head__band { aspect-ratio: 16 / 9; } }
.page-head__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.page-head__nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line-on-navy); border-radius: var(--r-s); color: var(--on-navy); text-decoration: none; font-size: .875rem; }
@media (max-width: 860px) { .page-head__grid { grid-template-columns: minmax(0, 1fr); } }

/* 下層: 手順（はじめての方へ） */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: st; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.5rem 1.4rem; display: grid; gap: .5rem; align-content: start; position: relative; }
.step__no { font-family: var(--en); font-size: 2.25rem; line-height: 1; color: var(--navy); }
.step__time { justify-self: start; font-size: .75rem; font-weight: 700; padding: .1rem .55rem; border-radius: var(--r-s); background: var(--mist); color: var(--navy); }
.step p { color: var(--soft); font-size: .9375rem; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 2rem; }
.checklist li { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.checklist svg { width: 1.15rem; height: 1.15rem; color: var(--navy); flex: none; margin-top: .4rem; }
@media (max-width: 700px) { .checklist { grid-template-columns: minmax(0, 1fr); } }

/* 下層: 事務所について */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split__img { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__text { display: grid; gap: 1.25rem; justify-items: start; }
.split__text .sec-head { margin-bottom: 0; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.values { display: grid; border-top: 5px double var(--navy); }
.value { display: grid; grid-template-columns: 5rem minmax(0, 14rem) minmax(0, 1fr); gap: 1rem 2rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.value__no { font-family: var(--en); font-size: 2.25rem; color: var(--navy); line-height: 1; }
.value p { color: var(--soft); font-size: .9375rem; }
@media (max-width: 760px) { .value { grid-template-columns: 3.5rem minmax(0, 1fr); } .value p { grid-column: 2; } }
.dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.dl dt, .dl dd { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.dl dt { background: var(--paper); font-weight: 700; font-size: .875rem; letter-spacing: .06em; }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }
@media (max-width: 560px) { .dl { grid-template-columns: minmax(0, 1fr); } .dl dt { border-bottom: 0; padding-bottom: .25rem; } }

/* フォーム */
.form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: .4rem; }
.form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.form label, .form legend { font-weight: 700; font-size: .9375rem; }
.form label small, .form legend small { font-weight: 500; color: var(--soft); margin-left: .4rem; font-size: .75rem; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { width: 100%; min-height: 3rem; padding: .65rem .9rem; border: 1px solid var(--field-line); border-radius: var(--r-s); background: var(--white); color: var(--ink); font: 400 1rem/1.6 var(--jp); }
.form textarea { min-height: 8rem; resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.form .choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.form .choices label { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--field-line); border-radius: var(--r-s); font-weight: 500; cursor: pointer; }
.form .choices input { width: 1.1rem; height: 1.1rem; accent-color: var(--navy); }
.form__msg { padding: .9rem 1rem; border-radius: var(--r-s); background: var(--mist); }
.form__msg[hidden] { display: none; }
@media (max-width: 600px) { .form__row--2 { grid-template-columns: minmax(0, 1fr); } }

/* ============ フッター ============ */
.site-footer { background: var(--ink); color: var(--on-navy); padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem); padding-bottom: 3rem; }
.footer__logo .logo__name { color: var(--on-navy); }
.footer__logo .logo__en { color: var(--on-navy-dim); }
.footer__about { margin-top: 1rem; color: var(--on-navy-dim); font-size: .9375rem; }
.footer__h { font-family: var(--en); font-style: italic; font-size: .9375rem; color: var(--on-navy-dim); margin-bottom: .75rem; }
.footer__list { display: grid; gap: .45rem; font-size: .9375rem; }
.footer__legal { border-top: 1px solid var(--line-on-navy); padding-block: 1.5rem 5.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .75rem; color: var(--on-navy-dim); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ============ hover（マウスなどの端末だけ） ============ */
@media (hover: hover) {
  a:hover { color: var(--navy-deep); }
  .logo:hover { color: var(--ink); }
  .gnav__link:hover { color: var(--navy); }
  .gnav__link:hover::after { transform: none; }
  .btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
  .btn--ghost:hover { background: var(--navy); color: var(--white); }
  .btn--light:hover { background: var(--mist); border-color: var(--mist); color: var(--navy-deep); }
  .btn--line-light:hover { background: var(--rule-on-navy); border-color: var(--on-navy); color: var(--white); }
  .btn:hover .btn__arrow, .more:hover .btn__arrow, .door:hover .btn__arrow { transform: translateX(3px); }
  .door:hover { transform: translateY(-3px); color: var(--ink); }
  .more:hover { color: var(--navy-deep); }
  .page-head__nav a:hover { background: var(--rule-on-navy); color: var(--white); }
  .fixed-cta:hover { background: var(--navy-deep); color: var(--white); }
  .site-footer a:hover { color: var(--sea); }
}

/* ============ 出現の動き（JS が使えるときだけ） ============ */
@media (prefers-reduced-motion: no-preference) {
  /* design-lint: allow M-11 — .js-motion は head の1行の JS が付ける。JS が無ければ最初から見える */
  .js-motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
  .js-motion [data-reveal].is-in { opacity: 1; transform: none; }
}