@charset "utf-8";

#Background .background-kanji-test-bg-l{ min-height: inherit; width: calc(1961 /3000*100em); height: calc(1414/3000*100em); min-height: inherit; background: url("../images/tx-l.webp") no-repeat center top; background-size: contain; position: fixed; top:11em; left:-43em;  }
#Background .background-kanji-test-bg-r{ min-height: inherit; width: calc(2734 /3000*100em); height: calc(1971/3000*100em); min-height: inherit; background: url("../images/tx-r.webp") no-repeat center top; background-size: contain; position: fixed; top:15em; right:-65em;  }
#Background .background-kanji-test-l{ min-height: inherit; width: calc(1341 /3000*100em); height: calc(2892/3000*100em); min-height: inherit; background: url("../images/bg-l.webp") no-repeat center top; background-size: contain; position: fixed; top:-10em; left:-23em;  }
#Background .background-kanji-test-r{ min-height: inherit; width: calc(1363 /3000*100em); height: calc(2009/3000*100em); min-height: inherit; background: url("../images/bg-r.webp") no-repeat center top; background-size: contain; position: fixed; top:22em; right:-5em;  }


/* .cont-global-footer{ background-color: rgba(230, 0, 0, 0.4);} */

/* kanji-test */
.kanji-test-title{ padding: 3em 0; background-color: rgba(230, 0, 0, 0.9); }
.kanji-test-title > p{ width: calc(1122/3000*100em); margin: 0 auto; }

.cont-sub-content.cont-sub-kanji-test{ min-height: calc(100vh - 30em); }
.cont-sub-content.cont-sub-kanji-test > .inner{ width: calc(2000/3000*100%); padding: 3em 0 2em 0; margin: 0 auto;}
.cont-sub-kanji-test{ text-align: center; }

