/* ---------------------------------------- */
/*  下層 ---- モーダルウィンドウ */
/* ---------------------------------------- */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 30;
}

.modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    background-color: #f9f9f9;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: #2e8b57;
    color: #f9f9f9;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.modal-heading {
    padding: 16px;
    background-color: #f0e68c;
    font-size: 1.3em;
    text-align: center;
}

.modal-body {
    padding: 32px;
    text-align: center;
}

.modal-body .link-btn {
    margin-bottom: 32px;
}

@media screen and (max-width:750px) {
    .modal-body {
        padding: 16px;
    }

    .modal-body .U-intro {
        text-align: left;
    }

    .modal-body .link-btn {
        margin-bottom: 16px;
    }
}

/* ---------------------------------------- */
/*  下層 ---- 全般 */
/* ---------------------------------------- */
#about,
#contact,
#course,
#entry,
#reserve {
    margin-top: 50px;
}

#design,
#programming {
    margin-top: 128px;
}

.U-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: inline-block;
    padding: 0 4vw;
    background-color: #f9f9f9;
    border-top: 1px solid #2e8b57;
    border-bottom: 1px solid #2e8b57;
    font-size: 2vw;
}

.U-title-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 18vw;
    font-family: 'Archivo Black', sans-serif;
    letter-spacing: -0.05em;
    text-align: center;
    color: #2e8b57;
    z-index: -1;
}

.U-contents {
    margin-top: 64px;
}

input.submit-btn {
    display: inline-block;
    margin-top: 32px;
    padding: 8px 32px;
    border: none;
    border-bottom: 4px solid #1e3333;
    border-radius: 32px;
    background-color: #2e8b57;
    color: #f9f9f9;
    font-size: 1.3em;
    font-weight: 700;
}

input.submit-btn:hover {
    padding: 10px 32px;
    border-bottom: none;
    background-color: #1e3333;
}

.U-annotation {
    margin-top: 64px;
    margin-bottom: 64px;
    color: #2e8b57;
    text-align: center;
}

@media screen and (max-width:750px) {

    #about,
    #contact,
    #course,
    #entry,
    #reserve {
        /* ヘッダー分の余白 */
        margin-top: 66px;
    }

    #design,
    #programming {
        margin-top: 64px;
    }

    .U-contents {
        margin-top: 32px;
    }

    input.submit-btn {
        margin-top: 16px;
    }

    .U-annotation {
        margin-top: 32px;
        margin-bottom: 64px;
        text-align: left;
    }
}

/* ---------------------------------------- */
/*  下層 ---- WEBスタディの特長 */
/* ---------------------------------------- */
#about .U-thumbnail {
    position: relative;
    height: 40vw;
    background-image: url(../img/about_top.jpg);
    /* 背景画像を固定する */
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
    z-index: -10;
}

#about .U-subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#about .U-subtitle img {
    width: 50px;
}

#about .U-subtitle h2 {
    display: inline-block;
    padding: 8px 1em 0px;
    border-top: 1px solid #2e8b57;
    font-size: 1.3em;
}

#about .U-contents {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#about .U-container {
    width: 49%;
    margin-bottom: 32px;
    padding: 32px;
    border-radius: 8px;
    border: 1px solid #2e8b57;
    box-shadow: 8px 8px 0px 0px rgb(46, 139, 87);
}

#about .U-container:last-of-type {
    margin-bottom: 0px;
}

#about .U-intro {
    margin-top: 32px;
    text-align: left;
}

#greeting {
    margin-top: 64px;
}

#greeting .U-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#greeting img {
    width: 28%;
    height: 28%;
    border-radius: 50%;
}

#greeting .U-intro {
    width: 68%;
    text-align: left;
}

#greeting .U-intro h2 {
    margin-bottom: 16px;
    font-size: 1.3em;
}

#greeting .U-sign {
    margin-top: 16px;
    font-weight: 700;
    text-align: right;
}

