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

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;
    }    
}

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

topics

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

.course-page__topics-title {
    padding-bottom: 8px;
}

.course-page__topics-title h3 {
    text-align: center;
    font-size: 24px;
}

.course-page__topics-list {
    display: flex;
    column-gap: 24px;
    padding-top: 32px;
    padding-bottom: 80px;
}

.course-page__topics-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 48%;
}

.course-page__topics-item h4 {
    font-size: 16px;
    padding-bottom: 8px;
}

.course-page__topics-item p {
    font-size: 14px;
    padding-top: 6px;
}

.course-page__topics-thumb {
    height: 240px;
    width: 100%;
}

.course-page__topics-thumb img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

@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: 8vw 0 12vw 0;
    }
    .course-page__topics-box {
        width: 90vw;
    }  
    .course-page__topics-title {
        margin-bottom: 3.2vw;
    }
    .course-page__topics-title h3 {
        font-size: 5.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;
    } 
}


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

message

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

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

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

.course-page__message-list {
    display: flex;
    column-gap: 40px;
    padding-bottom: 80px;
}

.course-page__message-thumb {
    height: 280px;
    width: 240px;
}

.course-page__message-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

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

.course-page__message-txt h4 {
    font-size: 20px;
    margin-bottom: 8px;
}

.course-page__message-txt h5 span{
    font-size: 14px;
    font-weight: 400;
}

.course-page__message-txt h5 {
    margin-bottom: 24px;
}

@media screen and (max-width: 780px) {
    .course-page__message {
        justify-content: center;
    }
    .course-page__message-box {
        padding-right: 0;
        width: 90%;
    }
    .course-page__message-list {
        align-items: center;
        flex-direction: column;
    }
    .course-page__message-txt {
        width: 90%; 
    }
    .course-page__message-thumb {
        height: auto;
        width: 60%;
    }
}

@media screen and (max-width: 640px) {
    .course-page__message {
        padding: 12vw 0;
    }
    .course-page__message-box {
        width: 90vw;
    }   
    .course-page__message-txt {
        width: 90vw;
    }
    .course-page__message-thumb {
        margin-bottom: 4.8vw;
        height: 60vw;
        width: 50vw;
    }  
    .course-page__message-txt h5 {
        margin-bottom: 3.2vw;
    }  
    .course-page__message-list {
        padding-bottom: 8vw;
    }
}

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

feature

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

.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;
}

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

.course-page__feature-note dl dt {
    font-weight: 600;
    padding-bottom: 8px;
}
@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;
    }   
}

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

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;
}

.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-thumb {
    margin: 40px auto 0 auto;
    height: 160px;
    width: 560px;
}

.course-page__details-thumb img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

@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%;
    }
    .course-page__details-movie-list {
        flex-direction: column;
    }
}

@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: 4.8vw 0 8vw 0;
        justify-content: center;  
        flex-direction: column;   
        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;
    }   
    .facilitator-point-movie iframe{
        width: 90vw;
        height: 45vw;
    }
    .course-page__catch-thumb {
        height: 40vw;
        width: 48%;
    } 
    .course-page__catch-list {
        margin-top: 4.8vw;
        gap: 2.1vw;
    }   
}

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

summary

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

.course-page__summary {
    display: flex;
    flex-direction: column;
    row-gap: 56px;
    padding-top: 40px;
}

.course-page__summary-group {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.course-page__summary-title {
    background-color: #F0F0F0;
    padding: 4px 16px;
}

.course-page__summary-title h4 {
    font-size: 16px;
}

.course-page__summary-thumb {
    height: 200px;
    width: 100%;
}

.course-page__summary-thumb img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.course-page__summary-item ul {
    background-color: #ECEDF0;
    padding: 16px 32px;
    margin-top: 32px;
}

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

.course-page__summary-item ul h5 {
    padding-bottom: 8px;
    font-size: 16px;
}

@media screen and (max-width: 640px) {
    .course-page__summary-item {
        width: 100%;
    }
    .course-page__summary-title h4 {
        font-size: 4.4vw;
    }
    .course-page__summary-list {
        flex-wrap: wrap;
        flex-direction: column;
    }
}


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

comparison

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

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

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

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

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

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

.course-page__comparison {
    margin-top: 32px;
}

.course-page__comparison-heading {
    display: flex;
    justify-content: flex-end;
    padding-left: 20%;    
    width: 80%;    
}

.course-page__comparison-heading h5 {
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    padding: 8px 0;
}

.course-page__comparison-heading-txt {
    width: 50%;
}

.heading-blue {
    background-color: #476081;
}

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

.course-page__comparison-content {
    padding: 16px;
    display: flex;
    width: 70%;
}

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

.course-page__comparison-content p {
    text-align: center;
}

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

.course-page__comparison-txt {
    width: 50%;
}

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

@media screen and (max-width: 640px) {
    .course-page__comparison {
        padding: 8vw 0 0 0;        
    }
    .course-page__comparison-box {
        padding-right: 0;
        width: 90vw;
    }
    .course-page__comparison-heading {
        padding-left: 16%;
        width: 84%;
    } 
    .course-page__comparison-heading h5 {
        font-size: 3.2vw;
    }   
    .course-page__comparison-item {
        width: 100%;
    } 
    .course-page__comparison-title h5 {
        font-size: 2.8vw;
    } 
    .course-page__comparison-content {
        padding: 2.1vw;
        width: 90%;
    }
    .course-page__comparison-txt {
        width: 100%;
    }  
    .course-page__comparison-content p {
        font-size: 3.2vw;
    }        
}

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

contact

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

.course-page__contact {
    display: flex;
    justify-content: flex-end;
    padding: 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;
    }
}