body{
 width: 100%;
 /*background: #eef0f5;*/
 background: #f1f0ec;
 background-image: url('image/bk_02.jpg');
    text-align: center;
 color: #444;
 font-size: min(20px,3.0vw);
 font-family: '游ゴシック','メイリオ', Meiryo;
 margin: 0;
overflow-x: hidden; /* 横スクロールバー防止 */
  background-size: cover;       /* 画面全体を覆うように拡大 */
  background-repeat: no-repeat; /* 画像を繰り返さない */
  background-position: center;  /* 画像の中央を表示 */
  background-attachment: fixed; /* スクロールしても背景を固定（任意） */

  /* transitionは「変化前」の要素に書くのが鉄則です */
  transition: background-image 1.0s ease;
}

body::before,
  body::after {
    content: "";
    position: fixed; /* 画面に固定 */
    top: 0;
    width: 50%;      /* 幅は画面の半分 */
    height: 100%;    /* 高さは全画面 */
    background-size: cover;     /* 枠に合わせて拡大（隙間なし） */
    background-position: center;
    
    /* 初期状態は透明 */
    opacity: 0;
    z-index: 0;
    pointer-events: none; /* マウス操作を邪魔しない */
    
    /* アニメーション */
    transition: opacity 1.0s ease;
  }

/* --- 左側の画像設定 (::before) --- */
  body::before {
    right: 0; /* 左寄せ */
  }

  /* --- 右側の画像設定 (::after) --- */
  body::after {
    left: 0; /* 右寄せ */
  }

::selection {
    //background: #eee;
    background: #fff;
}

.head{
    font-size: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.head img{
    max-width: 300px;
}

H1{
    font-size: 26px;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

H2{
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    margin-top: -14px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -2px;
}

.sty{
 background: #eef0f5;
 background-color:transparent;
 width: 100%;
 max-width: 800px;
 text-align: center;
 border: 0px solid #eef0f5;
 border-left: 10px solid #eef0f5;
 border-right: 10px solid #eef0f5;
 box-sizing: border-box;
 border-color:transparent;
 margin-top: auto;
 margin-bottom: auto;
 margin-left: auto;
 margin-right: auto;
 //border-radius: 40px;
}

img{
    max-width: 100%;
    margin: 0;
    margin-bottom: -9px;
    //border-top-left-radius: 10px;
    //border-top-right-radius: 10px;
}

P img{
    max-width: 100%;
    height: 36px;
    margin: 0;
    margin-bottom: -9px;
    //border-top-left-radius: 10px;
    //border-top-right-radius: 10px;
}

.bana{
    font-size: min(21px,3.5vw);
    text-align: center;
    transition-duration: 0.5s;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.9);
}

.bana:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,1);
  transform: translateY(-10px);
  transition-duration: 0.5s;
  opacity: 1;
}

.bana .cap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 50px;
}

.bana .im{
    position: absolute;
    top: 1%;
    left: 1%;
    transform: translate(0%,0%);
    width: 10%;
    height: 10%;
}

.bana .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(0,0,10,0.4);
    transition: all 0.2s ease;
}

.bana:hover .mask{
    opacity:1;
}

P{
 font-size: min(21px,3.5vw);
 text-align: center;
 margin-bottom: 15px;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}

.link{
 text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.link li + li {
  margin-top: 12px; /* 行間 */
  text-align: center;
}

.link a {
  display: inline-flex;   /* ← inline-flex がポイント */
  align-items: center; /* 縦位置を揃える */
 text-decoration: none;
 border-radius: 50px;
 font-size: min(22px,4vw);
 color: #38a1db;
 }

.link a:hover{
 background-color: #ddd;
 }

.icon{
  width: 29px;
  height: 29px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon img {
  width: 29px;    /* ← 固定サイズ */
  height: 29px;
  object-fit: contain;
  margin-bottom: 0px;
}

.text {
  line-height: 1.4;     /* テキスト行高を統一 */
}

.select{
 margin-top: -9px;
 margin-bottom: -9px;
 background: #ffffff;
 font-size: 11px;
 font-family: 'メイリオ', Meiryo;
 color:#808080 ;
 text-align: left;
}

IFRAME{
 display: block;
 margin-left: auto;
 margin-right: auto;
}

.basho{
 width: 100%;
 max-width: 360px;
 min-width: 360px;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
 margin-top: 0px;
}


.kankaku {
 font-size: 10px;
}

#aaa{
 font-size: min(20px,4vw);
 color: #888;
  }
#aaa a{
 text-decoration: none;
 font-size: min(20px,4vw);
 color: #888;
 background-color: #ffffff;
  }
  
