/* === Base (style.css) === */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;600;700;800&display=swap');

* {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

h1 {
  margin: 0;
  padding: 0;
}

.pc {
  display: block;
}
@media(max-width: 1000px) {
  .pc {
    display: none;
  }
}
/* ★追加★ 画面幅を超えるスクロールを禁止 */
body {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body>*:not(footer) {
  flex: 1 0 auto;
  /* コンテンツが少ない時に余白を埋める */
}

header,
.pankuzu {
  flex: 0 0 auto;
  background-color: #7ef384;
}

.top-header {
  width: 100%;
  height: auto;
  background-color: transparent;
}

.top-header h1 {
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 0 auto;
}

.top-header h1 img {
  display: block;
  width: 100%;        /* 1960 / 600 * 100 */
  height: auto;
}
@media (max-width: 768px) {
  .top-header h1 {
    width:100%;       /* 見せたい中央部分の幅 */
    overflow: hidden;   /* 左右を隠す */
    margin: 0 auto;     /* 中央寄せ */
  }

  /* 元画像 */
  .top-header h1 img {
    width: 128%;
    max-width: none;
    margin-left: -12%;
    height: auto;
  }
}


.road-wrap {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 12;
  background: url("../img/top/muji_top_road_s.png") no-repeat center;
  background-size: contain;
}
.road-wrap .photo-click {
  position: absolute;
  width: 240px;
  height: 32px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(12px, 2.2vw, 14px);
  text-align: center;
  color: #ffffff;
  background-color: #006167;
  padding: 2px 12px;
  border-radius: 20px;
}

.stage-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
}
.st1 { top: 8%; left: 25%; }
.st2 { top: 20%; left: 70%; }
.st3 { top: 36%; left: 22%; }
.st4 { top: 48%; left: 65%; }
.st5 { top: 70%; left: 25%; }
.st6 { top: 82%; left: 64%; }

.stage-circle {
  position: absolute;
}
.st1 > .stage-circle  {
  top: 80px;
  right: -160px;
}
.st2 > .stage-circle  {
  top: 120px;
  left: -140px;
}
.st3 > .stage-circle  {
  top: 120px;
  right: -150px;
}
.st4 > .stage-circle  {
  top: 180px;
  right: -20px;
}
.st5 > .stage-circle  {
  top: 140px;
  right: -120px;
}
.stage-circle.click-txt {
  position: relative;
}
@media (max-width: 768px) {
  .road-wrap {
    height: auto;
    aspect-ratio: auto;
    background-size: cover;
  }
  .road-wrap .photo-click {
    width: auto;
    height: 32px;
  }
  .stage-wrap {
    position: static;
    transform: none;
    margin-top: 40px;
  }
  .stage-circle {
    position: static;
    transform: none;
  }
}

.reset-wrap {
  text-align: center;
  margin: 40px 0;
  font-size: clamp(12px, 1.2vw, 13px);
}

.btn-clear-progress {
  padding:2px 8px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.btn-clear-progress:hover {
  background: #333;
  color: #fff;
}
/* .karada にも適用 */
.karada {
  background-image: url(../img/muji_bg.jpg);
  background-attachment: fixed;
  height: 100vh;
  background-size: cover;
  overflow-x: hidden;
}

.sensei {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto 20px;
}

.sensei img {
  max-width: 100%;
  height: auto;
}


.top_p2 {
  text-align: center;
  position: static;
  height: auto;
  padding: 20px;
  font-size: 150%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top_p2 p {
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 2;
  font-weight: bold;
}
.top_p2 a {
  text-decoration: none;
  margin-top: 20px;
}

.matomeru {
  background-image: url(../img/top/muji_top_band.png);
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
  margin: 0 auto;
}

.matome-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: calc(100% - 80px);
  max-width: 1200px;
  margin: 0 auto;
}

.quiz-title {
  max-width: 436px;
  flex-basis: 50%;
  flex-shrink: 0;
  margin: 0;
}

.quiz-title img {
  aspect-ratio: 109 / 62;
  width: 100%;
  max-width: 436px;
  height: auto;
}

@media(max-width: 768px) {
  .sensei {
    width: calc(100% - 40px);
  }
  .matome-inner {
    flex-direction: column ;
  }
  .top_p2 a {
    margin-top: 0;
  }
}

.btn {
  border-radius: 15px;
  background: repeating-linear-gradient(135deg, #c9e7c0, #c9e7c0 10px, #fff 10px, #fff 20px);
  color: rgb(0, 0, 0);
  padding: 30px;
  text-decoration: none;
  border-radius: 30px;
  display: inline-block;
  margin-top: 20px;
}

.top_h4 {
  text-align: center;
  margin: 40px auto 20px;
}

.foot {
  flex-shrink: 0;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 80px;
}

.foot img {
  display: block;
  width: 100%;
  height: auto;
}

.quiz_h1 {
  color: #ffffff;
  text-align: center;
  background-color: #7ef384;
  margin: 0;
  width: auto;
  height: auto;
  padding: 20px 0 0 0;
}

.button_1 {
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #c9e7c0, #c9e7c0 10px, #fff 10px, #fff 20px);
  padding: 10px;
  text-decoration: none;
  color: rgb(0, 0, 0);
  border-radius: 30px;
  opacity: 0.7;
  font-size: 20px;
  font-weight: bold;
  border: 4px solid #006167;
}

.button_2 {
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #fbcbff, #fbcbff 10px, #fff 10px, #fff 20px);
  padding: 10px;
  text-decoration: none;
  color: rgb(0, 0, 0);
  border-radius: 30px;
  opacity: 0.7;
  font-size: 20px;
  font-weight: bold;
  border: 4px solid #006167;
}

.wakuwaku {
  width: auto;
  padding: 40px;
  border-radius: 20px;
  margin-bottom: 50px;
  border: 1px solid #333333;
  margin: 0 auto;
  max-width: 800px;
  min-width: 200px;
}

.waku1 {
  background-color: white;
  width: 800px;
  padding: 40px;
  border-radius: 20px;
  margin: 30px auto;
}

@media(max-width: 768px) {
  .waku1 {
    width: 100%;
  }
}
.honbun {
  font-weight: bold;
  font-size: clamp(14px, 2.2vw, 18px);
  position: relative;
  content: "";
  display: inline-block;
  line-height: 2.2;
}
.hidden {
  display: none;
}
.start_button {
  margin: 30px 0 0;
  text-align: center;
}
[class*="stage-"] .start_button {
  margin-top: 120px;
}

.stage-box.locked {
  /* ロック共通のスタイル */
  /*filter: grayscale(80%);
  opacity: 0.9;*/
  cursor: not-allowed;
  position: relative;
}
.stage-box.locked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
}
.stage-circle.locked {
  display: none;
}

/* ステージ2のロック画像 */
.stage-box.locked[data-stage-id="2"]::after {
  background-image: url('../img/top/muji_st2_lock.png');
}

/* ステージ3のロック画像 */
.stage-box.locked[data-stage-id="3"]::after {
  background-image: url('../img/top/muji_st3_lock.png');
}

.stage-box.locked[data-stage-id="4"]::after {
  background-image: url('../img/top/muji_st4_lock.png');
}

.stage-box.locked[data-stage-id="5"]::after {
  background-image: url('../img/top/muji_st5_lock.png');
}

.stage-box.locked[data-stage-id="6"]::after {
  background-image: url('../img/top/muji_st6_lock.png');
}

.stage-box.locked a {
  pointer-events: none;
}

.stage-box img {
  max-width: none;
}
.stage-box.locked img {
  visibility: hidden;
}

/* ===== kari.cssに以下を追加 ===== */

/* ステージタイトルと番号をまとめるボックス */
.stage-title-box {
  text-align: center;
  margin-bottom: 2em;
}

/* ステージ番号のスタイル */
.stage-number {
  display: inline-block;
  background-color: #ff5e00;
  color: white;
  padding: 5px 20px;
  border-radius: 15px;
  font-size: 1.2em;
  font-weight: bold;
}

.stage-number_6 {
  display: inline-block;
  background-color: #8800aa;
  color: white;
  padding: 5px 20px;
  border-radius: 15px;
  font-size: 1.2em;
  font-weight: bold;
}

/* クイズの選択肢ボタンの共通スタイル */
.quiz-options {
  text-align: center;
}


/* .hiddenクラスで要素を非表示にする */
.hidden {
  display: none;
}

/* --- 対話形式UIのスタイル --- */

/* 会話全体を囲むコンテナ */
.dialogue-container {
  max-width: 800px;
  margin: 20px auto;
}

/* キャラクターと吹き出しを横並びにするボックス */
.dialogue-box {
  display: flex;
  align-items: flex-start;
  /* 上揃え */
  margin-bottom: 20px;
}

/* キャラクター画像のスタイル */
.character-icon img {
  width: 90px;
  height: 90px;
  margin-right: 20px;
}

/* 吹き出しの「しっぽ」部分 */
.speech-bubble::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -20px;
  border: 10px solid transparent;
  border-right-color: #FAD7C8;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  top: 20px;
  left: -17px;
  border: 10px solid transparent;
  border-right-color: #f0f0f0;
}

/* フィードバック用のボックス（正解・解説など） */
.feedback-box {
  border: 3px dashed #ff5e00;
  border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  background-color: #fff8e1;
}

.feedback-box h2 {
  color: #ff5e00;
  text-align: center;
}

.lead-txt {
  font-size: clamp(16px, 2.2vw, 20px);
  margin: 10px auto 0;
  line-height: 2;
  max-width: 800px;
  width: calc(100% - 20px);
}

/* --- 対話形式UIのスタイル --- */

/* 会話全体を囲むコンテナ */
.dialogue-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 10px;
}

