/* =====================================================================
   TOP の下の3区画（サポートの進め方・30分の無料相談・Q&A）を、上のイラレ案のデザインに合わせたもの
   （2026-10-21 本人指示「デザインに合わせて。内容は同じでOK」）。文言・並び・動きは変えていない
   イラレ案の特徴に合わせたところ
   - 色はイラレの色をそのまま：水色 #29abe2、黄 #fcef00、赤 #ea545d、緑 #00ad9d、橙 #ff9c00、紫 #9837bb、ピンク #e40055、紺 #182987
   - 地は画面いっぱいの色の面。面のふちは大きな弧（hrn 風の白い箱・グラデーション・黄色い丸は使わない）
   - 見出しは丸ゴシック（イラレのつくアールゴシックに近い Zen Maru Gothic）を、字間を広げて置く
   - 番号・ラベルは、悩みの吹き出しと同じ雲の形（しっぽの丸2つ）
   ===================================================================== */
body { padding-bottom: 0; background: #fff; }   /* 画面下の固定ボタンを外したので、下の空きもなくす */

.pflow, .soudan, .qa {
  --b-sky: #29abe2; --b-yellow: #fcef00; --b-red: #ea545d; --b-teal: #00ad9d; --b-orange: #ff9c00; --b-purple: #9837bb;
  --b-pink: #e40055; --b-navy: #182987; --b-ink: #1f1f1f;
  --b-round: "Zen Maru Gothic", var(--display);
  position: relative; max-width: none; margin: 0;
}
/* hrn 風の箱・丸を外す */
.pflow .pflow-inner, .qa .qa-inner, .soudan .soudan-inner { background: none; border-radius: 0; box-shadow: none; }
.pflow .pflow-inner::before, .qa .qa-inner::before, .soudan::before { content: none; }

/* 雲の形の吹き出し（番号・ラベル・グループ見出しで共通） */
.b-cloud { position: relative; display: inline-grid; place-items: center; color: #fff; background: var(--c);
  border-radius: 48% 52% 46% 54% / 56% 48% 52% 44%; }
.b-cloud::before, .b-cloud::after { content: ""; position: absolute; border-radius: 50%; background: var(--c); }
.b-cloud::before { width: .5em; height: .5em; right: 10%; bottom: -.28em; }
.b-cloud::after { width: .28em; height: .28em; right: 3%; bottom: -.62em; }

/* ---------- サポートの進め方：白い地 ---------- */
.pflow { background: #fff; padding: clamp(90px, 13vw, 180px) var(--gutter) clamp(90px, 13vw, 170px); }
.pflow .pflow-inner { max-width: 1100px; margin: 0 auto; padding: 0; }
#flow .pflow-head { border-bottom: 0; padding-bottom: clamp(30px, 5vh, 56px); }
#flow .ph2 {
  font-family: var(--b-round); font-weight: 500; color: var(--b-ink);
  font-size: clamp(30px, 5vw, 70px); letter-spacing: .14em; line-height: 1.2;
}
#flow .pflow-chara { right: 0; height: clamp(110px, 17vw, 240px); }
.pflow .pflow-list { border: 0; display: grid; gap: clamp(14px, 2vw, 22px); counter-reset: step; }
.pflow .pflow-list li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: clamp(64px, 8vw, 104px) minmax(0, 15em) 1fr; align-items: center; gap: clamp(14px, 2.6vw, 36px);
  background: color-mix(in srgb, var(--c) 12%, #fff); border: 0; border-radius: clamp(24px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 40px);
}
.pflow .pflow-list li:nth-child(1) { --c: var(--b-teal); }
.pflow .pflow-list li:nth-child(2) { --c: var(--b-orange); }
.pflow .pflow-list li:nth-child(3) { --c: var(--b-red); }
.pflow .pflow-list li:nth-child(4) { --c: var(--b-purple); }
.pflow .pflow-list li:nth-child(5) { --c: var(--b-sky); }
/* 番号は雲の形の吹き出し */
.pflow .pflow-list li::before {
  content: counter(step); position: static; display: grid; place-items: center; aspect-ratio: 1; width: 100%;
  background: var(--c); color: #fff; font-family: var(--b-round); font-weight: 700; font-size: clamp(28px, 3.6vw, 48px); line-height: 1;
  border-radius: 48% 52% 46% 54% / 56% 48% 52% 44%;
}
.pflow .pflow-list h3 { margin: 0; font-family: var(--b-round); font-weight: 700; font-size: clamp(18px, 2vw, 28px); letter-spacing: .1em; line-height: 1.45; color: var(--b-ink); }
.pflow .pflow-list p { margin: 0; font-family: var(--b-round); font-weight: 500; font-size: clamp(14px, 1.4vw, 19px); letter-spacing: .08em; line-height: 1.9; color: var(--b-ink); }

/* ---------- 30分の無料相談：黄の面。上の端は大きな弧 ---------- */
.soudan {
  background: var(--b-yellow); color: var(--b-ink); text-align: center;
  padding: clamp(110px, 15vw, 210px) var(--gutter) clamp(110px, 15vw, 200px);
  border-radius: 50% 50% 0 0 / clamp(60px, 9vw, 150px) clamp(60px, 9vw, 150px) 0 0;
}
.soudan .soudan-inner { position: relative; max-width: 1100px; }
.soudan .soudan-label {
  --c: var(--b-red); background: var(--c); color: #fff; font-family: var(--b-round); font-weight: 700; letter-spacing: .16em;
  font-size: clamp(16px, 1.8vw, 24px); padding: .9em 1.6em 1em; margin-bottom: clamp(26px, 4vh, 44px);
  border-radius: 48% 52% 46% 54% / 56% 48% 52% 44%; position: relative;
}
.soudan .soudan-label::before, .soudan .soudan-label::after { content: ""; position: absolute; border-radius: 50%; background: var(--c); }
.soudan .soudan-label::before { width: .55em; height: .55em; right: 16%; bottom: -.32em; }
.soudan .soudan-label::after { width: .3em; height: .3em; right: 10%; bottom: -.7em; }
.soudan .soudan-title, .soudan .soudan-title.is-hit {
  font-family: var(--b-round); font-weight: 700; color: var(--b-ink); letter-spacing: .12em; line-height: 1.45;
  font-size: clamp(28px, 4.6vw, 66px);
}
.soudan .soudan-title.is-hit { color: var(--b-ink); }
/* 「30」は赤い丸 */
.soudan .soudan-title b, .soudan .soudan-title.is-hit b {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin-right: .2em; vertical-align: -.35em;
  border-radius: 50%; background: var(--b-red); color: #fff; padding: 0;
  font-family: var(--b-round); font-weight: 900; font-stretch: normal; font-size: 1.15em; letter-spacing: 0; line-height: 1;
}
.soudan .soudan-text { font-family: var(--b-round); font-weight: 500; color: var(--b-ink); letter-spacing: .1em; line-height: 2; font-size: clamp(15px, 1.6vw, 21px); }
/* ボタンはインサイドツアーのボタンと同じ形（ピンクに紺の影、黄色い丸の矢印） */
.soudan .soudan-btn {
  display: inline-flex; align-items: center; gap: .8em; background: var(--b-pink); color: #fff;
  font-family: var(--b-round); font-weight: 700; letter-spacing: .1em; font-size: clamp(18px, 2.2vw, 30px);
  padding: .75em .9em .75em 1.8em; border-radius: 999px; box-shadow: 0 6px 0 var(--b-navy);
}
.soudan .soudan-btn::after { content: "→"; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; margin: 0; background: var(--b-yellow); color: var(--b-navy); font-family: var(--num); font-weight: 900; }
.soudan .soudan-btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--b-navy); }
.soudan .soudan-chara { left: auto; right: calc(-1 * clamp(0px, 2vw, 40px)); bottom: calc(-1 * clamp(110px, 15vw, 200px)); height: clamp(140px, 20vw, 300px); }
.soudan .feel-ball { background: var(--b-red); }