.copy{
 font-size: min(16px,2.8vw);
 text-align: center;
 margin-bottom: 20px;
}

.category span{
 font-size: min(24px,3.8vw);
 text-align: center;
 margin-top: -9px;
 margin-bottom: 20px;
}

.category span{
  text-align: center; /* 中央寄せ */
}

.category span{
  display: inline-block;
  position: relative;
  padding: 0 1em; /* テキストと線の余白 */
}

.category span::before,
.category span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 50px;       /* 線の長さ */
  height: 1px;       /* 線の太さ */
  background: #333;  /* 線の色 */
}

.category span::before {
  left: -60px; /* テキストの左側に配置 */
}

.category span::after {
  right: -60px; /* テキストの右側に配置 */
}

/* 共通設定：高さを固定せず、行間で読みやすくする */
.jikoshokai_jp p,
.jikoshokai_en p {
  /* height: 50px; ←これを削除（またはauto）にします */
  height: auto; 
  width: 100%;
  max-width: 780px;
  
  /* 読みやすさの調整 */
  line-height: 1.6; /* 行間を広げる */
  margin-bottom: 10px;
}

/* 日本語テキスト */
.jikoshokai_jp p {
  /* スマホで小さくなりすぎないよう調整: clamp(最小, 推奨, 最大) */
  font-size: clamp(15px, 4vw, 19px);
}

/* 英語テキスト */
.jikoshokai_en p {
  font-size: clamp(14px, 4vw, 17px);
}

/* 署名（ペンネーム）部分 */
.syomei p {
  width: 100%;
  max-width: 780px;
  margin-top: 15px;
  margin-bottom: 40px;
  text-align: center; /* 右寄せ */
  color: #666;

  /* ▼ PC向けにサイズをアップ (14px → 18px) */
  font-size: 18px; 
  /* 必要であれば太字にしてください */
  /* font-weight: bold; */ 
}

/* --- モバイル用レイアウト調整 --- */
@media screen and (max-width: 600px) {
  /* ...（他のモバイル設定はそのまま）... */

  /* ▼ スマホでは大きすぎないように少しサイズを戻す */
  .syomei p {
    font-size: 14px;
  }
}

/* --- モバイル用レイアウト調整 --- */
@media screen and (max-width: 600px) {
  /* スマホ画面の左右に余白を作る */
  .jikoshokai_jp, 
  .jikoshokai_en {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  /* スマホでは文字サイズを少し固定気味にして読みやすく */
  .jikoshokai_jp p {
    font-size: 16px;
  }
  .jikoshokai_en p {
    font-size: 15px;
  }
}

.category2 p{
 font-size: min(20px,3.4vw);
 text-align: center;
 margin-top: 10px;
 margin-bottom: 10px;
   display: inline-block;
  position: relative;
  padding: 0 1em; /* テキストと線の余白 */
}

.category2 p::before,
.category2 p::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 50px;       /* 線の長さ */
  height: 1px;       /* 線の太さ */
    background: #333;  /* 線の色 */
}
    
.category2 p::before {
  left: -60px; /* テキストの左側に配置 */
}

.category2 p::after {
  right: -60px; /* テキストの右側に配置 */
}

body:has(.bana_majo:hover)::before {
    /* 切り替えたい背景画像 */
    background-image: url('majoshugyo/image/page_006.jpg');
    z-index: -1;
    opacity: 1;
  }
body:has(.bana_majo:hover)::after {
    /* 切り替えたい背景画像 */
    background-image: url('majoshugyo/image/page_007.jpg');
    z-index: -1;
    opacity: 1;
  }

