@charset "UTF-8";

/*************共通項目など*************/
/* Windows 用 Medium 指定の游ゴシック */
/* font-weight: bold の時は通常どおり Bold 書体を使わせる */
body {
  /* ゴシック体指定 */
  font-optical-sizing: auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "slnt"0;
  color: #2B2726;
  margin: 0 auto;
  background-color: #EFEFEF;
  line-height: 1.5;
}

a {
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

ol,
ul {
  list-style: none;
}

a:after,
a:before {
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.f_font {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

@media screen and (max-width: 1920px) {

  .main_text {
    p {
      font-size: 17px;
    }

    h1 {
      font-size: 38px;

      span {
        font-size: 47px;
      }
    }
  }

  .character-area {
    width: 1089px;
    height: 580px;
    margin-top: 100px;
  }

  .text-box {
    width: 1089px;
    height: 171px;
    padding: 45px 45px 45px;
  }

  .dialogue {
    font-size: 18px;
  }

  .speaker-name {
    top: -18px;
    left: 30px;
    padding: 8px 30px;
    font-size: 20px;
  }

  .nav-button {
    padding: 10px 35px;
    width: 220px;
    font-size: 20px;
  }

  .quiz-box {
    padding: 15px;
    width: 18%;
    font-size: 13px;
  }

  .point {
    width: 20px;
    height: 20px;
  }

  .quiz-reset-button {
    padding: 10px 30px;
    font-size: 16px;
  }

}

@media screen and (max-width: 1250px) {
  .character-area {
    margin-top: 200px;
  }
}

@media screen and (max-width: 1089px) {
  .character-area {
    width: 100%;
    height: auto;
  }

  .text-box {
    width: 100%;
    height: 35%;
    padding: 5% 5% 5%;
  }


  .speaker-name {
    top: -18px;
    left: 30px;
    padding: 8px 30px;
    font-size: 18px;
  }

  .quiz-box {
    padding: 10px;
    width: 19%;
    font-size: 10px;
  }




}

@media screen and (max-width: 768px) {

  .main_text {
    p {
      font-size: 17px;
    }

    h1 {
      font-size: 30px;

      span {
        font-size: 30px;
      }
    }
  }


  .dialogue {
    font-size: 13px;
  }

  .speaker-name {
    top: -18px;
    left: 30px;
    padding: 5px 20px;
    font-size: 15px;
  }


  .point {
    width: 10px;
    height: 10px;
  }

  .quiz-reset-button {
    padding: 8px 20px;
    font-size: 13px;
  }



}

@media screen and (max-width: 600px) {
  .quiz-box {
    padding: 5px;
    width: 19%;
    font-size: 5px;
  }
}

@media screen and (max-width: 425px) {

  .text-box {
    width: 100%;
    height: 35%;
    padding: 3% 3% 3%;
  }

  .dialogue {
    font-size: 10px;
  }

  .speaker-name {
    top: -10px;
    left: 10px;
    padding: 5px 20px;
    font-size: 10px;
  }

  .nav-button {
    padding: 10px 25px;
    width: 150px;
    font-size: 15px;
  }

  .quiz-reset-button {
    padding: 5px 10px;
    font-size: 10px;
  }


}


/* スマートフォン向けの調整 */



/*  共通項目 > デバイス別出し分け
------------------------*/
.sp {
  display: none;
}

.pc_tab {
  display: block;
}

.s_sp {
  display: none;
}

@media screen and (max-width: 768px) {

  .sp,
  .pc_tab {
    display: block;
  }

  .pc {
    display: none;
  }
}

@media screen and (max-width: 425px) {
  .s_sp {
    display: block;
  }

  .pc_tab,
  .pc {
    display: none;
  }
}




/*************TOPページ*************/


.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  justify-content: center;
  max-width: 1440px;
}


#top {
  display: block;
}





.main_text {
  display: block;
  padding: 100px 0 30px;
  text-align: center;

  h1 {
    color: #0096F1;
    margin-bottom: 20px;
    font-weight: 900;
  }

  span {
    color: #0096F1;

  }
}


.hukidashi {
  position: relative;
  background-color: #FFF;
  color: #0096F1;
  border-radius: 6px;
  font-size: 14px;
  pointer-events: none;
  line-height: 1.5;
  text-align: center;
  width: 300px;
  /* ↓ 以下の2行を変更・追加 */
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

.hukidashi::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 10px solid transparent;
  border-top-color: #FFF;
}

.title {
  margin: auto;
  position: relative;
  justify-self: center;
  max-width: 1037px;
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;

  img {
    width: 100%;
  }
}

#btn_enter {
  background-color: #0096F1;
  width: 220px;
  height: 56px;
  border-radius: 40px;
  padding: 12px;
  position: absolute;
  top: 60%;
  right: 0;
  left: 0;
  margin: auto;

  p {
    color: #FFF;
    font-size: 20px;
    text-align: center;
  }
}

