/* =========================================================
   お問い合わせページ
   共通ヘッダー・フッターは job-list.css を使用
   ========================================================= */

.contact-page {
    background: #fffaf4;
    color: #20242b;
}

.contact-page main {
    overflow: hidden;
}

.contact-page main h1,
.contact-page main h2,
.contact-page main p,
.contact-page main dl,
.contact-page main figure {
    margin-top: 0;
}

.contact-pc-only {
    display: inline;
}

/* =========================================================
   ヒーロー
   ========================================================= */

.contact-hero {
    position: relative;
    display: flex;
    min-height: 345px;
    align-items: center;
    overflow: hidden;
    background-color: #eef4f3;
    background-image:
        url("https://res.cloudinary.com/dg80bed2k/image/upload/v1776915494/flow-top.png");
    background-repeat: no-repeat;
    background-position: center 39%;
    background-size: cover;
}

.contact-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.91) 28%,
            rgba(255, 255, 255, 0.42) 51%,
            rgba(255, 255, 255, 0.09) 77%,
            rgba(255, 255, 255, 0.45) 100%
        );
}

.contact-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.contact-hero__copy {
    width: min(510px, 48%);
    padding: 36px 0 30px;
}

.contact-hero__message {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
    color: #272b31;
    font-size: clamp(16px, 1.45vw, 21px);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.7;
    transform: rotate(-4deg);
}

.contact-hero__message::after {
    position: absolute;
    right: -30px;
    bottom: -4px;
    width: 125px;
    height: 3px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #ff7622,
            rgba(255, 118, 34, 0)
        );
    content: "";
    transform: rotate(-7deg);
}

.contact-hero h1 {
    margin-bottom: 0;
    color: #171a1f;
    font-size: clamp(38px, 4.4vw, 62px);
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.contact-hero__english {
    margin-bottom: 12px;
    color: #ef681f;
    font-size: clamp(19px, 1.7vw, 26px);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.contact-hero__lead {
    margin-bottom: 0;
    color: #353a42;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
}

.contact-hero__catch {
    position: relative;
    margin: 55px 16px 0 auto;
    color: #282c33;
    font-size: clamp(17px, 1.55vw, 23px);
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1.7;
    transform: rotate(-6deg);
}

.contact-hero__catch::after {
    display: block;
    width: 120%;
    height: 3px;
    margin-top: 4px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #ff7622 0 76%,
            transparent
        );
    content: "";
    transform: rotate(-7deg);
}

/* =========================================================
   パンくず
   ========================================================= */

.contact-breadcrumb {
    border-bottom: 1px solid #eee5da;
    background: #fff;
}

.contact-breadcrumb ol {
    display: flex;
    width: min(1200px, calc(100% - 48px));
    min-height: 56px;
    margin: 0 auto;
    padding: 0;
    align-items: center;
    gap: 18px;
    list-style: none;
}

.contact-breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: #59616d;
    font-size: 13px;
    font-weight: 500;
}

.contact-breadcrumb li + li::before {
    margin-right: 18px;
    color: #a7a29b;
    content: ">";
}

.contact-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ed681f;
    font-weight: 700;
}

.contact-breadcrumb a:hover {
    text-decoration: underline;
}

/* =========================================================
   メインコンテンツ
   ========================================================= */

.contact-content {
    padding: 54px 24px 75px;
    background:
        radial-gradient(
            circle at 5% 4%,
            rgba(255, 218, 179, 0.24),
            transparent 250px
        ),
        radial-gradient(
            circle at 94% 72%,
            rgba(255, 222, 188, 0.2),
            transparent 300px
        ),
        #fffaf4;
}

.contact-content__inner {
    display: grid;
    width: min(1200px, 100%);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 30px;
}

.contact-form-card,
.contact-side-card {
    border: 1px solid #eee5db;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 40px rgba(84, 62, 40, 0.09);
}

.contact-form-card {
    padding: 34px clamp(25px, 4vw, 54px) 42px;
}

/* =========================================================
   入力ステップ
   ========================================================= */

.contact-progress {
    position: relative;
    display: grid;
    width: min(520px, 100%);
    margin: 0 auto 38px;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.contact-progress::before {
    position: absolute;
    top: 23px;
    right: 16.67%;
    left: 16.67%;
    border-top: 3px dotted #d7d8da;
    content: "";
}

.contact-progress__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #8a8f97;
    font-size: 14px;
    font-weight: 600;
}

