@charset "utf-8";

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

  body {
    font-family:"UD デジタル 教科書体 NP-R",YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
  }

  img {
    display: block;
    /* スマホCSSのみ↓↓ */
    width: 100%;
    height: auto;
  }

  a {
    text-decoration: none;
  }

  li {
    list-style-type: none;
  }
 

@media screen and (max-width: 767px) {

  /* パソコンだけ表示のもを消す */
  .pc{
    display: none;
  }

  p{
  color: #483131;
  }

#header{
  padding: 15px 15px;
  background-color:#e8e6e6 ;
  /* 背景色反映のため */
  overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 100;
}

h1 img{
  width: 40%;
  float: left;
}

/* ハンバーガーメニュー */
#ham{
  /* spanを動かすエリアの設定 */
  position: relative;
  width: 30px;
  height: 30px;
  float: right;
  padding-top: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
  /* ハンバーガーメニューのリストよりさらに上の値をかく */
  z-index: 10000;
}

#ham span{
  /* spanがインライン要素なのでそのままだと幅や高さが設定できない */
  display: block;
  width: 100%;
  height: 3px;
  background-color: #483131;
  /* 後で自由に動けるように */
  position: absolute;
  left: 0px;
  /* ゆっくり動くopenのときもcloseのときも */
  transition: 0.5s;
}

#ham span:nth-child(1){
  top: 5px;
}

#ham span:nth-child(2){
  top: 15px;
}

#ham span:nth-child(3){
  top: 25px;
}

/* 全画面表示の設定 */
#hamnav nav{
  position: fixed;
  left: 0;
  background-color: #e8e6e6;
  width: 100%;
  /* 縦の％はｖｈで調整。100ｖｈ＝100％ */
  height: 60vh;
  top:0;
  /* openする前は上で待機 */
  transform: translateY(-100vh);
  transition: 0.5s;
  /* z方向へ（桁を変えて違いを出す） */
  z-index: 1000;
}
.open #hamnav nav{
  /* openしたとき降ってくる */
  transform: translateY(0vh);
}

#hamnav ul{
  width: 40%;
  margin: auto;
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%; */
}

#hamnav ul li{
  padding-top: 8vh;
}
.open #ham span:nth-child(1){
  transform: rotate(45deg);
  top: 8px;
}
.open #ham span:nth-child(2){
  /* 透明にする */
  opacity: 0;
}
.open #ham span:nth-child(3){
  transform: rotate(-45deg);
  top: 8px;
}

main {
  clear: both;
  margin-top: 60px;
}

#top{
 width: 100%;
  }

 #gasuke img{
  width: 17%;
  margin: auto;
 }

 #about-l{
  height: 200px;
  background-image: url(../../images/flagpc/top/about.jpg);
  background-position: center center;
  /* 縦横比を保ったまま要素全体に収まる */
  background-size: cover;
  margin: 2vh 0;
}
#about-r{
  text-align: center;
}
#about-r img{
  width: 30%;
  /* 画像を真ん中に */
  margin: auto;
}
#copy1{
  font-size: 24px;
  margin: 3vh auto;
  font-size: 3vw;
}
#ver1{
  font-size: 16px;
  font-size: 2.1vw;
  margin: 4vh auto;

}
#button1{
  margin: 2vh auto;
}

#button1 a {
    display: flex;
    position: relative;
    justify-content: space-around;
    width: 70%;
    /* ボタンの高さを調整 */
    padding: 9px ;
    color:#fff;
    /* 文字の太さ */
    font-weight: 500;
    background: #e72916;
    border-radius: 50px;
    box-shadow: 0.1rem 0.1rem 0px 0.1rem #9b9999;
    /* 位置を真ん中に */
    margin: auto;
  }

/* ＞ */
#button1 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    /* topから何パーセントの位置か */
    top: 50%;
    right: 20px;
    border-radius: 1px;
}
#animal{
  clear: both;
  display: flex;
  justify-content: center;
  text-align: center;
}

#animal-l{
  width: 30%;
}
#animal-l img{
  width: 50%;
  margin: 6vh;
  margin-left: auto;
  margin-right: auto;
}
#animal-c{
  width: 40%;
}
#animal-c img{
  margin-top: 5vh;
  width: 95%;
}
#copy2{
  font-size: 20px;
  margin: 3vh auto;
  font-size: 2.5vw;
}
#ver2{
  font-size: 14px;
  font-size: 2.1vw;
}
#animal-r{
  width: 30%;
}
#animal-r img{
  width: 70%;
  margin: 6vh;
  margin-left: auto;
  margin-right: auto;
}

#button2 a {
    display: flex;
    position: relative;
    justify-content: space-around;
    width: 70%;
    /* ボタンの高さを調整 */
    padding: 9px ;
    color: #fff;
    /* 文字の太さ */
    font-weight: 500;
    background: #e72916;
    border-radius: 50px;
    box-shadow: 0.1rem 0.1rem 0px 0.1rem #9b9999;
    /* 位置を真ん中に */
    margin: auto;
  }

