@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap&subset=jase');

body{
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Arial", "メイリオ", "Meiryo", sans-serif;
    letter-spacing: -0.8px;
    color: #242f38;
}

html{
    width: 100%;
}
.kv__sp{
    height: 127vw;
    overflow: hidden;
}

.tab__box{
    background-color: #ebecf0;
    padding: 9vw 0 11vw;
}

.kv__contents{
    position: relative;
}

.kv__item{
    position: absolute;
}

.kv__item--logo {
    position: absolute;
    top: 28vw;
    left: 2.8vw;
    width: 59vw;
}

.kv__item--01 {
    position: absolute;
    width: 26vw;
    top: -11.4vw;
    left: 0;
}

.kv__item--02 {
    position: absolute;
    right: 0;
    top: -11.4vw;
    width: 66.8vw;
}

.kv__item--03 {
    position: absolute;
    right: 0;
    top: 5.2vw;
    width: 41.9vw;
}

.kv__item--04 {
    position: absolute;
    top: 71.7vw;
    right: 23.5vw;
    width: 44.9vw;
}

.kv__item--05 {
    position: absolute;
    right: 0;
    top: 97.9vw;
    width: 41.8vw;
}

.kv__item--06 {
    position: absolute;
    left: 5.2vw;
    top: 97.5vw;
    width: 44.9vw;
}

.kv__item--07 {
    position: absolute;
    left: 0vw;
    top: 70.7vw;
    width: 24.8vw;
}

.card{
    border-radius: 5.466vw;
    background: #ebecf0;
    box-shadow:  5px 5px 7px #e3e3e3,-5px -5px 7px #ffffff;
    margin-top: 6.5vw;
    overflow: hidden;
}

.card + .card{
    margin-top: 8vw;/* カード同士の余白調整 */
}

.card__inner{
    display: flex;
}

.card__title{
    color: #045bac;
    line-height: 1.5;
    font-size: 5.33vw;
    font-weight: 700;
}

.card__note {
    font-size: 3.2vw;
    text-align: left;
    margin-top: 1vw;
    line-height: 1.5;
    padding-left: 1em;
    position: relative;
}

.card__note::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
}

.button {
    margin: 5.2vw auto 0;
    position: relative;
    border-radius: 6.133vw;
    background-color: #045bac;
    box-shadow: 7px 7px 15px rgb(55 84 170 / 15%), -7px -7px 20px #fff, 0 0 4px hsl(0deg 0% 100% / 20%);
    text-align: center;
}

.button ::after{
    background-image: url(/zemi/online_taiken/assets/img/btn_burette.svg);
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 3.3vw;
    height: 3.3vw;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2.6vw;
}

.button_link{
    align-items: center;
    justify-content: center;
    font-size: 4.266vw;
    padding: 3.5vw 6vw 3.9vw;
    display: block;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.1;
    letter-spacing: .02em;
    overflow: hidden;
    color: #fff;
}

.tab__box .btn__area{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 4vw;
}

.tab__box .tab__btn{
    text-align: center;
    border-radius: 5.466vw;
    background-color: #ebecf0;
    color: #045bac;
	cursor: pointer;
	transition: all 0.2s ease 0s;
    box-shadow:  5px 5px 10px #cfcfcf,-5px -5px 8px #ffffff;
    font-weight: 900;
    width: 42.6vw;
    font-size: 4.266vw;
    box-sizing: border-box;
    padding: 3vw 1.5vw 3.5vw;
}

.tab__box .tab__btn.active{
    color: #dbdbdb;
    background: #045bac;
    box-shadow: inset 7px 7px 10px #033f77,inset -7px -7px 9px #0577e1;
}

.tab__box .tab__panel {
    display:none;
}
.tab__box .tab__panel.active {
    display:block;
    padding: 0 4vw;
    margin: 16vw auto 0;
}

.btn__h2{
    text-align: center;
}

.btn__h2 h2{
    font-size: 4.266vw;
    color: #242f38;
    margin-bottom: 4.8vw;
    font-weight: 700;
}

