@charset "UTF-8";
/*!
 * change-accountant.css
 * 税理士変更LP（/services/change-accountant/）の専用スタイル（2026-08-01）
 *
 * style.css は SCSS からのコンパイル成果物のため、再ビルドで上書きされないよう
 * 本ファイルに分離している。読み込みは page-change-accountant.php を参照（このページ専用）。
 *
 * 既存クラス（m-freee-support-hero / m-incorporation-* / m-tax-advisor-merit）は
 * そのまま流用し、ここでは
 *   1. ファーストビューの差分（イラストの縦横比・アイコン枠）
 *   2. CHECK LIST（税理士変更診断）      ← このページ新規
 *   3. TIMING（税理士変更のタイミング）  ← このページ新規
 *   4. DOCUMENT（引継ぎに必要な書類）    ← このページ新規
 *   5. COMPANY（事務所概要）            ← 表と地図は .m-top-company__* を共用
 * だけを定義する。
 *
 * 数値は Figma（PC node 4816-25730）の実寸をそのまま rem 換算している。
 * ブレークポイントは既存テーマと同じ max-width: 767px。
 */

/* =========================================
   1. ファーストビュー（MV）

   freee導入LPの MV は 720x341 だが、税理士変更の MV は 720x321（Figma: Frame 2571）。
   人物イラストの位置・比率も異なるため、ここで上書きする。
   ========================================= */
.m-change-accountant-hero .m-freee-support-hero__mv {
  block-size: min(321 * 1rem / var(--font-size), 321 / 1440 * 100vw);
  isolation: isolate;
}

/* 背景の京都の白線画（720x241） */
.m-change-accountant-hero .m-freee-support-hero__mv-bg {
  z-index: 0;
  block-size: 75.0778816199%;
}

/* 人物イラスト（440x296 / x140 y25） */
.m-change-accountant-hero .m-freee-support-hero__mv-illu {
  z-index: 1;
  inset-block-start: 7.7881619938%;
  inset-inline-start: 19.4444444444%;
  inline-size: 61.1111111111%;
  block-size: 92.2118380062%;
  mix-blend-mode: normal;
}

/* FV キャッチは2行とも同じサイズ。1行目→2行目の詰めは既存のままでよい */
.m-change-accountant-hero .m-freee-support-hero__catch-line {
  white-space: nowrap;
}

/* =========================================
   2. CHECK LIST（税理士変更診断）
   Figma: node 4816-25910
   board 1092 / padding 40 / 2列486 gap40 / 行間16
   ========================================= */
.m-change-accountant-checklist {
  padding-block: calc(60 * 1rem / var(--font-size));
}

.m-change-accountant-checklist__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.m-change-accountant-checklist__board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(40 * 1rem / var(--font-size));
  inline-size: 100%;
  max-inline-size: calc(1092 * 1rem / var(--font-size));
  margin-block-start: calc(40 * 1rem / var(--font-size));
  padding: calc(40 * 1rem / var(--font-size));
  border-radius: calc(16 * 1rem / var(--font-size));
  background-color: var(--color__gray100);
}

/* 左右それぞれ独立した縦積み（Figma の Frame 2591 / 2592 と同じ構造） */
.m-change-accountant-checklist__list {
  display: flex;
  flex-direction: column;
  gap: calc(16 * 1rem / var(--font-size));
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.m-change-accountant-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * 1rem / var(--font-size));
}

/* チェックボックス風のマーク（白地・オレンジ枠・オレンジのチェック） */
.m-change-accountant-checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: calc(22 * 1rem / var(--font-size));
  block-size: calc(22 * 1rem / var(--font-size));
  margin-block-start: calc(3 * 1rem / var(--font-size));
  border: calc(1.5 * 1rem / var(--font-size)) solid var(--color__orange);
  border-radius: calc(4 * 1rem / var(--font-size));
  background-color: var(--color__white);
  color: var(--color__orange);
}

.m-change-accountant-checklist__mark svg {
  inline-size: calc(12 * 1rem / var(--font-size));
  block-size: auto;
}

.m-change-accountant-checklist__text {
  font-family: var(--font-family__zen);
  font-size: calc(15 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--color__black);
}

/* 吹き出し＋イラスト */
.m-change-accountant-checklist__result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * 1rem / var(--font-size));
  inline-size: 100%;
  margin-block-start: calc(24 * 1rem / var(--font-size));
}

