/* 画面遷移用に、最初は「スタート画面」以外の画面を非表示にする */
.quiz-padding-top, .explanation-padding-top, .result-padding-top {
    display: none;
}

html, body{
    min-height: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1em;
}

.background{
    min-height: 100%;
    background-image: url('../img/background.png');
    background-repeat: repeat;
}

.header{
    position: relative;
    width: 100%;
    height: 85px;
    background-image: url('../img/header.png');
    background-repeat: repeat-x;
    text-align: center;
}

.head-logo{
    display: inline-block;
    position: absolute;
    left: 32px;
    top: 29px;
    cursor: pointer;
}
@media screen and (max-width: 600px) {
    .head-logo{
        left: 4px;
        top: 37px;
    }
    .head-logo img{
        height: 16px;
    }
}

.head-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 834px) {
    .head-title{
        transform: translate(-50%, -50%) scale(0.8, 0.8);
    }
}
@media screen and (max-width: 600px) {
    .head-title{
        transform: translate(-50%, -80%) scale(0.5, 0.5);
    }
}

.head-links{
    display: inline-block;
    position: absolute;
    right: 32px;
    top: 29px;
    font-size: 24px;
    color: #8c8c8c;
}
@media screen and (max-width: 834px) {
    .head-links{
        font-size: 20px;
    }
}
@media screen and (max-width: 600px) {
    .head-links{
        font-size: 16px;
        right: 8px;
        top: auto;
        bottom: 16px;
    }
}
.head-links a {
    margin: 0 10px;
    color: #8c8c8c;
    font-weight: bold;
    text-decoration: none;
}
.head-links a:visited {
    color: #8c8c8c;
}

.wrapper{
    position: relative;
    max-width: 80vw;
    margin: 0 auto;
    padding: 0 24px;
}
@media screen and (max-width: 834px) {
    .wrapper{
        max-width: 80vw;
        padding: 0 20px;
    }
}
@media screen and (max-width: 600px) {
    .wrapper{
        max-width: 90vw;
        padding: 0 16px;
    }
}

.background-center{
    min-height: calc(100vh - 85px);
}

.button-float {
    z-index: 10;
    padding: 20px 0;
    left: 0;
    right: 0;
    text-align: center;
}

.button-flex {
    display: block;
    z-index: 10;
    padding: 20px 0;
    left: 0;
    right: 0;
/*    justify-content: center; */
    text-align: center;
}

.btn {
    margin: 8px 16px;
    height: 62px;
    width: 177px;
    border: 0;
    background-size: contain;
}
@media screen and (max-width: 600px) {
    .btn {
        height: 46px;
        width: 132px;
    }
}


/* タイトル画面 */
.top-title{
    padding-top: 4vh;
    text-align:  center; 
}
@media screen and (max-width: 834px) {
    .top-title>img{
        width: 40vh;
    }
}
@media screen and (max-width: 600px) {
    .top-title>img{
        width: 30vh;
    }
}

#js-start-button {
    background-image: url('../img/title_btn1.png');
}

#js-library-button {
    background-image: url('../img/title_btn2.png');
}

#js-result-button {
    background-image: url('../img/title_btn3.png');
}

/* 出題画面 */
#js-quiz-window {
    padding-top: 20px;
    font-size: 24px;
    line-height: 1.5em;
}
@media screen and (max-width: 834px) {
    #js-quiz-window {
        font-size: 20px;
    }
}
@media screen and (max-width: 600px) {
    #js-quiz-window {
        font-size: 16px;
    }
}

#js-question-box {
    padding-bottom: 10px;
}

#js-question-num {
    width: 6em;
    padding: 10px 0 5px 0;
    background-color: #9696c8;
    color: white;
    line-height: 1em;
    text-align: center;
    border-radius: 10px 10px 0 0;
    border-bottom: 4px solid #7676b8;
}

#js-question-text {
    padding: 0.5em;
    background-color: white;
    color: black;
    border-radius: 0 10px 10px 10px;
}

#js-exit-button {
    background-image: url('../img/exit_btn.png');
}

#js-next-button {
    display: none;
    background-image: url('../img/next_btn.png');
}

#js-backtitle-button {
    background-image: url('../img/backtitile_btn.png');
}

/* 正誤情報の表示 */
#js-info-box {
    display: none;
    text-align: center;
    margin-bottom: -20px;
}
#js-info-box div{
    display: none;
}
#js-info-box img {
    vertical-align:middle;    
}
@media screen and (max-width: 600px) {
    #js-info-box img {
        height: 48px;
    }
}
#js-info-box[data-result="correct"] div:nth-child(1) {
    display: inline-block;
}
#js-info-box[data-result="incorrect"] div:nth-child(2) {
    display: inline-block;
}
.btn-popup {
    margin: 2px 20px;
    height: 53px;
    width: 53px;
    border: 0;
    background-image: url('../img/play_btn.png');
    background-size: cover;
    vertical-align: middle;
}
@media screen and (max-width: 600px) {
    .btn-popup {
        margin: 2px 10px;
        height: 40px;
        width: 40px;
    }
}