/* ---------- Q&A：水色の面。上の端は大きな弧 ---------- */
.qa {
  background: var(--b-sky);
  padding: clamp(110px, 15vw, 210px) var(--gutter) clamp(90px, 14vh, 170px);
  margin-top: calc(-1 * clamp(60px, 9vw, 150px));   /* 弧の外側が黄の面になるよう、黄の面に重ねる */
  border-radius: 50% 50% 0 0 / clamp(60px, 9vw, 150px) clamp(60px, 9vw, 150px) 0 0;
}
.qa .qa-inner { max-width: 1000px; margin: 0 auto; padding: 0; }
.qa .qa-title, .qa .qa-title.is-hit {
  font-family: var(--b-round); font-weight: 500; font-stretch: normal; color: #fff;
  font-size: clamp(44px, 7vw, 100px); letter-spacing: .08em; line-height: 1; margin-bottom: clamp(20px, 3vh, 36px);
}
.qa .qa-title.is-hit { color: var(--b-yellow); }
.qa .qa-nav { gap: 12px; }
.qa .qa-nav a {
  font-family: var(--b-round); font-weight: 700; letter-spacing: .1em;
  background: #fff; color: var(--b-ink); border: 0; border-radius: 999px; padding: .55em 1.2em;
  box-shadow: 0 4px 0 rgba(0, 60, 110, .25); transition: transform .15s, box-shadow .15s;
}
.qa .qa-nav a::after { color: var(--c); }
.qa .qa-nav a:nth-child(1) { --c: var(--b-teal); }
.qa .qa-nav a:nth-child(2) { --c: var(--b-orange); }
.qa .qa-nav a:nth-child(3) { --c: var(--b-red); }
.qa .qa-nav a:hover { background: #fff; color: var(--b-ink); transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 60, 110, .25); }

.qa .qa-group:nth-of-type(1) { --c: var(--b-teal); }
.qa .qa-group:nth-of-type(2) { --c: var(--b-orange); }
.qa .qa-group:nth-of-type(3) { --c: var(--b-red); }
.qa .qa-group + .qa-group { margin-top: clamp(56px, 9vh, 100px); }
/* グループの見出しは雲の形の吹き出し */
.qa .qa-group-title {
  position: relative; display: inline-block; margin: 0 0 clamp(24px, 3.4vh, 36px) clamp(6px, 1vw, 14px);
  color: #fff;
  font-family: var(--b-round); font-weight: 700; letter-spacing: .14em; font-size: clamp(18px, 2.2vw, 30px); line-height: 1.3;
  padding: .95em 1.6em 1.05em; border-radius: 48% 52% 46% 54% / 56% 48% 52% 44%;
}
.qa .qa-group-title::before, .qa .qa-group-title::after { content: ""; position: absolute; border-radius: 50%; background: var(--c); }
.qa .qa-group-title::before { width: .62em; height: .62em; right: 14%; bottom: -.42em; }
.qa .qa-group-title::after { width: .36em; height: .36em; right: 9%; bottom: -.86em; }

.qa .qa-list { border: 0; display: grid; gap: 12px; }
.qa .qa-item { background: #fff; border: 0; border-radius: clamp(22px, 3vw, 34px); overflow: hidden; box-shadow: 0 5px 0 rgba(0, 60, 110, .18); }
.qa .qa-q {
  grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.2vw, 26px);
  font-family: var(--b-round); font-weight: 700; letter-spacing: .08em; color: var(--b-ink);
}
.qa .qa-q span, .qa .qa-a { color: var(--b-ink); }
.qa .qa-q:hover span { color: var(--c); }
.qa .qa-q::before {
  content: "Q"; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%;
  background: var(--b-yellow); color: var(--b-ink); font-family: var(--b-round); font-weight: 700; font-stretch: normal; font-size: .95em;
}
.qa .qa-q::after {
  content: "+"; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--c); color: #fff; font-family: var(--num); font-weight: 800; font-size: 1.1em; transition: transform .25s;
}
.qa .qa-item[open] .qa-q::after { content: "+"; transform: rotate(45deg); }
.qa .qa-a {
  grid-template-columns: auto 1fr; gap: clamp(12px, 1.6vw, 20px); align-items: start;
  margin: 0 clamp(16px, 2.2vw, 26px) clamp(16px, 2vw, 22px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 22px);
  background: color-mix(in srgb, var(--c) 10%, #fff); border-radius: clamp(16px, 2vw, 24px);
  font-family: var(--b-round); font-weight: 500; letter-spacing: .06em; line-height: 1.9;
}
.qa .qa-a::before {
  content: "A"; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%;
  background: var(--c); color: #fff; font-family: var(--b-round); font-weight: 700; font-stretch: normal; font-size: .95em;
}

/* ---------- いちばん下の会社名の帯：紺 ---------- */
.ft { background: var(--b-navy, #182987); margin-top: 0; border-radius: 0; }

@media (max-width: 760px) {
  .pflow .pflow-list li { grid-template-columns: 56px 1fr; }
  .pflow .pflow-list li p { grid-column: 2; }
  .soudan .soudan-chara { display: none; }
}

/* ---------- 最後のインサイドツアーの訴求：赤の面 ---------- */
/* 絵と文字の部品の位置は、イラレのインサイドツアーの並び（マスコット 514,3876 を基点）をそのまま縮めて使う。--u はイラレの 1pt */
.lastcta {
  --u: min(.066vw, .9px);   /* 絵の幅 906pt が、画面の 60%（いちばん広くて 815px）になる */
  position: relative; background: #ea545d; text-align: center;
  padding: clamp(100px, 13vw, 190px) var(--gutter) clamp(90px, 12vw, 170px);
  margin-top: calc(-1 * clamp(60px, 9vw, 150px));   /* 弧の外側が水色の面になるよう、Q&A に重ねる */
  border-radius: 50% 50% 0 0 / clamp(60px, 9vw, 150px) clamp(60px, 9vw, 150px) 0 0;
}
.lastcta-logo { position: relative; width: calc(906 * var(--u)); height: calc(490 * var(--u)); margin: 0 auto; }
.lastcta-logo img { position: absolute; display: block; max-width: none; }
.lc-mascot   { left: calc(253 * var(--u)); top: 0;                      width: calc(406 * var(--u)); }
.lc-bubble-l { left: calc(104 * var(--u)); top: calc(-1 * var(--u));    width: calc(166 * var(--u)); }
.lc-bubble-r { left: calc(655 * var(--u)); top: calc(-1 * var(--u));    width: calc(166 * var(--u)); }
.lc-banner   { left: calc(164 * var(--u)); top: calc(195 * var(--u));   width: calc(592 * var(--u)); }
.lc-title    { left: 0;                    top: calc(276 * var(--u));   width: calc(906 * var(--u)); }
.lc-bar      { left: calc(184 * var(--u)); top: calc(438 * var(--u));   width: calc(491 * var(--u)); }
.lastcta-text {
  margin: clamp(30px, 5vh, 56px) 0 0; color: #fff; font-family: var(--b-round, "Zen Maru Gothic"), var(--display);
  font-weight: 700; letter-spacing: .14em; line-height: 1.9; font-size: clamp(18px, 2.2vw, 30px);
}
.lastcta-btn {
  display: inline-flex; align-items: center; gap: .8em; margin-top: clamp(30px, 5vh, 50px);
  background: #fff; color: #e40055; font-family: "Zen Maru Gothic", var(--display); font-weight: 700; letter-spacing: .1em;
  font-size: clamp(18px, 2.2vw, 30px); padding: .75em .9em .75em 1.8em; border-radius: 999px; box-shadow: 0 6px 0 #182987;
  transition: transform .15s, box-shadow .15s;
}
.lastcta-btn::after { content: "→"; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #fcef00; color: #182987; font-family: var(--num); font-weight: 900; }
.lastcta-btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 #182987; }

/* =====================================================================
   吹き出しはイラレの形そのもの（assets/top/shape-bubble-*.svg。Support の区画の吹き出しから文字を抜いたもの）
   CSS で作った楕円はやめた（2026-10-21 本人指摘「吹き出しがダサい」）。文字はイラレの吹き出しと同じく、大きい言葉＋小さい言葉の2段
   ===================================================================== */
.qa .qa-group-title, .soudan .soudan-label, .pflow .pflow-list li::before { background-color: transparent !important; border-radius: 0; }
.qa .qa-group-title::before, .qa .qa-group-title::after, .soudan .soudan-label::before, .soudan .soudan-label::after { content: none; }

.qa .qa-group-title {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  background: center / contain no-repeat; padding: 0 0 6%; margin-left: 0;
  width: clamp(190px, 22vw, 280px); letter-spacing: .14em; line-height: 1.2;
}
.qa .qa-group-title b { font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); }
.qa .qa-group-title small { font-weight: 700; font-size: clamp(13px, 1.3vw, 17px); opacity: .9; }
.qa .qa-group:nth-of-type(1) .qa-group-title { background-image: url(../assets/top/shape-bubble-teal.svg); aspect-ratio: 495 / 500; }
.qa .qa-group:nth-of-type(2) .qa-group-title { background-image: url(../assets/top/shape-bubble-orange.svg); aspect-ratio: 508 / 387; width: clamp(220px, 26vw, 330px); padding: 0 6% 4% 0; }
.qa .qa-group:nth-of-type(3) .qa-group-title { background-image: url(../assets/top/shape-bubble-red.svg); aspect-ratio: 407 / 475; width: clamp(200px, 23vw, 290px); }
.qa .qa-group:nth-of-type(3) .qa-group-title b { font-size: clamp(18px, 2vw, 26px); letter-spacing: .06em; }
/* 吹き出しの色（文字の地の色ではなく、Q&A の札の色合わせ用） */
.qa .qa-group:nth-of-type(1) { --c: #00ad9d; }
.qa .qa-group:nth-of-type(2) { --c: #ff9c00; }
.qa .qa-group:nth-of-type(3) { --c: #fe000a; }

/* 無料相談の「まずはここから」：赤の吹き出し */
.soudan .soudan-label {
  display: inline-grid; place-items: center; background: url(../assets/top/shape-bubble-red.svg) center / contain no-repeat;
  aspect-ratio: 407 / 475; width: clamp(150px, 15vw, 200px); padding: 0 0 10%; line-height: 1.4;
}

/* 進め方の番号：吹き出しの形（緑・橙・赤・紫・緑） */
.pflow .pflow-list li::before { background: center / contain no-repeat; padding-bottom: 8%; }
.pflow .pflow-list li:nth-child(1)::before, .pflow .pflow-list li:nth-child(5)::before { background-image: url(../assets/top/shape-bubble-teal.svg); }
.pflow .pflow-list li:nth-child(2)::before { background-image: url(../assets/top/shape-bubble-orange.svg); }
.pflow .pflow-list li:nth-child(3)::before { background-image: url(../assets/top/shape-bubble-red.svg); }
.pflow .pflow-list li:nth-child(4)::before { background-image: url(../assets/top/shape-bubble-purple.svg); }
.pflow .pflow-list li:nth-child(5) { --c: #00ad9d; }
/* style.css の .qa-group:nth-of-type(n) .qa-group-title { background: … } が大きさ・位置まで戻すので、同じ強さで指定し直す */
.qa .qa-group .qa-group-title { background-size: contain; background-position: center; background-repeat: no-repeat; }
/* 吹き出しの中の文字の位置：% は親の幅が基準になってずれるので、文字の大きさ基準にする（しっぽのぶん少し上に寄せる） */
.qa .qa-group .qa-group-title { padding: 0 0 .9em; }
.qa .qa-group:nth-of-type(2) .qa-group-title { padding: 0 1em .6em 0; }
.soudan .soudan-label { padding: 0 0 1.2em; }
.pflow .pflow-list li::before { padding-bottom: .2em; }

/* =====================================================================
   2026-10-21 本人指示「吹き出しとか後ろのやつはいらない。文字だけでいい」「R がダサい。もう少し自然な R に」
   - 見出し・ラベル・番号の吹き出しの形は外して、文字だけにする
   - 面の上の弧は、要素の角を丸めるのをやめ、画面の外まで続く大きな楕円の上の部分だけを見せる（両端が立ち上がらない、ゆるい弧）
   ===================================================================== */
.qa .qa-group .qa-group-title, .soudan .soudan-label, .pflow .pflow-list li::before { background: none !important; aspect-ratio: auto; width: auto; padding: 0; }

/* Q&A のグループ見出し：白い文字。「について」は小さく */
.qa .qa-group .qa-group-title {
  display: flex; align-items: baseline; gap: .3em; margin: 0 0 clamp(18px, 2.6vh, 28px); color: #fff;
  border-left: 0; letter-spacing: .14em;
}
.qa .qa-group .qa-group-title b { font-size: clamp(24px, 3vw, 40px); }
.qa .qa-group .qa-group-title small { font-size: clamp(15px, 1.6vw, 21px); opacity: 1; }

/* 「まずはここから」：赤い文字 */
.soudan .soudan-label { display: inline-block; color: #ea545d; font-size: clamp(17px, 1.9vw, 24px); margin-bottom: clamp(14px, 2.4vh, 26px); }

/* 進め方の番号：その段の色の大きな数字 */
.pflow .pflow-list li::before { width: auto; color: var(--c); font-size: clamp(40px, 5vw, 68px); font-weight: 700; place-items: center start; }

/* 面の上の弧 */
main { overflow-x: clip; }
.soudan, .qa, .lastcta { border-radius: 0 !important; margin-top: 0 !important; }
.soudan::before, .qa::before, .lastcta::before {
  content: "" !important; position: absolute; z-index: 0; left: -40%; right: -40%;
  top: calc(-1 * var(--arc-h)); height: calc(2 * var(--arc-h)); border-radius: 50%; background: inherit;
  translate: none; width: auto; aspect-ratio: auto;
}
.soudan, .qa, .lastcta { --arc-h: clamp(40px, 6vw, 96px); }
.soudan > *, .qa > *, .lastcta > * { position: relative; z-index: 1; }
.qa .qa-group .qa-group-title, .soudan .soudan-label { aspect-ratio: auto !important; width: auto !important; padding: 0 !important; }
.qa .qa-group .qa-group-title { flex-direction: row !important; justify-content: flex-start !important; align-items: baseline !important; }


/* 進め方の見出しの下の一文（2026-10-25 仮） */
.pflow .pflow-lead {
  margin: 0 0 clamp(26px, 4vh, 44px); font-family: "Zen Maru Gothic", var(--display); font-weight: 700; color: #e40055;
  font-size: clamp(15px, 1.6vw, 21px); letter-spacing: .08em; line-height: 1.8;
}

.pflow .pflow-list h3 { word-break: keep-all; overflow-wrap: anywhere; }   /* 見出しは <wbr> の所で折る（2026-10-25） */
@media (min-width: 761px) {   /* PC：見出しが長くなったので列を広げ、字を少し小さく（2026-10-25） */
  .pflow .pflow-list li { grid-template-columns: clamp(64px, 8vw, 104px) minmax(0, 19em) 1fr; }
  .pflow .pflow-list h3 { font-size: clamp(17px, 1.7vw, 24px); letter-spacing: .06em; }
}
/* 「サポートの進め方」を外したので、無料相談の黄色い面の上の弧（上へはみ出して描く）が上の Support の区画に食い込まないよう間をあける（2026-10-25） */
#soudan { margin-top: calc(var(--arc-h) + clamp(40px, 6vw, 90px)) !important; }
/* 文字の大きさの段階にそろえる（2026-10-25。段階は css/unei.css の :root） */
.soudan .soudan-text, .qa .qa-a, .lastcta-text { font-size: var(--fs-body); }
.qa .qa-q { font-size: var(--fs-body); }
.soudan .soudan-btn, .lastcta-btn { font-size: var(--fs-lead); }
.soudan .soudan-title, .soudan .soudan-title.is-hit { font-size: var(--fs-h2); }
.soudan .soudan-title b, .soudan .soudan-title.is-hit b { vertical-align: middle; position: relative; top: -.06em; }   /* 「30」の丸を文字の高さの真ん中に（2026-10-25 本人指摘「ズレてる」） */