/* layout sp
--------------------------------------------------*/
@media screen and (max-width: 768px) {

html{
	overflow-x:hidden;
}

html,body{
	min-width:320px;
}

main {
	position:relative;
	width:100%;
	min-width:320px;
	height:100%;
	text-align:left;
	-webkit-text-size-adjust: none;
}


.quiz_set {
	width: 100%;
	height: 100%;
	position: relative; /* 疑似要素用に必要 */
	padding-top: 8vw;
	padding-bottom: 12vw;
	font-size: 3.4vw;
	font-weight: bold;
	line-height: 1.8;
	overflow: hidden; /* 余分なはみ出し防止 */
}

.quiz_set::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../quiz_images/bg_sp.jpg") top center;
	background-repeat:repeat-y;
	background-size: 100% auto; /* 必要に応じて */
	opacity: 0; /* 初期状態は透明 */
	transition: opacity 1s ease; /* フェード時間 */
	z-index: -1; /* コンテンツより背面 */
}



.title{
	width:65.8vw;
	height:auto;
}


/* クイズ大枠 */
.quiz01,
.quiz02,
.quiz03,
.quiz04,
.quiz05,
.quiz06,
.quiz07,
.quiz08,
.quiz09,
.quiz10{
	position:relative;
	margin:auto;
	width:65.8vw;
}

.q_img{
	position:relative;
	margin:5vw auto;
	width:22.4vw;
	height:auto;
}

.q_img02{
	position:relative;
	margin:5vw auto;
	width:60vw;
	height:auto;
}





.quiz_answer_set {
	width: 100%;              /* 画面幅いっぱい */
	margin: 8vw auto;         /* 上下余白をvwで */
	display: flex;
	flex-direction: column;   /* 縦に積む */
	gap: 6vw;                 /* 縦の間隔をvwベースに */
}

.answer_row {
	display: flex;
	justify-content: center;  /* 横方向中央寄せ */
	gap: 4vw;                 /* 横方向の間隔を小さめに */
	margin: 0;
	padding: 0;
	line-height: 0;
	flex-wrap: wrap;          /* 画面幅に収まらなければ折り返し */
}

.quiz_answer01 {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	gap: 1.5vw;
	width: auto;              /* 幅は画像に合わせる */
}

.quiz_answer_set .q_img02 {
	width: 10vw;              /* PCの86px相当をvw化 */
	height: auto;
	display: block;
	margin: auto;
}

.quiz_answer_number01,
.quiz_answer_number02,
.quiz_answer_number03,
.quiz_answer_number04,
.quiz_answer_number05 {
	width: 3vw;              /* PCの86px相当をvw化 */
	height: auto;
	display: block;
}




.result_q_img{
	width:50vw;
	height:auto;
}



/* 選択肢 */
.q_box {
	margin-top:5vw;
	margin-bottom:5vw;
	display: flex;        /* flexbox を有効化 */
	flex-wrap: wrap;      /* 2行に折り返す */
	gap: 2vw;            /* 選択肢間の余白 */
}

/*
.q_box a {
	display: block;
	width:65vw;
	background: #eeeeee;
	color: #fff;
	font-size: 3.4vw;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 5vw;
	box-sizing: border-box;
	border-radius: 3vw;
	position: relative;
	overflow: hidden;
}

.q_box a::before {
	content: "";
	position: absolute;
	top: 3px;   
	left: 3px;
	right: 3px;
	bottom: 3px;
	border: 2px solid #ffffff; 
	border-radius: 2vw;     
	pointer-events: none;
	box-sizing: border-box;
}

.q_box a:nth-child(1){
	background: #336dff;
	border-radius: 2vw; 
}

.q_box a:nth-child(2){
	background: #ffdb33;
	border-radius: 2vw; 
}

.q_box a:nth-child(3){
	background: #ff3333;
	border-radius: 2vw;  
}

.q_box a:nth-child(4){
	background: #62d1ad;
	border-radius: 2vw;      
}
*/


