@charset "utf-8";


:root {
    --main-color: #0B337C;
}

/* ------------------------------------------------------------------------ */

/*  共通
 
/* ------------------------------------------------------------------------ */
.inner {
    margin-inline: auto;
    width: calc(100% - 40px);
}

@media screen and (min-width: 768px) {
    .inner {
        max-width: 700px;
    }
}

#mainBlock .hd02 {
    font-size: 30px;
    letter-spacing: 0.18em;
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    gap: 19px;
}

#mainBlock .hd02 span {
    position: relative;
    font-size: 18px;
    display: inline-block;
    padding-left: 15px;
    border-left: 2px solid var(--main-color);
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------------ */

/*  mainVisual
 
/* ------------------------------------------------------------------------ */

#mainVisual {
    background-color: #0e1669;
}

#mainVisual img {

    width: 100%;

    display: block;
}

#mainVisual .mainVisual_content {
    max-width: 1200px;
    margin-inline: auto;
    position: relative;
}

#mainVisual .img02 {
    max-width: min(417px, 34.75vw);
    width: 100%;
    position: absolute;
    bottom: min(90px, 7.5vw);
    left: min(30px, 2.5vw);
}

#mainVisual .application_btn {
    max-width: min(417px, 34.75vw);
    width: 100%;
    height: 45px;
    position: absolute;
    bottom: min(90px, 7.5vw);
    left: min(30px, 2.5vw);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #D2D2D2;
    color: var(--main-color);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
}

@media screen and (max-width: 767px) {
    #mainVisual .application_btn {
        max-width: 87.18vw;
        left: 0;
        right: 0;
        margin-inline: auto;
        bottom: 1.5vw;
        z-index: 99;
    }
}

/* ------------------------------------------------------------------------ */

/*  outline
 
/* ------------------------------------------------------------------------ */

#outline .application_text {
    margin-bottom: 28px;
    text-align: center;
    font-weight: 600;
}

#outline {
    margin-bottom: 19px;
}

#outline .outline_text {
    margin-top: 23px;
    font-size: 16px;
    line-height: calc(26 / 16);
    font-weight: 600;
    letter-spacing: 0.04em;
}

#outline .bg-color {
    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
    background: #9BD2F0;
    padding-bottom: 31px;
    padding-top: 69px;
    margin-top: -65px;
}

#outline table {
    margin-inline: auto;
    width: 100%;
    margin-top: 15px;
    font-size: 18px;
}

table,
td,
th {
    border-collapse: collapse;
}

tr {
    padding-block: 5px;
}

th {
    width: 96px;
    vertical-align: top;
    font-weight: 700;
}

td {
    line-height: calc(26 / 18);
}

td,
th {
    padding-top: 10px;
    padding-bottom: 8px;
}

#outline tr {
    border-bottom: 2px solid #9BD2F0;
    padding-block: 5px;
}

#outline tr:last-child {
    border-bottom: none;
    color: var(--main-color);
}

@media screen and (min-width: 768px) {
    #outline {
        margin-bottom: 50px;
    }

    #outline .bg-color {
        padding-top: 100px;
        padding-bottom: 60px;
    }

    #outline table {
        margin-top: 40px;
    }

    #outline tr {
        display: flex;
        justify-content: flex-start;
        gap: 50px;
    }
}

/* ------------------------------------------------------------------------ */

/*  program
 
/* ------------------------------------------------------------------------ */


#program .bg-color {
    padding-top: 38px;
    padding-bottom: 23px;
    background-color: #9BD2F0;
}

#program .department {
    position: relative;
    margin-top: 35px;
    background-color: #fff;
    border-radius: 14px;
    padding-inline: 14px;
    padding-top: 20px;
    padding-bottom: 25px;
}

#program .department .hd03 {
    font-size: 22px;
    padding-left: 63px;
    line-height: 1;
    border-bottom: 3px solid #9BD2F0;
    padding-bottom: 13px;
    margin-bottom: 6px;
    white-space: nowrap;
}

#program .department .hd03 span {
    position: absolute;
    left: -20px;
    font-size: 18px;
    line-height: 1.5;
    background-color: var(--main-color);
    color: #fff;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 90px;
    text-align: right;
    padding-right: 20px;
}

#program .department .detail+.hd03 {
    margin-top: 43px;
}

#program .department .info {
    color: var(--main-color);
    font-weight: 700;
    font-size: 17px;

}

#program .department .catchphrase {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}

#program .department .department_img {
    max-width: 202px;
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
    margin-top: 16px;
}

#program .department .name {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    text-align: center;
    margin-top: 6px;
}

#program .department .name span {
    font-size: 14px;
}

#program .department .history {
    color: var(--main-color);
    margin-top: 2px;
    font-weight: 600;
}

#program .department .detail {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
}

#program .department .detail span {
    font-weight: 600;
}

#program .department .note {
    font-size: 16px;
    color: var(--main-color);
}

#program .application_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-inline: auto;
    background-color: #D2D2D2;
    color: var(--main-color);
    border-radius: 50px;
    font-size: 22px;
    font-weight: 700;
    margin-top: 40px;
}

#program .application_btn:hover {
    text-decoration: none;
}

#program .application_btn span {
    font-size: 14px;
}

#program .application_btn_note {
    font-size: 16px;
    margin-top: 6px;
    text-align: center;
}

#program .application_btn_note02 {
    font-size: 16px;
    font-weight: 500;
    line-height: calc(25 / 16);
    margin-top: 22px;
}

#program .notes {
    margin-top: 34px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #fff;
    padding-top: 9px;
    padding-inline: 10px;
    border-radius: 10px;
    padding-bottom: 8px;
}

#program .notes .hd03 {
    text-align: center;
    font-size: 18px;
    font-size: 500;
}

#program .notes ul {
    margin-top: 10px;
}

#program .notes ul li {
    font-size: 14px;
    text-indent: -1em;
    padding-left: 1em;
}

#program .notes+.notes {
    margin-top: 20px;
}

#program .notes p {
    margin-top: 10px;
    font-size: 14px;
}

@media screen and (min-width: 768px) {
    #program .bg-color {
        padding-top: 60px;
    }

    #program .department {
        padding: 30px;
    }

    #program .notes {
        padding: 30px;
    }

    #program .application_btn {
        height: 70px;
    }

    #program .notes ul li {
        margin-bottom: 5px;
    }

    #program .notes ul li:last-child {
        margin-bottom: 0;
    }
}

/* ------------------------------------------------------------------------ */

/*  sponsored
 
/* ------------------------------------------------------------------------ */
#sponsored {
    margin-top: 36px;
}

#sponsored .hd02 {
    font-size: 29px;
    letter-spacing: 0.02em;
}

#sponsored .contact_ttl {
    font-size: 17px;
    line-height: 1;
    background-color: var(--main-color);
    color: #fff;
    text-align: center;
    border-radius: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 19px;
}

#sponsored .contact_info {
    margin-top: 6px;
    font-size: 16px;
    text-align: center;
}

#sponsored .contact_info a {
    color: inherit;
}

#sponsored .contact_note {
    margin-top: 27px;
    font-size: 14px;
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    #sponsored {
        margin-top: 70px;
    }

    #sponsored .contact_ttl {
        height: 50px;
    }

    #sponsored .contact_info {
        margin-top: 15px;
    }
}