@charset "UTF-8";

/*-------------mv------------*/
#mv_outer::before {
    background-image: url(/common/upload_data/vivi-cocom/image/20261027150747.png);
    right: 0%;
    top: -10%;
    width: 53%;
    aspect-ratio: 1280 / 853;
}
@media screen and (max-height: 800px) and (min-width: 901px) {
#mv_outer::before {
    top: -2%;
    width: 50%;
}
}
@media screen and (max-width: 768px) {
#mv_outer::before {
    right: -3%;
    top: -6%;
    width: 55%;
}
}
@media screen and (max-width: 700px) {
#mv_outer::before {
    right: -4%;
    top: -2%;
}
}
@media screen and (max-width: 500px) {
#mv_outer::before {
    right: -4%;
    top: -2%;
    width: 75%;
}
}

/*---------MV直下------------*/
a[id*="image"]+.composite_box01 .inner_item>a {
    transition: opacity 0.3s ease;
}
a[id*="image"]+.composite_box01 .inner_item>a:hover * {
    opacity: 1;
}
a[id*="image"]+.composite_box01 .inner_item>a:hover img {
    opacity: 0.6;
}

/*---------連携ホテル------------*/
a#hotels02+div .content_wrapper a {
    background: transparent;
    position: relative;
    z-index: 0;
    border: 3px solid var(--i_btn_color);
    min-width: auto !important;
    width: 260px !important;
    padding: 0 !important;
}

a#hotels02+div .content_wrapper a::before {
    background: url(/common/upload_data/vivi-cocom/image/20261022155434_2.jpg) no-repeat;
    aspect-ratio: auto;
    background-size: contain;
    width: 100%;
    height: 40px;
    transform: translateY(-50%);
    left: 10px;
    top: 50%;
    max-width: 200px;
    border-radius: 10px;
    position: absolute;
    z-index: 1;
}

a#hotels02+div .content_wrapper a::after {
    background: url(/common/upload_data/vivi-cocom/image/20261022160800.png) no-repeat;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    background-size: contain;
    width: 20px;
    position: absolute;
    z-index: 1;
}

a#hotels02+div .content_wrapper a:nth-of-type(2)::before {
    background-image: url(/common/upload_data/vivi-cocom/image/20261022155435.jpg);
}

a#hotels02+div .content_wrapper a:nth-of-type(3)::before {
    background-image: url(/common/upload_data/vivi-cocom/image/20261022155434.jpg);
}

a#hotels02+div .content_wrapper a:nth-of-type(4)::before {
    background-image: url(/common/upload_data/vivi-cocom/image/20261022155434_1.jpg);
    left: 15px;
}

a#hotels02+div .content_wrapper a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 1150px) and (min-width: 601px) {
a#hotels02+div .content_wrapper {
    display: grid;
    grid-template-columns: repeat(2, 260px);
    justify-content: center;
    gap: 0px 10px;
}
}
@media screen and (max-width: 600px) {
    a#hotels02+div .content_wrapper {
        grid-template-columns: 1fr;
    gap: 0px;
    }
}