/* ボタンホバー */
.quiz01 a:hover,
.quiz02 a:hover,
.quiz03 a:hover,
.quiz04 a:hover,
.quiz05 a:hover,
.quiz06 a:hover,
.quiz07 a:hover,
.quiz08 a:hover,
.quiz09 a:hover,
.quiz10 a:hover,
.result_btn:hover,
.result_btn.fade.active:hover,
.thanks_btn:hover{
	opacity:1;
	animation:none;
}



/* あと●●問表示 */
.quiz_counter{
	text-align:center;
	font-size:3.2vw;
	font-weight:bold;
	line-height:1.6;
}

.quiz_counter_detail{
	border-bottom:solid 2px #000000;
	display:inline-block;
}






/* 結果画面 */
.quiz_result_text{
	position:relative;
	width:65.8vw;
	margin:auto;
	
	font-size:3.4vw;
	font-weight:bold;
	line-height:1.8;
	text-align:center;
	letter-spacing:0.05em;
	
}


.quiz_result_text02{
	width:65.8vw;
	display:flex;
	justify-content: center; /* 中央寄せ */
	align-items: center;
	margin:auto;
}


.result_btn {
	display: block;
	width:60vw;
	background: #0048ff;
	color: #fff;
	font-size: 3.4vw;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 5vw;
	box-sizing: border-box;
	border-radius: 3vw;         /* 内側の角丸 */
	position: relative; /* 擬似要素用に relative */
	overflow: hidden;
	margin:10vw auto 0;	
}

.result_btn::before {
	content: "";
	position: absolute;
	top: 3px;      /* 内側にずらす */
	left: 3px;
	right: 3px;
	bottom: 3px;
	border: 2px solid #ffffff;  /* 内側の白線 */
	border-radius: 2vw;         /* 内側の角丸 */
	pointer-events: none;
	box-sizing: border-box;
}




/* ポスターコンクール */
.poster_box{
	position:relative;
	width:60vw;
	margin:0 auto 0;
	border-radius:4vw;
	border:solid 2px #0048ff;
	text-align:center;
	padding:3vw;
}


.poster_caption{
	position:relative;
	color:#0048ff;
	font-size:3.4vw;
	font-weight:bold;
	line-height:1.6;
	text-align:center;
	letter-spacing:0.05em;
}

.poster_list_box{
	position:relative;
	width:100%;
	display: flex;        /* flexbox を有効化 */
	justify-content: center; /* 横方向中央揃え */
	align-items: center;     /* 縦方向中央揃え（必要なら） */
	margin-top:3vw;
	gap:2vw;
}

.poster01_caption{
	position:relative;
	text-align:center;
	font-size:2.2vw;
	font-weight:bold;
	line-height:1.6;
	letter-spacing:0;
	margin-bottom:3vw;
}

.poster01_img{
	margin:auto;
	width:15vw;
	height:auto;
}


.poster01_text{
	position:relative;
	text-align:center;
	font-size:2.2vw;
	font-weight:bold;
	line-height:1.6;
	letter-spacing:0;
	margin-top:3vw;
}





/* 応募PHP用 */
.thanks_text01{
	margin-top:5vw;
}

.thanks_text02{
	font-size:3.2vw;
	color:#ff0000;
}

.thanks_box{
	position:relative;
	width:60vw;
	margin:5vw auto 0;
	border-radius:4vw;
	border:solid 4px #0048ff;
	text-align:center;
	padding:5vw;
	font-size:2.8vw;
	font-weight:bold;
	line-height:1.6;
	background:#e5e5e5;
}

.thanks_btn {
	display: block;
	width:100%;
	background: #eeeeee;
	color: #fff;
	font-size: 3.4vw;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 5vw;
	box-sizing: border-box;
	border-radius: 3vw;         /* 内側の角丸 */
	position: relative; /* 擬似要素用に relative */
	overflow: hidden;
	background: #336dff;
	margin:5vw auto 0;	
}


.thanks_btn::before {
	content: "";
	position: absolute;
	top: 3px;      /* 内側にずらす */
	left: 3px;
	right: 3px;
	bottom: 3px;
	border: 2px solid #ffffff;  /* 内側の白線 */
	border-radius: 2vw;         /* 内側の角丸 */
	pointer-events: none;
	box-sizing: border-box;
}



