.shoseki_base {
    background-color: #fff;
    height: 50svh;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.shoseki_shoei{
    height: auto;
    position: relative;
}

.shoseki_shoei_landscape {
    scale:0.6;
}

.shoseki_shoei_portrait {
    scale:1;
}

@media screen and (max-height: 600px) {
    .shoseki_base {
        height: 43svh;
    }
    .shoseki_shoei_portrait {
        scale:0.75;
    }
}

.shoseki_shoei_area {
    width: 100%;
    position: relative;
    min-height: 200px;
    display: flex;
    justify-content: center;
}

.quiz_menu_text {
    width: 50%;
    margin-left: 14.5px;
    color: rgb(4, 52, 145);
}

.menu_seikairitsu {
    width: 50%;
    text-align: right;
    margin-right: 18px; 
    color: rgb(4,52,145);
}

.menu_seikairitsu_arrow {
    background: url("../images/ico_arro.svg");
    background-repeat: no-repeat;
    background-position: right;
}

.seikairitsu_num{
    font-Size: 30px;
    margin-right: 5px;
}

.seikairitsu_per{
    font-Size: 15px;
}

.material_icon_body {
    display: flex;
    margin-left: 22.5px;
    width: 20px;
}
.quiz_body {
    display: flex;
    background-color: rgb(233, 248, 255);
    border: solid 1px #E1E1E1;
    border-radius: 8px;
    width: 84.6dvw;
    max-width: 867px;
    height: 80px;
    align-items: center;
    font-size: 17px;
    margin: 5px auto;
    box-sizing: border-box;
    cursor: pointer;
}
.quiz_list{
    display: flex;
    flex-direction: column;
    height:calc( 100svh - 64px );
    font-size: 14px;
    color: rgb(4,52,145);
    min-height: 150px;
    padding-top: 15px;
    overflow-y: scroll!important;
}

.quiz_start_btn{
    background-color: rgb(4,52,145);
    width: 100%;
    height: 52px;
    align-items: center;
    font-size: 17px;
    color: #fff;
    border: 1px solid #043491;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 32px;
}

.quiz_start_btn_area{
    width: 84.6dvw;
    max-width: 867px;
    margin: auto;
    margin-bottom: 40px;
}

@media screen and (max-height: 430px) {
    .quiz_body {
        height: 64px;
        min-height: 64px;
    }
    .quiz_start_btn{
        height: 44px;
        min-height: 44px;
    }
}

.book_list {
    height:calc( 100svh - 115px );
    overflow-y: scroll!important;
    font-size: 20px;
    padding: 14px;
    box-sizing: border-box;
    position: relative;
}

.col2_setting {
    display: block;
    justify-content: space-between;
    width: 100%;
    max-width: 867px;
    margin: 0 auto;
}

.book_list_contents {
    display: flex;
    height: 140px;
    font-size: 10pt;
    border-radius: 8px;
    background-color: #fff;
    min-width: 300px;
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

.book_list_contents_landscape{
    max-width: 428px;
    width: calc((100% - 12px) / 2);
}

@media screen and (min-width:768px) {
    .book_list {
        font-size: 20px;
        padding: 30px;
    }
}

.book_name{
	font-family: "ヒラギノ角ゴ Pro W6", "Noto Sans JP";
    font-weight:bold;
    font-size: 15px;
    margin-left:16px;
    line-height: 18px;
}

.book_word_count{
    font-size: 14px;
    margin-left: 16px;
    margin-top: 5px;
}

.book_list_img {
    margin-left:15px;
    margin-top:15px;
    min-width:70px;
}

.book_list_img img {
    position:relative;
    height:106px;
    width:75px;
}

.book_list_info {
    line-height:2em;
    margin-top:15px;
    margin-left:0px;
    margin-right:15px;
}

#wrap_mask {
    display: none;
    position: absolute;
    z-index: 901;
    background-color: rgba(0,0,0,128);
    width: 100svw;
    height: 100svh;
    background-color: #000;
    opacity: 0.5;
}
/* ボタン画像のルール */
/*問題形式毎のフォントサイズ*/
/*addClass removeClassで制御する*/
.sound_mondai_text {
    font-size: 36px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2em;
    padding: 0 5px;
}

.sound_sentence {
    font-size: 18px;
    line-height: 1.2em;
    overflow-wrap: break-word;
    word-break: break-word;
    width: 90%;
    margin: 0 auto;
    max-width: 848px;
}

.einichi_mondai_text {
    font-size:40px;
    text-align: center;
    padding-top: 30px;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.1em;
}

.kusho_mondai_text {
    font-size: 16px;
    text-align: left;
    line-height: 1.2em;
    padding-top: 30px;
    padding-bottom: 30px;
}

.nichiei_mondai_text {
    font-size: 23px;
    text-align: center;
    padding-top: 40px;
    line-height: 1.1em;
}

.mondai_text{
    /* position: relative; */
    /* margin-bottom: -10px; */
    /* top: 0em; */
    width: 100%;
    z-index: 20;
}

.mondai_text_sub {
    display: none;
    width: 100%;
    font-size: 25px;
    line-height: 1.2em;
    padding-bottom: 30px;
    z-index: 20;
}

.mondai_text_add {
    position: relative;
    font-size:20px;
    margin-top:0px;
    text-align: left; 
    height: 2em;
}
@media screen and (max-height:665px){
    .sound_mondai_text {
        font-size: 30px;
    }
}
@media screen and (min-width:768px){
    .sound_mondai_text {
        font-size: 44px;
    }
    .sound_sentence {
        font-size: 22px;
    }
    .einichi_mondai_text {
        font-size:44px;
    }
    .kusho_mondai_text {
        font-size: 16px;
    }
    .nichiei_mondai_text {
        font-size: 27px;
    }
    .mondai_text_sub {
        display: none;
        font-size: 24px;
        line-height: 1.2em;
    }
    .mondai_text_add {
        position: relative;
        font-size:20px;
        margin-top:0px;
        text-align: left; 
        height: 2em;
    }
}
@media screen and (max-height:485px){
    .sound_mondai_text {
        font-size: 30px;
    }
    .sound_sentence {
        font-size: 18px;
    }
}

.page_area {
    background-color: rgb(233, 248, 255);
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 16pt;
    justify-content: center;
    color: rgb(4, 52, 145);
}

#page{
    font-size: 16px;
}

