@charset "utf-8";
@import url(https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined);

.contact-intro {
    font-size: 0.83vw;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1e2320;
    line-height: 1.6;
}

#main .contact-intro a {
    color: #074EE8;
    text-decoration: none;
}

#main .contact-intro a:hover {
    color: #FA7300;
    text-decoration: none;
}

.cf-field {
    border-bottom: 1px solid #e8e8e8;
    padding: 1.389vw 0;
}

.cf-label-row {
    display: flex;
    align-items: center;
    gap: 0.556vw;
    margin-bottom: 0.694vw;
}

.cf-badge {
    display: inline-flex;
    font-size: 0.83vw;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;
    width: 3.333vw;
    height: 1.66vw;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#main .cf-badge.required, #main-no-side .cf-badge.required {
    background: #FA7300;
    color: #fff;
}

.cf-badge.optional {
    background: #aaa;
    color: #fff;
}

.cf-field-name {
    font-size: 1.25vw;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1e2320;
}

.cf-input,
.cf-textarea,
.cf-select {
    width: 100%;
    border: 1px solid #c8cdd3;
    border-radius: 6px;
    background: #fff;
    color: #1e2320;
    font-size: 0.9375rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.cf-input {
    height: 3.333vw;
    padding: 0 0.833vw;
    font-size: 0.972vw;
    border-radius: 0.417vw;
}

.cf-textarea {
    height: 11.111vw;
    padding: 0.833vw;
    font-size: 0.972vw;
    border-radius: 0.417vw;
    resize: vertical;
    line-height: 1.6;
}

.cf-select-wrapper {
    position: relative;
    width: 100%;
}

.cf-select {
    height: 3.333vw;
    padding: 0 2.778vw 0 0.833vw;
    font-size: 0.972vw;
    border-radius: 0.417vw;
    cursor: pointer;
    background-image: url(../img/common/arrow.png);
    background-repeat: no-repeat;
    background-position: right 0.833vw center;
    background-size: 0.694vw 0.417vw;
}

.cf-input::placeholder,
.cf-textarea::placeholder {
    color: #767676;
}

.cf-input:focus,
.cf-textarea:focus,
.cf-select:focus {
    outline: none;
    border-color: #FA7300;
}

.cf-input[readonly],
.cf-textarea[readonly] {
    background: #f5f5f5;
    color: #333;
    cursor: default;
}

.cf-input[readonly]:focus,
.cf-textarea[readonly]:focus {
    border-color: #c8cdd3;
}

.cf-textarea::-webkit-resizer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='14' x2='14' y2='3' stroke='%23FA7300' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='9' y1='14' x2='14' y2='9' stroke='%23FA7300' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cf-half-row {
    display: flex;
    gap: 0.833vw;
}

.cf-half-col {
    flex: 1;
    min-width: 0;
}

.cf-half-col .cf-input {
    width: 100%;
}

.col-70 {
    flex: 0 0 70%;
}

.col-30 {
    /*flex: 0 0 30%;*/
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn_learner_del {
    display: flex;
    align-items: center;
    gap: 0.69vw;
    border: 1px solid #FA7300;
    border-radius: 0.69vw;
    padding: 0.77vw 1.11vw;
    font-size: 0.97vw;
    font-weight: bold;
    color: #FA7300;
    background: #fff;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.btn_learner_del:hover {
    border-color: #FA7300;
    color: #fff;
    background: #FA7300;
}

.select_buttons_learner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.111vw;
    margin: 2.08vw 0;
    flex-wrap: wrap;
}

.btn_learner_add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.556vw;
    background: #FA7300;
    color: #fff;
    border: none;
    border-radius: 3.472vw;
    height: 56px;
    font-size: 0.875rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
    min-width: 15.278vw;
}

.btn_learner_add::after {
    content: "";
    display: inline-block;
    background-image: url(../img/common/button_white.webp);
    background-position: center;
    background-size: contain;
    width: 1.944vw;
    height: 1.944vw;
    position: absolute;
    right: 0.833vw;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.btn_learner_add:hover {
    color: #FA7300;
    background: #FFF4DB;
}

.btn_learner_add:hover::after {
    background-image: url(../img/common/button_orange.webp);
}

.select_buttons_learner .btn_learner_add {
    width: 260px;
    min-width: unset;
}

.cf-error {
    font-size: 0.97vw;
    font-family: 'Noto Sans JP', sans-serif;
    color: #FA7300;
    margin-top: 0.417vw;
}

.cf-privacy-section {
    margin-top: 2.222vw;
    text-align: center;
}

.cf-privacy-text {
    font-size: 0.972vw;
    color: #1e2320;
    margin-bottom: 0.833vw;
}

#main .cf-privacy-text a {
    color: #074EE8;
    text-decoration: none;
}