.m-change-accountant-checklist__balloon {
  position: relative;
  inline-size: calc(326 * 1rem / var(--font-size));
  padding: calc(24 * 1rem / var(--font-size)) calc(28 * 1rem / var(--font-size));
  border: calc(2 * 1rem / var(--font-size)) solid var(--color__black);
  border-radius: calc(8 * 1rem / var(--font-size));
  background-color: var(--color__white);
}

/* 吹き出しのしっぽ（右向き）。枠線つきなので黒→白の2枚重ねで描く */
.m-change-accountant-checklist__balloon::before,
.m-change-accountant-checklist__balloon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inline-size: 0;
  block-size: 0;
  border-block: calc(12 * 1rem / var(--font-size)) solid transparent;
  transform: translateY(-50%);
}

.m-change-accountant-checklist__balloon::before {
  inset-inline-start: 100%;
  border-inline-start: calc(24 * 1rem / var(--font-size)) solid var(--color__black);
}

.m-change-accountant-checklist__balloon::after {
  inset-inline-start: calc(100% - 3 * 1rem / var(--font-size));
  border-inline-start: calc(24 * 1rem / var(--font-size)) solid var(--color__white);
}

.m-change-accountant-checklist__balloon-text {
  font-family: var(--font-family__zen);
  font-size: calc(16 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color__black);
}

.m-change-accountant-checklist__illust {
  position: relative;
  flex-shrink: 0;
  inline-size: calc(156 * 1rem / var(--font-size));
  block-size: calc(180 * 1rem / var(--font-size));
}

.m-change-accountant-checklist__illust-main {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* =========================================
   3. TIMING（税理士変更のタイミングについて）
   Figma: node 4816-26468
   帯 = 角丸40のグレー。カードは白 / 1080幅 / gap24 / padding 32-40
   DOCUMENT と同じ帯の中に入るため、背景は .m-change-accountant-band で共通化する。
   ========================================= */
.m-change-accountant-timing,
.m-change-accountant-document {
  background-color: var(--color__gray100);
}

.m-change-accountant-timing {
  padding-block-start: calc(120 * 1rem / var(--font-size));
  border-start-start-radius: calc(40 * 1rem / var(--font-size));
  border-start-end-radius: calc(40 * 1rem / var(--font-size));
}

.m-change-accountant-timing__inner,
.m-change-accountant-document__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.m-change-accountant-timing__list {
  display: flex;
  flex-direction: column;
  gap: calc(24 * 1rem / var(--font-size));
  inline-size: 100%;
  margin-block-start: calc(40 * 1rem / var(--font-size));
  padding-inline-start: 0;
  list-style: none;
}

.m-change-accountant-timing__item {
  padding: calc(32 * 1rem / var(--font-size)) calc(40 * 1rem / var(--font-size));
  border-radius: calc(16 * 1rem / var(--font-size));
  background-color: var(--color__white);
}

.m-change-accountant-timing__head {
  display: flex;
  align-items: center;
  gap: calc(8 * 1rem / var(--font-size));
}

.m-change-accountant-timing__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: calc(28 * 1rem / var(--font-size));
  block-size: calc(28 * 1rem / var(--font-size));
}

.m-change-accountant-timing__icon svg {
  inline-size: 100%;
  block-size: 100%;
}

.m-change-accountant-timing__title {
  font-family: var(--font-family__zen);
  font-size: calc(20 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color__black);
}

/* 見出し下の点線（既存 m-dotted-underline のトーンだけ調整） */
.m-change-accountant-timing__title.m-dotted-underline {
  --_dot-color: var(--color__gray300);
  --_dot-radius-x: calc(1.5 * 1rem / var(--font-size));
  --_dot-radius-y: calc(1.5 * 1rem / var(--font-size));
  --_dot-pitch: calc(6 * 1rem / var(--font-size));
  --_dot-track: calc(3 * 1rem / var(--font-size));
  --_underline-offset: calc(6 * 1rem / var(--font-size));
}

.m-change-accountant-timing__text {
  margin-block-start: calc(16 * 1rem / var(--font-size));
  font-family: var(--font-family__zen);
  font-size: calc(14 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color__black);
}

