@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;
}

.contactForm_product {
    margin-top: var(--space-size-40);
}

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

/* ========================================
    問い合わせフォームリンク
========================================= */
.contactForm_btn {
    width: 100%;
    max-width: 400px;
    height: 64px;
    background-color: var(--color-brand-kayakublue);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-160);
    color: var(--color-neutral-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-size-8);
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.contactForm_btn:hover {
    background-color: var(--color-brand-kayakublue02);
    color: var(--color-neutral-white);
}

.el_heading3 + .contactForm_btn {
    margin-top: var(--space-size-24);
}