html{
 font-size: 100%;
}
body{
 font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
 font-size: 0.9rem;
 line-height: 1.8;
}
a{
 text-decoration: none;
}
img{
 max-width: 100%;
}
li{
 list-style: none;
}

.site-title{
 text-align: center;
 position: absolute;
 font-size: 60px;
 top: 45%;
 left: 0;
 right: 0;
 color: #fff;
 text-shadow:2px 2px 4px #000;
}
.sec-title{
 width: 100%;
 color: #fff;
 text-align: center;
 font-size: 3.5rem;
 filter: drop-shadow(1px 1px 10px #c0c0c0);
 position: absolute;
 top: 30%;
}
.item-title{
 font-size: 2rem;
 display: inline-block;
 border-bottom: solid 6px #3232ff;
 margin-bottom: 70px;
}
.fixed-bg{
 height: 300px;
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}
.wrapper{
 max-width: 1000px;
 padding: 90px 16px 150px 16px;
 margin: 0 auto;
 text-align: center;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header{
 width: 100%;
 min-height: 100vh;
 background-image: url(../img/mainvisual.jpg);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 padding: 25px 50px;
 position: relative;
 top: 0;
 z-index: 1000;
}
nav{
 position: fixed;
}
nav ul{
 display: flex;
 justify-content: flex-end;
}
nav li{
 margin-left: 30px;
}
nav li a{
 color: #fff;
 font-size: 1.2rem;
 font-weight: bold;
 transition: all  0.3s ease;
 filter: drop-shadow(2px 2px 4px #121212);
}
nav li a:hover{
 color: #3232ff;
}

/*-------------------------------------------
About
-------------------------------------------*/
#about{
 margin-top: 20px; 
}
#about .about-img{
 background-image: url(../img/ourshop.jpg);
 position: relative;
}
#about ul{
 /* display: flex;
 justify-content: space-between;
 flex-wrap: wrap; */
 margin-bottom: 40px;
}
#about li{
 width: 100%;
 line-height: 2;
 font-size: 1.2rem;
 font-weight: bold;
 text-align: left;
 padding: 2%;
}
#about li img{
 display: block;
  margin: 0 auto;
}

/*-------------------------------------------
Recommend
-------------------------------------------*/
#recommend{
 margin-top: 20px;
}
#recommend .recommend-img{
 background-image: url(../img/recommend.jpg);
 position: relative;
}
#recommend ul{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-bottom: 40px;
}
#recommend li{
 width: 50%;
 line-height: 2;
 font-size: 1rem;
 text-align: left;
 padding: 2%;
}
#recommend li p{
 font-weight: bold;
 font-size: 1.5rem;
}


/*-------------------------------------------
Menu
-------------------------------------------*/

#menu{
 margin-top: 20px;
}
#menu .menu-img{
 background-image: url(../img/menu.jpg);
 position: relative;
}
#menu .menu-content{
 display: flex;
}
#menu .menu-item{
 width: 50%;
 padding: 0 45px;
}
#menu .menu-item:first-child{
 border-right: solid 1px #000;
}
#menu .menu-item dl{
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 30px;
}
#menu .menu-item dt{
 width: 87%;
 text-align: left;
 border-bottom: dotted 1px #000;
 margin-bottom: 25px;
}
#menu .menu-item dd{
 width: 13%;
 text-align: right;
 padding-top: 8px;
}
#menu .menu-item dl.food{
 margin-bottom: 55px;
}
#menu .menu-item p{
 margin-top: 20px;
 text-align: left;
 font-weight: bold;
 font-size: 16px;
}