.card__body .card__subject {
    margin-bottom: 2.4vw;
    font-size: 3.733vw;
    font-weight: 700;
}

.card__body .card__subtitle{
    line-height: 1.5;
    font-size: 3.733vw;
    margin: 2vw 0 0;
    font-weight: 400;
    text-align: left;
}
.btn_brette{
    width: 10%;
}

.first__view{
    margin: auto;
    max-width: 67%;
}
.first__view .logo__kochare{
    width: 40vw;
}
.first__title .first__title__text{
    font-size: 4.6vw;
    font-weight: 700;
    margin: 2.5vw 0 0;
}
.first__title span{
    font-size: 7.466vw;
    font-weight: 600;
}

.card .card__inner {
    display: block;
}
.card .card__img{
    width: 100%;
    padding: 3vw 3vw 0;
    margin: auto;
    box-sizing: border-box;
}
.card__inner .card__img img {
    width: 100%;
    height: 196.425px;
    border-radius: 2.733vw 2.733vw 0px 0px;
    box-sizing: border-box;
}
.card__inner .card__body {
    padding: 5.6vw 8vw;
    text-align: center;
}
.first__view .first__title{
    text-align: center;
}

.kouza_modal {
    position: fixed;
}

.kouza_modal .c-modal-inner {
    overflow-y: scroll;
    max-height: 80vh;
    scrollbar-width: none;       /* Firefox スクロールバーを非表示 */
    -ms-overflow-style: none;    /* IE, Edge スクロールバーを非表示 */
}

.kouza_modal .c-modal-inner::-webkit-scrollbar {  /* Chrome, Safari スクロールバーを非表示 */
    display:none;
}

@media screen and (max-width: 767px) {
    .kv__pc{
        display: none;
    }
    .tab__box .tab__btn:nth-child(n + 3){
        margin-top: 4.8vw;
    }
    footer .footer-wrapper .link-list{
        display: block;
        line-height: 1;
    }
    footer .footer-wrapper .link-list li{
        margin-top: 7px;
    }
    footer .footer-wrapper .link-list li:first-of-type{
        margin-right: 0;
        margin-top: 0;
    }
    
}


