@charset "utf-8";
/* ============================
 *  Contact Form Styles
 *  参照: jops.co.jp/contact/ 風デザイン
 * ============================ */

/* ---- Step Bar ---- */
.step-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto 3em;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step-bar li {
    flex: 1;
    position: relative;
    text-align: center;
    font-size: 90%;
    font-weight: 700;
    color: #b0b0b0;
}

.step-bar li::before {
    content: counter(step);
    counter-increment: step;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    margin: 0 auto 0.5em;
    border-radius: 50%;
    background-color: #ddd;
    color: #fff;
    font-size: 110%;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.step-bar li::after {
    content: "";
    position: absolute;
    top: 1.2em;
    left: calc(50% + 1.2em);
    width: calc(100% - 2.4em);
    height: 3px;
    background-color: #ddd;
    z-index: 0;
}

.step-bar li:last-child::after {
    display: none;
}

.step-bar li.is-active::before {
    background-color: #164a84;
}

.step-bar li.is-active {
    color: #164a84;
}

.step-bar li.is-done::before {
    background-color: #2e7abf;
}

.step-bar li.is-done::after {
    background-color: #2e7abf;
}

.step-bar li.is-done {
    color: #2e7abf;
}


/* ---- Form Container ---- */
.cf-container {
    width: 92%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0 4em;
}

.cf-heading {
    font-size: 200%;
    font-weight: 700;
    text-align: center;
    color: #164a84;
    margin-bottom: 0.4em;
}

.cf-sub {
    text-align: center;
    color: #555;
    margin-bottom: 2.5em;
    line-height: 1.8;
}

.cf-note {
    text-align: right;
    font-size: 85%;
    color: #888;
    margin-bottom: 1em;
}


/* ---- Form Table ---- */
.cf-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #164a84;
}

.cf-table tr {
    border-bottom: 1px solid #e0e0e0;
}

.cf-table th {
    width: 240px;
    padding: 1.4em 1.2em;
    text-align: left;
    vertical-align: top;
    background-color: #f5f8fc;
    font-weight: 700;
    font-size: 95%;
    color: #333;
    white-space: nowrap;
}

.cf-table th .th-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}

.cf-table td {
    padding: 1.4em 1.2em;
    vertical-align: top;
}

.cf-table td.confirm-value {
    font-size: 100%;
    color: #222;
    line-height: 1.8;
}


/* ---- Badges ---- */
.badge {
    display: inline-block;
    font-size: 70%;
    font-weight: 700;
    padding: 0.15em 0.6em;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.6;
    flex-shrink: 0;
    margin-top: 0.15em;
}

.badge-required {
    background-color: #d7003a;
    color: #fff;
}

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


/* ---- Input Fields ---- */
.cf-table input[type="text"],
.cf-table input[type="email"],
.cf-table input[type="tel"],
.cf-table select {
    width: 100%;
    max-width: 100%;
    padding: 0.7em 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 100%;
    font-family: inherit;
    background-color: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.cf-table input[type="text"]:focus,
.cf-table input[type="email"]:focus,
.cf-table input[type="tel"]:focus,
.cf-table select:focus {
    border-color: #2e7abf;
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 122, 191, 0.15);
}

.cf-table .input-short {
    max-width: 200px;
}

.cf-table .input-mid {
    max-width: 360px;
}

.cf-table textarea {
    width: 100%;
    max-width: 100%;
    min-height: 200px;
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 100%;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.cf-table textarea:focus {
    border-color: #2e7abf;
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 122, 191, 0.15);
}

.cf-table label.radio-label {
    display: inline-block;
    margin-right: 1.5em;
    margin-bottom: 0.3em;
    cursor: pointer;
    font-weight: 400;
}

.cf-table label.radio-label input[type="radio"] {
    margin-right: 0.3em;
}

.input-note {
    display: block;
    font-size: 82%;
    color: #888;
    margin-top: 0.4em;
}

.cf-table .address-group dt {
    font-weight: 700;
    font-size: 90%;
    color: #555;
    margin-top: 0.8em;
    margin-bottom: 0.3em;
}

.cf-table .address-group dt:first-child {
    margin-top: 0;
}

.cf-table .address-group dd {
    margin: 0 0 0.3em;
    padding: 0;
}

.cf-table .address-group select {
    max-width: 200px;
}


/* ---- Error Messages ---- */
.iferror {
    display: none;
    color: #d7003a;
    font-size: 85%;
    margin-top: 0.3em;
}


/* ---- Privacy Agreement ---- */
.cf-privacy {
    text-align: center;
    margin: 2.5em 0;
    padding: 1.5em;
    background-color: #f9fafb;
    border-radius: 6px;
}

.cf-privacy label {
    font-weight: 700;
    cursor: pointer;
}

.cf-privacy label input[type="checkbox"] {
    margin-right: 0.5em;
}

.cf-privacy .privacy-link {
    display: block;
    margin-top: 0.8em;
    font-size: 90%;
}

.cf-privacy .privacy-link a {
    color: #2e7abf;
    text-decoration: underline;
}


/* ---- Buttons ---- */
.cf-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    margin-top: 2.5em;
}

.btn-cf {
    display: inline-block;
    padding: 1em 3.5em;
    font-size: 105%;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.25s, opacity 0.25s;
}

.btn-cf-primary {
    background-color: #164a84;
    color: #fff;
}

.btn-cf-primary:hover {
    background-color: #0e3057;
}

.btn-cf-secondary {
    background-color: #777;
    color: #fff;
}

.btn-cf-secondary:hover {
    background-color: #555;
}

.btn-cf-success {
    background-color: #164a84;
    color: #fff;
    padding: 1em 4em;
    font-size: 110%;
}

.btn-cf-success:hover {
    background-color: #0e3057;
}


/* ---- Complete Page ---- */
.cf-complete {
    text-align: center;
    padding: 2em 0 3em;
}

.cf-complete-icon {
    font-size: 400%;
    color: #2e7abf;
    margin-bottom: 0.3em;
    line-height: 1;
}

.cf-complete h2 {
    font-size: 180%;
    font-weight: 700;
    color: #164a84;
    margin-bottom: 1em;
}

.cf-complete p {
    color: #555;
    line-height: 2;
    margin-bottom: 0.5em;
}

.cf-complete .contact-info {
    display: inline-block;
    text-align: left;
    background-color: #f5f8fc;
    padding: 1.5em 2em;
    border-radius: 6px;
    margin: 2em 0;
    border-left: 4px solid #164a84;
}

.cf-complete .contact-info p {
    margin: 0;
    line-height: 1.8;
}


/* ---- Responsive ---- */
@media screen and (max-width: 768px) {
    .step-bar {
        max-width: 100%;
        padding: 0 1em;
    }

    .step-bar li {
        font-size: 78%;
    }

    .cf-heading {
        font-size: 160%;
    }

    .cf-table th,
    .cf-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .cf-table th {
        padding: 1em 1em 0.5em;
        background: linear-gradient(to right, rgba(14, 48, 87, 0.85), rgba(29, 97, 174, 0.85));
        color: #fff;
    }

    .cf-table th .badge-required {
        background-color: #fff;
        color: #d7003a;
    }

    .cf-table th .badge-optional {
        background-color: rgba(255,255,255,0.3);
        color: #fff;
    }

    .cf-table td {
        padding: 1em;
    }

    .cf-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-cf {
        width: 80%;
        max-width: 300px;
    }

    .cf-table .input-short,
    .cf-table .input-mid {
        max-width: 100%;
    }
}