@charset "utf-8";

/* =========================================================
   ご相談と料金（fees.html）専用スタイル
   共通部分は style.css を先に読み込むこと
   ※ 現時点は PC レイアウトのみ
   ========================================================= */

:root {
  --gold-deep: #8a6f3c;
  --paper-warm: #f6f3ec;
  --cream: #f4ecdc;
}

/* ---------- 下層ページのヘッダー（帯あり） ---------- */
.gnav-bar { padding: 20px 0; background: var(--navy-deep); }

.gnav--solid {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto;
}

/* ---------- パンくず ---------- */
.crumb {
  display: flex;
  align-items: center;
  height: 60px;
  background: var(--paper);
}

.crumb__inner {
  width: min(var(--container-w), 100% - var(--gutter) * 2);
  margin: 0 auto;
  font-size: 16px;
  line-height: 32px;
  color: var(--navy);
}

.crumb__inner span { margin: 0 12px; }
.crumb__inner a { transition: color .25s ease; }
.crumb__inner a:hover { color: var(--gold); }


/* =========================================================
   FV
   ========================================================= */
.fhero {
  position: relative;
  display: flex;
  align-items: center;
  height: 1000px;
  padding: 150px 0 200px;
  overflow: hidden;
  background: radial-gradient(137.8% 295.8% at 97.6% 2.6%, #043187 0%, #0a1430 26.9%, #0a1430 80.3%, #052864 100%);
}

.fhero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1422px, 100% - var(--gutter) * 2);
  margin: 0 auto;
}

.fhero__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.fhero__head { display: flex; flex-direction: column; gap: 30px; }

.fhero__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  height: 60px;
  padding: 5px 20px;
  background: linear-gradient(102.3deg, #9e8149 .3%, #745820 100%);
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: #fff;
}

.fhero__badge svg { width: 40px; height: 40px; flex: none; margin-inline: 10px; }

.fhero__title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 64px;
  line-height: 80px;
  color: var(--paper);
}

.fhero__rule {
  width: 904px;
  max-width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #ffffff 0%, rgba(66, 80, 103, .2) 100%);
}

/* お困りごとの3行 */
.fhero__quotes { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }

.fhero__quotes li {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--gold);
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
  color: #fff;
}

.fhero__quotes img { flex: none; width: 36px; height: 36px; }

.fhero__text {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: .2em;
  color: #fff;
}

/* 写真 */
.fhero__photo {
  position: relative;
  flex: none;
  width: 480px;
  height: 623px;
}

.fhero__photo img {
  position: absolute;
  top: 23px;
  left: 0;
  width: 450px;
  height: 600px;
  max-width: none;
  object-fit: cover;
}

.fhero__frame {
  position: absolute;
  top: 0;
  left: 30px;
  width: 450px;
  height: 600px;
  border: 1px solid var(--gold-light);
}

/* 軌道装飾 */
.fhero__orbits {
  position: absolute;
  top: -170px;
  left: 50%;
  margin-left: calc(var(--canvas-w) / -2);
  width: var(--canvas-w);
  height: 1710px;
  /* 文字より前に出さない */
  z-index: 0;
  pointer-events: none;
}

.fhero__orbits > span {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
}

.fhero__orbit1 {
  width: 3415px; height: 2112px;
  transform: matrix(-0.96593, -0.25882, 0.25882, -0.96593, 2500.90186, 1706.29272) translate(227px, 218px);
}

.fhero__orbit2 {
  width: 3001px; height: 2112px;
  transform: matrix(-0.96593, -0.25882, 0.25882, -0.96593, 2500.90186, 1706.29272) matrix(0.96593, -0.25882, 0.25882, 0.96593, 0.18442, 762.21692);
}

.fhero__orbit3 {
  width: 3160.86px; height: 2042.64px;
  transform: matrix(-0.96593, -0.25882, 0.25882, -0.96593, 2500.90186, 1706.29272) matrix(0.96593, -0.25882, 0.25882, 0.96593, -99.31792, 935.04083);
}


/* =========================================================
   セクション共通
   ========================================================= */
.sec { position: relative; padding: 120px 0; }

.sec .sec-head { margin-bottom: 100px; }

.sec__body { display: flex; flex-direction: column; gap: 80px; }

/* 小見出しブロック */
.blk__head { display: flex; flex-direction: column; gap: 20px; }

.blk__title {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--navy-deep);
}

.blk__title img {
  flex: none;
  width: 50px;
  height: 50px;
  filter: brightness(0) saturate(100%) invert(4%) sepia(31%) saturate(3900%) hue-rotate(207deg) brightness(97%) contrast(101%);
}