#main .cf-privacy-text a:hover {
    color: #FA7300;
    text-decoration: none;
}

.cf-consent-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.556vw;
    margin-bottom: 0.556vw;
}

.cf-consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FA7300;
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #c8cdd3;
    border-radius: 3px;
    background: #fff;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}

.cf-consent-row input[type="checkbox"]:checked {
    background: #FA7300;
    border-color: #FA7300;
}

.cf-consent-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: -1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.cf-consent-label {
    font-size: 0.972vw;
    font-weight: bold;
    color: #1e2320;
    cursor: pointer;
}

.cf-consent-error {
    font-size: 0.833vw;
    color: #FA7300;
    display: none;
    margin-bottom: 8px;
}

.cf-consent-error.show {
    display: block;
}

.cf-submit-btn, .btn-mypage-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.556vw;
    background: #FA7300;
    color: #fff;
    border: none;
    border-radius: 3.472vw;
    height: 56px;
    font-size: 1.111vw;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
    min-width: 15.278vw;
}

.btn-mypage-link {
    color: #fff !important;
    text-decoration: none !important;
}

.cf-submit-btn::after, .btn-mypage-link::after {
    content: "";
    display: inline-block;
    background-image: url(../img/common/button_white.webp);
    background-position: center;
    background-size: contain;
    width: 1.944vw;
    height: 1.944vw;
    position: absolute;
    right: 0.833vw;
    top: 50%;
    transform: translateY(-50%);
}

.cf-submit-btn:not(:disabled):hover, .btn-mypage-link:not(:disabled):hover {
    color: #FA7300;
    background: #FFF4DB;
}

.btn-mypage-link:hover {
    color: #FA7300 !important;
}

.cf-submit-btn:not(:disabled):hover::after, .btn-mypage-link:not(:disabled):hover::after {
    background-image: url(../img/common/button_orange.webp);
}

.cf-submit-btn:disabled, .btn-mypage-link:disabled {
    cursor: default;
    opacity: 0.5;
}

.cf-confirm-actions, .completion-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.111vw;
    margin-top: 2.778vw;
    flex-wrap: wrap;
}

.cf-confirm-actions .cf-btn-back,
.cf-confirm-actions .cf-submit-btn,
.completion-buttons .btn-back-top,
.completion-buttons .btn-mypage-link {
    width: 260px;
    min-width: unset;
}

.cf-btn-back, .btn-back-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #1e2320;
    border: 1px solid #c8cdd3;
    border-radius: 3.472vw;
    height: 56px;
    font-size: 1.111vw;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    min-width: 13.889vw;
    position: relative;
    gap: 10px;
}

.btn-back-top {
    color: #FA7300 !important;
    text-decoration: none !important;
}

.cf-btn-back::before, .btn-back-top:before {
    content: "";
    display: block;
    flex-shrink: 0;
    background-image: url(../img/common/button_orange.webp);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.944vw;
    height: 1.944vw;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
}

.cf-btn-back:hover, .btn-back-top:hover {
    color: #FA7300;
    background: #FFF4DB;
    border-color: transparent;
}

.validation-errors {
    color: #FA7300;
    border-color: #FA7300;
}

.validation-errors::before {
    color: #FA7300;
}

.caption {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
}

#main .caption a {
    color: #074EE8;
    text-decoration: none;
}

#main .caption a:hover {
    color: #FA7300;
    text-decoration: none;
}

.completion-buttons {
    display: flex;
    gap: 1.39vw;
    justify-content: center;
    margin-bottom: 3.47vw;
}

/*#main a.btn-back-top {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 0.97vw;*/
/*    background: #fff;*/
/*    border: 1px solid #B4C3D2;*/
/*    padding: 0.83vw 1.74vw 0.83vw 2.78vw;*/
/*    border-radius: 3.47vw;*/
/*    font-size: 1.52vw;*/
/*    font-weight: var(--font-semibold);*/
/*    color: #1E232D;*/
/*    cursor: pointer;*/
/*    transition: background 0.2s;*/
/*    text-decoration: none;*/
/*    flex: 1;*/
/*    max-width: 16.67vw;*/
/*    justify-content: center;*/
/*    position: relative;*/
/*}*/

/*#main a.btn-back-top::after {*/
/*    content: "";*/
/*    display: inline-block;*/
/*    background-image: url(../img/common/button_orange_left.png);*/
/*    background-position: center;*/
/*    background-size: contain;*/
/*    width: 2.22vw;*/
/*    height: 2.22vw;*/
/*    position: absolute;*/
/*    left: 0.63vw;*/
/*    top: 0.83vw;*/
/*}*/