/* 1セット（アイコンと吹き出し）のボックス */
.dialogue-turn {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;

}

/* 吹き出しの基本スタイル */
.speech-bubble {
  position: relative;
  background: #e9f8f0;
  border-radius: 15px;
  padding: 0 20px;
  flex: 1;
  border: none;
}

/* 解説の吹き出し*/
.exp-bubble {
  position: relative;
  background: var(--bubble-color,rgba(255, 220, 204, 0.40));
  border-radius: 15px;
  padding: 0 20px;
  flex: 1;
  border: none;
}

/* 2. カラーバリエーション（色だけを定義） */
.exp-bubble.pink { background: rgba(255, 214, 250, 0.4); }
.exp-bubble.orange   { background: rgba(255, 206, 149, 0.4); }
.exp-bubble.blue  { background: rgba(190, 230, 255, 0.4); }
.exp-bubble.green   { background: rgba(211, 253, 195, 0.4); }
.exp-bubble.purple   { background: rgba(228, 196, 255, 0.4); }

/*解説の吹き出しs2*/
.exp-s2-bubble {
  position: relative;
  background: var(--bubble-color,rgba(255, 214, 250, 0.4));
  border-radius: 15px;
  padding: 0 20px;
  flex: 1;
  border: none;
}
/*解説の吹き出しs4*/
.exp-s4-bubble {
  position: relative;
  background: var(--bubble-color,rgba(190, 230, 255, 0.4));
  border-radius: 15px;
  padding: 0 20px;
  flex: 1;
  border: none;
}

