/* 1.共通部分
   2.メニューページに関して
   3.駐車場ページに関して
   4.店舗情報ページに関して
   5.メインページに関して
*/
@charset "UTF-8";
/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    background-color: #f2f2f2;
    font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
    line-height: 1.7;
    color: #432;
    margin:0;
}
a {
  text-decoration: none;/*リンクの下線をなくす*/
  color: #1a0dab;
}
img{
  max-width: 100%;
}
iframe {
    width: 100%;
}
#wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    margin-top: 90px;
}
header{
  background-color: #ca8c23;
}
.logo{
  margin:0;
}
footer {
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    background-color: white;
}
footer p {
    color: black;
    font-size: 0.875rem;
}
.sidebar_img{/*Side barの画像のmarginを設定*/
  margin-top: 10px;
  margin-bottom: 10px;
}
.box{/*金色の見出しボックス*/
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative;
  padding: 0.2rem 1.5rem;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  background-color: #fff;
}
.box h1:before,
.box h1:after{
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}
.box h1:before{
  top: 0;
}
.box h1:after{
  bottom: 0;
}
.box h2:before,
.box h2:after{
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}
.box h2:before{
  top: 0;
}
.box h2:after{
  bottom: 0;
}

/*navi
---------------------------------*/
.globalMenuSp {
  text-align: center;
  width: 100%;
  z-index : 2;
  position: absolute;
  font-size: 1.2rem;
  font-weight:bold;
}
.globalMenuSp ul{
  margin:0 auto;
  padding:0;/**/
  list-style-type: none;/**/
}
.globalMenuSp ul li{
  position:relative;
  float:left;
  width:25%;
  background: #fff;

}
.globalMenuSp ul li a {
  display: block;
  color: #ca8c23;
  padding: 1em 0;
  text-decoration :none;
}
.globalMenuSp ul li:hover{
  background :#ddd;
}/*共通*//*共通*//*共通*/
.globalMenuSp li li{
  height:0;
  width:100%;
  transition:.5s;
  overflow: hidden;
  position:relative;
}
.globalMenuSp li:hover ul>li{/*親リストをhoverすると子リストが出てくる（共通）*/
  height:auto;
  overflow:visible;
}

/* 2.メニューページに関して
--------------------------------*/
#menu-page{
  margin-top:60px;
  background-color: #f2f2f2;
}
.menu_box{/*テキストのメニュー*/
  color: black;
  background-color: white;
  padding: 100px;
  padding-top:20px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.menu{/*メニューの配置等を指定*/
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-gap: 20px;
  margin: 20px auto;
  text-align: left;
}
.menu p {/*下線を引く*/
  border-bottom: dotted 1px;
}
h1.menu_tag{/*タグの色をゴールドに変更する*/
  color: #ca8c23;
}
h2.menu_tag{/*タグの色をゴールドに変更する*/
  margin-top: 50px;
  color: #ca8c23;
}
h3.menu_tag{/*タグの色をゴールドに変更する*/
  margin-top: 50px;
  color: #ca8c23;
}

/* 3.駐車場ページに関して
---------------------------------*/
.parking{
  max-width: 1000px;
  margin:0 auto;
  margin-top:100px;
}

/* 4.infoページ
---------------------------------*/
.info_pic p{/*infoページの文字の変更*/
  font-size:7vw;
  font-weight: bold;
  text-shadow: 4px 4px 4px silver;/*影の右への長さ,影の下への長さ,影のボケ具合,影の色*/
  font-family: 'Sawarabi Mincho','Arial','Yu Gothic';
  padding-bottom: 300px;
}
.info_main{/*margin-top*/
  margin-top: 70px;
}
.parallax-bg {/*画像*/
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  color: #fff;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1000px;
  padding: 5%;
}

.box_info{/*infoページ マップとテキスト案内をまとめる*/
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-right: 40px;
  padding-left: 40px;
  display: grid;
  grid-template-columns:  1fr 1fr;
  grid-gap: 10px;
  font-size: 1.2rem;
}
.pop-box{/*ギャラリーボタン,メニューボタン,口コミ*/
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.popup {/* ポップアップウインドウの設定 */
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 70vw;
  height: 55vw;
  overflow-y: scroll;
}
#popup-on{/* チェックボックスの初期設定 */
  display: none;
}
#popup-on:checked + .popup{/* チェックされたらポップアップウインドウを開く */
  display: block;
}
.icon-close{/* 閉じるアイコン（右上） */
  background: #805230;
  color: #fff;
  font-size: 20px;
  padding: 0 10px;
  position: absolute;
  right: 0;
}
.popup-content{/* ポップアップの内容 */
  margin: 40px auto 40px auto;
  width: 90%;
}
.btn-open{
  background: #805230;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 250px;
  height:50px;
  text-align: center;
  position:relative;
  display: block;
}
.btn-close{/* 閉じるボタン */
  background: #805230;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 70%;
  text-align: center;
}
.btn{/*メニューはこちら,口コミを見る*/
  background: #805230;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 250px;
  height:50px;
  line-height: 50px;
  text-align: center;
}
.btn a{/*メニューはこちら,口コミを見る 文字色を白に変更*/
  color: #fff;
  display: block;
}