.contact-progress__number {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #e4e5e7;
    box-shadow: 0 3px 11px rgba(60, 60, 60, 0.1);
    color: #777d85;
    font-size: 18px;
    font-weight: 700;
}

.contact-progress__item.is-current,
.contact-progress__item.is-complete {
    color: #20242b;
}

.contact-progress__item.is-current .contact-progress__number {
    background:
        linear-gradient(
            145deg,
            #ff8b1d,
            #f1590a
        );
    box-shadow: 0 8px 18px rgba(232, 88, 11, 0.22);
    color: #fff;
}

.contact-progress__item.is-complete .contact-progress__number {
    background: #fff0e3;
    color: #ee651b;
}

/* =========================================================
   フォーム見出し
   ========================================================= */

.contact-form-heading {
    margin-bottom: 32px;
    text-align: center;
}

.contact-form-heading__en {
    margin-bottom: 3px;
    color: #ed681f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.contact-form-heading h2 {
    margin-bottom: 11px;
    color: #1b1f25;
    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.contact-form-heading > p:last-child {
    margin-bottom: 0;
    color: #666d77;
    font-size: 14px;
    line-height: 1.85;
}

.contact-form-heading > p:last-child > span {
    display: inline-block;
    margin-top: 4px;
}

/* =========================================================
   フォーム
   ========================================================= */

.contact-form {
    display: grid;
    gap: 25px;
}

.contact-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-field {
    display: grid;
    gap: 9px;
}

.contact-field > label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #252a31;
    font-size: 16px;
    font-weight: 700;
}

.contact-required {
    display: inline-flex;
    min-height: 22px;
    padding: 2px 8px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f26522;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #dcdfe3;
    border-radius: 9px;
    background: #fff;
    color: #252a31;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.contact-field input,
.contact-field select {
    min-height: 54px;
    padding: 12px 16px;
}

.contact-field textarea {
    min-height: 180px;
    padding: 15px 16px;
    line-height: 1.75;
    resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #abb0b7;
    opacity: 1;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #f47a2c;
    box-shadow: 0 0 0 4px rgba(244, 122, 44, 0.13);
    background: #fffdfa;
}

.contact-field input:user-invalid,
.contact-field select:user-invalid,
.contact-field textarea:user-invalid {
    border-color: #d95151;
}

.contact-select-wrap {
    position: relative;
}

.contact-select-wrap select {
    padding-right: 46px;
    appearance: none;
    cursor: pointer;
}

.contact-select-wrap > i {
    position: absolute;
    top: 50%;
    right: 18px;
    color: #5e646c;
    pointer-events: none;
    transform: translateY(-50%);
}

.contact-field__help {
    margin-bottom: 0;
    color: #848a92;
    font-size: 12px;
    text-align: right;
}

/* =========================================================
   プライバシーポリシー
   ========================================================= */

.contact-privacy {
    padding: 21px 22px;
    border-radius: 11px;
    background: #fff8ef;
    color: #59606a;
    font-size: 13px;
    line-height: 1.8;
}

.contact-privacy > p {
    margin-bottom: 13px;
}

.contact-privacy a {
    color: #e85d18;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-checkbox {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    gap: 10px;
    color: #252a31;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.contact-checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.contact-checkbox__box {
    position: relative;
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    border: 2px solid #bbbfc5;
    border-radius: 5px;
    background: #fff;
}

.contact-checkbox input:checked + .contact-checkbox__box {
    border-color: #ef681f;
    background: #ef681f;
}

.contact-checkbox input:checked + .contact-checkbox__box::after {
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: "";
    transform: rotate(45deg);
}

.contact-checkbox input:focus-visible + .contact-checkbox__box {
    outline: 3px solid rgba(239, 104, 31, 0.22);
    outline-offset: 3px;
}

/* =========================================================
   メインボタン
   ========================================================= */

.contact-confirm-button,
.contact-register-button,
.contact-modal__submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background:
        linear-gradient(
            100deg,
            #ff851c,
            #ef450e
        );
    box-shadow: 0 11px 24px rgba(223, 70, 10, 0.2);
    color: #fff;
    cursor: pointer;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.contact-confirm-button {
    position: relative;
    width: min(500px, 100%);
    min-height: 62px;
    margin: 3px auto 0;
    padding: 14px 54px;
    border-radius: 999px;
    font-size: 18px;
}

.contact-confirm-button i {
    position: absolute;
    right: 25px;
}

.contact-confirm-button:hover,
.contact-register-button:hover,
.contact-modal__submit-button:hover {
    box-shadow: 0 14px 28px rgba(223, 70, 10, 0.27);
    filter: brightness(1.04);
    transform: translateY(-2px);
}

.contact-confirm-button:focus-visible,
.contact-register-button:focus-visible,
.contact-modal__submit-button:focus-visible {
    outline: 3px solid rgba(239, 104, 31, 0.3);
    outline-offset: 4px;
}

/* =========================================================
   サイドバー
   ========================================================= */

.contact-sidebar {
    display: grid;
    gap: 20px;
}

.contact-side-card {
    padding: 22px;
}

.contact-side-card--support {
    position: relative;
    overflow: hidden;
}

.contact-support-copy {
    position: relative;
    z-index: 2;
    width: 62%;
    min-height: 155px;
}

.contact-side-card__label {
    margin-bottom: 3px;
    color: #ed681f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.contact-support-copy h2 {
    margin-bottom: 10px;
    color: #1d2127;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.45;
}

.contact-support-copy > p:last-child {
    margin-bottom: 0;
    color: #5f6670;
    font-size: 13px;
    line-height: 1.7;
}

.contact-support-image {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -48px;
    width: 205px;
    height: 205px;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 33%,
            #000 100%
        );
    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 33%,
            #000 100%
        );
}

