/*
Theme Name: CUBIC
Description: CUBIC Template
Author: 管理人
*/



body{
    font-size: min(max(24.375px, calc(1.5234375rem + ((1vw - 3.75px) * 6.5))), 25.35px);
    max-width: 390px;
    width: 100%;
    margin: 0 auto;
    font-family: "kosugi-maru", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5em;
}
img{
    display: inline-block;
    clear: both;
    max-width: 100%
}
/*ヘッダー----------------*/
header{
    background-color: #02b4ed;
    text-align: center;
    padding: 2% 2% 3%;
}
header img{
    width: 90.5%;
}
h1 a{
    display: block;
}

/*ホーム---------*/
.top_botm{
    text-align: center;
    font-size: 1.1em;
}
.top_botm a{
    background-color: #0272ed;
}
/*見出し*/

h3{
    font-size: min(max(37.5px, calc(2.34375rem + ((1vw - 3.75px) * 10))), 39px);
    line-height: 1.5;
    position: relative;
}
h3::before,
h3::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    background-size: contain;
    background-position-x: center;
    background-repeat: no-repeat; 
    width: 1.2em;
    height: 1.3em;
}
h3::before{
    background-image: url(images/h3_l.jpg);
    left: -2.5em;
}
h3::after{
    background-image: url(images/h3_r.jpg);
    right:  -2.5em
}
h4{
    text-align: center;
}

/*クイズ----------------*/

.sindan_tab,
.answers,
.answer_textbox,
.fombox{
    display: none;
}
.sindan_tab.active,
.answers.active,
.answer_textbox.active{
    display: block;
}

.issue,
.correct .answer_textwap,
.incorrect .answer_textwap{
    padding: 0 2% 0 1.8%;
}
.issue{
    background: #d2eefb;
    background: linear-gradient(178deg, rgb(210 238 251) 0%, rgba(0, 0, 0, 0) 100%);  
}
.correct .answer_textwap{
    background-color: #fbe9df;
}
.incorrect .answer_textwap{
    background-color: #fefeb7;
}
.issue .issue_box,
.answer_textin{
    background-color: #bd6b19;
    margin: -2.4% 0 -1px;
    padding: 2.2% 2.58% 0 2%;
}
.issue .issue_box > div,
.answer_textin > div{
    background-color: #006433;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 6% 3%;
    color: #fff;
}

.answers_list{
    padding: 7% 0 10%;
}
.answers_list li + li{
    margin-top: 0.5em;
}
.answers_list input{
    display: none;
}
.answers_list li:nth-child(1) label{
    background-color: #39c930;
} 
.answers_list li:nth-child(2) label{
    background-color: #ff9300;
} 
.answers_list li:nth-child(3) label{
    background-color: #ff1720;
}

.answers_list li p{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.answers_list li span{
    display: block;
    line-height: 1.1;
}
.sindan_tab:nth-child(5) .answers_list li span,
.sindan_tab:nth-child(8) .answers_list li span{
    font-size: 0.95em;
} 

.sindan_tab:nth-child(7) .answers_list li span{
	font-size: 0.7em;
}
.sindan_tab:nth-child(9) .answers_list li span{
    font-size: 0.62em;
}
/*回答*/
.answe_imghed,
.next_hed{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.answe_imghed{
    padding-top: 49%;
}
.next_hed{
    padding-top: 23%;
}
.correct .answe_imghed {/*正解*/
    background-image: url(images/correct_imghed.jpg);
}
.correct .next .next_hed{/*正解*/
    background-image: url(images/correct_next.jpg);
}
.incorrect .answe_imghed {/*不正解*/
    background-image: url(images/incorrect_imghed.jpg);
}
.incorrect .next .next_hed{/*不正解*/
    background-image: url(images/incorrect_next.jpg);
}
.next_botm{
    margin: 5% 0;
}
.next_botm a{
    background-color: #fcb900;
    font-size: 1.1em;
    text-align: center;
}
.kaisetu{
    font-size: 0.64em;
    line-height: 1.5;
    margin-top: 1em;
}
.sindan_tab:nth-child(9) .answer_texts h4{
    display: none;
}
.answe_remaining,
.last_botm{
    margin-bottom: 5%;
}

/*ボタン*/

.botmbox{
    color: #fff;
    display: block;
    margin: 0 10%;
    padding: 0.3em 1em;
    border-radius: 2em;
    
}

/*最後のボタン*/
.last_botm a{
    background-color: #02b4ed;
    font-size: 1.2em;
    text-align: center;
}