@media screen and (max-width:750px) {
    #about .U-title {
        font-size: 4vw;
    }

    #about .U-contents {
        flex-direction: column;
        justify-content: center;
    }

    #about .U-container {
        width: 100%;
    }

    #greeting .U-contents {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #greeting img {
        width: 80%;
        height: 80%;
    }

    #greeting .U-intro {
        width: 100%;
    }

    #greeting .U-intro h2 {
        margin-top: 16px;
        text-align: center;
    }

}

/* ---------------------------------------- */
/*  下層 ---- コース一覧 */
/* ---------------------------------------- */
#course .U-thumbnail {
    position: relative;
    height: 40vw;
    background-image: url(../img/course_top.jpg);
    /* 背景画像を固定する */
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
    z-index: -10;
}

#course .U-navi-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#course .U-navi-contents {
    width: 49%;
}

#design img,
#programming img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}

#design .U-h2-wrapper,
#programming .U-h2-wrapper {
    margin-top: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#design .U-h2-wrapper h2,
#programming .U-h2-wrapper h2 {
    display: inline-block;
    padding: 8px 16px;
    background-color: #1e3333;
    font-size: 1.3em;
    color: #f9f9f9;
}

#design .U-h2-wrapper .U-h2-contents,
#programming .U-h2-wrapper .U-h2-contents {
    margin-left: 32px;
    text-align: left;
}

#design .U-h2-wrapper .U-h2-container,
#programming .U-h2-wrapper .U-h2-container {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #2e8b57;
}

#design .U-h2-wrapper .U-h2-container span,
#programming .U-h2-wrapper .U-h2-container span {
    margin-right: 1em;
    font-weight: 700;
}

#design .U-h2-container,
#programming .U-h2-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-btn {
    display: inline-block;
    padding: 8px 32px;
    border-radius: 32px;
    background-color: #f0e68c;
    border: 2px solid #1e3333;
    font-size: 1.3em;
}

a:link.form-btn,
a:visited.form-btn,
a:hover.form-btn,
a:active.form-btn {
    color: #1e3333;
}

a:hover.form-btn {
    border: 2px solid #2e8b57;
    color: #2e8b57;
}

.U-bg {
    background-image: linear-gradient(to top, rgba(249, 249, 249, 1) 0%, rgba(249, 249, 249, 0.8) 50%, rgba(249, 249, 249, 1) 100%), url(../img/course_top.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#design .U-container,
#programming .U-container {
    margin-top: 64px;
    text-align: left;
}

#design .U-container h3,
#programming .U-container h3 {
    display: flex;
    align-items: center;
    font-size: 1.3em;
}

#design .U-container h3::after,
#programming .U-container h3::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #2e8b57;
    margin-left: 1em;
}

#design .U-container ul,
#programming .U-container ul {
    margin-top: 32px;
}

#design .U-container ul li,
#programming .U-container ul li {
    margin-bottom: 16px;
}

#design .U-container ul li:nth-last-child(1),
#programming .U-container ul li:nth-last-child(1) {
    margin-bottom: 0px;
}

#design .U-container ul li dl dt,
#programming .U-container ul li dl dt {
    position: relative;
    font-weight: 700;
    padding-left: 1.5em;
}

#design .U-container ul li dl dt::before,
#programming .U-container ul li dl dt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    width: .5em;
    height: .5em;
    background-color: #2e8b57;
}

#design .U-container ul li dl dd,
#programming .U-container ul li dl dd {
    margin-top: 8px;
    margin-left: 1em;
}

#design .U-intro,
#programming .U-intro {
    margin-top: 32px;
}

/* タイムラインアニメーションに関する設定 <s> */
.timeline {
    width: 100%;
    margin-top: 32px;
    text-align: left;
}

.timeline li {
    position: relative;
    padding-bottom: 16px;
}

.timeline li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: #2e8b57;
    border-radius: 50%;
}

.timeline dl {
    margin-left: 32px;
}

.timeline dt {
    font-size: 1.1em;
    font-weight: 700;
}

