.query-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #ffffff;
}

.query-input .frame-query {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 794px;
}

.query-input .contact-Information {
    padding: 0px 51px;
}

.query-input .text-wrapper-2 {
    width: fit-content;
    line-height: 2;
    margin: 0 auto 30px;
}

.query-input .form-query {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 90px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    box-shadow: 0px 4px 4px #00000040;
    background-image: url(../img/paper.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.form-h2 {
    padding-bottom: 40px;
    font-size: 1.25em;
}

.query-thanks {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    padding: 150px 0 0;
}

.query-input .frame-3 {
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 0px 40px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}

.query-input .span {
color: var(--color-asterisk);
font-size: 16px;
}

.query-input .text-wrapper-3 {
letter-spacing: 0.1em;
font-size: 0.75em;
}

.query-input .select {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 7px 117px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}

.query-input .text-wrapper-5 {
color: var(--color-asterisk);
font-size: 16px;
line-height: 19.2px;
}

.query-input .category {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 0px 0px 0px 134px;
position: relative;
flex: 0 0 auto;
}

.query-input .options {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0px 4px;
position: relative;
flex: 0 0 auto;
}

.query-input .div-4 {
width: fit-content;
letter-spacing: 0.05em;
line-height: 1.5;
white-space: nowrap;
position: relative;
}

.query-input .frame-4 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 40px 100px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}

.query-input .div-5 {
align-items: center;
justify-content: flex-end;
padding: 10px 0px;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
display: flex;
position: relative;
}

.query-input .div-6 {
width: fit-content;
white-space: nowrap;
position: relative;
}

.query-input .item {
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
}

.query-input .input {
flex-direction: column;
align-items: flex-end;
justify-content: center;
flex: 1;
display: flex;
position: relative;
}

.query-input .sample-text-wrapper {
flex-direction: column;
width: 556px;
height: 40px;
align-items: flex-start;
justify-content: center;
gap: 10px;
padding: 0px 10px;
background-color: #ffffff4c;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: var(--variable-collection-input-line);
box-shadow: inset 0px 1px 4px #00000040;
display: flex;
position: relative;
}

.query-input .sample-text {
position: relative;
width: fit-content;
font-family: "Noto Sans JP-Regular", Helvetica;
font-weight: 400;
color: #989898;
font-size: 16px;
letter-spacing: 1.6px;
line-height: 32px;
white-space: nowrap;
}

.query-input .text-wrapper-7 {
color: var(--color-asterisk);
}

.query-input .input-2 {
align-items: center;
justify-content: flex-end;
gap: 57px;
flex: 1;
display: flex;
position: relative;
}

.query-input .input-4 {
height: 40px;
padding: 0px 10px;
background-color: #ffffff4c;
box-shadow: inset 0px 1px 4px #00000040;
position: relative;
border: none;
letter-spacing: 0.1em;
white-space: nowrap;
}

.query-input .input-field {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 10px;
padding: 10px 0px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}

.query-input .item-2 {
display: flex;
align-self: stretch;
width: 100%;
align-items: center;
position: relative;
flex: 0 0 auto;
}

.query-input .input-wrapper {
flex-direction: column;
align-items: flex-end;
justify-content: center;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
display: flex;
position: relative;
}

.query-input .privacy-policy {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 60px 70px 0;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}

.query-input .privacy-box {
    box-shadow: inset 0px 1px 4px #00000040;
    padding: 20px 10px 20px 40px;
}

.privacy-policy-title {
    font-size: 1em;
}

.list-style {
    list-style: revert;
    width: 543px;
    font-size: 0.875em;
}

.query-input .text-wrapper-8 {
align-self: stretch;
letter-spacing: 0.07em;
line-height: 2;
position: relative;
}

.query-input .btn {
padding: 4px 60px;
background-color: var(--color-green-black);
border: none;
cursor: pointer;
}

.query-input .btn-previous {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 4px 40px;
position: relative;
flex: 0 0 auto;
background-color: var(--color-light-brown);
}

.btn-confirm {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding-right: 200px;
}

.query-input .text-wrapper-9 {
    color: #ffffff;
    font-family: "Zen Old Mincho", sans-serif;
    font-weight: 600;
    font-size: 1.25em;
    letter-spacing: 0.1em;
}

.query-input .menu a.text-wrapper,
.query-input .instagram,
.query-input .note {
    display: inline-flex;
}

.query-input form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 794px;
}