#btn_enter:hover {
  transform: translateY(10%);
  transition: transform 0.2s;
}

.maker {
  display: flex;
  list-style-type: none;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 1440px;
  justify-self: center;

  p {
    font-size: 13px;
    padding: 10px;
  }

  .icon {
    justify-self: center;
    flex-direction: column;
    height: 80px;
    display: flex;
    margin: 5px;
    margin-top: 10px;

    p {
      padding: 0.2em 0.5em;
      width: fit-content;
      font-size: 10px;
      background-color: #CDD2D5;
      text-align: center;
      border-radius: 8px;
      margin-inline: auto;
    }

    img {
      margin-top: 5px;
      width: 58px;
      height: 58px;
    }
  }
}


footer {
  margin-top: 50px;
  margin-bottom: 20px;

  p {
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }
}



/*************ストーリー画面*************/


.game-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.character-area {
  background-color: #0096F1;
  justify-self: center;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  box-sizing: border-box;
  position: relative;
}

.character {
  margin-bottom: 150px;
  object-fit: contain;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  position: absolute;
  /* デフォルトでは透明にしておく */
  opacity: 0;
}

.story-bg {
  width: 100%;
  height: auto;
  margin: 0 auto;
  margin-top: 0;
}

/* ▼ 追加画像のコンテナのスタイル ▼ */
#overlay-images-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 画像がクリック操作を妨げないようにする */
  overflow: hidden;
}

/* ▼ 追加画像自体のスタイル ▼ */
.overlay-image {
  position: absolute;
  opacity: 0;
  /* 最初は非表示 */
  transition: opacity 0.5s ease-in-out;
  /* フェードイン/アウトのアニメーション */
}

/* 話していないキャラクターを少し暗くする */
/* .character.inactive {
  opacity: 0.5;
} */

/* キャラクター画像変更時に適用するクラス */
.character.is-changing {
  opacity: 0;
  /* 少し縮むエフェクトを加えると、より自然なアニメーションになります */
  transform: scale(0.95);
}

@keyframes jump-animation {
  0% {
    /* アニメーション開始時 */
    /* translateY(0) に加えて、translateX(-50%) も維持する */
    transform: translateX(-50%) translateY(0);
  }

  50% {
    /* アニメーションの中間 */
    /* translateY(-50px) と scale(1.05) に加えて、translateX(-50%) も維持する */
    transform: translateX(-50%) translateY(-20px);
  }

  100% {
    /* アニメーション終了時 */
    /* translateY(0) に加えて、translateX(-50%) も維持する */
    transform: translateX(-50%) translateY(0);
  }
}

.jump {
  /* 
     * animation: [アニメーション名] [再生時間] [イージング] [繰り返し回数];
     */
  animation: jump-animation 0.6s ease-in-out 1;
}

.text-box {
  position: absolute;
  background-color: #fff;

}

.speaker-name {
  position: absolute;
  top: -18px;
  left: 30px;
  background: #EFEFEF;
  color: #0096F1;
  border-radius: 40px;
  font-weight: bold;
}

.dialogue {
  margin: 0;
  color: #2D2F44;
  line-height: 1.7;

}

.navigation {
  display: flex;
  max-width: 1347px;
  margin: auto;
  justify-content: space-between;
  margin-top: 25px;
  padding: 0 15px;
}

.nav-button {
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  text-align: center;
}

.nav-button:hover {
  transform: translateY(-2px);
}