body:has(.bana_tomoshie:hover)::before{
    /* 切り替えたい背景画像 */
    background-image: url('tomoshie/01/files/page_010.jpg');
    z-index: -1;
    opacity: 1;
  }
body:has(.bana_tomoshie:hover)::after{
    /* 切り替えたい背景画像 */
    background-image: url('tomoshie/01/files/page_011.jpg');
    z-index: -1;
    opacity: 1;
  }

body:has(.bana_lime:hover)::before{
    /* 切り替えたい背景画像 */
    background-image: url('lime/image/024.jpg');
    z-index: -1;
    opacity: 1;
  }
body:has(.bana_lime:hover)::after{
    /* 切り替えたい背景画像 */
    background-image: url('lime/image/025.jpg');
    z-index: -1;
    opacity: 1;
  }

body:has(.bana_tanpen:hover)::before{
    /* 切り替えたい背景画像 */
    background-image: url('tanpen/kujira/files/page_004.jpg');
    z-index: -1;
    opacity: 1;
  }
body:has(.bana_tanpen:hover)::after{
    /* 切り替えたい背景画像 */
    background-image: url('tanpen/kujira/files/page_005.jpg');
    z-index: -1;
    opacity: 1;
  }

/* ページ全体をスムーズスクロールにする設定 */
html {
    scroll-behavior: smooth;
}

/* ボタンを囲むコンテナ（右下に固定） */
.scroll-nav {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column; /* 縦並びにする */
    gap: 15px; /* ボタン間の隙間 */
    z-index: 9999; /* 他の要素より手前に表示 */
}

/* ボタン共通スタイル */
.scroll-btn {
    width: 50px;
    height: 50px;
    background-color: #ffffff; /* 背景色 */
    border-radius: 50%; /* 完全な円 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* アイコンの色 */
    text-decoration: none;
    font-size: 12px;
    
    /* モダンな影（ふんわりと浮き上がる演出） */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* アニメーション設定 */
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05); /* うっすら枠線 */
}

.btn_contents {
    background-color: #ebf8ff; /* 背景色 */
}

/* レスポンシブ対応：画面幅が768px以下になったら非表示 */
@media screen and (max-height: 530px) {
  .btn_contents {
    display: none;
  }
}

/* ホバー時の動き */
.scroll-btn:hover {
    transform: translateY(-3px); /* 少し上に浮く */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* 影を濃くする */
    background-color: #f8f9fa; /* 背景を少しグレーに */
    color: #007bff; /* アクセントカラー（必要なら変更してください） */
}

/* クリック時の動き */
.scroll-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 1921px) {
  .scroll-btn {
      font-size: 16px;
      width: 50px;
      height: 50px;
      background-color: rgba(0,0,0,0); /* 背景色 */
      box-shadow: none;
      /* 額縁の太さを確保 */
      border: 20px solid transparent;
  /* 額縁の画像指定 */
      border-image-source: url('image/paper.png');
  /* 画像をどこで分割するか（px単位や%） */
      border-image-slice: 30 fill;
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
      border-image-repeat: stretch;
  }
    .scroll-btn:hover{
        box-shadow: none;
        background-color: rgba(0,0,0,0); /* 背景色 */
    }
    .scroll-btn:active{
        transform: translateY(0);
        box-shadow: none;
    }
}



/* migiuenoyatu */
/* ベースのスタイル */
.news-widget {
  position: fixed;
  top: 20px;
  right: 70px; /* 右端に固定 */
  
  /* 中央基準の設定をリセット */
  left: auto;
  margin-left: 0;
    
  z-index: 1000; /* 他の要素より手前に表示 */

  /* 見た目の装飾（お好みで変更してください） */
  width: 250px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 影をつけて浮いている感を出す */
  padding: 15px;
  font-size: 14px;
  color: #333;
    
  /* 画面の高さからはみ出さないようにする設定 */
  max-height: calc(100vh - 40px); /* 画面の高さ - 上下の余白 */
  overflow-y: auto; /* コンテンツが溢れたらウィジェット内でスクロールさせる */
}

