@charset "utf-8";

.movietitle img {
	width: 70%;
	max-width: 400px;
}

.moviearea {
	display: flex;
	justify-content: space-around;
}
.moviearea .movieitem{
	width: 45%;
	text-align: center;
        margin-bottom: 20px;
}
.movie {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
}
.movie iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


@media screen and (max-width: 679px){
	.moviearea {
    display: block;
	}
	.moviearea .movieitem {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================
   1. キャラクターの横並びレイアウト
   ========================================== */
.char-container {
  display: flex;
  justify-content: center;
  gap: 40px; /* キャラクター間の間隔 */
  padding: 40px;
}

.char-card {
  position: relative;
}

/* 画像と名前のコンテナ（縦並びにして密着させる） */
.char-img-wrapper {
  cursor: pointer;
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央揃え */
  text-align: center;
  gap: 4px;              /* 画像と名前のスキマ（ここを0にすると完全に密着します） */
  transition: transform 0.2s ease;
}

/* キャラクター画像（ボタン代わり）のスタイル */
.char-img-wrapper {
  cursor: pointer;
  display: block;
  transition: transform 0.2s ease;
}

.char-img-wrapper:hover {
  transform: scale(1.05); /* ホバー時に少し大きくしてクリックを促す */
}

.char-img {
  width: 320px; /* キャラクター画像の横幅（環境に合わせて調整してください） */
  height: auto;
  display: block;
}

/*キャラクター名前のスタイル */
.char-name {
  font-size: 20px;       /* 文字の大きさ */
  font-weight: bold;     /* 太字（お好みで） */
  color: #333;           /* 文字の色 */
  line-height: 1;        /* 行間を詰めて余白をなくす */
  margin: 0;             /* 余計な余白をリセット */
}

/* チェックボックス自体は画面から隠す */
.popup-toggle {
  display: none;
}

/* ==========================================
   2. 浮き出る自己紹介（モーダル）のスタイル
   ========================================== */
/* 背景の黒透過レイヤー（初期状態は非表示・透明） */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 背景を暗くする */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 背景のどこをクリックしても閉じられるようにする透明な裏地 */
.overlay-close-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 自己紹介画像のコンテナ（初期状態はやや小さく配置） */
.profile-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  z-index: 1001;
}

/* 自己紹介画像自体のサイズ調整 */
.profile-img {
  max-width: 500px; /* 自己紹介画像の最大横幅 */
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* 好みで角丸に */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 閉じるボタン（右上） */
.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
}

/* ==========================================
   3. クリック時（チェックON時）の挙動
   ========================================== */
/* チェックが入ったら、対応するオーバーレイを表示状態にする */
.popup-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* チェックが入ったら、自己紹介画像を元の大きさに戻して浮き出たように見せる */
.popup-toggle:checked ~ .overlay .profile-content {
  transform: scale(1);
}

/* ==========================================
   4. モバイル対応（画面幅が768px以下のとき）
   ========================================== */
@media screen and (max-width: 768px) {
  /* キャラクター同士の横のスキマを狭くする */
  .char-container {
    gap: 15px;      /* 40pxから15pxに縮めて画面に収める */
    padding: 20px;  /* 外側の余白も少し削る */
  }

  /* キャラクター1人あたりの枠幅を調整 */
  .char-card {
    width: 45%;     /* 画面幅に対して45%ずつの横幅にする（2人並んで90%） */
    max-width: 200px; /* パソコン用の最大サイズを超えないように制限 */
  }

  /* 画像が枠幅（45%）に合わせて自動縮小するようにする */
  .char-img {
    width: 100%;    /* 200px固定をやめ、親の枠いっぱいに広げる */
    height: auto;
  }

  /* スマホに合わせて名前の文字サイズを少し小さくする（お好みで） */
  .char-name {
    font-size: 14px; 
  }
  
  /* ポップアップ内の自己紹介画像の最大サイズをスマホ用に調整 */
  .profile-img {
    max-width: 90%; /* 画面からはみ出さないように */
  }
}