/* ☆ひーろー☆ぎゃらくしー☆ 共通すたいる
   ルール：IE6 の じだい に かけた みため だけ つかう
   （かどまる・かげ・かたむき・なめらかな ぐらで は つかわない）
   れいがい：ろご（わーどあーと の がぞう の つもり）と でんぱTV の がめん の なか */

/* ===== かべがみ（しんかい の たいる） ===== */
html {
  background-color: #001a4d;
  background-image:
    /* あわ（わっか） */
    radial-gradient(circle at 10px 10px, transparent 0 3px, #66ccff 3px 4px, transparent 5px),
    /* あわ（つぶ） */
    radial-gradient(circle at 35px 40px, #3399ff 0 1.5px, transparent 2.5px),
    /* しましま の なみ */
    repeating-linear-gradient(0deg, transparent 0 22px, #002266 22px 25px);
  background-size: 50px 50px, 50px 50px, 100% 25px;
  overflow-x: hidden;
}

/* さくひん ぺーじ の かべがみ（ちぇっかー と ほし） */
html.wall-check {
  background-color: #ccffff;
  background-image:
    radial-gradient(circle at 15px 15px, #ffff00 0 4px, transparent 5px),
    repeating-conic-gradient(#99ffff 0 25%, #ccccff 0 50%);
  background-size: 60px 60px, 30px 30px;
}
/* ちぇっかー は あかるい ので もじ は くろ、りんく は あお に もどす */
html.wall-check body { color: #000000; }
html.wall-check a { color: #0000ff; }
html.wall-check a:visited { color: #800080; }
html.wall-check a:hover { color: #ff0000; }
html.wall-check .small { color: #666666; }

body {
  margin: 0;
  padding: 8px;
  color: #ccecff;
  font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Osaka", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  cursor: url("../img/cursor_star.svg") 8 8, auto;
  overflow-x: clip;
}

/* りんく は したせん の まま（うみ の うえ は みずいろ、はこ の なか は あお） */
a { color: #66ccff; }
a:visited { color: #cc99ff; }
a:hover { color: #ffff00; }
.sec a, .works a { color: #0000ff; }
.sec a:visited, .works a:visited { color: #800080; }
.sec a:hover, .works a:hover { color: #ff0000; }

.wrap {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

table { border-collapse: separate; }
td { vertical-align: top; }

/* ===== いちばん うえ ===== */
.topbar { width: 100%; }
.topbar td { vertical-align: middle; }
.topbar .tr { text-align: right; font-weight: bold; }
.plate {
  display: inline-block;
  padding: 2px 10px;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  background: #ffffcc;
  border: 4px double #0000cc;
}

/* ===== ろご（わーどあーと ふう） ===== */
.head { width: 100%; margin: 4px 0; }
.head td { vertical-align: middle; text-align: center; }
.head .side { width: 90px; }
.clip { display: inline-block; font-size: 60px; line-height: 1; }
/* どっとえ の さかな：ぼやけない ように ぴくせる の まま かくだい */
.clip img { display: block; width: 80px; height: auto; image-rendering: pixelated; }
.clip img.flip { transform: scaleX(-1); }

.logo {
  display: inline-block;
  margin: 0;
  font-family: "HG創英角ﾎﾟｯﾌﾟ体", "HGS創英角ﾎﾟｯﾌﾟ体", "HGSoeiKakupoptai", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  font-size: clamp(22px, 6.2vw, 48px);
  font-weight: 900;
  line-height: 1.25;
  /* ↓ ろご の いろ（うえ → した） */
  background: linear-gradient(#ffffff 0%, #ccffff 35%, #33ccff 60%, #0033cc 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #000066;
  filter: drop-shadow(3px 3px 0 #00ccff) drop-shadow(2px 2px 0 #000033);
}
.logo-sub {
  font-size: 12px;
  font-weight: bold;
  color: #66ccff;
  letter-spacing: 4px;
}

/* ===== りんく ばー・まーきー ===== */
.linkbar { margin: 6px 0; text-align: center; font-weight: bold; }
marquee, .marquee {
  display: block;
  padding: 2px 0;
  font-weight: bold;
  color: #ffff00;
  background: #000080;
  border: 2px inset #9999ff;
}
marquee.pink { color: #ff00ff; background: #ffffcc; border-color: #ff99cc; }

/* ===== ばなー の ならび ===== */
.banner-row {
  margin: 8px 0;
  text-align: center;
  line-height: 0;
}
.banner-row a, .banner-row span { display: inline-block; margin: 3px; }
.banner { display: inline-block; line-height: 0; border: 0; }
/* さくひん ばなー は 234×60（はーふばなー）。がぞう は 2ばい の 468×120 で つくってある */
.banner img { width: 234px; max-width: 100%; height: auto; aspect-ratio: 39 / 10; border: 1px solid #000; }

/* CSS で つくった 200×40 ばなー */
.cssbanner {
  width: 200px;
  height: 40px;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 36px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border: 2px solid #000;
}
.cssbanner.kouji {
  width: 234px;
  height: 60px;
  line-height: 56px;
  color: #000;
  background: repeating-linear-gradient(-45deg, #ffff00 0 10px, #000 10px 20px);
}
.cssbanner.kouji b { background: #ffff00; padding: 1px 6px; border: 1px solid #000; }
.cssbanner.mine {
  color: #ffff00;
  background: #ff00cc;
  border: 3px ridge #ffccff;
}

/* ===== せん ===== */
hr { margin: 10px 0; }
/* にじいろ らいん（GIF の らいん の つもり） */
hr.rainbow {
  height: 6px;
  border: 0;
  background: repeating-linear-gradient(90deg,
    #ff0000 0 12px, #ff9900 12px 24px, #ffff00 24px 36px, #00ff00 36px 48px,
    #00ffff 48px 60px, #0000ff 60px 72px, #ff00ff 72px 84px);
}

/* ===== めいん の ひょう（ひだり：めにゅー、みぎ：なかみ） ===== */
.main { width: 100%; border-spacing: 6px; }

.menu {
  width: 160px;
  padding: 8px 6px;
  text-align: center;
  color: #ffffff;
  background: #000033;
  border: 4px ridge #3399ff;
}
.menu-title {
  margin-bottom: 6px;
  font-weight: bold;
  color: #00ff00;
  border-bottom: 1px dotted #00ff00;
}

/* めにゅー の ぼたん（でっぱり わく） */
.btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 4px 2px;
  font: inherit;
  font-weight: bold;
  color: #ffff00;
  text-align: center;
  text-decoration: none;
  background: #000000;
  border: 4px outset #3399ff;
  cursor: inherit;
}
.btn.cyan  { border-color: #00ffff; color: #00ffff; }
.btn.green { border-color: #00ff00; color: #ffffff; }
.btn.red   { border-color: #ff3333; color: #ff9999; }
.btn:visited { color: #ffff00; }
.btn:hover { background: #333366; color: #ffffff; }
.btn:active { border-style: inset; }

.content { padding: 0; }

/* ===== はこ（table の わく） ===== */
.sec {
  margin: 0 0 10px;
  color: #000000;
  background: #ffffff;
  border: 4px ridge #3366ff;
}
.sec-title {
  padding: 2px 6px;
  font-weight: bold;
  color: #ffff00;
  background: #0033cc;
  border-bottom: 2px dotted #ffffff;
}
.sec-body { padding: 8px 10px; }

.sec.dark { background: #000000; color: #ffffff; border-color: #00ffff; }
.sec.dark .sec-title { color: #ffffff; background: #0000ff; }
.sec.note { background: #ffffcc; border: 3px dashed #ff9900; }
.sec.note .sec-title { color: #ffffff; background: #ff9900; }

/* ===== でんぱTV（ここだけ さいけ） ===== */
.tv {
  margin: 0 0 10px;
  padding: 10px 10px 4px;
  background: #999999;
  border: 6px outset #cccccc;
}
.screen {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 14px;
  border: 6px inset #666666;
  background: #000;
  isolation: isolate;
}
/* ほろぐらむ */
.screen::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -3;
  background:
    radial-gradient(30% 30% at 25% 30%, #ff2a2a, transparent 70%),
    radial-gradient(30% 35% at 75% 25%, #1a1aff, transparent 70%),
    radial-gradient(35% 30% at 70% 75%, #39ff14, transparent 70%),
    radial-gradient(30% 35% at 25% 75%, #ff00c8, transparent 70%),
    radial-gradient(20% 20% at 50% 50%, #fff200, transparent 70%),
    conic-gradient(from 30deg, #ff2a2a, #ff8a00, #fff200, #39ff14, #00e5ff, #1a1aff, #9b30ff, #ff00a0, #ff2a2a);
  animation: holo 30s ease-in-out infinite alternate;
}
@keyframes holo {
  50%  { transform: rotate(20deg) scale(1.2); }
  100% { transform: rotate(-15deg) scale(1.05) translate(-5%, 4%); }
}
/* あみてん・すきゃんらいん */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.6px),
    radial-gradient(rgba(20, 16, 107, 0.5) 1px, transparent 1.6px);
  background-size: 100% 3px, 5px 5px, 5px 5px;
  background-position: 0 0, 0 0, 2.5px 2.5px;
}
/* ぐりっち の おび */
.glitch {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  mix-blend-mode: difference;
  background:
    linear-gradient(90deg, transparent 0 8%, #ff00a0 8% 46%, transparent 46%) 0 18% / 100% 9px no-repeat,
    linear-gradient(90deg, transparent 0 52%, #00e5ff 52% 97%, transparent 97%) 0 40% / 100% 5px no-repeat,
    linear-gradient(90deg, #fff200 0 18%, transparent 18% 70%, #7dff2a 70%) 0 66% / 100% 12px no-repeat,
    linear-gradient(90deg, transparent 0 30%, #000 30% 64%, transparent 64%) 0 86% / 100% 7px no-repeat;
  animation: glitch 7s steps(1) infinite;
}
@keyframes glitch {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-8%, 30px); }
  40%  { transform: translate(10%, -24px); }
  60%  { transform: translate(-3%, 50px); }
  80%  { transform: translate(6%, -40px); }
}
/* うすく くりかえす もじ */
.tv-words {
  position: absolute;
  inset: -10px;
  z-index: -2;
  pointer-events: none;
  font-weight: 900;
  font-size: 46px;
  line-height: 0.95;
  color: rgba(20, 16, 107, 0.22);
  word-break: break-all;
  overflow: hidden;
}
.osd {
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #00ff00;
  background: #000;
  padding: 0 4px;
}
.tv-msg {
  display: inline-block;
  margin: 26px 0 0;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: bold;
  color: #ffff00;
  background: #000080;
}
.tv-foot {
  padding-top: 3px;
  font-size: 10px;
  font-weight: bold;
  color: #333;
}
.tv-foot .led { color: #ff0000; }

/* ===== かうんたー ===== */
.counter {
  display: inline-block;
  padding: 0 4px;
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: bold;
  color: #00ff00;
  letter-spacing: 2px;
  background: #000000;
  border: 2px inset #999999;
}

/* ===== さくひん いちらん の ひょう ===== */
.works {
  width: 100%;
  background: #ffffff;
  border: 4px double #0000ff;
  border-spacing: 2px;
}
.works th {
  padding: 3px;
  color: #ffffff;
  background: #0000ff;
}
.works td {
  padding: 6px;
  vertical-align: middle;
  border: 1px solid #9999ff;
}
.works tr:nth-child(odd) td { background: #eeeeff; }
.works .no { width: 2em; text-align: center; font-weight: bold; color: #ff0000; }
.works .title { font-size: 16px; font-weight: bold; color: #ff00cc; }
.works .go { text-align: center; white-space: nowrap; }

/* ===== めだま（まうす を みる） ===== */
.eye {
  --px: 50%;
  --py: 50%;
  display: inline-block;
  width: 56px;
  height: 56px;
  vertical-align: middle;
  background:
    radial-gradient(circle 10px at var(--px) var(--py), #000 0 4px, #0000ff 5px 9px, transparent 10px),
    radial-gradient(circle 27px at 50% 50%, #ffffff 0 23px, #000000 24px 26px, transparent 27px);
}

/* ===== もじ の おおきさ・いろ（<font> の かわり） ===== */
.s1 { font-size: 10px; }
.s2 { font-size: 18px; }
.s3 { font-size: 26px; font-weight: bold; }
.s4 { font-size: 40px; font-weight: bold; line-height: 1.1; }
.c-pink   { color: #ff00cc; }
.c-red    { color: #ff0000; }
.c-blue   { color: #0000ff; }
.c-green  { color: #009900; }
.c-purple { color: #9900cc; }
.c-orange { color: #ff6600; }
.c-yellow { color: #ffff00; }
.c-cyan   { color: #00ffff; }
.c-lime   { color: #00ff00; }
.c-white  { color: #ffffff; }
.mincho { font-family: "MS PMincho", "ＭＳ Ｐ明朝", serif; }
.hl-yellow { background: #ffff00; color: #ff0000; }
.hl-pink   { background: #ff99ff; color: #0000cc; }
.small { font-size: 11px; color: #99bbee; }
.sec .small { color: #666666; }
.center { text-align: center; }

.new {
  font-size: 10px;
  font-weight: bold;
  color: #ff0000;
  background: #ffff00;
  border: 1px solid #ff0000;
  padding: 0 2px;
  animation: blink 2s steps(1) infinite;
}

/* ===== GIF あにめ ふう の うごき（ぜんぶ かくかく） ===== */
.blink { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.rainbow-text { font-weight: bold; animation: rainbow 3s steps(1) infinite; }
@keyframes rainbow {
  0%   { color: #ff0000; }
  17%  { color: #ff9900; }
  33%  { color: #00cc00; }
  50%  { color: #00ccff; }
  67%  { color: #0000ff; }
  83%  { color: #ff00ff; }
}

.bounce { display: inline-block; animation: bounce 1s steps(1) infinite; }
@keyframes bounce { 50% { transform: translateY(-5px); } }
.bounce2 { display: inline-block; animation: bounce 1s steps(1) infinite 0.5s; }

.sway { display: inline-block; animation: sway 1.6s steps(1) infinite; }
@keyframes sway { 0% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

.spin { display: inline-block; animation: spin 2.4s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.zoom { display: inline-block; animation: zoom 2.4s steps(1) infinite; }
@keyframes zoom { 33% { transform: scale(1.25); } 66% { transform: scale(1.5); } }

.flicker { animation: flicker 5s steps(1) infinite; }
@keyframes flicker { 92% { opacity: 0.3; } 95% { opacity: 1; } 97% { opacity: 0.6; } }

.shake:hover { animation: shake 0.2s steps(2) infinite; }
@keyframes shake { 50% { transform: translate(1px, 1px); } }

/* ===== ちょっとだけ ふおん ===== */
.hidden-msg { color: rgba(0, 0, 0, 0); font-size: 10px; text-align: center; }
.hidden-msg::selection { color: #ff0000; background: #000; }

/* ===== きらきら かーそる・ふってくる えもじ ===== */
.sparkle {
  position: fixed;
  pointer-events: none;
  font-size: 13px;
  z-index: 9999;
  animation: sparkle 0.8s steps(4) forwards;
}
@keyframes sparkle { to { transform: translateY(16px); opacity: 0; } }

/* さかな の かげ（いろ と こさ は background で かえてね） */
.fish {
  position: fixed;
  left: 0;
  z-index: 0;
  pointer-events: none;
  width: var(--w, 60px);
  height: calc(var(--w, 60px) * 0.42);
  background: rgba(0, 5, 25, 0.55);
  clip-path: polygon(0 50%, 12% 22%, 40% 4%, 66% 16%, 80% 40%, 100% 8%, 92% 50%, 100% 92%, 80% 60%, 66% 84%, 40% 96%, 12% 78%);
  transform: translateX(var(--x0));
  animation: swim linear forwards;
}
.fish.big { background: rgba(0, 5, 25, 0.35); }
@keyframes swim {
  from { transform: translateX(var(--x0)) scaleX(var(--flip)); }
  50%  { transform: translateX(calc((var(--x0) + var(--x1)) / 2)) translateY(var(--dy)) scaleX(var(--flip)); }
  to   { transform: translateX(var(--x1)) scaleX(var(--flip)); }
}

/* ===== うごきを とめる ぼたん（Win98 ふう） ===== */
.stopper {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 10000;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  color: #000;
  background: #c0c0c0;
  border: 2px outset #ffffff;
  cursor: pointer;
}
.stopper:active { border-style: inset; }

html.stopped *,
html.stopped *::before,
html.stopped *::after { animation-play-state: paused !important; }
html.stopped .fish,
html.stopped .sparkle { display: none; }

/* ===== すまほ（ひょう を たてに ならべる） ===== */
@media (max-width: 600px) {
  .main, .main tbody, .main tr, .main td { display: block; width: auto; }
  .main { border-spacing: 0; }
  .menu { margin-bottom: 8px; }
  .menu .btn { display: inline-block; width: auto; margin: 0 4px 6px; padding: 4px 10px; }
  .topbar, .topbar tbody, .topbar tr, .topbar td { display: block; text-align: center !important; }
  .head .side { width: 30px; }
  .clip { font-size: 26px; }
  .clip img { width: 30px; }
  .logo { font-size: 21px; -webkit-text-stroke-width: 1px; }
  .s4 { font-size: 30px; }

  /* さくひん の ひょう も たてに */
  .works, .works tbody, .works tr, .works td { display: block; width: auto; }
  .works tr:first-child { display: none; }
  .works tr { padding: 6px; border-bottom: 2px dotted #9999ff; text-align: center; }
  .works td { padding: 2px; border: 0; }
  .works .no { width: auto; }
}