@charset "utf-8";


html{
  font-size: 62.5%;
  letter-spacing:0.2em;
  scroll-behavior: smooth;
}

body{
  font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
  color:#f2f2f2;
  background:#090d11;
  z-index:-1;
  position: relative;
}

a{
  transition : all 0.5s ease 0s;
}

a:hover{
  opacity:0.8;
}

a[target="_blank"]:after {
  content: "";
  background: url(../img/icon_blank.png) no-repeat;
  background-size: 18px 18px;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

._mt-40{
  margin-top:40px;
}

@media (max-width: 767px){
  .pc-br{
    display: none;
  }
}

.vegas-animation-kenburnsRight {
  animation: kenburnsRight ease-out;
}

@keyframes kenburnsRight {
  0% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

#slider{
  height:100vh;
  z-index:-1000;
  position: relative;
}
.vegas-timer{
  display: none;
}

.navigation {   
  z-index: 7;
  left: 30px;
  background-image: url(../img/sidemenu_bg.jpg);
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 180px;
  height: 100%;
}

.navigation .site-index--list{
  margin-bottom:30px;
}
.navigation .site-index--list li {
  margin-top:20px;
}
.navigation .site-index--list a {
  color: #090d11;
  font-weight:bold;
  display: block;
  padding: 0.5em 0.6em;
  letter-spacing: 0.1em;
  font-size:1.34rem;
  margin-top:20px!important;
  position:relative;
}
.navigation .site-index--list a span.en{
  font-size:10px;
  display: inline-block;
  width:120px;
}

.navigation .site-index--list a:hover{
   color:#8c6e53;
  }

a.side-blank::after{
  content: "";
  background: url(../img/icon_blank_black.png) no-repeat;
  background-size: 18px 18px;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  position: absolute;
  top:5px;
  transition : all 0.5s ease 0s;
}
a.side-blank:hover::after{
  content: "";
  background: url(../img/icon_blank_gold.png) no-repeat;
  background-size: 18px 18px;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  position: absolute;
  top:5px;
}

.navigation .site-index--list a.current{
  color:#8c6e53;
}
.navigation .site-index--list a.current:before{
  position: absolute;
  top: 50%;
  right: -20px;
  width: 27px;
  height: 1px;
  background-color: #8c6e53;
  content: '';
  animation-name:fadeLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.navigation .site-index--list a.current a:after {
  position: absolute;
  top: 50%;
  left: -35px;
  width: 10px;
  height: 10px;
  background-image: url(../../img/bage_color.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.nav_btn{
  display: none;
}

@media (max-width: 767px){
  .navigation {
    z-index: 7;
    left: 30px;
    background:#000;
    display:inherit;
    align-items: center;
    position:static;
    width: 180px;
    height: 100%;
  }
  .navigation {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }

  .site-index{
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%); 
    background-color: #fff; 
    transition: ease .4s;
    z-index:100;
  }
  .site-index--list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    width:100%;
  }

  .navigation .site-index--list a{
    color: #000;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 24px;
  }
  .navigation .site-index--list a span.en{
    width:130px;
  }
  .navigation .site-index--list a.current:before{
    display: none;
  }
  .nav_btn {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 44px;
    padding:10px;
    background-color: rgba(0,0,0,.9);
    text-align: center;
    border-color: transparent;
    z-index: 9999;
  }
  .nav_btn span{
    height: 1px;
    background-color: #fff;
    position: relative;
    transition: ease .4s;
    display: block;
  }
  .nav_btn span:nth-child(1) {
    top: 0;
  }
  .nav_btn span:nth-child(2) {
    margin: 8px 0;
  }
  .nav_btn span:nth-child(3) {
    top: 0;
  }
  .site-index.active {
    transform: translateX(0);
    z-index: 1;
  }
  .nav_btn.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
  }
  .nav_btn.active span:nth-child(2) {
    opacity: 0;
  }
  .nav_btn.active span:nth-child(3) {
    top: -13px;
    transform: rotate(-45deg);
  }
}

.logo img{
  height:180px;
  margin-top:20px;
}
@media (max-width: 767px){
  .logo img{
    display: none;
  }
}

footer{
  padding-left:210px;
  position: relative;
}

footer p.copyright{
  text-align:center;
  font-size:0.8rem;
  padding-bottom:20px;
  color:#898989;
  pposition: absolute;
  bottom:10px;
  left:210px;
  right:0;
}

@media (max-width: 767px){
  footer{
    padding:30px 0 0;
  }
  footer p.copyright{
    position: static;
  }
}
/*************************************
トップページ
*************************************/
.main-logo{
  width:44vw;
  height:auto;
  margin:20px auto 0;
  padding-left: 210px;
}


.enter-button{
  text-align:center;
  position: absolute;
  left:50%;
  animation: arrowmove 2s ease-in-out infinite;
  bottom:5%;
  padding-left:60px;
}
@keyframes arrowmove{
      0%{bottom:10%;}
      50%{bottom:11.2%;}
     100%{bottom:10%;}
 }

.enter-button button a{
  color:#f2f2f2;
  letter-spacing: 0.2em;
  display: block;
  z-index:100;
}
.enter-button button a span{
  position: absolute;
  left:43px;
  bottom:10px;
  color: #eee;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.enter-button button a:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}

.enter-button button a:after{
  content:"";
  position: absolute;
  bottom:0;
  right:0;
  width:1px;
  height: 50px;
  background:#eee;
}

@media (max-width: 767px){
  .main-logo{
    width: 80vw;
    margin-top:100px;
    padding-left:0;
  }
  .enter-button{
    padding-left:0;
  }
  .enter-button button a span{
    left:-20px;
  }
}

/*************************************
ABOUT 御料理そごうについて
*************************************/
#about-bg{
  background:url(../img/about_bg.jpg);
  background-size:cover;
  height:100%; 
}
main{
  height:100%;
  padding-left:210px;
  padding-top:80px;
  padding-bottom:100px;
}
@media (max-width: 767px){
  #about-bg{
    background:no-repeat url(../img/sp_about_bg.jpg);
  }
  main{
    padding: 0 10px;
    margin-top:100px;
  }
}

