#carouselExampleCaptions {
    height:700px
    }
    
    #carouselExampleCaptions .carousel-inner,#carouselExampleCaptions .carousel-item {
    height:100%
    }
    
    #carouselExampleCaptions .carousel-item img {
    object-fit:cover;
    height:100%
    }
    
    .carousel-caption {
    top:40%;
    right:55%
    }
    
    .carousel-item h5 {
    width:1000px;
    font-size:55px;
    font-weight:bolder;
    text-align:left;
    font-family:'IBM Plex Sans JP'
    }
    
    .carousel-item p {
    width:1000px;
    text-align:left;
    font-size:20px;
    font:600;
    font-family:'IBM Plex Sans JP'
    }
    
    .carousel-item img {
    animation:zoomOut 10s linear infinite!important
    }
    
    @keyframes zoomOut {
    0% {
    transform:scale(1.2)
    }
    
    100% {
    transform:scale(1)
    }
    }
    
    .carousel-control-prev,.carousel-control-next {
    width:100px;
    height:100px;
    margin-block:auto;
    opacity:.5
    }
    
    .carousel-control-prev:hover,.carousel-control-next:hover {
    opacity:1
    }
    
    @media (max-width: 768px) {
    #carouselExampleCaptions {
    height:250px
    }
    
    #carouselExampleCaptions .carousel-caption {
    max-width:90%
    }
    
    .carousel-item h5 {
    font-size:18px;
    font-weight:bolder;
    text-align:center;
    font-family:'IBM Plex Sans JP'
    }
    
    .carousel-item p {
    font-size:15px;
    text-align:center;
    font:600;
    font-family:'IBM Plex Sans JP'
    }
    }
    
    .container-product {
    display:flex;
    gap:10px;
    max-width:1200px;
    margin:0 auto;
    margin-bottom:60px;
    position:relative
    }
    
    h1 {
    text-align:center;
    margin-bottom:20px
    }
    
    .category-section {
    display:flex;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    margin-bottom:20px;
    padding-bottom:10px
    }
    
    .category-btn {
    padding:10px 20px;
    background-color:#333;
    color:#fff;
    border:none;
    border-radius:5px;
    cursor:pointer;
    margin-right:10px;
    flex-shrink:0
    }
    
    .category-btn.active {
    background-color:#4CAF50
    }
    
    .left-panel {
    flex:1;
    margin-right:20px
    }
    
    .product-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
    }
    
    .card-text2 {
    margin-top:7px;
    margin-bottom:0
    }
    
    .product-card {
    height:fit-content;
    border:1px solid lightgray;
    border-radius:10px;
    padding:10px;
    text-align:center;
    position:relative
    }
    
    .product-image {
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:5px;
    background-color:#e0e0ff
    }
    
    .right-panel {
    width:300px;
    position:sticky;
    top:20px;
    align-self:flex-start
    }
    
    .cart {
    border:1px solid #f08080;
    background-color:#fff;
    border-radius:10px;
    padding:20px
    }
    
    .quantity-input {
    width:50px;
    padding:5px;
    border:1px solid #ddd;
    border-radius:3px
    }
    
    .quantity-input,input,textarea {
    margin-bottom:0;
    color:#000
    }
    
    .unit-select {
    width:60px;
    padding:5px;
    border:1px solid #ddd;
    border-radius:3px;
    color:#000
    }
    
    .add-btn {
    background-color:#333;
    color:#fff;
    border:none;
    border-radius:5px;
    padding:5px 10px;
    cursor:pointer;
    margin-left:5px
    }
    
    .cart-item {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px
    }
    
    .remove-btn {
    background-color:#f44;
    color:#fff;
    border:none;
    padding:2px 5px;
    border-radius:3px;
    cursor:pointer
    }
    
    .next-btn {
    background-color:#333;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:5px;
    cursor:pointer;
    width:100%;
    margin-top:20px
    }
    
    .form-container {
    border:1px solid #f08080;
    border-radius:10px;
    padding:20px;
    width:100%
    }
    
    .form-container h3 {
    margin-bottom:10px
    }
    
    .form-container input,.form-container textarea {
    width:100%;
    padding:8px;
    margin-bottom:10px;
    border:1px solid #ddd;
    border-radius:4px;
    color:#000
    }
    
    .form-container button {
    margin-top:10px;
    background-color:#4CAF50;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:5px;
    cursor:pointer;
    width:100%
    }
    
    .quantity-control {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px
    }
    
    .progress-bar {
    width:100%;
    height:20px;
    background-color:#e0e0e0;
    border-radius:10px;
    margin-bottom:20px;
    overflow:hidden
    }
    
    .progress {
    width:0;
    height:100%;
    background-color:#4CAF50;
    transition:width .5s ease-in-out
    }
    
    .step-indicator {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px
    }
    
    .step {
    font-weight:700;
    color:#ccc
    }
    
    .step.active {
    color:#4CAF50
    }
    
    .page-wrapper {
    max-width:1200px;
    margin:0 auto;
    padding:12px
    }
    
    .large-text {
    margin-top:30px;
    color:#be1800;
    font-size:45px;
    font-weight:700;
    margin-bottom:15px;
    text-align:left
    }
    
    .large-text1 {
    color:#005081;
    font-size:20px;
    margin-bottom:15px;
    text-align:left
    }
    
    .large-text2 {
    color:#005081;
    font-size:25px;
    margin-bottom:12px;
    text-align:left
    }
    
    .popup-content {
    background-color:#fff
    }
    
    .popup-content button {
    background-color:#4CAF50
    }
    
    @media (max-width: 1220px) {
    .right-panel {
    right:20px
    }
    }
    
    @media (max-width: 768px) {
    .container-product {
    flex-direction:column;
    gap:20px
    }
    
    .product-image {
    width:100%;
    height:150px
    }
    
    .cart,.form-container {
    width:100%;
    max-width:400px;
    margin:0 auto
    }
    
    .left-panel {
    margin-right:0
    }
    
    .right-panel {
    position:static;
    width:100%;
    height:auto;
    margin-top:20px
    }
    
    .form-container {
    max-width:none
    }
    
    .product-grid {
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:10px
    }
    
    .large-text {
    font-size:28px
    }
    
    .large-text1 {
    font-size:15px
    }
    
    .large-text2 {
    font-size:18px
    }
    
    .product-card {
    padding:8px
    }
    
    .unit-select {
    width:63px;
    padding:5px;
    border:1px solid #ddd;
    border-radius:3px;
    color:#000
    }
    }
    
    @media (max-width: 480px) {
    .product-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px
    }
    
    .product-card {
    padding:6px
    }
    }