/* ==========================================================
   依頼者ごとの装飾
   style.css の後に読み込まれ、同じセレクタなら、こちらが勝つ。
   テンプレート側も setup-site も、このファイルは触らない。依頼者ごとの見た目の作り込みは、すべてここに書く
   (Claude Code に「こうしたい」と頼めば、ここに書く。setup-site は brief.md だけを入力にするので、ここは触らない)
   (style.css を直接変えると、テンプレートの修正を取り込むときに衝突するため)。
   配色・フォント・角丸は、ここではなく brief.md の「デザイン方針」で変える(文字の読みやすさの検査を通すため)。
   ========================================================== */

/* ここあ: 甘いお菓子と SNS のステッカー帳。
   キービジュアルの背景(キャンディ柄のストライプ・方眼・4つ角のきらめき・ぷっくりしたハート・吹き出し)と、
   ファンマークの 🍬、髪の水色のメッシュから。 */

:root {
  /* 装飾専用の色(文字には使わない)。--accent-soft は地とほぼ同じ色で、装飾にすると見えないため別に持つ */
  --pink-deco: #f29cc0;
  --pink-pale: #fde3ee;
  --blue-deco: #86cdef;
  --blue-pale: #e2f3fc;
  --font-pop: "Mochiy Pop One", var(--font-jp);
  --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  /* 4つ角のきらめき(キービジュアルの白いきらめき)。色は mask で塗る */
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21 12 28 19 40 20 28 21 21 28 20 40 19 28 12 21 0 20 12 19 19 12 20 0z'/%3E%3C/svg%3E");
}

/* ---------- 地: 淡いピンクに方眼。左右の端にキャンディ柄のストライプ ---------- */

/* 地は html に敷き、body は透明にする(body に地を塗ると、z-index: -1 の端のストライプが、その下に隠れる) */
html {
  background:
    linear-gradient(rgba(242,156,192,.16) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(242,156,192,.16) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
}
body {
  font-weight: 500;
  background: transparent;
  overflow-x: clip;
}
body::before,
body::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: 12px; z-index: -1;
  background: repeating-linear-gradient(180deg, var(--pink-deco) 0 14px, #fff 14px 28px);
  opacity: .7;
}
body::before { left: 0; }
body::after { right: 0; }
@media (min-width: 861px) {
  body::before, body::after { width: 28px; }
}

main { padding: 0 20px; }

/* ---------- メニュー: 上に貼り付く、白いキャンディのバー ---------- */

.topbar {
  position: sticky; top: 10px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: min(100% - 32px, 880px); margin: 12px auto 0; padding: 6px 8px 6px 18px;
  /* 下のヒーローが透けて見えるよう、半透明 + ぼかし(不透明だと、スクロールで唐突に隠れて見える) */
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 3px solid var(--pink-deco); border-radius: 999px;
  box-shadow: 0 4px 0 var(--pink-pale);
}
.topbar .brand {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  font-family: var(--font-pop); font-size: 20px; letter-spacing: .04em; color: var(--accent); text-decoration: none;
}
.topbar-mark { font-size: 15px; }
#siteNav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
#siteNav a {
  padding: 6px 10px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; border-radius: 999px;
}
#siteNav a:active { background: var(--pink-pale); }
@media (hover: hover) { #siteNav a:hover { background: var(--pink-pale); } }
#siteNav a:focus-visible, .nav-toggle:focus-visible, .topbar .brand:focus-visible { outline: 3px solid var(--blue-deco); outline-offset: 2px; }

/* 三本線のボタン: ピンクの丸に、白い線。開いているときは × */
.nav-toggle {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent);
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block; width: 20px; height: 3px; border-radius: 2px; background: #fff;
}
.nav-toggle-bar { position: relative; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }
.topbar.is-open .nav-toggle-bar { background: transparent; }
.topbar.is-open .nav-toggle-bar::before { top: 0; rotate: 45deg; }
.topbar.is-open .nav-toggle-bar::after { top: 0; rotate: -45deg; }

