@charset "utf-8";
:root {
    --black: #333;
    --white: #fff;
    --green: #30574E;
}
/* ------------------------------
ヘッダータイトル
------------------------------ */
.title {
    margin-top: 100px;
}
/* ------------------------------
プロダクト
------------------------------ */
.product-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-bottom: 100px;
}
.product-container ul {
    padding: 0 8%;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}
.product-container ul li {
    width: 100%;
    display: flex;
    gap: 8%;
    position: relative;
}
.product-left {
    width: 50%;
    height: calc(100vh - 8%);
    position: sticky;
    top: 8vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}
.product-title {
    width: 100%;
    padding: 8% 0;
}
.product-title h3 {
    margin-bottom: 30px;
}
.product-title .sentense {
    margin-top: 15px;
}
.lilac .product-left::after,
.osmanthus .product-left::after,
.daphne .product-left::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -110%;
    width: 300px;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
    z-index: 0;
}
.lilac .product-left::after {
    background-image: url(../assets/img/Lilac.png);
}
.osmanthus .product-left::after {
    background-image: url(../assets/img/Osmanthus.png);
}
.daphne .product-left::after {
    background-image: url(../assets/img/Daphne.png);
}
.product-img {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}
.product-img img {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
}
.product-left .button {
    display: block;
}
.product-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 60px;
    justify-content: center;
    align-items: center;
    padding: 300px 0;
    box-sizing: border-box;
    z-index: 1
}
.product-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-text {
    width: 100%;
}
.product-text p:not(:last-child) {
    margin: 0 auto 32px;
}
.product-scene {
    width: 100%;
    height: 240px;
    margin: 0 0 0 auto;
}
@media (max-width: 767px) {
    .product-container ul {
        padding: 0 8%;
        gap: 40px;
        overflow: hidden;
    }
    .product-container ul li {
        flex-direction: column;
    }
    .product-left {
        width: 100%;
        height: auto;
        position: static;
    }
    .lilac .product-left::after,
    .osmanthus .product-left::after,
    .daphne .product-left::after {
        width: 60%;
        min-width: 180px;
        max-width: 300px;
        right: -20%;
    }
    .product-title .none {
        display: block;
    }
    .product-right {
        width: 100%;
        gap: 40px;
        padding: 80px 0 0;
    }
    .product-scene {
        width: 100vw;
        height: 40vw;
        max-height: 200px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}