@charset "UTF-8";
/* トップページ */

/* オープニング（サウンドロゴ） */
#splash {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: splashBg .5s ease-in-out 1s both;
  cursor: pointer;
}
#splash img {
  width: min(1080px, 96vw); height: auto;
  animation: splashIn .5s cubic-bezier(.5, 0, 1, 1) both, splashOutImg .5s ease-in-out 1s forwards;
}
/* 加速して浮き出る（0.5秒）→ 保持（0.5秒）→ ゆるやかにフェードアウト（0.5秒） */
@keyframes splashIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes splashOutImg {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes splashBg {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

/* トップの紹介 */
.hero { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; padding-top: 40px; }
.hero .photo { flex: 0 0 300px; }
.hero .photo img { border-radius: 10px; border: 1px solid var(--line); display: block; }
.hero .intro { flex: 1 1 320px; }
.hero .name { font-size: 32px; margin: 0; letter-spacing: .1em; }
.hero .name .ruby { font-size: 14px; color: var(--sub); letter-spacing: .2em; }
.hero .role { color: var(--accent2); margin: 4px 0 14px; letter-spacing: .15em; }

/* 作品リスト */
.works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.works li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; font-size: 15px;
}
.works li .note { display: block; color: var(--sub); font-size: 12.5px; }

/* 経歴 */
.career { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 22px; }
.career .era { margin-bottom: 22px; position: relative; }
.career .era::before {
  content: ""; position: absolute; left: -28px; top: 10px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
}
.career .when { color: var(--accent2); font-weight: bold; letter-spacing: .08em; }

/* ゲーム */
.game-box {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.game-box .cat { image-rendering: pixelated; width: 112px; height: 112px; }
.play-btn {
  display: inline-block; margin-top: 10px; padding: 12px 34px;
  background: linear-gradient(180deg, #ff8a2a, #e85d04); color: #fff; text-decoration: none;
  border-radius: 999px; font-weight: bold; letter-spacing: .15em;
}
.play-btn:hover { filter: brightness(1.12); }

@media (max-width: 640px) {
  .hero .photo { flex-basis: 220px; margin: 0 auto; }
}