/* =========================================================
   ギターレッスンアプリ3（2026-10-16）
   評価「初見の使いやすさと、やる気・楽しさ」（../ギターレッスンアプリ2/02_デザイン部門/評価_共有版複製_初見とやる気.md）の指摘を直した分の見た目。
   index.html の「夜の練習部屋」（.sim-dark）の上に重ねる。動きはすべて「動きを減らす」設定と、設定のアニメーション OFF（.no-anim）で止まる
   ========================================================= */

/* ---------- トースト：画面の上（ヘッダーの下）に出す。下に出すと主ボタンやチェック項目に重なっていた ---------- */
/* 幅は中身に合わせ、画面の幅−32px まで（left:50% だけだと、画面の半分の幅で折り返していた） */
.toast { top: calc(env(safe-area-inset-top, 0px) + 72px); bottom: auto; width: max-content; max-width: min(360px, calc(100% - 32px)); transform: translate(-50%, -12px) scale(.96); text-align: center; line-height: 1.5; }
.toast.is-show { transform: translate(-50%, 0) scale(1); }

/* ---------- ホームのイントロ（1画面目）：主ボタンを置き、押したらすぐステップへ ---------- */
.sim-intro__line--title { font-size: clamp(1.625rem, 7.4vw, 2rem); line-height: 1.4; }
.sim-intro .sim-week { margin-top: var(--space-3); }
.sim-intro__go {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 66px; margin-top: var(--space-5); padding: var(--space-2) var(--space-5); text-shadow: none; line-height: 1.3;
}
.sim-intro__go small { font: 700 var(--text-sm)/1.3 var(--font); opacity: .82; }
/* 下へ進む合図は控えめな文字のボタンに（主ボタンができたので） */
.sim-dark .sim-intro .sim-cue {
  flex-direction: row; gap: 4px; min-height: 44px; margin-top: var(--space-2); padding: 0 var(--space-4);
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  text-decoration: underline; text-underline-offset: 4px; text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
.sim-dark .sim-intro .sim-cue .icon { width: 18px; height: 18px; }
.sim-intro .tut-entry { margin-top: -6px; }

/* ---------- ホーム：初めての人の「どんなアプリか」 ---------- */
.hero__lede, .sim-intro__go small, .one-min__note, .page-lead, .section__lead { word-break: auto-phrase; }
.hero__links { display: grid; justify-items: start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pill-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); font: 700 var(--text-sm)/1.3 var(--font); text-decoration: none; text-align: left; cursor: pointer;
}
.pill-link .icon { flex: none; color: var(--c-ink); }
.pill-link:active { transform: translateY(1px); }

/* 文の中のリンク（「コースの全体を見る」など）：押せる高さを 44px に（20px しかなかった） */
.hint a { display: inline-flex; align-items: center; min-height: 44px; }
.sim-dark .view > .hint:has(a) { padding-block: 0; }

/* ---------- 練習ダイアリー：1分だけ鳴らす ---------- */
.diary__action .btn--block { gap: 8px; }
.diary__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--muted); text-align: center; word-break: auto-phrase; }
.diary__alt { text-align: center; font-size: var(--text-sm); }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none;
  color: var(--text); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.one-min {
  display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4); border-radius: 20px;
  background: var(--c-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 60%, transparent);
}
.one-min__time { font: 800 3rem/1 var(--font-display); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.one-min__note { font-size: var(--text-sm); color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .one-min.is-running .one-min__time { animation: v3-glow 1s ease-in-out infinite; }
  @keyframes v3-glow { 50% { text-shadow: 0 0 26px color-mix(in oklab, var(--c-fill) 80%, transparent); } }
}

/* ---------- 弾き語りしたい理由：書いたあとは表示だけ ---------- */
.motive {
  padding: var(--space-4); border-radius: 18px; background: var(--c-soft); color: var(--text);
  font-weight: 700; line-height: 1.7; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-fill) 40%, transparent);
}
.motive::before { content: "♪ "; color: var(--c-ink); }
#motivationBox .btn-row { margin-top: var(--space-3); }