/* タイトルの装飾 */
.news-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 2px solid #3399ff; /* 下線 */
  padding-bottom: 5px;
}

/* レスポンシブ対応：画面幅が768px以下になったら非表示 */
@media screen and (max-width: 1510px) {
  .news-widget {
    display: none;
  }
}

/* 記事が多くなった時に枠内でスクロールさせる設定 */
.news-scroll-area {
  max-height: 300px; /* 高さがこれ以上になったらスクロール発生 */
  overflow-y: auto;  /* 縦方向にスクロールバーを自動表示 */
  padding-right: 5px; /* スクロールバーと文字が被らないように少し隙間 */
}

/* 個別の記事ブロック */
.news-item {
  border-bottom: 1px dashed #ccc; /* 点線で区切る */
  padding: 10px 0;      /* 上下の余白 */
}

/* 一番下の記事だけ線を消す（見た目を綺麗にするため） */
.news-item:last-child {
  border-bottom: none;
}

/* 日付のデザイン */
.news-date {
  font-size: 12px;
  color: #888;       /* 文字色をグレーに */
  font-weight: bold;
  margin-bottom: 4px;
}

/* 本文のデザイン */
.news-content {
  font-size: 14px;
  line-height: 1.5;  /* 行間を少し広げて読みやすく */
}

/* リンクの基本デザイン */
.news-content a {
  color: #3399ff;       /* タイトルの下線と同じ青色に統一 */
  text-decoration: none; /* 最初は下線を消す */
  font-weight: bold;     /* 少し太字にして目立たせる */
  transition: all 0.3s;  /* 色の変化をふわっとさせる */
  display: inline-block; /* 動きをつけるための設定 */
}

/* マウスを乗せたとき（ホバー時） */
.news-content a:hover {
  color: #0066cc;        /* 少し濃い青にする */
  text-decoration: underline; /* 下線を出す */
}

/* 【おまけ】リンクの後ろに小さな矢印（→）を自動でつける装飾 */
.news-content a::after {
  font-size: 80%;       /* 矢印だけ少し小さく */
  margin-left: 3px;     /* 文字との隙間 */
  transition: margin-left 0.3s; /* 矢印の動きの設定 */
}

/* マウスを乗せたときに矢印が少し右に動くアニメーション */
.news-content a:hover::after {
  margin-left: 6px; /* 右に移動 */
}

/* 近況欄の画像スタイル */
.news-image {
  display: block;        /* 画像をブロック要素にして配置を安定させる */
  width: 100%;           /* 横幅いっぱい（親要素に合わせる） */
  height: auto;          /* 高さは比率を維持して自動調整 */
  margin: 10px 0;        /* 上下に少し隙間を空ける */
  
  /* 表紙っぽく見せる装飾 */
  border: 1px solid #eee; /* うっすら枠線 */
  border-radius: 4px;     /* 角を少し丸める */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* 右下に少し影を落とす */
}

/* 画像にマウスを乗せた時に少しふわっとさせる（お好みで） */
.news-image:hover {
  opacity: 0.9;
}

/* 左側の動画ウィジェット */
.video-widget {
  position: fixed;
  top: 20px;
  left: 20px; /* 左端に固定 */

  /* 中央基準の設定をリセット */
  right: auto;
  margin-right: 0;
    
  z-index: 1000;

  /* 見た目の装飾（右側と統一感を出す） */
  width: 300px; /* 動画が見やすいように少し幅を広めに設定 */
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 15px;
  color: #333;
    
  /* 画面の高さからはみ出さないようにする設定 */
  max-height: calc(100vh - 40px); /* 画面の高さ - 上下の余白 */
  overflow-y: auto; /* コンテンツが溢れたらウィジェット内でスクロールさせる */
}

/* 動画の比率を保つ設定 */
.video-widget video {
  width: 100%;       /* 親要素の幅いっぱいに */
  aspect-ratio: 1080 / 1920; /* 16:9の比率を維持（モダンブラウザ用） */
  border-radius: 4px;   /* 動画の角を少し丸くする */
  vertical-align: bottom; /* 下に謎の隙間ができるのを防ぐ */
}

