@charset "utf-8";
/* レイアウトのためのCSS */

body{
background: #fff;
    font-family:'Marcellus', serif,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	color: #222;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}






@media screen and (max-width:768px) {
body{
	font-size:0.8rem;
	}
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
    outline: none;
}

a:hover,
a:active{
	text-decoration: none;
}


/*数字カウント*/

.progressbar-text{
    font-size:5rem;
   font-family: 'Italianno', cursive;
}

.progressbar-text span{
    font-size:2rem;
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width:768px) {
.progressbar-text{
    font-size:3rem;
}
.progressbar-text span{
    font-size:1.3rem;
}

}


/* heading */

.heading-block{
    position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.heading-block h1{
    font-size:6vw;
	letter-spacing: 0.2em;
	color: #fff;
    line-height: 1;
    font-family: 'Italianno', cursive;
}

.heading-block p{
    font-size:2vw;
	letter-spacing: 0.2em;
	color: #fff;
}
/*横幅が768px以下になった際の指定*/
@media only screen and (max-width:768px) {
  .heading-block h1{
    font-size:4em;
    }
.heading-block p{
    font-size:1.5em;
    }
}

/* sns icon */
#sns-icon img{
    width: 20px;
}

#sns-icon{
    position: absolute;
    right:20px;
    top:45%;
}

#sns-icon li{
     margin:0 0 15px 0;   
}

#footer-sns-icon img {  /* footer部 */
    width: 30px;
    filter: invert();
    margin: 0 10px;
}


/* copyright */

small{
    position: absolute;
    left:20px;
    top:40%;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 1;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}






h2 {
  display: inline-block;
  position: relative;
margin-bottom: 2rem;
}
h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 150px; /*下線の幅*/
  height: 2px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #666666; /*下線の色*/
}

/* lead */

.lead{
    font-size:1.5rem;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.8;
}


.lead span.bgLRextend::before{
    background:#333;
}

@media screen and (max-width:550px) {
.lead{
    font-size:1.1rem;
    }
}
@media screen and (max-width:380px) {
.lead{
    }
}


/* content-area */

.content-area{
    width:90%;
    margin:0 auto;
    padding: 30px 0; 
text-align: center; 

}




.btn { margin: 1rem 0; }
.btn a{
    margin: 0 auto;
   border:1px solid #333;
    color: #222;
    text-align: center;
    padding: 15px 20px;
    margin: 0 auto;
    transition: all .3s;
text-decoration: none;
}

.btn a:hover{
    background: #333;
    color: #fff;
} 




/* inner */
.inner{
    width:100%;
    margin:0 auto;
/*    padding:70px;*/
}

@media screen and (max-width:940px) {
.inner{
/*    padding:30px;*/
}
}



/* shop-block */

#shop-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#shop-block .shop-block-img{
    width:70%;
    min-height: 300px;
    background:url("../img/shop.jpg") no-repeat center;
    background-size: cover;
}

#shop-block .shop-block-area{
    width:25%;
    text-align: center;
}

@media screen and (max-width:1190px) {
#shop-block .shop-block-img{
    width:60%;
    }
#shop-block .shop-block-area{
    width:35%;
    }
}

@media screen and (max-width:768px) {
#shop-block .shop-block-img{
    width:48%;
    }
#shop-block .shop-block-area{
    width:48%;
    }
}

@media screen and (max-width:600px) {
#shop-block .shop-block-img,
#shop-block .shop-block-area{
    width:100%;
    }
#shop-block .shop-block-img{
        margin:0 0 50px 0;
}
}

#shop-block .shop-block-area h2{
     font-size:1.3rem;   
    margin:0 0 10px 0;
}

#shop-block .shop-block-area dt{
     font-size:1.2rem;   
    margin:0 0 10px 0;
}

/*
#shop-block .shop-block-area dd{
    font-size: 0.8rem;
    margin:0 0 30px 0;
}*/




/* order-block */



/* menu */

/*
#menu{
    padding: 70px 0;
}
*/

#menu section{
    background: #fff;
    margin: 0 0 10px 0;
border: solid 1px #eee;
    box-shadow: 2px 2px 5px #eee;

}

#menu section h3{
/*    font-size: 0.9rem;*/
    margin: 0 0 10px 0;
}

#menu section p{
    font-size: 0.8rem;
text-align: left;
}

#menu .menu-area{
    padding: 20px;
/*    box-shadow: 5px 0 10px #ccc;*/
}

#menu .menu-btn{
    text-align: center;
    margin: 50px 0 0 0;
}



/* order */

#order-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
/*    flex-direction: row-reverse;*/
}

#order-block .order-block-1{
    width:48%;
    text-align: center;
}

#order-block .order-block-2{
    width:48%;
    text-align: center;
}


@media screen and (max-width:600px) {
#order-block .order-block-1,
#order-block .order-block-2{
    width:100%;
    }
#order-block .order-block-1{
        margin:0 0 50px 0;
}
}





img.auto {
max-width: 100%;
height: auto;
}


h3{
    font-size: 1.2rem;}


/* Google map */
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* news */
.top-news-block .news-title { font-weight: bold; font-size:1.1rem; }
.top-news-block .news-date { font-size: 0.8rem; }
.top-news-block .news-body { font-size: 1rem; }