/* ============================
   Contact Section (共通)
============================ */
#contact {
    background-color: #BA2A20;
    margin: clamp(7.5rem, 6.842rem + 2.7vw, 10rem) 0 0 0;
}

.contact-link {
    display: block;
    text-decoration: none;
    padding: clamp(2.25rem, 1.549rem + 2.88vw, 5rem) 0;
}

.contact-arrow {
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    .contact-link:hover .contact-arrow {
        transform: translateX(10px);
    }
}

.contact-container {
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    padding: clamp(2.313rem, 0.783rem + 6.27vw, 8.313rem) 0;
    width: clamp(21.875rem, 2.12rem + 81.05vw, 99.375rem);
}

.contact-box {
    width: clamp(20.625rem, 6.765rem + 56.86vw, 75rem);
    margin: auto;
}

.contact-title-p {
    opacity: 0.7;
}

.contact-title-p::after {
    display: none;
}

.contact-btn {
    width: 58.5%;
}

.contact-btn-p {
    font-size: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
    letter-spacing: 0.05em;
    font-weight: 400;
}

.contact-arrow {
    position: relative;
    width: 18px;
    height: 36px;
    transition: transform 0.3s ease;
}

/* 2本の線で矢印を構成（デスクトップ版） */
.contact-arrow::before,
.contact-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #FFF;
    transform-origin: right center;
}

/* 上の線（右上へ） */
.contact-arrow::before {
    transform: rotate(45deg);
}

/* 下の線（右下へ） */
.contact-arrow::after {
    transform: rotate(-45deg);
}

@media screen and (max-width: 950px) {
    .contact-container {
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
        position: relative;
    }

    .contact-box {
        display: block;
    }

    .contact-btn {
        width: 100%;
        margin-top: 40px;
    }

    .contact-btn-p {
        width: calc(100% - 30px);
    }

    .contact-arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 14px;
        height: 14px;
        border-top: 1.5px solid #FFF;
        border-right: 1.5px solid #FFF;
    }

    .contact-arrow::before,
    .contact-arrow::after {
        display: none;
    }
}