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

/* ---------- おじょ: 吸血鬼のお嬢の玉座の間 ----------
   キービジュアルから拾ったもの: 玉座のボタン留めのベルベット(背景)、ぼかした鎖(吊るす鎖・区切りの帯)、
   白い縁のステッカー(額・見出し)、羽の付いたハート(飾り・カルーセルのドット)、暗い額縁の黒紫(札・フッター)。
   文字に使う色は、すべて地とのコントラスト比 4.5:1 以上を確かめてある(暗い地の上は、WCAG の式で計算した) */
:root {
  --deco-dark: #231419;      /* キービジュアルの暗い額縁。白い文字 17.7:1 */
  --deco-dark-2: #3a2230;
  --crimson: #b0243f;        /* 羽付きハート。背景の上の文字 6.2:1 */
  --pink-light: #f4a6c1;     /* 暗い地の上の文字 9.3:1 */
  --pearl: #efe3dc;          /* 玉座の縁の真珠 */
  --velvet-line: rgba(194, 24, 91, .07);
  --velvet-button: rgba(194, 24, 91, .13);
  --chain: #a79ea6;
  --font-head: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}

/* 鎖の輪(縦向き)。楕円の輪と、横から見た輪を交互に並べる */
:root {
  --chain-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 26'%3E%3Cellipse cx='7' cy='7' rx='4.6' ry='6.4' fill='none' stroke='%23231419' stroke-width='3.6'/%3E%3Cellipse cx='7' cy='7' rx='4.6' ry='6.4' fill='none' stroke='%23c9c1c7' stroke-width='2'/%3E%3Crect x='5' y='13.2' width='4' height='12' rx='2' fill='%23c9c1c7' stroke='%23231419' stroke-width='1.2'/%3E%3C/svg%3E");
  --chain-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cellipse cx='7' cy='7' rx='6.4' ry='4.6' fill='none' stroke='%23c9c1c7' stroke-width='2.4'/%3E%3Crect x='13.2' y='5' width='12' height='4' rx='2' fill='%23c9c1c7'/%3E%3C/svg%3E");
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 地: 玉座の背もたれのキルト ---------- */
/* 斜めの細い線を2方向に重ねて菱形を作り、交点にボタンを置く。文字の読みやすさを邪魔しない薄さにとどめる */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 50% 50%, var(--velvet-button) 0 2.2px, transparent 3px),
    repeating-linear-gradient(45deg, transparent 0 39px, var(--velvet-line) 39px 40.5px),
    repeating-linear-gradient(-45deg, transparent 0 39px, var(--velvet-line) 39px 40.5px);
  background-size: 56.57px 56.57px, auto, auto;
  background-position: 0 0, 0 0, 0 0;
  font-size: 16px;
  overflow-x: clip;
}

/* ---------- ヒーロー: 鎖で吊るした額と、下げた札 ---------- */
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 72px 16px 40px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(194, 24, 91, .16), transparent 70%),
    linear-gradient(180deg, rgba(35, 20, 25, .08), transparent 120px);
}

.hero-visual {
  position: relative;
  margin: 0;
  width: min(100%, 440px);
  rotate: -1.5deg;
}
/* 額: 白い縁のステッカーに、黒紫の外縁 */
.hero-visual .kv {
  border: 6px solid #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--deco-dark), 0 22px 40px -12px rgba(35, 20, 25, .55);
  background: var(--deco-dark);
}
/* 上端から額の上の角へ下がる2本の鎖 */
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  width: 14px;
  height: 200px; /* 画面の上端より上まで伸ばし、ヒーローの上で切る */
  background: var(--chain-v) center bottom / 14px 26px repeat-y;
  pointer-events: none;
}
.hero-visual::before { left: 16%; }
.hero-visual::after { right: 16%; }
.hero { overflow: hidden; }

