@charset "UTF-8";

/* ----------------------------------------------------------------
    お問い合わせページ用CSS
---------------------------------------------------------------- */

/* ========================================
    お問い合わせセクション
========================================= */
.contactSection {
    padding: var(--space-size-32) 0 var(--space-size-56);
}

@media print, screen and (min-width: 768px) {
    .contactSection {
        padding: var(--space-size-64) 0 var(--space-size-104);
    }
}

/* ========================================
    導入文
========================================= */
.contactIntro {
    line-height: var(--line-height-160);
}

/* ========================================
    お電話セクション
========================================= */
.contactPhone {
    margin-top: var(--space-size-56);
}

@media print, screen and (min-width: 768px) {
    .contactPhone {
        margin-top: var(--space-size-80);
    }
}

.contactPhone_company {
    line-height: var(--line-height-160);
    margin: var(--space-size-24) 0 0;
}

.contactPhone_number {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    margin: var(--space-size-8) 0 0;
}
@media print, screen and (min-width: 768px) {
    .contactPhone_number {
        font-size: var(--font-size-24);
    }
}

/* ========================================
    フォーム
========================================= */
.contactForm {
    margin-top: var(--space-size-56);
}
@media print, screen and (min-width: 768px) {
    .contactForm {
        margin-top: var(--space-size-104);
    }
}

.contactForm_intro {
    line-height: var(--line-height-160);
    margin: var(--space-size-24) 0 0;
}

/* ========================================
    フォーム全体
========================================= */
.inquiryForm {
    margin-top: var(--space-size-56);
}
@media print, screen and (min-width: 768px) {
    .inquiryForm {
        margin-top: var(--space-size-48);
    }
}
.inquiryForm_container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
@media print, screen and (min-width: 768px) {
    .inquiryForm_container {
        gap: 40px;
    }
}

/* ========================================
    フォーム行
========================================= */
.inquiryForm_row {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-16);
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 28px;
        align-items: flex-start;
    }
}

/* ========================================
    フォームラベル
========================================= */
.inquiryForm_label {
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_label {
        width: 300px;
        line-height: var(--line-height-180);
        flex-shrink: 0;
        margin-top: 20px;
    }
    .inquiryForm_row__alignStart .inquiryForm_label {
        margin-top: 0;
    }
}

.inquiryForm_label_required {
    font-size: var(--font-size-16);
    display: flex;
    align-items: center;
    gap: var(--space-size-8);
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_label_required {
        font-size: var(--font-size-20);
        gap: var(--space-size-16);
    }
}

.inquiryForm_label_text {
    flex-shrink: 0;
    font-size: var(--font-size-16);
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_label_text {
        font-size: var(--font-size-20);
    }
}

/* ========================================
    必須バッジ
========================================= */
.inquiryForm_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 30px;
    background-color: var(--color-brand-kayakublue);
    color: var(--color-neutral-white);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-160);
    border-radius: 15px;
    text-align: center;
    flex-shrink: 0;
}

/* ========================================
    フォーム入力エリア
========================================= */
.inquiryForm_input {
    width: 100%;
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_input {
        flex: 1;
        max-width: 672px;
    }
}

/* ========================================
    ラジオボタングループ
========================================= */
.inquiryForm_radioGroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-24);
}

/* ========================================
    ラジオボタンラベル
========================================= */
.inquiryForm_radioGroup > span {
    display: flex;
    align-items: center;
    /* gap: 20px; */
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    cursor: pointer;
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_radioGroup > span {
        font-size: var(--font-size-20);
        line-height: var(--line-height-180);
    }
}

.inquiryForm_radioGroup > span > label {
    padding-left: 20px;
    cursor: pointer;
}

.inquiryForm_radioGroup > span > input[type="radio"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-brand-kayakugray);
    border-radius: 16px;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    background-color: var(--color-neutral-white);
    padding: 6px;
    position: relative;
}

.inquiryForm_radioGroup > span > input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-brand-kayakublue);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ========================================
    入力フィールド
