:root {
  --sky1: #0a7fc4;
  --sky2: #4fc3ed;
  --sky3: #bfeaff;
  --ink: #12365e;
  --white: #fff;
  --coral: #e8604c;
  --m-pink: #f5dbe3;
  --k-blue: #dbe6f5;
  --school: var(--m-pink);
  --school-ink: var(--ink);
  --font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Zen Old Mincho", "Yu Mincho", serif;
}
body[data-school="kohoku"] { --school: var(--k-blue); }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: linear-gradient(145deg, var(--sky3), var(--sky2) 72%, var(--sky1));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 2;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }
.page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  /* 立ち絵の枠高さ。規格キャンバス（1400pxのうち身体は身長cm×7px）ぶんの余白を含むので、
     見た目の大きさを保つため1.266倍してある。縦は画面高、横は左カラムに収まる範囲。
     透かしの配置もこの値を使うので .detail ではなくここに置く */
  --fig-h: min(114svh, 1228px, calc(152vw - 200px));
  /* 規格画像の足元y（1400pxのキャンバス上）。立ち絵用は倍率をかけないので全キャラ共通 */
  --feet: 1331;
}
.page::before {
  position: absolute;
  z-index: -3;
  inset: 0;
  content: "";
  background:
    linear-gradient(120deg, rgba(255,255,255,.66), transparent 46%),
    linear-gradient(155deg, var(--sky3), rgba(79,195,237,.78) 68%, rgba(10,127,196,.58));
}
.bust-background {
  position: absolute;
  z-index: -2;
  /* 透かしの大きさ。枠の高さと切り離して指定するので、拡大しても見える範囲が狭まらない。
     規格画像は頭頂が上から12%（最長身）なので、上端をそこから逆算すれば頭は必ず入る */
  --bust-h: clamp(1500px, 250svh, 2700px);
  /* 枠の上端から頭頂までの距離。PCは上に詰める（マイナスぶんは枠外に出る） */
  --bust-gap: -40px;
  top: 0;
  right: -4%;
  width: min(61vw, 900px);
  height: 100%;
  overflow: hidden;
  opacity: .3;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent);
}
.bust-background img {
  position: absolute;
  /* 規格画像は頭頂が上から12%（最長身）なので、拡大しても頭が枠の8%の位置に来るように上端を決める */
  /* 頭頂の位置は規格画像ごとに違うので、実測値(--head)から逆算して全キャラ同じ高さに揃える */
  top: calc(var(--bust-gap) - (var(--head, 200) / 1400) * var(--bust-h));
  left: 50%;
  width: auto;
  height: var(--bust-h);
  max-width: none;
  transform: translateX(-50%);
  filter: saturate(.75);
  transition: opacity .25s ease;
}
.bust-background img.is-changing { opacity: 0; }
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  padding: 46px clamp(20px, 4vw, 64px) 0;
  align-items: center;
  justify-content: space-between;
}
.header-brand { display: flex; align-items: center; gap: 16px; }
.brand { display: block; width: clamp(130px, 14vw, 190px); }
.brand img { width: 100%; }
.header-socials { display: flex; gap: 8px; }
.header-social {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(18,54,94,.36);
  border-radius: 50%;
  transition: background .25s ease;
}
.header-social:hover { background: rgba(255,255,255,.18); }
.header-social img { width: 12px; height: 12px; object-fit: contain; }
.back-link { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.detail {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1260px, calc(100% - clamp(40px, 100vw - 860px, 80px)));
  min-height: calc(100svh - 95px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(min(400px, 44vw), .85fr);
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
}
/* 立ち絵の地面線を全キャラで固定する。行の高さは右カラム（プロフィール量）でキャラごとに
   変わるため、下端でなく行の上端に合わせ、高さは立ち絵の式から決める */
.visual { position: relative; align-self: start; height: calc(var(--fig-h) * 0.95); }
.school-watermark {
  position: absolute;
  top: 8%;
  left: -2%;
  width: clamp(170px, 23vw, 330px);
  opacity: .12;
}
.character-figure {
  /* 規格化立ち絵（1cm=7px・立ち位置はキャンバス中央）を置く。
     枠の下端から足元までの余白ぶん下にずらして、地面線を .visual の下端に合わせる */
  position: absolute;
  bottom: calc(var(--fig-h) * (var(--feet) - 1400) / 1400);
  left: 50%;
  width: auto;
  max-width: none;
  height: var(--fig-h);
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: opacity .2s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.character-figure.is-changing { opacity: 0; transform: translateX(-50%) translateY(10px); }
/* 立ち絵と同じ絵を真っ黒に潰した影。少しずらして重ねる */
.character-shadow { z-index: 0; translate: clamp(-30px, -2.2vw, -16px) 12px; opacity: .17; filter: brightness(0); }
.character-shadow.is-changing { opacity: 0; }
.character-quote {
  /* 立ち絵を規格化して頭の位置が上がったため、横組みだと全キャラで絵に重なる。
     右の縦キャッチと対にして左端の縦組みに変更（重なりが構造的に起きない） */
  position: absolute;
  z-index: 3;
  top: 7%;
  left: 0;
  width: max-content;
  max-height: 82%;
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--coral);
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 700;
  line-height: 1.85;
  white-space: pre-line;
  writing-mode: vertical-rl;
}
/* 縦書きの三点リーダーは、フォントの縦組み字形が字送り枠の片側に寄る（ブラウザによって寄り方も違う）。
   字面が縦横とも中央にある全角中黒に置き換え、1文字ぶん＝3点の長さに詰めて並べる */
.character-quote .ell {
  /* 字送りを詰めて、3つの中黒を元の三点リーダー1文字分（1em）に収める。
     字送り枠は他の文字と同じ1emなので、中央に乗るのが保証される。
     点が太く縦にもはみ出るので、場所を取る量は変えずに見た目だけ80%に縮める */
  display: inline-block;
  letter-spacing: -.667em;
  transform: scale(.8);
}
.quote-source { display: block; margin-right: 12px; font-family: var(--font-sans); font-size: 8px; font-style: normal; font-weight: 500; letter-spacing: .12em; }
.vertical-catch {
  position: absolute;
  z-index: 3;
  right: 2%;
  top: 15%;
  margin: 0;
  padding-left: 7px;
  border-left: 1px solid var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}
/* スワイプできることを示す印。SPのみ表示し、押しても前後に移動できる */
.swipe-hint { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 1150px) {
  .swipe-hint {
    position: absolute;
    z-index: 5;
    top: 46%;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1;
    place-items: center;
    animation: swipe-nudge 2.4s ease-in-out infinite;
    cursor: pointer;
  }
  .swipe-hint.prev { left: 6px; }
  .swipe-hint.next { right: 6px; animation-delay: 1.2s; }
  .swipe-hint span { margin-top: -3px; }
}
@keyframes swipe-nudge {
  0%, 62%, 100% { opacity: .55; translate: 0 0; }
  76% { opacity: .95; }
}
.swipe-hint.prev { animation-name: swipe-nudge-left; }
.swipe-hint.next { animation-name: swipe-nudge-right; }
@keyframes swipe-nudge-left {
  0%, 62%, 100% { opacity: .5; translate: 0 0; }
  76% { opacity: .95; translate: -5px 0; }
}
@keyframes swipe-nudge-right {
  0%, 62%, 100% { opacity: .5; translate: 0 0; }
  76% { opacity: .95; translate: 5px 0; }
}
.flower { position: absolute; z-index: 2; bottom: 1%; left: -5%; width: clamp(100px, 12vw, 170px); pointer-events: none; }
.info { position: relative; padding-block: 80px 62px; }
.school-label { display: block; color: var(--school-ink); font-size: 11px; font-weight: 700; letter-spacing: .25em; }
.staff-label { display: none; }
.info.is-staff .staff-label { display: block; margin-top: 4px; }
.name { margin: 18px 0 0; font-size: clamp(26.6px, 3.5vw, 49px); line-height: 1.12; letter-spacing: .035em; }
.roman {
  display: block;
  margin-top: 12px;
  font-size: clamp(15.4px, 2.66vw, 37.8px);
  font-style: italic;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
}
.name-lockup { width: fit-content; max-width: 100%; }
.minsa { display: block; width: 100%; height: 14px; margin: 24px 0 0; background: url("assets/deco-minsa-pink.svg") left center / auto 100%; }
body[data-school="kohoku"] .minsa { background-image: url("assets/deco-minsa-navy.svg"); }
.outfit-toggle { display: inline-flex; margin-top: 30px; padding: 3px; border: 1px solid rgba(18,54,94,.35); border-radius: 8px; }
.outfit-toggle[hidden] { display: none; }
.outfit-button {
  min-width: 90px;
  padding: 7px 12px;
  border: 0;
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.outfit-button[aria-pressed="true"] { color: var(--white); background: var(--ink); }
.official-introduction { margin: 42px 0 0; font-size: 15px; line-height: 2.05; letter-spacing: .02em; white-space: pre-line; }
.note-link {
  display: inline-flex;
  min-height: 42px;
  margin-top: 26px;
  padding: 7px 15px;
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
}
.note-link:hover { color: var(--white); background: var(--ink); }
.profile { width: 100%; margin-top: 42px; border-collapse: collapse; font-size: 12px; }
.profile tr { border-top: 1px solid rgba(18,54,94,.22); }
.profile tr:last-child { border-bottom: 1px solid rgba(18,54,94,.22); }
.profile th, .profile td { padding: 10px 0; text-align: left; }
.profile th { width: 45%; font-size: 9px; letter-spacing: .12em; }
.character-nav { display: grid; margin-top: 44px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.nav-character { display: block; padding: 0; border: 0; color: var(--ink); background: none; font-size: 10px; font-weight: 700; text-decoration: none; cursor: pointer; }
.nav-character.next { text-align: right; }
.nav-character.prev { text-align: left; }
.arrow { color: var(--coral); }
.list-link { font-size: 9px; letter-spacing: .1em; text-decoration: none; }
/* ページ右下のTOPへ戻る導線 */
.top-link {
  display: flex;
  margin: 26px 0 0 auto;
  padding: 9px 16px;
  width: fit-content;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(18, 54, 94, .3);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.top-link:hover { border-color: rgba(18, 54, 94, .55); background: rgba(255, 255, 255, .8); }
.top-link span { font-size: 12px; }

@media (max-width: 1150px) {
  /* 1カラム時は画面端でなく立ち絵の脇に置く（幅が広いほど中央へ寄る） */
  .character-quote { left: max(4px, calc(50% - 330px)); }
  .vertical-catch { right: max(20px, calc(50% - 340px)); }
  .page { min-height: auto; }
  /* 1カラム時は立ち絵と重なるので、プロフィール側の背後へ下げる */
  /* 1カラム時は立ち絵の足元より下に置く（頭がぶつかるため）。右へ50pxずらす */
  .bust-background { --bust-gap: 30px; top: calc(var(--fig-h) * 0.95 + 120px); right: calc(-30% - 50px); width: 120%; height: 62%; opacity: .18; }
  .info { padding-top: 180px; }
  .character-quote { max-height: 90%; }
  .page { --fig-h: min(114svh, 950px, 170vw); }
  .detail { display: block; width: 100%; min-height: 0; }
  .school-watermark { top: 7%; left: 4%; width: 190px; }
  .vertical-catch { top: 18%; font-size: 16px; }
  .flower { bottom: 0; left: -22px; width: 112px; }
  .info { padding: 180px 20px 90px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.42)); }
  .name { font-size: clamp(26.6px, 8.4vw, 40.6px); }
  .roman { font-size: clamp(17.5px, 6.3vw, 29.4px); }
  .official-introduction { font-size: 14px; }
}
@media (max-width: 680px) {
  .site-header { padding: 44px 18px 0; }
  .brand { width: 125px; }
  .header-socials { display: none; }
  .back-link { font-size: 9px; }
  .character-quote { left: 4px; font-size: 12px; padding-left: 11px; }
}
@media (max-width: 390px) {
  .nav-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}