#total_page{
    margin-left: 5px;
    font-size: 16px;
}

input[type="range"] {
    display: block;
    -webkit-appearance: none!important;
    appearance: none!important;
    outline: none;
    background: transparent; /* 背景を透明にしてJavaScriptで制御 */
    cursor: pointer;
    width: 100%;
}

/* Thumb: Chrome, Safari, Opera, Edge */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none!important;
    appearance: none!important;
    height: 20px;
    width: 20px;
    margin-top: 0px; /* Thumb の位置を調整 */
    background-color: #043491;
    border-radius: 50%;
    border: 4px solid #F2F3F5;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    background-color: #043491;
    border-radius: 50%;
    border: 4px solid #F2F3F5;
}

#ui_slider2 {
    width:calc( 100svw / 3 *2);
    max-width: 280px;
    accent-color: rgb(4,52,145);
}

#ui_slider3{
    width:calc( 100svw / 3 *2);
    max-width: 280px;
    accent-color: rgb(4,52,145);
}

.spacer{
    flex: 1;
    -webkit-tap-highlight-color:transparent;
}

#prev_step.hide,
#next_step.hide {
  opacity: 0.01;
  pointer-events: auto; /* ← 重要！ none にしない！ */
  touch-action: manipulation;
}

#prev_step img,  #next_step img{
    width: 32px;
    height: 33px;
    cursor: pointer;
}

#play_stop img, #play_stop2 img{
    width: 57px;
    height: 57px;
    cursor: pointer;
} 

#prev_skip img, #next_skip img{
    width: 28px;
    height: 28px;
    cursor: pointer;
}

#progress3 {
    width: 100%;
    position: relative;
    top: -15px;
    height: 6px;
    background-color: #D5DEE3;
    border-radius: 15px;
}

progress::-webkit-progress-bar {
    background-color: #D5DEE3;
    border-radius: 15px;
}

progress::-webkit-progress-value {
    background-color: #043491;
    border-radius: 15px;
}

progress::-moz-progress-bar {
    background-color: #043491;
    border-radius: 15px;
}

progress::-ms-fill {
    background-color: #043491;
    border-radius: 15px;
}

.progress_number{
    display: flex;
    height: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
    margin: 0 auto;
}

