@charset "Shift_JIS";
/*----------question----------*/

.question .inner{max-width: 1000px;text-align: center;padding: 0;background: #fff;}
.question .inner .q_head .q_grade{background-image: url("images/q_head_bg.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;background-position: left center;padding: 18px 0 17px;}
.question .inner .q_head .q_grade img{margin: 0 26px 0 auto;}
.question .inner .main_txt{position: relative;}
.question .inner .main_txt h1.q_nmb{width: 86px;height: 86px;font-size: 30px;transform:translateX(-50%);top: -39px;left: 50%;}
.question .inner .main_txt p{font-size: 30px;font-weight: 700;line-height: 50px;color: #000;padding-top: 68px;}
.question .inner .select_list{padding-top: 43px;}
.question .inner .select_list ul{display: flex;justify-content: center;max-width: 984px;margin: 0 auto;}
.question .inner .select_btn {padding-top: 50px;}
.question .inner .select_btn .btn_head{width: 560px;font-size: 16px;font-weight: 700;color: #45b035;line-height: 22px;font-feature-settings: normal;border: solid 2px #22ac38;border-radius: 14px;padding: 18px 0 12px;margin: 0 auto;}
.question .inner .select_btn .btn_head span{font-size: 28px;font-feature-settings: normal;}
.question .inner .select_btn ul{display: flex;justify-content: center;margin: 0 auto;padding-top: 24px;}
.question .inner .select_btn ul li input{display: none;}
.question .inner .select_btn ul li input:checked + label img{opacity: 0;}
.question .inner .select_btn ul li label{width: 236px;display: block;-webkit-background-size: 176px auto;background-size: 176px auto;background-position: center top;background-repeat: no-repeat;cursor: pointer;transition: all .2s;}
.question .inner .select_btn ul li label *{cursor: pointer;}
.question .inner .select_btn ul li:nth-child(1) label{background-image: url("images/btn_a2@2x.png");}
.question .inner .select_btn ul li:nth-child(2) label{background-image: url("images/btn_b2@2x.png");}
.question .inner .select_btn ul li:nth-child(3) label{background-image: url("images/btn_c2@2x.png");}
.question .inner .select_btn ul li label img{margin: 0 auto;transition: all .2s;pointer-events: none;}
.question .inner .select_btn ul li label span{font-size: 16px;font-weight: 300;line-height: 25px;color: #000;padding-top: 18px;white-space: nowrap;display: block;}

@media only screen and (min-width: 641px){
.question .inner .select_btn ul li label:hover{transform: translate(2px, 5px);}
.question .inner .select_btn ul li label:active{transform: translate(4px, 10px);}
.question .inner .select_btn ul li label:hover img{opacity: 0;}
}

@media only screen and (max-width: 640px){
.question .inner {margin: 0 15px;width: auto;}
.question .inner .q_head .q_grade{background-image: url(images/q_head_bg_sp.png);padding-top: calc(100% * (106 / 345) - 17px);position: relative;}
.question .inner .q_head .q_grade img {width: calc(100% * (105 / 343));max-width: 105px;margin: 0;position: absolute;top: 15px;right: 12px;}
.question .inner .main_txt h1.q_nmb{width: 60px;height: 60px;font-size: 21px;top: -32px;}
.question .inner .main_txt p{font-size: 22px;line-height: 37px;padding-top: 34px;}
.question .inner .main_txt p .ruby[data-ruby]::before{font-size: 11px;}
.question .inner .select_list{padding-top: 20px;}
.question .inner .select_list ul{display: block;}
.question .inner .select_list ul li{padding: 0 25px 14px;}
.question .inner .select_list ul li img{margin: 0 auto;}
.question .inner .select_btn{padding-top: 34px;position: relative;}
.question .inner .select_btn .btn_head{width: auto;font-size: 13px;line-height: 20px;margin: 0 10px;padding: 17px 0 97px;}
.question .inner .select_btn .btn_head span{font-size: 22px;}
.question .inner .select_btn ul{width: calc(100% - 60px);max-width: 280px;padding: 0;transform: translateX(-50%);position: absolute;top: 106px;left: 50%;}
.question .inner .select_btn ul li:not(:last-child){margin-right: 29px;}
.question .inner .select_btn ul li:nth-child(1) label{background-image: url("images/btn_a2_sp@2x.png");}
.question .inner .select_btn ul li:nth-child(2) label{background-image: url("images/btn_b2_sp@2x.png");}
.question .inner .select_btn ul li:nth-child(3) label{background-image: url("images/btn_c2_sp@2x.png");}
.question .inner .select_btn ul li label{width: auto;-webkit-background-size: contain;background-size: contain;position: relative;}
.question .inner .select_btn ul li label::after{content: "";width: 24px;height: 22px;background-image: url("images/btn_arrow@2x.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;position: absolute;top: 0;right: -23px;}
.question .inner .select_btn ul li label span{display: none;}
#next_page button{font-size: 20px;padding: 56px 0 22px;}
#next_page button::before{content: "";width: 100%;height: 33px;background-color: #fff;position: absolute;top: 0;left: 0;}
}


/*----------answer----------*/
.question .inner .answer{padding-top: 24px;background-image: url("images/answer_bg@2x.png");-webkit-background-size: 220px auto;background-size: 220px auto;background-position: 155px 60px;background-repeat: no-repeat;}
.question .inner .answer div .box{max-width: 680px;margin: 0 auto;display: block;}
.question .inner .answer p{font-size: 22px;font-weight: 700;line-height: 40px;padding: 10px 0 24px;position: relative;}
.question .inner .answer#wrong p{margin-top: 40px;padding: 28px 0 13px;}
.question .inner .answer#wrong p::before{content: "";width: 100%;height: 15px;background-color: #efefef;position: absolute;top: 0;left: 0;}
.question .inner .explain{padding: 30px 0 25px;background-color: #efefef;}
.question .inner .explain h2,
.question .inner .explain p{max-width: 732px;font-weight: 700;color: #004098;margin: 0 auto;}
.question .inner .explain h2 .ruby[data-ruby]::before,
.question .inner .explain p .ruby[data-ruby]::before{top: -1.25em;}
.question .inner .explain h2{font-size: 30px;line-height: 1em;padding: 0 17px;}
.question .inner .explain p{font-size: 19px;line-height: 40px;text-align: center;padding: 16px 17px;font-feature-settings: normal;}
.question .inner .explain p>span:not(.ruby) {font-size: 19px;line-height: 40px;display: inline-block;text-align: left;}
.question .inner .explain p>span:not(.ruby) br{display: inline;}
.question .inner .explain .explain_img{margin: 0 auto;display: inline-block;position: relative;}
.question .inner #next_page {margin-top: 130px;}
.question .inner #next_page.ans{margin-top: 60px;}

@media only screen and (max-width: 640px){
.question .inner .answer{margin: 0 auto;padding-top: 10px;background-image: url("images/answer_bg_sp@2x.png");-webkit-background-size: 320px auto;background-size: 320px auto;background-position: center 45px;}
.question .inner .answer div .box{display: inline-block;}
.question .inner .answer p{font-size: 19.8px;padding: 0px 0 20px;}
.question .inner .answer#wrong p{margin-top: 15px;}
.question .inner .answer p .ruby[data-ruby]::before{font-size: 10.8px;}
.question .inner .explain h2{font-size: 24px;}
.question .inner .explain p{font-size: 15.2px;line-height: 32px;font-feature-settings: "palt";}
.question .inner .explain p .ruby[data-ruby]::before{font-size: 10px;}
.question .inner #next_page{margin-top: 56px;}
}

.question .inner .explain .explain_img.q_2::before{content: "";width: 122px;height: 216px;background-image: url("images/a2/explain_img_a2_2.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;z-index: 1;position: absolute;left: -42px;bottom: -55px;z-index: 1;}

@media only screen and (max-width: 640px){
.question .inner .explain .explain_img.q_2::before{width: 68px;height: 120px;background-image: url("images/a2/explain_img_a2_2_sp.png");left: inherit;bottom: inherit;right: 16px;top: -10px;}

}


/*----------result----------*/
.question .inner .result{padding-top: 24px;-webkit-background-size: 100% auto;background-size: 100% auto;background-position: center bottom 136px;position: relative;}
.question .inner #succeed.result{background-image: url("images/succeed_bg.jpg");}
.question .inner #failure.result{background-image: url("images/failure_bg.jpg");position: relative;}
.question .inner #failure.result::after{content: "";width: 46px;height: 90px;background-image: url("images/failure_bg02.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;z-index: 1;position: absolute;right: 220px;bottom: 100px;}
.question .inner .result h1{width: 728px;height: 110px;margin: 0 auto;background-image: url("images/result_ttl_bg.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;background-position: center;position: relative;}
.question .inner .result h1 span{font-size: 40px;font-weight: 700;color: #1d2088;font-feature-settings: normal;transform: translate(-85px,-50%);position: absolute;top: 50%;right: 50%;}
.question .inner .result_lst{width: 634px;margin: 0 auto;}
.question .inner .result_lst>div{padding-left: 24px;display: flex;justify-content: space-between;position: relative;}
.question .inner .result_lst>div dt,
.question .inner .result_lst>div dd{height: 57px;background-color: #fff;border: solid 2.4px #22ac38;border-radius: 16px;margin-bottom: -2.4px;box-sizing: border-box;display: flex;align-items: center;}
.question .inner .result_lst>div dt{width: 536px;padding-left: 46px;}
.question .inner .result_lst>div dt .q_nmb{width: 48px;height: 48px;transform: translateY(-50%);top: 50%;left: 0;}
.question .inner .result_lst>div dt .q_txt{font-size: 18px;font-weight: 700;}
.question .inner .result_lst>div dd{width: 66px;justify-content: center;}
.question .inner .result h2{font-size: 25px;font-weight: 700;text-align: center;color: #1d2088;letter-spacing: 0.1em;padding: 32px 0 10px;}
.question .inner .result .correct_answers{width: 413px;height: 82px;background-image: url("images/correct_answers.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;margin: 0 auto;position: relative;}
.question .inner #failure.result .correct_answers{margin-bottom: 126px;}
.question .inner #failure.result .correct_answers::before,
.question .inner #failure.result .correct_answers::after{content: "";width: 82px;height: 82px;-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;z-index: 1;position: absolute;bottom: -173px;}
.question .inner #failure.result .correct_answers::before{background-image: url("images/cng_imag01.png");left: 80px;}
.question .inner #failure.result .correct_answers::after{background-image: url("images/cng_imag02.png");right: 82px;}
.question .inner .result .correct_answers .ca_txt{font-size: 0;opacity: 0}
.question .inner .result .correct_answers .correct_nmb{font-size: 60px;line-height: 1em;color: #fff;text-align: center;font-feature-settings: "palt";display: inline-block;position: absolute;top: 50%;left: 68%;transform: translate(-50%, -50%);}
.question .inner .result .congrats{font-size: 24px;font-weight: 700;color: #1d2088;line-height: 45px;padding: 16px 0 20px;position: relative;}
.question .inner .result .congrats::after{content: "";width: 140px;height: 86px;background-image: url("images/succeed_img02.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;z-index: 1;position: absolute;right: 50px;bottom: -38px;}
.question .inner #failure.result .congrats{display: none;}
.question .inner .result .congrats span.cng_img{width: 368px;height: 277px;z-index: 1;overflow: hidden;display: block;position: absolute;left: 0;bottom: -51px;}
.question .inner #failure.result .congrats span.cng_img{display: none;}
.question .inner .result .congrats span.cng_img>span{display: block;position: relative;}
.question .inner .result .congrats span.cng_img>span::before,
.question .inner .result .congrats span.cng_img>span::after{content: "";width: 63.2117%;height: 0;-webkit-background-size: contain;background-size: contain;padding-top: 63.2117%;position: absolute;bottom: -28%;z-index: -1;}
.question .inner .result .congrats span.cng_img>span::before{background-image: url("images/succeed_img_l.png");left: 0;}
.question .inner .result .congrats span.cng_img>span::after{background-image: url("images/succeed_img_r.png");right: 0;}
.question .inner .result #next_page{margin-top: 0;padding-top: 51px;position: relative;}
.question .inner .result #next_page::before{content: "";width: 100%;height: 51px;background-color: #fff;position: absolute;top: 0;left: 0;}
.question .inner .result #next_page::after{top: 0;}
.question .inner .result .dl_notes{width: 100%;font-size: 13px;font-weight: 700;line-height: 1em;color: #1d2088;text-align: center;font-feature-settings: normal;z-index: 1;display: block;position: absolute;top: 13px;}
.question .inner #failure.result .dl_notes{display: none;}
.question .inner #failure.result #next_page #next{font-feature-settings: normal;}

@media only screen and (max-width: 640px){
.question .inner #succeed.result{background: url("images/succeed_bg_sp.jpg"), #A0D9F6;-webkit-background-size: contain, auto;background-size: contain, auto;background-repeat: no-repeat;background-position: center bottom;}
.question .inner #failure.result::after{content: none;}
.question .inner #failure.result{background: url("images/failure_bg_sp.jpg"), #A0D9F6;-webkit-background-size: contain, auto;background-size: contain, auto;background-repeat: no-repeat;background-position: center bottom 116px;}
.question .inner .result h1{width: auto;background-image: url(images/result_ttl_bg_sp.png);margin-top: 22px;}
.question .inner .result h1 span{font-size: 25px;line-height: 1em;white-space: nowrap;transform: translate(50%,0);top: -22px;}
.question .inner .result_lst{width: auto;margin: 0 14px;}
.question .inner .result_lst>div{margin-bottom: 16px;padding-left: 0;display: block;}
.question .inner .result_lst>div dt,
.question .inner .result_lst>div dd{height: 76px;}
.question .inner .result_lst>div dt{width: auto;padding: 0 50px 0 46px;flex-direction: column;justify-content: center;align-items: flex-start;}
.question .inner .result_lst>div dt .q_nmb{width: 49px;height: 49px;font-size: 17.2px;top: -12px;left: -10px;}
.question .inner .result_lst>div dt .q_txt{font-size: 16.5px;line-height: 27.4px;text-align: left;}
.question .inner .result_lst>div dd{width: 71px;position: absolute;top: 0;right: 0;}
.question .inner .result_lst>div.q01 dt .q_txt,
.question .inner .result_lst>div.q02 dt .q_txt,
.question .inner .result_lst>div.q04 dt .q_txt,
.question .inner .result_lst>div.q05 dt .q_txt,
.question .inner .result_lst>div.q06 dt .q_txt,
.question .inner .result_lst>div.q07 dt .q_txt,
.question .inner .result_lst>div.q09 dt .q_txt,
.question .inner .result_lst>div.q10 dt .q_txt{transform: scale(0.85, 1);transform-origin: left;}
.question .inner .result_lst>div.q08 dt .q_txt{transform: scale(0.8, 1);transform-origin: left;}
.question .inner .result_lst>div dt .q_txt.ruby[data-ruby]::before{font-size: 10px;top: -1.1em;}
.question .inner .result h2{font-size: 18px;line-height: 1em;letter-spacing: normal;padding: 0 0 12px;}
.question .inner .result .correct_answers{width: 215px;height: 124px;background-image: url("images/correct_answers_sp.png");}
.question .inner #failure.result .correct_answers{margin-bottom: 240px;}
.question .inner #failure.result .correct_answers::before,
.question .inner #failure.result .correct_answers::after{bottom: -254px;}
.question .inner #failure.result .correct_answers::before{left: 0;}
.question .inner #failure.result .correct_answers::after{right: 10px;}
.question .inner .result .correct_answers .correct_nmb{top: 55px;left: 50%;transform: translate(-50%, 0);}
.question .inner .result .congrats{font-size: 22px;line-height: 40px;padding: 10px 0 150px;}
.question .inner .result .congrats::before,
.question .inner .result .congrats::after{content: "";width: 82px;height: 82px;-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;z-index: 1;position: absolute;bottom: -16px;}
.question .inner .result .congrats::before{background-image: url("images/cng_imag01.png");left: 0;}
.question .inner .result .congrats::after{background-image: url("images/cng_imag02.png");right: -8px;}
.question .inner .result .congrats span.cng_img{width: 208px;height: 134px;left: 50%;transform: translateX(-50%);bottom: 0;}
.question .inner .result .dl_notes{font-size: 12px;top: 20px;}
.question .inner .result #next_page::after{top: 16px;}
}