/* ======================================
   ベース設定・背景画像
====================================== */
body {
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
  z-index: 0;
  background-color: rgb(255, 255, 102);
}

/* 背景画像（横幅100%、縦は見切れてもよい） */
body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../character/background-nobuhisa.png'); /* PC版背景 */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 50% auto; /* 横を画面いっぱい、縦は比率を維持 */
  z-index: -1;
  pointer-events: none; /* 背景にクリックなどが通るように */
}

/* スマホ用背景切替（画像を別に設定） */
@media screen and (max-width: 768px) {
  body::before {
    background-image: url('../character/background-nobuhisa.png'); /* モバイル背景 */
    background-size: 100% auto;
    background-position: center 100px; /* ← 上から20px下にずらす */
  }
}


/* ======================================
   閉じるボタン（画面右上固定）
====================================== */
.close-button {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 43px;
  height: 42px;
  background-image: url('../logo/favicon.png');
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
}


/* ============================================
   キャラ切り替えアイコン共通スタイル
   ============================================ */
.character-icon {
  width: 60px;                  /* アイコンの直径 */
  height: 60px;
  border-radius: 50%;           /* 丸い形に */
  cursor: pointer;
  transition: transform 0.2s ease-in-out; /* ホバー時の拡大アニメーション */
  object-fit: cover;            /* 画像が円にぴったりはまるように */
}

.character-icon:hover {
  transform: scale(1.1);        /* ホバーで少し拡大 */
}


/* ============================================
   スマホ（画面幅 768px 以下）：
   画面上部中央に横並び表示
   ============================================ */
@media screen and (max-width: 768px) {
  .character-icons {
    position: absolute;            /* 中央配置するために absolute 使用 */
    top: 3px;                     /* 上から10pxの位置に */
    left: 50%;                     /* 横中央基準に */
    transform: translateX(-50%);   /* 左に半分ずらして完全に中央に */
    display: flex;
    flex-direction: row;           /* 横並び */
    gap: 15px;                     /* アイコンの間隔 */
    flex-wrap: wrap;              /* 狭い画面で折り返し可能に */
    z-index: 10;
  }
}


/* ============================================
   PC（画面幅 769px 以上）：
   画面左中央に縦並びで固定表示
   ============================================ */
@media screen and (min-width: 769px) {
  .character-icons {
    position: fixed;              /* 画面に固定配置 */
    top: 50%;                     /* 画面縦の中央 */
    left: 20px;                   /* 左端から20pxの位置 */
    transform: translateY(0%);  /* 縦方向の中央に揃える */
    display: flex;
    flex-direction: column;       /* 縦並び */
    gap: 15px;                    /* アイコンの間隔 */
    z-index: 10;
  }
}

/* ======================================
   キャラ紹介セクション（スマホ版）
====================================== */
.character-detail-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: 60px 20px;
  box-sizing: border-box;
}

.character-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 960px;
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.character-img-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.character-img {
  width: 70vw;
  height: auto;
  border-radius: 10px;
  animation: slideInLeft 0.8s ease-out forwards;
  opacity: 0;
}

.character-nemu {
  text-align: center;
  margin-top: 10px;
  font-size: 1.8em;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.character-info {
  max-width: 90%;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  animation: slideInRight 0.8s ease-out forwards;
  opacity: 0;
  text-align: left;
  text-indent: 1em;
}

.description {
  margin-top: 0.5em;
  line-height: 1.8;
}


/* ======================================
   アニメーション共通
====================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ======================================
   PC版スタイル変更（769px以上）
   - 一画面に収めるための最適化
   - キャラ切替アイコンは左側に縦並び
====================================== */
@media screen and (min-width: 769px) {
  .character-detail-container {
    display: grid;
    grid-template-columns: 80px 1fr; /* 左にアイコン列、右にメイン表示 */
    height: 100vh;
    padding: 0;
  }

  .character-icons {
    position: static;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    height: 100%;
    gap: 20px;
  }

  .character-detail {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: auto;
    gap: 30px;
    padding: 20px;
  }

  .character-img-container {
    width: 35%; /* 横幅をやや小さめに */
  }

  .character-img {
    height: 400px; /* 高さも少し短めに */
    width: auto;
  }

  .character-info {
    max-width: 420px;
  }
}