@charset "utf-8";
/* ==============================================================
   LOWER COMMON
============================================================== */

/* ================ LOWER VISUAL ================ */

.lower-visual {
    position: relative;
}


/* ================ LOWER FV ================ */

.lower-fv {
    height: 390px;

    .lower-fv-inner {
        height: 100%;
        padding-top: 42px;
    }
}

/* ================ LOWER SECTION TITLE ================ */

.lower-section-title {
    align-items: center;

    .section-title-slash {
        min-height: 64px;
    }
}

/* ================ BREADCRUMB ================ */

.breadcrumb {
    font-size: 0.75rem;
    color: var(--gray);

    .breadcrumb-list {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .breadcrumb-item {
        display: flex;
        align-items: center;
        gap: 10px;

        &+.breadcrumb-item {
            &::before {
                content: "/";
                color: var(--lightgray);
            }
        }

        a {
            color: var(--green);
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: opacity 0.3s ease;

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    opacity: 0.6;
                }
            }
        }
    }
}


/* ================ LOWER FV TITLE ================ */

.lower-fv-title {
    margin-top: 64px;

    .lower-fv-title-en {
        color: var(--green);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.05em;
    }

    .lower-fv-title-ja {
        margin-top: 8px;

        font-size: clamp(28px, 3vw, 40px);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.08em;
    }
}


/* ==============================================================
   TABLET
============================================================== */

@media (max-width: 800px) {

    .lower-fv {
        height: 330px;

        .lower-fv-inner {
            padding-top: 32px;
        }
    }

    .lower-fv-title {
        margin-top: 50px;

        .lower-fv-title-ja {
            font-size: 2rem;
        }
    }

    .lower-section-title {
        .section-title-slash {
            min-height: 52px;
        }
    }

}


/* ==============================================================
   SP
============================================================== */

@media (max-width: 600px) {

    .lower-fv {
        height: 240px;

        .lower-fv-inner {
            padding-top: 24px;
        }
    }

    .breadcrumb {
        font-size: 0.6875rem;
    }

    .lower-fv-title {
        margin-top: 40px;

        .lower-fv-title-en {
            font-size: 0.875rem;
        }

        .lower-fv-title-ja {
            margin-top: 6px;
            font-size: 1.75rem;
        }
    }

    .lower-section-title {
        .section-title-slash {
            min-height: 44px;
        }
    }

}

@media (max-width: 480px) {
    .section-title {
        .section-title-ja {
            font-size: clamp(20px, 6vw, 24px);
        }
    }

}