.title{
  font-size:2.2rem;
  font-weight:bold;
  text-align:center;
  position: relative;
  letter-spacing:0.4em;
}
.title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4rem;
  width: 1px;
  height: 80px;
  margin: auto;
  background-color: #505050;
  animation-name:fadeLineAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeLineAnime{
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-inner{
  margin:120px auto  0;
  display: flex;
  justify-content: center;
}
.about-left{
  width:490px;
}
.about-text{
  padding-left:40px;
  font-size:1.4rem;
  line-height:2.8rem;
}

@media (max-width: 767px){
  .about-inner{
    display: block;
  }
  .about-left{
    width:100%;
  }
  .about-text{
    padding-left:0;
    width:90%;
    margin:10px auto;
  }
  }
  .about-owner{
    display: flex;
    justify-content:center;
    margin-top:80px;
  }
  .about-owner-text{
    padding:3rem 0 0 3rem;
 }
  .about-owner-text dl dt{
    font-size:1.4rem;
  }
  .about-owner-text dl dd{
    font-size:1.8rem;
    margin:28px 0;
  }
  .about-owner-text p{
    font-size:1.4rem;
    line-height: 2.8rem;
  }
  .about-owner-pic{
    width:280px;
    margin-left:40px;
  }

@media (max-width: 767px){
  .about-owner{
    display: block;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    
  }
  .about-owner-text{
    padding: 30px 0 0;
    margin-left:5%;
  }
  .about-owner-pic{
    margin-left:0;
    width:220px;
    position: absolute;
    bottom:30px;
    right: 0;;
  }
}

/************************************
MENU お品書き
*************************************/
#menu-bg{
  background:no-repeat url(../img/menu_bg.jpg);
  background-size:cover;
  height:100%;  
}
@media (max-width: 767px){
  #menu-bg{
    background:no-repeat url(../img/sp_menu_bg.jpg);
    background-position:right top;
    background-size:auto;
  }
}

.slide-items {
  width: 100%;
  height: 100%;
  margin:20px 0;
}
.slide-items img {
  width: 100%;
  object-fit: cover;
}
.slick-arrow{
 display: none!important;
}
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '■';
  text-align: center;
  opacity: .2;
  color: #8c6e53;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before{
  opacity: .6;
  color: #8c6e53;
}
.menu-inner{
  width:500px;
  margin:120px auto 0;
}

@media (max-width: 767px){
  .menu-inner{
    width:100%;
  }
}
.menu-inner p{
  text-align:center;
  font-size: 1.4rem;
  line-height: 2.8rem
}
.menu-inner p.menu-title{
  font-size:1.8rem;
  margin-bottom:1.6rem;
  font-weight:bold;
}
.menu-inner p.menu-price{
  font-size:2.6rem;
  margin-bottom:0.6rem;
  font-weight:bold;
}
.menu-inner p.menu-coution1{
  font-size:1.4rem;
  margin-bottom:1.8rem;
}
.menu-inner p.menu-coution2{
  font-size:1.2rem;
  text-align:left;
  line-height:1.6rem;
}
/*reservation ご予約について*/
#reservation-bg{
  background:no-repeat url(../img/reservation_bg.jpg);
  background-size:cover;
  height:100%; 
}
@media (max-width: 767px){
  #reservation-bg{
    background:no-repeat url(../img/sp_reservation_bg.jpg);
    background-size:auto;
    background-position:right top;
  }
}

