@charset "utf-8";
/**
 * layout pc
 */


/* import
--------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap");
@import "init.css";


/* html, body
--------------------------------------------------*/

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


main {
	position:relative;
	width:100%;
	min-width:1200px;
	min-height:100%;
	margin:0;
	text-align:left;
	font-family: Verdana,"メイリオ","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
	font-feature-settings:"palt";
	letter-spacing:0.15em;
	-webkit-text-size-adjust:none;
	color:#000000;
	opacity: 0;              /* 最初は見えない */
	transition: opacity 1s ease; /* フェードイン用 */
	opacity: 1;               /*デバッグ用 */
}

main.active {
	opacity: 1; /* フェードイン */
}



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

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

/* フェードイン用クラス */
.quiz_set.show::before {
	opacity: 1;
}




/* タイトル系 */
.title,.q_img {
	position: relative;
	margin: auto;

	/* 初期状態 */
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 表示時に付与するクラス */
.title.active,
.q_img.active {
	opacity: 1;
	animation: poyonInitial 0.8s ease forwards; /* アニメーションを発動 */
}

@keyframes poyonInitial {
	0% {
		transform: scale(0.2);
	}
	40% {
		transform: scale(1.1);
	}
	60% {
		transform: scale(1);
	}
	80% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}


.quiz_text{
	width:100%;
	display:flex;
	justify-content: center; /* 中央寄せ */
	align-items: center;
}


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

.q_img{
	position:relative;
	margin:60px auto;
}

.q_img02{
	position:relative;
	margin:60px auto;
}


.quiz_answer_set {
	width: 672px;
	margin: 60px auto 60px;
	display: flex;
	flex-direction: column; /* 縦方向に並べる */
	gap: 40px; /* 並びの間隔 */
}

.answer_row {
	display: flex;
	justify-content: center; /* 中央寄せ */
	margin: 0; /* ← 縦の余白リセット */
	padding: 0; /* ← 念のためリセット */
	line-height: 0; /* ← 行間も潰す */
	gap: 70px; /* 並びの間隔 */
}

.quiz_answer01 {
	position:relative;
	display: flex;
	align-items: center;
	margin: 0; /* ← アイテム間の余白リセット */
	padding: 0;
	gap: 15px;
}

.quiz_answer_set .q_img02 {
	width: 86px;
	height: auto;
	display: block; /* img の下に余白が出ないように */
	margin:auto;
}

.poster_box{
	display:none;
}



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

.q_box img{
	flex-shrink: 0;      /* 画像の縮小を防ぐ */
}


/*
.q_box a {
	display: block;
	width: calc(50% - 5px);
	background: #eeeeee;
	color: #fff;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 25px;
	box-sizing: border-box;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}

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

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

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

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

.q_box a:nth-child(4){
	background: #62d1ad;
	border-radius:8px;
}

*/




/* ボタンホバー */
.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:0.6;
	transition: opacity 0.2s ease, transform 0.2s ease;
	animation: poyon02 0.4s;
}

@keyframes poyon02 {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.02); } /* 最大膨張 */
	100% { transform: scale(1); } /* 最終的に少し大きめで止まる */
}


/* あと●●問表示 */
.quiz_counter{
	text-align:right;
	font-size:28px;
	font-weight:bold;
	line-height:2;
}

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



/* クイズ初期設定 */
.quiz01, .quiz02, .quiz03, .quiz04, .quiz05,
.quiz06, .quiz07, .quiz08, .quiz09, .quiz10,
 .result {
	display: none;
}
.quiz01 { display: block; } /* 1問目だけ表示 */







/* 結果画面 */
.quiz_result_text{
	position:relative;
	margin:auto;
	width:790px;
	
	font-size:18px;
	font-weight:bold;
	line-height:2;
	text-align:center;
	
}

.quiz_result_text02{
	width:100%;
	display:flex;
	justify-content: center; /* 中央寄せ */
	align-items: center;
}



.result_btn {
	display: block;
	width:385px;
	background: #0048ff;
	color: #fff;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 25px;
	box-sizing: border-box;
	border-radius: 8px;
	position: relative; /* 擬似要素用に relative */
	overflow: hidden;
	margin:90px auto 0;
}

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




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


.poster_caption{
	position:relative;
	color:#0048ff;
	font-size:28px;
	font-weight:bold;
	line-height:1;
	text-align:center;
}

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

.poster01_caption{
	position:relative;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	line-height:1;
	letter-spacing:0;
	margin-bottom:20px;
}

.poster01_img{
	margin:auto;
}


.poster01_text{
	position:relative;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	line-height:1;
	letter-spacing:0;
	margin-top:20px;
}





/* 応募PHP用 */
.thanks_text01{
	margin-top:60px;
}

.thanks_text02{
	font-size:14px;
	color:#ff0000;
}

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



.thanks_btn {
	display: block;
	width:300px;
	background: #eeeeee;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 25px;
	box-sizing: border-box;
	border-radius: 8px;
	position: relative; /* 擬似要素用に relative */
	overflow: hidden;
	background: #336dff;
	margin:40px auto 0;
}


.thanks_btn::before {
	content: "";
	position: absolute;
	top: 4px;      /* 内側にずらす */
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: 3px solid #ffffff;  /* 内側の白線 */
	border-radius: 6px;         /* 内側の角丸 */
	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:16px;
	box-sizing: border-box;
	padding: 0 10px;
	width: 100%; /* 横幅 */
	height: 40px;
	background-color: #fff;
	border: 2px solid #ccc;
	margin-top:10px;
}

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



.thanks_btn_set{
	position:relative;
	display: flex;        /* flexbox を有効化 */
	flex-wrap: wrap;      /* 2行に折り返す */
	gap:20px;            /* 選択肢間の余白 */
	justify-content: center;
}

.thanks_btn_back{
	background:#999999;
}

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

.thanks_box_mini{
	position:relative;
	margin-bottom:20px;
	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:-15px;
	left:-15px;
	z-index:1;
	opacity:0;
}

.quiz_wrong01{
	display: none;
}

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

.quiz_wrong_line{
	width:790px;
	height:1px;
	background:#cccccc;
	margin:80px auto 80px;
}

.quiz_wrong_line02{
	width:790px;
	height:1px;
	background:#cccccc;
	margin:60px auto 60px;
}


.quiz_wrong_set{
	width:790px;
	margin:80px auto 80px;
}



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


.quiz_wrong_caption{
	font-size:18px;
	text-align:center;
	margin-bottom:80px;
}


.quiz_wrong01_text01{
	font-size:24px;
	line-height:1.8;
	color:#333333;
}

.quiz_wrong01_text01_caption{
	font-size:26px;
	display:block;
	margin-bottom:10px;
}

.quiz_wrong01_text02{
	font-size:18px;
	flex-shrink: 0;      /* 画像の縮小を防ぐ */
	color:#fe0000;
}

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

.quiz_wrong01_text03{
	font-size:18px;
	line-height:1.8;
	color:#fe0000;
}

.quiz_wrong01_number{
}








/* 共通アニメ */
.fade {
	opacity: 0;
	transform: translateY(20px); /* 下から少し浮かせる感じ */
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade.active {
	opacity: 1;
	transform: translateY(0);
}




/* ここからテンプレートエリア */
.rps_visible{
    display:none;
}

.rps_del{
    display:block;
}