/* CSS Document */

@charset "utf-8";

.mfp-content .white-popup {
    background-size: 20%;
    border-radius: 12px;
    box-sizing: border-box;
    border:5px solid #fff;
    max-width: 800px !important;
}

.seal_clear{width: 80%; max-width: 500px; margin: 0 auto 30px auto;}
.sealwrap{display: flex;flex-wrap: wrap; position: relative;}
.seal{width: 50%; display: flex; justify-content: center; align-items:center;background: url("../image/seal/bg.jpg");background-size: 500px;position: relative;}
/*.seal div{background: #fff;}
.seal div img{box-sizing: border-box; border: 1px solid #fff;}*/
.seal_board{width: 50%; display: flex; justify-content: center; align-items:center; background: #d6e9c3;padding: 50px 0;}
.seal_board div{position: relative;}
.seal_board>div>img{ max-width: 100%; max-height: 100%; width: auto;}
.star{position: absolute!important;
    top: -15%;
    right: -18%;
    z-index: 3;
}

#top_btn002 {
    position: fixed;
    cursor: pointer;
    width: 95%;
    max-width: 900px;
    z-index: 999;
    bottom: 30px;
    right: 0;
    left: 0;
    transition: 0.3s;
    margin: 0 auto;
}

.twitter {
    display: block;
    width: 45%;
    max-width: 292px;
    margin: 4% auto 4% auto;
}

#blueBg{background: url(../image/top/blueBg.jpg); padding: 100px 20px;}
.blueBg_top{background: url("../image/top/top.png"); padding-top: 39px; margin-top: 60px;}
.blueBg_bot{background: url("../image/top/bot.png"); padding-top: 39px; margin-bottom: 60px;}

.titlelogo_teaser{width: 90%; max-width: 880px; margin: 0 auto;position: relative;padding-top: 25px; margin-bottom: 20px;}
.titlelogo_teaser img{width: 100%;margin: 0 auto; display: block;}
.teaser_read{width: 78%; max-width: 600px; margin: 0 auto;position: relative;padding-top: 25px; margin-bottom: 60px;}

.titlelogo{width: 90%; max-width: 980px; margin: 0 auto;position: relative;padding-top: 25px; margin-bottom: 60px;}
.titlelogo img{width: 64%;max-width: 600px;margin: 0 auto; display: block;}