.blk__line {
  width: 700px;
  max-width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #010c21 0%, rgba(191, 209, 244, .5) 100%);
}

.blk__lead {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--navy-deep);
}

/* 強調の一文 */
.say {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 128px;
  padding: 40px;
  background: var(--paper);
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 48px;
  text-align: center;
  color: var(--ink);
}

.say--navy {
  min-height: 164px;
  background: linear-gradient(135deg, #0c1b52 0%, #010c21 100%);
  color: #fff;
}

.say--navy small {
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .8);
}


/* =========================================================
   01 こんなご相談をいただきます
   ========================================================= */
.sec--examples { padding: 450px 0 120px; background: #fff; }

/* このページの内容：3列×2段 */
.pn--sub { top: -592px; }

.pn__list--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: auto;
}

.pn__list--grid > li { flex: none; min-height: 220px; }

.pn__list--grid > li:nth-child(3n+1)::before { display: none; }

.pn__list--grid > li:nth-child(n+4) { box-shadow: inset 0 1px 0 var(--line-soft); }

/* ご相談の例 */
.cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-top: 16px;
}

.case {
  min-height: 301px;
  padding: 32px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-soft), 0 14px 34px rgba(10, 20, 48, .06);
}

.case__no {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 36px;
  line-height: 36px;
  color: var(--gold);
}

.case h4 {
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--ink);
}

.case > ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.case > ul > li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}

.case > ul > li::before {
  content: "›";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  color: var(--gold);
}


/* =========================================================
   02 初回相談（無料）
   ========================================================= */
.sec--first { background: var(--paper); }

.first-grid {
  display: grid;
  grid-template-columns: minmax(0, 880fr) minmax(0, 440fr);
  gap: 80px;
  align-items: start;
}

/* 初回でやること */
.firsts { border-top: 2px solid var(--navy-deep); }

.firsts li {
  display: flex;
  align-items: flex-start;
  gap: 47px;
  padding: 28px 0 25px;
  border-bottom: 1px solid var(--line-soft);
}

.firsts li img { flex: none; width: 40px; height: 40px; margin-top: 14px; }

.firsts b {
  display: block;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--ink);
}

.firsts small {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}

.firsts li.firsts__last { align-items: center; padding: 12px 0 9px; }

