/****************

common

*****************/

.course-page {
    background-color: #FCFCFC;
}

/****************

anchor

*****************/

aside.js-location-nav{
    width: 240px;
    height: 100%;
    position: absolute;
}

ul.course-page__anchor {
    position: sticky;
    list-style: none;
    top: 240px;
    padding-left: 80px;
    padding-bottom: 120px;    
}

ul.course-page__anchor li {
    margin-bottom: 8px;
}

ul.course-page__anchor li a .course-page__anchor-circle {
    align-items: center;    
    display: flex;
    justify-content: center;
}

ul.course-page__anchor li a {
    text-decoration: underline;
    color: #9B9B9B;
    font-size: 14px;
    align-items: center;
    column-gap: 16px;
    display: flex;    
}

ul.course-page__anchor li a.is-current {
  color: #181818;
}

ul.course-page__anchor li a .course-page__anchor-circle svg {
    font-size: 12px;    
    color: #9B9B9B;
}

ul.course-page__anchor li a.is-current .course-page__anchor-circle svg {
    font-size: 12px;
    color: #032553;
}

@media screen and (max-width: 780px) {
    aside.js-location-nav {
        display: none;
    }
}

/****************

intro

*****************/

.course-page__intro {
    background-color: #ECEDF0;    
    display: flex;
    justify-content: flex-end;    
    padding: 80px 0;
}

.course-page__intro-box {
    padding-right: 5%;
    width: 75%;
}