/* 狭い画面: 一覧は、右上から下に開く吹き出し(しっぽはボタンの下) */
@media (max-width: 720px) {
  #siteNav {
    top: calc(100% + 12px); left: auto; right: 0; width: min(260px, calc(100vw - 32px));
    flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 10px;
    background: var(--surface); border: 3px solid var(--pink-deco); border-radius: 22px;
    box-shadow: 0 6px 0 var(--pink-pale), 0 12px 24px rgba(184,51,111,.14);
  }
  #siteNav::before {
    content: ""; position: absolute; top: -12px; right: 22px; width: 18px; height: 12px;
    background: var(--pink-deco); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  #siteNav a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; font-size: 16px; }
  #siteNav a + a { border-top: 2px dotted var(--pink-pale); border-radius: 0; }
}

/* メニューから飛んだとき、見出しが貼り付いたバーの下に隠れないように */
.sec { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  /* 開閉の仕掛け(opacity と visibility)は style.css のまま。transition には、その2つも並べて書く */
  .js .topbar nav { transform: translateY(-8px); transition: opacity .2s, visibility .2s, transform .25s ease; }
  .js .topbar.is-open nav { transform: none; }
  .nav-toggle-bar::before, .nav-toggle-bar::after { transition: top .2s, rotate .2s; }
}

/* 節: 上下 36px(節の間 72px)。区切りのリボンの前後だけ広く空ける */
.sec {
  position: relative;
  max-width: 880px; margin: 0 auto; padding: 36px 0;
}

/* ---------- 見出し: ぷっくり文字 + きらめき ---------- */
/* 文字は主色(背景との対比 5.3:1)。白い太い縁と、ピンクの影で、ステッカーのように浮かせる */
.pop-title {
  position: relative; width: fit-content; margin: 0 auto 28px; padding: 0 30px;
  font-family: var(--font-pop); font-weight: 400;
  font-size: clamp(30px, 8vw, 44px); line-height: 1.3; letter-spacing: .04em; text-align: center;
  color: var(--accent);
  -webkit-text-stroke: 8px #fff; paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--pink-deco);
}
.pop-title::before,
.pop-title::after {
  content: ""; position: absolute; background: var(--blue-deco);
  -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat;
}
/* 左上に大きめ、右下に小さめ。節ごとに大きさを変えて、規則正しく見せない */
.pop-title::before { width: 22px; height: 22px; left: 0; top: -4px; }
.pop-title::after { width: 13px; height: 13px; right: 4px; bottom: 2px; background: var(--pink-deco); }
#profile .pop-title::before { width: 28px; height: 28px; top: -10px; }
#history .pop-title::after { width: 18px; height: 18px; right: -2px; bottom: -6px; background: var(--blue-deco); }
#rules .pop-title::before { background: var(--pink-deco); }

@media (prefers-reduced-motion: no-preference) {
  .pop-title::before { animation: twinkle 2.6s ease-in-out infinite; }
  .pop-title::after { animation: twinkle 3.4s ease-in-out .8s infinite; }
}
@keyframes twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .6; opacity: .55; } }

/* ---------- 最初の画面: そらちょこさんの絵を、画面いっぱいに敷く ---------- */