/* 初回相談の基本情報 */
.facts {
  padding: 32px;
  background: linear-gradient(180deg, #1e4580 0%, #032658 100%);
}

.facts > div {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.facts > div:last-child { border-bottom: 0; }

.facts dt {
  flex: none;
  width: 64px;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .8);
}

.facts dd {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.facts dd.facts__hi {
  font-family: var(--f-serif);
  font-weight: 900;
  font-size: 24px;
  line-height: 36px;
  color: var(--gold-light);
}

.facts dd small {
  display: block;
  margin-top: .5px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, .8);
}

/* 無料と有料の比較表 */
.cmp { background: #fff; }

.cmp__table { width: 100%; border-collapse: collapse; text-align: left; }

.cmp__table thead th {
  height: 73px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.cmp__table thead th:first-child { width: 173px; background: var(--paper); }
.cmp__free { background: var(--navy); }
.cmp__paid { background: linear-gradient(90deg, #9e8149 0%, #745820 100%); }

.cmp__table tbody th,
.cmp__table tbody td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
}

.cmp__table tbody th {
  width: 173px;
  background: var(--paper);
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}

.cmp__table tbody td { width: 614px; }


/* =========================================================
   03 有料相談と料金
   ========================================================= */
.sec--levels {
  background: linear-gradient(214.6deg, #052864 -.9%, #0a1430 48.2%, #052864 101.1%);
}

.levels { display: flex; flex-direction: column; gap: 60px; padding-top: 24px; }

.level {
  display: grid;
  grid-template-columns: minmax(0, 817fr) minmax(0, 583fr);
  background: #fff;
  overflow: hidden;
}

.level__main { padding: 40px; }

.level__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  background: var(--navy);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 3px;
  color: #fff;
}

.level__main h3 {
  margin-top: 16px;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 52px;
  color: var(--ink);
}

.level__for {
  margin-top: 8px;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--gold-deep);
}

.level__list {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.level__list li {
  position: relative;
  padding: 12px 0 12px 31px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
}

.level__list li img { position: absolute; top: 16px; left: 0; width: 19px; height: 19px; }

.level__fee {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(150deg, #0c1b52 0%, #010c21 100%);
}

.level__fee > small {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 3px;
  color: var(--gold-light);
}

.level__price {
  display: block;
  margin-top: 8px;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 48px;
  line-height: 52px;
  background: linear-gradient(171deg, #f3d493 -72.6%, #e8b85c 25.5%, #b58e4a 172.6%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.level__price span { font-size: 24px; line-height: 36px; }

/* 金額の代わりに、3枚で違う「回数・期間」を大きく出す。
   48px の数字が左の箇条書きとの釣り合いを取っていたので、
   同じくらいの重さになる大きさにしている。
   料金そのものは、下の行に落としている */
.level__price--plan { font-size: 40px; line-height: 56px; }

.level__price--plan span {
  display: block;
  margin-top: 6px;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: .04em;
  /* 親の金のグラデーションを打ち消して、白にする */
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, .78);
  color: rgba(255, 255, 255, .78);
}

/* 料金の行に添える一言 */
.level__fee dd small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 22px;
  color: rgba(255, 255, 255, .6);
}

.level__fee dl { margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); }

.level__fee dl > div {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.level__fee dt {
  flex: none;
  width: 80px;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .8);
}

.level__fee dd {
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

/* 3プラン共通 */
.common {
  margin-top: 100px;
  padding: 32px 40px;
  background: var(--cream);
}

.common h4 {
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--ink);
}

.common ul { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.common li {
  position: relative;
  padding-left: 24px;
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
}

.common li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: var(--gold);
}


/* =========================================================
   04 ご相談の流れ・方法
   ========================================================= */
.sec--steps { background: #fff; }

.steps7 { display: flex; flex-direction: column; gap: 16px; }

.steps7 li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
}

.steps7 li + li::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 47px;
  width: 1px;
  height: 16px;
  background: var(--line);
}

.steps7__no {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--navy);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
}

.steps7__no--gold { background: linear-gradient(135deg, #e8b85c 0%, #745820 100%); }

.steps7 b {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--ink);
}

.steps7 small {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}

.steps7__hl {
  background: linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
  border: 2px solid var(--gold);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

.tag--ghost { background: var(--cream); color: var(--gold-deep); }
.tag--gold { background: var(--gold); color: #fff; }

/* フォームのお願い */
.notes { display: flex; flex-direction: column; gap: 12px; }

.notes li img { flex: none; width: 21px; height: 21px; }

.notes li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 16px 20px;
  background: var(--paper);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
}

/* ご相談の方法 */
.how { display: flex; flex-direction: column; gap: 60px; }

.how .blk__head { gap: 20px; }

/* 情報の表（JUDGEとは のプロフィール表と同じ作り） */
.dtable {
  padding-top: 40px;
  border-top: 6px solid var(--navy-deep);
}

.dtable__row {
  display: flex;
  align-items: center;
  gap: 69px;
  margin: 0;
  padding: 7px 0 19px;
  border-bottom: 2px solid #d9d9d9;
}

.dtable__row + .dtable__row { margin-top: 27px; }

.dtable dt {
  flex: none;
  width: 215px;          /* 文字144 + 余白69 + 罫線2 */
  padding-right: 69px;
  border-right: 2px solid #d9d9d9;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--navy);
}

.dtable dd {
  margin: 0;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: var(--muted);
}


/* =========================================================
   05 お支払い・書面
   ========================================================= */
.sec--pay { background: var(--paper-warm); }

.pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 570fr) minmax(0, 798fr);
  gap: 32px;
  align-items: start;
}

.paybox { background: #fff; box-shadow: 0 0 0 1px var(--line-soft); }

.paybox__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--navy);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.paybox--gold .paybox__head { background: linear-gradient(90deg, #9e8149 0%, #745820 100%); }

.paybox__head img { flex: none; width: 22px; height: 22px; }

.paybox table { width: 100%; border-collapse: collapse; text-align: left; }

.paybox th,
.paybox td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  line-height: 28px;
  vertical-align: top;
}

.paybox th {
  width: 180px;
  background: var(--paper);
  font-weight: 700;
  color: var(--navy);
}

.paybox td { color: var(--ink); }
.paybox td b { font-weight: 700; }

.paybox tr:last-child th,
.paybox tr:last-child td { border-bottom: 0; }

.paybox__link { padding: 23px 24px; }

.paybox__link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--gold-deep);
  transition: color .25s ease;
}

.paybox__link svg { width: 18px; height: 18px; flex: none; transition: transform .25s ease; }
.paybox__link a:hover svg { transform: translateX(4px); }

/* 書面の一覧 */
.docs-blk { display: flex; flex-direction: column; gap: 60px; }

.docs {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-soft);
}

.docs th,
.docs td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  line-height: 28px;
  vertical-align: top;
}

.docs th {
  width: 532px;
  background: var(--paper);
  font-weight: 700;
  color: var(--ink);
}

.docs td { color: var(--ink); }
.docs td b { font-weight: 700; }