/* Spotify用のスタイル調整 */
.spotify-content video {
  /* Spotify公式の埋め込みコードは高さ固定(152pxや352px)が多いですが、
     横幅は親要素に合わせて100%になるように指定します */
  width: 100%; 
}

/* 動画下の説明文 */
.video-caption {
  font-size: 12px;
  margin-top: 8px;
  color: #666;
  line-height: 1.4;
}

/* レスポンシブ対応：画面幅が768px以下（より広めにとってもOK）で非表示 */
@media screen and (max-width: 1510px) {
  /* 左と右にウィジェットが出るとメイン領域が狭くなるため、
     少し早め（幅1000px以下など）に消えるように調整するのがおすすめです */
  .video-widget {
    display: none;
  }
}

/* --- ▼ 画面幅が広がった時の「位置固定」設定 ▼ --- */
@media screen and (min-width: 1921px) {
  
  /* 右側のウィジェット：1920px時点での位置でストップさせる */
  .news-widget {
    right: auto;        /* 右端基準を解除 */
    left: 50%;          /* 画面中央を基準に変更 */
    
    /* 計算式：(最大幅1920 ÷ 2) - 隙間20 - 本体幅250 = 690px */
    margin-left: 600px; /* 中央から690px右に配置 */
  }

  /* 左側のウィジェット：1920px時点での位置でストップさせる */
  .video-widget {
    left: 50%;          /* 画面中央を基準に変更 */
    
    /* 計算式：- (最大幅1920 ÷ 2) + 隙間20 = -940px */
    margin-left: -930px; /* 中央から940px左に配置 */
    /* ※left基準でマイナスのマージンを使うことで左側に配置します */
  }
  
}