.sound_btns {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    max-width: 280px;
    margin: 0 auto;
    /* margin-top: 20px;
    margin-bottom: 30px; */
}

.playing {
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 70px;
    height: 70px;
    margin:auto;
    border: none;
}

.play_stop_default{
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 70px;
    height: 70px;
    margin:auto;
    border: none;
}

#chapter_list{
    height:calc( 100dvh - 124px);
    /* overflow-y: scroll!important; */
    font-size: 20px;
    width: 100%;
    max-width: 867px;
}

#chapter_list > div{
    display:flex;
    height:3em;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.chapter_list_area{
    justify-content: center;
    display: flex;
    overflow-y: scroll !important;
}

#tango_btn {
    display: block;
    margin:auto;
}

#tango_btn::before{
    content: "";
    display: inline-block;  
    background-image: url('../images/ico_tango_off.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 42px;
    height: 24px;
    margin-right:5px;
    position:relative;
    margin-top: -12px;
    top: 8px;
}

.tango_btn_active::before {
    background-image: url('../images/ico_tango_active.png')!important;
}

#chobun_btn {
    display: block;
    margin:auto;
}

#chobun_btn::before{
    content: "";
    display: inline-block;  
    background-image: url('../images/ico_choubun_off.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 42px;
    height: 24px;
    margin-right:5px;
    position:relative;
    margin-top: -12px;
    top: 8px;
}

.chobun_btn_active::before {
    background-image: url('../images/ico_choubun_active.png')!important;
}


#quiz_btn {
    display: block;
    margin:auto;
}

#quiz_btn::before{
    content: "";
    display: inline-block;  
    background-image: url('../images/ico_quiz_off.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    margin-right:5px;
    position:relative;
    margin-top: -12px;
    top: 8px;
}

.quiz_btn_active::before {
    background-image: url('../images/ico_quiz_active.png')!important;
}

.bottom_btn_area{
    display: flex;
    background-color: #D9E0EE;
    width: 100%;
    height: 60px;
    justify-content: center;
}

.disabled {
    pointer-events: none;
}

.bottom_btn {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 65%;
    border-radius: 4px;
    color: #043491;
    font-size: 14px;
    cursor: pointer;
    background-color: #fff;
    margin: auto 11px;
}

.bottom_sound_btn {
    display: flex;
    justify-content: center;
    width: 92%;
    max-width: 867px;
    margin: 0 auto;
    margin-top: auto;
    margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
    #chapter_list {
        height: calc(100dvh - 144px);
    }
    .bottom_btn_area {
        height: 80px;
    }
    .bottom_btn {
        font-size: 16px;
    }
    #tango_btn::before, #chobun_btn::before {
        width: 47.25px;
        height: 27px;
        top: 7px;
        margin-right: 7px;
    }
    #quiz_btn::before{
        width: 27px;
        height: 27px;
        top: 7px;
        margin-right: 7px;
    }

}

@media screen and (max-height: 430px) {
    #chapter_list {
        height: calc(100dvh - 124px);
        /* overflow-y: scroll !important; */
        font-size: 20px;
        width: 100%;
        max-width: 867px;
    }
    .bottom_btn_area {
        height: 60px;
    }
    .bottom_btn {
        font-size: 14px;
    }
    #tango_btn::before, #chobun_btn::before {
        width: 42px;
        height: 24px;
        top: 8px;
        margin-right: 5px;
    }
    #quiz_btn::before{
        width: 24px;
        height: 24px;
        margin-right:5px;
        top: 8px;
    }
}


.sound_tool_area{
    display: flex;
    flex-direction: column;
    min-height: 140px;
    height: 50%;
}

.sound_sentence_area{
    display: flex;
    align-items: baseline;
    height: 4em;/*これを指定しないと、例文の長さによってボタンが上下する*/
}

#wrap_topscreen{
    display: none;
    height: 100dvh;
    justify-content: center;
    align-items: center;
}

#wrap_topscreen_inner{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

#wrap_topscreen_btn {
    display: flex;
    justify-content: center;
    max-width: 400px;
    gap: 20px;
    width: 90%;
    cursor: pointer;
}

#wrap_topscreen_upper_message {
    width: 94svw;
    max-width: 510px;
    font-size: 14px;
    justify-content: center;
    text-align: start;
    line-height: 1.2em;
    margin-bottom: 2px;
}
#wrap_topscreen_lower_message {
    width: 94svw;
    max-width: 510px;
    font-size: 14px;
    justify-content: center;
    text-align: start;
    line-height: 1.2em;
}