.query-input fieldset.select {
    border: 0;
    margin: 0;
    min-width: 0;
}

.query-input .category .options {
    cursor: pointer;
}

.query-input .options-2:checked {
    background: radial-gradient(circle, #333333 0 45%, transparent 46% 100%);
}

.query-input .input-3,
.query-input .input-4,
.query-input .input-5 {
    font: inherit;
    color: var(--color-text-gray);
}

.query-input .input-3,
.query-input .input-4 {
width: 100%;
max-width: 417px;
min-width: 0;
}

.query-input .input-3 {
flex-direction: column;
align-items: flex-start;
justify-content: center;
display: inline-flex;
position: relative;
width: 179px;
height: 40px;
padding: 0 10px;
background-color: #ffffff4c;
border: none;
box-shadow: inset 0px 1px 4px #00000040;
}

.query-input .input-5 {
flex-direction: column;
align-items: flex-start;
display: flex;
position: relative;
width: 100%;
max-width: 556px;
min-height: 230px;
height: 230px;
padding: 0 10px;
background-color: #ffffff4c;
border: none;
box-shadow: inset 0px 1px 4px #00000040;
resize: vertical;
line-height: 2;
letter-spacing: 0.1em;
}

.confirm-label-line {
    border-bottom: solid 1px #777777;
}
.confirm-label {
    width: 556px;
    line-height: 1.3em;
    padding: 10px;
    box-shadow: inset 0px 1px 4px #00000040;
}

.query-input .input-3::placeholder,
.query-input .input-4::placeholder,
.query-input .input-5::placeholder {
    color: #989898;
    opacity: 1;
}

.query-input .input-3:focus-visible,
.query-input .input-4:focus-visible,
.query-input .input-5:focus-visible,
.query-input .btn:focus-visible,
.query-input .options-2:focus-visible {
    outline: 2px solid #a2be87;
    outline-offset: 1px;
}

.query-input .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0,0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-response {
    display: none;
}


/* ============================================================
   Responsive design: 1440px / 1024px / 768px / 432px
   ============================================================ */
@media (max-width: 768px) {
    .query-input .frame,
    .query-input .header-page-title,

    .query-input .form-query,
    .query-input .frame-4,
    .query-input .privacy-policy,
    .query-input .input-wrapper {
        width: 100%;
    }

    .query-input .frame-query {
        width: 630px;
    }

    .query-input form {
        width: 556px;
    }

    .query-input .header-page-title {
        flex-direction: column;
    }

    .query-input .div-wrapper,
    .query-input .recruit-spring {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .query-input .select,
    .query-input .frame-4,
    .query-input .privacy-policy,
    .query-input .frame-3 {
        padding-left: 24px;
        padding-right: 24px;
    }

    .query-input .category {
        padding-top: 10px;
        padding-left: 0;
    }

    .query-input .div-5,
    .query-input .input-2 {
        align-items: flex-start;
    }

    .query-input .input,
    .query-input .input-2,
    .query-input .sample-text-wrapper,
    .query-input .input-3,
    .query-input .input-4,
    .query-input .input-5,
    .query-input .SNS {
        width: 100%;
        max-width: 100%;
    }

    .query-input .input-2 {
        gap: 14px;
    }

    .query-input .sample-text-wrapper {
        width: 100%;
    }

    .query-input .colophon {
        height: auto;
        padding: 30px 24px;
    }

    .query-input .text-wrapper-13 {
        white-space: normal;
    }

    .query-input .contact-Information {
        padding: 0 20px;
    }

    .query-input .text-wrapper-2 {
        font-size: 14px;
        line-height: 1.8;
    }

    .form-h2 {
        font-size: 1.1em;
        text-align: center;
        padding: 0 20px 30px;
    }

    .list-style {
        width: 100%;
    }

    .btn-confirm {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding-right: 0;
    }

    .confirm-label,
    .confirm-label-line {
        width: 100%;
    }

    .query-input .div-4 {
        font-size: .875em;
    }
}

@media (max-width: 432px) {
    .query-input .frame-query {
        width: 100%;
        padding: 0 1em;
    }
    .query-input form {
        width: 100%;
    }
    .query-input .div-5,
    .query-input .input-2 {
        flex-direction: column;
    }
    .query-input .div-5 {
        gap: 10px;
    }
    .query-input .privacy-box {
        padding: 20px 10px 20px 20px;
    }
}

/* ============================================================
   Contact Form 7 連携用の追加スタイル
   ============================================================ */

/* CF7既定のラジオボタン・チェックボックス出力をデザインに合わせる */
/* CF7は各選択肢を <label> なしの <span class="wpcf7-list-item"> で出力するため、
   このspan自体をflexにして縦積み（outer displayがblockになる）＋ラジオとテキストの横並びを両立させる */
.query-input .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
.query-input .wpcf7-list-item-label {
    width: fit-content;
    letter-spacing: 0.05em;
    line-height: 1.5;
    white-space: nowrap;
    position: relative;
}
.query-input .wpcf7-list-item input[type="radio"] {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid #333333;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
}
.query-input .wpcf7-list-item input[type="radio"]:checked {
    background: radial-gradient(circle, #333333 0 45%, transparent 46% 100%);
}
.query-input .wpcf7-list-item input[type="radio"]:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* CF7の実submitボタンは非表示（独自の確認/送信ボタンで操作） */
#js-cf7-fields input[type="submit"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* hidden属性の要素は必ず非表示にする（.btn-confirm 等の display:flex が
   ブラウザ標準の [hidden]{display:none} を上書きし、確認/完了ステップの
   要素が消えないまま表示されてしまう問題への対策） */
.query-input [hidden] {
    display: none !important;
}

/* お名前・フリガナ欄：CF7の自動整形で2つの入力欄が1つの<p>にまとまるため、
   .input-2 の flex gap が効かない。生成される要素同士に直接余白を付ける */
.query-input .input-2 .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
    /* margin-left: 57px; */
    margin-left: 12px;
}

/* CF7の未入力メッセージ（「入力してください。」）は<input>直後のインライン要素
   として出力され、姓/名・セイ/メイ・メールアドレスで欄が横に押し出されて
   レイアウトが崩れる。常にブロック要素にして各欄の直下へ表示する */
.query-input .wpcf7-not-valid-tip {
    display: block;
    width: 100%;
    margin-top: 4px;
    text-align: left;
    white-space: normal;
    line-height: 1.4;
}

/* 姓/名・セイ/メイは1つの<p>に2欄が横並び。各ラップを「欄→メッセージ」の
   縦積みにすることで、メッセージを下に置いても2カラムの横並びを保つ */
.query-input .input-2 .wpcf7-form-control-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    vertical-align: top;
}

@media (max-width: 768px) {
    .query-input .input-2 .wpcf7-form-control-wrap {
        display: block;
    }
    .query-input .input-2 .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
        margin-left: 0;
        margin-top: 14px;
    }
}

