/* The Fancy Hospital 公式ホームページ (1998年風)
   配色: 赤 #bb0001 / ミント #d3f8ed
   レイアウト: 800px幅のテーブル風ページ。左に院内案内メニュー、右に本文。 */
:root {
  --red: #bb0001;
  --red-dark: #6e0001;
  --mint: #d3f8ed;
  --mint-deep: #8fd6bf;
  --pink: #ff9db0;
  --paper: #fffdfa;
  --ink: #3b0b0e;
  --hi: #ffffff;
  --lo: #7d0b0e;
  --font-jp: "DotGothic16", "MS Gothic", "IPAGothic", "Osaka-Mono", monospace;
  --font-px: "Press Start 2P", "DotGothic16", "MS Gothic", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-block: 16px 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background-color: var(--mint);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23d3f8ed'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23ffffff'/%3E%3Crect x='22' y='22' width='2' height='2' fill='%23ffffff'/%3E%3Cpath fill='%23ff9db0' d='M1 1h2v1h2V1h2v1h1v2H7v1H6v1H5v1H4V7H3V6H2V5H1V4H0V2h1z' transform='translate(19 3)'/%3E%3Cpath fill='%23bb0001' fill-opacity='.3' d='M1 1h2v1h2V1h2v1h1v2H7v1H6v1H5v1H4V7H3V6H2V5H1V4H0V2h1z' transform='translate(2 19)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: none;
}

a { color: var(--red); }
a:hover { background: var(--red); color: var(--mint); }
a:focus-visible, button:focus-visible {
  outline: 3px dashed var(--red);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; image-rendering: auto; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; fill: currentColor; shape-rendering: crispEdges; }

/* ---------- ページ枠 ---------- */
.page {
  max-width: 860px;
  margin: 0 auto;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: inset 3px 3px 0 var(--hi), inset -3px -3px 0 var(--mint-deep), 6px 6px 0 var(--red);
}

/* ---------- ヘッダー ---------- */
.site-head {
  position: relative;
  background: var(--red);
  color: var(--mint);
  padding: 14px 16px 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  min-height: 196px;
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.07) 14px 16px);
}
.site-head::after {
  content: ""; position: absolute; right: 18px; top: 10px; width: 320px; height: 64px; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff9db0' d='M1 1h2v1h2V1h2v1h1v2H7v1H6v1H5v1H4V7H3V6H2V5H1V4H0V2h1z' transform='translate(238 6) scale(4)'/%3E%3Cpath fill='%23d3f8ed' d='M1 1h2v1h2V1h2v1h1v2H7v1H6v1H5v1H4V7H3V6H2V5H1V4H0V2h1z' transform='translate(288 30) scale(3)'/%3E%3Cpath fill='%23ffffff' fill-opacity='.8' d='M1 1h2v1h2V1h2v1h1v2H7v1H6v1H5v1H4V7H3V6H2V5H1V4H0V2h1z' transform='translate(186 26) scale(2)'/%3E%3C/svg%3E") no-repeat;
  pointer-events: none;
}
.head-main {
  position: relative; z-index: 2;
  flex: 0 0 290px; width: 290px;
  align-self: stretch;
  padding-bottom: 12px;
}
.logo { margin: 0; line-height: 0; min-width: 0; }
.logo img {
  display: block;
  width: 100%;
  height: auto;
  /* ミント色のロゴにインク色のかげをつけて、赤い背景から浮かせる */
  filter: drop-shadow(3px 3px 0 var(--ink)) drop-shadow(5px 5px 0 var(--pink));
}
.head-main p { margin: 0; }
.head-main .kana span { display: inline-block; }
.head-main .kana {
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--paper);
  text-shadow: 2px 2px 0 var(--red-dark);
}
/* メイン4人が、ヘッダーの下からひょっこり */
.peek {
  --h: 146px;
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: flex-end;
  margin-left: -24px;
  flex: 0 1 auto;
}
/* 4人とも、キャラの輪郭ぴったりに切り出してあるので、同じ高さで並べると間があかない */
.peek img {
  display: block; flex: none;
  height: var(--h); width: auto;
  margin-left: calc(var(--h) * -0.25);
  animation: popup .6s steps(7, end) both;
  animation-delay: calc(var(--i, 0) * .14s + .1s);
}
.peek img:first-child { margin-left: 0; }
/* ドローレとテラーの間だけ、ほんの少しゆったり */
.peek img:nth-child(4) { margin-left: calc(var(--h) * -0.12); }
@keyframes popup { from { transform: translateY(100%); } to { transform: none; } }