/*解説の吹き出しs5*/
.exp-s5-bubble {
  position: relative;
  background: var(--bubble-color,rgba(211, 253, 195, 0.4));
  border-radius: 15px;
  padding: 0 20px;
  flex: 1;
  border: none;
}

/* 吹き出しの「しっぽ」部分 */
.speech-bubble::before {
  content: '';
  position: absolute;
  top: 30px;
  left: -24px;
  border: 12px solid transparent;
  border-right-color: #a3d4b5;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  top: 30px;
  left: -20px;
  border: 12px solid transparent;
  border-right-color: #e9f8f0;
}

/* クイズ選択肢のコンテナ */
.quiz-options {
  text-align: center;
  margin: 30px 0;
}

/* クイズの各ボタン */
.quiz-button button {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 15px 0 15px auto;
  padding: 15px;
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: bold;
  color: #333;
  background-color: white;
  border: 3px solid #006167;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: #999 2px 2px 4px;
}

.quiz-button button:hover {
  background-color: #f0f0f0;
  transition: all 0.2s ease;
  box-shadow: none;
}

.quiz-button button:has(.think-btn) {
  border: none;
  box-shadow: none;
}
.quiz-button button:has(.think-btn):hover {
  background-color: white;
  box-shadow: none;
}
/* 解説用のボックス */
.explanation-box {
  border: 3px dashed #ff8c00;
  border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  background-color: #fff8e1;
}

.explanation-box h2 {
  color: #ff8c00;
  text-align: center;
}