@media screen and (max-width: 450px) {
    #wrap_topscreen_upper_message {
        font-size: 13px;
    }
    #wrap_topscreen_lower_message {
        font-size: 13px;
    }
}

#wrap_topscreen_upper_message a,
#wrap_topscreen_lower_message a {
  text-decoration: underline !important;
}

.login_btn {
    width: 90%;
    height: auto;
    max-width: 334px;
}

.login_btn img{
    width: 100%;
}

.chapter_text {
    display: flex;
    /* position: absolute; */
    /* height: 3em; */
    line-height: 1.5em;
    font-size: 15px;
    cursor: pointer;
}

.chapter_num{
    display: flex;
    width: 35px;
    align-items: center;
}

.chapter_title{
    display: flex;
    width: 100%;
    align-items: center;
}


.chapter_label {
    /*height: 3em;*/
    position: relative;
}

.state_lesson {
    border: 1px solid #043491;
    color: #043491;
    background-color: #fff;
    width: 68px;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
}

.div_btn{
    position: relative;
    height: 45px;
    width: 31%;
    max-width: 867px;
    border: 1px solid #043491;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    align-items: center;
    color: #043491;
    font-size: 14px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 15px;
    box-sizing: border-box;
    cursor: pointer;
}

.active_btn{
    background-color:#043491;
    color: #fff;
}

.inactive_btn {
    background-color: #989898;
    color: #fff;
    
}

.result_score_base {
    display: flex;
    justify-content: center;
    margin-top: 34px;
    font-size: 24px;
}

.result_score_area {
    display: block;
    justify-content: center;
}

.result_score {
    display: flex;
    position:relative;
    /*left: 30%;
    width: 60%;*/
    margin-top: 5px;
    color:rgb(4,52,145);
    align-items:flex-end;
    justify-content: space-between;
    width: 200px;
    margin: 0 auto;
}

.result_score_title {
    text-align: center;
    margin-top:0px;
    font-size: 20px;
    margin-right: auto;
}

.result_trophy_bias {
    width: 100%;
    position: relative;
    max-width:250px;
    margin-top: -32px;
    /*margin-left: calc(50% - 120px)*/
}

.result_trophy_area {
    display: flex;
    justify-content: center;
}

.result_bg{
    background-image: url("../images/result_back_img.png");
    background-repeat: no-repeat;
    background-position: top;
    overflow-y: scroll !important;
    height: calc(100dvh - 64px);
    display: flex;
    flex-direction: column;
}

.result_btn_area{
    margin-top: auto;
    margin-bottom: 12px;
}

.result_btn{
    position: relative;
    height: 45px;
    width: 95%;
    max-width: 867px;
    border: 1px solid #043491;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    align-items: center;
    color: #043491;
    font-size: 16px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.first_btn {
   margin-top:25px;

}

.rev_color {
    background-color: rgb(4,52,145);
    color : #fff
}

.result_base_area {
    background-color: #fff;
    box-shadow: 0px 2px 6px #00000038;
    border-radius: 15px;
    /* height: calc(100svh - 300px); */
    height: 335px;
    min-height: 300px;
    width: 80%;
    margin: 0 auto;
    margin-top: 68px;
    max-width: 360px;
}

.result_score_unit {
    margin-left:5px;
    font-size: 24px;
}

.result_score_unit2 {
    margin-left: 8px;
    font-size: 16px;
}

.seikai_count {
    font-size: 40px;
    margin-bottom: -5px;
}

#seitouritsu{
    font-size: 60px;
    margin-bottom: -10px;
}

#seikai_suu{
    margin-right: 4px;
}

.total{
    margin-left: 4px;
    margin-bottom: -3px;
}

