/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@400;700;900&display=swap');
/*=================================
layout
=================================*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: "Noto Sans JP", sans-serif;
     font-optical-sizing: auto;
     font-weight: 900;
     font-style: normal;
     
	color: #000;
	font-size: 16px;
     background-color: #c5b5ff;
     background-image: url("../img/common/bg.jpg");
     background-position: center top;
     background-repeat: repeat-y;
}
.fadeleft ,
.fadeup ,
.fade {
     opacity: 0;
     filter: alpha(opacity=0);
     -ms-filter: "alpha(opacity=0)";
}
img{vertical-align: bottom;}
:root {
	--bg-base: #000;
	--line-color: #820000;
	--dt-color: #a08f50;
}

/*表示*/
.view_pc{display: block;}
.view_pc_tb{display: block;}
.view_tb{display:none;}
.view_tb_sp{display:none;}
.view_sp{display:none;}


/*==================
BG
==================*/
html {
  height:100%;
}

body {
  margin:0;
}
/*==================
quiz
==================*/
.all h1{
    width: 100%;
    display: inline-block;
    padding: 0.5em;color: #fff; text-align: center;background-color: #675ab8;
}
.quiz_wrap{
    text-align: center;
    width: 90%;
    margin: 0 auto;
    background-color: #d3c7ff;
    max-width: 1300px;
    padding-bottom: 2.0em;
}
.quiz_wrap .image{}
.quiz_wrap .image img{
    border-radius: 10px;
    border: 2px #675ab8 solid;
    width: 70%;
    margin: 1.0em auto;
}
.answer_btn{
    color: #000;
    background-color: #ffcf3d;
    padding: 1.0em;
    box-shadow: 3px 3px 0 #000;
    border-radius: 30px;
    font-size: min(3.4vw, 21px);
    border:none;
    font-weight: bold;
    max-width: 600px;
    width: 90%;
    margin: 1.0em auto;
    cursor: pointer;
    transition: all 0.3s ease-out;
}
.answer_btn:hover{
    box-shadow: 0 0 0 #000;
    transform:translate(0,3px);
}
.restart_btn{
    color: #fff;
    background-color: #090358;
    padding: 1.0em;
    box-shadow: 3px 3px 0 #000;
    border-radius: 30px;
    font-size: min(3.4vw, 21px);
    border:none;
    font-weight: bold;
    max-width: 600px;
    width: 90%;
    margin: 1.0em auto;
    cursor: pointer;
    transition: all 0.3s ease-out;
    display: inline-block;
    text-align: center;
}
.restart_btn:hover{
    box-shadow: 0 0 0 #000;
    transform:translate(0,3px);
}
.info_txt{
    color: #000;
    width: 90%;
    margin: 1.0em auto;
    border-radius: 10px;
    padding: 1.0em;
}
.question{
    background-color: #f4f1ff;
    color: #000;
    width: 90%;
    margin: 1.0em auto;
    border-radius: 10px;
    padding: 1.0em;
}
#quizForm label {
    background-color: #675ab8;
    display: inline-block;
    transition: background-color 0.2s ease;
    cursor: pointer;
    padding: 1.0em;
    width: 85%;
    border-radius: 20px;
    margin: 0.2em auto;
    max-width: 1100px;
    color: #fff;
}

#quizForm label:has(input[type="radio"]:checked) {
    background-color: #322680;
    color: #ffcf3d;
}
#quizForm label input{
    opacity: 0;
    display: none;
}
.quiz_number{
    color: #fff;
    padding: 0.3em;
    display: inline-block;
    background-color: #675ab8;
    border-radius: 10px;
    width: 5em;
    /*float: left;*/
    margin: 1% 0.5%;
    font-size: 1.2em;
}
.quiz_timer{
    color: #fff;
    padding: 0.3em;
    display: inline-block;
    background-color: #675ab8;
    border-radius: 10px;
    width: 5em;
    margin: 1% 0.5%;
    font-size: 1.2em;
    /*float: left;*/
}

/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
	body{
		font-size: 2.2vw;
	}
	
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: block;}
.view_tb{display:block;}
.view_tb_sp{display:block;}
.view_sp{display:none;}
.tb_br{display:block;}
.quiz_wrap .image img{
    width: 90%;
}
     
}/*max-width: 768px*/


/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
	body{
		font-size: 3.2vw;
		background-size: 260%;
		background-attachment: fixed;
	}
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: none;}
.view_tb{display:none;}
.view_tb_sp{display:block;}
.view_sp{display:block;}
     
     #pagetop:hover img{
	opacity: 1.0;
     }
     
}/*media:480*/