/* ---------- ヘッダーの数字：増えたら弾む（数え上げは app.js） ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .chip.is-bump { animation: v3-bump 700ms var(--ease-spring); }
  @keyframes v3-bump { 30% { transform: scale(1.2); } }
}

/* ---------- コース：道を1画面目に。進み具合は道の上に1行で ---------- */
.course-map { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.sim-dark .course-progress--inline { padding: var(--space-3) var(--space-4); border-radius: 20px; }
.course-progress--inline .sub-title { font-size: var(--text-sm); }
.course-map + .section, .course-song + .course-videos { margin-top: var(--space-5); }
/* 開いたとき：上から順に出て、終えたピックが灯る */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .path--enter .path__item { animation: v3-path-in 420ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i) * 40ms); }
  html:not(.no-anim) .path--enter :is(.path__item--done .pick, .path__item--lesson.is-done .path__disc) {
    animation: v3-light 640ms cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i) * 40ms + 220ms);
  }
  @keyframes v3-path-in { from { opacity: 0; transform: translateX(-14px); } }
  @keyframes v3-light { 0% { opacity: .35; transform: scale(.78); } 60% { opacity: 1; transform: scale(1.14); } }
}

/* ---------- ステップ：見出しのカードの「次のチェック」 ---------- */
.stage__next {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: center;
  width: 100%; min-height: 56px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 0; border-radius: 16px; background: rgba(0, 0, 0, .24);
  box-shadow: inset 0 0 0 1px var(--hair, var(--line)), 0 var(--press) 0 rgba(0, 0, 0, .4);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.stage__next:active { transform: translateY(var(--press)); box-shadow: inset 0 0 0 1px var(--hair, var(--line)); }
.stage__next-label { grid-column: 1; display: flex; justify-content: space-between; gap: var(--space-2); font: 800 var(--text-sm)/1.3 var(--font-display); letter-spacing: .08em; color: var(--c-ink); }
.stage__next-label small { font: 700 var(--text-sm)/1.3 var(--font); letter-spacing: 0; color: var(--muted); }
.stage__next-text { grid-column: 1; font-size: var(--text-sm); font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stage__next-go { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-fill); color: var(--on-fill); font: 900 1.1rem/1 var(--font-display); }
/* 移った先の項目を一瞬光らせる */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .task.is-flash { animation: v3-flash 1.4s ease-out; }
  @keyframes v3-flash { 0%, 45% { box-shadow: 0 0 0 3px var(--c-fill), 0 0 26px var(--c-fill); } }
}

/* ---------- 心がまえ：6本の弦。＋（未）→ ✓（合わせた）。開いた印の「×」が削除に見えたのでやめた ---------- */
.mindset__head { position: relative; }
.mindset__head::after { content: none; }
.mindset__no { min-width: 48px; }
.mindset__mark {
  flex: none; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 60%, transparent); color: var(--c-ink);
}
.mindset__mark .icon { display: none; }
.mindset__plus { font: 900 1.2rem/1 var(--font-display); }
.mindset__item.is-tuned .mindset__mark { background: var(--c-fill); color: var(--on-fill); box-shadow: 0 0 14px -2px color-mix(in oklab, var(--c-fill) 70%, transparent); }
.mindset__item.is-tuned .mindset__mark .icon { display: block; }
.mindset__item.is-tuned .mindset__plus { display: none; }
/* 合わせた弦は、見出しの下にその色の弦を1本張る */
.mindset__item.is-tuned .mindset__head::before {
  content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--c-fill); opacity: .75;
}
.tuned-count { margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--muted); }
.tuned-count b { font: 800 1.25rem/1 var(--font-display); color: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .mindset__item.is-pop .mindset__mark { animation: pop 420ms var(--ease-spring); }
  html:not(.no-anim) .mindset__item.is-pop .mindset__head::before { animation: v3-string 700ms ease-out; transform-origin: 0 50%; }
  @keyframes v3-string { 0% { transform: scaleX(0); } 70% { transform: scaleX(1) translateY(-1px); } 85% { transform: translateY(1px); } }
}

/* 強制カラー（ハイコントラスト）では、追加した部品に線を引く */
@media (forced-colors: active) {
  .stage__next, .one-min, .motive, .pill-link, .mindset__mark { border: 2px solid CanvasText; }
}


/* =========================================================
   2026-10-16 v3 その2（オーナー依頼）
   ① ステップクリア：画面の中央に、もっと豪華に　② 卒業：中央ぞろえ＋特別感（金・卒業証書）
   ③ 卒業したらコースにも札を出す　④ ホームのステップへのボタンは1つ（home.js）
   ========================================================= */