.timeline dd {
    margin-top: 8px;
    margin-left: 1em;
}

.tl-contents {
    margin-top: 16px;
}

.tl-sub-title {
    font-weight: 700;
}

.tl-sub-title span {
    margin-right: 1em;
}

.tl-sub-intro {
    margin-top: 8px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #2e8b57;
}

.border-line {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    width: 2px;
    height: 0;
    background-color: #2e8b57;
}

/* タイムラインアニメーションに関する設定 <e> */

/* アコーディオンメニューに関する設定 <s> */
.accordion .toggle {
    display: none;
}

.accordion .accordion-contents {
    position: relative;
    margin-bottom: 16px;
}

.accordion .title,
.accordion .accordion-container {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.4s;
}

.accordion .title {
    border: 1px solid #2e8b57;
    padding: 8px 2em 8px 1em;
    display: block;
    color: #333;
    font-weight: 700;
    font-size: 1em;
    text-align: left;
}

.accordion .title::after,
.accordion .title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1em;
    width: 2px;
    height: 1em;
    background-color: #2e8b57;
    transition: all 0.4s;
}

.accordion .title::after {
    transform: rotate(90deg) translateX(-0.5em);
}

.accordion .accordion-container {
    max-height: 0;
    overflow: hidden;
}

.accordion .accordion-container div {
    padding: 8px 16px;
    text-align: left;
}

.accordion .toggle:checked+.title+.accordion-container {
    max-height: 100%;
}

.accordion .toggle:checked+.title::before {
    transform: rotate(90deg) translateX(-0.5em);
}

/* アコーディオンメニューに関する設定 <e> */

.U-to-top {
    margin-top: 128px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #1e3333;
    text-align: center;
}

.U-to-top a:link,
.U-to-top a:visited,
.U-to-top a:hover,
.U-to-top a:active {
    display: block;
    color: #f9f9f9;
}

@media screen and (max-width:750px) {

    #design .U-h2-wrapper,
    #programming .U-h2-wrapper {
        margin-top: 32px;
        flex-direction: column;
    }

    #design .U-h2-wrapper h2,
    #programming .U-h2-wrapper h2 {
        border-right: none;
        border-bottom: 1px solid #2e8b57;
    }

    #design .U-h2-wrapper .U-h2-contents,
    #programming .U-h2-wrapper .U-h2-contents {
        margin-left: 0px;
        margin-top: 32px;
        text-align: left;
    }

    #design .U-h2-container,
    #programming .U-h2-container {
        flex-direction: column;
        justify-content: center;
    }

    #design .U-h2-container .form-btn,
    #programming .U-h2-container .form-btn {
        margin-top: 8px;
    }

    #design .U-container,
    #programming .U-container {
        margin-top: 32px;
    }

    #design .U-container ul,
    #design .U-intro,
    #programming .U-container ul,
    #programming .U-intro,
    .timeline {
        margin-top: 16px;
    }

    .U-to-top {
        margin-top: 64px;
    }
}

/* ---------------------------------------- */
/*  下層 ---- お問い合わせ */
/* ---------------------------------------- */
#contact .U-thumbnail {
    position: relative;
    height: 40vw;
    background-image: url(../img/contact_top.jpg);
    /* 背景画像を固定する */
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
    z-index: -10;
}

#contact .U-intro {
    margin-top: 64px;
}

#contact .U-intro:nth-of-type(2) {
    border-top: 1px solid #2e8b57;
    padding-top: 64px;
}

#contact .form {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(6, auto);
    gap: 32px 16px;
    margin-top: 64px;
    max-width: 900px;
}

#contact .label-required,
#contact .label-other,
#contact .multi-input-title {
    text-align: right;
    font-weight: 700;
}

#contact .label-required,
#contact .label-other {
    grid-column: 1 / 2;

}

#contact .label-required::after,
#contact .multi-input-title::after {
    content: "必須";
    display: inline-block;
    background-color: #f0e68c;
    margin-left: 1em;
    padding: 0px 0.25em;
    font-size: 0.8em;
    color: #2e8b57;
}