.docs tr:last-child th,
.docs tr:last-child td { border-bottom: 0; }

.docs td.docs__pdf { width: 130px; text-align: right; }

.docs td.docs__pdf a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--gold);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  color: var(--gold-deep);
  transition: background-color .25s ease, color .25s ease;
}

.docs td.docs__pdf svg { width: 16px; height: 16px; flex: none; }
.docs td.docs__pdf a:hover { background: var(--gold); color: #fff; }

/* 情報提供の注記 */
.privacy {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 28px;
  background: #fff;
  border-left: 4px solid var(--gold);
}

.privacy img { flex: none; width: 40px; height: 40px; }

.privacy b {
  flex: none;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
}

.privacy small {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
}

/* =========================================================
   751px〜1500px：内容幅が足りなくなる箇所を組み替える
   ========================================================= */
@media (max-width: 1500px) and (min-width: 751px) {
  .fhero__title { font-size: 52px; line-height: 72px; }
  .fhero__quotes li { font-size: 25px; line-height: 36px; }
}

@media (max-width: 1200px) and (min-width: 751px) {
  /* FV は縦積みに */
  .fhero { display: block; height: auto; padding: 100px 0 140px; }
  .fhero__inner { display: block; }
  .fhero__title { font-size: 46px; line-height: 68px; }

  .fhero__photo {
    width: 100%;
    max-width: 640px;
    height: 640px;
    margin: 60px auto 0;
  }

  .fhero__photo img { top: 30px; width: 600px; height: 600px; }
  .fhero__frame { left: 40px; width: 600px; height: 600px; }

  /* このページの内容は FV に重ねず、流し込みに */
  .sec--examples { padding: 0 0 120px; }
  .sec--examples .sec-head { margin-top: 120px; }

  .pn--sub {
    position: relative;
    top: -110px;
    left: 0;
    margin-bottom: -60px;
  }

  /* 事例カードは3列 */
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 初回相談・お支払いは縦積み */
  .first-grid { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .pay-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) and (min-width: 751px) {
  /* 事例カードは2列 */
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 料金カードは内容と金額を縦積み */
  .level { grid-template-columns: minmax(0, 1fr); }
  .level__fee { padding: 32px 40px 40px; }

  /* 情報の表は2行組みに */
  .dtable__row { display: block; padding: 6px 0 18px; }
  .dtable dt { width: auto; padding-right: 0; border-right: 0; }
  .dtable dt br { display: none; }
  .dtable dd { margin-top: 6px; }

  /* 注記は折り返す */
  .privacy { height: auto; flex-wrap: wrap; padding: 24px 28px; }
  .privacy b { flex: 1 1 100%; }
  .privacy small { flex: 1 1 100%; }
}

@media (max-width: 900px) and (min-width: 751px) {
  .cmp__table thead th,
  .cmp__table tbody th,
  .cmp__table tbody td { padding: 16px; font-size: 18px; }

  .cmp__table thead th:first-child,
  .cmp__table tbody th { width: 130px; }

  .docs th { width: 320px; }
  .docs td.docs__pdf { width: 110px; }

  .steps7 b { font-size: 22px; }

  .next__grid { grid-template-columns: minmax(0, 1fr); }
}


/* =========================================================
   NEXT Content（他ページと同じ作り）
   ========================================================= */
.next { padding: 120px 0; overflow: hidden; background: #fff; }

.next__en {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 46px;
  line-height: 55px;
  letter-spacing: .1em;
  color: var(--gold);
}

.next__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  margin-top: 40px;
}

.next__card {
  position: relative;
  display: block;
  height: 253px;
  overflow: hidden;
}

.next__card--policy {
  background: linear-gradient(rgba(51, 34, 0, .7), rgba(51, 34, 0, .7)),
              url("../img/policy-hero.jpg") no-repeat 0 70.99% / 100% 148.97%;
}

.next__card--network {
  background: linear-gradient(rgba(1, 21, 50, .5), rgba(1, 21, 50, .5)),
              url("../img/next-network.jpg") no-repeat center / cover;
}

.next__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px;
}

.next__label {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--gold-light);
}

.next__title {
  margin-top: 20px;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #fff;
}

