@charset "utf-8";

/* =========================================================
   中立の仕組み（neutrality.html）専用スタイル
   共通部分は style.css を先に読み込むこと
   ※ 現時点は PC レイアウトのみ
   ========================================================= */

:root {
  --gold-deep: #8a6f3c;
  --gray-slate: #7a8499;
  --slate: #425067;
}

/* ---------- 下層ページのヘッダー（帯あり） ---------- */
.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
   ========================================================= */
.nhero {
  position: relative;
  display: flex;
  align-items: center;
  height: 800px;
  padding: 100px 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%);
}

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

.nhero__body {
  flex: none;
  width: 699px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

.nhero__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;
}

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

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

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

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

/* 3本柱の図 */
.nhero__fig { flex: none; width: 700px; padding-top: 56px; }

.pillars { width: 760px; max-width: none; margin: 0; }

.pillars svg { display: block; width: 100%; height: auto; overflow: visible; }

/* 線が引かれ、あとから文字が浮かぶ */
.js .pillars .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(.2, .7, .2, 1);
}

.js .pillars.is-in .draw { stroke-dashoffset: 0; }

.js .pillars .fade {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1) 1.2s;
}

.js .pillars.is-in .fade { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .pillars .draw { stroke-dashoffset: 0; }
  .js .pillars .fade { opacity: 1; }
}

/* 軌道装飾 */
.nhero__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;
}

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

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

.nhero__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);
}

.nhero__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);
}


/* =========================================================
   Stage 共通
   ========================================================= */
.stage { position: relative; }

.stage__inner { display: flex; flex-direction: column; gap: 100px; }

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

.blk { display: flex; flex-direction: column; gap: 40px; }

.blk--g60 { gap: 60px; }
.blk--g80 { 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(--paper);
}

.blk__title img { flex: none; width: 50px; height: 50px; }

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

.blk__lead {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

/* 暗い文字のブロック見出し（03 検証） */
.blk__head--dark .blk__title,
.blk__head--dark .blk__lead { color: var(--navy-deep); }

.blk__head--dark .blk__title img { filter: brightness(0) saturate(100%) invert(5%) sepia(38%) saturate(3000%) hue-rotate(207deg) brightness(95%) contrast(101%); }

.blk__head--dark .blk__line { background: linear-gradient(90deg, #0c1b52 0%, rgba(12, 27, 82, .15) 100%); }

/* 帯（白 25%・角丸 20） */
.band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 20px 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .25);
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 52px;
  text-align: center;
  color: #fff;
}

.band--tall { min-height: 184px; padding: 40px; }


/* =========================================================
   01 約束
   ========================================================= */
.stage--promise {
  padding: 250px 0 120px;
  background: linear-gradient(180deg, #010c21 0%, #043187 100%);
}

/* 3つの誓い */
.vows {
  display: flex;
  padding-bottom: 32px;
  border-top: 1px solid #fff;
}

.vow {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 52px 40px 40px;
}

.vow + .vow { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25); }

.vow__no {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: 1px;
  color: var(--gold);
}

.vow__title {
  margin-top: 32px;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 52px;
  letter-spacing: 1px;
  color: #fff;
}

.vow__text {
  margin-top: 12px;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.vow__tag {
  position: absolute;
  top: 56px;
  right: 40px;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 3px;
  color: var(--gray-slate);
}

/* 変えられない決まり */
.valve {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 48px 40px;
  background:
    linear-gradient(101.4deg, rgba(158, 129, 73, .35) 1.2%, rgba(1, 12, 33, .2) 57.6%),
    var(--navy-deep);
}

.valve__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.valve__lead {
  font-size: 20px;
  line-height: 32px;
  color: rgba(255, 255, 255, .8);
}

.valve__title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 52px;
  color: #fff;
}

.valve__title em { font-style: normal; color: var(--gold-light); }

.valve__cite {
  align-self: flex-start;
  padding: 8px 12px 4px;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 92, .45);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  color: var(--gold-light);
}

.valve__fig { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.valve__track { display: flex; align-items: center; gap: 16px; }

.valve__end {
  flex: none;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.valve__end--on { background: var(--gold-light); color: var(--ink); box-shadow: none; }

.valve__bar {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: rgba(255, 255, 255, .2);
}

.valve__bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--gold-light);
}