.contact-phone-box {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 91px;
    margin-top: 8px;
    padding: 14px 16px;
    align-items: center;
    gap: 13px;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #fff5e8,
            #fff9f1
        );
    color: #272c33;
}

.contact-phone-box__icon {
    display: flex;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #ff8a22,
            #ef5714
        );
    color: #fff;
    font-size: 21px;
}

.contact-phone-box__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
}

.contact-phone-box__copy strong {
    color: #ee5d17;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    letter-spacing: 0.025em;
    line-height: 1.2;
    white-space: nowrap;
}

.contact-line-button {
    display: grid;
    min-height: 58px;
    margin-top: 11px;
    padding: 11px 17px;
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    border: 2px solid #20c868;
    border-radius: 11px;
    color: #252a31;
    font-size: 14px;
    font-weight: 700;
}

.contact-line-button .fa-line {
    color: #06c755;
    font-size: 31px;
}

.contact-line-button .fa-chevron-right {
    justify-self: end;
    font-size: 12px;
}

.contact-line-button:hover {
    background: #f2fff7;
}

/* =========================================================
   返信案内
   ========================================================= */

.contact-response-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}

.contact-response-card__icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff2e5;
    color: #ef681f;
    font-size: 27px;
}

.contact-response-card h2 {
    margin-bottom: 6px;
    color: #23272e;
    font-size: 17px;
    font-weight: 800;
}

.contact-response-card p {
    margin-bottom: 0;
    color: #656c75;
    font-size: 12px;
    line-height: 1.75;
}

/* =========================================================
   よくある質問
   ========================================================= */

.contact-mini-faq__heading {
    display: grid;
    margin-bottom: 14px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.contact-mini-faq__heading > span {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff0e2;
    color: #ef681f;
}

.contact-mini-faq__heading h2 {
    margin-bottom: 0;
    color: #21252b;
    font-size: 17px;
    font-weight: 800;
}

.contact-mini-faq__heading small {
    color: #ef681f;
    font-size: 12px;
    font-weight: 800;
}

.contact-mini-faq__list {
    display: grid;
    gap: 8px;
}

.contact-faq-item {
    overflow: hidden;
    border: 1px solid #e5e6e8;
    border-radius: 8px;
    background: #fff;
}

.contact-faq-item summary {
    position: relative;
    min-height: 46px;
    padding: 11px 12px 11px 45px;
    color: #373c44;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    list-style: none;
}

.contact-faq-item summary::-webkit-details-marker {
    display: none;
}

.contact-faq-item summary::before {
    position: absolute;
    top: 50%;
    left: 12px;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f57425;
    color: #fff;
    content: "+";
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-50%);
}

.contact-faq-item[open] summary::before {
    content: "−";
}

.contact-faq-item p {
    margin: 0 12px 12px 45px;
    padding-top: 10px;
    border-top: 1px solid #ececee;
    color: #676e77;
    font-size: 12px;
    line-height: 1.75;
}

/* =========================================================
   下部CTA
   ========================================================= */

.contact-bottom-cta {
    padding: 0 24px 82px;
    background: #fffaf4;
}