/* 額の外にはみ出す、羽付きハートのステッカー(絵の右下の角。絵のロゴは左下なので隠さない) */
.hero-sticker {
  position: absolute;
  right: -22px;
  top: 46%;
  width: 84px;
  height: 42px;
  rotate: 14deg;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 3px 0 rgba(35, 20, 25, .45));
}
.hero-sticker { --wh-wing: var(--deco-dark); --wh-heart: var(--crimson); --wh-stroke: #fff; }
.link-ic { --wh-wing: #fff; --wh-heart: var(--pink-light); --wh-stroke: none; }

/* 札: 黒紫の板に真珠の縁取り。額とは反対に少し傾け、短い鎖で額から下げる */
.hero-plate {
  position: relative;
  margin-top: 30px;
  width: min(100%, 400px);
  padding: 18px 22px 20px;
  text-align: center;
  color: #fff;
  background: var(--deco-dark);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 4px var(--deco-dark),
    inset 0 0 0 6px var(--pearl),
    0 0 0 4px #fff,
    0 0 0 6px var(--deco-dark),
    0 14px 26px -10px rgba(35, 20, 25, .6);
  rotate: 1.2deg;
  transform-origin: 50% -30px;
}
.hero-plate::before,
.hero-plate::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  width: 14px;
  height: 36px;
  background: var(--chain-v) center bottom / 14px 26px repeat-y;
}
.hero-plate::before { left: 22%; }
.hero-plate::after { right: 22%; }
.plate-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(30px, 9vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
  color: var(--pink-light);
}
.plate-en {
  display: block;
  margin-top: 2px;
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3em;
  color: #e6d3db;
}
.plate-catch {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

/* 揺れる札(動きを減らす設定では止まったまま) */
@media (prefers-reduced-motion: no-preference) {
  .hero-plate { animation: plate-sway 5.5s ease-in-out infinite alternate; }
}
@keyframes plate-sway { from { rotate: 1.6deg; } to { rotate: -.8deg; } }

/* きらめき: 大きさと位置を不揃いに */
.sparkle {
  position: absolute;
  color: var(--deco-dark);
  line-height: 1;
  pointer-events: none;
}
.sparkle.s1 { top: 22%; left: 6%; font-size: 30px; }
.sparkle.s2 { top: 60%; right: 5%; font-size: 18px; }
.sparkle.s3 { bottom: 9%; left: 12%; font-size: 22px; color: var(--crimson); }
.sparkle.s4 { top: 12%; right: 14%; font-size: 14px; color: var(--crimson); }

/* ---------- カルーセルの操作(2枚目以降が来たとき) ---------- */
/* ドット: 羽付きハート。今の1枚だけ深紅に塗る */
.hero-visual .kv-controls { justify-content: center; margin-top: 14px; gap: 6px; --kv-hit-x: 3px; }
.kv-dot {
  width: 40px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
}
.kv-dot svg { display: block; width: 100%; height: 100%; }
.kv-dot { --wh-wing: var(--deco-dark); --wh-wing-opacity: .45; --wh-heart: #fff; --wh-stroke: var(--deco-dark); }
.kv-dot[aria-current="true"] { --wh-wing-opacity: 1; --wh-heart: var(--crimson); }
/* 前後: 額の下の角に下がる鎖の輪 */
.kv-ring { position: absolute; bottom: -26px; z-index: 1; }
.kv-ring-prev { left: 10px; }
.kv-ring-next { right: 10px; }
.kv-nav {
  display: grid; place-items: center;
  width: 44px; height: 52px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--deco-dark);
}
.kv-nav svg { width: 38px; height: 46px; overflow: visible; }
.kv-nav .ring { fill: #fff; stroke: var(--deco-dark); stroke-width: 3; }
.kv-nav .ring-arrow { fill: none; stroke: var(--crimson); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kv-nav:active .ring { fill: var(--pearl); }
@media (hover: hover) {
  .kv-nav:hover .ring { fill: var(--pearl); }
}

/* ---------- 節の共通 ---------- */
/* 区切りの鎖の帯は、傾けても端が切れないよう画面より広く作るので、main の外にはみ出した分を切る */
main { display: block; overflow-x: clip; }
.sec {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
  padding: 36px 0;
  scroll-margin-top: 16px;
}
#links { padding-top: 24px; }

/* 見出し: ステッカー文字。ピンクの字に白い太い縁と黒紫の影、最初の字にコウモリがとまる */
.st {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 28px;
  padding: 0 6px;
  font-family: var(--font-head);
  font-size: clamp(30px, 8.6vw, 44px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--accent);
  text-shadow:
    3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff,
    2px 2px #fff, -2px 2px #fff, 2px -2px #fff, -2px -2px #fff,
    4px 3px #fff, -4px 3px #fff,
    4px 6px 0 var(--deco-dark);
  rotate: -2deg;
}
.sec:nth-of-type(even) .st { rotate: 1.5deg; }
.st-bat {
  position: absolute;
  left: -16px;
  top: -14px;
  width: 40px;
  height: 20px;
  fill: var(--deco-dark);
  rotate: -18deg;
}

/* 区切り: ぼかした鎖の帯を斜めに1本渡す(キービジュアルの上下の鎖) */
.chain-band {
  height: 30px;
  margin: 8px -10vw;
  background: var(--chain-h) 0 50% / 30px 16px repeat-x;
  filter: blur(1.2px) drop-shadow(0 2px 0 rgba(35, 20, 25, .35));
  opacity: .8;
  rotate: -3deg;
}

/* ---------- リンク ---------- */
.links-main, .links-sub { list-style: none; margin: 0; padding: 0; }
.links-main { display: grid; gap: 14px; }
@media (min-width: 640px) {
  .links-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.link-big {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 18px;
  color: #fff;
  text-decoration: none;
  background: var(--deco-dark);
  border-radius: 999px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--deco-dark), 0 10px 18px -8px rgba(35, 20, 25, .6);
  transition: background-color .2s;
}
.link-ic { flex: none; width: 56px; height: 28px; }
.link-name { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.link-name [data-link-label] { font-size: 18px; font-weight: 700; }
.link-name small { font-size: 13px; color: var(--pink-light); overflow-wrap: anywhere; }
.link-go { flex: none; font-size: 20px; color: var(--pink-light); }
.link-big:active { background: var(--accent); }
.link-big:active small, .link-big:active .link-go { color: #fff; }
@media (hover: hover) {
  .link-big:hover { background: var(--accent); }
  .link-big:hover small, .link-big:hover .link-go { color: #fff; }
}
.link-big:focus-visible { outline: 3px solid var(--crimson); outline-offset: 8px; }

.links-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.link-small {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--crimson);
  text-decoration: none;
  background: var(--surface);
  border: 2px solid var(--crimson);
  border-radius: 999px;
}
.link-small::before { content: "\2665\FE0E"; margin-right: 6px; font-size: 13px; }
.link-small:active { color: #fff; background: var(--crimson); }
@media (hover: hover) {
  .link-small:hover { color: #fff; background: var(--crimson); }
}

/* ---------- プロフィール: 立ち絵と、輸血パックのカード ---------- */
.profile-body { gap: 36px 48px; }
/* 立ち絵の枠: 白い縁のステッカーに、真珠色の地(ピンクの髪が地に溶けないよう、明るい地にする) */
.tachie-zoom {
  background: linear-gradient(180deg, #fff, var(--pearl));
  border: 5px solid #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--deco-dark), 0 16px 28px -14px rgba(35, 20, 25, .5);
}
/* 衣装のタブ: 小さな札。選んでいるタブだけ黒紫に塗り、ハートを付ける */
.tachie-tabs { gap: 8px; }
.tachie-tab {
  min-height: 40px;
  padding: 6px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--crimson);
  background: var(--surface);
  border: 2px solid var(--deco-dark);
  border-radius: 999px;
}
.tachie-tab[aria-selected="true"] { color: #fff; background: var(--deco-dark); }
.tachie-tab[aria-selected="true"]::before { content: "\2665\FE0E"; margin-right: 6px; color: var(--pink-light); }
.tachie-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tachie-tab:active { background: var(--pearl); }
.tachie-tab[aria-selected="true"]:active { background: var(--deco-dark-2); }
@media (hover: hover) {
  .tachie-tab:not([aria-selected="true"]):hover { background: var(--pearl); }
}
/* クレジットの行の分(上の余白 10px + 1行)を、行の有無に関わらず取っておく。
   作者名を出さない絵(SD)に切り替えると行が無くなり、欄が縮んで下のカードが動くため */
.tachie-item { position: relative; padding-bottom: 34px; }
.tachie-credit { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; line-height: 24px; font-size: 13px; color: var(--muted); }
.tachie-credit a { color: var(--crimson); font-weight: 700; }

.facts { gap: 26px 14px; }
/* 1枚 = 輸血パック: 上に管(::before)、下に波打つ中身(::after)。文字は白い袋の上だけに置く */
.bag {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  margin-top: 14px;
  padding: 16px 14px 34px;
  background: var(--surface);
  border: 2px solid #e5a3b9;
  border-radius: 14px 14px 26px 26px;
  box-shadow: 0 8px 16px -12px rgba(176, 36, 63, .6);
}
.bag::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 12px;
  height: 14px;
  translate: -50% 0;
  background: #e5a3b9;
  border-radius: 4px 4px 0 0;
}
.bag::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 16px;
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(circle at 8px 0, transparent 6.5px, var(--crimson) 7px) 0 0 / 16px 16px repeat-x;
  opacity: .85;
}
.bag dt {
  display: flex;
  align-items: flex-start;   /* ラベルが2行に折り返しても、印は1行目の横に置く */
  line-height: 1.5;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--crimson);
}
.bag-port {
  width: 10px; height: 10px; flex: none; margin-top: .4em;
  border: 2px solid var(--crimson);
  border-radius: 50%;
}
.bag dd { font-size: 17px; font-weight: 700; line-height: 1.55; }
.bag dd small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.bag dd a { color: var(--accent); }
.bag-heart {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 14px;
  line-height: 1;
  color: #e5a3b9;
}
.bag-heart::before { content: "\2665\FE0E"; }

/* コピーの行: 値の右端にボタンを寄せる(タグの長さが違っても、ボタンが縦に揃う)。
   幅が足りなければ、ボタンだけ次の行の右端に回る */
.bag .copy-list { gap: 10px; }
.bag .copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bag .copy-text { font-size: 16px; }
.bag .copy-text-large { font-size: 26px; line-height: 1.2; letter-spacing: .08em; }
/* ボタンは値より控えめに: 細い深紅の縁取りの小さな札。文字は上下左右の中央 */
.copy-btn {
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  white-space: nowrap;
  min-height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--crimson);
  background: var(--surface);
  border: 1.5px solid var(--crimson);
  border-radius: 999px;
  cursor: pointer;
}
.copy-label,
.copy-btn::after { grid-area: 1 / 1; }
.copy-btn::after { content: "コピーしました"; visibility: hidden; }
.copy-btn:active { color: #fff; background: var(--crimson); }
@media (hover: hover) {
  .copy-btn:hover { background: var(--accent-soft); }
}
.copy-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tag-link { color: var(--accent); font-weight: 700; }

/* ---------- 配信時間: 昼と夜の札 ---------- */
.schedule-lead, .schedule-note { margin: 0 auto; max-width: 36em; text-align: center; color: var(--muted); }
.schedule-note { margin-top: 18px; font-size: 14px; }
.schedule {
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.slot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 12px 16px;
  color: #fff;
  background: linear-gradient(160deg, var(--deco-dark-2), var(--deco-dark));
  border-radius: 18px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--deco-dark);
}
/* 印(☼ ☾)はラベルの文字に含める。順番で付けると、枠の順を変えたときに昼と夜の印がずれるため */
.slot-label { font-size: 16px; font-weight: 700; letter-spacing: .12em; color: var(--pink-light); }
.slot-time { font-family: var(--font-head); font-size: clamp(28px, 8vw, 36px); font-weight: 700; line-height: 1.2; }

/* ---------- チューチューイ: 契約の条文 ---------- */
.rules {
  list-style: none;
  counter-reset: rule;
  margin: 0 auto;
  padding: 0;
  max-width: 680px;
  display: grid;
  gap: 14px;
}
.rules li {
  counter-increment: rule;
  position: relative;
  padding: 16px 18px 16px 92px;
  font-weight: 700;
  background: var(--surface);
  border: 2px dashed #e5a3b9;
  border-radius: 14px;
}
.rules li p { margin: 0; }
.rules li::before {
  content: "第" counter(rule, cjk-decimal) "条";
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  padding: 3px 10px;
  font-family: var(--font-head);
  font-size: 15px;
  color: #fff;
  background: var(--crimson);
  border-radius: 999px;
}

/* ---------- 活動記録 ---------- */
/* 本人の言葉の吹き出し。下の小さな三角(::after)で、話している形にする */
.history-quote {
  position: relative;
  max-width: 520px;
  margin: 0 auto 30px;
  padding: 16px 20px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: #fff;
  background: var(--deco-dark);
  border-radius: 18px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--deco-dark);
  rotate: -1deg;
}
/* 「、」までをひとかたまりにし、その途中では折り返さない(「上手くなく / たって」のような改行を防ぐ) */
.history-quote span { display: inline-block; }
.history-quote::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  translate: -50% 0;
  border: 10px solid transparent;
  border-top-color: var(--deco-dark);
}
.history-box { max-width: 560px; margin: 0 auto; }
.history { list-style: none; margin: 0; padding: 0; }
.history li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px 4px;
  border-bottom: 2px dotted #e5a3b9;
}
.history time { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--crimson); }
.history-text { font-weight: 700; }
/* 7件目から下を畳む(並べ方の規則は index.html のコメント) */
.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:not(:checked) ~ .history > li:nth-child(6) { border-bottom: 0; }
.history-more-toggle:focus-visible ~ .history-more { outline: 3px solid var(--accent); outline-offset: 3px; }
.history-more {
  display: block;
  width: fit-content;
  margin: 16px auto 0;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--crimson);
  border: 2px solid var(--crimson);
  border-radius: 999px;
  cursor: pointer;
}
.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; }