.valve__knob {
  position: absolute;
  top: -21px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: var(--navy-deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.valve__knob svg { width: 21px; height: 21px; }

.valve__caps { display: flex; justify-content: space-between; gap: 20px; }

.valve__caps span:first-child { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--gold-light); }
.valve__caps span:last-child { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .7); }

/* 収入の内訳 */
.srcs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
}

.src {
  grid-column: span 2;
  padding: 32px;
  background: var(--navy-deep);
}

.src--main {
  grid-column: span 3;
  background:
    linear-gradient(111.8deg, rgba(158, 129, 73, .35) 3.4%, rgba(1, 12, 33, .2) 60.1%),
    var(--navy-deep);
}

.src__tier {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  color: var(--gold-light);
}

.src__tier--sub { color: rgba(255, 255, 255, .8); }

.src__ic { width: 49px; height: 49px; margin-top: 24px; }

.src__title {
  margin-top: 20px;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 52px;
  color: #fff;
}

.src__title--sm {
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 32px;
}

.src__text {
  margin-top: 8px;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .8);
}

.src__text mark {
  background: linear-gradient(180deg, rgba(232, 184, 92, 0) 68%, rgba(232, 184, 92, .38) 68%);
  font-weight: 700;
  color: #fff;
}

/* まとめ */
.money-close {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.money-close img { flex: none; width: 49px; height: 49px; }

.money-close__title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 48px;
  color: #fff;
}