/*#main a.btn-back-top:hover {*/
/*    color: #FA7300;*/
/*    background: #FFF4DB;*/
/*    border-color: transparent;*/
/*}*/

#main form table,
#main-no-side form table {
    border-collapse: collapse;
    width: 100%;
}

#main form th,
#main-no-side form th {
    border-top: 0 none;
    border-bottom: 1px solid #E4E9F0;
    box-sizing: border-box;
    color: #FA7300;
    font-size: 0.875rem;
    font-weight: bold;
    padding: 17px 23px;
    text-align: left;
    vertical-align: middle;
    width: 32%;
    background: #FFF4DB;
}

#main form td,
#main-no-side form td {
    border-top: 0 none;
    border-bottom: 1px solid #E4E9F0;
    color: #535353;
    font-size: 0.875rem;
    padding: 24px 0 24px 23px;
    text-align: left;
    vertical-align: middle;
    background: #fff;
}

#main form tr:last-child th,
#main-no-side form tr:last-child th,
#main form tr:last-child td,
#main-no-side form tr:last-child td {
    border-bottom: none;
}

/*@media screen and (min-width: 1440px) {*/
/*    .cf-confirm-actions .cf-btn-back,*/
/*    .cf-confirm-actions .cf-submit-btn {*/
/*        width: 350px;*/
/*        height: 87px;*/
/*        min-width: unset;*/
/*    }*/
/*}*/

.section-title {
    border-left: 7px solid #FA7300;
    padding: 6px 12px;
    font-size: 1.125rem;
    font-weight: bold;
    color: #1e2320;
    margin: 32px 0 16px;
    line-height: 1.4;
}

ul.list {
    list-style-type: circle;
    list-style-position: inside;
    padding: 0;
    margin: 0 0 16px;
}

ul.list li {
    padding: 4px 0;
    position: relative;
    font-size: 14px;
    line-height: 1.7;
}

ul.list li::marker {
    color: #FA7300;
    font-size: 16px;
}

.step {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 490px;
}

.step img {
    height: auto;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .contact-intro {
        font-size: 0.75rem;
    }

    .cf-field {
        padding: 1.25rem 0;
    }

    .cf-label-row {
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .btn_learner_add::after {
        width: 1.75rem;
        height: 1.75rem;
        right: 0.75rem;
    }

    .btn_learner_del {
        font-size: 14px;
        padding: 10px 8px;
        gap: 8px;
        border-radius: 6px;
        max-height: 40px;
    }

    .cf-badge {
        font-size: 0.75rem;
        width: 3rem;
        height: 1.5rem;
    }

    .cf-field-name {
        font-size: 1.125rem;
    }

    .cf-input {
        height: 3rem;
        padding: 0 0.75rem;
        font-size: 0.75rem;
        border-radius: 0.375rem;
    }

    .cf-textarea {
        height: 10rem;
        padding: 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
    }

    .cf-select {
        height: 3rem;
        padding: 0 2.5rem 0 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
        background-position: right 0.75rem center;
        background-size: 0.625rem 0.375rem;
    }

    .cf-privacy-text {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }

    .cf-consent-label {
        font-size: 0.875rem;
    }

    .cf-confirm-actions, .completion-buttons {
        gap: 1rem;
        margin-top: 2.5rem;
    }

    .cf-submit-btn, .btn-mypage-link {
        gap: 0.5rem;
        border-radius: 3rem;
        font-size: 1rem;
    }

    .cf-submit-btn::after, .btn-mypage-link::after {
        width: 1.75rem;
        height: 1.75rem;
        right: 0.75rem;
    }

    .cf-btn-back, .btn-back-top {
        gap: 0.5rem;
        border-radius: 3rem;
        font-size: 1rem;
    }

    .cf-btn-back::before, .btn-back-top::before {
        width: 1.75rem;
        height: 1.75rem;
        right: 0.75rem;
    }

    .cf-error {
        font-size: 0.75rem;
    }

    .completion-buttons {
        gap: 14px;
        margin-bottom: 32px;
    }

    /*#main a.btn-back-top {*/
    /*    padding: 10px 24px 10px 14px;*/
    /*    font-size: 14px;*/
    /*    border-radius: 50px;*/
    /*    max-width: 220px;*/
    /*    gap: 12px;*/
    /*}*/

    /*#main a.btn-back-top::after {*/
    /*    width: 26px;*/
    /*    height: 26px;*/
    /*    font-size: 14px;*/
    /*    top: 8px;*/
    /*}*/
}

@media screen and (max-width: 768px) {
    .contact-intro {
        font-size: 0.875rem;
        margin-bottom: 20px;
    }

    .cf-field {
        padding: 16px 0;
    }

    .btn_learner_add {
        width: 100%;
        max-width: 320px;
        font-size: 1.125rem;
        height: 56px;
        border-radius: 50px;
    }

    .btn_learner_del {

    }

    .cf-badge {
        font-size: 0.6875rem;
        padding: 3px 7px;
    }

    .cf-field-name {
        font-size: 0.9375rem;
    }

    .cf-input {
        height: 48px;
        font-size: 1rem;
        border-radius: 6px;
    }

    .cf-textarea {
        height: 140px;
        font-size: 1rem;
        border-radius: 6px;
    }

    .cf-select {
        height: 48px;
        font-size: 1rem;
        border-radius: 6px;
    }

    .cf-half-row {
        flex-direction: column;
        gap: 10px;
    }

    .cf-half-col .cf-input {
        height: 48px;
    }

    .col-30 {
        justify-content: flex-start;
    }

    .btn_learner_del {
        height: 36px;
    }

    .cf-privacy-section {
        margin-top: 24px;
    }

    .cf-privacy-text {
        font-size: 0.875rem;
    }

    .cf-consent-label {
        font-size: 0.9375rem;
    }

    .cf-submit-btn, .btn-mypage-link {
        width: 100%;
        max-width: 320px;
        font-size: 1.125rem;
        height: 56px;
        border-radius: 50px;
    }

    .cf-submit-btn::after, .btn-mypage-link::after {
        width: 28px;
        height: 28px;
        right: 10px;
    }

    .cf-confirm-value {
        font-size: 0.9375rem;
    }

    .cf-confirm-actions, .completion-buttons {
        flex-direction: column;
        gap: 12px;
        margin-top: 32px;
    }

    .cf-btn-back, .btn-back-top {
        width: 100%;
        max-width: 320px;
        font-size: 1.125rem;
        height: 56px;
        border-radius: 50px;
    }

    .cf-btn-back::before, .btn-back-top::before {
        width: 28px;
        height: 28px;
    }

    #main form th,
    #main-no-side form th {
        font-size: 0.75rem;
        padding: 12px 34px 9px 12px;
    }

    #main form td,
    #main-no-side form td {
        font-size: 0.75rem;
        padding: 12px 13px 12px 11px;
    }

    .step {
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
        width: auto;
        max-width: 326px;
    }
}

