@charset 'utf-8';

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  margin: 0 auto;
  max-width: 1366px;
  color: #1b1b1b;
  line-height: 1.7;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  background-color: #1b1b1b;
}

a {
  text-decoration: none;
  color: #1b1b1b
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*ハンバーガーメニュー非表示*/
.humMenu ul {
  display: none;
}

/*フッター固定ボタン非表示*/
.footerFloatingMenu {
  display: none;
}

/*PC固定ナビ*/
header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
  opacity: 0.9;
  box-shadow: 0px 4px 3px -3px rgba(30, 30, 80, .3);
}

nav ul {
  display: flex;
  height: 60px;
  background-color: #fff;
  font-size: 1.8rem;
  justify-content: space-around;
  align-items: center;
}

nav ul li a {
  display: block;
  padding-bottom: 5px;
}

nav ul li a:after {
  border-bottom: solid 2px #590404;
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  width: 0;
}

nav ul li a:hover::after {
  width: 100%;
}

/*
nav ul li:nth-child(5) {
  border-left: 1px solid #a3a3a3;
}
*/

nav ul li:nth-child(5) a:after {
  border-bottom: none;
}

/*オープニングシャッター*/
.shutter{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#1b1b1b;
  z-index:9999;
}

.shutter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #590404;
  width: 0;
  height: 1px;
}

.shutter {
  -webkit-animation: byeShutter 2.6s forwards;
          animation: byeShutter 2.6s forwards;
}

.shutter::before {
  -webkit-animation: shutterOpen 2.6s forwards;
          animation: shutterOpen 2.6s forwards;
}

.content {
  -webkit-animation: contentScale 2.6s forwards;
          animation: contentScale 2.6s forwards;
}

@keyframes byeShutter {
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    z-index: -1;
  }
}

@keyframes shutterOpen {
  0% {
    width: 0;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes slidePcScale {
  70% {
    -webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
            transform: perspective(800px) scale(0.9) rotateX(15deg);
  }
  100% {
    -webkit-transform: perspective(800px) scale(1) rotateX(0);
            transform: perspective(800px) scale(1) rotateX(0);
  }
}



/*PCスライド*/
.slidePc {
  position: relative;
  text-align: center;
  vertical-align: bottom;
}

.slideText {
  width: 60%;
  position: absolute;
  top: 7%;
}

h1 {
  margin-bottom: 5%;
}

.tel {
  margin-bottom: 5%;
}

.slideNav {
  margin-top: 5%;
  text-align: left;
  padding-left: 35%;
}

.slideNav a {
  color: #fff;
  font-size: 2.0rem;
}

.slideNav a:hover {
  border-bottom: 1px solid #fff;
}


/*ご挨拶*/
#greeting {
  background-image: url(../img/bg_greeting.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5%;
  text-align: center;
  margin: 10% 0;
}

h2 {
  font-size: 2.5rem;
  color: #e1cf7b;
  font-weight: bold;
  margin-bottom: 2%;
  text-align: center;
}

#greeting h2 {
  color: #590404;
}

#greeting p {
  font-size: 1.6rem;
  line-height: 2.8;
  display: inline;
}

/*すし処　すぎ田のこだわり*/
.commit,
.meal,
.course,
.drink {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 10%;
}

.commit section,
.meal .text,
.course .text,
.drink .text {
  background-image: url(../img/bg_text.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5%;
  width: 40%;
  box-sizing: border-box;
}


.commit h3 {
  font-size: 2.0rem;
  color: #e1cf7b;
  font-weight: bold;
  margin-bottom: 3%;
  text-align: center
}

.commit p,
.meal .text,
.course .text,
.drink .text {
  font-size: 1.6rem;
  color: #fff;
}

/*用途に合わせて*/
.use {
  margin-bottom: 10%;
  color: #fff;
}

.use .inner {
  display: flex;
  justify-content: space-around;
}

.use .text {
  font-size: 2.0rem;
  text-align: center;
  margin-bottom: 3%;
}

/*お品書き*/
#menu {
  margin-top: -5%;
  padding-top: 5%;
}

/*ギャラリー*/
.galleryBox {
  margin-bottom: 30%;
  padding: 0 25%;
}

