/* =========================================================
   御堂筋PM4:00 / 放課後のキャラクターページ
   色・列数は --midosuji-* のテーマ変数から調整できます。
   ========================================================= */
body.midosuji-page {
  --midosuji-pink: #ed4e86;
  --midosuji-pink-dark: #c93d70;
  --midosuji-yellow: #ffe48e;
  --midosuji-blue: #8bd9e7;
  --midosuji-lilac: #c7b7f2;
  --midosuji-ink: #332a31;
  --midosuji-muted: #746973;
  --midosuji-paper: #fff9fb;
  margin: 0;
  color: var(--midosuji-ink);
  background: radial-gradient(ellipse at 7% 18%, rgb(255 228 142 / 20%), transparent 24rem), radial-gradient(ellipse at 92% 48%, rgb(139 217 231 / 16%), transparent 28rem), linear-gradient(180deg, #fff7fa 0%, #fff 48%, #fff6f9 100%);
  font-family: "メイリオ", Meiryo, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
.midosuji-page *, .midosuji-page *::before, .midosuji-page *::after { box-sizing: border-box; }
.midosuji-page img { max-width: 100%; }
.midosuji-page a { color: inherit; }
.midosuji-page a:focus-visible { outline: 3px solid var(--midosuji-pink); outline-offset: 4px; }
.midosuji-page .skip-link { position: absolute; z-index: 20; top: -60px; left: 12px; padding: 9px 13px; color: #fff; background: var(--midosuji-pink-dark); }
.midosuji-page .skip-link:focus { top: 12px; }
.midosuji-page .hero { overflow: hidden; background: #ed4e86; box-shadow: 0 6px 24px rgb(146 53 90 / 13%); }
.midosuji-page .hero img { display: block; width: 100%; height: auto; }
.midosuji-page .title-under-hero { position: relative; width: min(940px, calc(100% - 40px)); margin: 24px auto 0; padding: 0 0 18px; border-bottom: 1px solid #f0ccd8; text-align: center; }
.midosuji-page .eyebrow { margin: 0 0 5px; color: var(--midosuji-pink-dark); font: 700 9px/1.6 Georgia, serif; letter-spacing: .2em; }
.midosuji-page .title-under-hero h1 { margin: 0; color: #3b2932; font: 700 clamp(24px, 3.4vw, 38px)/1.45 "メイリオ", Meiryo, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; letter-spacing: .1em; }
.midosuji-page .title-under-hero > p:last-child { margin: 5px 0 0; color: var(--midosuji-muted); font-size: 11px; letter-spacing: .1em; }
.midosuji-page main { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.midosuji-page .intro { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px auto 48px; color: #61515b; text-align: center; }
.midosuji-page .intro p { margin: 0; font-size: 12px; letter-spacing: .04em; }
.midosuji-page .intro-mark { color: var(--midosuji-pink); font-size: 16px; }
.midosuji-page .character-section { margin: 0 0 48px; }
.midosuji-page .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 0 18px; padding: 0 0 11px; border-bottom: 2px solid var(--midosuji-pink); }
.midosuji-page .section-heading .eyebrow { margin-bottom: 2px; font-size: 8px; }
.midosuji-page .section-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #382d33; font: 600 24px/1.45 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .08em; }
.midosuji-page .section-heading h2::before { width: 4px; height: 23px; background: var(--midosuji-pink); content: ""; }
.midosuji-page .section-count { padding: 5px 9px; border-radius: 999px; color: #76435a; background: #fff0a9; font: 700 9px/1.4 Georgia, serif; letter-spacing: .08em; }
.midosuji-page .character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.midosuji-page .character-card { min-width: 0; overflow: hidden; border: 1px solid #f0dbe4; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgb(86 47 65 / 8%); }
.midosuji-page .portrait { position: relative; overflow: hidden; aspect-ratio: 1; background: #f5edf1; }
.midosuji-page .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.midosuji-page .character-card:hover .portrait img { transform: scale(1.025); }
.midosuji-page .number { position: absolute; right: 8px; bottom: 7px; padding: 2px 6px; color: #fff; background: rgb(55 38 47 / 72%); font: 11px/1.4 Georgia, serif; letter-spacing: .04em; }
.midosuji-page .character-copy { padding: 12px 13px 15px; }
.midosuji-page .character-copy h3 { margin: 0; color: #332a31; font: 600 18px/1.5 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .04em; }
.midosuji-page .reading { margin: 1px 0 9px; color: #92858d; font-size: 10px; letter-spacing: .04em; }
.midosuji-page .profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin: 0 0 10px; padding: 7px 0; border-top: 1px solid #f1e4e9; border-bottom: 1px solid #f1e4e9; }
.midosuji-page .profile div { display: flex; gap: 5px; align-items: baseline; font-size: 10px; }
.midosuji-page .profile dt { flex: 0 0 auto; color: #968991; }
.midosuji-page .profile dd { margin: 0; color: #42373e; }
.midosuji-page .bio { margin: 0; color: #655a61; font-size: 11px; line-height: 1.85; }
.midosuji-page .reference-section { margin: 8px 0 46px; }
.midosuji-page .relationship-image { display: block; width: min(50%, 620px); margin: 0 auto; overflow: hidden; padding: 10px; border: 2px solid #f5c6d6; border-radius: 15px; background: linear-gradient(135deg, #fff0a9, #fff 50%, #e5faff); box-shadow: 0 7px 20px rgb(86 47 65 / 8%); }
.midosuji-page .relationship-image img { display: block; width: 100%; height: auto; border-radius: 8px; }
.midosuji-page .reference-caption { margin: 8px 3px 0; color: #8d7e87; text-align: right; font-size: 10px; }
.midosuji-page .glossary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.midosuji-page .glossary-item { overflow: hidden; border: 1px solid #f1d6e0; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgb(86 47 65 / 5%); }
.midosuji-page .glossary-item:nth-child(3n + 2) { border-color: #ccecf1; background: #fbfeff; }
.midosuji-page .glossary-item:nth-child(3n) { border-color: #f4e3a7; background: #fffefa; }
.midosuji-page .glossary-item summary { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 15px; color: #493843; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.midosuji-page .glossary-item summary::-webkit-details-marker { display: none; }
.midosuji-page .glossary-item summary::after { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--midosuji-pink); content: "+"; font: 700 15px/1 Arial, sans-serif; }
.midosuji-page .glossary-item[open] summary::after { content: "−"; background: #7c6eb3; }
.midosuji-page .glossary-item p { margin: 0; padding: 0 15px 14px; color: #645962; font-size: 11px; line-height: 1.9; }
.midosuji-page .glossary-art { display: flex; align-items: flex-start; gap: 12px; margin: 0 15px 15px; padding: 9px; border: 1px solid #f0d7e1; border-radius: 9px; background: #fff8fb; }
.midosuji-page .glossary-art img { display: block; width: min(160px, 42%); height: auto; border: 1px solid #e9d8df; border-radius: 5px; box-shadow: 0 3px 10px rgb(86 47 65 / 10%); }
.midosuji-page .glossary-art figcaption { align-self: center; color: #8c6577; font-size: 10px; line-height: 1.7; }
.midosuji-page .glossary-item[open] summary { color: var(--midosuji-pink-dark); }
.midosuji-page .source-note { margin: -5px 0 0; color: #9a9096; font-size: 9px; }
.midosuji-page .site-footer { margin-top: 44px; padding: 24px 20px 27px; border-top: 1px solid #f0d8e1; background: #fff8fa; text-align: center; }
.midosuji-page .back-home { color: #8f3c5d; font: 10px/1.6 Georgia, serif; letter-spacing: .1em; text-decoration: none; }
.midosuji-page .site-footer p { margin: 10px 0 0; color: #9a8e95; font-size: 9px; letter-spacing: .06em; }
@media (max-width: 1000px) { .midosuji-page .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 700px) { .midosuji-page main { width: calc(100% - 30px); }.midosuji-page .character-grid { grid-template-columns: 1fr; gap: 11px; }.midosuji-page .character-card { display: grid; grid-template-columns: minmax(112px, .8fr) minmax(0, 1.2fr); align-items: stretch; }.midosuji-page .portrait { height: 100%; min-height: 230px; aspect-ratio: auto; }.midosuji-page .character-copy { padding: 10px 10px 12px; }.midosuji-page .character-copy h3 { font-size: 16px; }.midosuji-page .bio { font-size: 10px; }.midosuji-page .section-heading h2 { font-size: 21px; }.midosuji-page .glossary-list { grid-template-columns: 1fr; }.midosuji-page .relationship-image { width: 100%; padding: 6px; } }
@media (max-width: 390px) { .midosuji-page .character-grid { grid-template-columns: 1fr; }.midosuji-page .character-card { display: grid; grid-template-columns: minmax(108px, .85fr) minmax(0, 1.15fr); }.midosuji-page .portrait { height: 100%; aspect-ratio: auto; min-height: 190px; }.midosuji-page .profile { gap: 3px 6px; }.midosuji-page .profile div { font-size: 9px; }.midosuji-page .bio { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .midosuji-page .portrait img { transition: none; } }