.next__go {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.next__go svg { width: 20px; height: 20px; flex: none; transition: transform .25s ease; }
.next__card:hover .next__go svg { transform: translateX(5px); }

/* =========================================================
   750px 以下：SP レイアウト（1rem = 10 設計px）
   ========================================================= */
@media (max-width: 750px) {

  /* ---------- ヘッダーの帯（SP では固定ヘッダーなので不要） ---------- */
  .gnav-bar { padding: 0; background: none; }

  /* ---------- パンくず ---------- */
  .crumb {
    height: 8rem;
    margin-top: 11rem;
  }

  .crumb__inner {
    width: calc(100% - var(--gutter) * 2);
    font-size: 2.4rem;
    line-height: 1.6;
  }

  .crumb__inner span { margin: 0 1rem; }


  /* =========================================================
     FV
     ========================================================= */
  .fhero {
    display: block;
    height: auto;
    padding: 8rem 0 12rem;
    background: radial-gradient(137.8% 200% at 97.6% 2.6%, #043187 0%, #0a1430 26.9%, #0a1430 80.3%, #052864 100%);
  }

  .fhero__orbits {
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
  }

  .fhero__orbits > span { border-color: rgba(255, 255, 255, .3); }

  .fhero__orbit1 { width: 150rem; height: 62rem; transform: rotate(-14deg) translate(-52rem, 14rem); }
  .fhero__orbit2 { width: 140rem; height: 54rem; transform: rotate(9deg) translate(-30rem, 30rem); }
  .fhero__orbit3 { width: 128rem; height: 76rem; transform: rotate(-4deg) translate(-16rem, 8rem); }

  .fhero__inner {
    display: block;
    width: calc(100% - var(--gutter) * 2);
  }

  .fhero__body { width: 100%; gap: 4rem; }

  .fhero__head { gap: 3rem; }

  .fhero__badge {
    gap: 1.2rem;
    height: 6.4rem;
    padding: .5rem 2.4rem;
    font-size: 2.8rem;
    line-height: 1.4;
  }

  .fhero__badge svg { width: 4rem; height: 4rem; margin-inline: 0; }

  .fhero__title { font-size: 4.6rem; line-height: 1.5; }

  .fhero__rule { width: 100%; height: .6rem; }

  /* お困りごとの3行 */
  .fhero__quotes { gap: 2.4rem; align-items: stretch; }

  .fhero__quotes li {
    align-items: flex-start;
    gap: 1.2rem;
    padding-bottom: 1rem;
    border-bottom-width: .2rem;
    font-size: 2.5rem;
    line-height: 1.65;
  }

  .fhero__quotes img { width: 3.2rem; height: 3.2rem; margin-top: .4rem; }

  .fhero__text { font-size: 2.5rem; line-height: 1.9; letter-spacing: .06em; }

  /* 写真 */
  .fhero__photo {
    width: 100%;
    height: 56rem;
    margin-top: 6rem;
  }

  .fhero__photo img { top: 4rem; left: 0; width: 62rem; height: 52rem; }
  .fhero__frame { top: 0; left: 5rem; width: 62rem; height: 52rem; }


  /* =========================================================
     セクション共通
     ========================================================= */
  .sec { padding: 10rem 0; }

  .sec .sec-head { margin-bottom: 6rem; }

  .sec__body { gap: 8rem; }

  .blk__head { gap: 2rem; }

  .blk__title { gap: 2rem; font-size: 3.4rem; line-height: 1.5; }

  .blk__title img { width: 6rem; height: 6rem; }

  .blk__line { width: 100%; }

  .blk__lead { font-size: 2.6rem; line-height: 1.85; }

  .say {
    min-height: 0;
    padding: 4rem 3rem;
    font-size: 3rem;
    line-height: 1.6;
  }

  .say--navy { min-height: 0; padding: 4rem 3rem; gap: 1.6rem; }

  .say--navy small { font-size: 2.3rem; line-height: 1.7; }


  /* =========================================================
     01 こんなご相談をいただきます
     ========================================================= */
  .sec--examples { padding: 0 0 10rem; }

  .sec--examples .sec-head { margin-top: 0; }

  .pn {
    position: relative;
    top: -8rem;
    left: 0;
    margin-bottom: -4rem;
  }

  .pn__list--grid { display: block; height: auto; }
  .pn__list--grid > li { min-height: 0; }
  .pn__list--grid > li:nth-child(n+4) { box-shadow: none; }

  .cases {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    padding-top: 0;
  }

  .case { min-height: 0; padding: 3.2rem 3rem 3.6rem; }

  .case__no { font-size: 3.6rem; line-height: 1; }

  .case h4 {
    margin-top: 1.2rem;
    padding-bottom: 1.2rem;
    font-size: 3rem;
    line-height: 1.5;
  }

  .case > ul { margin-top: 1.6rem; gap: 1rem; }

  .case > ul > li { padding-left: 2.2rem; font-size: 2.4rem; line-height: 1.75; }


  /* =========================================================
     02 初回相談（無料）
     ========================================================= */
  .first-grid { grid-template-columns: minmax(0, 1fr); gap: 5rem; }

  .firsts { border-top-width: .2rem; }

  .firsts li { gap: 2.8rem; padding: 3rem 0 3rem; }

  .firsts li img { width: 4.4rem; height: 4.4rem; margin-top: .4rem; }

  .firsts b { font-size: 2.8rem; line-height: 1.55; }

  .firsts small { margin-top: .8rem; font-size: 2.3rem; line-height: 1.7; }

  .firsts li.firsts__last { align-items: flex-start; padding: 3rem 0; }

  .facts { padding: 3.2rem 3rem; }

  .facts > div { gap: 2rem; padding: 2rem 0; }

  .facts dt { width: 9rem; font-size: 2.3rem; line-height: 1.7; }

  .facts dd { font-size: 2.8rem; line-height: 1.6; }

  .facts dd.facts__hi { font-size: 3.4rem; line-height: 1.5; }

  .facts dd small { margin-top: .6rem; font-size: 2.2rem; line-height: 1.5; }

  /* 比較表：2行組み */
  .cmp__table,
  .cmp__table tbody,
  .cmp__table tr,
  .cmp__table th,
  .cmp__table td { display: block; width: auto; }

  .cmp__table thead { display: none; }

  .cmp__table tbody tr { padding: 0 0 3rem; }

  .cmp__table tbody th {
    width: auto;
    padding: 2rem 3rem;
    background: var(--paper);
    font-size: 2.4rem;
    line-height: 1.6;
  }

  .cmp__table tbody td {
    position: relative;
    width: auto;
    padding: 2rem 3rem 2rem 15rem;
    font-size: 2.6rem;
    line-height: 1.7;
  }

  .cmp__table tbody td::before {
    content: "無料";
    position: absolute;
    top: 2rem;
    left: 3rem;
    width: 11rem;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.6;
    color: var(--navy);
  }

  .cmp__table tbody td + td::before { content: "有料"; color: var(--gold-deep); }


  /* =========================================================
     03 有料相談と料金
     ========================================================= */
  .levels { gap: 4rem; padding-top: 0; }

  .level { grid-template-columns: minmax(0, 1fr); }

  .level__main { padding: 3.6rem 3rem 4rem; }

  .level__tag { padding: .4rem 1.6rem; font-size: 2.2rem; line-height: 1.6; letter-spacing: .2em; }

  .level__main h3 { margin-top: 1.6rem; font-size: 3.6rem; line-height: 1.5; }

  .level__for { margin-top: 1rem; font-size: 2.5rem; line-height: 1.7; }

  .level__list { margin-top: 1.6rem; padding-top: 1.6rem; }

  .level__list li { padding: 1.6rem 0 1.6rem 3.8rem; font-size: 2.5rem; line-height: 1.75; }

  .level__list li img { top: 2.2rem; width: 2.4rem; height: 2.4rem; }

  .level__fee { padding: 3.2rem 3rem 4rem; }

  .level__fee > small { font-size: 2.2rem; line-height: 1.6; letter-spacing: .2em; }

  .level__price { margin-top: 1rem; font-size: 5.6rem; line-height: 1.2; }

  .level__price span { font-size: 2.8rem; }
  .level__price--plan { font-size: 4.4rem; line-height: 1.4; }
  .level__price--plan span { margin-top: .8rem; font-size: 2.2rem; line-height: 1.7; }
  .level__fee dd small { font-size: 2rem; line-height: 1.6; }

  .level__fee dl { margin-top: 2.4rem; }

  .level__fee dl > div { gap: 2rem; padding: 1.6rem 0; }

  .level__fee dt { width: 9rem; font-size: 2.3rem; line-height: 1.7; }

  .level__fee dd { font-size: 2.6rem; line-height: 1.6; }

  /* 3プラン共通 */
  .common { margin-top: 6rem; padding: 3.2rem 3rem 4rem; }

  .common h4 { font-size: 3rem; line-height: 1.5; }

  .common ul { margin-top: 2rem; gap: 1.6rem; }

  .common li { padding-left: 2.8rem; font-size: 2.5rem; line-height: 1.8; }

  .common li::before { top: 1.6rem; left: .4rem; width: 1rem; height: 1rem; }


  /* =========================================================
     04 ご相談の流れ・方法
     ========================================================= */
  .steps7 { gap: 2rem; }

  .steps7 li { gap: 2rem; padding: 2.4rem 2.4rem 2.8rem; }

  .steps7 li + li::before { top: -2rem; left: 5.2rem; height: 2rem; }

  .steps7__no { width: 5.2rem; height: 5.2rem; font-size: 2.2rem; }

  .steps7 b { flex-wrap: wrap; gap: 1.2rem; font-size: 2.8rem; line-height: 1.55; }

  .steps7 small { margin-top: .8rem; font-size: 2.3rem; line-height: 1.7; }

  .tag { padding: .2rem 1.2rem; font-size: 2.1rem; line-height: 1.6; }

  /* フォームのお願い */
  .notes { gap: 1.6rem; }

  .notes li {
    align-items: flex-start;
    gap: 1.4rem;
    height: auto;
    padding: 2.2rem 2.4rem;
    font-size: 2.6rem;
    line-height: 1.7;
  }

  .notes li img { width: 2.8rem; height: 2.8rem; margin-top: .6rem; }

  /* ご相談の方法 */
  .how { gap: 5rem; }

  /* 情報の表：2行組み */
  .dtable { padding-top: 3rem; border-top-width: .6rem; }

  .dtable__row {
    display: block;
    gap: 0;
    padding: 1.6rem 0 2rem;
    border-bottom-width: .2rem;
  }

  .dtable__row + .dtable__row { margin-top: 2rem; }

  .dtable dt {
    width: auto;
    padding-right: 0;
    border-right: 0;
    font-size: 2.6rem;
    line-height: 1.5;
  }

  .dtable dt br { display: none; }

  .dtable dd { margin-top: .6rem; font-size: 2.6rem; line-height: 1.7; }


  /* =========================================================
     05 お支払い・書面
     ========================================================= */
  .pay-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }

  .paybox__head { gap: 1.4rem; padding: 2rem 2.4rem; font-size: 2.8rem; line-height: 1.5; }

  .paybox table,
  .paybox tbody,
  .paybox tr,
  .paybox th,
  .paybox td { display: block; width: auto; }

  .paybox th {
    padding: 1.6rem 2.4rem;
    border-bottom: 0;
    font-size: 2.4rem;
    line-height: 1.6;
  }

  .paybox td {
    padding: .4rem 2.4rem 2.4rem;
    font-size: 2.4rem;
    line-height: 1.75;
  }

  .paybox__link { padding: 2.4rem; }

  .paybox__link a { font-size: 2.4rem; line-height: 1.6; }

  .paybox__link svg { width: 2.4rem; height: 2.4rem; }

  /* 書面の一覧：2行組み */
  .docs-blk { gap: 5rem; }

  .docs,
  .docs tbody,
  .docs tr,
  .docs th,
  .docs td { display: block; width: auto; }

  .docs tr { position: relative; padding-bottom: 2.4rem; border-bottom: 1px solid var(--line-soft); }

  .docs tr:last-child { border-bottom: 0; }

  .docs th {
    width: auto;
    padding: 2.4rem 14rem 0 2.4rem;
    background: none;
    font-size: 2.7rem;
    line-height: 1.55;
  }

  .docs td {
    width: auto;
    padding: .8rem 14rem 0 2.4rem;
    font-size: 2.3rem;
    line-height: 1.7;
    color: var(--muted);
  }

  .docs td.docs__pdf {
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    padding: 0;
    width: auto;
  }

  .docs td.docs__pdf a { gap: 1rem; padding: .8rem 1.6rem; font-size: 2.2rem; line-height: 1.6; }

  .docs td.docs__pdf svg { width: 2.2rem; height: 2.2rem; }

  /* 情報提供の注記 */
  .privacy {
    flex-wrap: wrap;
    gap: 1.2rem;
    height: auto;
    padding: 3rem;
  }

  .privacy img { width: 5.2rem; height: 5.2rem; }

  .privacy b { flex: 1 1 calc(100% - 6.4rem); font-size: 2.7rem; line-height: 1.6; }

  .privacy small { flex: 1 1 100%; font-size: 2.3rem; line-height: 1.7; }


  /* =========================================================
     NEXT Content
     ========================================================= */
  .next { padding: 10rem 0; }

  .next__en { font-size: 4.4rem; line-height: 1.3; }

  .next__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; margin-top: 4rem; }

  .next__card { height: 30rem; }

  .next__inner { padding: 4rem; }

  .next__label { font-size: 2.4rem; line-height: 1.5; }

  .next__title { margin-top: 1.6rem; font-size: 3rem; line-height: 1.5; }

  .next__go { gap: 1.2rem; font-size: 2.4rem; line-height: 1.4; }

  .next__go svg { width: 3.2rem; height: 3.2rem; }

}

