@charset "UTF-8";
body{
  width: 100%;
}
img{
  max-width: 100%;
}
.site-header{
  display: block;/*縦並び*/
  width: 100%;/*幅画面に一杯*/
  position: fixed;/*上の表面場所に固定*/
  background: rgba(255,255,255,0.8);/*後の色*/
  padding 20px;/*四方の余白20px*/
  transition: .5s;/*0.5秒掛けて行う*/
  
  height: 110px;
  z-index: 999;
}
.site-header.hide{/*script.js用に*/
  transform: translateY(-100%);/*上に100％消える*/}
#top-nav{
  display: flex;
}
#top-logo{
  position: absolute;
  left: 7.3%;
  top: 20px; 
}
#top-logo img{
  width: 100%;
}
.global-nav{
  display: flex;
  position: absolute;
  right: 7.2%;
  padding-top: 50px;
}
.global-nav li a{
  text-decoration: none;
  color: dimgray;
}
.global-nav li{
  padding-right: 30px;
}
.global-nav li:last-child{
  padding-right: 0;
}


.slider img{
  width: 100%;
}
#top-img{
}
.slider{
}

/*topに戻るボタン始まり*/
.top-btn {
    cursor: pointer;/*カーソルの画像*/
    position: fixed;/*画面固定*/
    right: 20px;/*右から*/
    bottom: 20px;/*下から*/
    background-color: rgba(182, 192, 199, 0.9);/*RGBカラーと透明度*/
    border-radius: 50%;/*角のまるみ*/
    width: 40px;/*幅*/
    height: 40px;/*高さ*/
    z-index: 20;
}
 
.top-btn span {
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #fff;
}
 
.top-btn span:first-child {
    transform: rotate(40deg);
    top: 46%;
    left: 45%;
}
 
.top-btn span:nth-child(2) {
    transform: rotate(-40deg);
    top: 46%;
    left: 17%;
}
/*topに戻るボタン終わり*/


#omakase{
  height: 800px;
  text-align: center;
}
#omakase h2{
  padding-top: 300px;
  padding-bottom: 38px;
  font-size: 24px;
}
#omakase p{
  font-size: 20px;
  line-height: 2em;
}
.st-img{/*イメージ画像*/
  /*display: block;
  width: 100%;/**/
  opacity: 0;/*画像の非表示*/
  /*position: relative;/*配置方法を相対位置に切り替え*/
  transform: translateY(50px);
  transition: all  .9s  .6s ease;/**/
  z-index: 0;/*画像深度最下位*/
}
.st-img.active{/*script.js命令active時に行う命令*/
  opacity: 1;/*画像の表示*/
  transform: translateY(0);
}


#img-form img{width: 50%;}
#img-form{
  height 800px;
}
#ig-frm1{
  padding-left: 15%;
}
#ig-frm1 img{
  width: 100%;
}

#oteire{
  height: 800px;
  text-align: center;
}
#oteire h2{
  padding-top: 300px;
  padding-bottom: 40px;
  font-size: 24px;
}
#oteire p{
  font-size: 20px;
  line-height: 2.5em;
}


#gif-frame{
  height 2000px;
  padding-left 30%;
}
#gif-frame img{
  width: 50%;
}
#gif-1{
  margin-left: 23%;
  margin-bottom: 50px;
  background-image: url(../images/push-back.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
#gif-2{
  margin-left: 30%;
  background-image: url(../images/puni-back.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  margin-bottom: 300px;
}

#ft{
  height: 268px;
  background-color: #bfeaf6;
  display: flex;
  padding-left 2.2%;
}
#ft-logo{
  width: 12.3vw;
  height: ;
  margin-top: 56px;
  margin-right: 8vw;
  margin-left: 5vw;
}

.ft-nav{
margin-left 20vw  
}
.ft-nav1{
  display: flex;
  padding-top: 94px;
  font-size: 1em;
  width: 72vw;
}
.ft-nav1 li a{
  text-decoration: none;
  color: #000/*dimgray*/;
}
.ft-nav1 li{
  padding-left: 3vw; 
  
}
.ft-nav1 li:first-child{
  padding-left: ;
}
#ft-imgbottl{
  position: absolute;
  right: 0px;
  height: 174px;
  margin-top: 92px;
}

@media (max-width: 768px) {/*幅768pxまで*/
  .slider img{
  width: 100%;
    padding-top: 130px;
}
  .site-header{
  display: block;/*縦並び*/
  width: 100%;/*幅画面に一杯*/
  position: fixed;/*上の表面場所に固定*/
  background: rgba(255,255,255,0.8);/*後の色*/
  padding 20px;/*四方の余白20px*/
  transition: .5s;/*0.5秒掛けて行う*/
  height: 130px;
  z-index: 999;
}
.site-header.hide{/*script.js用に*/
  transform: translateY(-100%);/*上に100％消える*/}
#top-nav{
  display: flex;
}
#top-logo{
  position: absolute;
  left: 7.3%;
  top: 8vw; 
  width: 20vw;
}
#top-logo img{
   width: 100%;
}
  .global-nav{
  display: flex;
  flex-direction: column;  
  position: absolute;
  right: 7.2%;
  padding-top: 10px;
}
  .global-nav li a{
  text-decoration: none;
  color: dimgray;
}
.global-nav li{
  padding-top: 10px;
  padding-right: 0px;
}
.global-nav li:last-child{
  padding-right: 0;
}
  
  #ft{
  height: 268px;
  background-color: #bfeaf6;
  display: flex;
  padding-left 2.2%;
}
#ft-logo{
  width: 12.3vw;
  height: ;
  margin-top: 56px;
  margin-right: 8vw;
  margin-left: 5vw;
}

.ft-nav{
margin-left 20vw  
}
.ft-nav1{
  display: flex;
  flex-direction: column;
  padding-top: 34px;
  font-size: 1em;
  width: 100%/*72vw*/;
}
.ft-nav1 li a{
  text-decoration: none;
  color: #000/*dimgray*/;
}
.ft-nav1 li{
  padding-left: 3vw; 
  padding-top: 12px;
  
}
.ft-nav1 li:first-child{
  padding-left: ;
}
#ft-imgbottl{
  position: absolute;
  right: 0px;
  height: 174px;
  margin-top: 85px;
}