/* ---------- ① ② 中央のお祝いカード（fx.js の band()・graduate()） ---------- */
.band.band--center, .sim-dark .band.band--center {
  inset: 0; z-index: 35; max-width: none; margin: 0; padding: var(--space-4);
  display: grid; place-items: center; border-radius: 0; background: none; box-shadow: none; color: var(--text);
}
.clear__backdrop { position: absolute; inset: 0; background: rgba(10, 8, 6, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.clear {
  position: relative; isolation: isolate; overflow: hidden; width: min(360px, 100%); max-height: calc(100svh - 32px); overflow-y: auto;
  padding: var(--space-6) var(--space-5) var(--space-5); border-radius: 32px; text-align: center; outline: none;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--c-fill) 40%, transparent), transparent 65%), #221a15;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c-fill) 75%, transparent), 0 0 90px -10px color-mix(in oklab, var(--c-fill) 70%, transparent), 0 30px 60px -20px #000;
}
/* 光の筋：ピックの後ろから放射状に */
.clear__rays {
  position: absolute; left: 50%; top: 96px; z-index: -1; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--c-fill) 34%, transparent) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0, #000 14%, transparent 52%); mask: radial-gradient(circle, #000 0, #000 14%, transparent 52%);
}
.clear__pick { width: 112px; margin: 0 auto; filter: drop-shadow(0 0 26px color-mix(in oklab, var(--c-fill) 85%, transparent)); }
.clear__eyebrow { margin-top: var(--space-4); font: 800 var(--text-sm)/1 var(--font-display); letter-spacing: .32em; text-indent: .32em; color: var(--c-fill); }
.clear__title { margin-top: var(--space-2); font: 800 2rem/1.3 var(--font-display); color: #fff8ef; text-shadow: 0 0 28px color-mix(in oklab, var(--c-fill) 65%, transparent); word-break: auto-phrase; }
.clear__sub { margin-top: var(--space-2); font-weight: 700; color: var(--muted); word-break: auto-phrase; }
.clear__picks { display: flex; justify-content: center; gap: 4px; margin-top: var(--space-5); }
.clear__picks span { display: block; width: 28px; }
.clear__picks .is-new { filter: drop-shadow(0 0 12px var(--c-fill)); }
.clear__count { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--muted); }
.clear__count b { font: 800 1.375rem/1 var(--font-display); color: var(--c-fill); margin-right: 2px; }
.clear__actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.clear__actions .btn { width: 100%; }

/* 卒業：金のカード・大きな「0 → 1」（8色の文字） */
.clear--grad { width: min(380px, 100%); padding-top: var(--space-6); }
.clear--grad .clear__eyebrow { margin-top: var(--space-4); letter-spacing: .4em; text-indent: .4em; }
.clear__zero, .celebration__zero {
  margin-top: var(--space-2); font: 800 clamp(3.5rem, 18vw, 4.75rem)/1 var(--font-display); letter-spacing: .02em;
  background: linear-gradient(90deg, #ff958e, #ff9b52, #f4ce23, #68d36f, #0cd1d1, #71bfff, #bda7fe, #ff8acf);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.clear__zero span, .celebration__zero span { font-size: .7em; vertical-align: .08em; }
.clear--grad .clear__title { font-size: 1.75rem; }
.clear__picks--wave { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .clear__backdrop { animation: v3-fade 300ms ease-out both; }
  html:not(.no-anim) .clear { animation: v3-pop 560ms var(--ease-spring) both; }
  html:not(.no-anim) .clear__rays { animation: v3-rays 9s linear both; }
  html:not(.no-anim) .clear__pick { animation: v3-spin-in 900ms cubic-bezier(.2, 1.4, .4, 1) 120ms both; }
  html:not(.no-anim) :is(.clear__eyebrow, .clear__title, .clear__sub, .clear__zero) { animation: v3-up 600ms cubic-bezier(.16, 1, .3, 1) both; }
  html:not(.no-anim) .clear__eyebrow { animation-delay: 380ms; }
  html:not(.no-anim) .clear__zero { animation-delay: 300ms; }
  html:not(.no-anim) .clear__title { animation-delay: 460ms; }
  html:not(.no-anim) .clear__sub { animation-delay: 560ms; }
  html:not(.no-anim) .clear__picks span { animation: v3-up 420ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(640ms + var(--k) * 50ms); }
  html:not(.no-anim) .clear__picks .is-new { animation: v3-up 420ms cubic-bezier(.16, 1, .3, 1) backwards, v3-jump 700ms var(--ease-spring) 1150ms both; animation-delay: calc(640ms + var(--k) * 50ms), 1150ms; }
  html:not(.no-anim) .clear__picks--wave span { animation: v3-up 420ms cubic-bezier(.16, 1, .3, 1) backwards, wave 1.1s ease-in-out 4; animation-delay: calc(var(--k) * 60ms), calc(900ms + var(--k) * 90ms); }
  html:not(.no-anim) .clear__actions { animation: v3-up 500ms cubic-bezier(.16, 1, .3, 1) 800ms both; }
  @keyframes v3-fade { from { opacity: 0; } }
  @keyframes v3-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.03); } }
  @keyframes v3-rays { from { transform: rotate(0deg); } to { transform: rotate(80deg); } }
  @keyframes v3-spin-in { 0% { opacity: 0; transform: scale(0) rotate(-220deg); } 70% { opacity: 1; transform: scale(1.12) rotate(8deg); } }
  @keyframes v3-up { from { opacity: 0; transform: translateY(14px); } }
  @keyframes v3-jump { 0%, 100% { transform: translateY(-4px) scale(1.15); } 40% { transform: translateY(-14px) scale(1.3); } }
}
.clear__picks .is-new { transform: translateY(-4px) scale(1.15); }