@media screen and (max-height: 430px) {
    .result_score {
        width: 165px;
    }
    .result_score_title {
        font-size: 17px;
    }
    .result_score_base {
        margin-top: 14px;
        font-size: 21px;
    }
    .result_score_area {
        display: flex;
        width: 86%;
        margin: 0 auto;
        justify-content: space-between;
        max-width: 450px;
    }
    .result_trophy_bias{
        width: 170px;
        margin-top: -22px;
    }
    .result_base_area {
        min-height: 168px;
        max-width: 420px;
        margin-top: 37.5px;
    }
    .result_score_unit {
        font-size: 21px;
        margin-bottom: -1px;
    }
    .result_score_unit2 {
        font-size: 14px;
    }
    .seikai_count {
        font-size: 33px;
        margin-bottom: -5px;
    }
    #seitouritsu{
        font-size: 52px;
        margin-bottom: -7px;
    }
    .total {
        margin-bottom: -2px;
    }
    .result_btn{
        max-width: 487px;
    }
}

.label_list{
    display:flex;
    flex-wrap:wrap;
    margin-left:16px;
}

.target_test_label {
    background-color: #D9E0EE;
    font-size: 11px;
    color: #043491;
    height: 22px;
    line-height: 22px;
    margin-right: 6px;
    margin-top: 5px;
    width: 74px;
    text-align: center;
}


.top_header_title {
    text-align: left;
    margin-left: 5%;
    font-size: 26px;
    font-family: serif;
    margin-top: 5px;
}


.learning_label {
    position: absolute;
    font-size: 10pt;
    background-color: rgb(4,52,145);
    z-index:10;
    color: #fff;
    line-height: 1.5em;
    border-radius: 0.5em;
    width: 75px;
    height: 75px;
    text-align: center;
    clip-path: polygon(0 0, 75% 0, 0 75%);

}
.learning_text {
    transform:rotate(-45deg);
    font-size: 10px;
    text-align: left;
    /* font-weight: bold; */
    margin-top:-5px;
    /* margin-left:-5px; */

}

.range_text{
    font-size: 13px;
    color: #8DA2BB;
}

.shape {
    width: 200%;
    height: 250px;
    background-image: conic-gradient(rgb(0, 255, 0) 0deg, white 0deg);
    clip-path: circle();
    display: grid;
    place-items: center;
  }
  
  .shape::before {
    content: "";
    width: 200px;
    height: 200px;
    background-color: white;
    clip-path: circle();
  }
  
  .percent {
    position: relative;
    left: +75px;
    top : -155px;
    font-size: 40px;
  }

.circle_canvas {
    width: 100%;
    vertical-align: middle;
    margin-right: -50%;
}

.contact_button{
    display: block;
    background: #aacf53; /* 緑色 */
    color: #fff;
    border: solid 4px #aacf53; /* 緑色 */
    font-size: 1.4em;
    border-radius: 5px;
  }
  .contact_button:hover{
    background: #82ae46; /* 少し濃い緑色 */
    border: solid 4px #82ae46; /* 少し濃い緑色 */
  }

  .contact_button:active{
    background: #69821b; /* 濃い緑色 */
  }


div#sound_sentence u {
	/*color :red;*/
    color :#7CBC1B;
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

.kusho_mondai_text u { /*穴埋めは青*/
    color :#3E91FE;
    text-decoration: none;
}


.nichei_mondai_text u,
.einichi_mondai_text u {
    color :#008800;
    text-decoration: none;
}

