/* ===============================================
   Common Components for Subpages
   =============================================== */

/* -----------------------------------------------
   Page Title Component
   ----------------------------------------------- */
.page_title {
    width: 100%;
    height: calc(100vw * 487 / 1400);
    position: relative;
    background-image: url('../img/under_common/common_title_img_back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_title_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vw * 5 / 1400);
    z-index: 2;
}

.page_title_en {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: calc(100vw * 88 / 1400);
    color: #bf9443;
    letter-spacing: 0.02em;
    line-height: normal;
    text-align: center;
    margin: 0;
}

.page_title_ja {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: calc(100vw * 18 / 1400);
    color: #bf9443;
    letter-spacing: 0.02em;
    line-height: normal;
    text-align: center;
    margin: 0;
}

.page_title_wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vw * 46 / 1400);
    z-index: 1;
    transform: scaleY(-1);
}

.page_title_wave img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------
   Contact Navigation Component
   ----------------------------------------------- */
.contact_navigation {
    width: 100%;
    height: calc(100vw * 420 / 1400);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.contact_navigation_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    z-index: 1;
}

.contact_navigation_content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vw * 64 / 1400);
    width: calc(100vw * 770 / 1400);
}

.contact_navigation_title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: calc(100vw * 80 / 1400);
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: normal;
    text-align: center;
    margin: 0;
}

.contact_navigation_buttons {
    display: flex;
    gap: calc(100vw * 160 / 1400);
    align-items: center;
    width: 100%;
}

.contact_btn {
    width: calc(100vw * 305 / 1400);
    height: calc(100vw * 66 / 1400);
    border-radius: calc(100vw * 6 / 1400);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * 16 / 1400);
    text-decoration: none;
    position: relative;
    transition: opacity 0.3s ease;
    border: 1px solid;
}

.contact_btn:hover {
    opacity: 0.8;
}

.contact_btn_line {
    background: linear-gradient(to bottom, #98cd98, #5b885b);
    border-color: #4c7a4c;
}

.contact_btn_mail {
    background: linear-gradient(to bottom, #eec882, #bf9443);
    border-color: #b18635;
}

.contact_btn_icon {
    width: calc(100vw * 24 / 1400);
    height: calc(100vw * 24 / 1400);
}

.contact_btn_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: calc(100vw * 16 / 1400);
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 2;
}

.contact_btn_arrow {
    position: absolute;
    right: calc(100vw * 16 / 1400);
    width: calc(100vw * 33 / 1400);
    height: calc(100vw * 22.5 / 1400);
}

/* -----------------------------------------------
   Responsive - SP
   ----------------------------------------------- */
@media (max-width: 768px) {
    .page_title {
        height: calc(100vw * 320 / 375);
    }

    .page_title_content {
        gap: calc(100vw * 8 / 375);
    }

    .page_title_en {
        font-size: calc(100vw * 56 / 375);
    }

    .page_title_ja {
        font-size: calc(100vw * 14 / 375);
    }

    .page_title_wave {
        height: calc(100vw * 30 / 375);
    }

    .contact_navigation {
        height: calc(100vw * 360 / 375);
    }

    .contact_navigation_content {
        gap: calc(100vw * 48 / 375);
        width: calc(100vw * 295 / 375);
    }

    .contact_navigation_title {
        font-size: calc(100vw * 48 / 375);
    }

    .contact_navigation_buttons {
        flex-direction: column;
        gap: calc(100vw * 24 / 375);
    }

    .contact_btn {
        width: 100%;
        height: calc(100vw * 56 / 375);
        border-radius: calc(100vw * 6 / 375);
        gap: calc(100vw * 12 / 375);
    }

    .contact_btn_icon {
        width: calc(100vw * 20 / 375);
        height: calc(100vw * 20 / 375);
    }

    .contact_btn_text {
        font-size: calc(100vw * 14 / 375);
    }

    .contact_btn_arrow {
        right: calc(100vw * 16 / 375);
        width: calc(100vw * 24 / 375);
        height: calc(100vw * 16 / 375);
    }
}