@charset "UTF-8";

.bg-scroll {
    background: url(../../images/course/allhands.jpg) fixed center center;
    padding-top: 250px;

    min-height: 60vh;
    min-width: 100vw;
    height: 60%;
    min-width: 100%;
    width: auto;
    height: auto;
    background-size: cover;
    display: flex;
    position: relative;
}


h1 {
    font-size: 3.4rem;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    color: #3e3a39;
    text-shadow: 0 0 10px #ffffff, 0 0 10px #ffffff, 0 0 10px #ffffff, 0 0 10px #ffffff, 0 0 10px #ffffff;
}

h1 span {
    font-size: 1.3rem;
    font-family: "Noto Serif", serif;
    text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
    display: block;
}

.anchor {
    text-align: center;
    margin-top: 75px;
}

.anchor li {
    display: inline-block;
    text-align: center;
}

.anchor li span {

    display: block;
    font-size: 0.6rem;
}

.anchor li a {
    font-family: "Noto Serif", serif;
}

.anchor li + li {
    padding-left: 100px;
}

.anchor li:nth-of-type(3) {
    padding-left: 100px;
}

.anchor a::after {
    content: url("../../images/arrow-down.png");
    display: block;
    position: relative;
    transition: bottom 1s ease-in-out;
}

.anchor a:hover::after {
    bottom: -5px;
}

.content1 h2 {
    /* font-family: "Noto Serif", serif; */
}
@media only screen and (max-width: 767px) {
    .content1 h2 {
        font-size: 2rem;
    }
    .content1 h2 span {
        font-size: 0.9rem;
    }
}

/*コンテンツ2*/
.course-box-flex {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 60px;
    margin-right: -50px;
}

.course-box {
    cursor: pointer;
    -webkit-box-shadow: 0 0 12px rgb(0 0 0 / 9%);
    box-shadow: 0 0 12px rgb(0 0 0 / 9%);
    border-radius: 8px;
    position: relative;
    background: white;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    margin-right: 50px;

}

.course-box:hover {
    opacity: .7;
}

.course-box h3 {
    font-family: "Noto Serif", serif;
    font-size: 1.3rem;
    text-align: left;
    margin-top: 30px;
}

.course-box h4 {
    font-family: "Noto Serif", serif;
    font-size: 1.1rem;
    text-align: left;
}

.course-box-inner {
    padding: 30px;
    padding-bottom: 80px;
}

.course-box .certification {
    border: 1px solid #C2B8A8;
    border-radius: 8px;
    padding: 10px;
    margin-top: 30px;
}

.course-box .certification p {
    font-size: 16px;
    text-align: left;
    display: inline;
    color: #333;
    margin-top: 15px;
    line-height: normal;
}


.course-box .certification strong {
    font-size: 14px;
    line-height: normal;

}

.course-box p {
    color: #333;
    line-height: normal;
    font-family: 'Open Sans', sans-serif, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue";
}


.course-box .course-description {
    margin-top: 45px;

}

.course-box li {
    color: #333;
    list-style: circle;
    list-style-position: inside;
    font-family: 'Open Sans', sans-serif, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue";
}



.course-box-flex .course-box:nth-last-of-type(2)::after,
.course-box-flex .course-box:nth-of-type(1)::after {
    content: "";
    background-image: url(../../images/course/arrow-level.png);
    background-size: contain;
    width: 40px;
    height: 40px;
    position: absolute;
    display: block;
    right: -45px;
    top: 50%;
}

.level-label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.6px;
    position: absolute;
    left: 0;
    top: -20px;
    -webkit-transform: translateX(-14px) translateY(-14px);
    transform: translateX(-14px) translateY(-14px);
    background: #ECD8D1;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    text-align: center;
    font-family: "Noto Serif", serif;
}

.course-box-flex .course-box:nth-child(2) .level-label {
    background: #D3D9D9;
}

.course-box-flex .course-box:nth-child(3) .level-label {
    background: #E3E2DE;
}

.course-link {
    padding: 12px 16px 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 1.2px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 30px);
    border-top: 1px solid #E8ECEF;
    text-align: center;
    color: #333;
}

.course-link:after {
    content: url(../../images/course/arrow.jpg);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    right: -25px;

    -webkit-transform: scale(0.6);
    transform: scale(0.5);
}

.course-list {
    display: flex;
    flex-wrap: wrap;


}

.course-list h3 {
    font-family: "Noto Serif", serif;
    text-align: left;
    margin-top: 0px;
}

.course-list h3::after {
    content: "";
    background-image: url(../../images/course/arrow-right.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
    right: -10px;
    top: 0px;

}

.course-list .course-img {
    height: 350px;
    display: block;
    overflow: hidden;
    vertical-align: middle;
}

.course-list div.course-list-box {
    width: 45%;
    position: relative;

}

.course-list div.course-list-box:nth-of-type(odd) {
    margin: 0 30px 50px 0;
}

.course-list img {
    transition: 1s all;
    vertical-align: middle;
}

.course-list a:hover img {
    transform: scale(1.2, 1.2);
    transition: 1s all;

}

.course-list a p {
    font-size: 16px;
    line-height: normal;

}

.course-list a:hover p {
    color: #999;
}

.course-list span {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;

    font-size: 14px;
}

.course-list .category-course1 {
    background-color: #E8D1C5;
}

.course-list .category-course2 {
    background-color: #D3D9D9;
}


.school__address {
    margin-top: 20px;
    margin-bottom: 20px;
}

.course-list {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;

}

.course-list p {
    font-size: 20px;
    color: #333;
}


.course-list-box-inner {
    border: 1px solid #999;
    padding: 20px;

}
.course-list-box-inner p {
    text-align: left;
}


.link {
    margin-top: 80px;
    margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
    .link a:after {
        content: url(../images/arrow-hover.png);
    }
}

iframe[src*="maps"] {
    display: block;
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: 30px auto;
}

@media (max-width: 1300px) and (min-width: 1000px) {
    h3 {
        font-size: 1.4rem;
    }
    .course-list div.course-list-box {
        width: 48%;
    }
    .course-list p {
        font-size: 16px;
        line-height: normal;
    }
    .course-list p a {
        color: inherit;
        font-size: 16px;
        line-height: normal;
    }
}


/* 768px以上の表示領域（タブレット） */
@media screen and (max-width: 1000px) {

    .bg-scroll h1 {

        top: 40%;

    }

    .bg-scroll {
        background-attachment: inherit;
        margin-top: 175px;
        min-height: 1vh;

    }

    .course-box {
        display: block;
        margin-right: 0px;
    }

    .course-box-flex {
        display: block;
        margin-right: 0px;
    }

    .course-link {
        position: relative;

    }

    .course-box-flex .course-box:nth-last-of-type(2)::after,
    .course-box-flex .course-box:nth-of-type(1)::after {
        display: none;
    }

    .course-box-flex .course-box:nth-last-of-type(2),
    .course-box-flex .course-box:nth-of-type(3) {
        margin-top: 50px;
    }

    .course-list .course-img {
        height: auto;
    }



}



/* 767px以下の表示領域（スマホ） */
@media only screen and (max-width: 767px) {

    .bg-scroll h1 {
        font-size: 2.2rem;

        width: fit-content;
    }

    .bg-scroll {
        margin-top: 104px;
    }


    h1 span {
        font-size: 0.8rem;
    }

    .flex-container {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 70px;
    }

    .course-list div.course-list-box {
        width: 100%;
        margin: 0 0 50px 0;
    }

    .course-list div.course-list-box:nth-of-type(odd) {
        margin: 0 0 50px 0;
    }

    .course-link:after {
        display: none;
    }

}