body p, body span{
    color: #222;
    font-weight: 400;
}
/* 左の余白100px用 */
.left_margin{
    margin-left: 7.32vw;
}
/* fontweight700用 */
.bold{
    font-weight: 700;
}
/* fontweight500用 */
.mide{
    font-weight: 500;
}
/* display:flex用 */
.flex_box{
    display: flex;
}

.head_visual_block{
    position: relative;
}
.head_visual_block span{
    content: "";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 7.32vw;
    transform: translateY(-50%);
}
.link_block{
    display: flex;
    gap: 10px;
    margin-bottom: 2.3426vw;
    margin-top: 2.3426vw;
}
.link_block span:first-child{
    color: #36A4B3;
}

.insta_cnt .ttl_block{
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2.7vw;
}
.aie_j_img{
    width: 28vw;
}
.main_ttl_img{
    width: 28.655vw;
    margin-top: auto;
}

.aie_insta_items{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 50%;

    background-image: url(../img/highschool/AIE_insta_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 51.317715959vw;
}
.aie_insta_back_txt{
    position: absolute;
    top: 0%;
    left: 0%;
}
.aie_insta_ttl{
    width: 25.3294vw;
    margin-bottom: 2.19vw;
}
.insta_img_items{
    width: fit-content;
    margin-bottom: 2.56vw;
}
.insta_img_items div{
    width: 20vw;
}
.insta_btn{
    width: 29.28vw;
    cursor: pointer;
}
.insta_btn a{
    width: 29.28vw;
    cursor: pointer;
}



.j_insta_items{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: auto;

    background-image: url(../img/highschool/J_insta_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 51.317715959vw;
}
.j_insta_back_txt{
    position: absolute;
    top: 0%;
    left: 0%;
}
.j_insta_ttl{
    width: 25.3294vw;
    margin-bottom: 2.19vw;
}
.insta_img_items{
    width: fit-content;
    margin-bottom: 2.56vw;
}
.insta_img_items div{
    width: 20vw;
}

.j_insta_ttl{
    width: 22.7672vw;
}




.panorama_block{
    position: relative;
    width: 100%;
    height: 56vw;
    background-image: url(../img/highschool/pano_back_img.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.pano_top{
    margin-top: 7vw;
    gap: 12vw;
}
.pano_txt{
    width: 32vw;
    margin-left: 12.5915vw;
}
.pano_top span{
    color: #fff;
    text-shadow: 4px 6px #222;
    margin-top: auto;
    margin-bottom: -1vw;
}

.pano_img_l{
    position: absolute;
    bottom: 0;
    left: 7%;
    width: 25.47584vw;
}
.check_img{
    position: absolute;
    bottom: 10%;
    left: 33%;
    width: 25.543vw;
}
.pano_img_r{
    position: absolute;
    bottom: 0;
    right: 6%;
    width: 30.8vw;
}

.learn_cnt{
    margin-top: 4.6852vw;
}
.learn_cnt .ttl_block{
    width: fit-content;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 2.56vw;
}
.learn_cnt .ttl_block .maker{
    border: 10px solid;
    border-image: url(../img/highschool/border_img_01.png) 60 / 0 0 40px 0;
    padding-bottom: 0.8vw;
}
.learn_cnt .ttl_block span{
    margin-top: auto;
}


.aie_learn_items{
    flex: 0 0 50%;

    background-image: url(../img/highschool/AIE_learn_img.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 51.317715959vw;
}
.aie_learn_ttl{
    margin-top: 6.954612vw;
    margin-bottom: 2.63543vw;
}
.aie_learn_ttl .flex_box{
    justify-content: center;
}
.learn_info_items p{
    width: 80%;
    margin: 0 auto;
}
.aie_effect_img{
    position: relative;
    width: 13.1vw;
}
.aie_effect_img::before{
    position: absolute;
    content: url(../img/highschool/efect_img.png);
    top: -85%;
    left: -23%;
    transform: scale(0.5);
    z-index: 1;
}
.info_btn{
    width: fit-content;
    margin: 0 auto;
    border: 1px solid #222222;
    padding: 1vw 4.6852vw;
    border-radius: 50%;
    margin-top: 2.56vw;
}




.j_learn_items{
    flex: auto;

    background-image: url(../img/highschool/J_learn_img.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 51.317715959vw;
}
.j_learn_items span , .j_learn_items p{
    color: #fff;
}
.j_effect_img{
    width: 14.91142vw;
}

.j_learn_ttl{
    margin-top: 6.954612vw;
    margin-bottom: 2.63543vw;
}
.j_learn_ttl .flex_box{
    justify-content: center;
}
.learn_info_items p {
    width: 70%;
    margin: 0 auto;
}
.j_effect_img{
    position: relative;
    width: 13.1vw;
}
.j_effect_img::before{
    position: absolute;
    content: url(../img/highschool/J_efect_img.png);
    top: -90%;
    left: -103%;
    transform: scale(0.5);
    z-index: 1;
}
.j_info_items p {
    width: 65%;
    margin: 0 auto;
}
.j_info_items .info_btn{
    border: 1px solid #fff;
    transition: all 0.6s;
}
.j_info_items .info_btn:hover{
    border: 1px solid #222222;
    opacity: 0.8;
}
.j_info_items .info_btn span{
    transition: all 0.6s;
}
.j_info_items .info_btn:hover span{
    color: #222222;
}

.school_life_cnt{
    margin-top: 6.588vw;
}
.school_life_cnt .ttl_block{
    width: fit-content;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 2.56vw;
}
.school_life_cnt .ttl_block .maker{
    border: 10px solid;
    border-image: url(../img/highschool/border_img_02.png) 60 / 0 0 40px 0;
    padding-bottom: 0.8vw;
}
.school_life_cnt .ttl_block span{
    margin-top: auto;
}

.oneday_block{
    gap: 3.66vw;
    margin: 0 7.12vw;
    margin-bottom: 9.5vw;
}

.oneday_block .aie_oneday{
    position: relative;
}
.oneday_block .aie_oneday .aie_oneday_btn{
    position: absolute;
    bottom: -2%;
    left: 0;
    width: 21.7789vw;
}

.oneday_block .j_oneday{
    position: relative;
}
.oneday_block .j_oneday .j_oneday_btn{
    position: absolute;
    bottom: -2%;
    left: 0;
    width: 21.7789vw;
}



.ocan_cnt{
    height: 125.764vw;
}
.ocan_cnt .ttl img{
    width: auto;
    height: 5vw;
    max-height: 80px;
    min-height: 50px;
}
.slide_block{
    justify-content: center;
    align-items: center;
    gap: 0.732vw;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222222;
}
.slide_aie_txt{
    color: #00B0C7;
}
.slide_block .slide_aie_img{
    width: 4.425vw;
}
.slide_block .slide_j_img{
    width: 4.6vw;
}
.slide_block .slide_open_img{
    width: 2.945vw;
}

.main_block{
    position: relative;
    padding-bottom: 6.2vw;
}
.main_items{
    position: absolute;
    top: 60.5%;
    padding-top: 13.25vw;
    left: 0;
    z-index: 3;
    background: #FBFBFB;
    border-radius: 40px 40px 0 0;
}
.main_block .ocan_mid_img{
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 25.6954612vw;
}
.main_items > span{
    margin: 0 auto;
    display: block;
    width: fit-content;
    background: linear-gradient(90.14deg, rgba(0, 176, 199, 0.2) 0.06%, rgba(119, 99, 165, 0.2) 99.88%);
    transform: rotate(-2deg);
}
.main_items .pink{
    color: #EA66A1;
}

.main_block .txt_box{
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 1.756954612vw;
}
.ocan_info{
    position: relative;
    width: 50%;
    margin: 0 auto;
}
.ocan_info::before{
    position: absolute;
    content: url(../img/highschool/ocan_ttl_iimg_l.png);
    top: -74%;
    left: -53%;
    transform: scale(0.5);
    z-index: 1;
}
.ocan_info::after{
    position: absolute;
    content: url(../img/highschool/ocan_ttl_img_r.png);
    top: -80%;
    right: -45%;
    transform: scale(0.5);
    z-index: 1;
}
.ocan_info .ttl_block {
    max-width: max-content;
    margin: auto;
}
.ocan_info .ttl_block .base{
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 1.68vw;
}
.ocan_info .ttl_block .stroke {
    position: absolute;
    color: #fff;
    -webkit-text-stroke: 1px #222;
    top: 1%;
    left: 1%;
    right: 0;
    margin: auto;
    width: max-content;
}

.ocan_info p{
    text-align: center;
}


.main_block .flex_box{
    gap: 4.39238653vw;
    align-items: center;
    justify-content: center;
}
.aie_btn_img{
    display: block;
    width: 40.7vw;
}
.j_btn_img{
    display: block;
    width: 40.263543vw;
}

.follow_block{
    margin: 0 7.32vw;
    margin-bottom: 7.32vw;
}
.follow_block > span{
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 1.61vw
    ;
    color: #fff;
    font-weight: 700;
    -webkit-text-stroke: 1px #222;
    text-shadow: 0px 5px #222;
}
.aie_follow_items{
    position: relative;
    height: fit-content;
}
.aie_follow_items .flex_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    gap: 2.3426vw;
}
.j_follow_items .flex_box div{
    width: 3.5139vw;
}
.j_follow_items{
    position: relative;
    height: fit-content;
}
.j_follow_items .flex_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    gap: 2.3426vw;
}
.j_follow_items .flex_box div{
    width: 3.5139vw;
}

@media screen and (max-width:1024px) {
    .f18 {
        font-size: 1.317715959vw;
    }
    .f16 {
        font-size: 1.1713030747vw;
    }
    .info_btn{
        padding: 1vw 2.6852vw;
    }
    .j_effect_img::before{
        top: -15%;
        left: -132%;
        transform: scale(0.4);
    }
    .aie_effect_img::before{
        top: -116%;
        left: -32%;
        transform: scale(0.4);
    }
    .main_block .ocan_mid_img{
        top: -28%;
    }
    .ocan_info::after{
        transform: scale(0.3);
        top: -112%;
        right: -54%;
    }
    .ocan_info::before{
        transform: scale(0.3);
        top: -100%;
        left: -60%;
    }
}
@media screen and (max-width:768px) {
    .pano_top span{
        margin-top: auto;
        margin-bottom: 2vw;
    }
    .pano_txt{
        margin-top: 3vw;
    }
    .j_effect_img::before{
        top: -27%;
        left: -174%;
        transform: scale(0.3);
    }
    .aie_effect_img::before {
        top: -152%;
        left: -43%;
        transform: scale(0.3);
    }
    .learn_cnt .ttl_block .maker{
        border-image: url(../img/highschool/border_img_01.png) 54 / 0 0 30px 0;
    }
    .school_life_cnt .ttl_block .maker{
        border-image: url(../img/highschool/border_img_02.png) 60 / 0 0 30px 0;
    }
    .ocan_info::before {
        transform: scale(0.24);
        top: -164%;
        left: -73%;
    }
    .ocan_info::after {
        transform: scale(0.24);
        top: -178%;
        right: -60%;
    }
    .main_block .flex_box{
        margin-top: 5vw;
    }
}
@media screen and (max-width:480px) {
    .head_visual_block{
        height: 200px;
    }
    .head_visual_block img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .link_block span{
        font-size: 14px;
    }
    .insta_main_block{
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    .insta_img_items{
        display: block;
    }
    .aie_insta_items{
        height: auto;
        padding-bottom: 20px;
    }
    .j_insta_items{
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-bottom: 30px;
        height: auto;
    }
    .aie_insta_ttl , .j_insta_ttl{
        width: 233px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .insta_img_items div {
        width: 80%;
        margin: 0 auto;
    }
    .insta_img_items .AIE_insta_l,.insta_img_items .J_insta_l{
        margin-bottom: 20px;
    }
    .insta_btn {
        width: 280px;
        cursor: pointer;
    }
    .pano_txt {
        width: 136px;
        margin-left: 21px;
    }
    .pano_top span{
        text-shadow: 2px 4px #222;
        font-size: 30px;
    }
    .pano_img_l{
        left: 3%;
        width: 120px;
    }
    .check_img{
        width: 140px;
    }
    .pano_img_r{
        width: 140px;
    }




    .learn_cnt .ttl_block{
        display: block;
        margin-bottom: 20px;
    }
    .aie_j_img {
        width: 250px;
    }
    .learn_cnt .ttl_block span, .school_life_cnt .ttl_block .maker {
        margin-top: auto;
        font-size: 30px;
    }
    .learn_cnt .ttl_block .maker {
        border-image: url(../img/highschool/border_img_01.png) 60 / 0 0 30px 0;
    }
    .learn_main_block{
        display: block;
    }
    .aie_learn_items{
        height: auto;
        width: 90%;
        margin: 0 auto;
        padding: 10px 0 130px 0;
    }
    .aie_learn_ttl .flex_box{
        align-items: center;
    }
    .aie_learn_ttl {
        margin-top: 20px;
        margin-bottom: 15px;
    }
    .f30 {
        font-size: 16px;
    }
    .aie_effect_img{
        width: 120px;
    }
    .aie_effect_img::before{
        top: -124%;
        left: -37%;
    }
    .f30 {
        font-size: 16px;
    }
    .learn_info_items p{
            width: 90%;
    }
    .f18 {
        font-size: 14px;
    }
    .info_btn{
        padding: 5px 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .f16 {
        font-size: 14px;
    }




    .j_learn_items{
        height: auto;
        width: 90%;
        margin: 0 auto;
        padding: 10px 0 130px 0;
    }
    .j_learn_ttl .flex_box{
        align-items: center;
    }
    .j_learn_ttl {
        margin-top: 20px;
        margin-bottom: 15px;
    }
    .f30 {
        font-size: 20px;
    }
    .j_effect_img{
        width: 120px;
    }
    .j_effect_img::before{
        top: -124%;
        left: -37%;
    }
    .learn_info_items p{
        width: 90%;
    }
    .j_effect_img::before{
        top: -18%;
        left: -153%;
        transform: scale(0.4);
    }
    .j_learn_ttl .flex_box {
        align-items: end;
    }
    .j_info_items p{
        width: 90%;
    }


    .school_life_cnt .ttl_block{
        display: block;
        margin-bottom: 20px;
    }
    .school_life_cnt .ttl_block span {
        margin-top: auto;
        font-size: 20px;
    }
    .school_life_cnt .ttl_block .maker {
        border-image: url(../img/highschool/border_img_02.png) 60 / 0 0 30px 0;
    }
    .oneday_block{
        display: block;
    }
    .oneday_block .aie_oneday{
        margin-bottom: 20px;
    }
    .oneday_block .aie_oneday .aie_oneday_btn{
        width: 190px;
        z-index: 5;
    }
    .oneday_block .j_oneday{
        margin-bottom: 20px;
    }
    .oneday_block .j_oneday .j_oneday_btn{
        width: 190px;
        z-index: 5;
    }
    .slide_block{
        overflow: hidden;
        white-space: nowrap;
    }
    .f42 {
        font-size: 30px;
    }
    .slide_block .slide_aie_img, .slide_block .slide_j_img, .slide_block .slide_open_img{
        display: none;
        width: 40px;
        height: fit-content;
    }

    .main_items{
        top: 220px;
        padding-top: 130px;
        padding-bottom: 40px;
    }
    .main_block .ocan_mid_img{
        top: -95px;
    }
    .main_block .ocan_mid_img {
        top: -90px;
        width: 180px;
    }
    .ocan_info{
        width: 100%;
    }
    .ocan_info p{
        width: 90%;
        margin: 0 auto;
    }
    .ocan_info::before {
        transform: scale(0.18);
        top: -220%;
        left: -40%;
    }
    .f64 {
        font-size: 25px;
    }
    .ocan_info .ttl_block .stroke{
        top: 1px;
        left: 84px;
        display: none;
    }
    .ocan_info::after {
        transform: scale(0.18);
        top: -231%;
        right: -33%;
    }

    .main_block .flex_box{
        display: block;
    }
    .aie_btn_img {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .j_btn_img {
        width: 90%;
        margin: 0 auto;
    }

    .follow_block {
        /* margin: 0 7.32vw; */
        width: 90%;
        margin: 0 auto;
        margin-top: 390px;
        margin-bottom: 20px;
    }
    .follow_block > .flex_box{
        display: block;
    }
    .f56 {
        font-size: 40px;
    }
    .aie_follow_items{
        margin-bottom: 10px;
    }
    .aie_follow_items .flex_box{
        gap: 20px;
    }
    .aie_follow_items .flex_box div{
        width: 50px;
        height: fit-content;
    }


    .j_follow_items{
        margin-bottom: 10px;
    }
    .j_follow_items .flex_box{
        gap: 20px;
    }
    .j_follow_items .flex_box div{
        width: 50px;
        height: fit-content;
    }
    .main_ttl_img{
        width: 230px;
    }
    .insta_cnt .ttl_block{
        display: block;
    }
}
