*,
*::before,
*::after {
    box-sizing: border-box;
}

a,
a:hover,
a:visited {
    color: #fff;
}

html,
body,
p,
h1,
h2,
h3 {
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
}

body {
    background-color: #DBDBDB;
}

/* ヘッダー */
header {
    height: 8vh;
    width: 100%;

    padding: 0px 30px;

    display: flex;
    align-items: center;
    align-content: center;

    background-color: #eee;
}

.header__logo--size {
    height: auto;
    width: 5%;
}

main {
    display: flex;
    flex-direction: column;

    align-items: center;
}

.container {
    width: 70%;

    background-color: #fff;
}

/* ファーストビュー */
.first-view {
    position: relative;
    width: 100%;
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;

    font-weight: 700;
    z-index: 0;
    overflow: hidden;
}

/* 背景画像を別レイヤーに移動 */
.first-view::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url(../images/first-view-bg.jpg);
    background-size: cover;
    background-position: center;
    filter: brightness(0.5) blur(2px);

    z-index: -1;
}


.first-view__text--white {
    color: #fff;
}

.first-view__text--rounded {

    padding: 10px 20px;

    background: #eee;
    border-radius: 128px;
    color: #aaaaaaff;
}

.first-view__text--largetxt {
    color: #fff;
    font-size: 40px;
    font-weight: 900;
}

.first-view__text-note {
    color: #d0d0d0ff;
    font-size: 13px;
    font-weight: 400;
}

h1 {
    color: #fff;
    font-size: 64px;
    font-weight: 900;
}

.first-view__h1--span {
    font-size: 144px;
    font-style: italic;
    font-weight: 900;

    /* line-height: 1.4; */
    text-shadow: 5px 5px 0px #003e84ff;

    margin-right: 10px;
}

/* フォームヘッダー */
.form-container__header-block {
    height: auto;
    width: 100%;

    padding: 30px 20px;

    background: #ffffffff;

    display: flex;
    align-items: center;
    gap: 20px;
}

.form-container__header-line {
    height: 3px;
    width: 20%;

    background: #000000ff;
}

h2 {
    color: #333333;
    font-size: 28px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: left;
}

/* フォーム入力項目 */
.form-container__title-block {
    height: auto;
    width: 100%;

    padding: 20px 20px 10px 20px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    background: #003e84ff;
}

.form-container__title-block--center {
    height: auto;
    width: 100%;

    padding: 20px 20px 10px 20px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background: #003e84ff;
}

h3 {
    color: #eee;
}

.form-container__title-require {
    height: auto;
    width: auto;

    padding: 5px 10px;

    background: #eee;
    border-radius: 128px;

    color: #ff090dff;
    font-size: 15px;
    font-weight: 700;
}

.form-container__content-block {
    height: auto;
    width: 100%;

    padding: 20px;

    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 20px;

    background: #fff;
}

.form-container__content-block--row {
    height: auto;
    width: 100%;

    padding: 20px;

    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 20px;

    background: #fff;
}

.form-container__content-inner-block {
    width: 50%;
}

.form-container__content-inner-block--left {
    width: 50%;

    display: flex;
    justify-content: flex-end;
}

.image-placeholder--row {
    height: 150px;
    width: 45%;

    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eee;
    border-radius: 10px;
}

.form-container__button-block {
    height: auto;
    width: 100%;

    padding: 50px 30px;

    display: flex;
    justify-content: center;

    background: #fff;
}

.form-container__button-block button:disabled {
    pointer-events: none;
    background-color: #ccc;
    opacity: 0.6;
    /* 見た目にも無効化 */
    cursor: not-allowed;
}

/* ラジオボタン */
.radio-group {
    display: flex;
    gap: 20px;
}