========================================= */
.inquiryForm_field {
    width: 100%;
    height: 48px;
    background-color: var(--color-brand-contactgray);
    border: none;
    padding: 10px 20px;
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-160);
    font-family: var(--font-family-sans);
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_field {
        width: 672px;
        height: 80px;
    }
}

/* ========================================
    テキストエリア
========================================= */
.inquiryForm_textarea {
    width: 100%;
    height: 200px;
    background-color: var(--color-brand-contactgray);
    border: none;
    padding: 10px 20px;
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-160);
    font-family: var(--font-family-sans);
    resize: vertical;
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_textarea {
        width: 672px;
    }
}

/* ========================================
    注意書き
========================================= */
.inquiryForm_note {
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-160);
    margin-top: var(--space-size-8);
}
.inquiryForm_input + .inquiryForm_note {
    margin-top: 0;
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_input + .inquiryForm_note {
        margin-top: var(--space-size-16);
    }
}

/* ========================================
    製品詳細情報セクション
========================================= */
.productDetail {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-8);
}

.productDetail_title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
}

@media print, screen and (min-width: 768px) {
    .productDetail_title {
        font-size: var(--font-size-24);
    }
}
.productDetail_note {
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-160);
}

/* ========================================
    区切り線
========================================= */
.divider {
    height: 1px;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='1' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='100%25' y2='0' stroke='%23C0C0C0' stroke-width='1' stroke-dasharray='4,4'/%3E%3C/svg%3E");
}

/* ========================================
    個人情報取扱い同意
========================================= */
.inquiryForm_agreementContainer {
    padding-top: var(--space-size-32);
    border-top: solid 2px var(--color-brand-kayakugray);
    margin-top: var(--space-size-32);
}
@media print, screen and (min-width: 768px) {
    .inquiryForm_agreementContainer {
        padding-top: var(--space-size-48);
        margin-top: var(--space-size-64);
    }
}

.inquiryForm_agreement {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-32);
}
@media print, screen and (min-width: 768px) {
    .inquiryForm_agreement {
       text-align: center;
    }
}

.inquiryForm_agreement_text {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-180);
    text-align: left;
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_agreement_text {
        font-size: var(--font-size-20);
        text-align: center;
    }
}

.inquiryForm_agreement_check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-size-16);
}

/* ========================================
    チェックボックスラベル
========================================= */
.inquiryForm_checkLabel {
    display: flex;
    align-items: center;
    /* gap: var(--space-size-16); */
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    cursor: pointer;
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_checkLabel {
        font-size: var(--font-size-20);
    }
}

.inquiryForm_checkLabel > label {
    padding-left: var(--space-size-16);
    cursor: pointer;
    flex-shrink: 0;
}

.inquiryForm_checkbox {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-brand-kayakugray);
    border-radius: 0;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    background-color: var(--color-neutral-white);
    position: relative;
}

.inquiryForm_checkbox:checked {
    background-color: var(--color-brand-kayakublue);
    border-color: var(--color-brand-kayakublue);
}

.inquiryForm_checkbox:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 14px;
    border: solid var(--color-neutral-white);
    border-width: 0 2px 2px 0;
}

/* ========================================
    確認するボタン
========================================= */
.inquiryForm_submit {
    display: flex;
    justify-content: center;
    margin-top: var(--space-size-32);
}
@media print, screen and (min-width: 768px) {
    .inquiryForm_submit {
        margin-top: var(--space-size-64);
    }
}

/* ========================================
    注意書き
========================================= */
.inquiryForm_notice {
    margin-top: var(--space-size-32);
    font-size: var(--font-size-14);
    line-height: var(--line-height-180);
}

@media print, screen and (min-width: 768px) {
    .inquiryForm_notice {
        font-size: var(--font-size-16);
    }
}

/* ========================================
    エラーメッセージ
========================================= */
.errorMessage {
    margin-top: var(--space-size-32);
}

