@charset "utf-8";

/* 学科ページ共通：全国の設置校一覧（通常校） */
#school-list .course-school-list__section {
    padding: 6rem 0;
}

#school-list .course-school-list__section > h2 {
    margin-bottom: 3rem;
    text-align: center;
}

#school-list .c-school__list {
    width: 100%;
    max-width: var(--width-min, 86.4rem);
    margin: 0 auto;
    padding: 2.4rem;
    list-style: none;
    background: #f5f8fa;
}

#school-list .c-school__region {
    overflow: hidden;
    list-style: none;
    border: 1px solid #d9e0e5;
    background: #fff;
    border-radius: 10px;
}

#school-list .c-school__region + .c-school__region {
    margin-top: 1.2rem;
}

#school-list .c-school__regionitem,
#school-list .c-school__prefitem > .triangle {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#school-list .c-school__regionitem {
    padding: 1.8rem 5.6rem 1.8rem 2.4rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    background: var(--theme-color, #0099ee);
}

#school-list .c-school__regionitem::after,
#school-list .c-school__prefitem > .triangle::after {
    position: absolute;
    top: 50%;
    right: 2.4rem;
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border-right: .2rem solid currentColor;
    border-bottom: .2rem solid currentColor;
    transform: translateY(-70%) rotate(45deg);
}

#school-list .c-school__regionitem.active::after,
#school-list .c-school__prefitem > .triangle.active::after {
    transform: translateY(-25%) rotate(225deg);
}

#school-list .c-school__regionitem:focus-visible,
#school-list .c-school__prefitem > .triangle:focus-visible,
#school-list .course-school-list__detail a:focus-visible {
    outline: .3rem solid #ffcf33;
    outline-offset: -.3rem;
}

#school-list .c-school__pref,
#school-list .c-school__prefcontent {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

#school-list .c-school__pref.active,
#school-list .c-school__prefcontent.active {
    display: block;
}

#school-list .c-school__prefitem {
    margin: 0;
    list-style: none;
}

#school-list .c-school__prefitem + .c-school__prefitem {
    border-top: 1px solid #d9e0e5;
}

#school-list .c-school__prefitem > .triangle {
    padding: 1.6rem 5.6rem 1.6rem 2.8rem;
    color: #222;
    font-size: 1.8rem;
    font-weight: 700;
    background: #eef3f6;
}

#school-list .c-school__prefcontent table {
    width: 100%;
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

#school-list .c-school__prefcontent th {
    padding: 1.4rem 2.8rem;
    color: #222;
    text-align: left;
    background: #e2e8ec;
}

#school-list .c-school__prefcontent td {
    padding: 0;
    border-top: 1px solid #e2e7ea;
}

#school-list .c-icontext a {
    position: relative;
    display: block;
    padding: 1.5rem 5rem 1.5rem 3.6rem;
    color: #222;
    text-decoration: none;
}

#school-list .c-icontext a::after {
    position: absolute;
    top: 50%;
    right: 2.4rem;
    display: block;
    width: .9rem;
    height: .9rem;
    content: "";
    background: none;
    border-top: .2rem solid var(--theme-color, #0099ee);
    border-right: .2rem solid var(--theme-color, #0099ee);
    transform: translateY(-50%) rotate(45deg);
}

#school-list .c-caption {
    display: block;
    margin-top: .4rem;
    color: #555;
    font-size: 1.2rem;
    font-weight: 400;
}

#school-list .course-school-list__detail {
    max-width: var(--width-min, 86.4rem);
    margin: 2.4rem auto 0;
    text-align: center;
}

#school-list .course-school-list__detail a {
    position: relative;
    display: inline-block;
    padding: 1.2rem 4.8rem 1.2rem 2.4rem;
    border: 1px solid currentColor;
    color: var(--theme-color, #0099ee);
    font-weight: 700;
    text-decoration: none;
}

#school-list .course-school-list__detail a::after {
    position: absolute;
    top: 50%;
    right: 2rem;
    display: block;
    width: .9rem;
    height: .9rem;
    content: "";
    background: none;
    border-top: .2rem solid currentColor;
    border-right: .2rem solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 767px) {
    #school-list .course-school-list__section {
        padding: 4rem 0;
    }

    #school-list .c-school__list {
        padding: 1.6rem;
    }

    #school-list .c-school__regionitem {
        padding: 1.6rem 4.8rem 1.6rem 1.8rem;
        font-size: 1.8rem;
    }

    #school-list .c-school__prefitem > .triangle {
        padding: 1.5rem 4.8rem 1.5rem 2.2rem;
        font-size: 1.6rem;
    }

    #school-list .c-icontext a {
        padding: 1.4rem 4.2rem 1.4rem 2.4rem;
    }
}