/*========================================
  資料請求（一括資料請求フォーム）ページ
  デザイン幅 1600px
========================================*/
.request-page {
    padding-bottom: 120px;
}

/*----------------------------------------
  ページ見出し（施工実例集・建築会社情報と同じ作り）

  アイコンは横長で背が低いので、幅は施工実例集と同じ 52.19px に合わせ、
  見た目の高さ（約39px）が他ページのアイコンと揃うようにしている。
----------------------------------------*/
.request-page__head {
    padding-top: 22.8px;
    text-align: center;
}

.request-page__icon {
    display: block;
    width: 52.19px;
    height: auto;
    margin: 0 auto;
}

.request-page__title {
    margin-top: 13.9px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-indent: 0.08em;
}

.request-page__line {
    display: block;
    width: 153.23px;
    height: auto;
    margin: 20px auto 0;
}

/*----------------------------------------
  フォーム全体
----------------------------------------*/
.request-form {
    max-width: 1000px;
    margin: 48px auto 0;
}

/* 質問のかたまり。区切り線はブロックの下側に引く */
.request-block {
    padding-bottom: 32px;
    border-bottom: 1px solid #231815;
}

/* お気に入りが空のときはその枠ごと隠れるので、隣接指定から外す */
.request-block:not([hidden]) + .request-block {
    padding-top: 32px;
}

.request-block__title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

/* 見出し頭の■ */
.request-block__title::before {
    content: "■";
    margin-right: 4px;
    letter-spacing: 0;
}

