@charset "UTF-8";

#contact {
    display: flex;
    padding: 8vw;
    justify-content: space-between;
    align-content: flex-start;
}
#contact-top h1 {
    position: absolute;
    padding-top: 50px;
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.912rem + 1.06vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--base);
    text-shadow: 1px 2px 0px #00000029;
    z-index: 1;
}
#contact-top img {
    position: relative;
    width: 100%;
    height: clamp(13.75rem, 11.5rem + 11.25vw, 25rem);
    object-fit: cover;
    z-index: -1;
}
.contact-to-qa h2 {
    font-family: var(--font-family-02);
    font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.5rem);
    font-weight: var(--font-weight-7);
    color: var(--reg-text);
    text-align: center;
    margin-top:  clamp(40px, 3.5vw, 65px);
    margin-bottom:  clamp(20px, 3.5vw, 40px);
}
.contact-to-qa-01 {
    font-family: var(--font-family-02);
    font-size: clamp(1.25rem, 1.012rem + 1.19vw, 2.438rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
}
.contact-to-qa-02 {
    font-family: var(--font-family-02);
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--reg-text);
}
.contact-to-qa p {
    margin-left: 1%;
    margin-right: 1%;
    font-family: var(--font-family-02);
    font-size: clamp(0.625rem, 0.525rem + 0.5vw, 1.125rem);
    font-weight: var(--font-weight-6);
    color: var(--reg-text);
    text-align: center;
}
.contact-to-qa .contact-to-qa-btn {
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    padding: clamp(0.625rem, 0.563rem + 0.31vw, 0.938rem) clamp(0.938rem, 0.813rem + 0.63vw, 1.563rem);
    background: var(--main-01);
    color: var(--white);
    border-radius: 5px;
    transition: var(--transition-300e);
}
.contact-to-qa .contact-to-qa-btn-a {
    text-align: center;
    margin: clamp(3.125rem, 2.813rem + 1.56vw, 4.688rem) 0 clamp(2.813rem, 2.125rem + 3.44vw, 6.25rem) 0;
}
.contact-to-qa .contact-to-qa-btn-a a:hover {
    color: var(--main-01);
    background: var(--yellow-01);
    transition: var(--transition-300e);
}
#contact-tel {
    height: clamp(19.375rem, 17rem + 11.88vw, 31.25rem);
    background-color: var(--main-01);
}
#contact-tel .contact-tel-01 {
    font-family: var(--font-family-02);
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--white);
    text-align: center;
    padding-top: 50px;
}
#contact-tel .contact-tel-02 {
    font-family: var(--font-family-02);
    font-size: clamp(0.625rem, 0.525rem + 0.5vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--white);
    text-align: center;
    padding-top: 25px;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem);
}
#contact-tel .contact-tel-box {
    height: 200px;
    background-color: var(--base);
    width: clamp(17.813rem, 7.625rem + 50.94vw, 68.75rem);
    height: clamp(6.875rem, 5.563rem + 6.56vw, 13.438rem);
    margin: 0 auto;
}
#contact-tel .contact-tel-box p {
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
    text-align: center;
}
#contact-tel .contact-tel-box .contact-tel-03 {
    font-family: var(--font-family-02);
    font-size: clamp(1.25rem, 1.025rem + 1.13vw, 2.375rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    padding-top: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem);
    text-align: center;
}
#contact-tel .contact-tel-box span {
    font-family: var(--font-family-poppins);
    font-size: clamp(1.063rem, 0.875rem + 0.94vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
}
#contact-tel .contact-tel-box img {
    width: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
    margin: -3px 5px;
} 
#contact-mail {
    height: clamp(17.188rem, 15rem + 10.94vw, 28.125rem);
    background-color: var(--base);
    overflow: hidden;
}
#contact-mail .contact-mail-01 {
    font-family: var(--font-family-02);
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    text-align: center;
    padding-top: 50px;
    margin-bottom: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem);
}
#contact-mail .contact-mail-box {
    height: clamp(7.813rem, 6.875rem + 4.69vw, 12.5rem);
    background-color: var(--white);
    width: clamp(18.125rem, 8rem + 50.63vw, 68.75rem);
    margin: 0 auto;
    padding-top: clamp(1.25rem, 0.875rem + 1.88vw, 3.125rem);
}
#contact-mail .contact-mail-box .contact-mail-02 {
    font-family: var(--font-family-02);
    font-size: clamp(1.063rem, 0.838rem + 1.13vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}
#contact-mail .contact-mail-box .contact-mail-02 a {
    display: contents;
}
#contact-mail .contact-mail-box img {
    color: var(--light-blue_01);
    width: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
    line-height: var(--line-height-22);
    margin-right: 10px;
}