#contact .multi-input-title {
    grid-column: 1 / 2;
    grid-row: 3 / 6;
}

#contact input,
#contact .checkbox {
    grid-column: 2 / 3;
    text-align: left;
}

#contact input:not(.submit-btn),
#contact textarea {
    padding: 0.5em;
}

#contact label>input {
    margin-right: 1em;
}

@media screen and (max-width:750px) {
    #contact .U-intro {
        margin-top: 32px;
        text-align: left;
    }

    #contact .U-intro:nth-of-type(2) {
        padding-top: 32px;
    }

    #contact .form {
        grid-template-columns: auto;
        grid-template-rows: repeat(10, auto);
        gap: 8px;
        margin-top: 32px;
    }

    #contact .label-required,
    #contact .label-other,
    #contact .multi-input-title {
        margin-top: 16px;
    }

    #contact .label-required:nth-of-type(1) {
        margin-top: 0px;
    }

    #contact .label-required,
    #contact .label-other {
        grid-column: 1 / 2;
    }

    #contact .multi-input-title {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }

    #contact input,
    #contact .checkbox {
        grid-column: 1 / 2;
    }

    #contact .checkbox {
        margin-left: 1em;
    }

    #contact .label-required,
    #contact .label-other,
    #contact .multi-input-title {
        text-align: left;
    }

}

/* ---------------------------------------- */
/*  下層 ---- 受講のお申込み */
/* ---------------------------------------- */
#entry .U-thumbnail {
    position: relative;
    height: 40vw;
    background-image: url(../img/entry_top.jpg);
    /* 背景画像を固定する */
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
    z-index: -10;
}

#entry .U-intro {
    margin-top: 64px;
}

#entry .U-intro:nth-of-type(2) {
    border-top: 1px solid #2e8b57;
    padding-top: 64px;
}

#entry .form {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(9, auto);
    gap: 32px 16px;
    margin-top: 64px;
    max-width: 900px;
}

#entry .label-required,
#entry .label-other,
#entry .multi-input-title,
#entry .multi-input-title-RO {
    text-align: right;
    font-weight: 700;
}

#entry .label-required,
#entry .label-other {
    grid-column: 1 / 2;
}

#entry .label-required::after,
#entry .multi-input-title::after {
    content: "必須";
    display: inline-block;
    background-color: #f0e68c;
    margin-left: 1em;
    padding: 0px 0.25em;
    font-size: 0.8em;
    color: #2e8b57;
}

#entry .multi-input-title-RO::after {
    content: "不要";
    display: inline-block;
    margin-left: 1em;
    padding: 0px 0.25em;
    font-size: 0.8em;
    color: #2e8b57;
}

#entry .label-other::after {
    content: "任意";
    display: inline-block;
    margin-left: 1em;
    padding: 0px 0.25em;
    font-size: 0.8em;
    color: #2e8b57;
}

#entry .multi-input-title {
    /* ご検討中のコース */
    grid-column: 1 / 2;
    grid-row: 4 / 6;
}

#entry .multi-input-title-RO {
    /* オプション（WEBデザインコースのみ） */
    grid-column: 1 / 2;
    grid-row: 6 / 8;
}

#entry input,
#entry .checkbox,
#entry .radio {
    grid-column: 2 / 3;
    text-align: left;
}

#entry input:not(.submit-btn),
#entry textarea {
    padding: 0.5em;
}

#entry label>input {
    margin-right: 1em;
}

