@charset "utf-8";

.slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slide-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: slideAnimation 12s infinite;
}

.slide-img:nth-of-type(1) {
    background-image: url(../img/firstview_signboard.jpg);
    animation-delay: 0s;
}

.slide-img:nth-of-type(2) {
    background-image: url(../img/firstview_lesson.jpg);
    animation-delay: 3s;
}

.slide-img:nth-of-type(3) {
    background-image: url(../img/firstviwe_showcase.jpg);
    animation-delay: 6s;
}

.slide-img:nth-of-type(4) {
    background-image: url(../img/firstview_circle.jpg);
    animation-delay: 9s;
}

@keyframes slideAnimation {
    0%,
    30%,
    100% {
        opacity: 0;
    }
    10%,
    20% {
        opacity: 1;
    }
}

.news,
.about,
.instructor,
.system,
.access {
    width: 100%; 
    max-width: 1200px;
    margin: clamp(5rem, 3.239rem + 7.51vw, 10rem) auto;
}

/* ボタンアニメーション */
.news .btn,
.instructor .btn {
    width: 40%;
    margin: 0 auto;
    text-align: left;
}

.about .btn,
.system .btn {
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

.btnText {
    display: inline-block;
    position: relative;
    width: 100%;
    min-width: 320px;
    padding: 20px 30px;
    background-color: #00b0ba;
    border-radius: 50px;
    color: #fafafa;
    font-size: clamp(1.5rem, 1.324rem + 0.75vw, 2rem);
    transition: color .5s, background-color .5s;
}

.btn a::before,
.btn a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 30px;
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .5s;
}

.btn a::before {
    background-image: url(../img/arrow_green.png);
}
.btn a::after {
    background-image: url(../img/arrow_orange.png);
    opacity: 0;
}

.btn a:hover {
    background-color: #f9a638;
}

.btn a:hover::before {
    opacity: 0;
}

.btn a:hover::after {
    opacity: 1;
}

.spbr {
    display: none;
}

.news-contents,
.about-contents,
.system-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 40px;
}

.about-contents img,
.aboutText,
.system-contents img,
.systemText {
    width: 45%;
    margin: 0 auto;
}

.news h2,
.aboutText h2,
.instructor h2,
.systemText h2 {
    color: #2981c0;
    font-size: clamp(1.5rem, 0.972rem + 2.25vw, 3rem);
    font-weight: bold;
    margin-block-end: 20px;
}

.news h2,
.instructor h2 {
    text-align: center;
}

.aboutText h3,
.systemText h3 {
    color: #333;
    font-size: clamp(1.25rem, 0.986rem + 1.13vw, 2rem);
    font-weight: bold;
    margin-block-end: 20px;
}

.aboutText p,
.instructor p,
.systemText p {
    font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
    line-height: 1.5rem;
    margin-block-end: 40px;
}

.banner {
    width: 30%;
    margin: 0 auto;
    text-align: center;
}

.banner img {
    transition: all .5s;
}

.banner img:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 5px rgb(0 0 0 / .3)
}

.banner dt {
    color: #333;
    font-size: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem);
    font-weight: bold;
    padding: 10px 0 5px;
}

.banner dd {
    font-size: clamp(1rem, 0.912rem + 0.38vw, 1.25rem);
}

.instructor p {
    text-align: center;
}

.loopSlide {
    display: flex;
    overflow: hidden;
    margin-block-end: 40px;
}

.sliderList {
    display: flex;
}

.sliderList-left {
    animation: loopSlideLR 60s infinite linear 0.5s both;
}

.sliderList li {
    width: calc(100vw / 5);
}

@keyframes loopSlideLR {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
}

.system-contents {
    flex-direction: row-reverse;
}

/* ここから768px以下のデザイン設定 */
@media (max-width: 768px) {
    .spbr {
        display: block;
    }
    
    .news-contents,
    .about-contents,
    .system-contents {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    .news .btn,
    .about .btn,
    .instructor .btn,
    .system .btn {
        width: 50%;
        margin: 0 auto;
        text-align: left;  
    }

    .about-contents img,
    .aboutText,
    .system-contents img,
    .systemText {
       width: 100%;
       text-align: center;
    }

    .about h2,
    .system h2 {
        margin-block-start: 40px;
        text-align: center;
    }

    .banner {
        width: 80%;
        margin-block: 40px;
    }
}

@media (max-width: 428px) {
    .news .btn,
    .about .btn,
    .instructor .btn,
    .system .btn {
        width: 90%;
        margin: 0 auto;
        text-align: left;  
    }

    .btnText {
        width: 100%;
        min-width: 200px;
    }

    .sliderList li {
        width: calc(100vw / 3);
    }
}