body{
	margin:0;
    background-color: #efefef;
}

.hidden {
    display: none !important;
}
.start_wrap, .kiyaku_wrap{
	background-color:white;	
	padding:24px;
	 padding-bottom:60px;
}
.start_wrap h2{
	color:orange;
    margin-bottom: 24px;
    margin-top: 24px;
    font-size:2rem;
}
.present_wrap{
	background-color:#feebce;
	border-radius:20px;
	padding:54px 0px;
	margin-bottom: 53px;
}

.present_wrap img{
	width:75%;
	display:block;
	margin:0 auto;
}

.about_wrap{
	background-color:#feebce;
	border-radius:20px;
	padding:12px 0px;
	font-weight:bold;
	font-size:1em;
}

.arrow-down {
	width: 62px;
    height: 29px;
    background-color: #ff9d2b;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 24px auto;
}

.quiz-container {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    font-family: "Helvetica Neue", Arial, sans-serif;
    height:100%;
    
    /* padding: 0 20px; */
}
@media (min-width: 649px) {
	.quiz-container {
	 	box-shadow: 0 10px 25px 0 rgb(156 146 104 / 46%);
	}
}

/* 共通画像スタイル */
.main-visual, .quiz-visual {
    width: 100%;
    height: auto;
}

/*設問*/
/* --- ヘッダー全体のレイアウト（ロゴを左右に振り分け） --- */

.header {
    display: flex;
    justify-content: space-between; /* ★これで2つのロゴが「左端」と「右端」に自動で分かれます */
    align-items: center;            /* ★2つのロゴの「縦の高さ中央」をぴったり揃えます */
    
    width: 100%;
    padding: 10px 16px;             /* 上下と左右の余白（デザインに合わせて微調整してください） */
    background-color: #ffffff;      /* ヘッダーの背景は白 */
    box-sizing: border-box;
}

/* 左側のロゴリンク */
.logo_kadan {
    display: block;
}

/* 右側のロゴリンク */
.logo_f {
    display: block;
}



/* ロゴ画像のサイズを適正化（縦に潰れたりはみ出したりするのを防ぐ） */
.logo_kadan img,
.logo_f img {
    height: 32px;  /* ★デザイン（画像の高さ）に合わせてサイズを調整してください */
    width: auto;   /* 横幅は比率を保ったまま自動調整 */
    display: block;
}

#question-number{
	color:white;
	background-color: #fbb03a;
    margin: 0;
    padding: 12px;
    font-size:2em;
}
#options{
	padding:0 36px 80px;
}

/* --- ★追加：問題画像とテキストを重ねるための親要素 --- */
.quiz-visual-wrapper {
    position: relative; /* 子要素（問題文）の配置基準にする */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;   /* 万が一画像や文字がはみ出た時の保険 */
}

/* 画像は横幅いっぱいに広げる */
.quiz-visual {
    display: block;
    width: 100%;
    height: auto;
}

/* --- ★追加：画像の上に重ねる問題文のスタイル --- */
#question-text {
    position: absolute;
    bottom: 0;       /* 画像の一番下にぴったりくっつける */
    left: 0;
    width: 100%;     /* 横幅いっぱいに広げる */
    margin: 0;       /* デフォルトの余白をリセット */
    
    /* 半透明の黒背景（デザインの黒帯を再現） */
    background-color: rgb(0 0 0 / 41%);
    
    /* 文字の見た目（白文字・左寄せ・適度な余白） */
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: left;
    padding: 13px 32px;/* 黒帯の中の上下左右の隙間 */
    box-sizing: border-box; /* paddingを含めた横幅100%にする */
    font-size: 1.25em;
}

/* 3選択肢ボタン */
/* --- クイズの3択ボタン全体のスタイル調整 --- */
#options button {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 28px 0;
    padding: 8px 6px;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 60px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.1s, box-shadow 0.1s;
    text-align: left;
}

