@charset "utf-8";


/* ==================================================================
    shop.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;
}

.contents .buttonStyle.light-blue {
    max-width: 348px;
	max-width: 368px;
    margin: 40px auto 0;
}
    .contents .buttonStyle.light-blue a {
        width: 100%;
        font-size: 1.6rem;
        padding: 17px 32px;
        text-align: center;
    }
    .contents .buttonStyle.light-blue a:hover {
        opacity: 1;
    }


/* ==================================================================
   ■ index ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#shop .accent {
    height: 200px;
    background-image: none;
    margin-bottom: 20px;
}
#shop .accent .heading {
    text-transform: capitalize;
    margin-bottom: 0;
}

/* --------------------------------
   □ 大枠
-------------------------------- */
/* ◇ wrapper
-------------------------------- */
.wrapper {
    align-items: inherit;
    max-width: 1244px;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
}

/* ◇ tabArea
-------------------------------- */
.tab-list {
    border-bottom: 1px solid #B1B1B1;
    margin-bottom: 30px;
}
.tab-item {
    width: calc( 100% / 6);
    color: #B1B1B1;
    font-size: 2.0rem;
    line-height: 1.2;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    transition: .4s ease-in-out;
}
.tab-item:hover,
.tab-item.is-active {
    color: #002C6E;
    position: relative;
}
    .tab-item:hover:after,
    .tab-item.is-active:after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #002C6E;
        animation: panel-show .9s ease-in-out forwards;
    }
.tab-content {
    display: none;
    width: 100%;
}
    .tab-content.is-active {
        display: block;
        animation: panel-show .9s ease-in-out forwards;
    }
.tab-content .subsection {
    padding-top: 30px;
}
    .tab-content .subsection:not(:last-child) {
        margin-bottom: 60px;
    }

    @keyframes panel-show {
        from {
        opacity: 0;
        }
        to {
        opacity: 1;
        }
    }

/* ◇ mainArea
-------------------------------- */
.contents .mainArea {
    width: 81%;
    max-width: 985px;
    padding-bottom: 40px;
}

/* --------------------------------
   □ shop_main
-------------------------------- */
#shop_main {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 60px;
}
#shop_main .lv3.title span {
    display: inline-block;
    padding-left: 1em;
}

/* shop_list
-------------------------------- */
#shops section + section {
    margin-top: 64px;
}

#shop_main ul.list {
    border-top: 1px solid #E0E0E0;
}
    #shop_main ul.list li {
        border-bottom: 1px solid #E0E0E0;
    }
#shop_main ul.list li a {
    text-decoration: none;
    color: #111;
    padding: 28px 20px;
    display: block;
    position: relative;
}
    #shop_main ul.list li a:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        margin-top: -5px;
        width: 5px;
        height: 9px;
        background: url(../../images/common/icon/arrow.svg) no-repeat right center;
        background-size: contain;
        z-index: 1;
        transition: all 300ms 0s ease;
    }
        #shop_main ul.list li a:hover {
            opacity: 0.7;
        }
        #shop_main ul.list li a:hover:before {
            right: 15px;
        }

#shop_main ul.list li a {
    display: table;
    width: 100%;
}
    #shop_main ul.list li a > * {
        display: table-cell;
        vertical-align: middle;
        font-size: 1.5rem;
        margin-bottom: 0;
        text-align: left;
    }
    #shop_main ul.list li .realShopName {
        width: 22%;
        font-weight: 700;
        letter-spacing: 0;
    }
    #shop_main ul.list li .realShopAddress {
        padding-left: 20px;
        padding-right: 20px;
    }
#shop_main ul.list li p {
    margin-bottom: 5px;
}
    #shop_main ul.list li p:last-child {
        margin-bottom: 0;
    }

/* ◇ subArea
-------------------------------- */
#shop .contents {
    overflow: inherit; /* sticky */
}
.contents .subArea {
    min-width: 160px;
    width: 17%;
    padding-top: 30px;
    padding-bottom: 100px;
}
.contents .subArea .sub-fixed {
    position: -webkit-sticky;/*Safari*/
    position: sticky;
    top: 140px;
}
.contents .subArea li {
    text-align: left;
    margin-bottom: 10px;
}
    .contents .subArea li a {
        display: block;
        width: fit-content;
        font-size: 1.6rem;
        padding: 5px 0 5px 20px;
        position: relative;
    }
    .contents .subArea li a:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -5px;
        width: 5px;
        height: 9px;
        background: url(../../images/common/icon/arrow.svg) no-repeat right center;
        background-size: contain;
        z-index: 1;
        transition: all 300ms 0s ease;
    }
        .contents .subArea li a:hover:before {
            left: 5px;
        }


/* ==================================================================
   ■ 店舗詳細 ページ detail
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#shop.detail .accent {
    height: 390px;
    background-color: #C9BAA5;
}
#shop.detail .accent .heading {
    text-transform: capitalize;
    margin-bottom: 0;
}

/* --------------------------------
   □  shop_info
-------------------------------- */
#shop_info .txtArea .text._l {
    margin-top: 40px;
    margin-bottom: 10px;
}
#shop_info .txtArea .buttonStyle {
    margin: 10px 0;
}