.infobar {
  background: var(--paper);
  color: var(--red);
  border-bottom: 3px solid var(--ink);
  font-size: 12px;
  padding: 4px 16px;
  display: flex; flex-wrap: wrap; gap: 2px 18px;
}
.infobar span:first-child { color: var(--ink); }

.ticker {
  background: var(--ink);
  color: var(--mint);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  padding: 3px 0;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 38s linear infinite;
}
@keyframes scroll { to { transform: translateX(-100%); } }

/* ---------- 2カラム ---------- */
.cols {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 0;
}
.side {
  background: var(--mint);
  border-right: 3px solid var(--ink);
  padding: 14px 12px 18px;
  display: flex; flex-direction: column; gap: 16px;
  background-image: radial-gradient(var(--hi) 1.5px, transparent 1.6px);
  background-size: 12px 12px;
}
.main { padding: 18px 20px 24px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }

.menu-title {
  margin: 0 0 6px;
  font-size: 13px;
  background: var(--red);
  color: var(--mint);
  padding: 2px 8px;
  border: 2px solid var(--ink);
}
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.menu a, .btn {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--mint-deep), 3px 3px 0 var(--ink);
  padding: 5px 10px;
  font-family: var(--font-jp);
  font-size: 14px;
  cursor: pointer;
}
.menu a:hover, .btn:hover { background: var(--pink); color: var(--ink); }
.menu a:active, .btn:active { box-shadow: inset 2px 2px 0 var(--mint-deep); transform: translate(3px, 3px); }
.menu .ico { color: var(--red); margin-right: 4px; }

.panel {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 8px 10px;
  font-size: 12px;
  box-shadow: 3px 3px 0 var(--red);
}
.panel h3 { margin: 0 0 4px; font-size: 12px; color: var(--red); }
.counter {
  display: inline-block;
  font-family: var(--font-px);
  font-size: 13px;
  letter-spacing: 2px;
  background: var(--ink);
  color: #7dffd0;
  padding: 5px 8px 4px;
  border: 2px inset var(--mint-deep);
}
.hours-big { font-family: var(--font-px); font-size: 10px; line-height: 1.6; color: var(--ink); background: var(--mint); border: 2px solid var(--ink); padding: 3px 6px; display: inline-block; }
.panel .h3-2 { margin-top: 10px; }

.badge {
  font-size: 11px;
  text-align: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 4px;
  line-height: 1.4;
}
.badge b { display: block; font-family: var(--font-px); font-size: 9px; color: var(--red); }

/* ---------- セクション見出し ---------- */
.sec h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: normal;
  background: var(--red);
  color: var(--mint);
  padding: 4px 10px 3px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: 1px;
}
.sec h2 .en { margin-left: auto; font-family: var(--font-px); font-size: 8px; letter-spacing: 1px; color: var(--pink); }
.sec p { margin: 0 0 10px; }
.dots { border: 0; border-top: 3px dotted var(--pink); margin: 0; }

.new {
  display: inline-block;
  font-family: var(--font-px);
  font-size: 8px;
  background: var(--red);
  color: var(--paper);
  padding: 2px 4px;
  margin-right: 6px;
  vertical-align: 2px;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { visibility: hidden; } }

/* ---------- 受付 ---------- */
.reception { display: flow-root; }
.reception > p { margin: 0 0 10px; }
.reception .overview, .reception .notice { display: flow-root; }
.notice {
  background: var(--mint);
  border: 2px dashed var(--red);
  padding: 8px 12px;
  font-size: 13px;
}
.notice strong { color: var(--red); font-weight: normal; background: var(--paper); padding: 0 4px; }
.notice ul { margin: 6px 0 0; padding-left: 1.2em; }
.notice li { margin-bottom: 3px; }
.reception .notice { margin: 10px 0 0; }
.overview { margin: 12px 0 0; border: 2px solid var(--ink); background: var(--paper); }
.overview > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); border-bottom: 2px dotted var(--mint-deep); }
.overview > div:last-child { border-bottom: 0; }
.overview dt { background: var(--mint); color: var(--red); padding: 4px 8px; font-size: 13px; border-right: 2px solid var(--ink); }
.overview dd { margin: 0; padding: 4px 10px; font-size: 14px; overflow-wrap: anywhere; }
.welcome {
  font-family: var(--font-px);
  font-size: clamp(10px, 2.6vw, 14px);
  line-height: 1.6;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--pink);
  letter-spacing: 1px;
}