/* ＞ */
#button2 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    /* topから何パーセントの位置か */
    top: 50%;
    right: 20px;
    border-radius: 1px;
}

#access{
  margin-top: 8vh;
}

#access-sp{
  display: flex;
  text-align: center;

} 
#access-l{
  width: 73%;
  font-size: 2.8vw;
}
#address{
  margin-bottom: 2vh;
}

#access-l img{
  margin: 0 auto 3vh auto;
  width: 57%;
}
#asiato-l{
  margin: 11vh 2px 0 0;
}
#asiato-r{
  margin: 0 2px 0 0;
}

#access-r{
  clear: both;
  width: 100%;
  height: 40vh;
  margin: 3vh auto ;
  background-image: url(../../images/flagpc/top/access.jpg);
  background-position: center center;
  /* 縦横比を保ったまま要素全体に収まる */
  background-size: cover;
}

#access-bottom{
  margin: 6vh auto;
  font-size: 3vw;
}
#access-bottom iframe{
  width: 100%;
  height: 50vh;
}

footer{
  background-color: #e8e6e6;
    /* 背景色を反映させるため親要素にoverflow: hidden;つける */
    /* overflow: hidden; */
  display: flex;
  position: relative;
  padding: 30px;
}
#fnav{
  width: 35%;
}

#fnav ul{
  display: flex;
  font-size: 1.4vw;
  /* ナビ内を均等配置 */
  justify-content: space-between;
}
.line{
  border-right: 1px solid #483131;
}

#fnav ul a{
  color:#483131;
}
#footer-c{
  width: 30%;
}
#footer-r{
  /* 全体の〇％を画像の幅にする */
  width: 10%;
  /* 右下に配置　*/
  position: absolute;
  right: 20px;
  bottom: 20px;
}
#footer-r img{
  width: 100%;
}
#copyright{
  /* 左下に配置 */
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 0.3rem;
  color: #483131;
}

/* お店のこと */
#about-main{
  background-color: #e8e6e6;
}
#a-top-back{
  /* 画像を置く範囲 */
  width: 80%;
  margin: 7vh auto 0 auto ;
  background-image: url(../../images/flagpc/about/hata.png);
  background-position: center center;
  /* 縦横比を保ったまま大きさを変える */
  background-size: 80%;
   /* 画像の繰り返しを止める */
  background-repeat: no-repeat; 
}
#a-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 10vh 0;
  }

#a-top h2{
  width: 50%;
  font-size: 2.8vw;
  color: #483131;
  line-height: 1.8;
}
#a-top-r{
  width: 50%;
}
#a-top-r img{
  width: 80%;
}
#a-01{
  clear: both;
  margin-top: 20px;
  margin-bottom: 10vh;
}

#a-01-l{
  width: 100%;
  height: 250px;
  background-image: url(../../images/flagpc/about/omise.jpg);
  background-position: center center;
  /* 縦横比を保ったまま要素全体に収まる */
  background-size: cover;
  left: auto;
  margin-bottom: 4vh;
}
#a-01-r{
  margin:auto;
  width: 50%;
  /* height: 50px; */
}

#a-ver1{
  margin: 4vh auto;
  font-size: 4vw;
  text-align: center;
}

#a-02{
  clear: both;
  margin-top: 10vh;
  width: 100%;
  text-align: center;

}
#a-02-l{
  width: 50%;
  margin: auto;
}

#a-ver2-1{
  margin-top: 6vh;
  font-size: 2.6vw;
}

#a-ver2-2 {
  border: 1px solid #483131; 
  padding: 5px;             
  margin-top: 30px;         
  width: 109%;                
  box-sizing: border-box;   
}

#a-ver2-2 p {
  margin: 5px 0;             
  font-size: 1.9vw;           
  color: #483131;            
  line-height: 1.6;          
}

#a-03{
  margin-top: 10vh;
  padding-bottom: 5vh;

}

#a-03-l{
  width: 100%;
  height: 250px;
  background-image: url(../../images/flagpc/about/omise2.jpg);
  background-position: center center;
  /* 縦横比を保ったまま要素全体に収まる */
  background-size: cover;
  left: auto;
  margin-bottom: 4vh;
}
#a-03-r{
  margin:auto;
  width: 50%;
}

#a-ver3{
  margin: 4vh auto;
  font-size: 3.5vw;
  text-align: center;
}

#a-footer{
  clear: both;
  background-color: #fff;
}

/* どうぶつスタッフ */

#ani-header {
    padding: 15px 15px;
    background-color:#fff ;
    /* 背景色を反映させるため親要素にoverflow: hidden;つける */
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

}