.reservation-inner{
  width:1000px;
  margin:120px auto 0;
  font-size:1.4rem;
}
.reservation-text{
  width:500px;
  margin:0 auto;
}

@media (max-width: 767px){
  .reservation-inner{
    width:100%;
  }
  .reservation-text{
    width:100%;
  }
}

.reservation-text .guide{
  text-align:center;
}
.reservation-text .tel{
  text-align: center;
  margin:20px 0;
}
.reservation-text .tel a{
  padding:10px 40px;
  font-size:2.6rem;
  display: inline-block;
  border:1px solid #f2f2f2;
  box-sizing:border-box;
}
.reservation-text .coution3{
  text-align:center;
  margin-bottom:20px;
}
.reservation-text .coution-ul{
  margin:40px 0;
}
.reservation-text .coution-ul li span{
  position:relative;
  padding-left:20px;
  margin-bottom:20px;
  display: block;
}
.reservation-text .coution-ul li span:before{
  content: '';
  position: absolute;
  top: 50%;
  left:0;
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: #f2f2f2;
}
.reservation-text .coution-ul li p{
  margin: -10px 0 0 50px;
  line-height:2.4rem;
}

@media (max-width: 767px){
  .reservation-text .coution-ul li p{
    font-size:1.2rem;
    margin-left:20px;
    line-height:1.4em;
  }
}

.reservation-text .coution-ul li dl{
  margin:20px 0 10px 50px;
}
.reservation-text .coution-ul li dl dt{
  float:left;
  clear:left;
  width:7em;
  margin-bottom:1em;
}
.reservation-text .coution-ul li dl dd{
  margin-bottom:1em;
}
.reservation-seats{
  margin:60px 0;
}
.reservation-seats .colm-3{
  display: flex;
  justify-content:space-between;  
}
.reservation-seats .colm-3 li{
  width:300px;
}

@media (max-width: 767px){
  .reservation-seats .colm-3{
    display: block;
  }
  .reservation-seats .colm-3 li{
    width:80%;
    margin:0 auto 40px;
  }
}

.reservation-seats .colm-3 li h3{
  text-align:center;
  margin-bottom:10px;
  font-size:1.6rem;
  font-weight:bold;
}
.reservation-seats .colm-3 li p{
  margin-top:10px;
  line-height:1.8rem;
  font-size:1.2rem;
}

/*************************************
access アクセス
**************************************/
#access-bg{
  background:no-repeat url(../img/access_bg.jpg);
  background-size:cover;
  height:100%; 
}
@media (max-width: 767px){
  #access-bg{
    background:no-repeat url(../img/sp_access_bg.jpg);
    background-size:auto;
    background-position:right top;
  }
}
.access-inner{
  width:1000px;
  margin:120px auto 0;
  font-size:1.4rem;
}
.access-inner table{
  width:500px;
  margin:0 auto;
}
.access-inner table th{
  width:8em;
}
.access-inner table td {
  padding-bottom:20px;
  line-height:2rem;
}
@media (max-width: 767px){
  .access-inner{
    width:100%;
  }
  .access-inner table{
    width:80%;
  }
  .access-inner table th{
    width:7em;
  }
}
  
.access-map{
  margin-top:40px;
}
.maplink{
  text-align:center;
  margin-top:40px;
}
.maplink button a{
  padding:10px 30px;
  border:1px solid #f2f2f2;
}

/*************************************
hometowntax ふるさと納税について
*************************************/
#hometowntax-bg{
  background: no-repeat url(../img/hometowntax_bg.jpg);
  background-size:cover;
  height:100%; 
}
@media (max-width: 767px){
  #hometowntax-bg{
    background:no-repeat url(../img/sp_hometowntax_bg.jpg);
    background-size:100%;
    background-position:right top;
   }
}

.hometowntax-inner{
  width:600px;
  margin:120px auto 0;
  font-size:1.4rem;
  line-height:2.6rem;
  height:70vh
}
.hometowntax-inner p{
  text-align:center;
}
@media (max-width: 767px){
  .hometowntax-inner{
    width:100%;
  }
  .hometowntax-inner p{
    text-align:left;
    width:90%;
    margin:0 auto;
  }
}
.hometowntax-link{
  margin:40px  auto;
  display: inline-block;
  position: absolute;
  transform: translateX(100%);
}
@media (max-width: 767px){
  .hometowntax-link{
    transform:none;
    width:210px;
    left:0;
    right:0;
  }
}