/* 複数の ID=wrapがあったため、classで指定する*/
.tr_a,
.tr_i,
.tr_u,
.tr_e {
    /*position: relative;*/
    background-color: "#fff";
    border:1px solid rgb(178,195,218);
    width: 100%;
    max-width: 867px;
    text-align: left;
    height: 52px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
}
.tr {
    margin: 0 auto;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.choice_item {
    position: relative;
    vertical-align: middle;
    font-size: 21px;
    font-weight: bold;
    color: rgb(4,52,145);
    width: 100%;
    text-align: center;
    padding: 0 5px;
}
.choice_item_jp {
    font-size: 18px!important;
}

.correct_answer_color {
    border:1px solid #043491 ! important;
    background:#CCF58E!important;
 }

.mondai_text_area {
    align-items: center;
    width: 90%;
    max-width: 840px;
    margin: 0 auto;
    height: calc(100dvh - 405px);
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.mondai_text_area_with_sub {
    display: block;
    align-items: center;
    width: 100%;
}

.sound_mondai_text_area_s {
    justify-content: center;
    height: 20svh;
}

.sound_mondai_text_area_l {
    justify-content: center;
    height: 25svh;
}

.einichi_mondai_text_area{
    justify-content: center;    
    height: calc(100dvh - 405px);
}

.nichiei_mondai_text_area{
    justify-content: center;    
    height: calc(100dvh - 405px);
}

.kusho_mondai_text_area{
    justify-content: start;
    height: auto;
}

.scale_number {
    display: flex;
    height: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    width: calc(100svw / 3* 2);
    max-width: 280px;
    margin: 0 auto;
    margin-bottom: 32px;
    margin-top: 10px;
}

.mondai_text_stand {
    height: calc(100dvh - 96px);
    min-height: 6em;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

#choice_table{
    display: block;
    width: 90%;
    max-width: 867px;
    margin: 0 auto;
    margin-top: auto;
    margin-bottom: 10px;
    height: 256px;
}

.ans_marubatsu{
    width: 100%;
    height: calc(100dvh - 405px);
    position: absolute;
    top: 116px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.ans_marubatsu img {
    width: 146px!important;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@media screen and (min-height: 431px) and (max-height: 525px) {
    .tr_a, .tr_i, .tr_u, .tr_e {
        height: 44px;
    }
    .tr {
        margin-bottom: 8px;
    }
    .einichi_mondai_text_area{
        height: calc(100dvh - 345px);
    }
    .nichiei_mondai_text_area{
        height: calc(100dvh - 345px);
    }
    #choice_table{
        height: 208px;
        margin-bottom: 0px;
    }
    .choice_item {
        font-size: 18px;
    }
    .choice_item_jp {
        font-size: 16px!important;
    }
    .einichi_mondai_text{
        font-size: 32px;
    }
    .nichiei_mondai_text{
        font-size: 20px;
    }
    .kusho_mondai_text{
        font-size: 14px;
    }
    .mondai_text_sub{
        font-size: 20px;
    }
    .ans_marubatsu{
        height: calc(100dvh - 345px);
    }
    .ans_marubatsu img {
        width: 130px!important;
    }
}

@media screen and (max-height: 430px) {
    .tr_a, .tr_i, .tr_u, .tr_e {
        width: 24%;
        height: 44px;
        margin-top: 12px;
    }
    .einichi_mondai_text_area{
        height: calc(100dvh - 206px);
    }
    .nichiei_mondai_text_area{
        height: calc(100dvh - 206px);
    }
    .mondai_text_stand {
        height: calc(100dvh - 96px);
    }
    #choice_table{
        display: flex;
        margin-bottom: 12px;
        height: 58px;
    }
    .choice_item {
        font-size: 15px;
    }
    .choice_item_jp {
        font-size: 14px!important;
    }
    .einichi_mondai_text{
        font-size: 32px;
    }
    .nichiei_mondai_text{
        font-size: 22px;
    }
    .kusho_mondai_text{
        font-size: 14px;
    }
    .mondai_text_sub{
        font-size: 22px;
    }
    .ans_marubatsu{
        height: calc(100dvh - 206px);
    }
    .ans_marubatsu img {
        width: 88px!important;
    }
}

#wrap_mondai {
    min-height: 450px;
    padding-bottom: 70px;/* スマホで必要*/
}

.wrap{
    width:100%;
    height: 100dvh;
    position: relative;

    /*縦長*/

    overflow-y:hidden; 
    /*横長*/
    /*
    overflow-y:auto;
    height: 500px;
    */
 /*for footer */
}

th {
    width: 50px;
}
.btn_th {
    display: block;
    width: 100%;
}

tr {
    height: 80px;
}
td {
    position: relative;
    left: 10px;
}
table{
    position: relative;
    /*top: 50%;*/
}

.tbl_img{
    position: relative;
    top: 25px;
}
.sel_img {
    position: relative;
    top: 20px;
    /*animation: fluffy 0.5s 2s*/
}

.btn_m3_02 {
    font-size: 26px;
    font-weight: normal;
    background-color: #7F827E;
    color: #fff;
    text-align: center;
    width: calc(94.1% / 3);
    height: 49px;
    line-height: 49px;
    border-radius: 6px;
    width: 100%;
}
.nextBtn{
    bottom: 100px;
    position: absolute;
    text-align: center;
    color: white;
    background: #ccc;
    width: 100%;
}

.fluffy {


/* アニメーション名 アニメーションにかかる時間 アニメーションの繰り返し回数 */
/* fluffy 3秒 無限ループ */
animation: fluffy 0.5s 0s;
}


@keyframes fluffy {
    0%, 100% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(-20px);
    }

}