/* ---------- 上映室（MV） ---------- */
.tv {
  background: var(--mint);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--red);
  padding: 10px;
}
.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  background: #111;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--paper);
}
.tv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bars {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #fffdfa 0 14.28%, #ffe44a 14.28% 28.57%, #7dffd0 28.57% 42.85%, #4ad0ff 42.85% 57.14%, #ff9db0 57.14% 71.42%, #bb0001 71.42% 85.71%, #3b0b0e 85.71% 100%);
  opacity: .9;
}
.tv-msg {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink); color: var(--mint);
  border: 3px solid var(--mint);
  padding: 8px 18px;
  text-align: center;
  font-size: clamp(13px, 3.4vw, 18px);
  white-space: nowrap;
}
.tv-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tv-ctrl .ch-label { font-family: var(--font-px); font-size: 9px; color: var(--red); margin-right: 2px; }
.tv-ctrl .btn.ch { display: inline-block; font-family: var(--font-px); font-size: 10px; padding: 5px 10px; }
.tv-ctrl .btn.ch[aria-pressed="true"] { background: var(--red); color: var(--mint); box-shadow: inset 2px 2px 0 var(--red-dark), 3px 3px 0 var(--ink); }
.tv-ctrl .ch-link { margin-left: auto; font-size: 12px; }
.tv-note { margin: 8px 0 0; font-size: 12px; color: var(--ink); }
.tv-msg small { display: block; font-family: var(--font-px); font-size: 8px; color: var(--pink); letter-spacing: 2px; margin-top: 4px; }

/* ---------- プレイルーム（ノベルゲーム） ---------- */
.game {
  display: block;
  position: relative;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--red);
  background: var(--ink);
  margin-bottom: 14px;
  text-decoration: none;
  line-height: 0;
}
.game:hover { background: var(--ink); }
.game img { display: block; width: 100%; height: auto; }
.game-cap {
  display: block;
  line-height: 1.5;
  background: var(--red);
  color: var(--paper);
  font-size: 13px;
  padding: 4px 10px;
  border-top: 3px solid var(--ink);
}
.game:hover .game-cap { background: var(--pink); color: var(--ink); }
.btn-inline { display: inline-block; }

/* ---------- フッターに整列するちびキャラ ---------- */
.lineup {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 40px 8px 0;
  background-color: var(--mint);
  background-image: radial-gradient(var(--hi) 1.5px, transparent 1.6px);
  background-size: 12px 12px;
  border-top: 3px solid var(--ink);
  overflow: hidden;
  pointer-events: none;
}
.lineup img {
  display: block;
  flex: 0 1 auto; min-width: 0;
  height: auto;
  margin-left: -8px;
}
.lineup .who { position: relative; display: block; flex: 0 1 144px; min-width: 0; margin-left: -8px; }
.lineup .who img { margin-left: 0; width: 100%; }
.lineup > :first-child { margin-left: 0; }
.bubble {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 12px;
  padding: 3px 9px;
  font-size: 12px; color: var(--red);
  background: var(--paper);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--pink);
  white-space: nowrap;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  margin-left: -5px;
  border: 5px solid transparent; border-top: 8px solid var(--ink);
}

/* ---------- 処方メモ ---------- */
.rx {
  margin-top: 16px;
  background: var(--mint);
  border: 2px dashed var(--red);
  padding: 8px 12px 6px;
  font-size: 13px;
}
.rx b { color: var(--red); font-weight: normal; background: var(--paper); padding: 0 4px; }
.rx ul { margin: 6px 0 0; padding-left: 1.2em; }
.rx li { margin-bottom: 4px; }
.price { color: var(--red); font-size: 11px; }
.when { display: inline-block; margin: 2px 0; padding: 0 5px; font-size: 11px; color: var(--ink); background: var(--mint); border: 1px dashed var(--red); }