.redtxt{color: #e60012;}

.topread{display: block;
    text-align: center;
    width: 85%;
    max-width: 540px;
    margin: 0 auto;}

.breadcrumbs{font-size: 13px;
    padding-top: 130px;
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;}
.breadcrumbs a{color: #000000;
    letter-spacing: .03125rem;}
.breadcrumbs i {
    margin: 0 7px;
    font-family: auto;
    color: #000000;
}

.breadcrumbs2{font-size: 13px;
    padding-top: 5px;
    max-width: 1000px;
    width: 95%;
    margin: 0 auto 50px auto;}
.breadcrumbs2 a{color: #000000;
    letter-spacing: .03125rem;}
.breadcrumbs2 i {
    margin: 0 7px;
    font-family: auto;
    color: #000000;
}

.breadcrumbs3{font-size: 13px;
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;}
.breadcrumbs3 a{color: #000000;
    letter-spacing: .03125rem;}
.breadcrumbs3 i {
    margin: 0 7px;
    font-family: auto;
    color: #000000;
}

.print{width: 70%;
    margin: 0 auto;}
.printBtn{
    text-align: center;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #ee4d94;
    display: inline-block;
    padding: 25px 40px 25px 40px;
    position: relative;
    background: #fff;
    border-radius: 100em;
    z-index: 1;
    margin: 0 auto;
    display: block;
}
.printBtn:before {
        border: 3px solid #ee4d94;
    position: absolute;
    content: "";
    width: 100%;
    height: 94%;
    z-index: 1;
    border-radius: 100em;
    top: -6px;
    left: -6px;
}
.printBtn:after {
    content: "";
    background: url(../image/top/print.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 3;
    width: 38px;
    height: 34px;
    top: 25%;
    right: 4%;
}

.guardian-txt{ margin: 50px auto 35px auto;padding: 30px 30px 30px 30px; width: 90%; background: rgba(255,255,255,0.80); border-radius: 10px;}
.guardian-txt div{text-align: center;}
.guardian-txt h3{position: relative;font-size: 23px;
    text-align: center;
    display: inline-block;line-height: 140%;}
.guardian-txt h3:before{content: "";
    background: url(../image/common/listicon.png);
    background-size: contain;
    position: absolute;
    width: 20px;
    height: 20px;
    left: -25px;
top: 2px;}
.guardian-txt h3:after{content: "";
    background: url(../image/common/listicon.png);
    background-size: contain;
    position: absolute;
    width: 20px;
    height: 20px;
    right: -25px;
top: 2px;}
.guardian-txt p{font-size: 18px; margin: 20px auto 0 auto; line-height: 145%; font-weight: bold;}


.guardian-txt2{
    max-width: 1500px;
    width: 90%;
    margin: 0 auto;
    border: solid #ccc 20px;
    border-image-source: url(../image/top/frame.png);
    border-image-slice: 25%;
    border-image-width: 80px;
    border-image-outset: 0px;
    border-image-repeat: repeat;
    }

.guardian-txt2-cont{background: rgba(255,255,255,0.75); padding: 60px 20px 40px 20px; border-radius: 15px;}
.guardian-txt2 p{font-size: 20px;line-height: 190%; font-weight: 800; text-align: center; color: #ea67a0;}
.guardian-txt2-cont-txt01{font-size: 25px; font-weight: 800; text-align: center; margin-bottom: 37px; margin-top: -100px;}
.guardian-txt2-cont-txt{ color: #fff;display: inline-block;background: #ea67a0;line-height: 130%;padding: 10px 60px 18px 60px;border-radius: 50px; box-shadow: 3px 5px 0px 0px #f3a9c9;}
.guardian-txt2-cont-txt span{font-size: 80%;}


.midashi01{width: 98%;
    background: #fff;
    color: #000;
    text-align: center;
    border: 4px solid #000;
    font-size: 30px;
    font-weight: 800;
    padding: 11px 20px 11px 20px;
    border-radius: 45px;
    margin: 0 auto 25px auto;
    line-height: 140%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.midashi01:before {
    content: "";
    background: url(../image/common/obj.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 3;
    width: 45px;
    height: 45px;
    top: 15%;
    left: -2%;
}
.midashi01:after {
    content: "";
    background: url(../image/common/obj.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 3;
    width: 45px;
    height: 45px;
    top: 15%;
    right: -2%;
}

.step1{text-align: center;}
.step1 span{display: inline-block;
    font-size: 21px;
    font-weight: 800;
    background: #ee4d94;
    color: #000;
    text-align: center;
    border: 3px solid #000;
    position: relative;
    z-index: 2;
    padding: 10px 40px;
    border-radius: 30px;
    margin-bottom: -8px;}

.step2{text-align: center;}
.step2 span{display: inline-block;
    font-size: 21px;
    font-weight: 800;
    background: #fed823;
    color: #000;
    text-align: center;
    border: 3px solid #000;
    position: relative;
    z-index: 2;
    padding: 10px 40px;
    border-radius: 30px;
    margin-bottom: -8px;}

.midashi01 span{color: #e60012;}

.syList01{width: 92%; margin: 0 auto;display: flex; justify-content: center; align-items: center; margin-bottom: 14px;flex-wrap: wrap;gap: 1%;}
.syList01 li{width: 32%;
    background: #000;
    color: #fff;
    text-align: center;
    border: 2px solid #fff;
    font-size: 14px;
    border-radius: 45px;
    margin: 0 0 1% 0;
    box-sizing: border-box;}
.syList01 li a{color: #fff; text-decoration: none;padding: 10px 25px 8px 25px;display: block;}

.syList02{display: flex; justify-content: center; align-items: center;}
.syList02 li{background: #000; color: #fff; text-align: center; border: 2px solid #fff; font-size: 14px;border-radius: 45px; margin: 0 6px;}
.syList02 li a{color: #fff; text-decoration: none;padding: 10px 25px 8px 25px;display: block;}

.raea01{text-align: center; font-size: 20px; color: #000; line-height: 180%;font-weight: bold;margin-bottom: 40px;}
.raea01_t2{text-align: center; font-size: 20px; color: #000; line-height: 180%;font-weight: bold;margin-bottom: 30px;position: relative;}
.raea01_t2 p{text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.76), -2px 2px 3px rgba(255, 255, 255, 0.76), -2px -2px 3px rgba(255, 255, 255, 0.76), 2px -2px 3px rgba(255, 255, 255, 0.76);}

.answer-cont-wrap{ margin-bottom: 30px; overflow: hidden; border-radius: 15px; border: 3px solid #fff; background: #fff;box-shadow: 3px 3px 0px 0px #f3a9c9;}
.answer-cont-wrap h3{background:#e60012; color: #fff; text-align: center; font-size: 20px; padding: 10px 20px 8px 20px;}
.answer-cont-wrap h3 span{color: #000;padding: 0px 4px 0px 4px; margin: 0 4px;}
.blue_0{background: #6ccff6;}
.purple{background: #bc9eca;}
.green{background: #abd69b;}

.kokugo{background: #ed6d00;color: #fff!important;}
.sansu{background: #1eb9ee;color: #fff!important;}
.eigo{background: #7f1085;color: #fff!important;}

.answer-cont{display: flex; line-height: 0; }
.answer-cont-img{width: 70%;display: flex;align-items: center;justify-content: center;border-right: 1px solid #d5d5d5;}
.Awd40{width: 40%;}
.Awd50{width: 50%;}
.Awd60{width: 60%;}
.Awd70{width: 70%;}
.Awd80{width: 80%;}
.Awd90{width: 90%;}

.second-q{border-top: dotted red;}

.answer-cont-check-txt{
    color: #e60012;
    width: 90%;
    font-size: 15px;
    margin-bottom: 5px;
    margin-top: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 145%;}
.checkBtn-cont{width: 100%;display: flex;flex-wrap: wrap;justify-content: center;}

.checkBtn input[type="checkbox"] {
    display: none;
}

.checkBtn input[type="checkbox"]+label, input[type="checkbox"]+label {
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.checkBtn input[type="checkbox"]+label::before, input[type="checkbox"]+label::before {
    content: "";
    background-image: url("../image/common/check_0ff.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    box-sizing: border-box;
    width: 93px;
    height: 100px;
}

.checkBtn input[type="checkbox"]:checked+label::before,.checkBtn input[type="checkbox"]:checked+label::before {
    background-image: url("../image/common/check_0n.png");
}

.checkBtn2 input[type="checkbox"] {
    display: none;
}

.checkBtn2 input[type="checkbox"]+label, input[type="checkbox"]+label {
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.checkBtn2 input[type="checkbox"]+label::before, input[type="checkbox"]+label::before {
    content: "";
    background-image: url("../image/common/check2_0ff.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    box-sizing: border-box;
    width: 93px;
    height: 83px;
}

.checkBtn2 input[type="checkbox"]:checked+label::before,.checkBtn2 input[type="checkbox"]:checked+label::before {
    background-image: url("../image/common/check2_0n.png");
}

.answer-cont-check{width: 30%;display: flex;flex-wrap: wrap; justify-content: center; align-content: center;}
.checkBtn{display: flex; align-items: center;margin: 4px;}
.checkBtn2{display: flex; align-items: center;margin: 4px;}

.qframe{width: 18px;
    margin-right: 2px;
    margin-bottom: -3px;}

.submitBtn01{position: relative; width: 450px; margin: 0 auto;}
.submitBtn01 input {
    width: 450px;
    background: #e60012;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    font-family: inherit;
    border-radius: 45px;
    border: none;
    cursor: pointer;
    padding: 13px 5px 11px 25px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    display: block;
    margin: 0 auto;
    border:4px solid #fff;
}

.submitBtn01:before {
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0;
    margin: auto;
}

.resultWrap{max-width: 90%; display: flex;justify-content: center; margin: 30px auto 85px auto;}
.result{width: 100%; max-width: 440px;}
.result_txt{width: 72%; max-width: 270px; margin: 0px auto -21px auto;z-index: 1;position: relative;}
.result_txt2{width: 72%; max-width: 270px; margin: 0px auto 20px auto;z-index: 1;position: relative;}

.result_score{border: 5px solid #ea67a0; background:#ffebf8;border-radius: 15px;padding: 8px;box-shadow: 3px 3px 0px 0px #f3a9c9;}
.result_score p{background: #fff;border-radius: 15px;font-size: 150px;padding:35px 25px 11px 25px; font-weight: bold; color: #eb0416;min-width: 300px; text-align: center;}
.result_score p span{font-size: 20%; color: #000000;}


.result_score2{border: 5px solid #ea67a0; background:#ffebf8;border-radius: 15px;padding: 8px;position: relative;box-shadow: 3px 3px 0px 0px #f3a9c9;}
.result_score2 p{background: #fff;border-radius: 15px;font-size: 150px;padding:18% 25px 11px 25px; font-weight: bold; color: #eb0416;min-width: 300px; text-align: center;}
.result_score2 p span{font-size: 20%; color: #000000;}
.congratulations{position: absolute;
    top: 8%;
    left: -9%;
    right: 0;
    margin: 0 auto;
    width: 118%;}

.Bnr01{width: 80%; max-width: 800px;margin: 0 auto 0 auto;}

#overhid{overflow: hidden; }

.hintImg{ margin-bottom: 90px;}
.hintImg1{width: 60%;
    margin: 0 auto 20px auto;
    display: block;}
.hintImg2{width: 90%;
    margin: 0 auto 0 auto;
    display: block;}


.stepImg{display: block; margin: 0 auto; text-align: center; max-width:176px;margin: 0 auto -17px auto;}

.Tclmlist{display: flex;justify-content: center; margin-bottom: 35px; position: relative; flex-wrap: wrap; gap:4%;position: relative;}
.Tclmlistcont{width: 22%; margin-bottom: 4%;}

.TclmlistcontLink{ display: block; background: #ee4d94;padding: 10px 25px 8px 25px; margin-top: 4px; color: #fff; text-align: center; text-decoration: none; font-size: 15px; font-weight: bold; border-radius: 40px;line-height: 140%;}

.Tclmlist2{display: flex;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    gap: 1%;}
.Tclmlistcont2{width: 24%;
    margin-bottom: 1%;}

.swiperTopTxt{position: relative;font-size: 22px;
    text-align: center;font-weight: bold;line-height: 140%;}


.swiperTopTxt{text-align: center;}
.swiperTopTxt p{position: relative;font-size: 22px;
    text-align: center;
    display: inline-block;line-height: 140%;}
.swiperTopTxt p:before{content: "";
    background: url(../image/common/listicon.png);
    background-size: contain;
    position: absolute;
    width: 20px;
    height: 20px;
    left: -25px;
top: 2px;}
.swiperTopTxt p:after{content: "";
    background: url(../image/common/listicon.png);
    background-size: contain;
    position: absolute;
    width: 20px;
    height: 20px;
    right: -25px;
top: 2px;}

.print_txt h3{padding: 15px 10px 15px 25px; background: #ee4d94; color: #FFF; font-size: 190%; border-radius: 50px; margin-bottom: 15px;line-height: 140%;}

.print_txt p{
    width: 98%;
    margin:0 auto 15px auto;
    font-size: 17px;
    color: #000;
    line-height: 180%;
    font-weight: bold;
line-height: 170%;}
.print_txt p span{font-size: 80%;}
.print_txt p a{color: #ee4d94;}


.terminal{font-size: 90%;
    color: #fff;
    background: #000000;
    padding: 5px 18px 5px 18px;
    margin-bottom: 6px;
    display: inline-block;}

.printVi{color: #fff;background: #ee4d94; border-radius: 40px; padding: 5px 10px; margin-right: 4px;}

.dlbtn{width: 105px;
    margin-right: 4px;
    margin-bottom: -3px;}

.printImg{width: 70%;
    max-width: 600px;
    margin-bottom: 40px;}

.txtindent{text-indent: -1.4rem;
    padding-left: 1.4rem;}

.hint_nmbox{color: #000!important;
    padding: 3px 8px 0px 8px;
    margin: 0 2px;}


#step1{margin-bottom: 100px;position: relative;}
#step2{position: relative;}

@media screen and (max-width: 1200px){
    .mfp-wrap, .mfp-bg{
        min-width: 0 !important;
    }
}

@media screen and (max-width:768px){
    .mfp-wrap, .mfp-bg{
        min-width: 0 !important;
    }
    .titlelogo_teaser { margin-bottom: 0px; }
    .seal_clear{ margin-bottom: 2%; }
    .sealwrap{height: 86%;}
    .seal{width: 100%; order: 2; padding: 0; height: 50%;}
    .seal_board{width: 100%; order: 1; padding: 1%; height: 49%;}
    .seal_board>div{width: 44%; height: fit-content; text-align: center;}
    .mfp-content .white-popup{background-size: 9%; padding-top: 16px !important; height: 84svh;}

    #step1 {margin-bottom: 70px;}

    .print {width: 100%;}
    .printBtn:after {
        width: 31px;
        height: 28px;
        top: 28%;
        right: 5%;
    }

    .step1 span {font-size: 14px;padding: 7px 30px;}
    .step2 span {font-size: 14px;padding: 7px 30px;}

    .midashi01:before {
        width: 32px;
        height: 32px;
        top: 15%;
        left: -15px;
    }

    .midashi01:after {
        width: 32px;
        height: 32px;
        top: 15%;
        right: -15px;
    }

    #blueBg {padding: 85px 20px 40px 20px;}
    .printBtn {font-size: 15px;}

    .hint_nmbox {padding: 1px 5px 0px 5px;}

    .print_txt h3 {
        font-size: 3vw;
        margin-bottom: 10px;
    }

    .print_txt p{
        font-size: 15px;
        color: #000;
        line-height: 180%;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .breadcrumbs{font-size: 10px;padding-top: 110px;}
    .breadcrumbs2{font-size: 10px;}
    .breadcrumbs3{font-size: 10px;}
    
    .midashi01{font-size:5vw; padding: 10px 20px 7px 20px;margin-bottom: 10px;}
    .syList01 li{    width: 49%;font-size: 11px;border-radius: 45px;}
    .syList01 li a{padding: 10px 20px 8px 20px;}
    
    .syList02{flex-wrap: wrap; padding-right: 12vw;}
    .syList02 li{width:23%;font-size: 3.4vw;border-radius: 45px;}
    .syList02 li:first-child{width: 62%;}
    .syList02 li a{padding:13px 20px 12px 20px;}
    
    .raea01{font-size:3.3vw; color: #000; margin-bottom: 25px;}
    .raea01_t2{font-size:3.3vw; color: #000; margin-bottom: 10px;}
    
    .answer-cont-wrap h3{font-size: 16px;}
    .answer-cont{flex-wrap: wrap;}
    .answer-cont-img{width: 100%; border-right:unset; border-bottom: 1px solid #d5d5d5;}
    
    input[type="checkbox"]+label::before, input[type="checkbox"]+label::before { width: 73px;height: 80px;}
    .answer-cont-check{padding: 2rem 0; width: 100%;}
    
    .submitBtn01{width: 290px;}
    .submitBtn01 input {font-size: 18px;width: 290px;}
    
    .result_score p {
    font-size: 23.5vw;
    padding: 35px 25px 11px 25px;
    font-weight: bold;
    min-width: unset;}
    .result_score2 p {
    font-size: 23.5vw;
    padding: 23% 25px 11px 25px;
    font-weight: bold;
    min-width: unset;}
    .congratulations{top: 9%;}
    
    .result_txt {max-width: unset;width: 60%;}
    .result_txt2 {max-width: unset;width: 60%;}
    
    .titlelogo {margin-bottom: 45px;}
    .titlelogo img {width: 100%;}
    
    .guardian-txt{padding: 5% 5%;}
    .guardian-txt h3{font-size:3vw;}
    .guardian-txt p{font-size: 14px;}
    
    .guardian-txt2{padding: 3% 3%;}
    .guardian-txt2 {
        width: 84%;
        border: solid #ccc 5px;
        border-image-source: url(../image/top/frame.png);
        border-image-slice: 33%;
        border-image-width: 80px;
        border-image-outset: 0px;
        border-image-repeat: repeat;
    }
 
    .guardian-txt2-cont-txt01 {
    font-size: 3vw;
    margin-bottom: 30px;
        margin-top: -78px;
}
    .guardian-txt2-cont-txt {
    padding: 8px 5vw 11px 5vw;
}
    
    .guardian-txt2-cont {
    padding: 45px 20px 30px 20px;
}
    
    .guardian-txt2 h3{font-size:3vw;}
    .guardian-txt2 p{font-size: 3vw;}
    
   .swiperTopTxt p{font-size:4vw;}

    
    .stepImg{max-width:120px;margin: 0 auto -12px auto;}
    
    .Tclmlist{ width: 98%; margin: 0 auto 40px auto;gap: 5%;}
.Tclmlistcont{width: 47%;margin-bottom: 5%;}
    
    .Tclmlist2{width: 100%;gap: 3%;}
.Tclmlistcont2{width: 48%; margin-bottom: 3%;}

    .TclmlistcontLink{font-size: 12px;}
    
        .twitter {margin:10% auto 14% auto;}
    
}