/*本店のinfoページ*/
.img-bg-01 {background-image: url('../images/honten_img/honten_gallery01.jpg');}
.img-bg-02 {background-image: url('../images/honten_img/honten_gallery02.jpg');}
.img-bg-03 {background-image: url('../images/honten_img/honten_gallery03.jpg');}
.img-bg-04 {background-image: url('../images/honten_img/honten_gallery04.jpg');}
.img-bg-05 {background-image: url('../images/honten_img/honten_gallery05.jpg');}
/*新館のinfoページ*/
.img-bg-11 {background-image: url('../images/shinkan_img/shinkan_gallery01.jpg');}
.img-bg-12 {background-image: url('../images/shinkan_img/shinkan_gallery02.jpg');}
.img-bg-13 {background-image: url('../images/shinkan_img/shinkan_gallery03.jpg');}
.img-bg-14 {background-image: url('../images/shinkan_img/shinkan_gallery04.jpg');}
.img-bg-15 {background-image: url('../images/shinkan_img/shinkan_gallery05.jpg');}
/*一魚一会のinfoページ*/
.img-bg-21 {background-image: url('../images/ichigyo_img/ichigyo_gallery01.jpg');}
.img-bg-22 {background-image: url('../images/ichigyo_img/ichigyo_gallery02.jpg');}
.img-bg-23 {background-image: url('../images/ichigyo_img/ichigyo_gallery03.jpg');}
.img-bg-24 {background-image: url('../images/ichigyo_img/ichigyo_gallery04.jpg');}
.img-bg-25 {background-image: url('../images/ichigyo_img/ichigyo_gallery05.jpg');}
/*波のうえのinfoページ*/
.img-bg-31 {background-image: url('../images/naminoue_img/naminoue_gallery01.jpg');}
.img-bg-32 {background-image: url('../images/naminoue_img/naminoue_gallery02.jpg');}
.img-bg-33 {background-image: url('../images/naminoue_img/naminoue_gallery03.jpg');}
.img-bg-34 {background-image: url('../images/naminoue_img/naminoue_gallery04.jpg');}
.img-bg-35 {background-image: url('../images/naminoue_img/naminoue_gallery05.jpg');}

.info_bg{/*スマホ用の表示display:none*/
  display: none;
}

/* 5.メインページに関して
-----------------------------------------*/
.main{
  width:68%;
  padding: 10px;
  margin-right: 2%;
  background-color: white;
}
.sidebar{
  width:30%;
  padding:10px;
  background: white;
}
.linkbox{/*店舗ごとに区切るbox linkbox*/
  background: white;
  position: relative;
  margin: 1em 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.linkbox a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
}
.linkbox:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.3;
    zoom:1;/*IE*/
}
.flexbox{/*店舗情報box flexbox*/
  border-top: solid 1px #805230;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:10px;
  display: grid;
  grid-template-columns: 1fr 1fr;;
}

.sectionbox{
  position: relative;
  border: 0.1px solid #dddd;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.sectionbox a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-999px;
}
.sectionbox:hover{/*系列店舗紹介hover*/
  opacity:0.3;
}
.instafeed1{/*instagram*/
  position: relative;
  max-height:500px;
  background-color: #dddd;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  border: 0.1px solid #dddd;
  margin-bottom: 20px;
}
.instafeed2{/*instagram波のうえ*/
  position: relative;
  max-height:500px;
  background-color: #dddd;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  border: 0.1px solid #dddd;
  margin-bottom: 20px;
}