#shop_info .flexbox.sp_column > .slideBox {
    width: 50%;
}

/* ◆ slider
-------------------------------- */
.slideBox {
    height: 499px;
    position: relative;
    margin-bottom: 30px;
}
.slideBox .slider {
    position: static;
}
.slideBox .slick-dotted.slick-slider {
    margin-bottom: 0;
}
.slideBox .slick-slider,
.slideBox .slick-slider .slick-track,
.slideBox .slick-slider .slick-list {
    height: 100%;
}
.slideBox .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slideBox .slick-num {
    color: #36353D;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    position: absolute;
    right: 86px;
    bottom: -30px;
    text-align: center;
}
.slideBox .slick-prev,
.slideBox .slick-next {
    color: #36353D;
    font-size: 0;
    top: auto;
    bottom: -30px;
    left: auto;
    right: 156px;
    z-index: 1;
    width: auto;
    height: auto;
    padding: 6px 0;
    transition:.4s;
    transform: none;
  }
    .slideBox .slick-next {
        right: 0;
    }
    .slideBox .slick-prev:before {
        content: none;
    }
    .slideBox .slick-prev:after,
    .slideBox .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;
    }
    .slideBox .slick-next:before {
        content:'NEXT';
    }
    .slideBox .slick-prev:hover,
    .slideBox .slick-next:hover {
        opacity: 0.7;
    }

/* --------------------------------
   □  map
-------------------------------- */
#map {
    padding-top: 0;
}
#map .map {
    margin-bottom: 10px;
}

/* --------------------------------
   □  specialOffer
-------------------------------- */
#specialOffer {
    padding-top: 0;
}
#specialOffer ul.text {
    margin-bottom: 0;
}

/* ◆ acd-check
---------------------------- */
.acd-check {
    display: none
}
.acd-check:checked + .acd-label + .acd-content {
    height: auto;
    opacity: 1;
    visibility: visible;
    margin-top: 30px;
}
.acd-label {
    color: #7993BA;
    cursor: pointer;
}
    .acd-label:hover{
            opacity: 0.7;
        }
.acd-content {
    height: 0;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
    margin-left: -1em;
}
#specialOffer .acd-content .boxArea {
    padding: 50px 4%;
}
#specialOffer .acd-content .boxArea .lv4.title {
    padding-left: 0;
    text-indent: 0;
}
#specialOffer .acd-content .boxArea .asterisk {
    margin-top: 10px;
}

/* --------------------------------
   □  information
-------------------------------- */
#information {
    padding-top: 0;
}
#information .lv3.title._l {
    margin-bottom: 10px;
}
#information ul.list{
    gap:50px 3%;
}
#information ul.list.col3 li {
    width: 31%;
}
    #information ul.list li:nth-last-child(-n+2) {
        margin-bottom: 0
    }
#information a.text_link {
    display: inline;
}
#information .url a{
    text-align: left;
    text-decoration: underline;
}
#information .asterisk {
    margin-top: 10px;
}

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

#shops ul.list {
    gap: 45px 0;
}

#shops ul.list > li {
    width: 49%;
    max-width: 732px;
    border: 1px solid #DEDEDE;
}
    #shops ul.list > li:nth-last-child(-n+2) {
        margin-bottom: 0
    }
#shops ul.list li figure {
    width: 35%;
}
    #shops ul.list li figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
#shops ul.list li .txtArea {
    width: 65%;
    max-width: inherit;
    padding: 40px 35px 40px 30px;
    text-align: left;
    background-color: #fff;
}
#shops ul.list li .buttonStyle.arrow {
    position: relative;
}
    #shops ul.list li .buttonStyle.arrow > span {
        position: static;
        padding-right: 0;
    }
    #shops ul.list li .buttonStyle.arrow > span:before {
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        right: 4%;
        width: 10px;
        height: 16px;
    }
    #shops ul.list li a:hover .buttonStyle.arrow > span:before {
        right: 2%;
    }
#shops ul.list li .txtArea .lv3.title {
    margin-bottom: 20px;
    letter-spacing: 0;
}
#shops ul.list li .txtArea .boxArea._about {
    background-color: #fff;
    padding: 0;
    margin: 0;
}
#shops ul.list li .txtArea .boxArea._about dl > dt {
    width: 5em;
}


@media (max-width: 1600px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □ 大枠
    -------------------------------- */
    /* ◇ mainArea
    -------------------------------- */
    .contents .mainArea section.wide .container {
        margin-right: 0;
    }
}


@media (max-width: 1400px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □ 大枠
    -------------------------------- */
    /* ◇ wrapper
    -------------------------------- */
    .wrapper {
        width: auto;
        margin-left: 4%;
        margin-right: 4%;
    }
}