/* =========================================================
   FV の入場アニメーション
   ========================================================= */
.js .fhero__badge,
.js .fhero__title,
.js .fhero__rule,
.js .fhero__quotes,
.js .fhero__text,
.js .fhero__photo { animation: fvIn 1s cubic-bezier(.22, .61, .36, 1) both; }

.js .fhero__badge  { animation-delay: .1s; }
.js .fhero__title  { animation-delay: .24s; }
.js .fhero__rule   { animation-delay: .38s; }
.js .fhero__quotes { animation-delay: .48s; }
.js .fhero__text   { animation-delay: .58s; }
.js .fhero__photo  { animation-delay: .34s; }

.js .fhero__orbits { animation: fadeIn 2s ease .3s both; }

/* お困りごとの金の下線は、あとから左→右に伸びる */
.js .fhero__quotes li { position: relative; border-bottom-color: transparent; }

.js .fhero__quotes li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}

.js .fhero__quotes.is-in li::after { transform: scaleX(1); }
.js .fhero__quotes.is-in li:nth-child(1)::after { transition-delay: .7s; }
.js .fhero__quotes.is-in li:nth-child(2)::after { transition-delay: .9s; }
.js .fhero__quotes.is-in li:nth-child(3)::after { transition-delay: 1.1s; }