@media screen and (max-width:750px) {
    #entry .U-intro {
        margin-top: 32px;
        text-align: left;
    }

    #entry .U-intro:nth-of-type(2) {
        padding-top: 32px;
    }

    #entry .form {
        grid-template-columns: auto;
        grid-template-rows: repeat(14, auto);
        gap: 8px;
        margin-top: 32px;
    }

    #entry .label-required,
    #entry .label-other,
    #entry .multi-input-title,
    #entry .multi-input-title-RO {
        margin-top: 16px;
    }

    #entry .label-required:nth-of-type(1) {
        margin-top: 0px;
    }

    #entry .label-required,
    #entry .label-other {
        grid-column: 1 / 2;
    }

    #entry .multi-input-title {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }

    #entry .multi-input-title-RO {
        grid-column: 1 / 2;
        grid-row: 10 / 11;
    }

    #entry input,
    #entry .checkbox,
    #entry .radio {
        grid-column: 1 / 2;
        text-align: left;
    }

    #entry .checkbox,
    #entry .radio {
        margin-left: 1em;
    }

    #entry .label-required,
    #entry .label-other,
    #entry .multi-input-title,
    #entry .multi-input-title-RO {
        text-align: left;
    }
}

/* ---------------------------------------- */
/*  下層 ---- 説明会参加のお申込み */
/* ---------------------------------------- */
#reserve .U-thumbnail {
    position: relative;
    height: 40vw;
    background-image: url(../img/reserve_top.jpg);
    /* 背景画像を固定する */
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
    z-index: -10;
}

#reserve .U-intro {
    margin-top: 64px;
}

#reserve .U-intro:nth-of-type(2) {
    border-top: 1px solid #2e8b57;
    padding-top: 64px;
}

/* カレンダーに関する設定 <s> */
#reserve .calendar-wrapper {
    margin-top: 32px;
    /* 表がはみ出す場合、スクロールバーを表示する */
    overflow-x: auto;
}

#reserve table.calendar {
    margin-left: auto;
    margin-right: auto;
}

#reserve .headline {
    background-color: rgba(46, 139, 87, 0.3);
    font-weight: 700;
}

#reserve table.calendar,
#reserve .calendar td {
    border: 1px solid #2e8b57;
    border-collapse: collapse;
}

#reserve .calendar td {
    white-space: nowrap;
    padding: 1em 1.5em;
}

#reserve .calendar td.select {
    cursor: pointer;
}

#reserve .result {
    display: inline-block;
    margin-top: 32px;
    padding: 0px 1.3em;
    background-color: #f0e68c;
    font-size: 1.3em;
}

/* カレンダーに関する設定 <e> */

#reserve .form {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(4, auto);
    gap: 32px 16px;
    margin-top: 64px;
    max-width: 900px;
}

#reserve .label-required,
#reserve .label-other {
    text-align: right;
    font-weight: 700;
}

#reserve .label-required,
#reserve .label-other {
    grid-column: 1 / 2;

}

#reserve .label-required::after {
    content: "必須";
    display: inline-block;
    background-color: #f0e68c;
    margin-left: 1em;
    padding: 0px 0.25em;
    font-size: 0.8em;
    color: #2e8b57;
}

#reserve .label-other::after {
    content: "任意";
    display: inline-block;
    margin-left: 1em;
    padding: 0px 0.25em;
    font-size: 0.8em;
    color: #2e8b57;
}

#reserve input {
    grid-column: 2 / 3;
    text-align: left;
}

#reserve input:not(.submit-btn),
#reserve textarea {
    padding: 0.5em;
}

#reserve input[readonly] {
    background-color: #f0e68c;
}

@media screen and (max-width:750px) {
    #reserve .U-intro {
        margin-top: 32px;
        text-align: left;
    }

    #reserve .U-intro:nth-of-type(2) {
        padding-top: 32px;
    }

    #reserve .form {
        grid-template-columns: auto;
        grid-template-rows: repeat(8, auto);
        gap: 8px;
        margin-top: 32px;
    }

    #reserve .label-required,
    #reserve .label-other {
        margin-top: 16px;
    }

    #reserve .label-required:nth-of-type(1) {
        margin-top: 0px;
    }

    #reserve .label-required,
    #reserve .label-other {
        grid-column: 1 / 2;
    }

    #reserve input {
        grid-column: 1 / 2;
    }

    #reserve .label-required,
    #reserve .label-other {
        text-align: left;
    }
}