@charset "UTF-8";
/* むかしむかし... 64版サイト
   NINTENDO64 期（1996〜2001）の任天堂のソフトサイトの作法。
   当時は <TABLE WIDTH="520"> と <FONT> と GIF で組んであったものを、同じ見た目のまま CSS で組む。
   色はすべてゲームのパレット（scripts/folktale/px.gd の PALETTE）から採る */

:root {
  --c0: #000000;  --c1: #2B335F;  --c2: #7E2072;  --c3: #19959C;
  --c4: #8B4852;  --c5: #395C98;  --c6: #A9C1FF;  --c7: #EEEEEE;
  --c8: #D4186C;  --c9: #D38441;  --c10: #E9C35B; --c11: #70C6A9;
  --c12: #7696DE; --c13: #A3A3A3; --c14: #FF9798; --c15: #EDC7B0;

  --w: 540px;          /* 本文の幅。当時の表の WIDTH */
  --col: 250px;        /* 2 列に割ったときの 1 列 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 8px 0 24px;
  background: var(--c7) url(../img/bg_tile.png);
  color: var(--c0);
  /* 当時のページは書体を指定していない＝ブラウザの既定のゴシック */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "MS PGothic", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* トップだけ、上に夜空の帯が掛かる（参考サイトの bg.gif と bg2.gif の違い） */
body.top {
  padding-top: 0;
  background: url(../img/bg_band.png) repeat-x top, var(--c7) url(../img/bg_tile.png);
}

img { border: 0; vertical-align: bottom; image-rendering: pixelated; }

a { color: var(--c8); }
a:visited { color: var(--c2); }
a:hover { color: var(--c9); }

b, strong { font-weight: bold; }

.page { width: var(--w); margin: 0 auto; }

hr {
  width: var(--w);
  margin: 24px auto 8px;
  border: 0;
  border-top: 1px solid var(--c13);
  border-bottom: 1px solid #fff;
}

small, .s2 { font-size: 13px; line-height: 1.5; }

/* ---------- トップ ---------- */

#title { height: 230px; margin: 0; padding-top: 16px; text-align: center; }
#title + * { margin-top: 40px; }

#spec { display: flex; justify-content: space-between; align-items: flex-start; }
#spec .shot { width: 256px; margin: 0; }
#spec table { width: 280px; border-spacing: 2px; margin: -2px -2px 0 0; }
#spec td { padding: 3px 4px; font-size: 13px; text-align: left; font-weight: bold; background: var(--c10); }
#spec td.plain { padding: 4px 2px 0; font-weight: normal; background: none; }
#spec .colon { color: var(--c8); }

/* 見出しの帯。棒と葉は画像、字は HTML */
.strip {
  width: 520px; height: 56px;
  margin: 28px auto;
  display: flex; align-items: center; justify-content: center;
  background: url(../img/strip_catch.png) no-repeat center;
  text-align: center;
}
.strip p { margin: 0; }

/* 縁取りの字。当時は GIF に描いてあった */
.ink {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 800;
  paint-order: stroke fill;
  -webkit-text-stroke: 5px var(--c0);
  text-shadow: 2px 2px 0 var(--c0);
  letter-spacing: 0.04em;
}
.strip .ink { font-size: 18px; line-height: 1.25; color: var(--c8); -webkit-text-stroke-color: var(--c7); text-shadow: 2px 2px 0 var(--c0); }
.strip .ink em { font-style: normal; color: var(--c2); }

#menu { display: flex; justify-content: space-between; align-items: flex-start; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu .planks li { margin-bottom: 6px; }

.plank {
  display: block;
  width: 306px; height: 50px;
  padding: 0 0 0 62px;
  background: url(../img/plank.png) no-repeat;
  color: var(--c7);
  font-size: 22px; line-height: 48px;
  text-decoration: none;
  white-space: nowrap;
}
.plank:visited { color: var(--c7); }
.plank:hover { color: var(--c10); }
.plank.play { background-image: url(../img/plank_play.png); color: var(--c10); }
.plank.play:visited { color: var(--c10); }
.plank.play:hover { color: var(--c7); }

#menu .side { width: 180px; }
#menu .side hr { width: 180px; margin: 10px 0 16px; }
#menu .side li { padding-left: 1em; font-size: 13px; line-height: 1.55; }

/* ---------- 下層 ---------- */

#ttl {
  width: 520px; height: 64px;
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  background: url(../img/strip_ttl.png) no-repeat center;
}
#ttl h1 { margin: 0; font-size: 26px; line-height: 1; color: var(--c8); -webkit-text-stroke-color: var(--c7); text-shadow: 2px 3px 0 var(--c0); }