@media screen and (min-width: 768px) {
    html{
        width: 100%;
    }
    .button__box{
        display: flex;
    }
    body{
        min-width: 1200px;
    }
    .button{
        margin-bottom: 28px;
        position: relative;
        border-radius: 88.3152px;
        max-width: 200px;
        background-color: #045bac;
        box-shadow: 7px 7px 15px rgb(55 84 170 / 15%), -7px -7px 20px #fff, 0 0 4px hsl(0deg 0% 100% / 20%);
        text-align: left;
        height: 50px;
        margin: 35px 0 0;
    }

    .button__twin{
        width: 200px;
        margin: 20px 30px 0 0;
    }
    .button__kocha{
        margin-top: 15px;
    }
    .button__sho{
        margin: 20px 30px 0 0;
    }
    .button__kou{
        margin-top: 30px;
    }
    .tab__btn:hover{
        opacity: 0.6;
        transition: 0.05s;
    }
    
    .button__box .button__twin ::after{
        background-image: url(/zemi/online_taiken/assets/img/btn_burette.svg);
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 15px;
        height: 15px;
        margin: auto;
        position: absolute;
        top: 2px;
        bottom: 0;
        right: 3px;
    }
    .button_link{
        align-items: center;
        justify-content: center;
        padding: 15px 10px;
        border-radius: 9px;
        color: inherit;
        font-size: 18px;
        font-weight: 550;
        text-decoration: none;
        line-height: 1.1;
        letter-spacing: .02em;
        overflow: hidden;
        color: #fff;
        text-align: center;
    }
    .button_link--twin{
        font-size: 17px;
        padding: 17px 10px 13px 0px;
        letter-spacing: 0;
    }
    .button_link--kou{
        font-size: 15px;
    }

    .button ::after{
        background-image: url(/zemi/online_taiken/assets/img/btn_burette.svg);
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 18px;
        height: 18px;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
    }
    .button:hover{
        opacity: 0.7;
    }
    .tab__box .tab__panel.active {
        max-width: 1440px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 50px;
        padding-left: 30px;
    }

    .card__inner .card__body{
        width: 50%;
        padding: 0 30px;
        text-align: left;
        margin-top: 36px;
    }

    .card{
        max-width: 970px;
        margin: 35px auto;
        border-radius: 40px;
    }

    .card .card__img{
        width: 50%;
        padding: 12px 0px 12px 12px;
        margin: 0;

    }
    .card__inner .card__img img{
        width: 458px;
        height: 269.875px;
        border-radius: 40px 0px 0px 40px;
    }
    .kv__sp{
        display: none;
    }
    body .kv__pc{
        height: 486px;
        width: 1200px;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;

    }
    .kv__item--logo--pc {
        position: absolute;
        top: 150px;
        left: 225px;
        height: 494px;
    }
    .kv__contents--pc{
        position: relative;
    }
    
    .kv__item--pc{
        position: absolute;
    }
    
    .kv__item--01--pc{
        position: absolute;
        right: 355px;
        top: -20px;
    }
    .kv__item--02--pc{
        position: absolute;
        top: 100px;
        right: 50px;

    }
    .kv__item--03--pc{
        position:absolute;
        right: -95.5px;
        top: 45px;
    }
    .kv__item--04--pc{
        position:absolute;
        top: 410px;
        left: 410px;
    }
    .kv__item--05--pc{
        position: absolute;
        top: -20px;
        right: 60px;
    }
    .kv__item--06--pc{
        position: absolute;
        right: -148px;
        top: 255px;
    }
    .kv__item--07--pc{
        position: absolute;
        top: 415px;
        right: -162px;
    }
    .kv__item--08--pc{
        position: absolute;
        left: -50px;
        top: 335px;
    }
    .kv__item--09--pc{
        position: absolute;
        left: 120px;
        top: -19px;
    }
    .kv__item--10--pc{
        position: absolute;
        left: -40px;
        top: 95px;
    }
    .tab__box{
        padding-top: 58px;
        padding-bottom: 72px;
        width: 100%;
    }
    .btn__h2 h2{
        font-size: 15px;
        color: #242f38;
        margin-bottom: 20px;
        font-weight: 700;
    }
    .tab__box .tab__btn{
        text-align: center;
        border-radius: 5.466vw;
        background-color: #ebecf0;
        color: #045bac;
        cursor: pointer;
        transition: all 0.2s ease 0s;
        box-shadow:  5px 5px 10px #cfcfcf,-5px -5px 8px #ffffff;
        font-weight: 900;
        width: 200px;
        height: 48px;
        font-size: 15px;
        box-sizing: border-box;
        padding: 15px 20px;
    }
    .tab__box .btn__area{
        display: flex;
        margin:0  auto;
        width: 1000px;
        padding:0;
    }
    .card .card__inner{
        display: flex;
    }
    .first__title{
        width: 370px;
        margin: 0 auto;
    }
    .first__title .first__title__text{
        font-size: 23px;
        margin-top: 15px;
        
    }
    .first__title span{
        font-size: 30px;
        font-weight: 600;
    }
    .first__logo img{
        max-width: 313px;
    }
    .tab__box .tab__panel.active{
        margin-top: 80px;
    }
    .card__body .card__subject{
        font-size: 15px;
        margin-bottom: 0;
    }
    .card__title{
        font-size: 23px;
        margin-top: 18px;
    }
    .card__body .card__subtitle{
        font-size: 14px;
        margin-top: 18px;
    }
    .card__note{
        font-size: 10px;
        margin-top: 8px;
    }
    .sp-hidden{
        display: none;
    } 
    .first__view .logo__kochare{
        width: 230px;
    }
    .card + .card{
        margin-top:45px;
    }
    footer .footer-wrapper .link-list li{
        margin-right: 20px;
    }
    footer .footer-wrapper .link-list li:last-of-type{
        margin-right: 0;
    }

}