/* ---------- お知らせ ---------- */
.news { list-style: none; margin: 0; padding: 0; border: 2px solid var(--ink); background: var(--paper); }
.news li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  padding: 7px 10px;
  border-bottom: 2px dotted var(--mint-deep);
  font-size: 14px;
}
.news li:last-child { border-bottom: 0; }
.news time { color: var(--red); white-space: nowrap; }

/* ---------- 診療科目（作品） ---------- */
.books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.book {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.book .cover {
  aspect-ratio: 5 / 7;
  border: 2px solid var(--ink);
  background: var(--mint);
  overflow: hidden;
  display: block;
}
.book .cover { position: relative; }
.book .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book .cover .tag {
  position: absolute; left: 6px; top: 6px;
  font-family: var(--font-px); font-size: 9px; letter-spacing: 1px;
  background: var(--red); color: var(--mint);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  padding: 3px 5px 2px;
}
.book .cover.free {
  display: grid; place-items: center; text-align: center;
  background-color: var(--mint);
  background-image: linear-gradient(45deg, var(--paper) 25%, transparent 25% 75%, var(--paper) 75%), linear-gradient(45deg, var(--paper) 25%, transparent 25% 75%, var(--paper) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  color: var(--red);
  padding: 8px;
}
.book .cover.free .big { font-family: var(--font-px); font-size: 26px; line-height: 1.2; text-shadow: 2px 2px 0 var(--pink); }
.book .cover.free svg { width: 56px; height: 56px; fill: var(--red); shape-rendering: crispEdges; margin-bottom: 6px; }
.book h3 { margin: 0; font-size: 14px; font-weight: normal; line-height: 1.5; }
.book h3 small { display: block; color: var(--red); font-size: 11px; }
.book p { margin: 0; font-size: 12px; line-height: 1.6; flex: 1; }
.book .btns { display: grid; gap: 6px; }
.book .btn { font-size: 12px; text-align: center; padding: 3px 4px; }
.book .btn[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: inset 2px 2px 0 var(--mint-deep); }

/* ---------- 職員名簿 ---------- */
.staff { display: grid; gap: 14px; }
.roster {
  list-style: none; margin: 0; padding: 8px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px;
  background: var(--mint);
  border: 2px solid var(--ink);
}
.roster button {
  all: unset;
  box-sizing: border-box;
  display: grid; gap: 3px; justify-items: center; align-content: start; text-align: center;
  width: 100%;
  height: 100%;
  padding: 3px 2px 4px;
  font-family: var(--font-jp);
  font-size: 10px;
  line-height: 1.25;
  background: var(--paper);
  border: 2px solid var(--ink);
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}
.roster li { min-width: 0; }
.roster button img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 2px solid var(--ink);
  background: var(--mint);
  filter: grayscale(.8) contrast(.95);
  display: block;
}
.roster button:hover { background: var(--pink); }
.roster button:hover img { filter: none; }
.roster button[aria-pressed="true"] {
  background: var(--red); color: var(--mint);
  box-shadow: 3px 3px 0 var(--ink);
}
.roster button[aria-pressed="true"] img { filter: none; border-color: var(--mint); }
.roster button:focus-visible { outline: 3px dashed var(--red); outline-offset: 2px; }

.chart {
  scroll-margin-top: 8px;
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px;
  align-items: start;
}
/* 職員証 */
.idcard {
  position: sticky; top: 12px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--red);
  padding: 0 0 10px;
  text-align: center;
}
.idcard::before { /* ストラップ穴 */
  content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 8px; margin-left: -19px;
  background: var(--mint); border: 2px solid var(--ink); z-index: 2;
}
.idcard .id-top {
  background: var(--red); color: var(--mint);
  font-family: var(--font-px); font-size: 8px; letter-spacing: 1px;
  padding: 22px 6px 6px;
  display: flex; justify-content: space-between;
}
.idcard .photo {
  margin: 10px 12px 8px;
  aspect-ratio: 2 / 3;
  border: 3px solid var(--ink);
  background-color: var(--mint);
  background-image: radial-gradient(var(--hi) 1.5px, transparent 1.6px);
  background-size: 10px 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--paper);
}
.idcard .photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.idcard .photo.reveal img { animation: dissolve .5s steps(8, end) both; }
@keyframes dissolve {
  from { clip-path: inset(0 100% 0 0); filter: brightness(2); }
  to { clip-path: inset(0 0 0 0); filter: none; }
}
.idcard .nm { font-size: 17px; line-height: 1.3; color: var(--red); margin: 0; padding: 0 8px; overflow-wrap: anywhere; }
.idcard .nm.lg { font-size: 15px; }
.idcard .nm.xl { font-size: 13px; }
.idcard .rd { font-size: 11px; line-height: 1.4; letter-spacing: 0; margin: 4px 0 0; padding: 0 8px; color: var(--ink); overflow-wrap: anywhere; }
.barcode {
  margin: 8px 12px 0; height: 14px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px);
}

