* { margin: 0px; padding: 0px; }
body { color: rgb(238, 255, 255); font-size: 15px; font-family: ＭＳ　Ｐゴシック, "MS PGothic", sans-serif; line-height: 160%; background-color: rgb(21, 21, 21); background-image: url("img/wall03.png"); text-align: center; }
img { border: 0px; }
ul { list-style-type: none; }
a[target="_new"] { cursor: alias !important; }
dt { font-weight: bold; }
dd { text-indent: 1em; }
a:link, a:visited { color: rgb(136, 255, 255); border-bottom: 1px solid rgb(0, 153, 255); text-decoration: none; }
a:hover, a:active { color: rgb(0, 255, 170); border-bottom: 1px solid rgb(255, 255, 255); }
.noborder a:link { border-style: none; }
hr { width: 640px; height: 50px; margin: 20px auto 0px; background: linear-gradient(90deg, transparent, #55ffff, transparent) center top no-repeat; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
h1 { font-size: 80%; font-weight: bold; text-align: right; }
h2 { text-align: center; margin: 0px auto 20px; }
#contents { margin: 0px auto; background-color: rgb(135, 206, 250); width: 840px; background-image: url("img/body03.png"); background-repeat: repeat-y; }
#header { padding: 5px 0px; height: 15px; text-align: right; margin-right: 30px; font-size: 80%; }
#NEWS { text-align: right; padding: 0px 30px; font-size: 80%; }
#aikon { margin: 5px 0px; }
#menu { width: 720px; margin: 0px auto 20px; text-align: center; }
#menu ul, #menu li { float: left; text-indent: 0px; }
#arasuji { text-align: left; margin: 0px auto; padding: 0px 40px; }
#promo { margin: 10px auto; text-align: center; }
#promotext p { font-size: 80%; }
#DESIGN p { margin: 30px auto; }
#DESIGN dl, #DESIGN dt, #DESIGN dd, #DESIGN p, #DESIGN ul, #DESIGN li { text-align: center; }
#DESIGN dd { margin-left: 1em; }
#world { width: 660px; margin: 0px auto; text-align: center; }
#world dl, #world dt, #world dd, #world p, #world ul, #world li { text-align: left; }
#world dt { font-weight: bold; float: left; margin-right: 5px; }
#world dd { overflow: hidden; }
#world dl::after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; }
#world dl { display: inline-block; }
* html #world dl { height: 1%; }
#wordl dl { display: block; }
#DRAMA { width: 660px; text-align: center; margin: 0px auto; }
#DRAMA ul { text-align: left; }
#botan { width: 80%; }
#SONGS { width: 660px; margin: 0px auto; text-align: center; }
#SONGS p { text-align: center; margin: 10px auto; }
#SONGS ul { width: 100%; }
#SONGS ul, #SONGS li { text-align: left; }
#SOUNDTR { text-align: left; padding: 0px 70px; }
#SOUNDTR dl, #SOUNDTR dt, #SOUNDTR dd { text-align: left; }
#SOUNDTR dd { margin-left: 1em; }
#CAST { width: 660px; margin: 0px auto; text-align: center; }
#castboxa { width: 50%; text-align: right; float: left; }
#castboxb { width: 50%; text-align: left; float: left; }
#STAFF { width: 660px; margin: 0px auto; text-align: center; }
#staffboxa { width: 50%; text-align: right; float: left; }
#staffboxb { width: 50%; text-align: left; float: left; }
#sankou { margin: 0px auto; text-align: center; font-size: 80%; }
#LINK { margin: 0px auto; text-align: center; }
#LINK dl, #LINK dt, #LINK dd { text-align: center; margin: 0px auto; }
#LINK dl { margin: 5px auto; }
#LINK dd { margin-bottom: 1.5em; }
#OTHER { margin: 0px auto; text-align: center; }
#hanbai { width: 530px; margin: 0px auto; padding: 20px; text-align: left; font-size: 85%; }
#spec { width: 700px; margin: 0px auto; text-align: center; font-size: 80%; }
#CAUTION { width: 530px; text-align: center; margin: 0px auto; padding: 10px 20px; font-size: 85%; background-color: rgb(0, 119, 255); }
#CAUTION p { text-align: left; line-height: 1.5em; }
#bookmark { margin: 0px auto; padding-top: 8px; width: 840px; height: 50px; background-image: url("img/link.png"); text-align: center; }
#bookmark ul, #bookmark li { display: inline; margin: 0px 5px; }
#footer { width: 840px; height: 40px; color: rgb(238, 255, 255); text-shadow: none; padding-top: 20px; background: 50% 50% no-repeat rgb(84, 154, 255); text-align: center; position: relative; }
.space { clear: both; }
ul { display: inline-block; }
.clearFix::after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; }
.clearFix { min-height: 1px; }
* html ul { height: 1px; }
* html .clearfix { zoom: 1; }
:first-child + html .clearfix { zoom: 1; }
/* Current browsers and small screens. Original illustrations and page colors remain. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "MS PGothic", sans-serif; }
#contents { max-width: 100%; min-height: 100vh; overflow: hidden; }
#aikon img, #DESIGN img, #world img, #LINK img, #bookmark img { max-width: 100%; height: auto; }
#menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 100%; }
#menu ul { display: flex; flex-wrap: wrap; justify-content: center; }
#menu li { float: none; }
.promo { margin: 10px auto; text-align: center; }
audio { width: min(320px, 100%); height: 38px; vertical-align: middle; }
iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; }
#bookmark, #footer { max-width: 100%; height: auto; min-height: 50px; }
#bookmark { background-size: cover; }
#bookmark img { vertical-align: middle; }
/* Compact in-page music sample controls, without a seek bar. */
#SONGS .song-sample { display: inline-flex; align-items: center; gap: .3em;
  padding: 0 2px; border: 0; border-bottom: 1px solid #0099ff;
  background: transparent; color: #88ffff; font: inherit; line-height: 1.35;
  vertical-align: middle; cursor: pointer; }
