/*title-menu title-item before*/
#firstview .title-menu::before,
.title-item::before{
    content: "";
    background: linear-gradient(90deg ,rgba(20, 122, 177, 0.15) ,rgba(21, 206, 128, 0.15) ,rgba(255, 255, 0 ,0.15));
    width: 90%;
    height: 80%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: skewY(-0.025turn);
    z-index: -1;
    position: absolute;
    left: 0;
    bottom: 0;
}

/*--------------------------------------------

firstview

--------------------------------------------*/
#firstview{
    position: relative;
    width: 100vw;
    width: 100lvw;
    height: 100vh;
    height: 100lvh;
    background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 100%),
    url(../images/shop/first_view.webp);
    background-size: cover;
    background-position: center;
}
#firstview .title-menu{
    position: absolute;
    bottom: 5%;
    left: 0;
    z-index: 1;
    padding: 5%;
    width: 100%;
    letter-spacing: 0.15em;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#firstview .title-menu h1{
    font-size: 1.8rem;
}
#firstview .title-menu p{
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    width: fit-content;
    letter-spacing: 0.1em;
    text-shadow: none;
}
#firstview .title-menu ul{
    display: flex;
    gap: 20px;
}
#firstview .title-menu ul li{
    width: 100%;
}
#firstview .title-menu ul li a{
    padding: 10px 20px;
    border-radius: 100px;
    background: rgb(255, 255, 255);
    width: 100%;
    display: block;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.1em;
}
#firstview .title-menu ul li a:hover{
    opacity: 0.6;
}
/*--------------------------------------------
min-width 810
--------------------------------------------*/
@media (min-width: 810px) {
    #firstview .title-menu h1{
        font-size: 3rem;
    }
    #firstview .title-menu{
        width: fit-content;
        padding: 5% 10% 5% 5%;
    }
}
/*--------------------------------------------
min-width 1080
--------------------------------------------*/
@media (min-width: 1080px) {
    #firstview .title-menu h1{
        font-size: 4rem;
    }
    #firstview .title-menu{
        padding: 5% calc((100% - 1080px) / 2);
        animation: none;
        background-position: center 40%;
    }
}
/*--------------------------------------------
min-width 1500
--------------------------------------------*/
@media (min-width: 1500px) {
    #firstview .title-menu{
        left: 0;
        bottom: 5%;
        padding: 5% 10% 5% 15%;
    }
}

/*--------------------------------------------

map

--------------------------------------------*/
#map{
    padding: 5%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
#map h2{
    font-weight: 500;
    letter-spacing: 0.2em;
    position: relative;
    padding-right: calc(5rem + 20px);
    width: 100%;
    margin-bottom: calc(1em + 20px);
}
#map h2::before{
    content: "";
    position: absolute;
    left: calc(5em + 20px);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 5em;
    height: 1px;
    background: rgb(50, 50, 50);
}
#map h2::after{
    content: "全店舗ご利用いただけます";
    position: absolute;
    left: 0;
    bottom: calc(-1em - 20px);
    font-size: 0.8rem;
}
/*content*/
#map .content{
    position: relative;
    width: 340px;
    margin: 0 auto;
}
#map .content img{
    width: 100%;
}
/*pin*/
#map .pin {
    position: absolute;
    width: 25px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform-origin: center;
}
@keyframes mapMove {
    0% {
        transform: scale(1.2);
        opacity: 1;
    }
    50% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}
#map .pin:hover{
    opacity: 0.6;
}
#map .pin.yonematsu{
    left: 166px;
    bottom: 160px;
    animation: mapMove 2s 0.3s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    border: solid 8px rgb(20, 122, 177) ;
}
#map .pin.seiwa{
    left: 230px;
    bottom: 19px;
    animation: mapMove 2s 0.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    border: solid 8px rgb(21, 206, 128);
}
#map .pin.oowada{
    left: 216px;
    top: 26px;
    animation: mapMove 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    border: solid 8px rgb(238 217 0);
}
/*shop*/
#map .shop{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
#map .shop .detail{
    display: flex;
    gap: 20px;
}
#map .shop .detail > *{
    width: calc(50% - 10px);
}
#map .shop .detail .note{
    font-size: 0.65rem;
}
#map .shop .detail .address i,
#map .shop .detail .tel i{
    padding-right: 5px;
}
#map .shop .detail .more a{
    display: block;
    text-align: right;
}
#map .shop .detail .more a i{
    padding-left: 5px;
}
/*--------------------------------------------
min-width 810
--------------------------------------------*/
@media (min-width: 810px) {
    #map{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        height: 100vh;
        height: 100lvh;
    }
    /*content*/

    /*shop*/
    #map .shop{
        width: 47%;
        gap: 30px;
    }
}
/*--------------------------------------------
min-width 1080
--------------------------------------------*/
@media (min-width: 1080px) {
    #map{
        padding: 100px calc((100% - 1080px) / 2);
    }
    /*content*/
    #map .content{
        width: 500px;
    }
    #map .pin.yonematsu{
        left: 250px;
        bottom: 242px;
    }
    #map .pin.seiwa{
        left: 343px;
        bottom: 33px;
    }
    #map .pin.oowada{
        left: 325px;
        top: 44px;
    }
    /*shop*/
    #map .shop{
        width: calc(1080px - 540px);
    }
}