/* =========================================
   4. DOCUMENT（引継ぎに必要な書類）
   Figma: node 4816-26502
   2列 528 / gap24 / 5枚目は中央寄せ
   ========================================= */
.m-change-accountant-document {
  padding-block: calc(100 * 1rem / var(--font-size)) calc(80 * 1rem / var(--font-size));
  border-end-start-radius: calc(40 * 1rem / var(--font-size));
  border-end-end-radius: calc(40 * 1rem / var(--font-size));
}

.m-change-accountant-document__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(24 * 1rem / var(--font-size));
  inline-size: 100%;
  margin-block-start: calc(40 * 1rem / var(--font-size));
  padding-inline-start: 0;
  list-style: none;
}

.m-change-accountant-document__item {
  position: relative;
  padding: calc(28 * 1rem / var(--font-size)) calc(32 * 1rem / var(--font-size));
  border-radius: calc(16 * 1rem / var(--font-size));
  background-color: var(--color__white);
}

/* 5枚目は2列グリッドの中央にまたがる */
.m-change-accountant-document__item:nth-child(5) {
  grid-column: 1 / -1;
  inline-size: calc(100% - 24 * 1rem / var(--font-size));
  max-inline-size: calc(528 * 1rem / var(--font-size));
  margin-inline: auto;
}

.m-change-accountant-document__num {
  position: absolute;
  inset-block-start: calc(20 * 1rem / var(--font-size));
  inset-inline-end: calc(32 * 1rem / var(--font-size));
  font-family: var(--font-family__montserrat);
  font-size: calc(40 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color__yellow);
}

.m-change-accountant-document__title {
  position: relative;
  z-index: 1;
  padding-inline-end: calc(64 * 1rem / var(--font-size));
  font-family: var(--font-family__zen);
  font-size: calc(17 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color__black);
}

.m-change-accountant-document__points {
  margin-block-start: calc(12 * 1rem / var(--font-size));
  padding-inline-start: 0;
  list-style: none;
}

.m-change-accountant-document__point {
  position: relative;
  padding-inline-start: calc(16 * 1rem / var(--font-size));
  font-family: var(--font-family__zen);
  font-size: calc(14 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--color__black);
}

