.article-top-area{
    background:linear-gradient(70deg,#FFF8F1,#E7DED6);
    width:100%;
    height:250px;
    position:relative;
    margin-top:0px;
}
.article-top-area p{
    font-family: "Noto Serif JP" ,sans-serifs;
    font-size: 40px;
    font-optical-sizing: auto;
    border-bottom:1px solid;
    padding-bottom:3px;
    box-sizing: border-box;
    display:inline-block;
    position:absolute;
    top:80px;
    left:80px;
}

.article-container{
    width:100%;
    margin-top:20px;
    position: relative;
}
.main-article{
    width: 850px;
    margin-left: calc(100vw - 980px);
}
.voice-text{
    margin-top: 80px;
    position: relative;
    width:100%;
    height:240px;
}
.voice-text p{
    width: 80%;
    position: absolute;
    left:50%;
    transform: translate(-50%,0);
    bottom: 150px;
}

@media screen and (min-width:1265px){
    .main-article{
        margin-left: 285px;
        right:calc(100vw - 1265px);
    }
}
.voice-index{
    width: 80%;
    height:120px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 0;
    border-top: 1.5px dashed #586D82;
    border-bottom: 1.5px dashed #586D82;
    background-color: #fff;
    padding:10px;
}
.voice-index p{
    font-size: 25px;
    text-align: center;
    top:10px;
}
.index-container{
    position: absolute;
    left:50%;
    transform: translate(-50%,0);
    top: 50px;
    display: block;
}
.index-container ul{
    margin-right: 20px;
    display: flex;
}
.index-container ul li{
    list-style: none;
    margin-left: 20px;
    width: 80px;
}
.index-2{
    top:40px;
}
.before-study{
    color: #586d8286;
}

.index-fake{
    height:80px;
}
.terms{
    width:100%;
    aspect-ratio: 32/21;
    background-color: #ffffffa0;
    padding: 10px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.arrow{
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    border:none;
    background-color: #FFF0;
    color: #586D82;
    font-size:30px;
    cursor: pointer;
    z-index: 10;
    transition: 0.5s ease;
    width:6%;
    height:68%;
    z-index: 1;

}
.right{
    padding-right: 10px;
    right:0px;
    background: linear-gradient(to left, #fff,#fff0);
}
.left{
    left:0;
    background: linear-gradient(to right, #fff,#fff0);
}
.arrow.disabled {
  color: #ccc;          /* グレーなど */
  pointer-events: none; /* 押せなくする */
  cursor: default;
  opacity: 0.5;
  transition: 0.5s ease;
}

.timetable-slide-wrapper{
    position: relative;
    overflow: hidden;
    width: 100%;
}
.timetables{
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    width: 100%;
}
.timetable{
    z-index: 999;
    width:90%;
    aspect-ratio: 32/16;
    position: relative;
    margin-left: 5%;
    margin-right: 5%;
    flex-shrink: 0;
    box-sizing: border-box;
}
.timetable-index{
    font-size: 20px;
    margin-top:10px;
    margin-left:10px;
}
.timetable-index span{
    text-decoration: underline;
}
.timetable-index::before{
    font-family:"Font Awesome 5 Free";
    content: "\f005";
    position: relative;
    text-decoration: none;
    font-weight: 900;
    color:rgb(253, 228, 4);
}
.timetable-pic{
    background-color: #E7DED6;
    width:80%;
    top:10px;
    left:0;
    aspect-ratio: 5/3;
    position: absolute;
    border-radius:0px;
    text-align: center;
}
.timetable-comment-pc{
    position: absolute;
    width:17%;
    top:10px;
    left: calc(80% + 10px);
    height: auto;
    text-align: center;
}
.timetable-comment-phone{
    display: none;
}
.timetable-stu-img{
    width:17%;
    position: absolute;
    left: calc(80% + 10px);
    bottom:10px;
}
.class-explain{
    z-index: 1;
    width: 90%;
    height:120px;
    margin-left:5px;
    margin-left:30px;
    position: absolute;
    bottom: 0;
    display: flex;
}
.required-class{
    position: relative;
    width:40%;
    left:2%;
}
.choice-class{
    position: relative;
    width: 58%;
    margin-left:10px;
}

.class-explain p{
    font-weight: bold;
}

.class-explain li{
    display: inline-block;
    margin-left: 5%;
    color: #E1996D;
    text-decoration: underline;
}
.class-explain li::before{
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    font-size: 15px;
    left:1em;
    color: #E1996D;
}

.popup-container{
    display: flex;
}
.popup-background{
    z-index: 8;
    top:0;
    left:0;
    position:fixed;
    height: 100vh;
    width: 100vw;
    background-color: #586d822f;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.popup-flag:checked + .popup-background{
    opacity: 1;
    pointer-events: auto;
}
.popup{
    position:fixed;
    width:500px;
    height:auto;
    background-color: #FFFFFF;
    z-index: 1000;
    box-shadow: 2px 2px 8px 2px #ada59f;

    overflow: hidden;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(0.8);
    padding: 0 20px 15px 15px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup-flag:checked + .popup-background + .popup{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


.popup h3{
    margin-top: 0px;
    background-color: #E1996D;
    color: #FFFFFF;
    padding-top:10px;
    padding-bottom: 5px;
    margin-left: -15px;
    margin-right: -20px;
    padding-left:15px;
}
.popup p{
    margin-top: 10px;
}
.popup > .close-btn{
    position: absolute;
    top:0px;
    font-size:30px;
    right:10px;
    color: #FFFFFF;
    font-weight: bold;
}

.popup-flag{
    display: none;
}


@media screen and (max-width:980px){
    .article-top-area{
        height: 200px;
    }
    .article-top-area p{
        font-size: 35px;
        left:35px;
        top:70px;
    }
    .main-article{
        width:90%;
        margin: 0px 5%;
    }

    .blog-nav{
        width: 88vw;
        height: 85px;
        padding: 0 0 15px 15px;
        border-left: none;
        margin:0px 5%;
        margin-top:30px;
        border-radius: 10px;
        background-color: rgba(240, 248, 255, 0.155);
        outline: #586D82 dashed 1px;
    }
    .blog-nav h4{
        position:absolute;
        top:5px;
        width:auto;
    }
    .nav-archive{
        margin-left: 280px;
    }
    .voice-text{
        height: 280px;
        margin-left: 0;
    }
    .category{
        position: absolute;
        top:30px;
        width:250px;
        height:auto;
        border-left: none;
    }
    .blog-nav ul{
        display: flex;
        flex-wrap: wrap;
    }
    .blog-nav li{
        font-size: 15px;
        margin-left: 10px;
    }
    .terms{
        height: calc(48vw + 120px);
    }
    .class-explain{
        bottom:0%;
    }
    
}@media screen and (max-width:599px){
    .article-top-area{
        height: 200px;
    }
    .article-top-area p{
        font-size: 35px;
        left:35px;
        top:70px;
    }
    .main-article{
        width:95%;
        margin:0 auto;
    }
    .voice-index{
        width: 90%;
    }

    .index-fake{
        height:70px;
    }
    .terms{
        height:calc(80vw + 170px);
    }
    .arrow{
        font-size: 25px;
        height:60%;
        top:40%;
    }
    .timetable{
        aspect-ratio: 8/7;
    }
    .timetable-pic{
        width:100%;
        top: 13px;
    }
    .timetable-stu-img{
        width: 20%;
        height:auto;
        bottom: 0;
        left: auto;
        right: 20px;
    }
    .timetable-comment-pc{
        display: none;
    }
    .timetable-comment-phone{
        display: block;
        position: absolute;
        width:70%;
        top:265px;
        bottom: 0;
        left:auto;
        right:calc(20% + 15px);
    }
    .class-explain{
        margin-bottom: 0px;
        height:150px;
        margin-left: 15px;
    }
    .class-explain li{
        margin-left: 0;
        margin-top: 5px;
    }
    .choice-class{
        width:53%;
        left:5%;
    }
    .popup{
        width:80vw;
    }
}
html{
    scroll-behavior: smooth;
}