/* Tom Select が <select> のクラスを .ts-wrapper にコピーするため、ラッパー側の枠・背景をリセット */
.ts-wrapper.cf-select {
    border: none !important;
    background: none !important;
    background-image: none !important;
    height: auto !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}
.ts-wrapper.cf-select.focus {
    border: none !important;
    outline: none !important;
}
/* .ts-control にデザインを適用 */
.ts-wrapper.cf-select .ts-control {
    border-color: #c8cdd3;
    border-radius: 0.417vw;
    height: 3.333vw;
    min-height: unset;
    padding: 0 2.778vw 0 0.833vw;
    font-size: 0.972vw;
    font-family: inherit;
    color: #1e2320;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    background-image: url(../img/common/arrow.png) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.833vw center !important;
    background-size: 0.694vw 0.417vw !important;
}
.ts-wrapper.cf-select.focus .ts-control {
    border-color: #FA7300;
    box-shadow: none;
}
/* Tom Select デフォルトの ::after 矢印は非表示（背景画像矢印を使用） */
.ts-wrapper.cf-select.single .ts-control::after {
    display: none;
}
.ts-wrapper.cf-select .ts-control .item,
.ts-wrapper.cf-select .ts-control input {
    font-size: 0.972vw;
    font-family: inherit;
    color: #1e2320;
}
.ts-wrapper.cf-select .ts-dropdown {
    font-size: 0.972vw;
    font-family: inherit;
}
.ts-wrapper.cf-select .ts-dropdown .option.active,
.ts-wrapper.cf-select .ts-dropdown .option:hover {
    background-color: #FA7300;
    color: #fff;
}

@media (max-width: 1080px) {
    .ts-wrapper.cf-select .ts-control {
        height: 3rem;
        min-height: unset;
        padding: 0 2.5rem 0 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
        display: flex;
        align-items: center;
        background-position: right 0.75rem center;
        background-size: 0.625rem 0.375rem;
    }
    .ts-wrapper.cf-select .ts-control .item,
    .ts-wrapper.cf-select .ts-control input {
        font-size: 0.875rem;
    }
    .ts-wrapper.cf-select .ts-dropdown {
        font-size: 0.875rem;
    }
}