@charset "utf-8";


/* ==================================================================
    shop_ginza.css

=================================================================== */

/* ==================================================================
   ■ 共通指定
=================================================================== */
.contents .text._s {
    margin-bottom: 0;
}
.contents .text._l {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.contents .asterisk {
    margin-top: 5px;
}

/* --------------------------------
   □  accent
-------------------------------- */
#shop_ginza .accent {
    height: 390px;
    background-color: #C9BAA5;
    background-image: url(../../images/shop_ginza/accent_pc.jpg);
}
    #shop_ginza .accent .heading {
        text-transform: capitalize;
        margin-bottom: 20px;
    }

/* ◆ slider
-------------------------------- */
.accentBox .slider {
    position: static;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.accentBox .slick-dotted.slick-slider {
    margin-bottom: 0;
}
.accentBox .slick-slider,
.accentBox .slick-slider .slick-track,
.accentBox .slick-slider .slick-list {
    height: 100%;
}
.accentBox .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.accentBox .slick-num {
    color: #36353D;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    position: absolute;
    right: 86px;
    bottom: 4%;
    text-align: center;
}
.accentBox .slick-prev,
.accentBox .slick-next {
    color: #36353D;
    font-size: 0;
    top: auto;
    bottom: 4%;
    left: auto;
    right: 156px;
    z-index: 1;
    width: auto;
    height: auto;
    padding: 6px 0;
    transition:.4s;
    transform: none;
  }
    .accentBox .slick-next {
        right: 0;
    }
    .accentBox .slick-prev:before {
        content: none;
    }
    .accentBox .slick-prev:after,
    .accentBox .slick-next:before {
        content:'PREV';
        color: #36353D;
        font-size: 1.4rem;
        font-family: 'EB Garamond', serif;
        font-weight: 500;
        letter-spacing: 0.08em;
        opacity: 1;
        padding: 0 10px;
        line-height: 1;
    }
    .accentBox .slick-next:before {
        content:'NEXT';
    }
    .accentBox .slick-prev:hover,
    .accentBox .slick-next:hover {
        opacity: 0.7;
    }

/* --------------------------------
   □  about
-------------------------------- */
#about .lv3.title {
    margin-bottom: 0;
}

/* --------------------------------
   □  bridalFair
-------------------------------- */
#bridalFair {
    padding-top: 0;
}
#bridalFair .inner {
    position: relative;
}
#bridalFair .txtArea {
    position: absolute;
    top: 50%;
    left: 9%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
#bridalFair .txtArea .lv3.title {
    color: #808080;
    margin-bottom: 0;
}
    #bridalFair .txtArea .lv3.title span {
        font-style: normal;
    }

/* --------------------------------
   □  reservation
-------------------------------- */
#reservation {
    padding-top: 0;
}

/* --------------------------------
   □  categoryList
-------------------------------- */
#categoryList {
    padding-top: 0;
}

/* --------------------------------
   □  flow
-------------------------------- */
#flow {
    padding-top: 0;
    padding-bottom: 60px;
}
#flow .list.col4 li {
    width: 22%;
    margin-bottom: 40px;
}
#flow .list li dd.ttl {
    font-size: 1.4rem;
    padding-left: 0;
    margin-bottom: 0;
    padding-top: 40px;
}
#flow .list li:not(:last-child) dt:before {
    right: -14%;
}
#flow .list li:nth-child(4n) dt:before {
    content: none;
}

/* --------------------------------
   □  reserve_info
-------------------------------- */
#reserve_info {
    padding-top: 0;
}
#reserve_info .txtArea .boxArea {
    margin-top: 0;
}
#reserve_info .txtArea .text._l {
    margin-top: 40px;
    margin-bottom: 10px;
}
#reserve_info .txtArea .buttonStyle {
    margin-top: 20px;
}
    #reserve_info .txtArea .buttonStyle a {
        color: #111;
    }

#reserve_info .flexbox.sp_column > .map {
    width: 50%;
}

/* --------------------------------
   □  reservation_speciality
-------------------------------- */
#reservation_speciality {
    padding-top: 0;
}
#reservation_speciality .lv3.title._l {
    margin-bottom: 10px;
}


@media (max-width: 1600px) and (min-width: 768px) {
}


@media (max-width: 1400px) and (min-width: 768px) {
}


@media (max-width: 1300px) and (min-width: 768px) {
    /* --------------------------------
       □  accent
    -------------------------------- */
    /* ◆ slider
    -------------------------------- */
    .accentBox .slick-num {
        right: calc( 86px + 4% );
    }
    .accentBox .slick-prev {
        right: calc( 156px + 4% );
    }
    .accentBox .slick-next {
        right: 4%;
    }
}


@media (max-width: 1200px) and (min-width: 768px) {
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {

}


@media only screen and (max-width : 767px) {
    /* ==================================================================
       ■ 共通指定
    =================================================================== */
    .contents .lv3.title._l {
        margin-bottom: 30px;
    }
    .contents .text,
    .contents .text._s {
        margin-bottom: 0;
    }
    .contents .text._l {
        font-size: 1.8rem;
    }

    /* --------------------------------
       □  accent
    -------------------------------- */
    #shop_ginza .accent {
        height: 93vw;
        background-image: url(../../images/shop_ginza/accent_sp.jpg);
        background-position: center;
        margin-bottom: 150px;
    }
        #shop_ginza .accent .txtArea {
            background: #C9BAA5;
            min-height: 150px;
            padding: 30px 4%;
            position: static;
            transform: none;
            -webkit-transform: none;
            margin: auto;
        }

    /* ◆ slider
    -------------------------------- */
    .accentBox .slick-prev {
        right: auto;
        left: 4%;
        bottom: 4%;
    }
    .accentBox .slick-next {
        right: 4%;
        left: auto;
        bottom: 4%;
    }
    .accentBox .slick-num {
        bottom: 4%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }

    .accentBox .slider,
    .accentBox .slider .slick-img,
    .accentBox .slider .slick-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .accentBox .slider {
        margin: 0;
        overflow: hidden;
    }
    .accentBox .slick-prev,
    .accentBox .slick-next,
    .accentBox .slick-num {
        display: none;
    }

    /* --------------------------------
       □  bridalFair
    -------------------------------- */
    #bridalFair .txtArea {
        background-color: #EFEFEF;
        position: static;
        transform: none;
        -webkit-transform: none;
        padding: 30px 4%;
    }

    /* --------------------------------
       □  flow
    -------------------------------- */
    #flow .list.col4 li {
        width: 48%;
        margin-bottom: 30px;
    }
        #flow .list.col4 li:nth-last-of-type(-n+2) {
            margin-bottom: 0;
        }
    #flow .list.col4 li dd.ttl {
        font-size: 1.4rem;
    }

    /* --------------------------------
       □  reserve_info
    -------------------------------- */
    #reserve_info .txtArea .text._l {
        margin-top: 30px;
    }
    #reserve_info .map {
        margin-top: 30px;
    }
        #reserve_info .map iframe {
            height: 100vw;
        }

}