/* ---------- 拡大表示 ---------- */
.lightbox { background: rgba(35, 20, 25, .95); }
.lb-close, .lb-nav { background: var(--accent); }
.lb-close:active, .lb-nav:active { background: var(--crimson); }
@media (hover: hover) {
  .lb-close:hover, .lb-nav:hover { background: var(--crimson); }
}

/* ---------- フッター: 黒紫の帯に真珠の縁 ---------- */
.footer {
  margin-top: 48px;
  padding: 36px 16px 40px;
  text-align: center;
  color: #e6d3db;
  background:
    radial-gradient(circle, var(--pearl) 0 2.4px, transparent 3px) 0 8px / 14px 14px repeat-x,
    var(--deco-dark);
  font-size: 14px;
}
.footer-note { margin: 0 0 8px; }
.footer-note a { color: var(--pink-light); font-weight: 700; }
.footer .copy { margin: 18px 0 0; font-size: 13px; letter-spacing: .06em; }

/* ---------- ページ内メニュー: 鎖で吊るしたコウモリと札 ---------- */
.topbar {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 50;
}
/* 札の並び: 1本の鎖に、黒紫の小さな札を縦に吊るす */
/* position はクラスで書く(id で書くと、スマホでメニューを浮かせる style.css の .js .topbar nav に勝ってしまう) */
.topbar nav { position: relative; }
#siteNav {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-top: 34px;
}
#siteNav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 14px;
  left: 18px;
  width: 14px;
  background: var(--chain-v) center top / 14px 26px repeat-y;
  z-index: -1;
}
#siteNav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--deco-dark);
  border-radius: 10px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--deco-dark), 0 6px 12px -6px rgba(35, 20, 25, .6);
}
#siteNav a::before { content: "\2665\FE0E"; margin-right: 6px; font-size: 12px; color: var(--pink-light); }
#siteNav a:nth-child(odd) { rotate: -2deg; }
#siteNav a:nth-child(even) { rotate: 1.5deg; }
#siteNav a:active { background: var(--accent); }
@media (hover: hover) {
  #siteNav a:hover { background: var(--accent); }
}
#siteNav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* スマホ: 左上に固定したコウモリのボタン。上端から短い鎖で吊るす。押すと札が下へ開く */
@media (max-width: 720px) {
  .topbar { position: fixed; left: 10px; }
  .topbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 21px;
    width: 14px;
    height: 12px;
    background: var(--chain-v) center bottom / 14px 26px repeat-y;
  }
  .js .nav-toggle {
    position: relative;
    margin-top: 10px;
    width: 56px;
    height: 56px;
    padding: 0;
    background: var(--deco-dark);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--deco-dark), 0 8px 16px -6px rgba(35, 20, 25, .6);
  }
  .nav-bat { width: 40px; height: 20px; fill: var(--pink-light); transition: rotate .2s; }
  .topbar.is-open .nav-bat { rotate: 180deg; }   /* 開いている間は、コウモリが逆さにぶら下がる */
  .nav-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  /* 開いた札は、ボタンの真下に、ボタンの幅に縛られず並べる(開閉の visibility は style.css のまま) */
  .js .topbar nav { left: 0; right: auto; width: max-content; padding-top: 26px; }
  #siteNav::before { top: 0; }
}
/* 広い画面: 札を画面の左上に固定し、スクロールしても追従させる。
   .brand は鎖の途中にとまる飾りのコウモリ(script.js の「ヘッダーの内側」の目印を兼ねる。スマホでは出さない) */
.brand { display: none; }
@media (min-width: 721px) {
  .topbar { position: fixed; left: 24px; }
  .brand { display: block; position: absolute; top: 10px; left: 4px; z-index: 1; }
  .brand-bat { display: block; width: 42px; height: 21px; fill: var(--deco-dark); rotate: -10deg; }
  #siteNav { padding-top: 44px; }
}
/* 固定した札(左端から約 175px)が本文に重ならないよう、左の余白が 200px に満たない幅(1359px まで)では、
   ヒーローと本文を左に 200px 空けて右へ寄せる。フッターは帯を画面の端まで残し、中の文字だけ寄せる。
   1360px 以上は、本文(最大 960px)の左に 200px 以上の余白があるので、ずらさない */
@media (min-width: 721px) and (max-width: 1359px) {
  .hero { padding-left: 200px; }
  main { margin-left: 200px; }
  .footer { padding-left: 216px; }
}
@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; }
}

/* ---------- スクロールの演出 ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}