/* カルテ */
.karte {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0;
  min-width: 0;
}
.karte .karte-head {
  background: var(--mint);
  border-bottom: 2px solid var(--ink);
  padding: 4px 10px;
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--red);
}
.karte dl { margin: 0; padding: 4px 10px 8px; }
.karte .row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 10px; padding: 6px 0; border-bottom: 2px dotted var(--mint-deep); }
.karte .row:last-child { border-bottom: 0; }
.karte dt { color: var(--red); font-size: 13px; }
.karte dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.karte-body { margin: 0 10px 8px; padding: 6px 10px 2px; border: 2px dotted var(--red); background: var(--mint); }
.karte-body h4 { margin: 0 0 4px; font-size: 13px; font-weight: normal; color: var(--red); }
.karte-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.credit { margin: 0 10px 8px; font-size: 12px; overflow-wrap: anywhere; }
.credit[hidden] { display: none; }
.stepper { display: flex; gap: 10px; justify-content: space-between; padding: 4px 10px 10px; }
.stepper .btn { font-size: 12px; padding: 3px 12px; }

/* ---------- リンク ---------- */
.sec .sub-h { margin: 22px 0 10px; color: var(--red); }
.links { display: flex; flex-wrap: wrap; gap: 10px; }
.links .btn { display: inline-block; }

/* ---------- フッター ---------- */
.site-foot {
  border-top: 3px solid var(--ink);
  background: var(--red);
  color: var(--mint);
  padding: 12px 16px 14px;
  font-size: 12px;
  text-align: center;
  display: grid; gap: 4px;
}
.site-foot a { color: var(--paper); }
.site-foot a:hover { background: var(--mint); color: var(--red); }
.construction {
  display: inline-block; margin: 0 auto 4px; padding: 2px 10px;
  background: repeating-linear-gradient(-45deg, #ffe44a 0 8px, var(--ink) 8px 16px);
  color: var(--ink); font-size: 11px; border: 2px solid var(--ink);
}
.construction span { background: #ffe44a; padding: 0 6px; }

/* ---------- リンク集（左の列に縦にならぶミニバナー） ---------- */
.links-panel .lp-title {
  margin: 0 0 6px; padding: 2px 8px;
  font-size: 13px; font-weight: normal;
  background: var(--red); color: var(--mint);
  border: 2px solid var(--ink);
}
.lp-note { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--red); }
.mini-col {
  display: grid; justify-items: center; gap: 7px;
  padding: 10px 4px;
  background: var(--paper);
  border: 2px dashed var(--red);
}
.mini-col a { display: block; line-height: 0; }
.mini-col img { display: block; image-rendering: pixelated; }
.mini-col a:hover img, .mini-col a:focus-visible img { outline: 2px solid var(--red); outline-offset: 1px; }

/* ---------- お問い合わせ（総合受付） ---------- */
.mailbox { max-width: 520px; background: var(--mint); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--red); }
.mb-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 10px; font-size: 14px;
  background: var(--red); color: var(--mint);
  border-bottom: 2px solid var(--ink);
}
.mb-en { font-family: var(--font-px); font-size: 8px; color: var(--pink); }
.mb-body {
  display: flex; align-items: center; gap: 16px;
  margin: 8px; padding: 12px 14px;
  background: var(--paper); border: 2px dotted var(--red);
}
.mb-ico { flex: none; animation: wiggle 1s steps(1, end) infinite; }
@keyframes wiggle { 50% { transform: translateY(-3px); } }
.mb-info { margin: 0; display: grid; gap: 6px; font-size: 14px; min-width: 0; }
.mb-info div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
.mb-info dt { color: var(--red); }
.mb-info dd { margin: 0; overflow-wrap: anywhere; }
.mb-btn { display: block; margin: 0 8px 8px; text-align: center; font-size: 15px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 720px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .side { border-right: 0; border-bottom: 3px solid var(--ink); }
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: 14px 12px 20px; }
  .books { grid-template-columns: minmax(0, 1fr); }
  .book { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; }
  .book .cover { grid-row: 1 / span 3; align-self: start; }
  .roster { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 6px; }
  .roster button { font-size: 9px; }
  .chart { grid-template-columns: minmax(0, 1fr); }
  .idcard { max-width: 260px; margin: 0 auto; width: 100%; position: relative; top: auto; }
}
@media (max-width: 440px) {
  .lineup { padding-top: 34px; }
  .lineup img { margin-left: -5px; }
  .bubble { font-size: 10px; padding: 2px 6px; margin-bottom: 9px; }
  .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .book { grid-template-columns: 90px minmax(0, 1fr); }
  .logo { max-width: 260px; }
}