@media screen and (max-width: 700px){
/* 1.共通部分
   2.メニューページに関して
   3.駐車場ページに関して
   4.店舗情報ページに関して
   5.メインページに関して
*/
/* 1.共通部分
-----------------------------------------*/
.video{
  margin-top:10px;
}
#wrapper{
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.main{
  width:100%;
  margin:0;
}
.box{/*金色の見出しボックス*/
  margin:10px auto;
  font-size: 0.8rem;
}
/*navi*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 3px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  background-color: white;
  opacity: 0.8;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : black;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 20px;
  left: 6px;
  background :black;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 20px;
  background :black;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
.globalMenuSp {
  font-size: 0.8rem;
  position:absolute;
  left:-10000px;
  top:-10000px;
  opacity: 0.9;
  transition: opacity .6s ease, visibility .6s ease; /*transitionでサブメニューが
  現れる速度を調節*/
}
.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display: contents;
}
.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
  border-bottom: 0.1px solid;
}
.globalMenuSp ul li  li{
  border: none;
}
.globalMenuSp ul li:last-child {/*最後の子リストのpaddingを0にする*/
  padding-bottom: 0;
}
.globalMenuSp.active {
  position: fixed;
  top  : 0;
  left : 0;
  opacity: 100;
}

/* 2.メニューページに関して（完）
-----------------------------------------*/
#menu-page{
  margin-top:10px;
}
.menu_box{/*テキストのメニューpadding*/
  padding: 50px;
}
.menu{/*メニューの配置を2列から1列に変更する*/
  grid-template-columns: 1fr;
  font-size: 0.8rem;
}
.menu_tag{
  font-size: 0.8rem;
}
.menu_b{
  font-size: 0.7rem;
}

/* 3.駐車場ページに関して（完）
-----------------------------------------*/
.parking{/*margin-topを設定する,font-size:0.5rem*/
  margin-top:10px;
  font-size:0.5rem;
}

/* 4.店舗情報ページに関して
-----------------------------------------*/
.popup {/* ポップアップウインドウの設定 */
  width: 95vw;
  height: 100vw;
}
.box_info{
  grid-template-columns: 1fr;/*店舗情報とマップを1fr 1frから1frに変更*/
}
.pop-box{
  grid-template-columns: 1fr;
}
.box_info{/**info*/
  font-size: 0.7rem;
}
.info_main{/*margin-top*/
  margin-top:10px;
}
.info_pic p{/*infoページの文字についての変更*/
  font-size:1.4rem;
}
.parallax-bg {/*display:noneパララックスをなくす*/
  display: none;
}
.info_bg{/*スマホ用写真*/
  display: flex;
  background-size: cover;
  width:100%;
  height:250px;
  margin-bottom:5px;
}
.info_bg p{/*スマホ用文字の設定*/
  color:white;
  font-size:7vw;
  font-weight: bold;
  text-shadow: 4px 4px 4px silver;/*影の右への長さ,影の下への長さ,影のボケ具合,影の色*/
  font-family: 'Sawarabi Mincho','Arial','Yu Gothic';
  padding-bottom: 300px;
  position: relative;
  left: 30px;
  top:  70px;
}
/*うさぎや本店*/
.ph-bg-01{background-image: url('../images/honten_img/honten_gallery01.jpg');}
.ph-bg-02 {background-image: url('../images/honten_img/honten_gallery02.jpg');}
.ph-bg-03 {background-image: url('../images/honten_img/honten_gallery03.jpg');}
.ph-bg-04 {background-image: url('../images/honten_img/honten_gallery04.jpg');}
.ph-bg-05 {background-image: url('../images/honten_img/honten_gallery05.jpg');}
/*うさぎや新館*/
.ph-bg-11{background-image: url('../images/shinkan_img/shinkan_gallery01.jpg');}
.ph-bg-12 {background-image: url('../images/shinkan_img/shinkan_gallery02.jpg');}
.ph-bg-13 {background-image: url('../images/shinkan_img/shinkan_gallery03.jpg');}
.ph-bg-14 {background-image: url('../images/shinkan_img/shinkan_gallery04.jpg');}
.ph-bg-15 {background-image: url('../images/shinkan_img/shinkan_gallery05.jpg');}
/*一魚一会*/
.ph-bg-21{background-image: url('../images/ichigyo_img/ichigyo_gallery01.jpg');}
.ph-bg-22 {background-image: url('../images/ichigyo_img/ichigyo_gallery02.jpg');}
.ph-bg-23 {background-image: url('../images/ichigyo_img/ichigyo_gallery03.jpg');}
.ph-bg-24 {background-image: url('../images/ichigyo_img/ichigyo_gallery04.jpg');}
.ph-bg-25 {background-image: url('../images/ichigyo_img/ichigyo_gallery05.jpg');}
/*波のうえ*/
.ph-bg-31{background-image: url('../images/naminoue_img/naminoue_gallery01.jpg');}
.ph-bg-32 {background-image: url('../images/naminoue_img/naminoue_gallery02.jpg');}
.ph-bg-33 {background-image: url('../images/naminoue_img/naminoue_gallery03.jpg');}
.ph-bg-34 {background-image: url('../images/naminoue_img/naminoue_gallery04.jpg');}
.ph-bg-35 {background-image: url('../images/naminoue_img/naminoue_gallery05.jpg');}