/* CF7のエラー・送信結果メッセージ */
.wpcf7-response-output {
    max-width: 556px;
    margin: 16px auto 0;
    padding: 10px 16px;
    font-size: 0.875em;
    border-radius: 4px;
}
.wpcf7-not-valid-tip {
    color: var(--color-asterisk);
    font-size: 0.65em;
    margin-top: 4px;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
    border: 1px solid var(--color-asterisk);
    color: var(--color-asterisk);
}
.wpcf7-form.sent .wpcf7-response-output {
    border: 1px solid var(--color-green-black);
    color: var(--color-green-black);
}

/* 確認画面（JS生成）の値テキストが折り返せるように */
#js-confirm-view .confirm-label,
#js-confirm-view p {
    word-break: break-word;
}

/* ============================================================
   フォーム標準機能：必須未入力ハイライト／エラー表示／
   郵便番号自動入力／送信ボタン活性化
   ============================================================ */

/* 未入力の必須項目を淡いピンクで強調。入力されると updateRequiredHighlights()
   がクラスを外すため自動で消える */
.query-input .wpcf7-form-control-wrap.field-required-empty .input-3,
.query-input .wpcf7-form-control-wrap.field-required-empty .input-4,
.query-input .wpcf7-form-control-wrap.field-required-empty .input-5 {
    background-color: #fdeaec;
}
.query-input fieldset.select .wpcf7-form-control-wrap.field-required-empty,
.query-input .privacy-agree-row .wpcf7-form-control-wrap.field-required-empty {
    background-color: #fdeaec;
    display: block;
    padding: 6px 8px;
    margin: -6px -8px;
}
.query-input fieldset.select .wpcf7-form-control-wrap.field-invalid,
.query-input .privacy-agree-row .wpcf7-form-control-wrap.field-invalid {
    background-color: #fdeaec;
    border: 2px solid var(--color-asterisk);
    display: block;
    padding: 4px 6px;
    margin: -6px -8px;
}