.contact-bottom-cta__inner {
    position: relative;
    display: grid;
    width: min(1200px, 100%);
    min-height: 155px;
    margin: 0 auto;
    overflow: hidden;
    grid-template-columns: 260px minmax(0, 1fr) 330px;
    align-items: center;
    gap: 28px;
    border: 2px solid #f47a2c;
    border-radius: 17px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 248, 238, 0.96)
        );
    box-shadow: 0 13px 34px rgba(110, 68, 34, 0.09);
}

.contact-bottom-cta__image {
    height: 100%;
    min-height: 155px;
}

.contact-bottom-cta__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 155px;
    object-fit: cover;
    object-position: 63% center;
    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            #000 66%,
            transparent 100%
        );
    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            #000 66%,
            transparent 100%
        );
}

.contact-bottom-cta__copy p {
    margin-bottom: 7px;
    color: #565d66;
    font-size: 14px;
}

.contact-bottom-cta__copy h2 {
    margin-bottom: 0;
    color: #23272d;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 800;
    line-height: 1.5;
}

.contact-bottom-cta__copy h2 span {
    color: #ef5b15;
}

.contact-bottom-cta__actions {
    display: grid;
    padding-right: 24px;
    gap: 8px;
}

.contact-register-button {
    display: grid;
    min-height: 62px;
    padding: 13px 20px;
    grid-template-columns: 25px minmax(0, 1fr) 14px;
    gap: 11px;
    border-radius: 999px;
    font-size: 17px;
}

.contact-register-button .fa-chevron-right {
    font-size: 12px;
}

.contact-bottom-cta__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #3c4149;
    font-size: 13px;
    font-weight: 600;
}

.contact-bottom-cta__link:hover {
    color: #ef5d17;
}

/* =========================================================
   入力内容確認モーダル
   ========================================================= */

.contact-modal[hidden] {
    display: none;
}

.contact-modal {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: flex;
    padding: 24px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.contact-modal.is-visible {
    opacity: 1;
}

.contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 30, 0.66);
    backdrop-filter: blur(4px);
}

.contact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(690px, 100%);
    max-height: min(820px, calc(100vh - 48px));
    overflow-y: auto;
    padding: 36px clamp(22px, 4vw, 42px) 34px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    transform: translateY(15px) scale(0.98);
    transition: transform 0.18s ease;
}

.contact-modal.is-visible .contact-modal__dialog {
    transform: translateY(0) scale(1);
}

.contact-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f5f2ee;
    color: #343941;
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
}

.contact-modal__label {
    margin-bottom: 4px;
    color: #ef681f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-align: center;
}

.contact-modal__dialog h2 {
    margin-bottom: 8px;
    color: #20242b;
    font-size: 27px;
    font-weight: 800;
    text-align: center;
}

.contact-modal__lead {
    margin-bottom: 23px;
    color: #737982;
    font-size: 13px;
    line-height: 1.75;
    text-align: center;
}

.contact-confirm-list {
    margin-bottom: 26px;
    border-top: 1px solid #e8e2dc;
}

.contact-confirm-list > div {
    display: grid;
    padding: 14px 4px;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 16px;
    border-bottom: 1px solid #e8e2dc;
}

.contact-confirm-list dt {
    color: #4f5660;
    font-size: 13px;
    font-weight: 700;
}

.contact-confirm-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: #22272e;
    font-size: 14px;
    line-height: 1.75;
}

.contact-confirm-list__message {
    white-space: pre-wrap;
}

.contact-modal__buttons {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 12px;
}

.contact-modal__back-button,
.contact-modal__submit-button {
    min-height: 55px;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.contact-modal__back-button {
    border: 1px solid #cfd2d6;
    background: #fff;
    color: #40464f;
    cursor: pointer;
}

.contact-modal__submit-button {
    gap: 10px;
}

.contact-modal__submit-button:disabled {
    cursor: wait;
    filter: grayscale(0.35);
    opacity: 0.7;
}

.contact-modal-open {
    overflow: hidden;
}

/* =========================================================
   送信結果ページ
   ========================================================= */

.contact-result-main {
    min-height: 650px;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 216, 177, 0.3),
            transparent 280px
        ),
        radial-gradient(
            circle at 89% 76%,
            rgba(255, 221, 186, 0.25),
            transparent 300px
        ),
        #fffaf4;
}

.contact-result {
    display: flex;
    min-height: 650px;
    padding: 80px 24px;
    align-items: center;
    justify-content: center;
}