#SONGS .song-sample::before { content: "▶"; display: grid; place-items: center;
  width: 1.5em; height: 1.5em; padding-left: 1px; border: 1px solid currentColor;
  border-radius: 50%; font-size: .85em; line-height: 1; }
#SONGS .song-sample[aria-pressed="true"]::before { content: "Ⅱ"; padding-left: 0; }
#SONGS .song-sample:hover { color: #aaffcc; border-color: #fff; }
#SONGS .song-sample:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#SONGS .song-sample-audio { display: none; }
/* Keep one character of visible space between role/credit and name columns. */
#castboxa, #staffboxa { padding-right: .5em; }
#castboxb, #staffboxb { padding-left: .5em; }
.to-top { position: fixed; bottom: 16px; right: 16px; z-index: 5; display: grid;
  place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0077bb;
  color: #fff !important; border: 1px solid #bfffff !important; font-size: 23px; text-decoration: none !important; }
.world-page #contents { padding: 16px 26px; }
.world-page #world { max-width: 100%; }
.world-page #world dl { display: block; width: 100%; }
.world-page #world dt { float: none; clear: both; display: block; margin: 0 0 .2em; overflow-wrap: anywhere; }
.world-page #world dd { display: block; overflow: visible; margin: 0 0 1.3em; text-indent: 0; }
@media (max-width: 700px) {
  #contents { width: 100%; background-size: 100% auto; }
  #header, #NEWS { margin-right: 0; padding: 8px 14px; }
  #arasuji, #DRAMA, #DESIGN, #world, #SONGS, #CAST, #STAFF,
  #hanbai, #CAUTION, #LINK, #OTHER, #SOUNDTR, #sankou, #spec { max-width: 100%; width: auto; padding-left: 18px; padding-right: 18px; }
  #menu { margin: 0 auto 18px; }
  #menu img { max-width: 100%; height: auto; }
  #castboxa, #castboxb, #staffboxa, #staffboxb { width: 50%; }
  #bookmark { padding: 10px; }
  hr { max-width: 90%; }
  .world-page #contents { padding: 12px; }
}