/* ■のつかない小見出し（世帯年収について） */
.request-block__subtitle {
    margin-top: 48px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.request-block__lead {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.4;
}

.request-block__lead + .form-options {
    margin-top: 8px;
}

/*----------------------------------------
  フォーム部品（このページ内で共通）
----------------------------------------*/
/* ラジオ・チェックボックスの1項目 */
.form-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.form-option__label {
    margin-left: 8px;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* 横並びのラジオ群。折り返しても行間があくようにする */
.form-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 24px;
}

.form-radio {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid #231815;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* 選択時は内側に点を打つ（枠の太さは変えない） */
.form-radio:checked {
    box-shadow: inset 0 0 0 3px #fff;
    background: #231815;
}

/* チェックボックスは絞り込み条件（.search__checkbox）と同じ見た目。
   input自体は隠し、見た目は .form-checkbox-box で作る
   （チェックマークが枠の右上にはみ出すため、背景画像では表現できない） */
.form-checkbox {
    position: absolute;
    width: 19.2px;
    height: 19.2px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.form-checkbox-box {
    position: relative;
    flex: 0 0 auto;
    width: 19.2px;
    height: 19.2px;
    border: 1px solid #231815;
    background: #fff;
}

/* チェック時：枠内をグレーで塗り、チェックマークを重ねる */
.form-checkbox:checked + .form-checkbox-box {
    background: #b3b3b3;
}

.form-checkbox:checked + .form-checkbox-box::before {
    content: "";
    position: absolute;
    top: -2.31px;
    left: 2.62px;
    width: 16.17px;
    height: 15.56px;
    background: url("../img/check.svg") no-repeat center / contain;
}

.form-radio:focus-visible,
.form-checkbox:focus-visible + .form-checkbox-box {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* 1行テキスト入力／テキストエリア */
.form-text,
.form-textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #231815;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.form-textarea {
    min-height: 110px;
    resize: vertical;
}

.form-text::placeholder,
.form-textarea::placeholder {
    color: #999;
}

.form-text:focus,
.form-textarea:focus {
    outline: 2px solid #8cb4eb;
    outline-offset: -1px;
}

.form-options + .form-text {
    margin-top: 12px;
}

.request-block__title + .form-textarea {
    margin-top: 24px;
}

/* ラベル付きの入力欄（お客様情報） */
.form-field {
    margin-top: 24px;
}

.form-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.form-field__required {
    margin-left: 2px;
}

/*----------------------------------------
  おすすめの建築会社
----------------------------------------*/
.request-form__checkall {
    margin-top: 24px;
    padding: 8px 16px;
    border: 1px solid #231815;
    background: #fff;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* 押した状態（＝すべてチェック済み）は反転させる */
.request-form__checkall[aria-pressed="true"] {
    background: #231815;
    color: #fff;
}

.request-companies {
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

.request-companies__item + .request-companies__item {
    margin-top: 12px;
}

/* 対象の会社が1社も無いとき */
.request-companies__empty {
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/* URLで会社を指定して来たときの送信先。選び直せないので枠囲みで出す */
.request-companies__fixed {
    padding: 14px 16px;
    border: 1px solid #c4c2c3;
    background: #fcf5e3;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.request-companies__fixed + .request-companies__fixed {
    margin-top: 8px;
}

/* 「ほかの会社にも請求する場合は〜」などの補足 */
.request-companies__note {
    margin-top: 16px;
    color: #666;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

.request-companies__note a {
    text-decoration: underline;
}

/*----------------------------------------
  個人情報の取り扱い
----------------------------------------*/
.request-privacy {
    padding: 32px 0;
    border-bottom: 1px solid #231815;
}

.request-privacy__text {
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.9;
}

.request-privacy__agree {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.request-privacy__link {
    color: #e60012;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-decoration: underline;
}

/*----------------------------------------
  送信ボタン
----------------------------------------*/
.request-form__submit {
    margin-top: 48px;
    text-align: center;
}

.request-form__button {
    width: 320px;
    max-width: 100%;
    padding: 18px 0;
    border: none;
    background: #f08278;
    color: #fcf5e3;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-indent: 0.08em;
}

/*----------------------------------------
  エラー表示
----------------------------------------*/
/* フォームの先頭に出すまとめ */
.request-form__errors {
    max-width: 900px;
    margin: 0 auto 32px;
    padding: 20px 24px;
    border: 1px solid #e28383;
    background: #fcefec;
}

.request-form__errors-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.request-form__errors-list {
    margin-top: 8px;
    padding-left: 20px;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.8;
    list-style: disc;
}

/* 入力欄のすぐ下に出すもの */
.form-field__error {
    margin-top: 6px;
    color: #e60012;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/*----------------------------------------
  受付完了ページ
----------------------------------------*/
.request-complete {
    max-width: 900px;
    margin: 64px auto 0;
    text-align: center;
}

.request-complete__title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

.request-complete__text {
    margin-top: 24px;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 2;
}

.request-complete__note {
    margin-top: 24px;
    color: #666;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

/* ボタンは送信ボタンと同じ大きさで、色だけ変える */
.request-complete__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    max-width: 100%;
    margin-top: 48px;
    padding: 18px 0;
    background: #f4c773;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-indent: 0.08em;
    transition: opacity 0.3s;
}

@media (hover: hover) {
    .request-form__button:hover,
    .request-form__checkall:hover,
    .request-complete__back:hover {
        opacity: 0.8;
    }
}

/*========================================
  SP / タブレット（1023px 以下）
========================================*/
@media screen and (max-width: 1023px) {
    .request-page {
        padding-bottom: 56px;
    }

    .request-page__head {
        padding-top: 8px;
    }

    .request-page__icon {
        width: 42px;
    }

    .request-page__title {
        margin-top: 10px;
        font-size: 20px;
    }

    .request-page__line {
        width: 110px;
        margin-top: 12px;
    }

    .request-form {
        max-width: none;
        margin-top: 24px;
        padding: 0 16px;
    }

    .request-block {
        padding-bottom: 24px;
    }

    .request-block:not([hidden]) + .request-block {
        padding-top: 24px;
    }

    .request-block__title,
    .request-block__subtitle {
        font-size: 16px;
    }

    .request-block__subtitle {
        margin-top: 32px;
    }

    .form-options {
        gap: 10px 16px;
        margin-top: 16px;
    }

    .form-option__label,
    .form-field__label,
    .request-block__lead {
        font-size: 14px;
    }

    /* iOSで入力時に拡大されないよう16pxのまま置く */
    .form-text,
    .form-textarea {
        padding: 9px 12px;
    }

    .request-companies,
    .request-form__checkall {
        margin-top: 16px;
    }

    .request-companies__fixed {
        padding: 12px;
        font-size: 14px;
    }

    .request-companies__note {
        margin-top: 12px;
        font-size: 12px;
    }

    .request-privacy {
        padding: 24px 0;
    }

    .request-privacy__text,
    .request-privacy__link {
        font-size: 13px;
    }

    .request-form__submit {
        margin-top: 32px;
    }

    .request-form__button {
        width: 100%;
        padding: 16px 0;
    }

    .request-form__errors {
        margin-bottom: 24px;
        padding: 16px;
    }

    .request-form__errors-title {
        font-size: 14px;
    }

    .request-form__errors-list {
        font-size: 13px;
    }

    .request-complete {
        margin-top: 40px;
    }

    .request-complete__title {
        font-size: 18px;
    }

    .request-complete__text {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.9;
    }

    .request-complete__note {
        margin-top: 20px;
        font-size: 12px;
    }

    .request-complete__back {
        width: 100%;
        margin-top: 32px;
        padding: 16px 0;
    }
}