.errorMessage_text {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    color: #ff0000;
}

@media print, screen and (min-width: 768px) {
    .errorMessage_text {
        font-size: var(--font-size-20);
    }
}

/* ========================================
    エラーメッセージ（フォーム）
========================================= */
.inquiryForm_error {
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    color: #ff0000;
    margin-top: var(--space-size-8);
}


/* ========================================
    確認ページ
========================================= */

/* イントロテキスト */
.confirmIntro {
    line-height: var(--line-height-160);
}

/* 確認内容 */
.confirmContent {
    margin-top: var(--space-size-56);
}
@media print, screen and (min-width: 768px) {
    .confirmContent {
        margin-top: var(--space-size-80);
    }
}

.confirmContent .divider {
    margin-top: var(--space-size-32);
}
@media print, screen and (min-width: 768px) {
    .confirmContent .divider {
        margin-top: var(--space-size-40);
    }
}

.confirmContent_row {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: var(--space-size-32);
}
@media print, screen and (min-width: 768px) {
    .confirmContent_row {
        flex-direction: row;
        gap: 44px;
        padding: 22px 0;
        margin-top: var(--space-size-40);
    }
}

.confirmContent_label {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
}
@media print, screen and (min-width: 768px) {
    .confirmContent_label {
        font-size: var(--font-size-20);
        width: 300px;
        flex-shrink: 0;
    }
}

.confirmContent_value {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    word-break: break-all;
    padding: 8px;
}
.confirmContent_value__long {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
}
@media print, screen and (min-width: 768px) {
    .confirmContent_value {
        font-size: var(--font-size-20);
        flex: 1;
        padding: 0;
    }
    .confirmContent_value__long {
        font-size: var(--font-size-16);
    }
}

.confirmContent_section {
    margin-top: var(--space-size-24);
}
@media print, screen and (min-width: 768px) {
    .confirmContent_section {
        margin-top: var(--space-size-32);
    }
}

.confirmContent_sectionTitle {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-180);
}
@media print, screen and (min-width: 768px) {
    .confirmContent_sectionTitle {
        font-size: var(--font-size-24);
    }
}

/* 注意書き */
.confirmNotice {
    padding-top: var(--space-size-32);
    margin-top: var(--space-size-32);
    line-height: var(--line-height-180);
    border-top: solid 2px var(--color-brand-kayakugray);
}
@media print, screen and (min-width: 768px) {
    .confirmNotice {
        padding-top: var(--space-size-40);
        margin-top: var(--space-size-64);
    }
}

/* ボタンエリア */
.confirmButtons {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-32);
    justify-content: center;
    align-items: center;
    margin-top: var(--space-size-32);
}
@media print, screen and (min-width: 768px) {
    .confirmButtons {
        flex-direction: row;
        margin-top: var(--space-size-64);
    }
}

/* ========================================
    完了ページ
========================================= */
.thanksContent .divider {
    margin-top: var(--space-size-24);
}
@media print, screen and (min-width: 768px) {
    .thanksContent .divider {
        margin-top: var(--space-size-32);
    }
}

.thanksContent_title {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublue);
    text-align: center;
}
@media print, screen and (min-width: 768px) {
    .thanksContent_title {
        font-size: var(--font-size-32);
    }
}

.thanksContent_message {
    margin-top: var(--space-size-32);
    line-height: var(--line-height-160);
}
@media print, screen and (min-width: 768px) {
    .thanksContent_message {
        text-align: center;
    }
}

.thanksContent_notice {
    margin-top: var(--space-size-24);
    line-height: var(--line-height-180);
}
@media print, screen and (min-width: 768px) {
    .thanksContent_notice {
        margin-top: var(--space-size-32);
        text-align: center;
    }
}

.thanksContent_button {
    margin-top: var(--space-size-32);
    display: flex;
    justify-content: center;
}
@media print, screen and (min-width: 768px) {
    .thanksContent_button {
        margin-top: var(--space-size-48);
    }
}