@charset "UTF-8";
@media screen and (max-width: 767px) {
    .pc{ display: none !important; }
    .sp{ display: block !important; }



    /*フォント 指定*/

    body{
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
         position: relative;
         background-image: url(../img/bg2_s.jpg)!important;
    }


    /*ここまでフォント 指定*/


    /* ここから共通 */

    .inner{
        width: 92vw;
        margin: 0 auto;
    }

    .inner_2{
        width: 92vw;
        height: auto;
        margin: 0 auto;
    }
    
    .inner_2_{
        width: 85vw;
        height: auto;
        margin: 10vw auto 20vw;
    }

    .inner_3{
        width: 100vw;
        margin: 0 auto;
    }

    .inner_4{
        width: 92vw;
        margin: 0 auto;
        border-top: solid 0.3vw #DDDDDD;
        padding-bottom: 5vw;
    }

    .inner_5{
        width: 85vw;
        margin: 0 auto;
    }

    .inner_6{
        width: 92vw;
        margin: 0 auto;
    }
    
    .inner_7{
        width: 80vw;
        margin: 0 auto;
    }
    
    .inner_8{
        width: 90vw;
        margin: 0 auto;
    }





    a{
        text-decoration: none;
    }

    a:hover{
        text-decoration: none;
    }


    .black{
        width: 100vw;
        background-color: #FFF;
        position: relative;
    }

    .back_1_img{
        position: absolute;
        top: 0;
        left: 50%;
        right: 0;
        margin-left: -104.302vw;
        max-width: 208.605vw;
        width: 208.605vw;
    }

    .back{
        position: relative;
        z-index: -1;
    }


    .back_2_img{
        position: absolute;
        top: 0;
        left:50%;
        right: 0;
        margin-left:-91.265vw;
        max-width: 182.529vw;
        width: 182.529vw;
        background-color: #FFF;
        mix-blend-mode: multiply;

    }

    .back_2{
        width: 100vw;
    /*    background-color: #FFF;*/
    }

    .btn{
        opacity: 1;
        transition: 0.8s;
    }

    .btn:hover{
        opacity: 0.5;
        transition: 0.8s;
    }


    .black{
        color: black;
    }

    .mintyou{
        font-family: "Yu Mincho", "YuMincho", serif;
    }

    .bold{
        font-weight: bold;
    }


    .bg_student{
        z-index: -1!important;
    }



    /* ここまで共通 */


    /* ここからsec1 */

    .sec01{
        margin-bottom: 12vw;
    }

    h1{
        width: 44.628vw;
        height: 7.919vw;
        margin: 65vw auto 10.5vw;
    }

    .sec01_title{
        width: 80vw;
        margin: 0 auto 5vw;
    }
    
    .sec01_title_sp3{
        width: 85vw;
        margin: 0 auto 75vw;
    }
    
    .sec01_title_sp4{
        width: 85vw;
        margin: 0 auto 85vw;
    }


    .sec01_main{
        margin-bottom: 10.43vw;
    }
    
    .sec01_main_1 {
        position: absolute;
        width: 58vw;
        top: 53vw;
        left: -5vw;
    }
    
    .sec01_main_1_sp4 {
        position: absolute;
        width: 60vw;
        top: 75vw;
        left: -11vw;
    }
    
    .sec01_main_2 {
        position: absolute;
        width: 40vw;
        top: 43vw;
        bottom: auto;
        right: -9vw;
    }
    
    .sec01_main_2_sp4 {
        position: absolute;
        width: 40vw;
        top: 63vw;
        bottom: auto;
        right: -11vw;
    }

    .sec01_copy{
        color: #000;
        font-size: 3.5vw;
        line-height: 2;
        text-align: center;
    }

    .sec01_copy_title{
        font-size: 4.5vw;
        font-weight: bold;
        color: #1D2850;
    }

    .sp5_sec01 P{
        width: 92vw;
        margin: 0 auto;
    }
    
    /* ここまでsec1 */



    /* ここからsec2 */

    .sec02{
        margin-bottom: 16vw;
    }

    .sp5_sec02 .inner_5{
        width: 80vw;
        padding: 15vw 0;
    }

    .sec02_topic1{
        width: 80vw;
        margin: 0 auto 5vw;
    }
    
    .sec02_topic1_sp3 {
        width: 85vw;
        margin: 0 auto 5.867vw;
    }
    
    .sec02_topic1_sp4 {
        width: 56vw;
        margin: 0 auto 7vw;
    }

    .sec02_topic2{
    width: 85vw;
    margin: 0 auto 55px;
    }
    
    .sec02_topic2_sp4{
        width: 79vw;
        margin: 0 auto 8vw;
    }

    .sec02_copy{
        width: 92vw;
        font-size: 3.5vw;
        line-height: 2;
        margin: 0 auto 20vw;
        text-align: left;
    }
    
    .sec02_photo{
        margin-bottom: 8vw;
    }

    .sec02_copy_sp4{
        margin: 0 auto 10vw;
    }

    .sec02 h2{
        color: #000;
        font-size: 3.7vw;
        text-align: center;
        font-weight: bold;
        margin-bottom: 5vw;
    }
    
    .topic_2_img{
        margin-bottom: 10vw;
    }
    
    .topic_2_img_2{
        margin-bottom: 15vw;
    }
    

    /* ここまでsec2 */


    /* ここからsec3 */

    .sec03{
        text-align: center;   
        margin-bottom: 13.69vw;
    }
    
    .sec03_topic{
        width: 77vw;
        margin: 15vw auto 13vw;
    }
    
    .topic_3_img_sp4{
        margin-bottom: 25vw;
    }
    
    .sec02_topic1_sp5{
        width: 55%;
        margin: 0 auto 8vw;
    }
    

    .sec03_p{
        margin-right: 6vw;
        display: block;
    }

    .sec03 h2,.sec04 h2,.sec05 h2{
        position: relative;
        display: inline-block;
        color: #1060AD;
        margin-bottom: 8vw;
        font-size: 4.5vw;
        font-family: 'Poppins', sans-serif;
    }
    
    
    .sec05_2 h2{
        color: #449DA5;
    }


    .sec03 h2::before,.sec04 h2::before{
        content: "";
        position: absolute;
        top: 1.5vw;
        left: 0;
        right: 0;
        bottom: -1vw;
        border-bottom: 1px solid #1060AD;
        width: 80%;
        width: -webkit-calc(100% - 200px);
        width: calc(100% - 26vw);
        margin: 0 auto;
        }

    .sec05 h2::before{
        content: "";
        position: absolute;
        top: 1.5vw;
        left: 0;
        right: 0;
        bottom: -1vw;
        border-bottom: 1px solid #1060AD;
        width: 80%;
        width: -webkit-calc(100% - 100px);
        width: calc(100% - 10vw);
        margin: 0 auto;
        }
    
    .sec05_2 h2::before{
        border-bottom: 1px solid #449DA5;
    }



    .sec03 ul{
        display: block;
        justify-content: space-between;
    }

    .sec03 ul li{
        width: 94vw;
        text-align: left;
        display: flex;
        margin-bottom: 6vw;
    }

    .sec03 ul li img{
        width: 23vw;
        height: auto!important;
        margin-right: 4vw;
        margin-bottom: auto;
    }

    .sec03 ul li p:nth-of-type(1){
        font-size: 1.565vw;
        line-height: 1.7;
        margin-bottom: 1.825vw;
    }

    .sec03 ul li p:nth-of-type(2){
        font-size: 2.5vw;
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: 0vw;
    }

    .sec03 ul li p:nth-of-type(3){
        font-size: 4vw;
        margin-bottom: 1vw;
        font-weight: bold;
    }
    
    .sp5_sec02 ul li p:nth-of-type(1){
        font-size: 2.5vw;
        font-weight: normal;
        line-height: 1.5;
        margin-bottom: 1vw;
    }

    .sp5_sec02 ul li p:nth-of-type(2){
        font-size: 4vw;
        margin-bottom: 1vw;
        font-weight: bold;
    }

    
    .sec03 ul li p:nth-of-type(4){
        font-size: 2.8vw;
    }
    
    .sec03 ul li .red{
        color:#D00C3B;
    }
    
    .sec03 ul li .blue{
        color:#1060AD;
    }

    /* ここまでsec3 */


    /* ここからsec4 */

    .sec04{
        text-align: center;    
        margin-bottom: 20vw;
    }

    .sec04_topic2_sp5{
        width: 95%;
        margin: 0 auto 8vw;
    }
    
    .sectalk_document{
        text-align: left;
        margin-top: 20px
    }
    
    .modal_title{
     margin: 8.475vw auto 6.519vw;
    }

    .modal_bottom{
        margin-bottom: 5vw;
    }

    .staff{
        margin: 15vw auto;
    }

    .staff_title{
        display: inline-block;
        font-size: 3vw;
        color: #449DA5;
        border-bottom: 1px solid #449DA5;
        margin-bottom: 4.5vw;
    }

    .staff ul{
        width: 85vw;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .staff ul li .staff_con{
    display: flex;
      justify-content: center;
      align-items: center;
        
    }
    
            .staff ul li:nth-of-type(1){
margin-right: 6.519vw;
    }


    .staff ul li .staff_con:nth-of-type(1){
        
    }

    .staff ul li .staff_con img{
        width: 15.645vw;
    }

    .staff ul li .staff_con p{
        text-align: left;
        color: #1D2850;
        margin-left: 2vw;
    }

    .staff ul li .staff_con p:nth-of-type(1){
        font-size: 2.6vw;
    }

    .staff ul li .staff_con p:nth-of-type(2){
        font-size: 3vw;
        font-weight: bold;
    }
    
    .staff_copy{
        width: auto;
        font-size: 2.6vw;
        color: #172E4D;
        margin-top: 4vw;
        margin-bottom: 4vw;
text-align: justify;
    text-justify: inter-ideograph;
    }



    /* ここまでsec4 */



    /* ここからsec5 */

    .sec05{
        text-align: center;
    }

    .sec05_topic3_sp5{
        width: 95%;
        margin: 0 auto 8%;
    }
    
        .sec05_ho{
        margin-bottom: 5vw;
    }
    

    .group{
        padding: 10.43vw 0;
    }

    .group p:nth-of-type(1){
        font-size: 3.3vw;
        color: #449DA5;
        margin-bottom: 5vw;
        font-weight: bold;
    }

    .group p:nth-of-type(2){
        font-size: 5.5vw;
        color: #172E4D;
        margin-bottom: 3vw;
        font-weight: bold;
    }

    .group p:nth-of-type(3){
        font-size: 2.6vw;
        color: #172E4D;
        margin-bottom: 4vw;
        text-align: left;
    }

    /* ここまでsec5 */

    /* ここからsec6 */

    .sec06{
        margin-bottom: 19.557vw;
    }

    .sec06_topic2{
        width: 80vw;
        margin: 0 auto 10vw;
    }

    .sec06_copy{
        width: 92vw;
        font-size: 3.5vw;
        line-height: 2;
        margin: 0 auto 20vw;
        text-align: center;
    }

    .sec06_con{
        width: 92vw;
        margin: 0 auto 15vw;
    }
    
    .sec06_con{
    text-align: center;
    font-weight: bold;
    margin-bottom: 15vw;
        color: #1060AD;
    }
    
    .sec06_con h2{
    font-size: 5vw;
    margin: 0 auto 7vw;
}


    .sec06_btn img{
        width: 92vw;
        margin: 0 auto;
    }
    /* ここからsec6 */

    /* ここからsec7 */


    .sec07_topic3{
        width: 78vw;
        margin: 5vw auto 10vw;
    }

    .sec07_copy{
        width: 92vw;
        font-size: 3.5vw;
        line-height: 2;
        margin: 0 auto 15vw;
        text-align: center;
    }

    .sec07_con{
        width: 80vw;
        margin: 0 auto 15vw;
    }
    
    .sec07_con_2{
        width: 83.333vw;
        margin: 0 auto 85px;
    }

    .sec07_btn img{
        width: 92vw;
        margin: 0 auto 25vw;
    }

    /* ここまでsec7 */
    
    
        /* ここからsec8 */    

    .sec08{
        background-color: #F2F6FA;
        padding: 10vw 0 15vw;
        text-align: center;
    }

    .sec08_copy{
        font-size: 5vw;
        color: #1060AD;
        font-weight: bold;
    }

    .special_1 img{
        width: 77.417vw;
        margin: 9.387vw auto 10.821vw;
    }

    .special_2 img{
        width: 77.417vw;
        margin: 0 auto;
    }


    /* ここまでsec8 */





    /*モーダル */


    #modal-content,#modal-content_2,#modal-content_3,#modal-content_4 {
        width: 93vw;
        height: 80vh;
        padding: 10vw 2vw 5vw 5vw;
        background: #fff;
        position: fixed;
        display: none;
        z-index: 2000;
        overflow: scroll;
        border-radius: 0vw;
    }
    
     #modal-content_move {
        width: 85vw;
        height: auto;
        padding: 0;
        background: #000;
        position: fixed;
        display: none;
        z-index: 2000;
        border-radius: 0vw;
    }

    #modal-overlay,#modal-overlay_2,#modal-overlay_3,#modal-overlay_4,#modal-overlay_move {
        z-index: 1000;
        display: none ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        width: 100% ;
        height: 120% ;
        background-color: #7E96AA ;
        mix-blend-mode: multiply;
    }

    .button-link:hover {
        cursor: pointer ;
    }
    
    .modal-content{
        position: relative;        
    }
    
    .button-link_2{
        position: absolute;
        cursor: pointer ;
    }


    #modal-content h2,#modal-content_2 h2,#modal-content_3 h2,#modal-content_4 h2{
        color: #1060AD;
        text-align: center;
        margin-bottom: 1.956vw;
        font-family: 'Poppins', sans-serif;
        font-size: 4.172vw;
    }

    #modal-content .copy,#modal-content_2 .copy,#modal-content_3 .copy,#modal-content_4 .copy{
        color: #1060AD;
        text-align: center;
        border-bottom: solid 1px #1060AD;
        font-family: 'Poppins', sans-serif;
        font-size: 6.2vw;
        margin-bottom: 5vw;
        padding-bottom: 5vw;
        font-weight: bold;
        line-height: 1.5;
    }

    
    #modal-content .copy2,#modal-content_2 .copy2,#modal-content_3 .copy2,#modal-content_4 .copy2{
        color: #449DA5;
        text-align: center;
        border-bottom: solid 1px #449DA5;
        font-family: 'Poppins', sans-serif;
        font-size: 6.2vw;
        margin-bottom: 5vw;
        padding-bottom: 5vw;
        font-weight: bold;
        line-height: 1.5;
    }

    

    .modal_img{
        margin-bottom: 8vw;
    }
    
    .modal_img2{
        width: 100%;
        margin: 10vw auto 15vw;
        display: block;
    }
    
    .modal_img5_sp{
        margin-bottom: 8vw;
    }

    .document_copy{
    text-align: left;
    margin-top: 1vw;
    margin-bottom: 8vw;
    }

    #modal-content ul li,#modal-content_2 ul li,#modal-content_3 ul li,#modal-content_4 ul li{
        display: flex;
        margin-bottom: 7vw;
    }
    
    #modal-content ul li .img p,#modal-content_2 ul li .img p,#modal-content_3 ul li .img p,#modal-content_4 ul li .img p{
    margin-top: 2vw;
    font-size: 2.5vw;
    }


    #modal-content ul li .img,#modal-content_2 ul li .img,#modal-content_3 ul li .img,#modal-content_4 ul li .img{
        width: 20vw;
        margin-right: 5vw;
        text-align: center;;
    }

    .modal_btn{
        display: block;
        justify-content: space-between;
        width: 70%;
        margin: 0 auto;
    }
    
    .modal_btn a{
        width: 45%;
        margin:50px 0 100px;
    }

    .modal_btn a:first-child img{
        margin-bottom: 5vw;
    }
    
    .modal_btn a img{
        margin-bottom: 10vw;
    }



    #modal-content ul li .comment,#modal-content_2 ul li .comment,#modal-content_3 ul li .comment,#modal-content_4 ul li .comment{
        width: 100vw;
        font-size: 3vw;
        margin-top: 4vw;
    }

    .comment_{
        margin-bottom: 6vw;
    }

    .comment__{
        width: auto!important;
    }

    #modal-content ul li .comment .annotation,#modal-content_2 ul li .comment .annotation,#modal-content_3 ul li .comment .annotation,#modal-content_4 ul li .comment .annotation{
        font-size: 2.8vw;
        margin-top: 6.519vw;
    }

    #modal-content ul li .red,#modal-content_2 ul li .red,#modal-content_3 ul li .red,#modal-content_4 ul li .red{
        color:#D00C3B;
    }

    #modal-content ul li .blue,#modal-content_2 ul li .blue,#modal-content_3 ul li .blue,#modal-content_4 ul li .blue{
        color:#1060AD;
    }

    .modal_close,.modal_close_2,.modal_close_3,.modal_close_4{
        font-size: 4.172vw;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        display: block;
        color: #1060AD;
    }

    .modal_close::after,.modal_close_2::after,.modal_close_3::after,.modal_close_4::after{
      content: '';
      display: inline-block;
      width: 2.608vw;
      height: 2.608vw;
      background-image: url(../images/student_img/special/01/close.png);
      background-size: contain;
      vertical-align: middle;
      margin-left: 2.608vw;
    }

    
    
     #modal-content::-webkit-scrollbar,#modal-content_2::-webkit-scrollbar,#modal-content_3::-webkit-scrollbar,#modal-content_4::-webkit-scrollbar {
        width: 4vw;
    }
    #modal-content::-webkit-scrollbar-thumb,#modal-content_2::-webkit-scrollbar-thumb,#modal-content_3::-webkit-scrollbar-thumb,#modal-content_4::-webkit-scrollbar-thumb {
        background-color: #8E98AA;;
        border-radius: 0px;
        border-right: 2vw solid transparent;
        border-left: 1vw solid transparent;
        background-clip: padding-box;
    }
   #modal-content::-webkit-scrollbar-track,#modal-content_2::-webkit-scrollbar-track,#modal-content_3::-webkit-scrollbar-track,#modal-content_4::-webkit-scrollbar-track {
        margin-top: 2vw;
        margin-bottom: 2vw;
    }

    
    .modal_close_img{
        cursor: pointer;
        position: fixed;
        z-index: 999;
        margin: -6vw 78vw;
        width: 5vw;
    }
    
    .modal_close_img_2{
        cursor: pointer;
        position: fixed;
        z-index: 999;
        margin: -12vw 75vw;
        width: 12vw;
    }
    
    .modal_solution{
        display: block!important;
        justify-content: space-between;
    }

    .modal_solution li{
        display: block!important;
        width: 80vw;
        padding: 5vw;
        text-align: center;
    }

    .modal_solution li:nth-of-type(1){
        background-color: #F0F6F7;
    }

    .modal_solution li:nth-of-type(2){
        background-color: #F7F2F5;
    }


    .modal_solution li img{
           width: 45vw;
        margin-bottom: 5vw;
    }

    .modal_solution li p{
        font-size: 3vw;
        text-align: justify;
        text-justify: inter-ideograph;
    }


    .modal_copy{
    color: #449DA5;
            font-size: 6.2vw;
        font-weight:bold;
        margin-top: 5vw;
        }

        .modal_copy2{
            font-size: 3vw;
            font-weight:bold;
        }

        .blue.modal_copy{
            font-size: 4vw;
            position: relative;
            left: 80px;
        }

        .blue.modal_copy:before {
            position: absolute;
            top: 4vw;
            left: -13vw;
            width: 8vw;
            height: 0.3vw;
            content: '';
            background: #1060AD;
        }
        

    #modal-content_4 ul li .comment2{
    margin-top: 0;
}


    iframe{
    width:100%; 
    height:70vh; 
}    
    

    /*モーダル */


    .sec02_back.sp5_sec02{
        background-color: #F2F6FA;
    }
    
    .sp5_sec02 .sec02_topic2{
        width: 50%;
        margin: 0 auto 10%;
    }

    .sp5_sec02 ul{
        width: 100%;
        display: flex;
        margin: 0 auto 10% ;
    }

    .sp5_sec02 ul li{
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .sp5_sec02 ul li img{
        width: 30vw;
        height: auto !important;
        margin-right: 0;
        margin-bottom: 3vw;
    }
    
    .sp5_sec02 .sec03_p{
        text-align: center;
        margin-right: 0;
    }
    
    .modaltitle{
        width: 95%;
        margin-bottom: 5%;
    }

    .member{
        width: 80%;
        display: block;
        margin: 0 auto;
    }


}