/* 上に貼り付いたメニューの裏まで、絵を伸ばす(負の margin) */
.cover {
  position: relative; overflow: clip;
  display: grid; justify-items: center; align-items: end;
  height: min(100svh, 900px); min-height: 560px;
  margin: -78px -20px 0;
  background: var(--pink-pale);
}
/* 絵は枠いっぱいに切り抜いて敷く。スマホでは左右が切れ、真ん中の手を振るここあが残る */
.cover .hero-visual { position: absolute; inset: 0; margin: 0; }
.cover .kv { height: 100%; aspect-ratio: auto; }
.cover .kv-slide img { object-fit: cover; object-position: 50% 30%; }
/* 下の文字を読ませるため、絵の下の方を地の色に溶かす。水色のシャボン玉ときらめきも重ねる */
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 66%, transparent 0 15px, rgba(134,205,239,.9) 16px 19px, transparent 20px),
    radial-gradient(circle at 19% 74%, transparent 0 7px, rgba(134,205,239,.9) 8px 10px, transparent 11px),
    radial-gradient(circle at 88% 70%, transparent 0 22px, rgba(255,255,255,.95) 23px 27px, transparent 28px),
    radial-gradient(circle at 82% 60%, rgba(134,205,239,.85) 0 6px, transparent 7px),
    linear-gradient(180deg, rgba(255,247,250,0) 45%, rgba(255,247,250,.85) 78%, var(--bg) 100%);
}
.cover-text { position: relative; z-index: 2; padding: 0 20px 40px; text-align: center; }
.cover-name {
  margin: 0; font-family: var(--font-pop); font-weight: 400;
  font-size: clamp(52px, 15vw, 96px); line-height: 1.1; letter-spacing: .06em;
  color: var(--accent); -webkit-text-stroke: 10px #fff; paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--pink-deco);
}
.cover-catch {
  display: inline-block; margin: 10px 0 0; padding: 6px 18px;
  font-size: clamp(16px, 4.4vw, 21px); font-weight: 700; letter-spacing: .06em;
  background: rgba(255,255,255,.9); border-radius: 999px; box-shadow: 0 3px 0 var(--pink-pale);
}
.cover-text .post-tags { justify-content: center; margin-top: 12px; }
/* 描いた人の札は、メニューの下の右上に、白い地で小さく */
.cover .kv-credit {
  position: absolute; z-index: 2; top: 92px; right: 16px; margin: 0; font-size: 13px; color: var(--muted);
  padding: 2px 10px; background: rgba(255,255,255,.85); border-radius: 999px;
}