.radio-card {
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    width: 150px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.radio-card.selected {
    border: 2px solid #005bac;
    box-shadow: 0 0 8px rgba(0, 91, 172, 0.3);
}

.radio-card input[type="radio"] {
    display: none;
}

.image-placeholder {
    background: #eee;
    height: 100px;
    width: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 10px;
}

.image-placeholder--large {
    background: #eee;
    height: 150px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* テキスト入力 */
.input-set {
    display: flex;
    flex-direction: column;

    align-items: center;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.input-group span {
    font-size: 1rem;
}

.input-group input[type="number"] {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 150px;
}

/* チェックスボックス */
.checkbox-group {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* セレクトボックス */
select {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    appearance: none;
    background-color: #fff;
}

/* 補足 */
.note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
    text-align: center;
}

button {
    height: auto;
    width: auto;

    padding: 30px 40px;

    text-align: center;
    color: #ffffffff;
    font-size: 20px;
    font-weight: 700;

    background: #005bac;
    border-radius: 16px;
    border: none;

    cursor: pointer;
}

button:hover {
    background: #2983d2;
}

footer {
    height: 100px;
    width: 100%;

    padding-bottom: 30px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    background: #333333ff;

    font-size: 20px;
    color: #fff;
}

.calculation {
    border: 2px solid #005bac;
    height: auto;
    justify-content: center;
    padding: 20px;
    width: auto;
    margin-top: 10px;

    font-weight: 700;
}

/* 見積もり結果 */
.result-price {
    color: #f28412ff;
    font-size: 32px;
    font-weight: 700;
}

.result-price__span {
    font-size: 64px;
    font-weight: 400;
}

.button__move-to-download {

    height: auto;
    width: 95%;

    padding: 10px;

    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
    gap: 10px;

    background: #808080ff;
    border-radius: 8px;

    text-decoration: none;
}

a:visited {
    color: #fff;
}

.container-inner__block {
    height: auto;
    width: 70%;

    padding-top: 20px;
    padding-bottom: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.breakdown-info__table {
    border-spacing: 0;
    font-size: 12px;
}

.breakdown-info__table td,
th {
    padding: 10px;
}

.breakdown-info__table th {
    background-color: #003e84ff;

    color: #fff;
    text-align: left;
}

.breakdown-info__table td {
    background-color: #eee;

    color: #333;
    text-align: right;
}

.breakdown-info__table td[colspan="2"] {
    background-color: transparent;
}

.breakdown-info__note {
    text-align: right;
    margin: 10px 0px;
}

.simulation-note {
    height: auto;
    width: 95%;

    padding: 10px 20px;
    margin: 0 auto;

    border: 1px solid #333333;
    border-radius: 8px;

    font-size: 10px;
}

.desc__text {
    text-align: center;
    color: #333;
    font-size: 12px;
}

.desc__text--large {
    font-size: 20px;
}

.desc__text--span {
    color: #003e84ff;
    font-weight: 700;
}

.contact__form {
    height: auto;
    width: 100%;

    align-content: center;
    align-items: center;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;

    border: 2px solid #003e84ff;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
}

.contact__form-row {
    display: flex;
}

.contact__form-label-block {
    height: auto;
    width: 30%;

    padding: 10px;

    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;

    background: #003e84ff;
    color: #fff;
}

.contact__form-input-block {
    height: auto;
    width: 70%;

    padding: 10px;

    display: flex;
    flex-direction: column;
    /* align-content: center; */
    /* align-items: center; */
    justify-content: flex-start;
    gap: 20px;

    background: #F2F2F2;
    color: #333;
}

.text-input {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.text-input__name {
    width: 150px;
}

.text-input__short-number {
    width: 100px;
}

.contact__form-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
}

.contact__form-input-block--note {
    font-size: 12px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-submit__button-group {
    height: auto;
    width: 80%;

    margin: 30px 0px;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: #003e84ff;
    border-radius: 8px;
    border: none;

    color: white;

    cursor: pointer;

    font-size: 20px;
}

.yellow_header {
    color: #ffda00
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;            /* ← ここは残して OK */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 追記 ↓↓↓ */
.loading-overlay[hidden]{
    display: none !important;
}

/* Font Awesome の回転は .fa-spin が付くので追加不要 */
/* 好みでサイズや色を変えたければここで調整 */
.loading-overlay i {
    color: #3498db;
}

#thanks {
    color: red;
}

/* 768px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 768px) {

    /* ヘッダー */
    header {
        height: 6vh;
        width: 100%;

        padding: 0px;

        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;

        background-color: #eee;
    }

    .header__logo--size {
        height: auto;
        width: 10%;
    }

    /* ファーストビュー */
    .first-view {
        position: relative;
        width: 100%;
        padding: 20px;

        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;

        font-weight: 700;
        z-index: 0;
        overflow: hidden;
    }

    .first-view__text--largetxt {
        font-size: 32px;
    }

    h1 {
        font-size: 48px;
    }

    .first-view__h1--span {
        font-size: 64px;
    }

    .first-view__desc {
        font-size: 10px;
        padding: 0px 10px;
    }

    .first-view__text-note {
        font-size: 8px;
    }

    .container {
        width: 100%;
    }

    /* フォームヘッダー */
    .form-container__header-line {
        height: 2px;
    }

    h2 {
        font-size: 16px;
    }

    /* フォームタイトル */
    h3 {
        font-size: 14px;
    }

    .form-container__title-require {
        font-size: 10px;
    }

    /* ラジオボタン */
    .radio-group {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .radio-group span {
        font-size: 12px;
    }

    .input-group span {
        font-size: 12px;
    }

    .input-group__column {
        flex-direction: column;
    }

    .label-text {
        font-size: 10px;
    }

    label {
        font-size: 10px;
    }

    .form-container__content-block--row {
        flex-direction: column;
    }

    .form-container__content-inner-block--left {
        width: 50%;

        display: flex;
        justify-content: center;
    }

    .image-placeholder--row {
        height: 100px;
        width: 100%;

        margin-bottom: 10px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #eee;
        border-radius: 10px;
    }

    /* 見積もり結果画面 */
    .result-price__span {
        font-size: 50px;
    }

    .container-inner__block {
        width: 100%;
    }

    .button__move-to-download {

        height: auto;
        width: 100%;

        padding: 10px;

        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;

        margin: 0 auto;
        gap: 10px;

        background: #808080ff;
        border-radius: 8px;

        text-decoration: none;

        font-size: 12px;
    }

    th,
    td {
        font-size: 8px;
    }

    .breakdown-info__note {
        font-size: 8px;
    }

    .desc__text {
        font-size: 8px;
    }

    .desc__text--large {
        font-size: 12px;
    }

    .contact__form-row {
        flex-direction: column;
    }

    .contact__form-label-block {
        width: 100%;
        justify-content: space-between;
    }

    .contact__form-label-block label {
        font-size: 12px;
    }

    .contact__form-input-block {
        width: 100%;
    }

    .text-input__name {
        width: 100%;
    }

    .contact-submit__button-group {
        height: auto;
        width: 80%;

        margin: 30px 0px;
        padding: 10px 20px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        background: #003e84ff;
        border-radius: 8px;
        border: none;

        color: white;

        cursor: pointer;

        font-size: 12px;
    }

}