@charset "utf-8";

:root {
    --font-color: #655f52;
    --main-color: #778ba5;
}

.sp-br {
    display: none;
}

.shopsCountainer {
    margin: 0 15%;
}

.shopsCountainer h2 {
    margin: 5vh 0 50px 0;
}

.mainVisual {
    height: 86vh;
    background: url(../img/ttl_shops.jpg) center center / cover no-repeat;
    background-attachment: fixed;
}

.contents {
    width: 80%;
    margin: 0 auto;
}

.columns2 {
    display: flex;
    margin: 30px 14%;
    font-size: 14px;
    justify-content: space-between;
}

.columns-title {
    margin: 0 13%;
    font-size: 16px;
}

.columns-left {
    width: 40%;
}

.opacity0 {
    opacity: 0;
}


.columns-right {
    width: 60%;
}

.columns-right p:nth-child(2) {
    font-size: 12px;
}

#shops a {
    text-decoration: underline;
    color: #778ba5;
}

.shopsFooter {
    text-align: center;
    color: var(--font-color);
    border-top: 1px solid var(--font-color);
    margin: 0 15%;
    line-height: 4;
}

@media only screen and (max-width: 600px) {
    .mainVisual {
        height: 76vh;
        background: url(../img/ttl_shops-sp2.jpg) center top / cover no-repeat;
        background-attachment: fixed;
        background-size: 100%;
    }
}

@media only screen and (max-width: 414px) {
    .mainVisual {
        height: 74vh;
        background: url(../img/ttl_shops-sp2.jpg) center top / cover no-repeat;
        background-attachment: fixed;
        background-size: 105%;
    }

    .shopsCountainer {
        margin: 0 5%;
    }

    .contents {
        width: 100%;
        margin: 40px auto;
    }

    .columns-left {
        width: 30%;
    }

    .columns-right {
        width: 70%;
    }

    .columns-title {
        margin: 0 13%;
        font-size: 14px;
    }

    .shopsCountainer h2 {
        margin: 20px 0 30px 0;
    }

    .sp-br {
        display: block;
    }

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

    .shopsFooter {
        text-align: center;
        color: var(--font-color);
        border-top: 1px solid var(--font-color);
        margin: 0 6%;
        line-height: 4;
        font-size: 9px;
    }
}

@media only screen and (max-width: 375px) {
    .mainVisual {
        height: 56vh;
        background: url(../img/ttl_shops-sp2.jpg) center top / cover no-repeat;
        background-attachment: fixed;
        background-size: 100%;
    }
}





@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    /* iPadの縦横両方の記述 */
    /* .mainVisual {
        height: 68vh;
        background: url(../img/img_ttl_shops_sp.jpg) no-repeat;
        background-attachment: fixed;
        background-position: 50% -70%;
        background-size: 100%;
    } */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

    /* iPadが横向きのみの記述 */
    /* .mainVisual {
        height: 90vh;
        background: url("../img/img_ttl_shops2.jpg")cover no-repeat;
        background-attachment: fixed;
        background-position: 50% 0%;
        background-size: contain;
    } */
}


@media only screen and (min-width: 1400px) {
    .mainVisual {
        height: 86vh;
        background: url(../img/ttl_shops.jpg) center center / cover no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        max-width: 100vw;
    }
}