/* 2枚目以降が来たとき: 絵の下の「反応の行」に、吹き出しの前後とうさぎの顔のドット */
.post-actions { position: absolute; z-index: 2; left: 0; right: 0; top: 140px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.post-actions:not(:has(:not(:empty))) { display: none; }
.post-actions .kv-controls { display: flex; gap: 8px; margin: 0; --kv-hit-x: 4px; }
.post-actions .kv-controls[hidden] { display: none; }
.kv-dot, .kv-nav {
  display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--accent); background: none; border: 0;
}
.kv-dot { width: 26px; height: 26px; }
.kv-dot svg { width: 100%; height: 100%; }
.kv-dot .bunny { fill: #fff; stroke: currentColor; stroke-width: 1.6; }
.kv-dot[aria-current="true"] .bunny { fill: currentColor; }
.kv-nav { width: 44px; height: 40px; }
.kv-nav svg { width: 100%; height: 100%; overflow: visible; }
.kv-nav .bubble { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.kv-nav .arrow { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kv-nav:active .bubble { fill: var(--pink-pale); }
@media (hover: hover) { .kv-nav:hover .bubble { fill: var(--pink-pale); } }
.kv-dot:focus-visible, .kv-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* 挨拶の札(押せない飾り) */
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.post-tags li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  font-weight: 700; border-radius: 999px; background: var(--blue-pale);
}
.post-tag-key {
  padding: 2px 10px; font-size: 13px; color: var(--ink); background: #fff; border-radius: 999px;
}

/* ---------- リンク: 吹き出し ---------- */

.bubble-links {
  list-style: none; margin: 0 auto; padding: 0; max-width: 560px;
  display: grid; gap: 18px;
}
.bubble-link {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 12px 22px;
  color: var(--accent); text-decoration: none;
  background: var(--surface); border: 3px solid var(--accent); border-radius: 22px;
  box-shadow: 0 5px 0 var(--pink-deco);
  transition: translate .15s, box-shadow .15s;
}
/* 吹き出しのしっぽ(左下) */
.bubble-link::before {
  content: ""; position: absolute; left: 26px; bottom: -13px; width: 18px; height: 14px;
  background: inherit; border: inherit; border-top: 0; border-right: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 0 0 0 4px;
}
.bubble-name { font-family: var(--font-pop); font-size: 20px; letter-spacing: .04em; }
.bubble-sub { font-size: 14px; font-weight: 700; }
/* 配信サイト(主)だけ、主色で塗る */
.bubble-link.link-primary { color: var(--on-accent); background: var(--accent); }
.bubble-link.link-primary .bubble-sub { color: var(--on-accent); }
.bubble-link:active { translate: 0 3px; box-shadow: 0 2px 0 var(--pink-deco); }
@media (hover: hover) {
  .bubble-link:hover { translate: 0 -2px; box-shadow: 0 7px 0 var(--pink-deco); }
}
.bubble-link:focus-visible { outline: 3px solid var(--blue-deco); outline-offset: 4px; }

/* ---------- 区切り: 水色のリボンを1本だけ斜めに ---------- */

.ribbon {
  height: 28px; margin: 28px -20px; rotate: -3deg;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 3px, transparent 3.5px) 0 50% / 26px 100% repeat-x,
    var(--blue-deco);
  box-shadow: 0 4px 0 rgba(134,205,239,.4);
}

/* ---------- プロフィール: 立ち絵 + キャンディのカード ---------- */

.tachie-tabs { gap: 8px; }
.tachie-tab {
  min-height: 40px; padding: 4px 14px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--accent); background: var(--surface);
  border: 2px solid var(--pink-deco); border-radius: 999px;
}
.tachie-tab[aria-selected="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.tachie-tab:focus-visible { outline: 3px solid var(--blue-deco); outline-offset: 2px; }
.tachie-zoom,
.lightbox[data-group="tachie"] img {
  background:
    linear-gradient(rgba(242,156,192,.22) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(242,156,192,.22) 1px, transparent 1px) 0 0 / 20px 20px,
    #fff;
}
.tachie-zoom { border: 4px solid #fff; border-radius: 24px; box-shadow: 0 0 0 3px var(--pink-deco), 0 8px 0 3px var(--pink-pale); overflow: hidden; }
.tachie-credit { font-size: 14px; color: var(--muted); }
.tachie-credit a { color: var(--accent); }

/* キャンディ: 白い包み紙。左右のねじれは、ピンクと白のストライプの三角 */
/* 横の間隔は、左右のねじれ(16px ずつ)が隣とくっつかない幅にする */
.facts { gap: 18px 40px; padding: 0 16px; }
.candy {
  position: relative; display: grid; align-content: center; gap: 2px;
  min-height: 74px; padding: 10px 16px; text-align: center;
  background: var(--surface); border: 3px solid var(--pink-deco); border-radius: 26px;
}
.candy::before,
.candy::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 34px; translate: 0 -50%;
  background: repeating-linear-gradient(45deg, var(--pink-deco) 0 4px, #fff 4px 8px);
}
.candy::before { left: -16px; clip-path: polygon(100% 30%, 0 0, 22% 50%, 0 100%, 100% 70%); }
.candy::after { right: -16px; clip-path: polygon(0 30%, 100% 0, 78% 50%, 100% 100%, 0 70%); }
/* 水色の包み紙を混ぜて、並びに変化を付ける */
.candy:nth-child(3n+2) { border-color: var(--blue-deco); }
.candy:nth-child(3n+2)::before,
.candy:nth-child(3n+2)::after { background: repeating-linear-gradient(45deg, var(--blue-deco) 0 4px, #fff 4px 8px); }
.candy dt { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.candy dd { font-size: 17px; font-weight: 700; }
.candy dd small { font-size: 13px; color: var(--muted); }
.candy a { color: var(--accent); }
.candy .copy-row, .candy .copy-list { justify-content: center; justify-items: center; }
.copy-btn {
  display: inline-grid; justify-items: center; white-space: nowrap;
  min-height: 36px; padding: 4px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--accent); background: var(--pink-pale); border: 2px solid var(--accent); border-radius: 999px;
}
.copy-label, .copy-btn::after { grid-area: 1 / 1; }
.copy-btn::after { content: "コピーしました"; visibility: hidden; }
.copy-btn:active { background: #fff; }
.copy-btn:focus-visible { outline: 3px solid var(--blue-deco); outline-offset: 2px; }

/* ---------- 配信時間: チャットの吹き出し(左右に交互) ---------- */

.schedule-lead { margin: -12px 0 22px; text-align: center; color: var(--muted); font-size: 15px; }
.schedule { list-style: none; margin: 0 auto; padding: 0; max-width: 480px; display: grid; gap: 16px; }
.schedule li {
  position: relative; display: flex; align-items: baseline; gap: 14px; width: fit-content; max-width: 100%;
  padding: 12px 22px; background: var(--surface); border: 3px solid var(--pink-deco); border-radius: 24px 24px 24px 6px;
}
.schedule li:nth-child(even) { justify-self: end; border-color: var(--blue-deco); border-radius: 24px 24px 6px 24px; }
.schedule-day { font-weight: 700; color: var(--accent); }
.schedule-time { font-family: var(--font-pop); font-size: 24px; letter-spacing: .04em; }

/* ---------- 思い出: タイムライン(新しい順) ---------- */

.history-box { max-width: 560px; margin: 0 auto; }
.history { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
/* 縦のキャンディ柄の線 */
.history::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 6px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, var(--pink-deco) 0 8px, var(--blue-deco) 8px 16px);
}
.history li {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  margin: 0 0 12px; padding: 10px 16px;
  background: var(--surface); border-radius: 16px; box-shadow: 0 3px 0 var(--pink-pale);
}
/* 線の上の、きらめきの印 */
.history li::before {
  content: ""; position: absolute; left: -27px; top: 14px; width: 16px; height: 16px; background: var(--accent);
  -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat;
}
.history time { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.history-text { font-weight: 700; }

.history-more-toggle:not(:checked) ~ .history > li:nth-child(n+7) { display: none; }
.history-box:not(:has(.history > li:nth-child(7))) :is(.history-more-toggle, .history-more) { display: none; }
.history-more-toggle:focus-visible ~ .history-more { outline: 3px solid var(--accent); outline-offset: 3px; }
.history-more-close { display: none; }
.history-more-toggle:checked ~ .history-more .history-more-open { display: none; }
.history-more-toggle:checked ~ .history-more .history-more-close { display: inline; }
.history-more {
  display: block; width: fit-content; margin: 6px auto 0; padding: 8px 20px; cursor: pointer;
  font-weight: 700; color: var(--accent); background: var(--surface);
  border: 2px dashed var(--accent); border-radius: 999px;
}

/* ---------- おやくそく: 「×」の札 ---------- */

.rules { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 560px; }
/* 札は、淡い地の付箋(押せるボタンの「破線 + 丸い枠」と見分けるため、実線で角を少しだけ丸める)。
   Why not 丸い枠に塗った丸の×: タグを消すボタンと同じ形になり、押すと消えそうに見えた */
.rules li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 14px; font-size: 17px; font-weight: 700;
  background: var(--pink-pale); border: 2px solid var(--pink-deco); border-radius: 10px;
  box-shadow: 0 3px 0 rgba(242,156,192,.45);
}
.rules li:nth-child(odd) { rotate: -2deg; }
.rules li:nth-child(even) { rotate: 1.5deg; }
/* 禁止の印(IRIAM のプロフィールの「×」)。文字は本文だけにし、印は CSS で描く。読み上げでは読ませない */
.rules li::before {
  content: "×"; content: "×" / ""; flex: none;
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--accent);
}
.rules li p { margin: 0;
}

/* ---------- 描いてもらった絵: クレジットページへの入口 ---------- */

#thanks { text-align: center; padding-bottom: 56px; }
.credits-entry {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 28px;
  font-family: var(--font-pop); font-size: 18px; letter-spacing: .04em; text-decoration: none;
  color: var(--on-accent); background: var(--accent); border-radius: 999px;
  box-shadow: 0 5px 0 var(--pink-deco);
}
.credits-entry::after {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat;
}
.credits-entry:active { translate: 0 3px; box-shadow: 0 2px 0 var(--pink-deco); }
.credits-entry:focus-visible { outline: 3px solid var(--blue-deco); outline-offset: 4px; }

/* ---------- 拡大表示: 前後のボタンは、主色の不透明な地(白い作品の上でも、暗い背景の上でも見える) ---------- */

.lb-nav:active, .lb-close:active { background: var(--accent-hover); }
@media (hover: hover) { .lb-nav:hover, .lb-close:hover { background: var(--accent-hover); } }

/* ---------- フッター ---------- */

.footer {
  padding: 32px 20px 40px; text-align: center; font-size: 13px; color: var(--muted);
  background: rgba(255,255,255,.7); border-top: 3px dotted var(--pink-deco);
}
.footer-note { margin: 4px 0; }
.footer a { color: var(--accent); }
.copy { margin: 14px 0 0; font-size: 13px; }

/* ---------- 広い画面 ---------- */

@media (min-width: 861px) {
  .sec { padding: 40px 0; }
  .facts { padding: 0 18px; }
  /* カードの列を、立ち絵の高さの中央に浮かせず、上(タブの行の下)にそろえる */
  .profile-body { align-items: start; }
  .facts-wrap { margin-top: 56px; }
}

/* ---------- クレジットページ(credits/index.html) ---------- */

.credits-page main { padding-top: 24px; }
.credits-page .sec-title {
  width: fit-content; margin: 8px auto 12px;
  font-family: var(--font-pop); font-weight: 400; font-size: clamp(30px, 8vw, 44px); letter-spacing: .04em;
  color: var(--accent); -webkit-text-stroke: 8px #fff; paint-order: stroke fill; text-shadow: 0 5px 0 var(--pink-deco);
}
.credits-lead { margin: 0 0 28px; text-align: center; color: var(--muted); font-size: 15px; }
.credits-page .page-back { margin: 0; }
.credits-page .page-back a { font-weight: 700; color: var(--accent); }
/* 依頼品は1人1枚。まとまりの見出し(どれも「依頼品」)は、読み上げにだけ残す */
#credits-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 22px; align-items: start; }
.credit {
  display: flex; flex-direction: column; padding: 12px 12px 16px;
  background: var(--surface); border: 3px solid var(--pink-pale); border-radius: 24px;
  box-shadow: 0 6px 0 var(--pink-deco);
}
.credit:nth-child(3n+2) { box-shadow: 0 6px 0 var(--blue-deco); }
.credit-heading {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.credit-works { order: -1; }
.credit-work { margin: 0; }
.credit-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: var(--pink-pale); }
.credit-zoom img { display: block; width: 100%; height: auto; }
.credit-title { margin-top: 10px; font-weight: 700; }
.credit-title a { color: var(--accent); }
.credit-creator { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.credit-links { list-style: none; display: flex; gap: 8px; margin: 6px 0 0; padding: 0; }
.credit-links a {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 32px; padding: 0 12px;
  font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none;
  border: 2px solid var(--accent); border-radius: 999px;
}
.back-top {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5;
  display: grid; place-items: center; width: 56px; height: 56px;
  font-family: var(--font-pop); font-size: 13px; text-decoration: none;
  color: var(--on-accent); background: var(--accent); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 4px 0 var(--pink-deco);
}

/* 身長・好きなもの・苦手なものが空の間、「デザイン」のカードが1枚だけ残り、右が空く。横幅いっぱいにして隙間を作らない */
.candy[data-key="design"] { grid-column: 1 / -1; }