.money-close small {
  display: block;
  margin-top: 8px;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

/* 開業記念 */
.opening {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
  background: linear-gradient(90deg, #6b5731 0%, #9e8149 49.6%, #382e1a 100%);
  color: #fff;
}

.opening__en { font-weight: 700; font-size: 20px; line-height: 20px; letter-spacing: .06em; }

.opening__rule { width: 100px; height: 3px; margin: 15px 0; background: #fff; }

.opening__main {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 47px;
}

.opening__sub { margin-top: 15px; font-size: 16px; line-height: 20px; }


/* =========================================================
   02 守るためのルール
   ========================================================= */
.stage--rules {
  padding: 120px 0;
  /* Figma：#111 を 90% で敷いた上に、写真を 40% で重ねる */
  background: linear-gradient(rgba(41, 41, 41, .6), rgba(41, 41, 41, .6)), url("../img/neutrality-bg.jpg") no-repeat center / cover;
}

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

.stage--rules .stage__body { gap: 100px; }

.rules { display: flex; flex-direction: column; gap: 32px; }

.rule {
  display: flex;
  gap: 40px;
  padding: 32px 40px;
  background: rgba(66, 80, 103, .28);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}

.rule--gold {
  background: linear-gradient(120.2deg, rgba(158, 129, 73, .35) -.1%, rgba(66, 80, 103, .22) 100.1%);
  box-shadow: inset 0 0 0 2px var(--gold-light);
}

.rule--mid { align-items: center; }

.rule__side { flex: none; width: 400px; padding-top: 2px; }

.rule__no {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  color: #fff;
}

.rule__title {
  margin-top: 12px;
  padding-bottom: 16px;
  font-weight: 700;
  font-size: 32px;
  line-height: 52px;
  color: #fff;
}

.rule__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 2px;
}

.rule__body p {
  font-size: 20px;
  line-height: 40px;
  color: #fff;
}

/* 強調はページ内すべて同じ「金のライン」に統一 */
.rule__body p b,
.checks mark,
.remove-note b,
.src__text mark {
  background: linear-gradient(180deg, rgba(232, 184, 92, 0) 64%, rgba(232, 184, 92, .38) 64%);
  font-weight: 700;
  color: #fff;
}

/* 見積もり比較 */
.quotes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.quote {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 186px;
  height: 82px;
  padding: 12px 8px;
  background: var(--navy-deep);
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.quote b {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--gold-light);
}

.quotes__arrow { flex: none; width: 30px; height: 11px; }

.quotes__result {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 241px;
  height: 80px;
  padding: 12px;
  background: linear-gradient(90deg, #9e8149 0%, #745820 100%);
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  color: #fff;
}

/* 基準チェック */
.checks { display: flex; flex-direction: column; }

/* アイコンは絶対配置にして、本文はふつうの行として流す
   （flex にすると強調部分が別アイテム扱いになり、折り返しが乱れる） */
.checks li {
  position: relative;
  padding: 12px 0 12px 32px;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.checks li:first-child { padding-top: 0; }

.checks li img { position: absolute; top: 17px; left: 0; width: 22px; height: 22px; }

.checks li:first-child img { top: 5px; }

.rule__body .remove-note {
  margin-top: 16px;
  padding: 15.5px 20px 18px;
  border-left: 3px solid var(--gold-light);
  background: rgba(255, 255, 255, .08);
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

/* 中立性憲章 */
.charter {
  display: grid;
  grid-template-columns: minmax(0, 687fr) minmax(0, 670fr);
  gap: 26px;
  /* 左の箱は、右の書面の列と同じ高さまで伸ばす。
     文章が増えても減っても、左右がそろう */
  align-items: stretch;
}

.charter__doc {
  display: flex;
  flex-direction: column;
  /* 中身を上下に散らして、伸びたぶんの余白を分け合う */
  justify-content: space-between;
  padding: 80px 40px;
  background: #fff;
}

.charter__en {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: .04em;
  color: var(--navy);
}

.charter__title {
  margin-top: 15px;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 32px;
  color: var(--navy);
}

.clauses { margin-top: 40px; }

.clauses li {
  display: flex;
  /* 文章が2行になるものがあるので、番号は1行目にそろえる */
  align-items: flex-start;
  gap: 24px;
  padding: 0 10px 12px;
  border-bottom: 2px solid #d9d9d9;
}

.clauses li + li { margin-top: 14px; }

.clauses b {
  flex: none;
  width: 48px;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 22px;
  /* 文章の1行目と目線をそろえる */
  line-height: 30px;
  color: var(--navy);
}

.clauses b.is-gold { color: var(--gold); }

.clauses span { font-size: 17px; line-height: 30px; color: var(--muted); }

.charter__note {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-top: 40px;
  border: 1px solid var(--gold);
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
  color: var(--gold);
}

.charter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 223px;
  height: 60px;
  margin-top: 40px;
  background: var(--gold);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  transition: filter .25s ease;
}

.charter__btn:hover { filter: brightness(1.12); }

/* 公開書面 */
.papers { display: flex; flex-direction: column; gap: 43px; }

.paper {
  display: flex;
  flex-direction: column;
  height: 193px;
  padding: 30px 40px;
  background: #fff;
}

.paper--gold { background: linear-gradient(104.9deg, #9e8149 .5%, #745820 100%); }

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

.paper__title {
  margin-top: 20px;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: var(--navy);
}

.paper--gold .paper__title { color: #fff; }

.paper__go {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--navy);
}

.paper--gold .paper__go { color: #fff; }

.paper__go svg { width: 20px; height: 20px; flex: none; }


/* =========================================================
   03 検証
   ========================================================= */
.stage--verify {
  padding: 120px 0;
  background: var(--paper);
}

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

/* 5部構成 */
.parts { border-top: 2px solid var(--navy); }

.part {
  display: flex;
  align-items: flex-start;
  padding: 24px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.part--bad { background: linear-gradient(90deg, rgba(158, 129, 73, .12) 0%, rgba(158, 129, 73, 0) 100%); }

.part__no {
  flex: none;
  width: 147px;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--gold);
}

.part > b {
  flex: none;
  width: 460px;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--ink);
}

.part--bad > b { color: var(--gold-deep); }

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

.part__desc {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
  font-size: 20px;
  line-height: 32px;
  color: var(--muted);
}

/* 自分に課している約束 */
.pledges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .28);
}

.pledges li {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 129px;
  padding: 32px 24px 32px 32px;
  background:
    linear-gradient(100.1deg, rgba(158, 129, 73, .35) 1.2%, rgba(1, 12, 33, .2) 58%),
    var(--navy-deep);
}

.pledges b {
  flex: none;
  width: 160px;
  font-family: var(--f-en);
  font-weight: 300;
  font-size: 48px;
  line-height: 48px;
  color: var(--gold-light);
}

.pledges p span {
  font-size: 16px;
  color: var(--line);
}

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

/* 第1回レポート */
.report {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 20px;
  border: 2px solid var(--gold);
}

.report__year {
  flex: none;
  padding-left: 32px;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 47px;
  color: var(--gold);
}

.report__body { flex: none; }

.report__title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 47px;
  color: var(--gold);
}

.report__when { margin-top: 15px; font-size: 16px; line-height: 20px; color: var(--gold); }

.report__note {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  text-align: right;
  font-size: 16px;
  line-height: 32px;
  color: var(--navy-deep);
}

.report__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--navy-deep);
}

.report__go svg { width: 20px; height: 20px; flex: none; }

/* アーカイブ */
.archive__cap {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .04em;
  color: var(--gold);
}

.archive__table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  text-align: left;
}