/* =========================================================
   ホバー
   ========================================================= */
.case,
.level,
.paybox,
.steps7 li,
.notes li { transition: transform .35s ease, box-shadow .35s ease, background-color .25s ease; }

.case:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(232, 184, 92, .8), 0 20px 44px rgba(10, 20, 48, .1);
}

.level:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.paybox:hover { box-shadow: 0 0 0 1px var(--line), 0 14px 32px rgba(10, 20, 48, .08); }
.steps7 li:hover { transform: translateX(6px); }
.notes li:hover { background: #eef2f8; }

.steps7__no { transition: transform .35s ease; }
.steps7 li:hover .steps7__no { transform: scale(1.08); }

/* 表の行 */
.cmp__table tbody tr,
.docs tr,
.dtable__row { transition: background-color .25s ease; }

.cmp__table tbody tr:hover,
.docs tr:hover { background: rgba(158, 129, 73, .06); }
.dtable__row:hover { background: rgba(10, 20, 48, .03); }

/* 事例の見出し */
.case h4 { transition: color .25s ease; }
.case:hover h4 { color: var(--navy); }

/* 指で触れる端末ではホバー演出を出さない */
@media (max-width: 750px) {
  .case:hover { transform: none; box-shadow: 0 0 0 1px var(--line-soft), 0 14px 34px rgba(10, 20, 48, .06); }
  .steps7 li:hover { transform: none; }
  .steps7 li:hover .steps7__no { transform: none; }
  .notes li:hover,
  .cmp__table tbody tr:hover,
  .docs tr:hover,
  .dtable__row:hover { background: none; }
  .notes li:hover { background: var(--paper); }
}


/* ---------------------------------------------------------
   冒頭「初回相談は無料です」

   このページでいちばん大きく出す宣言。
   セクション番号は付けず、ヒーローの直後に置いている。
   --------------------------------------------------------- */
.free-first {
  position: relative;
  /* セクションの中に入っているので、横は画面いっぱいに広げ直す */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 96px;
  padding: 96px 0;
  overflow: hidden;
  background: var(--navy-deep);
  text-align: center;
}

/* 法人・自治体ページの帯と同じ、淡い光のにじみ */
.free-first::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 70% at 95% 10%, rgba(4, 49, 135, .5) 0%, rgba(4, 49, 135, 0) 70%),
    radial-gradient(50% 90% at 15% 50%, rgba(158, 129, 73, .35) 0%, rgba(158, 129, 73, 0) 70%);
}

.free-first .container { position: relative; z-index: 1; }

.free-first__en {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .14em;
  color: var(--gold);
}

.free-first__title {
  margin-top: 16px;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 1px;
  color: #fff;
}

.free-first__lead {
  margin-top: 26px;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.free-first__note {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 28px;
  border: 1px solid rgba(232, 184, 92, .6);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--gold-light);
}

@media (max-width: 1100px) and (min-width: 751px) {
  .free-first__title { font-size: 40px; line-height: 56px; }
  .free-first__lead { font-size: 18px; line-height: 30px; }
}

@media (max-width: 750px) {
  .free-first { margin-bottom: 8rem; padding: 9rem 0 8rem; }
  .free-first__en { font-size: 2.2rem; line-height: 1.4; }
  .free-first__title { margin-top: 1.6rem; font-size: 4.2rem; line-height: 1.45; }
  .free-first__lead { margin-top: 2.4rem; font-size: 2.5rem; line-height: 1.8; }
  .free-first__note {
    display: block;
    margin-top: 3rem;
    padding: 2.4rem 2.4rem;
    font-size: 2.5rem;
    line-height: 1.7;
  }
}