input.name-label,
input.kana-label,
input.email-label{
	background-color: #fff; /* 好きな色 */
	border: 1px solid #ccc; /* 好きな枠 */
	font-size:3.2vw;
	box-sizing: border-box;
	padding: 0 10px;
	width: 100%; /* 横幅 */
	height: 10vw;
	background-color: #fff;
	border: 2px solid #ccc;
	margin-top:1vw;
}


.thank_box_confirm{
	background-color: #eee;
	font-size:3.2vw;
	margin-top:1vw;
	padding: 10px;
	line-height:1.6;
	
}


.thanks_btn_set{
	position: relative;         /* そのまま */
	display:block;              /* flex 有効化 */
	flex-direction: column;     /* 縦並びに変更 */
	gap: 0vw;                   /* ボタン間の余白 */
	align-items: center; 
}

.thanks_btn_back{
	background:#999999;
}

.thanks_btn_enter{
	margin-top:2vw;
}


.thanks_box_mini_set{
	position:relative;
	width: 100%; /* 横幅 */
	margin:auto;
}

.thanks_box_mini{
	position:relative;
	margin-bottom:3vw;
	text-align:left;
}

.thanks_box_mini input::placeholder {
	color: rgba(0, 0, 0, 0.2);  /* 黒20%透明度 → 薄グレー */
}












/* 結果ページ追加部分 */
.q1_correct,
.q2_correct,
.q3_correct,
.q4_correct,
.q5_correct{
	position:absolute;
	top:-2vw;
	left:-2vw;
	z-index:1;
	opacity:0;
	width:6vw;
	height:auto;
}

.quiz_wrong01{
	width:60vw;
	margin:auto;
	display: none;
}

.quiz_wrong01_set{      /* 初期は非表示 */
	display: flex;       /* 横並び */
	align-items: flex-start; /* 上揃え */
	gap: 2vw;           /* 画像とテキストの間隔 */
	margin-bottom: 5vw; /* 下の余白 */
}

.quiz_wrong_line{
	width:65.8vw;
	height:1px;
	background:#cccccc;
	margin:10vw auto 10vw;
}

.quiz_wrong_line02{
	width:65.8vw;
	height:1px;
	background:#cccccc;
	margin:5vw auto 5vw;
}


.quiz_wrong_set{
	width:65.8vw;
	margin:5vw auto 5vw;
}



.quiz_wrong_set .q_img03 {
	width: 10vw;        /* 画像の固定幅 */
	height: 10vw;       /* 画像の固定高さ */
	object-fit: cover;   /* はみ出す部分をカット */
	flex-shrink: 0;      /* 画像の縮小を防ぐ */
}


.quiz_wrong_caption{
	font-size:3.4vw;
	text-align:center;
	margin-bottom:10vw;
	letter-spacing:0.05em;
}


.quiz_wrong01_text01{
	font-size:3.4vw;
	line-height:1.6;
	color:#333333;
	letter-spacing:0.05em;
}

.quiz_wrong01_text01_caption{
	font-size:3.4vw;
	display:block;
	margin-bottom:2vw;
	letter-spacing:0.05em;
}

.quiz_wrong01_text02{
	font-size:3.4vw;
	
	flex-shrink: 0;      /* 画像の縮小を防ぐ */
	color:#fe0000;
	letter-spacing:0.05em;
}

.quiz_wrong01_text02_set{
	margin-top:5vw;
	display: flex;           /* 横並び */
	justify-content: flex-start; /* 左寄せ */
	align-items: center;     /* 縦方向中央揃え */
	gap: 3vw;               /* 必要に応じて間隔を調整 */
	margin-bottom:1vw;
}

.quiz_wrong01_text03{
	font-size:3.4vw;
	color:#fe0000;
	line-height:1.6;
	letter-spacing:0.05em;
}

.quiz_wrong01_number{
	width:3vw;
	height:auto;
}













/* SP/PC用 */
.rps_del{
	display:none;
}
.rps_visible{
	display:block;
}




}