/* 選択肢 */
#js-choice-box {
    padding-top: 10px;
}
@media screen and (max-width: 834px) {
    #js-choice-box {
        padding-top: 8px;
    }
}
@media screen and (max-width: 600px) {
    #js-choice-box {
        padding-top: 6px;
    }
}

.choice[data-result="correct"], .choice[data-result="explanation"] {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, white 50%, white 100%);
}

.choice>div {
    display: flex;
    position: relative;
    z-index: 10;
    margin: 20px 0 0 0;
    padding: 8px;
    background-color: white;
    color: black;
    align-items: center;
    border-radius: 40px;
    cursor: pointer;
}
@media screen and (max-width: 834px) {
    .choice>div {
        padding: 6px;
        border-radius: 32px;
    }
}
@media screen and (max-width: 600px) {
    .choice>div {
        padding: 4px;
        border-radius: 24px;
    }
}

.choice>div::before {
    position: relative;
    margin-right: 10px;
    width: 41px;
    height: 41px;
    vertical-align: middle;
}
@media screen and (max-width: 600px) {
    .choice>div::before {
        margin-right: 6px;
        transform: scale(0.8, 0.8);
    }
}
#js-choice1>div::before {
    content: url('../img/choice_a.png');
}
#js-choice2>div::before {
    content: url('../img/choice_b.png');
}
#js-choice3>div::before {
    content: url('../img/choice_c.png');
}
#js-choice4>div::before {
    content: url('../img/choice_d.png');
}

.choice[data-result="correct"]>div, .choice[data-result="incorrect"]>div {
    background-color: #bdbddc;
}

.choice[data-result="correct"]>div::after {
    position: absolute;
    height: 32px;
    right: 16px;
    content: url('../img/icon_circle.png');
    vertical-align: middle;
}
@media screen and (max-width: 600px) {
    .choice[data-result="correct"]>div::after {
        height: 26px;
        right: 13px;
        transform: translate(-10%, -10%) scale(0.8, 0.8);
    }
}

.choice[data-result="incorrect"]>div::after {
    position: absolute;
    height: 32px;
    right: 16px;
    content: url('../img/icon_cross.png');
    vertical-align: middle;
}
@media screen and (max-width: 834px) {
    .choice[data-result="incorrect"]>div::after {
        height: 26px;
        right: 13px;
        transform: translate(-10%, -10%) scale(0.8, 0.8);
    }
}
@media screen and (max-width: 600px) {
    .choice[data-result="incorrect"]>div::after {
        height: 21px;
        right: 10px;
        transform: translate(-20%, -20%) scale(0.6, 0.6);
    }
}

.choice span {
    margin-right: 48px;
}

/* 解説 */
.explanation {
    display: none;
    position: relative;
    z-index: 0;
    padding: 8px 8px 8px 8px;
    background-color: white;
    color: black;
    border-radius: 0 0 10px 10px;
}

/* 結果のオーバーレイ */
#js-result-overlay {
    display: none;
	position: fixed;
    z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

#js-result-overlay .pic_overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#js-result-overlay[data-result="correct"] .pic_overlay:nth-child(1) {
    display: block;
}
#js-result-overlay[data-result="incorrect"] .pic_overlay:nth-child(2) {
    display: block;
}

/* 結果表示 */
#js-result-window {
    display: none;
    padding-top: 20px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
}
@media screen and (max-width: 834px) {
    #js-result-window {
        font-size: 20px;
    }
}
@media screen and (max-width: 600px) {
    #js-result-window {
        font-size: 16px;
    }
}

.result-box {
    position: relative;;
    width: 60vw;
    margin: 0 auto;
}
@media screen and (max-width: 600px) {
    .result-box {
        width: 80vw;
    }
}

.result-title {
    position: relative;
    z-index: 10;
    margin: 20px 0 0 0;
    padding: 8px;
    background-color: #9696c8;
    color: black;
    align-items: center;
    border-radius: 40px;
    white-space: nowrap;
    text-align: center;
}
.result-title img {
    vertical-align: baseline;
}
@media screen and (max-width: 834px) {
    .result-title img {
        height: 25px;
    }
}
@media screen and (max-width: 600px) {
    .result-title img {
        height: 20px;
    }
}


.result-value {
    position: relative;
    z-index: 10;
    padding: 8px;
    background-color: white;
    color: black;
    align-items: center;
    border-radius: 40px;
    white-space: nowrap;
    text-align: center;
}

