@charset "UTF-8";

/* GLOBAL
----------------------*/

body {
    font-family: "Noto Sans JP";
    position: relative;
}

img {
  max-width: 100%;
  height: auto;
}
a {
    color: #C7000A;
    transition:.3s;
}
a:hover,
a:focus,
a h3:hover,
a h3:focus
{
    color: #C7000A;
}


small a{
  color: #222222;
}

small, .small{
  font-size: 90%;
}

h1 {
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 4rem;
    margin-top: 4rem;
    line-height: 1.3;
}

h2 {
    position: relative;
    font-size: 32px;
    font-weight: 900;
    color: #222222;
    letter-spacing: 2px;
    margin-bottom: 1.8rem;
    border-bottom: 5px solid #e2e2e2;
    padding-bottom: 24px;
}

h2:after{
    position: absolute;
    content: " ";
    border-bottom: solid 5px #C7000A;
    bottom: -4px;
    width:10%;
    display: block;
}

h3 {
    color: #222222;
    font-size: 28px;
    font-weight: 900;
}

h4 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
}

h5 {
    font-size: 28px;
    font-weight: 300;
    color: #222222;
    margin-bottom: 0.7rem;
}

p {
    color: #222222;
}

p.lead {
    color: #222222;
    margin-bottom: 2rem;
    margin-top: 4rem;
    line-height: 1.6;
}

b, strong{
  font-weight: bold;
}

.curry {
  background: #C7000A;
  border-radius: 20px;
  color: #fff;
  padding: 5px 20px;
}

.light-bg {
    background-color: #faf6fb;
}

.section {
    padding:35px 0;
}

.sp{
  display: none;
}

@media (max-width:991px){
  h1{
    font-size: 45px;
  }
  h3{
    font-size: 25px;
  }
  .sp_919{
    display: block;
  }
  h2:after{
    width: 28%;
  }
}
@media (max-width:767px) {
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 30px;
    }
    .sp{
        display: block;
    }
    .pc{
      display: none;
    }
}
@media (max-width:600px) {
    .section {
      padding:20px 0;
    }

  h1 {
        font-size: 35px;
    }
  h2 {
        font-size: 25px;
    }
  h3 {
        font-size: 23px;
    }
    p.lead{
      font-size: 1.1rem;
    }

}



/* NAVBAR
----------------------*/

.nav-menu {
    padding: 1rem 0;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.8);
}

.nav-menu.is-scrolling,
.nav-menu.menu-is-open {
}

.nav-menu.is-scrolling {
    padding: 0;
}

.navbar-nav .nav-link {
    position: relative;
}

.nav-menu .navbar-nav{
  width: 100%;

}

.nav-menu .navbar-nav li{
  width: 25%;
  border-left:1px solid rgba(34,34,34,0.5);
}

.nav-menu .navbar-nav li:last-child{
  border-right:1px solid rgba(34,34,34,0.5);
}

#gnb-menu.m_fixed {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

#dwr-menu{
  display: none;
}

#dwr-menu li:first-child{
  padding: .5rem;
  font-weight: bold;
}

#dwr-menu .drawer-toggle.drawer-hamburger{
  outline: none;
  background: #FFF958;
}

#dwr-menu .drawer-hamburger-icon,
#dwr-menu .drawer-hamburger-icon:after,
#dwr-menu .drawer-hamburger-icon:before{
  background-color: #C7000A;
}
.drawer-open #dwr-menu .drawer-hamburger-icon {
    background-color: transparent !important;
}
.drawer--right.drawer-open .drawer-hamburger {
    right: calc(16.25rem - 10px);
}

.drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger{
    right:-10px;
}
.nav-item .active, .nav-item .current {
    background: #FFF958;
    border-radius: 5px;
    color: rgba(0,0,0,.9) !important;
  }
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        margin-right: 1rem;
        margin-left: 1rem;
        font-size: 16px;
    }
}

@media (max-width:991px) {

  #gnb-menu{
    display: none;
  }
  #dwr-menu{
    display: block;
  }
  #dwr-menu .active{
    background: #FFF958;
  }

}

/* Scroll
----------------------*/
.scroll_btn_area{
  display: none;
  position: absolute;
  top: 85vh;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
@media (max-width:1024px) {
  .scroll_btn_area{
    display: block;
  }
}
a.scroll_btn {
  padding-top: 70px;
  position: relative;
  color:white;
  text-decoration: none;
}
a.scroll_btn span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
/* HERO
----------------------*/

header {
    text-align: center;
    color: #FFF;
    height: calc(100vh - 85px);
    position: relative;
    overflow: hidden;
}

#home .mainbg{
  position: absolute;
  height: calc(100vh - 85px);
  width: 100%;
  background:url('../images/top-image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: all 0.3s ease-out;
  will-change: transform;
}

#home .mainbg.scrolling{
  transform: scale(1.1,1.1);
}

#home .logo img{
  width: 300px;
}

#home .logo{
  position: absolute;
	pointer-events: none;
	width: 100%;
  height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20pt;
	color: #fff;
	z-index:1;
}

#sub{
  background-repeat: no-repeat !important;
  background-size: cover !important;
  padding: 0 !important;
  background-attachment: fixed !important;
  background-position: center !important;
}
#sub.kodawari{
    background:url('../images/header01.jpg');
}