@media (max-width: 900px) {
  .site-head::after { display: none; }
  .site-head { display: block; padding-bottom: 0; min-height: 0; }
  .head-main { width: auto; max-width: 300px; padding-bottom: 8px; }
  .peek { --h: min(calc((100vw - 56px) / 3.85), 146px); margin: 0 auto; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .peek img { animation: none; }
  .ticker span { animation: none; padding-left: 8px; white-space: normal; display: block; }
  .new { animation: none; }
  .idcard .photo.reveal img { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Otherworld Registry（別枠）: 赤基調（立ち絵の背景は白っぽく明るい色で固定） ---------- */
:root {
  --rose-pale: #fff4f6;
  --rose: #ffd3dc;
  --rose-mid: #ffb3c2;
  --crimson: #8a0a12;
}
.below {
  background-color: var(--red);
  background-image: radial-gradient(rgba(255, 157, 176, .45) 1.4px, transparent 1.5px);
  background-size: 12px 12px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--pink);
  padding: 8px 10px 10px;
}
.below-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  border-bottom: 2px dotted var(--pink);
  padding-bottom: 6px; margin-bottom: 8px;
}
.below-head .b-title {
  font-family: var(--font-px); font-size: 11px; letter-spacing: 2px;
  background: var(--paper); color: var(--red);
  border: 2px solid var(--ink);
  padding: 3px 8px 2px;
  box-shadow: 3px 3px 0 var(--ink);
}
.below-head .b-sub { font-family: var(--font-px); font-size: 8px; color: var(--rose); letter-spacing: 1px; }
.roster.roster-below {
  grid-template-columns: repeat(2, minmax(0, 96px));
  background: transparent; border: 0; padding: 0; gap: 8px;
}
.roster-below button { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.roster-below button img { border-color: var(--ink); background: var(--rose-pale); filter: grayscale(.45) contrast(.95); }
.roster-below button:hover { background: var(--rose-mid); }
.roster-below button:hover img { filter: none; }
.roster-below button[aria-pressed="true"] { background: var(--ink); color: var(--rose); box-shadow: 3px 3px 0 var(--pink); }
.roster-below button[aria-pressed="true"] img { border-color: var(--rose); }
.roster-below button:focus-visible { outline-color: var(--paper); }

/* 別枠の職員証・カルテ: 赤とバラ色で（ミントの職員側と区別しつつ統一感を保つ） */
.chart.is-below .idcard { background: var(--paper); border-color: var(--ink); box-shadow: 5px 5px 0 var(--pink); }
.chart.is-below .idcard .id-top { background: var(--crimson); color: var(--rose); }
.chart.is-below .idcard::before { background: var(--rose); border-color: var(--ink); }
.chart.is-below .idcard .photo {
  background-color: var(--rose-pale);
  background-image: radial-gradient(var(--rose) 1.8px, transparent 1.9px);
  background-size: 10px 10px;
  box-shadow: inset 0 0 0 3px var(--paper);
  border-color: var(--ink);
}
.chart.is-below .idcard .nm { color: var(--red); }
.chart.is-below .idcard .rd { color: var(--ink); }
.chart.is-below .karte { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.chart.is-below .karte .karte-head { background: var(--rose); color: var(--crimson); border-bottom-color: var(--ink); }
.chart.is-below .karte dt { color: var(--red); font-family: var(--font-px); font-size: 8px; letter-spacing: 1px; padding-top: 5px; }
.chart.is-below .karte .row { border-bottom-color: var(--rose-mid); grid-template-columns: 8.5em minmax(0, 1fr); }
.chart.is-below .karte-body { background: var(--rose-pale); border-color: var(--red); }
.chart.is-below .karte-body h4 { color: var(--red); font-family: var(--font-px); font-size: 8px; letter-spacing: 1px; }
.chart.is-below .karte-body p { color: var(--ink); }
.chart.is-below .stepper .btn { background: var(--rose); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.chart.is-below .stepper .btn:hover { background: var(--rose-mid); }

@media (max-width: 440px) {
  .roster.roster-below { grid-template-columns: repeat(2, minmax(0, 110px)); }
  .chart.is-below .karte .row { grid-template-columns: 7.2em minmax(0, 1fr); }
  .overview > div { grid-template-columns: 6em minmax(0, 1fr); }
  .tv-ctrl .ch-link { margin-left: 0; width: 100%; }
}

@media (max-width: 720px) {
  .mini-col { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
}
@media (max-width: 520px) {
  .mb-body { flex-direction: column; text-align: center; gap: 10px; }
  .mb-info div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-ico { animation: none; }
}

/* 第1巻：表紙→紙書籍の写真に切り替え */
.book .cover.swap img { position: absolute; inset: 0; opacity: 0; }
.book .cover.swap img.s0 { opacity: 1; }
.book .cover .tag.paper { left: auto; right: 8px; top: auto; bottom: 8px; font-family: inherit; font-size: 13px; letter-spacing: 0; z-index: 2; background: none; border: 0; box-shadow: none; padding: 0; color: #fff; text-shadow: -1px -1px 0 var(--red), 1px -1px 0 var(--red), -1px 1px 0 var(--red), 1px 1px 0 var(--red), 2px 2px 0 var(--red); }
@keyframes sw0 { 0%,30% {opacity:1} 36%,94% {opacity:0} 100% {opacity:1} }
@keyframes sw1 { 0%,30% {opacity:0} 36%,63% {opacity:1} 69%,100% {opacity:0} }
@keyframes sw2 { 0%,63% {opacity:0} 69%,94% {opacity:1} 100% {opacity:0} }
@media (hover: hover) {
  .book .cover.swap:hover img.s0, .book .cover.swap:focus-visible img.s0 { opacity: 0; }
  .book .cover.swap:hover img.s1, .book .cover.swap:focus-visible img.s1 { animation: sw1b 4s infinite; }
  .book .cover.swap:hover img.s2, .book .cover.swap:focus-visible img.s2 { animation: sw2b 4s infinite; }
}
@keyframes sw1b { 0%,45% {opacity:1} 50%,95% {opacity:0} 100% {opacity:1} }
@keyframes sw2b { 0%,45% {opacity:0} 50%,95% {opacity:1} 100% {opacity:0} }
@media (hover: none) {
  .book .cover.swap img.s0 { animation: sw0 7s infinite; }
  .book .cover.swap img.s1 { animation: sw1 7s infinite; }
  .book .cover.swap img.s2 { animation: sw2 7s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .book .cover.swap img { animation: none !important; }
  .book .cover.swap img.s0 { opacity: 1 !important; }
}

/* ★マウスカーソル（Windows98風）：画像は img/cursor/ の arrow.png と hand.png。消したいときはこのブロックごと削除 */
html, body { cursor: url(../img/cursor/arrow.png) 0 0, default; }
a, a *, button, .btn, summary, label, [role="button"], [data-ch], .cover { cursor: url(../img/cursor/hand.png) 8 0, pointer; }

/* ★砂時計カーソル：読み込み中と、リンクを押した直後に出ます（js/main.js の「busy」の部分） */
html.busy, html.busy * { cursor: url(../img/cursor/wait.png) 12 14, wait !important; }
.site-foot .credit { font-size: 10px; opacity: .75; margin-top: 4px; }