/* メディア表示 */
#js-media-window {
    display: none;
	position: fixed;
    z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

.media-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.media-box img {
    max-width: 900px;/*640pxから変更*/
    max-height: 640px;/*追加*/
}
.media-box video {
    max-width: 640px;
    max-height: 640px;/*追加*/
}
@media screen and (max-width: 640px) {
    .media-box img {
        max-width: 100vw;
    }
    .media-box video {
        max-width: 100vw;
    }
}

.icon-media-play {
    display: block;
    position: absolute;
    width: 29%;
    height: 30%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    background-image: url('../img/media_play.png');
    background-size: contain;
    pointer-events: none;
}

.btn-media-close {
    position: absolute;
    width: 23px;
    height: 23px;
    top: 0;
    right: 0;
    border: 0;
    background-image: url('../img/media_close.png');
    background-size: contain;
	background-color: rgba(0,0,0,0.3);
}
.btn-media-close:hover {
	background-color: rgba(0,0,0,0.8);
}

#js-picture-box {
    display: none;
}

#js-movie-box {
    display: none;
}

/* 資料館 */
#js-library-window {
    padding-top: 20px;
    font-size: 24px;
    line-height: 1.5em;
}
@media screen and (max-width: 834px) {
    #js-library-window {
        font-size: 20px;
    }
}
@media screen and (max-width: 600px) {
    #js-library-window {
        font-size: 16px;
    }
}

.library_desc {
    display: block;
    /* background-color: #c7c7fd; */
    background-color: #9696c8;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    padding: 10px 15px;
    /* text-align: center; */
    font-size: 16px;
    font-weight: 300;
    margin: 30px 10vw 10px 10vw;
    /* margin: 0 10vw 10px 10vw; */
    line-height: 1.5em;
}

.item {
    display: flex;
    position: relative;
    z-index: 10;
    margin: 0 10vw 10px 10vw;
    padding: 8px;
    background-color: white;
    color: black;
    align-items: center;
    border-radius: 40px;
    cursor: pointer;
}
@media screen and (max-width: 834px) {
    .item {
        margin: 0 5vw 10px 5vw;
    }
    .library_desc {
        margin: 20px 5vw 0px 5vw;
    }
}
@media screen and (max-width: 600px) {
    .item {
        margin: 0 0 10px 0;
    }
    .library_desc {
        margin: 20px 0 0px 0;
    }
}

.item::before {
    position: relative;
    margin-right: 10px;
    width: 41px;
    height: 41px;
    content: url('../img/icon_item.png');
    vertical-align: middle;
}
@media screen and (max-width: 600px) {
    .item::before {
        margin-right: 6px;
        transform: scale(0.8, 0.8);
    }
    .library_desc {
        margin-right: 6px;
        font-size: 14px;
        /* transform: scale(0.8, 0.8); */
    }
}
.item p {
    position: absolute;
    left: 8px;
    margin-top: auto;
    margin-bottom: auto;
    width: 41px;
    padding: 2px;
    font-size: 16px;
    text-align: center;
    color: white;
}
@media screen and (max-width: 600px) {
    .item p {
        left: 7px;
        transform: scale(0.8, 0.8);
    }
    .library_desc {
        left: 7px;
        font-size: 14px;
        /* transform: scale(0.8, 0.8); */
    }
}

.item[data-index=""] {
    background-color: #cbcbcb;
    cursor: initial;
}


/* 実行中 */
#busy {
	display: none;
	position: fixed;
    z-index: 200;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 1s;
	background-color: rgba(0,0,0,0.5);
}

.busy-mes {
	width: 640px;
	height: 32px;
	position: fixed;
	inset: 0 0 200px;
	margin: auto;
	padding: 10px 0;
	text-align: center;
	background-color: white;
	border-radius: 10px;
	opacity: 0;
	animation: busy-fadein 1s ease forwards;
	animation-delay: 5s;
}

.busy-mes span {
	font-size: 24px;
	color: black;
}

@keyframes busy-fadein {
	100% {  opacity: 1;}
}

.busy-base {
	position: fixed;
	width: 64px;
	height: 64px;
	inset: 0;
	margin: auto;
}

.busy-64 {
	position: absolute;
	width: 64px;
	height: 64px;
	pointer-events:none;
	text-align:center;
	border-radius: 50%;
	border: 16px solid #33CCFF;
	border-right-color: transparent;
	animation: busy-spin 1s infinite linear;
}

@keyframes busy-spin {
	0% { transform: rotate(0deg); opacity:1; }
	50%  { transform: rotate(180deg); opacity: 1; }
	100%   { transform: rotate(360deg); opacity:1; }
}