.archive__table thead th {
  padding: 11px 16px 12px;
  border-top: 2px solid var(--navy-deep);
  border-bottom: 1px solid var(--navy-deep);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
}

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

.archive__table tbody th {
  font-family: var(--f-serif);
  font-weight: 700;
  width: 179px;
}

.archive__table tbody td:nth-child(2) { width: 721px; }

.soon {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: #f4ecdc;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--gold-deep);
}

.archive__next {
  margin-top: 80px;
  font-weight: 700;
  font-size: 24px;
  line-height: 50px;
  color: var(--ink);
}

/* =========================================================
   751px〜1520px：内容幅（1400px）が確保できなくなる箇所を組み替える
   ========================================================= */
@media (max-width: 1520px) and (min-width: 751px) {
  /* FV：3本柱の図は幅に合わせて縮める */
  .nhero__body { width: auto; flex: 1 1 58%; min-width: 0; }
  .nhero__title { white-space: normal; }
  .nhero__fig { width: auto; flex: 1 1 42%; min-width: 0; }
  .pillars { width: 100%; max-width: 760px; }

  /* 見積もり比較：3社を1行、矢印と結果を下に */
  .quotes { flex-wrap: wrap; }
  .quote { flex: 1 1 0; min-width: 0; width: auto; }
  /* 3社のあとで必ず改行させ、矢印は原寸のまま中央に置く */
  .quotes { justify-content: center; }
  .quotes::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .quote { order: 1; }
  .quotes__arrow { order: 3; flex: 0 0 auto; width: 30px; height: 11px; margin: 4px auto; transform: rotate(90deg); pointer-events: none; }
  .quotes__result { order: 4; }
  .quotes__result { flex-basis: 100%; width: 100%; }
}