#options button:nth-of-type(1) {
	background-color:#eb6ea5;
}
#options button:nth-of-type(1) .btn-symbol {
	color:#eb6ea5;
}
#options button:nth-of-type(2) {
	background-color:#3ab648;
}
#options button:nth-of-type(2) .btn-symbol {
    color:#3ab648;
}
#options button:nth-of-type(3) {
	background-color:#2caae1;
}
#options button:nth-of-type(3) .btn-symbol {
    color:#2caae1;
}
	
/* 左側の白い丸エリア（A, B, Cが入る場所） */
.btn-symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    width:40px;
    height:40px;
    background-color: white;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 900;
    margin-right: 23px;
    margin-left: 4px;
    flex-shrink: 0;
}

/* 右側のクイズの選択肢テキスト */
.btn-text {
    flex-grow: 1;
    line-height: 1.3;
}

/* #options button:hover {
    background-color: #edf2f7;
} */

/* --- モーダル基本設計 --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgb(255 255 255 / 70%);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
}

/* モーダルコンテンツの箱（縦並びのレイアウトの基盤） */
.modal-content {
    background-color: transparent; /* 背景透過にして画像自体の形を活かす */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* カダンくんイラスト自体（一番背面に配置） */
.modal-bg-visual {
    width: 100%;
    height: auto;
    display: block;
}

/* 画像で作ったボタンのスタイル（タップ・クリック可能に） */
.clickable-img-btn {
    width: 100%;
    max-width: 280px; /* ボタン画像の最大サイズ */
    height: auto;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: transform 0.1s;
}
.clickable-img-btn:active {
    transform: scale(0.95); /* タップした時に少し凹む演出 */
}

/* モーダル内のテキスト共通設定 */
.modal-text {
	position: absolute;
    width: 72%;
    padding: 15px;
    font-size: .8rem;
    /* box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center; */
}

/* --- ★ここが魔法のCSS：モーダルの種類ごとの上下並び替え --- */

/* 1. 正解時：テキスト（解説）が「一番上（カダンくんの頭上）」に配置される想定 */
/* イラスト自体に吹き出しが含まれている場合は、CSSのposition absolute等で位置の微調整が必要です */
.type-correct {
    /* 必要に応じて調整 */
}
.type-correct .modal-text {
	position: absolute;
    color: #2d3748;
    order: -1;
    margin-bottom: 10px;
    padding: 28px 54px 0 54px;
    font-size: 2.4em;
}
.type-correct #modal-actions {
    order: 2; /* ボタンは下 */
    width: 100%;
}

/* 2. 不正解時：テキストが「ボタンの上」に配置される */
.type-incorrect .modal-text {
    color: #ffffff; /* 青背景で見やすいように白文字 */
    order: 1; 
    margin-top: 15px;
}
.type-incorrect #modal-actions {
    order: 2; /* ボタンはテキストの下 */
    width: 100%;
    margin-top: 10px;
}

/* 3. 全問正解クリア時：テキストが「ボタンの下」に配置される */
.type-clear .modal-text {
    color: #2d3748;
    order: 2; /* ボタンより下に下げる */
    margin-top: 15px;
}
.type-clear #modal-actions {
    order: 1; /* ボタンが上 */
    width: 100%;
}

/* --- スマホ幅（649px以下）のときの調整 --- */
@media (max-width: 649px) {
    .quiz-container {
        width: 100%;
        max-width: 100%;
        padding: 0; /* 左右の20pxの余白をなくして画面いっぱいに */
    }

    /* ★チャットボットのアイコンとクイズが重なってタップできないのを防ぐ対策
       クイズの一番下にチャットボットの高さ分（約80px〜100px）の余白を作っておきます
    */
    #start-box, #quiz-box {
        padding-bottom: 90px; 
    }
	
    /* 3選択肢ボタンの左右が画面に張り付きすぎないよう、ボタンのエリアだけ少し内側に余白を持たせる */
    #options {
        padding: 0 20px;
    }
}

/* --- スタート画面のレイアウト調整 --- */
#start-box {
    padding: 0;
    text-align: center;
}

.agreement_wrap {
    margin-bottom: 24px;
}