.hover-text {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* 画像の初期状態 */
.hover-image{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  pointer-events: none;

  height: 80vh; /* サイズ調整 */
  z-index: 9999;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* ホバー時 */
.hover-text:hover .hover-image{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.framed-box {
  /* 額縁の太さを確保 */
  border: 30px solid transparent;
  
  /* 額縁の画像指定 */
  border-image-source: url('image/frame.png');
  
  /* 画像をどこで分割するか（px単位や%） */
  border-image-slice: 30;
  
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
  border-image-repeat: round;
}

.framed-box2 {
  /* 額縁の太さを確保 */
  border: 30px solid transparent;
  
  /* 額縁の画像指定 */
  border-image-source: url('image/frame_2.png');
  
  /* 画像をどこで分割するか（px単位や%） */
  border-image-slice: 30;
  
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
  border-image-repeat: round;
}

.framed-box3 {
  /* 額縁の太さを確保 */
  border: 30px solid transparent;
  
  /* 額縁の画像指定 */
  border-image-source: url('image/frame_3.png');
  
  /* 画像をどこで分割するか（px単位や%） */
  border-image-slice: 30;
  
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
  border-image-repeat: stretch;
}

.framed-box4 {
  /* 額縁の太さを確保 */
  border: 30px solid transparent;
  
  /* 額縁の画像指定 */
  border-image-source: url('image/frame_4.png');
  
  /* 画像をどこで分割するか（px単位や%） */
  border-image-slice: 30;
  
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
  border-image-repeat: stretch;
}

.framed-box5 {
  /* 額縁の太さを確保 */
  border: 30px solid transparent;
  
  /* 額縁の画像指定 */
  border-image-source: url('image/frame_5.png');
  
  /* 画像をどこで分割するか（px単位や%） */
  border-image-slice: 30;
  
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
  border-image-repeat: stretch;
}

.framed-box6 {
  /* 額縁の太さを確保 */
  border: 30px solid transparent;
  
  /* 額縁の画像指定 */
  border-image-source: url('image/frame_6.png');
  
  /* 画像をどこで分割するか（px単位や%） */
  border-image-slice: 30;
  
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
  border-image-repeat: stretch;
}


.framed-paper {
  /* 額縁の太さを確保 */
  border: 30px solid transparent;
  
  /* 額縁の画像指定 */
  border-image-source: url('image/paper.png');
  
  /* 画像をどこで分割するか（px単位や%） */
  border-image-slice: 30 fill;
  
  /* 辺の処理： stretch(引き伸ばし) や round(繰り返し) */
  border-image-repeat: stretch;
}

/* ロード画面のスタイル */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eef0f5;
  z-index: 99999;
  
  display: flex;
  justify-content: center; /* 横方向は中央揃えのまま */
  align-items: flex-start; /* 変更点：縦方向を「上揃え」にする */
  
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* ロゴ画像のスタイル */
.loading-logo {
  max-width: 300px;
  height: auto;
  margin-top: 16px; /* 変更点：上から20pxの隙間を作る */
}

/* 読み込み完了後のクラス（変更なし） */
#loading-screen.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#character {    
    position: relative; /* これがないと自由に動けません */
    transition: 0.05s; /* 少し滑らかに動かす（お好みで） */
    z-index:200;
        }

#title-logo{}

/* 読み方：
  bodyの中に「ホバーされた.logo-link」がある場合、
  そのbodyの中にある .text-default を非表示にする
*/
body:has(.title-logo:hover) .shokai-default {
  display: none;
}

/* 読み方：
  bodyの中に「ホバーされた.logo-link」がある場合、
  そのbodyの中にある .text-hover を表示する
*/
body:has(.title-logo:hover) .shokai-hover {
  display: block; /* または block */
}

/* --- 隠し診断ポップアップのデザイン --- */
#mini-quiz-popup {
    /* 基準点にするために relative は必須 */
    position: relative; 
    margin: auto;
    z-index: 99;
    
    width: 100%;
    max-width: 780px;
    padding: 0px;
}

/* 回答ターゲット領域のコンテナ */
#answer-targets-container {
    /* ★重要1: ポップアップ全体に覆いかぶさるように配置 */
    position: absolute;
    top: 50%;          /* 上から50%の位置に配置 */
    left: 0;           /* 左端を合わせる */
    width: 100%;       /* 幅をポップアップ一杯に広げる */
    
    /* ★重要2: 垂直方向の真ん中に持ってくる補正 */
    transform: translateY(-50%); 
    
    /* コンテナ自体の高さ */
    height: 50px; 

    /* ★重要3: Flexboxで左右に振り分け */
    display: flex;
    justify-content: space-between; /* これで左右両端に寄ります */
    
    /* 端っこすぎて見切れるのを防ぐための余白 */
    padding: 0px; 
    box-sizing: border-box; /* paddingを含めて幅100%にする設定 */
    
    /* レイアウト確認用の背景色（完成したら消してください） */
    /* background-color: rgba(0,0,0,0.1); */
    
    /* 文字の上に被せるので、マウスクリックを邪魔しないように（ゲーム仕様によります） */
    pointer-events: none; 
}

#answer-targets-container.active {
    opacity: 1;                /* 不透明（見える） */
    transform: translateY(0);    /* 元の位置に戻る */
    pointer-events: auto;      /* 操作可能にする */
}

/* 回答ターゲット（個別の箱） */
.answer-target {
    /* flex: 1; を削除します（引き伸ばさないため） */
    
    width: 80px; /* 固定幅にするか、適度なサイズを指定 */
    height: 100%; /* コンテナの高さに合わせる */
    
    background-color: #e0e0e0;
    border: 2px dashed #999;
    border-radius: 8px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 10px;
    font-weight: bold;
    color: #555;
    transition: background-color 0.2s;
    
    /* コンテナに pointer-events: none をつけた場合、ここだけ操作可能に戻す */
    pointer-events: auto; 
}

/* ぶつかったときの見た目 */
.answer-target.hit {
    background-color: #a0e7a0; /* 緑色に */
    border-color: #2ecc71;
    color: white;
}

.hide { display: none; }

#quiz-section{
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease; /* 0.3秒かけて変化 */
}
#answer-section{
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease; /* 0.3秒かけて変化 */
}
#quiz-section.active{
    opacity: 1;
}
#answer-section.active{
    opacity: 1;
}


#quiz-section span{
    position: absolute;
    display: flex;
    font-size: 18px;
    color: deepskyblue;
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translateY(-25px); 
}