/* 5.メインページに関して（完）
-----------------------------------------*/
.main{
  width:100%;
}
.sidebar{
  width:100%;
}
.linkbox{/*店舗ごとに区切るbox linkbox*/
  margin:0 auto;
}
.flexbox{/*店舗情報box flexbox*/
  width:98%;
  font-size: 1.5vh;
  grid-template-columns: 1fr;
  padding:1%;
}
}
@media only screen and (min-width:701px) and (max-width:1280px){
  .parallax-bg {/*display:noneパララックスをなくす*/
    display: none;
  }
  .info_bg{/*スマホ用写真*/
    display: flex;
    background-size: cover;
    width:100%;
    height:450px;
    margin-bottom:5px;
  }
  .info_bg p{/*スマホ用文字の設定*/
    color:white;
    font-size:7vw;
    font-weight: bold;
    text-shadow: 4px 4px 4px silver;/*影の右への長さ,影の下への長さ,影のボケ具合,影の色*/
    font-family: 'Sawarabi Mincho','Arial','Yu Gothic';
    padding-bottom: 300px;
    position: relative;
    left: 30px;
    top:  70px;
  }
  /*うさぎや本店*/
  .ph-bg-01{background-image: url('../images/honten_img/honten_gallery01.jpg');}
  .ph-bg-02 {background-image: url('../images/honten_img/honten_gallery02.jpg');}
  .ph-bg-03 {background-image: url('../images/honten_img/honten_gallery03.jpg');}
  .ph-bg-04 {background-image: url('../images/honten_img/honten_gallery04.jpg');}
  .ph-bg-05 {background-image: url('../images/honten_img/honten_gallery05.jpg');}
  /*うさぎや新館*/
  .ph-bg-11{background-image: url('../images/shinkan_img/shinkan_gallery01.jpg');}
  .ph-bg-12 {background-image: url('../images/shinkan_img/shinkan_gallery02.jpg');}
  .ph-bg-13 {background-image: url('../images/shinkan_img/shinkan_gallery03.jpg');}
  .ph-bg-14 {background-image: url('../images/shinkan_img/shinkan_gallery04.jpg');}
  .ph-bg-15 {background-image: url('../images/shinkan_img/shinkan_gallery05.jpg');}
  /*一魚一会*/
  .ph-bg-21{background-image: url('../images/ichigyo_img/ichigyo_gallery01.jpg');}
  .ph-bg-22 {background-image: url('../images/ichigyo_img/ichigyo_gallery02.jpg');}
  .ph-bg-23 {background-image: url('../images/ichigyo_img/ichigyo_gallery03.jpg');}
  .ph-bg-24 {background-image: url('../images/ichigyo_img/ichigyo_gallery04.jpg');}
  .ph-bg-25 {background-image: url('../images/ichigyo_img/ichigyo_gallery05.jpg');}
  /*波のうえ*/
  .ph-bg-31{background-image: url('../images/naminoue_img/naminoue_gallery01.jpg');}
  .ph-bg-32 {background-image: url('../images/naminoue_img/naminoue_gallery02.jpg');}
  .ph-bg-33 {background-image: url('../images/naminoue_img/naminoue_gallery03.jpg');}
  .ph-bg-34 {background-image: url('../images/naminoue_img/naminoue_gallery04.jpg');}
  .ph-bg-35 {background-image: url('../images/naminoue_img/naminoue_gallery05.jpg');}

}