/* チェックボックスと文字の縦位置を綺麗に揃える */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    transform: scale(2.5); /* スマホでも押しやすいように少し大きく */
    margin-right: 16px;
    cursor: pointer;
}

.top_foot{
	/* 黄色の縦グラデーションを再現するコード */
	background:linear-gradient(to bottom, #fffeca 0%, #fecd08 100%);
	padding: 36px 0;
	padding-bottom: 80px;
}

/* --- ★理想のSTARTボタンのデザイン（アクティブ時） --- */
#start-btn {
    display: inline-block;
    width: 85%;            /* 横幅（デザインに合わせて適宜調整してください） */
    max-width: 480px;
    padding: 24px 0;
    font-size: 2rem;     /* パッと目を引く大きな文字 */
    font-weight: 900;      /* 極太文字 */
    color: #ffffff;        /* 白文字 */
    letter-spacing: 1px;   /* 文字の間隔を少し広げて読みやすく */
    background-color: #e51576; /* お送りいただいた画像のマゼンタピンク */
    border: none;
    border-radius: 12px;   /* 滑らかな角丸（カプセル型に近い長方形） */
    
    /* 下側の立体的なシャドウ（少し暗いピンクベージュ系の影） */
    box-shadow: 0 6px 0 #b2255e; 
    
    cursor: pointer;
    transition: all 0.1s ease;
}

/* ボタンを押した瞬間の心地よい押し込み演出 */
#start-btn:not(:disabled):active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #b2255e;
}

/* --- ★チェックが入っていない時（非アクティブ時）のスタイル --- */
#start-btn:disabled {
    background-color: #cbd5e0 !important; /* 綺麗なライトグレー */
    box-shadow: 0 6px 0 #a0aec0 !important; /* 影もグレーに */
    color: #718096 !important;            /* 文字色を薄く */
    cursor: not-allowed;                  /* マウスを乗せると禁止マークに */
    transform: none !important;
}

.kiyaku_wrap{
	padding-right:36px;
	padding-left:36px;
}
.kiyaku_wrap h2{
	font-size:1.3em;
}
.kiyaku_wrap p{
	font-size:.9em;
}
.kiyaku{
	text-align:left;
}
.kiyaku dl{
	font-size:1em;
}

#modal-trigger-area{
	border:unset;
}

.whole-modal-btn{
	border:unset;
	background-color:unset;
}

.whole-modal-btn img{
	width:85%;

	}

/*カダン君表示調節用*/
.box{
	height:64px;
}

/*解説個別*/
.expl1{
	font-size: .9em;
}
.expl2{
	font-size: .9em;
}
.expl3{
	font-size:1.1em;
}
.expl4{
	font-size:1.2em;
}
.expl5{
	font-size:1.5em;
}

.modal-text:has(.expl1){
	padding:20px;
}
.modal-text:has(.expl2),
.modal-text:has(.expl3) {
	padding:10px;
}
/*PCのとき*/
@media (min-width: 649px) {
	.expl1{
		font-size: 1.9em;
	}
	.expl2{
		font-size: 1.7em;
	}
	.modal-text:has(.expl2),
	.modal-text:has(.expl3)){
		padding:42px;
	}
	.expl3{
		font-size:2em;
	}
	.expl4{
		font-size:2.2em;
	}
	.modal-text:has(.expl4)){
		padding:36px;
	}
	.expl5{
		font-size:2.5em;
	}
}

.kiyaku_txt{
	display: block;        /* インデントを効かせるためにブロック化 */
  padding-left: .9em;   /* ① 左側に「※」が入る分の余白を作る */
  text-indent: -0.9em; 
}

.kiyaku_txt::before {
  content: "・";
}

.kome {
  display: block;        /* インデントを効かせるためにブロック化 */
  padding-left: .9em;   /* ① 左側に「※」が入る分の余白を作る */
  text-indent: -0.9em;   /* ② 1行目だけを左に「1.2文字分」突き出させる */
}

.kome::before {
  content: "※";
  /* position: absolute; は不要なので削除します */
}
dd{margin-left:12px;}