*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}



body{

    background:
        url("img/bg_pattern.png")
        repeat;

    background-size:150px 150px;
}

main{

    max-width:1200px;

    margin:0 auto;

    background:#fff;
}



.swiper-slide{
    background:#fff;
}


img{
    display:block;
    width:100%;
    height:auto;
}

/* TOP */

.hero{
    position:relative;
}

.hero img{
    width:100%;
    display:block;
}

.hero-instagram{
    
     position:absolute;

    left:57%;
    top:82%;

    width:8%;
    height:11%;

    z-index:20;
}

.hero-x{
    

    position:absolute;

    left:67%;
    top:82%;

    width:8%;
    height:11%;

    z-index:20;
}


/* NAV */

.icon-nav{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:6px;

    padding-top:18px;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:0;

    background:#fff;

    line-height:0;
}

.icon-nav a{

    flex:1;

    display:block;

    position:relative;

    z-index:1;

    transition:
        transform .18s ease,
        filter .18s ease;
}

.icon-nav img{

    width:100%;

    height:auto;

    display:block;
}

/* SWIPER */

.swiper-pagination{
    bottom:18px !important;
}

.swiper-pagination-bullet{

    width:14px;
    height:14px;

    background:#fff;

    border:2px solid #004ea2;

    opacity:1;

    margin:0 6px !important;

    transition:.2s;
}

.swiper-pagination-bullet-active{

    background:#e60012;
    border-color:#e60012;

    transform:scale(1.2);
}
.swiper-button-prev,
.swiper-button-next{

    width:48px;
    height:48px;

    background:rgba(255,255,255,.9);

    border-radius:50%;

    box-shadow:0 3px 12px rgba(0,0,0,.25);

    color:#004ea2;
}

.swiper-button-prev{
    left:16px;
}

.swiper-button-next{
    right:16px;
}

.swiper-button-prev::after,
.swiper-button-next::after{

    font-size:22px;
    font-weight:bold;
}

.swiper-button-prev:hover,
.swiper-button-next:hover{

    background:#004ea2;
    color:#fff;
}

.swiper{
    width:100%;
    position:relative;
}

.swiper-button-prev,
.swiper-button-next{
    z-index: 50;
}

/* PRICE */

#price{
    margin-top:20px;
    margin-bottom:40px;
}


/* MAP */

.map-section{

    margin-bottom:30px;
    background:#fff;

}

.map-section iframe{

    width:100%;
    height:420px;
    border:none;
    display:block;
}


/* ======================
 フッター全体
====================== */

.site-footer{

    background:#fff;

    padding:20px;
}

/* 上段 */

.footer-top{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:20px;

    flex-wrap:wrap;
}

@media (max-width:900px){

    .footer-top{

        flex-direction:column;

        align-items:center;
    }

    .footer-main{

        justify-content:center;
    }

    .footer-info{

        text-align:center;
    }

    .footer-sns{

        flex-direction:row;
    }

}
/* ロゴ＋情報 */

.footer-main{

    display:flex;

    align-items:flex-start;

    gap:20px;
}

/* ロゴ */

.footer-logo{

    flex:0 0 180px;
}

.footer-logo img{

    width:160px;

    height:auto;

    display:block;
}

/* 店舗情報 */

.footer-info{

    text-align:left;
}

.shop-catch{

    display:inline-block;

    background:#fff100;

    padding:4px 14px;

    margin-bottom:8px;

    font-size:18px;

    font-weight:bold;

    line-height:1;
}

.footer-info h2{

    font-size:18px;

    font-weight:bold;

    margin:0 0 6px;

    white-space:nowrap;
}

.footer-info p{

    margin:0;

    font-size:13px;

    font-weight:bold;

    line-height:1.8;

    white-space:nowrap;
}

.footer-info a{

    color:#222;

    text-decoration:none;
}

/* SNS */

.footer-sns{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding-top:4px;
}

.footer-sns img{

    width:48px;

    height:auto;

    display:block;
}

/* バナー */

.footer-banner{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:30px;
    margin-bottom:40px;
}


.footer-banner img{

    width:180px;

    height:auto;

    display:block;
}

/* ナビ */

.footer-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:14px;

    font-weight:bold;

    margin-bottom:12px;
}

.footer-nav a{

    color:#222;

    text-decoration:none;
}

/* コピーライト */

.copyright{

    text-align:center;

    font-size:12px;
}

/* ======================
 SP
====================== */

@media(max-width:768px){

    
    .footer-logo img{
        width:130px;
    }

    .shop-catch{
        font-size:13px;
    }


    .footer-info p{
        font-size:12px;
    }

    .footer-sns img{

        width:40px;
        height:40px;
    }

    
.footer-nav{
    flex-direction:column;
    gap:10px;
    font-size:12px;
    }

.footer-nav span{
    display:none;
    }


}
/* Responsive */

@media(max-width:768px){

    .hero-instagram{
        width:12%;
        height:8%;
    }

    .hero-x{
        width:12%;
        height:8%;
    }

    .map-section iframe{
        height:320px;
    }

    
   #price{
        margin-top:0;
        margin-bottom:10px;
    }



    .footer-info p{
    white-space:normal;
    }

    /* フッター */

    .footer-main{
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .footer-logo{
        flex:none;
    }

    .footer-info{
        text-align:center;
    }


    /* Swiper矢印 */

    .swiper-button-prev,
    .swiper-button-next{
        width:15px;
        height:15px;
        top:65%;
    }

    .swiper-button-prev{
        left:6px;
    }

    .swiper-button-next{
        right:6px;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after{
        font-size:6px;
    }

    /* Swiperドット */

    .swiper-pagination{
         display:none;
}

}


/* ======================
 ボードゲームリンク
====================== */

.boardgame-slide{
    position:relative;
}

.boardgame-link{

    position:absolute;

    left:4%;
    top:73%;

    width:29%;
    height:13%;

    z-index:10;
}

/* ======================
 フードリンク
====================== */

.food-slide{
    position:relative;
}

.food-link{

    position:absolute;

    left:4%;
    top:74%;

    width:29%;
    height:13%;

    z-index:10;
}