.text-align-left {
    text-align: left;
    margin-right: auto; /* テキストブロックを中央揃えにするため */
    margin-left: auto; /* テキストブロックを中央揃えにするため */
}

.no-margin-p {
    margin: 0;
}

.text-center-custom {
    text-align: center;
}

.border {
    border: 1px solid black; /* 枠線の色を黒、幅を1pxに設定 */
}


.desktop-image {
    display: none;
}

.mobile-image {
    display: none;
}

.modal-bg {
    background-color: #F4F4F4;
}

@media (min-width: 768px) {
    .desktop-image {
        display: block;
    }

    .navbar-custom {
        width: 100%;
    }

    p {
        text-align: left;
        font: normal normal normal 14px/28px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .navbar-custom .navbar-nav {
        justify-content: center;
        width: 100%;
    }


    .img-nurture {
        width: 360px;
        height: 388px;
    }

    .img-mizunara {
        width: 100%;
        height: 220px;
    }

    .img-product-main {
        width: 560px;
        height: 560px;
        opacity: 1;
    }

    .img-float {
        width: 148px;
        height: 148px;
        float: right;
    }

    .img-float.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .fixed {
        position: fixed;
        bottom: 10px; /* 画面下からの距離を調整 */
        right: 10px; /* 画面右からの距離を調整 */
        z-index: 1000; /* 前面に表示 */
    }


    .img-thumbnail {
        padding: 0 !important;
        width: 80px;
        height: 80px;
        opacity: 1;
        border: none;
    }

    .trouble-title {
        text-align: left;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #545454;
        opacity: 1;
    }

    .nurture-title {
        text-align: center;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #545454;
        opacity: 1;
    }

    .product-item {
        text-align: left;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .price-text {
        display: flex;
    }

    .price-text1 {
        text-align: left;
        font: normal normal bold 18px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
    }

    .price-text2 {
        text-align: left;
        font: normal normal bold 30px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
    }

    .price-text3 {
        text-align: left;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
    }

    .price-text4 {
        text-align: left;
        font: normal normal bold 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #EB852D;
        opacity: 1;
    }

    .price-text5 {
        text-align: center;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #5A9070;
        opacity: 1;
    }

    .trouble {
        text-align: left;
        font: normal normal normal 12px/28px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .nurture-text {
        text-align: left;
        font: normal normal normal 12px/28px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .mizunara-title {
        text-align: center;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #5A9070;
        opacity: 1;
    }

    .btn {
        width: 260px;
        height: auto;
    }

    .overlay-image {
        position: absolute;
        bottom: 0; /* 下からの距離を0に設定 */
        left: 0; /* 左からの距離を0に設定 */
        width: 100%; /* 親要素の幅に合わせる */
        height: auto; /* 自動で高さを調整 */
        transform: translateY(50%); /* 下に50%移動 */
        z-index: 1; /* 画像を前面に表示 */
    }
    .point_present-circle {
        position: absolute;
        top: 40%;
        left: 100%;
        transform: translateY(-50%) translateX(-30px);
        max-height: 100px;
    }
}

@media (max-width: 767px) {
    .mobile-image {
        display: block;
        position: relative;
    }

    .navbar-custom {
        display: none; /* Hide navbar on mobile */
    }

    p {
        text-align: left;
        font: normal normal normal 18px/36px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .navbar-toggler {
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 48px;
        height: 48px;
        opacity: 1;
    }

    .navbar-toggler-icon {
        color: #5a9070;
    }

    .img-nurture {
        width: 100%;
        height: 280px;
    }

    .img-mizunara {
        width: 100%;
        height: auto;
    }

    .img-product-main {
        width: 100%;
        height: auto;
        opacity: 1;
    }


    .nurture-title {
        text-align: center;
        font: normal normal bold 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #545454;
        opacity: 1;
    }

    .nurture-text {
        text-align: left;
        font: normal normal normal 16px/28px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .mizunara-title {
        text-align: center;
        font: normal normal bold 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #5A9070;
        opacity: 1;
    }

    .product-shipping {
        width: 100%;
        height: 36px;
        background: #5A9070 0% 0% no-repeat padding-box;
        opacity: 1;
    }

    .product-text1 {
        text-align: left;
        font: normal normal normal 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .product-text2 {
        text-align: left;
        font: normal normal normal 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .product-item {
        text-align: left;
        font: normal normal bold 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .price-text {
        display: flex;
    }

    .price-text1 {
        text-align: left;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
    }

    .price-text2 {
        text-align: left;
        font: normal normal bold 24px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
    }

    .price-text3 {
        text-align: left;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
    }

    .price-text4 {
        text-align: left;
        font: normal normal bold 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #EB852D;
        opacity: 1;
    }

    .price-text5 {
        text-align: center;
        font: normal normal bold 16px/22px Noto Sans;
        letter-spacing: 0px;
        color: #5A9070;
        opacity: 1;
    }

    .trouble-img {
        width: 160px;
        height: 160px;
    }

    .trouble-title {
        text-align: left;
        font: normal normal bold 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #545454;
        opacity: 1;
    }

    .trouble-text {
        text-align: left;
        font: normal normal normal 16px/32px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .modal-text {
        text-align: center;
        font: normal normal normal 18px/24px Noto Sans;
        letter-spacing: 0px;
        color: #545454;
        opacity: 1;
    }

    .close-modal {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .trouble {
        text-align: left;
        font: normal normal normal 16px/28px Noto Sans;
        letter-spacing: 0px;
        color: #666666;
        opacity: 1;
    }

    .prodct-modorinae-buy {
        width: 312px;
        height: 55px;
    }

    .ponta-modorinae-buy {
        width: 313px;
        height: 74px;
    }

    .img-float {
        float: bottom;
        width: 100%;
        height: auto;
    }

    .img-float.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .fixed {
        width: 100%;
        position: fixed;
        bottom: 0px; /* 画面下からの距離を調整 */
        z-index: 1000; /* 前面に表示 */
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .btn {
        width: 312px;
        height: auto;
    }

    .overlay-image {
        position: absolute; /* 絶対位置に設定 */
        top: 0; /* 上からの距離を50%に設定 */
        left: 0; /* 左からの距離を0に設定 */
        width: 100%; /* 親要素の幅に合わせる */
        transform: translateY(-50%); /* 中心に揃えるため上に50%移動 */
        z-index: 1; /* 画像を前面に表示 */
    }

    .position-relative {
        position: relative; /* 親要素を相対位置に設定 */
    }

}

.img-fluid {
    max-width: 100%;
    height: auto;
}

body {
    scroll-behavior: smooth;
}


.bg-gray {
    background-color: #F4F4F4;
}

.primary {
    font: normal normal bold 22px/30px Noto Sans;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.bg-green {

    background: #5A9070 0% 0% no-repeat padding-box;
    opacity: 1;
    height: 36px;
}

.center {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
}

.text-white {
    text-align: center;
    color: #FFFFFF;
    font: normal normal bold 14px/19px Noto Sans;
    letter-spacing: 0px;
    opacity: 1;
}

.carousel-control-prev {
    text-align: start;
    font: normal normal normal 20px/27px Noto Sans;
    letter-spacing: 1.6px;
    color: #666666;
    opacity: 1;
    display: block;
    position: static;
}

.carousel-control-next {
    text-align: end;
    font: normal normal normal 20px/27px Noto Sans;
    letter-spacing: 1.6px;
    color: #666666;
    opacity: 1;
    display: block;
    position: static;
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
    color: #666666;
    text-decoration: none;
    outline: 0;
    opacity: .9;
    position: static;
}

.no-padding {
    padding: 0 !important;
}

.active-slide {
    border: 2px solid #F4BA89;
}