.contact-result__card {
    width: min(720px, 100%);
    padding: 42px clamp(24px, 5vw, 55px) 48px;
    border: 1px solid #eee3d7;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(83, 59, 38, 0.11);
    text-align: center;
}

.contact-result__progress {
    display: flex;
    width: min(390px, 100%);
    margin: 0 auto 32px;
    align-items: flex-start;
    justify-content: space-between;
}

.contact-result__progress > span {
    position: relative;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e4e5e7;
    color: #787e86;
    font-weight: 700;
}

.contact-result__progress > span:not(:last-child)::after {
    position: absolute;
    top: 20px;
    left: 42px;
    width: calc((min(390px, 80vw) - 126px) / 2);
    border-top: 3px dotted #ddd;
    content: "";
}

.contact-result__progress > span > span {
    position: absolute;
    top: 47px;
    left: 50%;
    color: #737982;
    font-size: 12px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.contact-result__progress .is-complete {
    background: #fff0e2;
    color: #ec641c;
}

.contact-result__progress .is-current {
    background:
        linear-gradient(
            145deg,
            #ff8a1f,
            #ef570f
        );
    color: #fff;
}

.contact-result__icon {
    display: flex;
    width: 76px;
    height: 76px;
    margin: 49px auto 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff0e2;
    color: #ef681f;
    font-size: 31px;
}

.contact-result__icon--success {
    background: #e8f9ef;
    color: #20a95a;
}

.contact-result__icon--error {
    background: #fff0ee;
    color: #d95445;
}

.contact-result__label {
    margin-bottom: 5px;
    color: #ef681f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.contact-result__card h1 {
    margin-bottom: 15px;
    color: #1d2127;
    font-size: clamp(25px, 3.2vw, 37px);
    font-weight: 800;
    line-height: 1.45;
}

.contact-result__text {
    margin-bottom: 27px;
    color: #626973;
    font-size: 15px;
    line-height: 1.9;
}

.contact-result__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.contact-result__button {
    display: inline-flex;
    min-width: 190px;
    min-height: 52px;
    padding: 11px 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.contact-result__button--primary {
    background:
        linear-gradient(
            100deg,
            #ff851c,
            #ef450e
        );
    color: #fff;
}

.contact-result__button--secondary {
    border: 1px solid #cfd2d6;
    background: #fff;
    color: #343a42;
}

/* =========================================================
   タブレット
   ========================================================= */

@media (max-width: 1050px) {
    .contact-content__inner {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 22px;
    }

    .contact-form-card {
        padding-right: 34px;
        padding-left: 34px;
    }

    .contact-bottom-cta__inner {
        grid-template-columns: 210px minmax(0, 1fr) 280px;
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .contact-hero {
        min-height: 330px;
        background-position: 61% center;
    }

    .contact-hero__copy {
        width: 56%;
    }

    .contact-hero__catch {
        margin-right: 0;
        font-size: 17px;
    }

    .contact-content__inner {
        width: min(720px, 100%);
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .contact-side-card--support {
        grid-row: span 2;
    }

    .contact-bottom-cta__inner {
        padding: 25px;
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .contact-bottom-cta__image {
        display: none;
    }

    .contact-bottom-cta__actions {
        padding-right: 0;
    }
}

/* =========================================================
   スマートフォン
   ========================================================= */

@media (max-width: 768px) {
    .contact-pc-only {
        display: none;
    }

    .contact-hero {
        min-height: 440px;
        align-items: flex-end;
        background-position: 64% center;
    }

    .contact-hero::after {
        position: absolute;
        z-index: 0;
        inset: 42% 0 0;
        background:
            linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.98),
                rgba(255, 255, 255, 0)
            );
        content: "";
    }

    .contact-hero__shade {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.52),
                rgba(255, 255, 255, 0.02)
            );
    }

    .contact-hero__inner {
        z-index: 2;
        display: block;
        width: min(100% - 34px, 650px);
    }

    .contact-hero__copy {
        width: 100%;
        padding: 195px 0 25px;
    }

    .contact-hero__message {
        margin-bottom: 9px;
        font-size: 14px;
    }

    .contact-hero h1 {
        font-size: clamp(34px, 10vw, 45px);
    }

    .contact-hero__english {
        margin-bottom: 8px;
        font-size: 20px;
    }

    .contact-hero__lead {
        font-size: 13px;
    }

    .contact-hero__catch {
        display: none;
    }

    .contact-breadcrumb ol {
        width: min(100% - 34px, 650px);
        min-height: 50px;
        gap: 11px;
    }

    .contact-breadcrumb li {
        font-size: 12px;
    }

    .contact-breadcrumb li + li::before {
        margin-right: 11px;
    }

    .contact-content {
        padding: 36px 17px 55px;
    }

    .contact-form-card {
        padding: 27px 18px 30px;
        border-radius: 14px;
    }

    .contact-progress {
        margin-bottom: 31px;
    }

    .contact-progress::before {
        top: 20px;
    }

    .contact-progress__number {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .contact-progress__item {
        font-size: 13px;
    }

    .contact-form-heading {
        margin-bottom: 27px;
    }

    .contact-form-heading h2 {
        font-size: 25px;
    }

    .contact-form-heading > p:last-child {
        font-size: 13px;
        text-align: left;
    }

    .contact-form {
        gap: 22px;
    }

    .contact-field > label {
        font-size: 15px;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        max-width: 100%;
        font-size: 16px;
    }

    .contact-field input,
    .contact-field select {
        min-height: 52px;
    }

    .contact-privacy {
        padding: 18px 16px;
    }

    .contact-checkbox {
        width: 100%;
        align-items: flex-start;
        font-size: 13px;
    }

    .contact-confirm-button {
        min-height: 58px;
        padding: 13px 45px;
        font-size: 16px;
    }

    .contact-sidebar {
        grid-template-columns: 1fr;
    }

    .contact-side-card--support {
        grid-row: auto;
    }

    .contact-support-copy {
        min-height: 145px;
    }

    .contact-support-image {
        right: -23px;
    }

    .contact-phone-box__copy strong {
        font-size: 21px;
    }

    .contact-bottom-cta {
        padding: 0 17px 60px;
    }

    .contact-bottom-cta__inner {
        padding: 26px 20px;
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .contact-bottom-cta__copy p {
        font-size: 13px;
    }

    .contact-bottom-cta__copy h2 {
        font-size: 23px;
    }

    .contact-modal {
        padding: 13px;
    }

    .contact-modal__dialog {
        max-height: calc(100vh - 26px);
        padding: 32px 18px 24px;
        border-radius: 14px;
    }

    .contact-modal__dialog h2 {
        font-size: 23px;
    }

    .contact-confirm-list > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .contact-modal__buttons {
        grid-template-columns: 1fr;
    }

    .contact-modal__submit-button {
        order: 1;
    }

    .contact-modal__back-button {
        order: 2;
    }

    .contact-result {
        min-height: 560px;
        padding: 55px 17px;
    }

    .contact-result__card {
        padding: 31px 18px 35px;
    }

    .contact-result__actions {
        flex-direction: column;
    }

    .contact-result__button {
        width: 100%;
    }
}

/* =========================================================
   小さいスマートフォン
   ========================================================= */

@media (max-width: 430px) {
    .contact-hero {
        min-height: 420px;
        background-position: 63% 35%;
    }

    .contact-hero__copy {
        padding-top: 180px;
    }

    .contact-hero h1 {
        font-size: 36px;
    }

    .contact-form-card {
        padding-right: 15px;
        padding-left: 15px;
    }

    .contact-progress__number {
        width: 40px;
        height: 40px;
    }

    .contact-progress::before {
        top: 19px;
    }

    .contact-support-copy {
        width: 65%;
    }

    .contact-support-copy h2 {
        font-size: 22px;
    }

    .contact-phone-box {
        padding-right: 11px;
        padding-left: 11px;
        gap: 9px;
    }

    .contact-phone-box__icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .contact-phone-box__copy strong {
        font-size: 19px;
    }

    .contact-register-button {
        font-size: 15px;
    }
}

/* =========================================================
   動きを減らす設定
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* =========================================================
   ヒーロー右側キャッチコピーの位置調整
   人物と重ならない中央の空白部分へ配置
   ========================================================= */

@media (min-width: 901px) {
    .contact-hero__catch {
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 52%;
        width: 210px;
        margin: 0;
        padding: 15px 18px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 8px 24px rgba(45, 55, 65, 0.08);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        color: #282c33;
        font-size: clamp(15px, 1.25vw, 19px);
        line-height: 1.7;
        transform: translate(-50%, -50%) rotate(-4deg);
    }

    .contact-hero__catch::after {
        width: 100%;
        margin-top: 5px;
    }
}

/* 幅が狭い画面では人物との重なりを防ぐため非表示 */
@media (min-width: 769px) and (max-width: 900px) {
    .contact-hero__catch {
        display: none;
    }
}