/* 「その１★〜」の細い帯 */
.bar {
  margin: 0 0 8px;
  padding: 2px 4px;
  background: var(--c6);
  color: var(--c1);
  font-size: 13px; font-weight: normal;
  text-align: center;
}
* + .bar { margin-top: 28px; }

.shot { margin: 0 auto 8px; width: 512px; }
.shot img { border: 1px solid var(--c0); }
.shot figcaption { margin-top: 4px; font-size: 13px; text-align: center; }
figure.shot + p { margin-top: 12px; }

.body p { margin: 0 0 12px; }

/* 名前の黄色い行と、説明の淡い行。当時の BGCOLOR="#FFCC00" / "#FFFFCC" */
.cell { width: var(--col); }
.cell .name {
  margin: 2px 0;
  padding: 2px 4px;
  background: var(--c10);
  color: var(--c8);
  font-size: 16px; font-weight: bold;
  text-align: center;
}
.cell .name i { font-style: normal; color: var(--c2); }
.cell .role { margin: 2px 0; padding: 2px 4px; background: var(--c6); font-size: 13px; text-align: center; }
.cell .txt { margin: 2px 0; padding: 4px; background: var(--c15); }
.cell .txt p { margin: 0; }
.cell .art { margin: 0; padding: 6px 0; text-align: center; }
.cell dl { margin: 0; }
.cell dt { font-weight: bold; }
.cell dd { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.cell dd:last-child { margin-bottom: 0; }
.cell.curse .name { background: var(--c2); color: var(--c10); }
.cell.curse .name i { color: var(--c14); }
.cell.wide { width: auto; }

/* 2 列と、あいだの「●・●・●」 */
.pair { display: flex; justify-content: space-between; align-items: center; }
.pair.top { align-items: flex-start; }
.pair::before {
  content: "";
  order: 1;
  align-self: stretch;
  width: 12px;
  background: radial-gradient(circle, var(--c9) 0 4px, transparent 4.5px) center top / 12px 40px repeat-y,
              radial-gradient(circle, var(--c9) 0 1px, transparent 1.5px) center 20px / 12px 40px repeat-y;
}
.pair > :first-child { order: 0; }
.pair > :last-child { order: 2; }

.dots {
  height: 12px;
  margin: 18px 0;
  background: radial-gradient(circle, var(--c9) 0 4px, transparent 4.5px) left center / 26px 12px repeat-x,
              radial-gradient(circle, var(--c9) 0 1px, transparent 1.5px) 13px center / 26px 12px repeat-x;
}

.three { display: flex; justify-content: space-between; align-items: flex-start; }
.three .cell { width: 176px; }

kbd {
  padding: 0 4px;
  border: 1px solid var(--c0);
  background: var(--c7);
  font: inherit; font-size: 13px;
}

.more { margin: 24px 0 0; font-size: 13px; text-align: center; }

/* ---------- 送りボタン ---------- */

#nav { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
#nav a { display: block; text-decoration: none; }
#nav .pill {
  width: 110px; height: 22px;
  background: url(../img/nav_pill.png) no-repeat;
  color: var(--c0);
  font-size: 11px; font-weight: bold; line-height: 20px;
  text-align: center;
}
#nav .pill:hover { color: var(--c8); }

#copy { margin: 14px 0 0; font-size: 11px; text-align: center; color: var(--c1); }