#prev-button {
  background: #fff;
  color: #2D2F44;
  border: 2px solid #2D2F44;
}

#next-button {
  background: #0096F1;
  color: white;
}

#prev-button:disabled,
#next-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 線つなぎ */

/* --- 線つなぎクイズ用のスタイル (修正版) --- */
#line-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* SVGがクリック操作を妨げないように */
  z-index: 5;
  /* キャラクター(z-indexなし)より手前、ポイント(z-index:10)より奥 */
}

#line-canvas line {
  stroke: #0096F1;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke 0.3s;
}

/* ドラッグ中のプレビュー線 */
#line-canvas line.preview-line {
  stroke-dasharray: 8 8;
  stroke: #ff9800;
}

#quiz-content-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.quiz-box {
  position: absolute;
  /* JSから位置を指定 */
  border-radius: 12px;
  text-align: center;
  /* サイズを固定 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.quiz-box.top-box {
  background: #0096F1;
  color: white;
}

.quiz-box.bottom-box {
  background: white;
  color: #333;
  border: 2px solid #0096F1;
}

.point {
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
  z-index: 10;
  transition: all 0.2s;
  /* ▼▼▼ この1行を追加 ▼▼▼ */
  touch-action: none;
}

.quiz-box.top-box .point {
  bottom: -12px;
  background: white;
  border: 3px solid #0096F1;
}

.quiz-box.bottom-box .point {
  top: -12px;
  background: #0096F1;
  border-color: white;
}

/* 状態変化のスタイル */
.point:hover {
  transform: translateX(-50%) scale(1.2);
}

.point.connected {
  cursor: not-allowed;
  background-color: #ccc !important;
}

.quiz-reset-button {
  /* リセットボタンが必要な場合 */
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  background: #0096F1;
  color: white;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  z-index: 20;
}


/* --- ボタン点滅アニメーション --- */
@keyframes blink-animation {
  50% {
    opacity: 0.6;
    transform: scale(0.98);
  }
}

.nav-button.blinking {
  animation: blink-animation 1.5s infinite ease-in-out;
}


/* --- オーバーレイ表示用テキストのスタイル例 --- */
.overlay-text {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  padding: 1vw 2vw;
  box-sizing: border-box;
}

@media screen and (max-width: 1920px) {

  /* スタイル1: 青文字 */
  .overlay-text-style1 {
    font-size: 20px;
    font-weight: bold;
    color: #0096F1;
  }

  /* スタイル1: 黒文字 */
  .overlay-text-style2 {
    font-size: 18px;
    font-weight: bold;
    color: #2D2F44;
  }

  /* スタイル3: 青座布団に白文字 */
  .overlay-text-style3 {
    font-size: 15px;
    font-weight: bold;
    color: #FFF;
    background-color: #0096F1;
    padding: 10px;
    border-radius: 10px;
  }

  .overlay-text-style4 {
    font-size: 15px;
    font-weight: bold;
    color: #0096F1;
    background-color: #EFEFEF;
    padding: 10px;
    border-radius: 10px;
    border: #0096F1 solid 3px;
  }

}

@media screen and (max-width: 768px) {

  /* スタイル1: 青文字 */
  .overlay-text-style1 {
    font-size: 15px;

  }

  /* スタイル1: 黒文字 */
  .overlay-text-style2 {
    font-size: 12px;

  }

  /* スタイル3: 青座布団に白文字 */
  .overlay-text-style3 {
    font-size: 10px;
    padding: 5px;
    border: #0096F1 solid 1px;
    border-radius: 3px;
  }

  .overlay-text-style4 {
    font-size: 10px;
    padding: 5px;
    border: #0096F1 solid 1px;
    border-radius: 3px;

  }

}

@media screen and (max-width: 425px) {

  /* スタイル1: 青文字 */
  .overlay-text-style1 {
    font-size: 8px;

  }

  /* スタイル1: 黒文字 */
  .overlay-text-style2 {
    font-size: 8px;
  }

  /* スタイル3: 青座布団に白文字 */
  .overlay-text-style3 {
    font-size: 5px;
    padding: 3px;
  }

  .overlay-text-style4 {
    font-size: 5px;
    padding: 3px;
  }

}