.m-change-accountant-document__point::before {
  content: "・";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.m-change-accountant-document__notes {
  inline-size: 100%;
  margin-block-start: calc(32 * 1rem / var(--font-size));
  font-family: var(--font-family__zen);
  font-size: calc(11 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--color__gray500);
}

/* =========================================
   5. COMPANY（事務所概要）
   表と地図そのものは .m-top-company__*（style.css）を共用しているため、
   ここではセクションの余白・背景だけを定義する。
   前後の MESSAGE / FAQ と同じ gray100 背景で連続させる。
   （freee導入LP・粗利改善LP と同じ作り）
   ========================================= */
.m-change-accountant-access {
  padding-block: calc(60 * 1rem / var(--font-size)) calc(20 * 1rem / var(--font-size));
  background-color: var(--color__gray100);
}

.m-change-accountant-access__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================
   SP（max-width: 767px）
   ========================================= */
@media (max-width: 767px) {

  /* --- 1. FV --- */
  .m-change-accountant-hero .m-freee-support-hero__mv {
    inline-size: calc(520 * 1rem / var(--font-size));
    block-size: calc(232 * 1rem / var(--font-size));
  }

  /* SP は「京都で税理士変更をお考えなら」が1行に収まるサイズに落とす */
  .m-change-accountant-hero .m-freee-support-hero__title {
    font-size: calc(20 * 1rem / var(--font-size));
  }

  .m-change-accountant-hero .m-freee-support-hero__catch-line {
    white-space: normal;
  }

  .m-change-accountant-hero .m-freee-support-hero__catch-word--l {
    font-size: calc(26 * 1rem / var(--font-size));
  }

  /* --- 2. CHECK LIST --- */
  .m-change-accountant-checklist {
    padding-block: calc(40 * 1rem / var(--font-size));
  }

  .m-change-accountant-checklist__board {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(12 * 1rem / var(--font-size));
    margin-block-start: calc(24 * 1rem / var(--font-size));
    padding: calc(24 * 1rem / var(--font-size)) calc(20 * 1rem / var(--font-size));
    border-radius: calc(12 * 1rem / var(--font-size));
  }

  .m-change-accountant-checklist__list {
    gap: calc(12 * 1rem / var(--font-size));
  }

  .m-change-accountant-checklist__mark {
    inline-size: calc(20 * 1rem / var(--font-size));
    block-size: calc(20 * 1rem / var(--font-size));
  }

  .m-change-accountant-checklist__text {
    font-size: calc(14 * 1rem / var(--font-size));
    line-height: 1.8;
  }

  /* 吹き出しは上、イラストは下に回して縦積み（しっぽも下向きに） */
  .m-change-accountant-checklist__result {
    flex-direction: column;
    gap: calc(20 * 1rem / var(--font-size));
    margin-block-start: calc(28 * 1rem / var(--font-size));
  }

  .m-change-accountant-checklist__balloon {
    inline-size: 100%;
    max-inline-size: calc(320 * 1rem / var(--font-size));
    padding: calc(20 * 1rem / var(--font-size));
  }

  .m-change-accountant-checklist__balloon::before,
  .m-change-accountant-checklist__balloon::after {
    inset-block-start: auto;
    inset-inline-start: 50%;
    border-block: 0;
    border-inline: calc(12 * 1rem / var(--font-size)) solid transparent;
    transform: translateX(-50%);
  }

  .m-change-accountant-checklist__balloon::before {
    inset-block-start: 100%;
    border-block-start: calc(20 * 1rem / var(--font-size)) solid var(--color__black);
  }

  .m-change-accountant-checklist__balloon::after {
    inset-block-start: calc(100% - 3 * 1rem / var(--font-size));
    border-block-start: calc(20 * 1rem / var(--font-size)) solid var(--color__white);
  }

  .m-change-accountant-checklist__balloon-text {
    font-size: calc(15 * 1rem / var(--font-size));
  }

  .m-change-accountant-checklist__illust {
    inline-size: calc(130 * 1rem / var(--font-size));
    block-size: calc(150 * 1rem / var(--font-size));
  }

  /* --- 3. TIMING --- */
  .m-change-accountant-timing {
    padding-block-start: calc(60 * 1rem / var(--font-size));
    border-start-start-radius: calc(24 * 1rem / var(--font-size));
    border-start-end-radius: calc(24 * 1rem / var(--font-size));
  }

  .m-change-accountant-timing__list {
    gap: calc(16 * 1rem / var(--font-size));
    margin-block-start: calc(24 * 1rem / var(--font-size));
  }

  .m-change-accountant-timing__item {
    padding: calc(24 * 1rem / var(--font-size)) calc(20 * 1rem / var(--font-size));
    border-radius: calc(12 * 1rem / var(--font-size));
  }

  .m-change-accountant-timing__icon {
    inline-size: calc(24 * 1rem / var(--font-size));
    block-size: calc(24 * 1rem / var(--font-size));
  }

  .m-change-accountant-timing__title {
    font-size: calc(17 * 1rem / var(--font-size));
  }

  .m-change-accountant-timing__text {
    margin-block-start: calc(12 * 1rem / var(--font-size));
    font-size: calc(13 * 1rem / var(--font-size));
    line-height: 1.9;
  }

  /* --- 4. DOCUMENT --- */
  .m-change-accountant-document {
    padding-block: calc(60 * 1rem / var(--font-size)) calc(48 * 1rem / var(--font-size));
    border-end-start-radius: calc(24 * 1rem / var(--font-size));
    border-end-end-radius: calc(24 * 1rem / var(--font-size));
  }

  .m-change-accountant-document__list {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(16 * 1rem / var(--font-size));
    margin-block-start: calc(24 * 1rem / var(--font-size));
  }

  .m-change-accountant-document__item {
    padding: calc(24 * 1rem / var(--font-size)) calc(20 * 1rem / var(--font-size));
    border-radius: calc(12 * 1rem / var(--font-size));
  }

  .m-change-accountant-document__item:nth-child(5) {
    inline-size: 100%;
    max-inline-size: none;
  }

  .m-change-accountant-document__num {
    inset-block-start: calc(16 * 1rem / var(--font-size));
    inset-inline-end: calc(20 * 1rem / var(--font-size));
    font-size: calc(32 * 1rem / var(--font-size));
  }

  .m-change-accountant-document__title {
    padding-inline-end: calc(52 * 1rem / var(--font-size));
    font-size: calc(16 * 1rem / var(--font-size));
  }

  .m-change-accountant-document__point {
    font-size: calc(13 * 1rem / var(--font-size));
  }

  .m-change-accountant-document__notes {
    margin-block-start: calc(24 * 1rem / var(--font-size));
    font-size: calc(10 * 1rem / var(--font-size));
  }

  /* --- 5. COMPANY --- */
  .m-change-accountant-access {
    padding-block: calc(40 * 1rem / var(--font-size)) 0;
  }
}

/* =========================================
   6. PLAN（税務顧問料）6列テーブル

   料金ページ（/fee/）の「法人｜通常の料金」に合わせて 6 列（売上＋5項目）に拡張する。
   基本スタイルは style.css の .m-incorporation-startup__* を流用しており、
   そちらは 4 列前提（head-cell:nth-child(4) / *:nth-last-child(-n+4)）のため
   修飾子 --fee で 6 列に上書きしている。

   ※同じ内容が incorporation.css にもあるが、あちらは会社設立LP専用に読み込まれる
     ファイルでこのページでは読み込まれない。両方を直す必要がある点に注意。
   ========================================= */
.m-incorporation-startup__table--fee {
  grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
}

.m-incorporation-startup__table--fee > * {
  block-size: auto;
  min-block-size: calc(64 * 1rem / var(--font-size));
  padding: calc(10 * 1rem / var(--font-size)) calc(6 * 1rem / var(--font-size));
  font-size: calc(14 * 1rem / var(--font-size));
}

/* ヘッダー行：4列版の「右端＝4列目」指定を打ち消し、6列目を右端にする */
.m-incorporation-startup__table--fee .m-incorporation-startup__head-cell {
  block-size: auto;
  min-block-size: calc(56 * 1rem / var(--font-size));
  font-size: calc(13 * 1rem / var(--font-size));
  line-height: 1.5;
}

.m-incorporation-startup__table--fee .m-incorporation-startup__head-cell:nth-child(4) {
  border-inline-end: calc(2 * 1rem / var(--font-size)) solid var(--color__white);
}

.m-incorporation-startup__table--fee .m-incorporation-startup__head-cell:nth-child(6) {
  border-inline-end: calc(2 * 1rem / var(--font-size)) solid var(--color__yellow);
}

/* 最終行の下線を消す指定も 4 列前提のため 6 列に合わせ直す */
.m-incorporation-startup__table--fee > *:nth-last-child(-n+4) {
  border-block-end: calc(2 * 1rem / var(--font-size)) solid var(--color__border-gray);
}

.m-incorporation-startup__table--fee > *:nth-last-child(-n+6) {
  border-block-end: 0;
}

/* 「報酬年額（記帳込み）」列を強調 */
.m-incorporation-startup__table--fee .m-incorporation-startup__price-cell--highlight {
  background-color: var(--color__yellow-pale, #fffdf2);
}

.m-incorporation-startup__table--fee .m-incorporation-startup__num {
  font-size: calc(16 * 1rem / var(--font-size));
}

.m-incorporation-startup__table--fee .m-incorporation-startup__unit {
  font-size: calc(13 * 1rem / var(--font-size));
}

.m-incorporation-startup__free {
  font-family: var(--font-family__zen);
  font-size: calc(14 * 1rem / var(--font-size));
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .m-incorporation-startup__table--fee {
    grid-template-columns: calc(104 * 1rem / var(--font-size)) repeat(5, calc(96 * 1rem / var(--font-size)));
    min-inline-size: calc(584 * 1rem / var(--font-size));
  }

  .m-incorporation-startup__table--fee > * {
    padding: calc(10 * 1rem / var(--font-size)) calc(4 * 1rem / var(--font-size));
    font-size: calc(12 * 1rem / var(--font-size));
  }

  .m-incorporation-startup__table--fee .m-incorporation-startup__head-cell {
    font-size: calc(11 * 1rem / var(--font-size));
  }

  .m-incorporation-startup__table--fee .m-incorporation-startup__num {
    font-size: calc(13 * 1rem / var(--font-size));
  }

  .m-incorporation-startup__table--fee .m-incorporation-startup__unit,
  .m-incorporation-startup__free {
    font-size: calc(11 * 1rem / var(--font-size));
  }
}