/* 形式不正・必須未入力エラー：色だけでなく赤枠＋アイコン＋文言を併用 */
.query-input .wpcf7-form-control-wrap.field-invalid .input-3,
.query-input .wpcf7-form-control-wrap.field-invalid .input-4,
.query-input .wpcf7-form-control-wrap.field-invalid .input-5 {
    border: 2px solid var(--color-asterisk);
    background-color: #fdeaec;
}
.field-error-message {
    color: var(--color-asterisk);
    font-size: 0.8em;
    margin: 4px 0 0;
    text-align: left;
    width: 100%;
}
.field-error-icon {
    margin-right: 2px;
}

/* 郵便番号入力欄＋自動入力ボタン */
.query-input .zip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 371px;
}
.query-input .zip-row .input-4 {
    max-width: none;
    flex: 1;
}
.query-input .btn-zip-lookup {
    flex: 0 0 auto;
    padding: 8px 14px;
    background-color: var(--color-light-brown);
    color: #ffffff;
    border: none;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
}
.query-input .btn-zip-lookup:hover {
    opacity: 0.85;
}

/* プライバシーポリシー同意チェックボックス */
.query-input .privacy-agree-row {
    display: flex;
    justify-content: center;
    padding: 10px 0 30px;
}
.query-input .privacy-agree-row .wpcf7-list-item {
    justify-content: center;
}
.query-input .privacy-agree-row input[type="checkbox"] {
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid #333333;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex: 0 0 auto;
    background-color: #ffffff;
    cursor: pointer;
}
.query-input .privacy-agree-row input[type="checkbox"]:checked {
    background-color: var(--color-green-black);
}
.query-input .privacy-agree-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.query-input .privacy-agree-row input[type="checkbox"]:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}
.query-input .privacy-agree-label {
    font-size: 0.875em;
    letter-spacing: 0.05em;
}

/* 送信（確認画面へ進む）ボタンの活性化制御：未入力時はグレーアウト */
.query-input .btn:disabled,
.query-input .btn.is-disabled {
    background-color: #b7b7b7;
    cursor: not-allowed;
    opacity: 0.7;
}

@media (max-width: 432px) {
    .query-input .zip-row {
        flex-direction: column;
        align-items: stretch;
    }
    .query-input .btn-zip-lookup {
        width: 100%;
    }
}