.course-page__intro-item {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

.course-page__intro-item h3 {
    font-size: 24px;
}

.course-page__intro-txt {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.course-page__intro-note {
    border-radius: 8px;
    background: white;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 24px;
}

.course-page__intro-note dl dt {
    font-weight: 600;
    padding-bottom: 8px;
}

@media screen and (max-width: 780px) {
    .course-page__intro {
        justify-content: center;
    }
    .course-page__intro-box {
        padding-right: 0;
        width: 90%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__intro {
        padding: 12vw 0;
    }
    .course-page__intro-box {
        width: 90vw;
    }  
    .course-page__intro-item h3 {
        font-size: 5.4vw;
        text-align: center;
    }  
    .course-page__intro-item {
        row-gap: 6.8vw;
    }

    .course-page__intro-txt {
        row-gap: 4.8vw;
    }    
}

/****************

feature

*****************/

.course-page__feature {
    background-color: #F7F7F7;
    display: flex;
    justify-content: flex-end;
    padding: 80px 0;    
}

.course-page__feature-box {
    padding-right: 5%;
    width: 75%;    
}

.course-page__feature-title {
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 8px;
    margin-bottom: 24px;
}

.course-page__feature-title h3 {
    font-size: 22px;
}

.course-page__feature-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 24px;
    padding-top: 24px;
}

.course-page__feature-item {
    align-items: center;
    background-color: #ffffff;
    column-gap: 16px;
    display: flex;
    width: 48%;
}

.course-page__feature-check {
    background-color: #032553;
    display: flex;
    justify-content: center;
    height: 64px;
    width: 56px;
}

.course-page__feature-txt {
    width: 80%;
}

.course-page__feature-txt p {
    font-weight: 600;
    line-height: 22px;    
}

.course-page__feature-check svg {
    color: #ffffff;
    font-size: 24px;
    align-self: center;
}

@media screen and (max-width: 780px) {
    .course-page__feature {
        justify-content: center;
    }
    .course-page__feature-box {
        padding-right: 0;
        width: 90%;
    }
    .course-page__feature-item {
        width: 45%;
    }    
}

@media screen and (max-width: 640px) {
    .course-page__feature {
        padding: 12vw 0;
    }
    .course-page__feature-box {
        width: 90vw;
    }  
    .course-page__feature-item h3 {
        font-size: 5.4vw;
        text-align: center;
    }  
    .course-page__feature-title {
        padding-bottom: 8px;
        margin-bottom: 0;
    }

    .course-page__feature-title h3 {
        font-size: 4.6vw;
    }    
    .course-page__feature-item {
        row-gap: 6.8vw;
    }
    .course-page__feature-txt {
        row-gap: 4.8vw;
    } 
    .course-page__feature-item {
        width: 100%;
    }  
    .course-page__feature-check {
        height: 18vw;
        width: 10vw;
    }  
    .course-page__feature-check svg {
        font-size: 4.4vw;
    }   
}

/****************

topics

*****************/

.course-page__topics {
    display: flex;
    justify-content: flex-end;
    padding: 80px 0;    
}

.course-page__topics-box {
    padding-right: 5%;
    width: 75%;    
}

.course-page__topics-title {
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 8px;
    margin-bottom: 24px;
}

.course-page__topics-title h3 {
    font-size: 22px;
}

.course-page__topics-list {
    display: flex;
}

.course-page__topics-heading {
    align-items: center;
    background-color: #476081;
    display: flex;
    justify-content: center;
    width: 160px;
}

.topics-heading--darkblue {
    background-color: #1E3C65;
}

.course-page__topics-heading h4 {
    color: #ffffff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}

.course-page__topics-items {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.course-page__topics-items dt {
    background-color: #F0F0F0;
    padding: 10px 24px;
    font-weight: 600;    
}

.course-page__topics-items dd {
    padding: 16px 24px;
}

.course-page__topics-items dd p span {
    font-weight: 600;
}

.course-page__topics-items ul {
    padding: 16px 32px;
}

.course-page__topics-note {
    background-color: #ECEDF0;
    padding: 16px;
    margin-top: 16px;
}

.course-page__topics-note p {
    font-size: 14px;
}

@media screen and (max-width: 780px) {
    .course-page__topics{
        justify-content: center;
    }
    .course-page__topics-box {
        padding-right: 0;
        width: 90%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__topics {
        padding: 12vw 0;
    }
    .course-page__topics-box {
        width: 90vw;
    }  
    .course-page__topics-title {
        margin-bottom: 3.2vw;
    }
    .course-page__topics-title h3 {
        font-size: 4.4vw;
    }
    .course-page__topics-list {
        flex-direction: column;
        padding-top: 4.8vw;
        row-gap: 3.8vw;
    } 
    .course-page__topics-heading {
        width: 90vw;
    }
    .course-page__topics-heading h4 br {
        display: none;
    }
    .course-page__topics-heading h4 {
        font-size: 4.0vw;
        padding: 2.1vw 0;        
    }    
    .course-page__topics-item {
        width: 90vw;
    } 
    .course-page__topics-thumb {
        height: 40vw;
    } 
    .course-page__topics-item h4 {
        font-size: 4.0vw;
    } 
}

/****************

merit

*****************/

.course-page__merit {
    display: flex;
    justify-content: flex-end;
    padding: 80px 0;    
}

.course-page__merit-box {
    padding-right: 5%;
    width: 75%;    
}

.course-page__merit-title {
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 8px;
    margin-bottom: 24px;
}

.course-page__merit-title h3 {
    font-size: 22px;
}

.course-page__merit-list {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    padding-top: 16px;
}

.course-page__merit-item {
    align-items: flex-start;
    display: flex;
}

.course-page__merit-num {
    width: 24px;
}

.course-page__merit-num h4 {
    color: #626974;
}

.course-page__merit-divider {
    background-color: #ACACAC;
    height: 32px;
    margin: 0 24px;
    width: 1px;
}

.course-page__merit-txt {
    width: 80%;
}

.course-page__merit-txt h5 {
    padding-bottom: 8px;
}

@media screen and (max-width: 780px) {
    .course-page__merit {
        justify-content: center;
    }
    .course-page__merit-box {
        padding-right: 0;
        width: 90%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__merit {
        justify-content: center;
        padding: 12vw 0;        
    }
    .course-page__merit-box {
        padding-right: 0;
        width: 90vw;
    }
    .course-page__merit-title h3 {
        font-size: 4.6vw;
    }    
}

/****************

details

*****************/

.course-page__details {
    display: flex;
    justify-content: flex-end;
    padding: 80px 0;    
}

.course-page__details-box {
    padding-right: 5%;
    width: 75%;    
}

.course-page__details-title {
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 8px;
    margin-bottom: 24px;
}

.course-page__details-title h3 {
    font-size: 22px;
}

.course-page__message-group {
    display: flex;
    flex-direction: column;
    row-gap: 64px;
}

.course-page__details-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 24px;
    padding-top: 56px;
}

.course-page__details-btn {
    margin-top: 24px;
}

.course-page__details-item {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 16px;
    row-gap: 24px;
    width: 29%;
}

.course-page__details-item p {
    font-size: 14px;
    font-weight: 600;
}

.course-page__details-item dt {
    background-color: #ECEDF0;
    font-weight: 600;
    padding: 4px 8px;
    font-size: 14px;
    margin-bottom: 8px;
}

.course-page__details-item dd {
    font-size: 14px;
}

.course-page__details-unit {
    padding-bottom: 80px;
}

.course-page__details-warning {
    padding-top: 8px;
}

.course-page__details-warning p {
    text-align: right;
}

.course-page__details-warning p span {
    color: #747474;
    font-size: 12px;
}

@media screen and (max-width: 780px) {
    .course-page__details {
        justify-content: center;
    }
    .course-page__details-box {
        padding-right: 0;
        width: 90%;
    }
    .course-page__details-item {
        width: 43%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__details {
        justify-content: center;
        padding: 12vw 0;        
    }
    .course-page__details-box {
        padding-right: 0;
        width: 90vw;
    }
    .course-page__details-title h3 {
        font-size: 4.6vw;
    } 
    .course-page__details-item {
        flex-direction: column;
        row-gap: 4.8vw;
        width: 78vw;        
    }    
    .course-page__details-thumb {
        height: 40vw;
        width: 90vw;
    }   
    .course-page__details-txt {
        padding-top: 0;
        width: 50vw;
    }
    .course-page__details-list {
        align-items: center;        
        padding-top: 12vw;
        padding-bottom: 0;   
        justify-content: center;     
        row-gap: 8.8vw;
    }
    .course-page__details-txt ul {
        padding: 3.8vw;
    }
    .course-page__message-group {
        padding-bottom: 8vw;
    }
    .course-page__details-btn {
        display: flex;
        justify-content: center;
    }    
    .course-page__details-item dd {
        font-size: 3.8vw;
    } 
    .course-page__details-txt h4 {
        font-size: 4.8vw;
    }     
}

/****************

flow

*****************/

.course-page__flow-item {
    display: flex;
}

.course-page__flow-item:last-child {
    border-bottom: 1px solid #c4c4c4;
}

.course-page__flow-group {
    border-top: 1px solid #c4c4c4;
    display: flex;
    width: 100%;
}

.course-page__flow-title {
    align-items: center;
    background-color: #F0F0F0;
    display: flex;
    justify-content: center;
    width: 20%;
}

.course-page__flow-title h5 {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.course-page__flow-content {
    padding: 32px 24px;
    width: 74%;
}

.course-page__flow-content a {
    text-decoration: underline;
    color: #5EC8B9;
}

.course-page__flow-content p span {
    color: #8C8C8C;
    font-size: 14px;
}

.course-page__flow-num {
    align-items: center;
    background-color: #476081;
    display: flex;
    justify-content: center;
    padding: 16px 0; 
    position: relative; 
    width: 94px;  
}

.flow-num--two {
    background-color: #1E3C65;
}

.flow-num--three {
    background-color: #25446D;
}

.flow-num--four {
    background-color: #032553;
}

.flow-num--five {
    background-color: #011127;
}

.course-page__flow-num::after {
    position: absolute;
    content: "";
    top: 99.6%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 2.7222222222rem solid transparent;
    border-right: 2.7222222222rem solid transparent;
    border-top: 1.3888888889rem solid #476081;
    z-index: 1;
}

.flow-num--two::after {
    border-top-color: #1E3C65;
}

.flow-num--three::after {
    border-top-color: #25446D;
}

.flow-num--four::after {
    border-top-color: #032553;
}

.flow-num--five::after {
    border-top-color: #011127;
}

.course-page__flow-num h4 {
    font-weight: 400;
    font-size: 20px;
    color: #ffffff;
}

@media screen and (max-width: 780px) {
    .course-page__flow {
        justify-content: center;
    }
    .course-page__flow-box {
        padding-right: 0;
        width: 90%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__flow {
        justify-content: center;
        padding: 12vw 0;        
    }
    .course-page__flow-box {
        padding-right: 0;
        width: 90vw;
    }
    .course-page__flow-num::after {
        border-left: 6vw solid transparent;
        border-right: 6vw solid transparent;
        border-top: 3vw solid #476081;
    }   
    .flow-num--two::after {
        border-top-color: #1E3C65;
    }

    .flow-num--three::after {
        border-top-color: #25446D;
    }

    .flow-num--four::after {
        border-top-color: #032553;
    }  
    .course-page__flow-num {
        width: 15vw;
    }
    .course-page__flow-title {
        width: 14vw;
    }    
    .course-page__flow-content {
        padding: 4.8vw;
        width: 65vw;
    }   
    .course-page__flow-group {
        flex-direction: column;
    }   
    .course-page__flow-title {
        padding: 3.2vw 0;
        width: 100%;
    }    
}

/****************

summary

*****************/

.course-page__summary {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 80px 0;    
}

.course-page__summary-box {
    padding-right: 5%;
    width: 75%;    
}
    
.course-page__summary-title {
    margin-bottom: 32px;
}

.course-page__summary-title h4 {
    border-left: 3px solid #032553;
    padding-left: 16px;
}

.course-page__summary-list {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.course-page__summary-item {
    background-color: #ffffff;
    width: 48%;
}

.course-page__summary-item-title {
    background-color: #032553;
}

.course-page__summary-item-title h5 {
    color: #ffffff;
    padding: 8px 16px;
    font-size: 16px;
    text-align: center;
    line-height: 18px;    
}

.course-page__summary-item ul {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 24px;
}

.course-page__summary-item ul li {
    line-height: 28px;
}

@media screen and (max-width: 780px) {
    .course-page__summary {
        justify-content: center;
    }
    .course-page__summary-box {
        padding-right: 0;
        width: 90%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__summary {
        justify-content: center;
        padding: 12vw 0;        
    }
    .course-page__summary-box {
        padding-right: 0;
        width: 90vw;
    }
    .course-page__summary-item {
        width: 90vw;
    }
    .course-page__summary-list {
        gap: 4.8vw;
    }
    .course-page__details-unit {
        padding-bottom: 12vw;
    }    
}

/****************

faq

*****************/

.course-page__faq {
    display: flex;
    justify-content: flex-end;
    padding: 80px 0;    
}

.course-page__faq-box {
    padding-right: 5%;
    width: 75%;    
}

.course-page__faq-title {
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 8px;
    margin-bottom: 24px;
}

.course-page__faq-title h3 {
    font-size: 22px;
}

.course-page__faq-list {
    display: flex;
    flex-direction: column;
    row-gap: 48px;
    padding-top: 24px;
}

.course-page__faq-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.course-page__faq-item {
    align-items: flex-start;
    display: flex;
}

.course-page__faq-heading {
    width: 3%;
}

.course-page__faq-heading h5 {
    color: #032553;
}

.heading--answer h5 {
    color: #A8A8A8;
}

.course-page__faq-divider {
    background-color: #E6E6E6;
    margin: 0 16px;
    height: 32px;
    width: 1px;
}

.course-page__faq-content {
    width: 96%;
}

@media screen and (max-width: 780px) {
    .course-page__faq {
        justify-content: center;
    }
    .course-page__faq-box {
        padding-right: 0;
        width: 90%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__faq {
        justify-content: center;
        padding: 12vw 0;        
    }
    .course-page__faq-box {
        padding-right: 0;
        width: 90vw;
    }  
    .course-page__faq-title h3 {
        font-size: 4.6vw;
    }  
}

/****************

contact

*****************/

.course-page__contact {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 80px 0;    
}

.course-page__contact-box {
    padding-right: 5%;
    width: 75%;    
}

.course-page__contact-wrapper {
    border: 4px solid #c8ced6;
    display: flex;
    column-gap: 32px;
    padding: 40px;
    justify-content: space-between;
    width: 640px;
}

.course-page__contact-thumb {
    height: 144px;
    width: 144px;
}

.course-page__contact-thumb img {
    border-radius: 50%;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.course-page__contact-txt {
    width: 70%;
}

.course-page__contact-txt h4 {
    margin-bottom: 8px;
}

.course-page__contact-txt a {
    margin-top: 32px;
}

/****************

other

*****************/

.course-page__gray {
    background-color: #F7F7F7;
}

@media screen and (max-width: 980px) {
    .course-page__contact-wrapper {
        width: 60vw;
    }
}

@media screen and (max-width: 780px) {
    .course-page__contact-wrapper {
        align-items: center;
        padding: 24px;
        flex-direction: column;
    }
    .course-page__contact-box {
        padding-right: 0;
        width: 90%;
    }
    .course-page__contact {
        justify-content: center;
    }
}

@media screen and (max-width: 640px) {
    .course-page__contact {
        padding: 0 0 12vw 0;
    }
    .course-page__contact-wrapper {
        align-items: center;        
        padding: 4.8vw 3.2vw;
        row-gap: 3.2vw;        
        width: 78vw;
    }
    .course-page__contact-box {
        display: flex;
        justify-content: center;        
        width: 100%;
    }
    .course-page__contact-txt {
        align-items: center;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .course-page__contact-thumb {
        height: 30vw;
        width: 30vw;
    }
}