@media (max-width: 1200px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* ◇ tabArea
    -------------------------------- */
    .tab-item {
        font-size: 1.8rem;
    }


    /* ==================================================================
       ■ 店舗詳細 ページ detail
    =================================================================== */
    /* --------------------------------
       □  shops
    -------------------------------- */
    #shops ul.list li figure {
        width: 40%;
    }
    #shops ul.list li .txtArea {
        width: 60%;
        padding: 30px 30px 30px 20px;
    }
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {
    /* ==================================================================
       ■ 共通指定
    =================================================================== */
    .contents .buttonStyle.light-blue {
        margin-top: 30px;
    }


    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* ◇ tabArea
    -------------------------------- */
    .tab-item {
        font-size: 1.4rem;
    }

    /* ◇ mainArea
    -------------------------------- */

    /* ◇ subArea
    -------------------------------- */
    .contents .subArea li a {
        font-size: 1.6rem;
    }


    /* ==================================================================
       ■ 店舗詳細 ページ detail
    =================================================================== */
    /* --------------------------------
       □  shops
    -------------------------------- */
    #shops ul.list{
        gap: 30px;
    }
    #shops ul.list > li {
        width: 100%;
        max-width: inherit;
    }
        #shops ul.list > li,
        #shops ul.list > li:nth-last-child(-n+2) {
            margin-bottom: 0px;
        }
        #shops ul.list > li:last-child {
            margin-bottom: 0;
        }
    #shops ul.list li .txtArea {
        padding: 30px 40px 30px 4%;
        justify-content: center;
    }
    #shops ul.list li .txtArea .lv3.title {
        font-size: 2.2rem;
    }
}


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

    .contents .buttonStyle.light-blue {
        width: 100%;
        max-width: 280px;
        margin-top: 30px;
    }
        .contents .buttonStyle.light-blue a {
            font-size: 1.4rem;
            padding: 12px 32px;
        }


    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  accent
    -------------------------------- */
    #shop .accent {
        height: auto;
        margin-bottom: 0;
    }
    #shop .accent .txtArea {
        position: static;
        transform: none;
        -webkit-transform: none;
        padding: 30px 0;
        margin: auto;
    }

    /* --------------------------------
       □ 大枠
    -------------------------------- */
    /* ◇ wrapper
    -------------------------------- */
    .wrapper {
        margin-top: 0;
    }

    /* ◇ tabArea
    -------------------------------- */
    .tab-list {
        flex-wrap: wrap;
        align-items: center!important;
        margin-bottom: 20px;
    }
    .tab-item {
        width: calc(100% / 3);
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .tab-content .subsection:not(:last-child) {
        margin-bottom: 30px;
    }

    /* ◇ mainArea
    -------------------------------- */
    .contents .mainArea {
        padding-bottom: 0;
    }

    /* --------------------------------
       □ shop_main
    -------------------------------- */
    #shop_main {
        padding: 0;
    }
    #shop_main .container {
        padding: 0;
        margin-left: 4%;
        margin-right: 4%;
    }

    /* shop_list
    -------------------------------- */
    #shop_main ul.list li a {
        padding: 20px 15px 20px 0;
    }
    #shop_main ul.list li a:before {
        right: 0;
    }
    #shop_main ul.list li a > * {
        display: block;
    }
        #shop_main ul.list li .realShopName {
            width: 100%;
            margin-bottom: 10px;
        }
        #shop_main ul.list li .realShopAddress {
            padding: 0;
        }

    /* ◇ subArea
    -------------------------------- */
    .contents .subArea {
        display: none;
    }


    /* ==================================================================
       ■ 店舗詳細 ページ detail
    =================================================================== */
    /* --------------------------------
       □  accent
    -------------------------------- */
    #shop.detail .accent {
        height: auto;
        margin-bottom: 0;
    }

    /* --------------------------------
       □  shop_info
    -------------------------------- */
    #shop_info .txtArea .text._l {
        margin-top: 30px;
    }
    #shop_info .txtArea .buttonStyle {
        margin: 10px auto;
    }
    #shop_info .slideBox {
        margin-top: 30px;
        margin-bottom: 0;
    }

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

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

    /* --------------------------------
       □  map
    -------------------------------- */
    #map .map iframe {
        height: 100vw;
    }

    /* --------------------------------
       □  specialOffer
    -------------------------------- */
    #specialOffer .acd-content .boxArea {
        padding: 30px 4%;
    }

    /* --------------------------------
       □  information
    -------------------------------- */
    #information ul.list li,
    #information ul.list li:nth-last-child(-n+2) {
        margin-bottom: 30px;
    }
        #information ul.list li:last-child {
            margin-bottom: 0;
        }

    /* --------------------------------
       □  shops
    -------------------------------- */
    #shops ul.list{
        gap: 0;
    }
    
    #shops ul.list > li,
    #shops ul.list > li:nth-last-child(-n+2) {
        width: 100%;
        max-width: inherit;
        margin-bottom: 30px;
    }
        #shops ul.list > li:last-child {
            margin-bottom: 0;
        }

    #shops ul.list li .txtArea {
        padding: 20px 35px 20px 4%;
        justify-content: center;
    }
    #shops ul.list li .txtArea .lv3.title {
        font-size: 1.8rem;
    }

}