.hometowntax-link ul li{
  display: block;
  box-sizing: border-box;
  margin-bottom:20px;
}
.hometowntax-link ul li a{
  display:inline-block;
  font-size:1.7rem;
}
.inview {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 2s, opacity 2s;
}
.inview.view {
  transform: translateY(0);
  opacity: 1;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
  #menu-bg{
    background-position:right top;
    background-size:100%;
  }
  #reservation-bg{
    background-size:100%;
    background-position:right top;
}
  #access-bg{
    background-size:100%;
    background-position:right top;
  }
  .reservation-inner {
    width:600px;
  }
  .access-inner {
    width:600px
  }
  .reservation-seats .colm-3 li{
    width:180px;
  }
  .main-logo{
    width:70vw;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {

  .main-logo{
    width:20vw;
  }
.pc-br{
    display: none;
  }

.navigation {
    z-index: 7;
    left: 30px;
    background:#000;
    display:inherit;
    align-items: center;
    position:static;
    width: 180px;
    height: 100%;
  }
  .navigation {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }

  .site-index{
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%); 
    background-color: #fff; 
    transition: ease .4s;
    z-index:100;
  }
  .site-index--list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    width:100%;
  }

  .navigation .site-index--list a{
    color: #000;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 24px;
  }
  .navigation .site-index--list a.current:before{
    display: none;
  }
  .nav_btn {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 44px;
    padding:10px;
    background-color: rgba(0,0,0,.9);
    text-align: center;
    border-color: transparent;
    z-index: 9999;
  }
  .nav_btn span{
    height: 1px;
    background-color: #fff;
    position: relative;
    transition: ease .4s;
    display: block;
  }
  .nav_btn span:nth-child(1) {
    top: 0;
  }
  .nav_btn span:nth-child(2) {
    margin: 8px 0;
  }
  .nav_btn span:nth-child(3) {
    top: 0;
  }
  .site-index.active {
    transform: translateX(0);
    z-index: 1;
  }
  .nav_btn.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
  }
  .nav_btn.active span:nth-child(2) {
    opacity: 0;
  }
  .nav_btn.active span:nth-child(3) {
    top: -13px;
    transform: rotate(-45deg);
  }
.logo img{
    display: none;
  }

footer{
    padding:30px 0 0;
  }
  footer p.copyright{
    position: static;
  }
.main-logo{
    width: 80vw;
    margin-top:100px;
    padding-left:0;
  }
  .enter-button{
    padding-left:0;
  }
  .enter-button button a span{
    left:-20px;
  }

 #about-bg{
    background:no-repeat url(../img/about_bg.jpg);
   background-size:100%;
   background-position:top;
  }
  main{
    padding: 0 10px;
    margin-top:100px;
  }

.about-inner{
    display: block;
  }
  .about-left{
    width:100%;
  }
  .about-text{
    padding-left:0;
    width:90%;
    margin:10px auto;
  }
.about-owner{
    display: block;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    
  }
  .about-owner-text{
    padding: 30px 0 0;
    margin-left:5%;
  }
  .about-owner-pic{
    margin-left:0;
    width:220px;
    position: absolute;
    bottom:30px;
    right: 0;;
  }
#menu-bg{
    background:no-repeat url(../img/sp_menu_bg.jpg);
    background-position:right top;
    background-size:auto
  }

.menu-inner{
    width:100%;
  }
#reservation-bg{
    background:no-repeat url(../img/sp_reservation_bg.jpg);
    background-size:auto;
    background-position:right top;
}

.reservation-inner{
    width:100%;
  }
  .reservation-text{
    width:100%;
  }

.reservation-text .coution-ul li p{
    font-size:1.2rem;
    margin-left:20px;
    line-height:1.4em;
  }
.reservation-seats .colm-3{
    display: block;
  }
  .reservation-seats .colm-3 li{
    width:80%;
    margin:0 auto 40px;
  }
#access-bg{
    background:no-repeat url(../img/sp_access_bg.jpg);
    background-size:auto;
    background-position:right top;
  }
.access-inner{
    width:100%;
  }
  .access-inner table{
    width:80%;
  }
  .access-inner table th{
    width:7em;
  }
#hometowntax-bg{
    background:no-repeat url(../img/sp_hometowntax_bg.jpg);
    background-size:100%;
    background-position:right top;
   }
.hometowntax-inner{
    width:100%;
  }
  .hometowntax-inner p{
    text-align:left;
    width:90%;
    margin:0 auto;
  }
.hometowntax-link{
    transform:none;
    width:210px;
    left:0;
    right:0;
  }


}