/*-------------------------------------------
About
-------------------------------------------*/
/*
#about{
 margin-top: 20px;
}
#about .about-img{
 background-image: url(../img/about.jpg);
 position: relative;
}
#about ul{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-bottom: 40px;
}
#about li{
 width: 50%;
 line-height: 2;
 font-size: 1rem;
 text-align: left;
 padding: 2%;
}
/*
#about .btn{
 width: 160px;
 height: 50px;
 line-height: 3.5;
 display: inline-block;
 color: #000;
 padding: 0;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
}
#about .btn span{
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
}
/*
.btn::before 右の赤線
.btn::after 下の赤線
.btn span::before 左の赤線
.btn span::after 上の赤線
*/
/*
#about .btn::before,
#about .btn::after{
 position: absolute;
 content: "";
 right: 0;
 bottom: 0;
 background: #e03131;
 transition: all 0.3s ease;
}
#about .btn span::before,
#about .btn span::after{
 position: absolute;
 content: "";
 left: 0;
 top: 0;
 background: #e03131;
 transition: all 0.3s ease;
}
#about .btn::before,
#about .btn span::before{
 width: 2px;
 height: 50%;
}
#about .btn::after,
#about .btn span::after{
 width: 20%;
 height: 2px;
}
*/
/*
ホバー時の縦の動作
右の赤線と左の赤線の高さを100%にする
*/
/*
#about .btn:hover::before,
#about .btn span:hover::before{
 height: 100%;
}
*/
/*
ホバー時の横の動作
下の赤線と上の赤線の横幅を100%にする
*/
/*
#about .btn:hover::after,
#about .btn span:hover::after{
  width: 100%;
}
*/


/*-------------------------------------------
Location
-------------------------------------------*/
#location{
 margin-top: 20px;
}
#location .location-img{
 background-image: url(../img/location.jpg);
 position: relative;
}
#location .item-map{
  /* グーグルマップをグレースケールにする */
 filter: grayscale(1);
 margin-bottom: 20px;
}
/* グーグルマップのサイズを設定 */
#location .item-map iframe{
 width: 100%;
 height: 400px;
 border: 0;
}
#location .item-info{
 text-align: left;
}
#location .item-info p{
 font-size: 18px;
 margin-bottom: 10px;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer{
 font-size: 0.5rem;
 padding: 10px 0;
 text-align: center;
}
.pagetop {
 height: 60px;
 width: 60px;
 position: fixed;
 right: 30px;
 bottom: 30px;
 background: url(../img/btn.png);
 border: solid 1px #000;
 border-radius: 5%;
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 2;
 cursor: pointer;
}
.pagetop__arrow{
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 color: #fff;
 margin-top: 18px;
}


/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px){
  .site-title{
    top: 60%;
  }
  .sec-title{
    font-size: 2rem;
    top: 26%;
  }
  .item-title{
    font-size: 1.25rem;
    margin-bottom :25px;
  }
  .fixed-bg{
    height: 124px;
    /* スマホ時は背景をスクロールするように変更 */
    background-attachment: scroll;
  }
  .wrapper{
    padding: 30px 16px 60px 16px;
  }

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header{
 padding: 25px 1px;
}
nav li{
 margin-left: 20px;
}
nav li a{
 font-size: 1rem;
}

.site-title{
 font-size: 48px;
 top: 35%;
 text-shadow:10px 10px 20px #000;
}

 /*-------------------------------------------
Welcome
-------------------------------------------*/

 #welcome{
  max-width: 1000px;
 }
 #welcome ul{
  flex-direction: column;
 }
 #welcome li{
  width: 70%;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: bold;
  }

 /*-------------------------------------------
Recommend
-------------------------------------------*/

 #recommend{
  max-width: 1000px;
 }
 #recommend ul{
  flex-direction: column;
 }
 #recommend li{
  width: 70%;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: bold;
  }
 #recommend li p{
 font-weight: bold;
 font-size: 1.5rem;
 }

  /*-------------------------------------------
  Menu
  -------------------------------------------*/
  #menu{
    margin-top: 10px;
  }
  #menu .menu-content{
    flex-direction: column;
  }
  #menu .menu-item{
    width: 100%;
    padding: 0;
  }
  #menu .menu-item:first-child{
    border-right: none;
  }
  #menu .menu-item dl{
    margin-bottom: 10px;
  }
  #menu .menu-item dl.food{
    margin-bottom: 10px;
  }

  /*-------------------------------------------
  About
  -------------------------------------------*/
  #about ul{
    flex-direction: column;
  }
  #about li{
    width: 100%;
  }

.pagetop {
 bottom: 120px;
 right: 25px;
}

}