#sub.oshinagaki{
    background:url('../images/header02.jpg');
}

#sub.store{
    background:url('../images/header03.jpg');
}

#sub .container {
    position: relative;
    height: calc(100vh - 85px);
}

#sub .container  img{
    position: absolute;
    bottom: 0;
    right: 0;
}

.head-logo {
  width: 200px;
}

.no-gutters img{
  width: 100%;
}

#commitment .d-sm-flex div{
  width: calc( 100%/2 - 10px);
}

#commitment .d-sm-flex div img{
  width: 100% !important;
}

#menu .d-sm-flex div{
  width: calc( 100%/3 - 10px);
}

#menu .d-sm-flex div img:hover{
  opacity: 0.5;
}
#menu .d-sm-flex div img{
  width: 100% !important;
  transition: .3s;
}

.hot div{
  display:inline-block;
  border: 5px solid #C7000A;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 2.5rem;
  color:#C7000A;
}
.hot p{
  margin-bottom: 0.3rem;
  color:#C7000A;
  font-size: 1.5rem;
  font-weight: 900;
}

.hot img{
  margin-top: 1.5rem;
  width: 700px;
}

.enkai div{
  display:inline-block;
  border: 5px solid #e25a00;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 2.5rem;
  color:#e25a00;
}
.enkai p{
  margin-bottom: 0.3rem;
  color:#e25a00;
  font-size: 1.5rem;
  font-weight: 900;
}

.enkai img{
  margin-top: 1.5rem;
  width: 700px;
}

.menu-title{
  padding: 20px 0 0;
  font-size: 1.1rem;
}

.menu-text{
  line-height: 1.8;
}
.takeout div{
  border: 5px solid #169100;
  border-radius: 15px;
  padding: 20px;
  width: 100% !important;
}

.takeout p{
  color:#169100;
  font-size: 1.3rem;
  font-weight: 900;
}

.takeout small{
  color:#169100;
  font-size: 1rem;
}

.table{
  margin-top: 3rem;
}
.table th{
  background: #FFFEDD;
  font-weight: normal;
}

.table td, .table th{
  padding: 1rem;
}
.table tr:last-child>th,
.table td:last-child{
  border-bottom: 1px solid #e9ecef;
}

@media (max-width:991px) {
  header#home{
    height: 100vh;
  }
  #home .mainbg {
      height:100vh !important;
  }
  header#sub{
    height: 55vh;
    background-attachment: scroll !important;
  }
  #sub .container{
      height: 55vh;
  }
  #sub .container img{
    bottom:0;
    right:0;
    margin:20px;
    padding:0;
  }
  .iphone.landscape #sub,
  .ipad.landscape.ipad #sub,
  .android.landscape #sub{
    height: 90vh;
    background-attachment: scroll !important;
  }
  .iphone.landscape #sub .container,
  .ipad.landscape.ipad #sub .container,
  .android.landscape #sub .container{
    height: 90vh;
  }
  .landscape.iphone #sub .container img,
  .landscape.iPad #sub .container img,
  .landscape.android #sub .container img,
  .landscape.other #sub .container img{
    bottom:0;
    right:0;
    margin:20px;
    padding:0;
  }

}

@media (max-width:1024px){
   #home .mainbg{
     background:url('../images/top-image_sp.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
   }
   .landscape #home .mainbg{
     background:url('../images/top-image.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
   }
}

@media (max-width:575px) {

  #commitment .d-sm-flex div,
  #menu .d-sm-flex div{
    width: 100%;
  }
  .head-logo {
    width: 150px;
  }
  .takeout div{
    text-align: center;
  }
}

@media (max-width:500px) {
  .table td, .table th{
    padding: 0.75rem;
  }
}

/* YOUTUBE
----------------------*/

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 60px 0;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* description
----------------------*/
#description .container{
  position: relative;
}

#description .container div{
  position: absolute;
  top: 35px;
  width: 45%;
  left: 15px;
  background: rgba(255,255,255,0.8);
  padding: 35px 20px 20px;
}
#description .container img{
  margin-bottom: 1rem;
}
#description .container div p{
  margin-top: 1rem;
}

@media (max-width:767px) {
    #description .container div {
      position: static;
      width:100%;
      background: rgba(208,208,208,0.3);
      padding: 20px 10px 10px;
    }
    #description .container div h3{
      text-align: center;
    }
    #description .container img {
      margin-bottom: 0;
    }
    #description .container div a{
      display: block;
      text-align: center;
    }
}

/*  FOOTER
----------------------*/
.footer-logo {
  width: 200px;
  margin-bottom: 2rem;
  cursor: pointer;
}

@media (max-width:575px) {
  footer small{
    font-size: 70%;
  }
  #footer iframe{
    height: 400px;
  }
}

/*  go to top
----------------------*/

#page-top {
    opacity: 0;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
    margin-bottom: 0;
}
#page-top a {
    text-decoration: none;
    color: #222222;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;

}
#page-top a:hover {
    text-decoration: none;
}
@media (max-width:575px) {
  #page-top{
    bottom: 0px;
    right: 0px;
  }
  #page-top a{
    background: rgba(255,255,255,0.8);
    width: 70px;
    padding: 5px;
  }
}


h1 span{
		transition: 1s;
	opacity: 0;
}
h1 span.text_animate_on{
		transition: 1s;
		opacity: 1;
}