.test-grp{ border:#e60000 solid 1px; padding: 2em; margin-bottom: 3em; background-color: rgba(0, 0, 0, 0.4); position: relative; }

.kanji-test-q-ttl{ display: inline-block; background-color: #e60000; padding: .2em;}
.kanji-test-q-ttl > span{ display: inline-block; font-size: 2em; font-weight: bold; border:#000 solid 1px; padding: .3em .5em; line-height: 1; letter-spacing: .1em; filter: drop-shadow(0 0 .5em #000); }

.kanji-test-q-txt{ padding: 3em 0; }
.kanji-test-q-txt > p{ margin: 0; font-size: 2.4em; font-weight: bold; letter-spacing: .1em; }
.kanji-test-q-txt > p .qst{ color: #e60000; position: relative; }
.kanji-test-q-txt > p .qst::before { content: ""; position: absolute; width: 1.5em; height: .5em; border:#e60000 solid 1px; top: -.4em; left: 0; right: 0; margin:0 auto;  }
.kanji-test-q-txt > p .qst.w1::before { width: 1.0em; }
.kanji-test-q-txt > p .qstk{ display: inline-block;  }
.kanji-test-q-txt > p .qstk::after { content: ""; position: absolute; width: 90%; height: .9em; border:#e60000 solid 1px; top: .3em; left: 0; right: 0; margin:0 auto;  }
.kanji-test-q-txt > p .qstk::before{ color: #e60000; }

.kanji-test-q-img{ width: 90%; margin: 0 auto; }
.kanji-test-q-img.s{ width: 70%; margin: 0 auto; }

.kanji-test-a-ttl{ display: inline-block; background-color: #000; padding: .2em; margin-bottom:2em;}
.kanji-test-a-ttl > span{ display: inline-block; font-size: 1.6em; font-weight: bold; border:#fff solid 1px; padding: .3em .5em; line-height: 1; letter-spacing: .1em; filter: drop-shadow(0 0 .5em #000); }

.kanji-test-a-radio{  }
.kanji-test-a-radio .radio{ margin-bottom:.5em; }
.kanji-test-a-radio .radio-label{ font-size: 1.6em; margin-left: .5em; }

.kanji-test-a-result{  }
.kanji-test-a-result .result-label{ font-size: 1.6em; margin-left: .5em; }

.kanji-test-ans-btn{ width: calc(678/3000*100em); height: calc(120/3000*100em); margin: 0 auto; position: relative;}
.kanji-test-ans-btn a{ display: block; width: 100%; min-height: 100%; background: url("../images/ans-btn.webp") no-repeat center center; background-size: contain; }
.kanji-test-ans-btn a:hover{ transform: scale(1.1); }
.kanji-test-ans-btn.dis a{ background-image: url("../images/ans-btn-off.webp") ; pointer-events: none; }

.test-frame{ display: flex; justify-content: center; flex-wrap: wrap; }
.test-frame .frame-left{ width: 43%; padding: 1em; }
.test-frame .frame-right{ width: 57%; text-align: left; padding: 1em; }

.icon-qst{ width: 5em; text-align: center; position: absolute; right:1.25em; top:3.5em; line-height: 0; }
.icon-qst p.correct{ font-size: 5em; font-weight: 600; color:#e60000; }
.icon-qst p.fault{ font-size: 6.5em; font-weight: 600; }

.result-grp{ display: none; }

.kanji-test-r-txt{ padding: 3em 0; }
.kanji-test-r-txt > p{ margin: 0; font-size: 1.8em; font-weight: bold; letter-spacing: .1em; }
.kanji-test-r-img p{ margin: 0; padding: 1em; background-color: rgba(230, 0, 0, 0.9); margin-bottom:3em; }
.kanji-test-r-btn{ width: calc(678/3000*100em); margin: 0 auto; }

.rslt .test-grp,
.rslt .kanji-test-ans-btn{ display: none; }
.rslt .result-grp{ display: inherit; }

/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Custom 1920 ----------------------------------------------------------------------------- */
@media (max-width: 1919px) {
}
/* Custom 1400 ----------------------------------------------------------------------------- */
@media (max-width: 1399px) {

}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {

}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {
}
/* lt768 ----------------------------------------------------------------------------- */
@media (min-width:768px) {
}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ }


#Background .background-kanji-test-bg-l{ width: calc(1961 /3000*100em*0.5); height: calc(1414/3000*100em*0.5); top:1em; left:-23em;  }
#Background .background-kanji-test-bg-r{ width: calc(2734 /3000*100em*0.5); height: calc(1971/3000*100em*0.5); top:5em; right:-35em;  }
#Background .background-kanji-test-l{ width: calc(1341 /3000*100em*0.5); height: calc(2892/3000*100em*0.5); top:-7em; left:-10em;  }
#Background .background-kanji-test-r{ width: calc(1363 /3000*100em*0.5); height: calc(2009/3000*100em*0.5); top:10em; right:-3em;  }


/* .cont-global-footer{ background-color: rgba(230, 0, 0, 0.4);} */

/* kanji-test */
.kanji-test-title{ padding: 1.5em 0; }
.kanji-test-title > p{ width: calc(1122/3000*100em*0.5); }

.cont-sub-content.cont-sub-kanji-test{ min-height: calc(100vh - 15em); }
.cont-sub-content.cont-sub-kanji-test > .inner{ width: 90%; padding: 3em 0 2em 0; }

.test-grp{ padding: 1.5em; }

.kanji-test-q-ttl > span{ font-size: 1.5em; }

.kanji-test-q-txt{ padding: 2em 0 1em 0; }
.kanji-test-q-txt > p{ font-size: 1.8em; line-height: 1.8; }
.kanji-test-q-txt > p .qst::before {top: -.3em; }
.kanji-test-q-txt > p .qstk::after { height: .9em; top: .5em;  }
.kanji-test-q-txt > p > span[data-ruby]::before { top: -1.4em; font-size: .9em; }

.kanji-test-q-img{ width: 98%; }
.kanji-test-q-img.s{ width: 70%; }

.kanji-test-a-ttl{ margin-bottom:1em;}
.kanji-test-a-ttl > span{ font-size: 1.4em; }

.kanji-test-a-radio{ text-align: left; }
.kanji-test-a-radio .radio{ margin-bottom:.5em; }
.kanji-test-a-radio .radio-label{ font-size: 1.4em; margin-left: .5em; }

.kanji-test-ans-btn{ width: calc(678/3000*100em*0.75); height: calc(120/3000*100em*0.75); }

.test-frame{ display: flex; justify-content: center; flex-wrap: wrap; }
.test-frame .frame-left{ width: 100%; padding: 1em; }
.test-frame .frame-right{ width: 100%; text-align: center; padding: 1em 3em; }



.kanji-test-r-txt{ padding: 3em 0; }
.kanji-test-r-txt > p{ font-size: 1.4em; }
.kanji-test-r-img p{ padding: .5em; margin-bottom:3em; }
.kanji-test-r-btn{ width: calc(678/3000*100em*0.75); }




/* SM ----------------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 767px) {

}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {

}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {

}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {

}