.ho-mu-button {
  padding: 15px 40px;
  font-size: 1.2em;
  font-weight: bold;
  background-color: yellow;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stage-01-page .speech-bubble {
  background: #FFDCCC;
    &::before {
      border-right-color: #FFDCCC;
    }
    &::after {
      border-right-color: #FFDCCC;
    }
}
.stage-02-page .speech-bubble {
  background: #FFD6FA;
    &::before {
      border-right-color: #FFD6FA;
    }
    &::after {
      border-right-color: #FFD6FA;
    }
} 
.stage-03-page .speech-bubble {
  background: #FFCE95;
    &::before {
      border-right-color: #FFCE95;
    }
    &::after {
      border-right-color: #FFCE95;
    }
}
.stage-04-page .speech-bubble {
  background: #BEE6FF;
    &::before {
      border-right-color: #BEE6FF;
    }
    &::after {
      border-right-color: #BEE6FF;
    }
}
.stage-05-page .speech-bubble {
  background: #D3FDC3;
    &::before {
      border-right-color: #D3FDC3;
    }
    &::after {
      border-right-color: #D3FDC3;
    }
}
.stage-06-page .speech-bubble {
  background: #E4C4FF;
    &::before {
      border-right-color: #E4C4FF;
    }
    &::after {
      border-right-color: #E4C4FF;
    }
}

/* --- ユーザー側の吹き出しスタイル --- */

/* ユーザーの返信ターン（全体を右寄せにする） */
.dialogue-turn.user-turn {
  justify-content: flex-end;
  /* 中身を右端に寄せる */
}

/* ユーザー用の吹き出し */
.speech-bubble.user-bubble {
  background: #F9FF83;
  border: none;
  margin-right: 20px;
  text-align: center;
}

/* ユーザー吹き出しの「しっぽ」を右側にする */
.speech-bubble.user-bubble::before {
  left: auto;
  right: -24px;
  border-right-color: transparent;
  border-left-color: #F9FF83;
}

.speech-bubble.user-bubble::after {
  left: auto;
  right: -20px;
  border-right-color: transparent;
  border-left-color: #F9FF83;
}




/* .hiddenクラスで最初は非表示にしておく */
.hidden {
  display: none;
}

/* ============================================= */
/* ===== レスポンス対応（画面が小さい時） ===== */
/* ============================================= */

/* 画面幅が768px以下の場合に適用 */
@media screen and (max-width: 768px) {

  /* ★修正ポイント１：ヘッダーの重なりを解消 */
  header figure {
    position: relative;
    /* absolute指定をやめて、要素が重ならないようにする */
    height: auto;
  }

  /* 吹き出しのスタイル */
  .balloon1 {
    display: block;
    position: relative;
    width: auto;
    max-width: 90%;
    margin: 5% auto;
    padding: 15px;
    font-size: 16px;
    left: auto;
    transform: none;
  }

  .balloon1:before {
    display: none;
  }

  /* クイズへの誘導エリアの調整 */
  .obi img {
    width: 100%;
    margin-top: 5%;
  }

  .top_p2 {
    position: static;
    width: 100%;
    margin-top: 0;
    padding: 20px;
    font-size: 100%;
  }

  .btn {
    position: static;
    display: block;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
  }

  /* 「復活大作戦」の各ステージボックス */
  .container {
    flex-direction: column;
    align-items: center;
  }

  .item {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
  }

  p.name {
    font-size: 12px;
    /* スマートフォンでの文字サイズ */
    color: #ffffff;
  }
}

p.name {
  font-size: 14px;
  /* PCでの基本の文字サイズ */
  text-align: center;
  /* 文字を中央に配置 */
  color: #ffffff;
  /* 文字色（任意で変更してください） */
  padding: 20px 0;
  /* 上下の余白 */
}

.maru {
  background-color: #006167;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

/* ===== 各ステージ共通の箱 ===== */
.inakunari,
.kinnkyuu,
.saranarupinti,
.mawarino,
.hukkatu,
.ikimono {
  position: relative;        /* ::after の基準 */
  width: 100%;               /* 画面幅いっぱい */
  margin: 0 0 80px;          /* 下の余白 */
  padding: 40px 16px 80px;   /* 下は弧ぶんを多めに */
  text-align: center;
  font-size: medium;
  font-weight: bold;
  overflow: visible;         /* 弧が下にはみ出しても見えるように */
}
.ikimono {
  padding: 40px 16px 0;   /* 下は弧ぶんを多めに */
}

/* 背景色（＝弧の色） */
.inakunari   { background-color: #FFDCCC; }
.kinnkyuu    { background-color: #FFD6FA; }
.saranarupinti { background-color: #FFCE95; }
.mawarino    { background-color: #a7cdff; }
.hukkatu     { background-color: #D3FDC3; }
.ikimono     { background-color: #efafff; }

/* 中身（h2 や p）の z-index を上にしておく */
.inakunari > *,
.kinnkyuu > *,
.saranarupinti > *,
.mawarino > *,
.hukkatu > *,
.ikimono > * {
  position: relative;
  z-index: 1;
}

/* ===== 下側の弧（共通） ===== */
.inakunari::after,
.kinnkyuu::after,
.saranarupinti::after,
.mawarino::after,
.hukkatu::after,
.ikimono::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -60px;              /* 弧の出方はここで上下調整 */
  width: 140%;                 /* 親より少し広くして、端をなだらかに */
  height: 240px;               /* 弧の高さ（好みで調整可） */
  background-color: inherit;   /* 親の背景色と同じ */
  z-index: 0;
  clip-path: ellipse(70% 100% at 50% 0%);
}

/* ===== スマホ用の微調整（お好みで） ===== */
@media (max-width: 768px) {
  .inakunari,
  .kinnkyuu,
  .saranarupinti,
  .mawarino,
  .hukkatu,
  .ikimono {
    padding: 32px 12px 64px;
    margin-bottom: 64px;
  }

  .inakunari::after,
  .kinnkyuu::after,
  .saranarupinti::after,
  .mawarino::after,
  .hukkatu::after,
  .ikimono::after {
    bottom: -30px;
    height: 180px;
    width: 100%;
    clip-path: ellipse(120% 100% at 50% 0%);
  }
}

.img-wrap {
  text-align: center;
  margin: 20px 0;
} 



/*style.css に追加 */
.user-name-button {
  display: inline-block;
  background-color: #3f7f7f;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  margin-top: 24px;
  margin-right: 10px;
  vertical-align: middle;
}


.user-turn-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

.user-turn-container .user-name-button {
  /* 以前定義したボタン風スタイル */
  order: 2;
  /* 吹き出しの後に配置するために、順番を2にする */
  background-color: #3f7f7f;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: bold;
  margin-left: 10px;
  /* 吹き出しとの間にスペース */
  white-space: nowrap;
}

.user-turn-container .user-response-bubble {
  order: 1;
  /* 吹き出しをラベルの前に配置するために、順番を1にする */
  background: #fff0e1;
  /* ユーザー吹き出しの色 */
  border-color: #ffc975;
  max-width: 70%;
  /* 吹き出しの幅を制限 */
}

/* 吹き出しのしっぽを右側に設定し直すcssが必要です */
.user-turn-container .user-response-bubble::before {
  left: auto;
  right: -24px;
  border-right-color: transparent;
  border-left-color: #ffc975;
}

.user-turn-container .user-response-bubble::after {
  left: auto;
  right: -20px;
  border-right-color: transparent;
  border-left-color: #fff0e1;
}

.fainal_text {
  position: relative;
  background: #e9f8f0;
  border-radius: 15px;
  padding: 20px;
  flex: 1;
  border: 2px solid #a3d4b5;
}

.content {
  padding: 30px;
  margin-bottom: 20px;
  border: 2px solid #007bff;
  /* 青色の枠 */
  border-radius: 8px;
  min-height: 150px;
  /* 見栄えのための最小の高さ */
  background-color: #f0f8ff;
  /* 薄い青の背景 */
}

/* 非表示にするためのcssクラス */
.hidden {
  display: none;
}

/* ボタンのスタイル */
.controls {
  margin-top: 10px;
}

.controls button {
  padding: 10px 20px;
  margin-right: 10px;
  font-size: 16px;
  cursor: pointer;
}

/* 開いているときのコンテンツのスタイル */
.accordion-item.active .accordion-content {
  /* 開いたときに高さを十分に確保し、内容が見えるようにする */
  max-height: 300px;
  /* 内容の量に応じて調整してください */
  padding: 15px;
}

/* 開閉インジケーター (矢印など) */
.indicator {
  transition: transform 0.3s;
  font-size: 1.2em;
  color: #457b9d;
}

/* 開いているときは矢印を回転 */
.accordion-item.active .indicator {
  transform: rotate(90deg);
}

.img300-900 input {
  display: none;
}

.img300-900 input+img {
  width: 30%;
  cursor: pointer;
}

.img300-900 input:checked+img {
  width: 100%;
}

.question-bubble {
  background: #e9f8f0;
  /* 会話吹き出しの色 */
  border-radius: 15px;
  padding: 20px;
  border: 2px solid #a3d4b5;
}

/* 質問テキスト（Q2, Q3）のスタイル */
.question-bubble .quiz-question-q2,
.question-bubble .quiz-question-q3 {
  font-size: 1.3em;
  font-weight: bold;
  color: #1d3557;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* 選択肢を囲むメインコンテナ（緑の枠） */
.options-outer-box {
  margin-top: 30px;
  padding: 10px;
  border: 3px solid #ff8c00;
  /* オレンジ色の枠線に変更 */
  border-radius: 8px;
  background-color: #fff8ed;
  /* 非常に薄いオレンジの背景 */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 選択肢ボタンのコンテナ */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}

/* 選択肢A/B/Cの個別ボタンのスタイル */
.quiz-option-box {
  padding: 15px;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  border: 2px solid #ff8c00;
  /* 全ての選択肢をオレンジ枠に */
  color: #1d3557;
}

/* ホバー効果 */
.quiz-option-box:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  background-color: #ffe0b2;
  /* ホバー時の背景色を薄いオレンジに */
}

/* 回答後の無効化スタイル */
.quiz-option-box:disabled {
  cursor: default;
  opacity: 0.9;
}

/* 正解・不正解時のハイライト */
.correct-highlight {
  background-color: #c8e6c9 !important;
  /* 薄い緑 */
  border-color: #28a745 !important;
  color: #155724 !important;
}

.incorrect-highlight {
  background-color: #ffcdd2 !important;
  /* 薄い赤 */
  border-color: #dc3545 !important;
  color: #721c24 !important;
}

/* 結果メッセージを吹き出し内に表示するためのスタイル */
.quiz-result-bubble {
  margin-top: 20px;
  padding: 15px;
  border-radius: 15px;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  /* 最初は非表示 */
  transition: opacity 0.5s ease;
}


/* ---------------------------------------------------- */
/* 既存のスタイル（会話ターンなど）は省略 */
.content {
  padding: 20px;
  border: 1px solid #ddd;
  margin-top: 10px;
  border-radius: 6px;
  min-height: 250px;
  /* 見栄えのための最小の高さ */
  background-color: #ffffff;
}

.hidden {
  display: none !important;
}

/* style.css に追加する推奨スタイル */

/* 最終メッセージの枠 (special-frame-message は saranarupinti.js で使用) */
.special-frame-message {
  background-color: #e0f2d8;
  border: 3px solid #6aa84f;
  padding: 18px;
  border-radius: 10px;
  margin: 20px auto;
  width: 100%;
  max-width: 800px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 枠内のテキスト */
.special-frame-message .frame-content {
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 2;
  font-weight: 600;
}

/* ★マークを強調したい場合 */
.special-frame-message .frame-content strong:first-child,
.special-frame-message .honbun strong:first-child {
  display: block;
  margin-bottom: 5px;
  font-size: 1.2em;
  color: #38761d;
  /* 濃い緑の文字色 */
}

.kotoba {
  font-weight: bold;
    font-size: clamp(14px, 2.2vw, 18px);
    position: relative;
    content: "";
    display: inline-block;
    line-height: 2.2;
}

.nanikana {
  font-weight: bold;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 2.2;
}
.murawaku {
  background-color: #efafff;
  width: auto;
  padding: 0 40px;
  border-radius: 20px;
  margin-bottom: 30px;
  margin: 0 auto;
  max-width: 800px;
  min-width: 200px;
}

.quiz_all {
  font-size: 50px;
  background-color: #006167;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.hr_2 {
  background-color: #006167;
  width: calc(100% - 40px);
  height: 4px;
}

.quiz-page.chat .hr_2 {
  background-color: #5C006E;
}

.kotaeanswer {
  width: 100%;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: bold;
  color: #000000;
  border: 2px dashed #fffFE0;

  padding: 10px;
  margin: 20px 0;
  display: inline-block;
  border-radius: 30px;
  background-color: #fffca9;
}
.kotaeanswer p {
  font-weight: bold;
}
.kotaeanswer b {
  font-size: clamp(14px, 2vw, 20px);
}

.mura {
  color: #5C006E;
}

.quiz-page body,
.quiz-page h1 {
  margin: 0;
  padding: 0;
}

.quiz-page .karada {
  background-color: rgb(204, 255, 238);
  font-family: sans-serif;
}

.quiz-page .quiz_h1 {
  color: #ffffff;
  text-align: center;
  background-color: #7ef384;
  padding: 20px 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.quiz_h1 a {
  display: block;
  padding-bottom: 12px;
}
.quiz-page .quiz_h1 a {
  padding-bottom: 0;
}
.quiz_h1 img {
  width: 336px;
  height: 96px;
}
@media(max-width: 768px) {
  .quiz_h1 img {
    width: 224px;
    height: 64px;
  }
}

.pankuzu {
  background-color: #006167;
  color: white;
  padding: 10px 20px;
}

.pankuzu a {
  color: white;
  text-decoration: none;
}

.quiz-page .waku1 {
  background-color: white;
  width: calc(100% - 40px);
  max-width: 880px;
  padding: 40px;
  border-radius: 20px;
  margin: 40px auto;
  box-shadow: 2px 2px 8px #7a979e;
  text-align: center;
  margin-top: 20px;
}

.quiz-page .waku1 h2 {
  display: flex;
  align-items: center;
  font-size: clamp(16px, 2.2vw, 24px);
  color: #006167;
  font-weight: bold;
  line-height: 2;
}
.quiz-page.chat .waku1 h2 {
  font-size: clamp(14px, 2vw, 20px);
  text-align: left;
  color: #333;
}
.quiz-page .waku1 .result-h {
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: bold;
  color: #000000;
  padding: 20px;
  margin: 20px 0;
  display: inline-block;
  border-radius: 30px;
  width: 100%;
}

.quiz-page .waku1 h2 img {
  margin-right: 15px;
}

@media(max-width: 768px) {
  .quiz-page .waku1 {
    margin-top: 10px;
    width: calc(100% - 20px);
    padding: 10px;
  }
  .quiz-page .waku1 h2 img {
    width: 36px;
    height: 36px;
  }
}

/* Answers area & buttons */
.quiz-page .answers-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 0;
  counter-reset: answer-counter;
}

.quiz-page .answer-btn {
  display: block;
  background-color: #fff;
  border: 3px solid #006167;
  border-radius: 20px;
  padding: 20px 30px;
  font-size: clamp(16px, 2.2vw, 24px);
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #006167;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-weight: bold;
  box-shadow: 2px 2px 4px #7a979e;
}

.quiz-page .answer-btn:hover {
  background-color: #f0f0f0;
  box-shadow: none;
}

.quiz-page .answer-btn::before {
  counter-increment: answer-counter;
  content: counter(answer-counter, upper-alpha) ". ";
  font-weight: bold;
  margin-right: 0.5em;
}

.quiz-page .answers-area {
  margin-bottom: 20px;
}

.quiz-page .quiz-image {
  display: block;
  max-width: 80%;
  margin: 20px auto;
  border-radius: 10px;
}

/* Explanation button (green variant used in quiz pages) */
.quiz-page .kaisetu {
  display: block;
  width: 160px;
  padding: 8px 30px;
  background-color: #28a745;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  font-size: 20px;
}

.quiz-page .kaisetu_text {
  margin-top: 10px;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 2;
  text-align: left;
}

.quiz-page .kakoi {
  width: 50%;
  height: 10px;
  margin: 0 auto;
}

.quiz-page .hr_1 {
  border: none;
  border-top: 10px dashed #006167;
}

.quiz-page .maru {
  background-color: #006167;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.quiz-page .quiz_all {
  font-size: 50px;
  background-color: #006167;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.quiz-page video {
  width: 100%;
  max-width: 600px;
  min-width: 240px;
}

.quiz-page .title_img {
  padding-top: 20px;
  text-align: center;
}

.quiz-page .answer-explanation .correct-answer {
  font-size: clamp(18px, 2.3vw, 28px);
  font-weight: bold;
  color: #000000;
  border: 2px dashed #fffFE0;
  background-color: #fffFE0;
  padding: 20px;
  margin: 20px 0;
  display: inline-block;
  border-radius: 30px;
  width: 100%;
}

.quiz-page .answer {
  color: #006167;
}
.quiz-page.chat .answer {
  color: #333;
}
.quiz-page .feedback-correct h2 {
  color: #155724;
  background-color: #d4edda;
  border: 2px solid #c3e6cb;
  border-radius: 8px;
  padding: 10px;
  display: inline-block;
}

.quiz-page .feedback-incorrect h2 {
  color: #721c24;
  background-color: #f8d7da;
  border: 2px solid #f5c6cb;
  border-radius: 8px;
  padding: 10px;
  display: inline-block;
}
img { 
  max-width: 100%;
  height: auto;
}
a img {
  display: block;
  margin: 0 auto;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* ホバー時：少し浮かせる */
a:hover img {
  transform: translate(1px) scale(1.01);
  filter: brightness(1.05);
}

/* クリック（押下）時：押し込む */
a:active img {
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.9);
}

/* ベースカラー */
:root {
  --accent: #6c1f8f;
}
.hanrei {
  font-size: clamp(12px, 2vw, 14px);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.hanrei img {
  border-radius: 8px;
}
.js-quiz-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  width: 100%;
}
/* 各選択肢の枠 */
.js-quiz-form .option {
  position: relative;
  width: calc(50% - 12px); /* 2列 */
  box-sizing: border-box;
}

/* チェックボックス本体は非表示（アクセシビリティのため画面外に退避） */
.js-quiz-form .option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.js-quiz-form .option label {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 14px;
  border: 3px solid var(--accent);
  background: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: bold;
  color: #3b2454;
  cursor: pointer;
  box-sizing: border-box;
}

/* 左側の四角いチェックボックス */
.js-quiz-form .option label::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 3px solid var(--accent);
  box-sizing: border-box;
  margin-right: 12px;
  background: #fff;
  flex-shrink: 0;
}

/* チェックマーク（✔） */
.js-quiz-form .option label::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 28px;   /* 四角の中に入るよう調整 */
  width: 8px;
  height: 16px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
  opacity: 0;
}

/* チェックされたときの見た目 */
.js-quiz-form .option input[type="checkbox"]:checked + label {
  background: var(--accent);
  color: #fff;
}

/* チェック時の四角（白地） */
.js-quiz-form .option input[type="checkbox"]:checked + label::before {
  background: #fff;
  border-color: #fff;
}

/* チェックマークを表示 */
.js-quiz-form .option input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

/* スマホなど幅が狭い場合は1列に */
@media (max-width: 600px) {
  .js-quiz-form .option {
    width: 100%;
  }
}
.js-quiz-form button {
  cursor: pointer;
  border: none;
  box-shadow: none;
  background: none;
  margin: 0 auto;
}
.js-quiz-form button img {
  display: block;
  margin: 0 auto;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.js-quiz-form button:hover img {
  transform: translate(1px) scale(1.01);
  filter: brightness(1.05);
}
.js-quiz-form button:active img {
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.9);
}

/* グリッドレイアウト */
.card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* カードの基本設定 */
.card {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    z-index: 10;
}
.card:hover img {
    transform: scale(1.6);
}
@media (max-width: 768px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .card:hover {
        transform: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .card:hover img {
      transform: none;
  }
}

/* --- stage_02.js 用の追加スタイル --- */
#chat-container .dialogue-turn .exp-s2-bubble {
    background-color: rgba(255, 214, 250, 0.4);
    border-radius: 15px;
    position: relative;

}
/* 2. 吹き出しの三角（シッポ）を消す */
#chat-container .dialogue-turn .no-triangle::before,
#chat-container .dialogue-turn .no-triangle::after {
    content: none !important;
    display: none !important;
    border: none !important;
}
/* 4. ダミーアイコン（アイコンなし時のスペース調整用） */
#chat-container .dialogue-turn .character-icon.dummy-icon {
    display: none; /* 完全に消す */
}
.stage-02-page .exp-bubble {
    background-color: rgba(255, 214, 250, 0.4);
}