.pj_header {
    width: 100%;
    background-color: #595757;
    padding: 15px 5px;
}

.pj-logo {
    width: 130px;
}

.image-option {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    background-color: #fff;
    height: 100%;
    min-height: 250px;
    /* 高さを自動調整 */
    flex-direction: column;
    /* 縦方向に要素を並べる */
    justify-content: space-between;
    /* 要素間のスペースを均等に配置 */
    position: relative;
}

.image-option img {
    width: 300px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.image-option .badge {
    padding: 0.4em 0.7em;
    font-size: 0.75rem;
}

.image-option.selected {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

.image-option-confirm {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    background-color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-item {
    transition: transform 0.2s ease-in-out;
    /* デフォルトは0.6s。0.2sに短縮 */
}

.carousel-item>div {
    display: flex;
    justify-content: center;
}

.image-option.selected {
    outline: 2px solid #007bff;
}

.checkbox-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
    bottom: 0;
}

.carousel-control-prev,
.carousel-control-next {
    width: 2rem;
}

.area-recommendation {
    background-color: rgb(247, 246, 246);
    border: 1px solid #ddd;
}

.badge-recommendation {
    background-color: rgb(225, 224, 224);
    color: #000000;
    height: 100%;
    white-space: normal;
    word-break: break-all;
}

.badge-area-recommendation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    min-height: 2rem;
}

.link-recommendation {
    text-decoration: none;
    color: rgb(30, 30, 30);
    font-weight: bold;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    filter: grayscale(1) brightness(0.5);
}

@media (min-width: 768px) {
    #carouselWrapper {
        display: none;
    }
}

@media (max-width: 767px) {
    .image-option {
        max-width: 90vw;
        width: 260px;
        padding: 0.5rem;
        margin: 0 auto;
    }

    .image-option img {
        width: 100%;
        height: 120px;
    }

    .badge-area-recommendation {
        min-height: 2.5rem;
        font-size: 0.9em;
    }
}