/* ---------- ② 卒業レッスンの画面：中央ぞろえのお祝い＋卒業証書 ---------- */
.celebration, .sim-dark .celebration {
  position: relative; overflow: hidden; text-align: center; padding: var(--space-6) var(--space-4) var(--space-5);
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--c-fill) 30%, transparent), transparent 62%), rgba(33, 26, 21, .9);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 80%, transparent), 0 0 70px -14px color-mix(in oklab, var(--c-fill) 70%, transparent);
}
.celebration > * + * { margin-top: var(--space-3); }
.celebration__picks span { width: 32px; }
.celebration__eyebrow { letter-spacing: .3em !important; text-indent: .3em; color: var(--c-fill) !important; }
.celebration__zero { margin-top: var(--space-2) !important; }
.celebration__title { font-size: clamp(1.5rem, 6.6vw, 1.875rem) !important; line-height: 1.4; color: #fff8ef; word-break: auto-phrase; text-wrap: balance; }
.celebration__text { color: var(--text); line-height: 1.9; word-break: auto-phrase; }

.cert { margin-top: var(--space-5) !important; padding: 6px; border-radius: 22px; background: linear-gradient(135deg, #f4ce23, #fff1a8 28%, #c99a0a 58%, #f6d75a 82%, #c99a0a); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7); }
.cert__frame {
  padding: var(--space-6) var(--space-4) var(--space-4); border-radius: 17px; background: #fbf6ea; color: #2b2116; text-align: center;
  box-shadow: inset 0 0 0 1.5px #c99a0a, inset 0 0 0 6px #fbf6ea, inset 0 0 0 7.5px #e2c56a;
}
.cert__label { font: 700 1.75rem/1.2 var(--font); letter-spacing: .5em; text-indent: .5em; color: #2b2116; }
.cert__course { margin-top: var(--space-2); font: 800 1rem/1.4 var(--font-display); letter-spacing: .16em; color: #6e5105; }
.cert__course span { display: block; font-size: var(--text-sm); letter-spacing: .1em; }
.cert__body { margin-top: var(--space-4); font-weight: 700; line-height: 1.9; word-break: auto-phrase; }
.cert__facts { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed #c9b27a; text-align: left; }
.cert__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.cert__facts dt { color: #5f4f33; font-weight: 700; flex: none; }
.cert__facts dd { margin: 0; font-weight: 800; text-align: right; }
.cert__facts dd small { display: block; font-size: var(--text-sm); font-weight: 700; color: #5f4f33; }
.cert__seal { display: grid; place-items: center; width: 68px; height: 68px; margin: var(--space-3) 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 3px #b8263a, inset 0 0 0 6px #fbf6ea, inset 0 0 0 7.5px #b8263a; color: #b8263a; transform: rotate(-12deg); }
.cert__seal span { font: 800 1rem/1 var(--font-display); letter-spacing: .02em; }
.cert__rainbow { display: flex; justify-content: center; gap: 3px; margin-top: var(--space-2); }
.cert__rainbow i { width: 14px; height: 16px; border-radius: 46% 46% 50% 50% / 32% 32% 68% 68%; background: var(--c-fill); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .cert { animation: v3-up 700ms cubic-bezier(.16, 1, .3, 1) 300ms both; }
  html:not(.no-anim) .cert__seal { animation: v3-stamp 700ms cubic-bezier(.34, 1.56, .64, 1) 1000ms both; }
  @keyframes v3-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-30deg); } 60% { opacity: 1; transform: scale(.92) rotate(-10deg); } 100% { transform: rotate(-12deg); } }
}

/* ---------- ③ コース：卒業の札と、道の卒業の印 ---------- */
.grad-banner {
  position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px; margin-bottom: var(--press);
  padding: var(--space-5) var(--space-4) var(--space-4); border-radius: 26px; text-align: center; text-decoration: none; color: var(--text);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--c-fill) 36%, transparent), transparent 65%), rgba(33, 26, 21, .9);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 80%, transparent), 0 0 44px -12px color-mix(in oklab, var(--c-fill) 75%, transparent), 0 var(--press) 0 color-mix(in oklab, var(--c-deep) 70%, #000);
  transition: transform var(--dur-press) var(--ease-out);
}
.grad-banner:active { transform: translateY(var(--press)); }
.grad-banner__picks { display: flex; gap: 3px; margin-bottom: var(--space-2); }
.grad-banner__picks span { display: block; width: 24px; }
.grad-banner__eyebrow { font: 800 var(--text-sm)/1 var(--font-display); letter-spacing: .3em; text-indent: .3em; color: var(--c-fill); }
.grad-banner__title { font: 800 1.5rem/1.35 var(--font); color: #fff8ef; }
.grad-banner__text { font-size: var(--text-sm); font-weight: 700; color: var(--muted); }
.grad-banner__go { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2); padding: 0 var(--space-5); border-radius: var(--r-pill); background: var(--c-fill); color: var(--on-fill); font-size: var(--text-sm); font-weight: 800; }
/* 光が1回だけ横切る */
.grad-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 248, 225, .22) 50%, transparent 65%); transform: translateX(-110%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .grad-banner::after { animation: v3-sheen 1.6s ease-out 500ms both; }
  html:not(.no-anim) .grad-banner__picks span { animation: wave 1.1s ease-in-out 2; animation-delay: calc(var(--k) * 90ms); }
  @keyframes v3-sheen { to { transform: translateX(110%); } }
}
.path__item.is-grad .path__link { background: color-mix(in oklab, var(--c-fill) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 70%, transparent); }
.path__item--lesson.is-grad .path__disc { background: var(--c-fill); color: var(--on-fill); box-shadow: 0 4px 0 var(--c-deep), 0 0 18px -2px var(--c-fill); }
.path__item.is-grad .path__eyebrow { color: var(--c-fill); }

/* ホーム：卒業したあとの「続きから」の欄 */
.sim-home .view--home > .continue--grad { text-align: center; }

@media (forced-colors: active) {
  .clear, .cert__frame, .grad-banner { border: 2px solid CanvasText; }
  .clear__zero, .celebration__zero { color: CanvasText; background: none; }
}

/* 狭い画面（360px 未満）：証書の余白を詰め、項目は名前の下に値を置く（曲名が途中で折れないように） */
@media (max-width: 359px) {
  .cert__frame { padding-inline: var(--space-3); }
  .cert__label { font-size: 1.5rem; }
  .cert__facts { text-align: center; }
  .cert__facts div { display: grid; justify-content: center; justify-items: center; gap: 0; }   /* 広い画面の space-between が grid の列に効いて左に寄っていた */
  .cert__facts :is(dt, dd) { text-align: center; }
  .clear { padding-inline: var(--space-4); }
}

/* 作者から（2026-10-24）：初めての人のホームの紹介の中。案Bの例外で、この欄だけ「僕」の声。地の文より小さく、区切り線で分ける */
.hero__author { padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.hero__author-label { margin: 0 0 var(--space-2); font: 800 var(--text-sm)/1.3 var(--font-display); letter-spacing: .14em; color: var(--muted); }
.hero__author-text { margin: 0; font-size: var(--text-sm); line-height: 1.8; color: var(--muted); }
.hero__author + .hero__links { margin-top: var(--space-4); }