@media (max-width: 1200px) and (min-width: 751px) {
  /* FV は縦積みに */
  .nhero { display: block; height: auto; padding: 80px 0 140px; }
  .nhero__inner { display: block; }
  .nhero__body { width: 100%; }
  .nhero__title { font-size: 52px; line-height: 76px; }

  .nhero__fig {
    width: 100%;
    max-width: 760px;
    margin: 60px auto 0;
    padding-top: 0;
  }

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

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

@media (max-width: 1100px) and (min-width: 751px) {
  /* 変えられない決まり・収入の内訳 */
  .valve { display: block; }
  .valve__fig { margin-top: 40px; }

  .srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .src { grid-column: span 1; }
  .src--main { grid-column: span 2; }

  /* ルールカードは見出しを上に */
  .rule { display: block; }
  .rule--mid { display: block; }
  .rule__side { width: 100%; padding-top: 0; }
  .rule__title { padding-bottom: 0; }
  .rule__body { margin-top: 24px; padding-top: 0; }

  /* 中立性憲章 */
  .charter { display: block; }
  .papers { margin-top: 26px; }

  /* 約束タイル・レポート */
  .pledges { grid-template-columns: minmax(0, 1fr); }
  .report { display: block; }
  .report__year { padding-left: 0; }
  .report__title { margin-top: 12px; }
  .report__note { align-items: flex-start; margin-top: 24px; text-align: left; }
}

@media (max-width: 900px) and (min-width: 751px) {
  /* 3つの誓いを縦積み */
  .vows { display: block; padding-bottom: 0; }
  .vow { padding: 40px 0; }
  .vow + .vow { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
  .vow__tag { top: 44px; right: 0; }

  .srcs { grid-template-columns: minmax(0, 1fr); }
  .src,
  .src--main { grid-column: auto; }

  /* 5部構成は3行組みに */
  .part { display: block; }
  .part__no { width: auto; }
  .part > b { display: block; width: auto; margin-top: 4px; }
  .part__desc { padding-top: 6px; }

  .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--fees {
  background:
    linear-gradient(111.3deg, rgba(10, 20, 48, .5) 0%, rgba(7, 60, 133, .5) 47.3%, rgba(104, 151, 225, .5) 100.8%),
    url("../img/next-fees.jpg") no-repeat center / cover;
}

.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
     ========================================================= */
  .nhero {
    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%);
  }

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

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

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

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

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

  .nhero__head { gap: 3rem; }

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

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

  .nhero__title { font-size: 5rem; line-height: 1.5; white-space: normal; }

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

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

  /* 3本柱の図：横幅いっぱいに縮める */
  .nhero__fig { width: 100%; margin-top: 6rem; padding-top: 0; }

  .pillars { width: 100%; }


  /* =========================================================
     Stage 共通
     ========================================================= */
  .stage__inner { gap: 6rem; }

  .stage__body { gap: 8rem; }

  .blk { gap: 4rem; }
  .blk--g60 { gap: 5rem; }
  .blk--g80 { gap: 5rem; }

  .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; }

  .band {
    min-height: 0;
    padding: 4rem 3rem;
    border-radius: 2rem;
    font-size: 3rem;
    line-height: 1.6;
  }

  .band--tall { min-height: 0; padding: 4rem 3rem; }


  /* =========================================================
     01 約束
     ========================================================= */
  .stage--promise { padding: 0 0 10rem; }

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

  .stage--promise .container > .stage__inner { padding-top: 10rem; }

  /* 3つの誓い */
  .vows { display: block; padding-bottom: 0; border-top-width: .1rem; }

  .vow { padding: 4rem 0 4.5rem; }

  .vow + .vow {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  }

  .vow__no { font-size: 7.2rem; line-height: 1; }

  .vow__title { margin-top: 2rem; font-size: 3.8rem; line-height: 1.5; }

  .vow__text { margin-top: 1.4rem; font-size: 2.6rem; line-height: 1.8; }

  .vow__tag { top: 4.6rem; right: 0; font-size: 2.2rem; line-height: 1.4; letter-spacing: .2em; }

  /* 変えられない決まり */
  .valve {
    display: block;
    padding: 4rem 3rem;
  }

  .valve__txt { gap: 1.6rem; }

  .valve__lead { font-size: 2.4rem; line-height: 1.8; }

  .valve__title { font-size: 3.4rem; line-height: 1.55; }

  .valve__cite { padding: 1rem 1.4rem .6rem; font-size: 2.2rem; line-height: 1.5; }

  .valve__fig { margin-top: 4rem; gap: 2rem; }

  .valve__track { gap: 1.6rem; }

  .valve__end { padding: 1rem 1.6rem; font-size: 2.2rem; line-height: 1.5; }

  .valve__knob { top: -2.2rem; width: 4.4rem; height: 4.4rem; margin-left: -2.2rem; }

  .valve__knob svg { width: 2.2rem; height: 2.2rem; }

  .valve__caps { gap: 1.6rem; }

  .valve__caps span:first-child,
  .valve__caps span:last-child { font-size: 2.1rem; line-height: 1.5; }

  /* 収入の内訳 */
  .srcs { grid-template-columns: minmax(0, 1fr); }

  .src,
  .src--main { grid-column: auto; padding: 3.6rem 3rem 4rem; }

  .src__tier { font-size: 2.2rem; line-height: 1.5; }

  .src__ic { width: 6rem; height: 6rem; margin-top: 2rem; }

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

  .src__title--sm { font-size: 3.4rem; }

  .src__text { margin-top: 1.2rem; font-size: 2.4rem; line-height: 1.8; }

  /* まとめ */
  .money-close { gap: 2.4rem; padding: 4rem 0; align-items: flex-start; }

  .money-close img { width: 6rem; height: 6rem; margin-top: .4rem; }

  .money-close__title { font-size: 2.9rem; line-height: 1.6; }

  .money-close small { margin-top: 1.2rem; font-size: 2.4rem; line-height: 1.7; }

  /* 開業記念 */
  .opening { height: auto; padding: 5rem 3rem; }

  .opening__en { font-size: 2.2rem; line-height: 1.4; }

  .opening__rule { width: 10rem; height: .3rem; margin: 1.6rem 0; }

  .opening__main { font-size: 4rem; line-height: 1.4; }

  .opening__sub { margin-top: 1.6rem; font-size: 2.2rem; line-height: 1.6; }


  /* =========================================================
     02 守るためのルール
     ========================================================= */
  .stage--rules { padding: 10rem 0; }

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

  .stage--rules .stage__body { gap: 8rem; }

  .rules { gap: 3rem; }

  .rule {
    display: block;
    padding: 3.6rem 3rem 4rem;
    box-shadow: inset 0 0 0 .2rem rgba(255, 255, 255, .45);
  }

  .rule--gold { box-shadow: inset 0 0 0 .2rem var(--gold-light); }

  .rule--mid { display: block; }

  .rule__side { width: 100%; padding-top: 0; }

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

  .rule__title { margin-top: 1.2rem; padding-bottom: 0; font-size: 3.4rem; line-height: 1.5; }

  .rule__body { gap: 2rem; margin-top: 2.6rem; padding-top: 0; }

  .rule__body p { font-size: 2.6rem; line-height: 1.9; }

  /* 見積もり比較 */
  .quotes { flex-wrap: wrap; gap: 1.6rem; margin-top: 1.2rem; }

  .quote { width: calc((100% - 3.2rem) / 3); height: 9rem; padding: 1.2rem .8rem; font-size: 2.1rem; line-height: 1.5; }

  .quote b { font-size: 2.6rem; line-height: 1.4; }

  .quotes__arrow { width: 3rem; height: 1.1rem; margin: 0 auto; transform: rotate(90deg); }

  .quotes__result { width: 100%; height: auto; padding: 2rem; font-size: 2.3rem; line-height: 1.6; }

  /* 基準チェック */
  .checks li { padding: 1.6rem 0 1.6rem 4.2rem; font-size: 2.5rem; line-height: 1.8; }

  .checks li img { top: 2.3rem; width: 2.8rem; height: 2.8rem; }

  .checks li:first-child img { top: .7rem; }

  .rule__body .remove-note {
    margin-top: 2rem;
    padding: 2rem 2rem 2.2rem;
    border-left-width: .3rem;
    font-size: 2.4rem;
    line-height: 1.8;
  }

  /* 中立性憲章 */
  .charter { display: block; }

  .charter__doc { padding: 5rem 3rem 6rem; }

  .charter__en { font-size: 2.2rem; line-height: 1.6; }

  .charter__title { margin-top: 1.2rem; font-size: 4rem; line-height: 1.4; }

  .clauses { margin-top: 3.6rem; }

  .clauses li { gap: 2rem; padding: 0 0 .8rem; border-bottom-width: .2rem; }

  .clauses li + li { margin-top: 1.8rem; }

  .clauses b { width: 9rem; font-size: 2.8rem; line-height: 1.5; }

  .clauses span { font-size: 2.4rem; line-height: 1.6; }

  .charter__note {
    height: auto;
    margin-top: 3.6rem;
    padding: 1.8rem 2rem;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.6;
  }

  .charter__btn { width: 100%; height: 9.2rem; margin-top: 3.6rem; font-size: 2.6rem; line-height: 1.4; }

  /* 公開書面 */
  .papers { gap: 3rem; margin-top: 3rem; }

  .paper { height: auto; min-height: 22rem; padding: 3.6rem 3rem 4rem; }

  .paper__no { font-size: 2.4rem; line-height: 1.4; }

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

  .paper__go { gap: 1.2rem; margin-top: 3rem; font-size: 2.4rem; line-height: 1.4; }

  .paper__go svg { width: 2.8rem; height: 2.8rem; }


  /* =========================================================
     03 検証
     ========================================================= */
  .stage--verify { padding: 10rem 0; }

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

  /* 5部構成：3行組み */
  .parts { border-top-width: .2rem; }

  .part { display: block; padding: 3rem 0 3.2rem; }

  .part__no { width: auto; font-size: 2.4rem; line-height: 1.5; }

  .part > b { display: block; width: auto; margin-top: .6rem; font-size: 3rem; line-height: 1.5; }

  .part__desc { padding-top: 1rem; font-size: 2.4rem; line-height: 1.8; }

  .part__desc b { font-size: 2.4rem; }

  /* 自分に課している約束 */
  .pledges { grid-template-columns: minmax(0, 1fr); }

  .pledges li { display: block; min-height: 0; padding: 3.4rem 3rem; }

  .pledges b { width: auto; font-size: 5rem; line-height: 1; }

  .pledges p { margin-top: 1.4rem; font-size: 2.6rem; line-height: 1.75; }

  .pledges p span { font-size: 2.2rem; }

  /* 第1回レポート */
  .report { display: block; padding: 3.6rem 3rem 4rem; border-width: .2rem; }

  .report__year { padding-left: 0; font-size: 3.6rem; line-height: 1.3; }

  .report__title { margin-top: 1.6rem; font-size: 3.6rem; line-height: 1.4; }

  .report__when { margin-top: 1rem; font-size: 2.2rem; line-height: 1.5; }

  .report__note {
    align-items: flex-start;
    margin-top: 3rem;
    gap: 2rem;
    text-align: left;
    font-size: 2.3rem;
    line-height: 1.8;
  }

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

  .report__go svg { width: 2.8rem; height: 2.8rem; }

  /* アーカイブ：2行組み */
  .archive__cap { font-size: 2.2rem; line-height: 1.5; }

  .archive__table { margin-top: 1.6rem; }

  .archive__table thead { display: none; }

  .archive__table tbody tr { display: block; padding: 2.8rem 0 3rem; border-top: .2rem solid var(--navy-deep); }

  .archive__table tbody th,
  .archive__table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    font-size: 2.6rem;
    line-height: 1.6;
  }

  .archive__table tbody th { font-size: 3rem; }

  .archive__table tbody td { margin-top: .8rem; color: var(--muted); }

  .archive__table tbody td:nth-child(2) { width: auto; }

  .soon { margin-left: 1.2rem; padding: .2rem 1.4rem; font-size: 2.2rem; line-height: 1.5; }

  .archive__next { margin-top: 5rem; font-size: 2.8rem; 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 .nhero__badge,
.js .nhero__title,
.js .nhero__rule,
.js .nhero__text { animation: fvIn 1s cubic-bezier(.22, .61, .36, 1) both; }

.js .nhero__badge { animation-delay: .1s; }
.js .nhero__title { animation-delay: .24s; }
.js .nhero__rule  { animation-delay: .38s; }
.js .nhero__text  { animation-delay: .48s; }

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

/* 3本柱の図は線を引いてから文字を出す（.pillars の指定は上部にあり） */

/* =========================================================
   ホバー
   ========================================================= */
.vow,
.src,
.rule,
.paper,
.pledges li,
.part { transition: transform .35s ease, background-color .25s ease, box-shadow .35s ease; }

.src:hover { transform: translateY(-4px); }
.paper:hover { transform: translateY(-4px); }
.part:hover { background: rgba(10, 20, 48, .03); }
.pledges li:hover { transform: translateX(4px); }

.rule:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.rule--gold:hover { box-shadow: inset 0 0 0 2px #f3d493; }

/* 誓いの番号 */
.vow__no { transition: color .3s ease; }
.vow:hover .vow__no { color: var(--gold-light); }

/* 憲章の条文 */
.clauses li { transition: background-color .25s ease; }
.clauses li:hover { background: rgba(158, 129, 73, .08); }

/* スライダーのつまみをゆっくり呼吸させる */
@keyframes knobPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 0 rgba(232, 184, 92, .35); }
  50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 10px rgba(232, 184, 92, 0); }
}

.js .valve__knob { animation: knobPulse 3.6s ease-in-out 1.2s infinite; }

/* 指で触れる端末ではホバー演出を出さない */
@media (max-width: 750px) {
  .src:hover,
  .paper:hover,
  .pledges li:hover { transform: none; }
  .part:hover { background: none; }
  .clauses li:hover { background: none; }
}