/*--------------------------------------------

each-shop

--------------------------------------------*/
.each-shop{
    padding: 5% 0;
}
.each-shop > div{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
/*title-item*/
.title-item{
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5%;
    gap: 15px;
    color: rgb(50, 50, 50);
}
.title-item img{
    height: 70px;
}
.title-item .detail{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
}
.title-item h2{
    font-size: 2rem;
    line-height: 1em;
    color: rgb(50, 50, 50);
}
.title-item .detail p{
    font-weight: 600;
    letter-spacing: 0.2em;
}
.title-item .detail p small{
    display: block;
    line-height: 1em;
}
.title-item .detail .note{
    width: 100%;
}
/*shop-slide*/
.shop-slide{
    position: relative;
    width: 100%;
    padding: 0 5%;
    margin-bottom: 50px;
}
.slick-slide{
    height: auto !important;
}
.shop-slide .slide-item{
    position: relative;
    margin-bottom: 2em;
    aspect-ratio: 1 / 1;
}
.shop-slide img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.shop-slide .slide-item p{
    position: absolute;
    left: 0;
    bottom: -2em;
    font-size: 0.7rem;
}
/*slide-button*/
.slide-arrow{
    border: solid 1px rgb(0, 0, 0);
    width: 50px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    transition: all .3s;
    border-radius: 50%;
    position: absolute;
    bottom: -50px;
}
.slide-arrow.next-arrow{
    right: 5%;
}
.slide-arrow.prev-arrow{
    right: calc(5% + 60px);
}
.slide-arrow:hover{
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}
/*caption*/
.each-shop .caption{
    padding: 0 5%;
}
/*message*/
.each-shop .caption .message{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.each-shop .caption .message dt{
    padding-top: 20px;
    position: relative;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 2em;
    font-size: 0.9rem;
}
.each-shop .caption .message dt::before{
    content: "";
    background: rgb(50, 50, 50);
    width: 70%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}
.each-shop .caption .message dd{
    letter-spacing: 0.1em;
    line-height: 1.6em;
}
.each-shop .caption .message dd:first-of-type{
    font-weight: 700;
}
/*address*/
.each-shop .caption .address{
    display: flex;
    gap: 20px;
    align-items: center;
}
.each-shop .caption .address > *{
    width: calc(50% - 10px);
}
.each-shop .caption .address ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.each-shop .caption .address ul li{
    display: flex;
    align-items: flex-start;
    letter-spacing: 0.05em;
}
.each-shop .caption .address ul li i{
    padding-right: 5px;
    line-height: 1.5em;
}
.each-shop .caption .address img{
    border-radius: 50%;
}
/*map*/
.each-shop .caption .map{
    aspect-ratio: 16 / 9;
}
.each-shop .caption .map iframe{
    width: 100%;
    height: 100%;
}
/*access*/
.each-shop .caption .access{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.each-shop .caption .access dt{
    position: relative;
    padding-right: calc(5em + 10px);
    width: fit-content;
}
.each-shop .caption .access dt::before{
    content: "";
    width: 5em;
    height: 1px;
    background: rgb(50, 50, 50);
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
/*--------------------------------------------
min-width 810
--------------------------------------------*/
@media (min-width: 810px) {
    .each-shop{
        padding: 5%;
    }
    .each-shop > div{
        flex-direction: row;
        align-items: center;
        height: 100vh;
        height: 100lvh;
    }
    /*title-item*/
    .title-item{
        width: calc(50% - 25px);
        height: fit-content;
    }

    /*shop-slide*/
    .shop-slide{
        width: calc(50% - 25px);
        padding: 0;
    }
    /*slide-button*/
    .slide-arrow.next-arrow{
        right: 0;
    }
    .slide-arrow.prev-arrow{
        right: 60px;
    }
    /*caption*/
    .each-shop .caption{
        padding: 0;
        flex-wrap: wrap;
        gap: 0 50px;
    }
    .each-shop .caption > *{
        width: calc(50% - 25px);
    }
}
/*--------------------------------------------
min-width 1080
--------------------------------------------*/
@media (min-width: 1080px) {
    .each-shop{
        padding: 100px calc((100% - 1080px) / 2);
    }
}