.galleryImg {
  position: relative;
}

.galleryTOP {
  max-width: 100%;
  z-index: 10;
}

.photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9999;

}


/*店舗のご案内*/
footer {
  background-image: url(../img/bg_footer.jpg);
  background-repeat: no-repeat;
  padding: 3%;
  text-align: center;
}

.inner {
  width: 80%;
  margin: 0 auto;
}

#storeInfo .box {
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  margin: 3% 0 3% 0;
}

#storeInfo .box p {
  width: 40%;
  font-size: 1.6rem;
  text-align: left;
  line-height: 2.0;
}

iframe {
  width: 60%;
}

#storeInfo .text {
  font-size: 1.8rem;
  color: #590404;
  margin-top: 2%;
}

#storeInfo .telNumber {
  font-size: 2.6rem;
  font-weight: bold;
  color: #590404;
  margin-bottom: 2%;
}

#storeInfo span {
  color: #590404;
  padding-left: 1%;
}

small {
  font-size: 1.6rem;
}

/*トップへ戻るボタン*/
.pagetopBox {
  position: relative;
}

.pagetop {
  position: fixed;
  bottom: 3%;
  right: 1%;
  opacity: 0.7;
}

.pagetop p a:hover {
  opacity: 1;
}

/*メディアクエリ*/
@media (max-width:900px) {

  .slideNav li a {
    font-size: 1.6rem;
  }
}

@media (max-width:767px) {
  .slideText {
    display: none;
  }
  
  .course {
    flex-direction: column-reverse;
    align-items: center;
  }

  .commit,
  .use .inner,
  .meal,
  .course,
  .drink,
  #storeInfo .box {
    flex-wrap: wrap;
  }

  .commit,
  .use,
  #menu {
    width: 100%;
    padding: 0 5%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .commit section {
    width: 100%;
    margin-bottom: 7%;
  }

  .use {
    text-align: center;
    margin-bottom: 7%;
  }

  .meal .text {
    width: 100%;
  }

  .course .text {
    width: 100%;
  }

  .drink .text {
    width: 100%;
  }

  .galleryBox {
    padding: 0 10%;
  }
  
  #storeInfo .box p {
    width: 95%;
    margin-bottom: 3%;
  }

  iframe {
    width: 95%;
  }
  
  footer {
    padding-bottom: 10%;
  }

  /*ハンバーガーメニュー*/

  header nav {
    display: none;
  }


  .humMenu li {
    margin-left: 0;
    text-align: center;
    background-color: #1b1b1b;
    font-size: 1.8rem;
    line-height: 2.5;
  }

  .humMenu li a {
    color: #fff;
  }

  .h_btn {
    /*ボタン全体*/
    display: inline-block;
    /*幅と高さを指定するため*/
    width: 30px;
    height: 23px;
    position: absolute;
    top: 18px;
    left: 20px;
    cursor: pointer;
    z-index: 1;
  }

  .h_btn span {
    position: absolute;
    width: 100%;
    /*横棒の幅*/
    height: 3px;
    /*横棒の高さ*/
    background-color: #e1cf7b;
    /*横棒の色*/
    border-radius: 2px;
    transition: .6s;
  }

  /*クリック前*/
  .h_btn span:nth-child(1) {
    top: 0;
  }

  .h_btn span:nth-child(2) {
    top: 10px;
  }

  .h_btn span:nth-child(3) {
    bottom: 0;
  }

  /*クリック後*/
  .h_btn.active span:nth-child(1) {
    transform: translateY(10px) rotate(-405deg);
  }

  .h_btn.active span:nth-child(2) {
    opacity: 0;
  }

  .h_btn.active span:nth-child(3) {
    transform: translateY(-10px) rotate(405deg);
  }

  /*フッター固定ボタン*/
  .footerFloatingMenu {
    display: flex;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    text-align: center;
    padding: 0 auto;
    opacity: 0.8;
  }

  .footerFloatingMenu p {
    width: 50%;
    opacity: 0.9;
  }

  /*トップへ戻るボタン*/
.pagetopBox {
  position: relative;
}

.pagetop {
  position: fixed;
  bottom: 12%;
    right: 5%;
}


}