@charset "utf-8";

/* = Setting
-------------------------------------------------------------- */
body {
  background: url(../img/common/bg.png);
  color: #662d14;
  font-family: 'Noto Sans JP',sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
  line-height: 1.4;
}
img {
  width: 100%;
}
ol li {
  list-style: none;
}
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}
a {
  color: #fff8de;
}

/* = header
-------------------------------------------------------------- */
#menu .btn-gNav {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 60px;
  padding-top: 60px;
  background: url(../img/common/nav_open.png) no-repeat;
  background-size: 100%;
  z-index: 15;
  cursor: pointer;
}
#menu.open .btn-gNav {
  background: url(../img/common/nav_close.png) no-repeat;
  background-size: 100%;
}
#menu.open #gNav {
  opacity: 1;
  visibility: visible;
}
#menu #gNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/common/bg_inner_grunge.png),url(../img/common/bg_grunge.png);
  background-repeat: repeat-y,repeat;
  background-position: center 0,0 0;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  z-index: 10;

}
#menu #gNav .logo {
  width: 290px;
  margin: 30px auto 0;
}
#menu #gNav .gNav-menu {
  padding-top: 60px;
}
#menu #gNav .gNav-menu li {
  width: 690px;
  margin: 0 auto 40px;
  padding-bottom: 40px;
  background: url(../img/common/nav_line.png) no-repeat left bottom;

  font-size: 32px;
  line-height: 1;
}
#menu #gNav .gNav-menu li a {
  font-weight: bold;
  text-decoration: none;
}

/* = contents
-------------------------------------------------------------- */
section,
footer {
  position: relative;
}
section::before,
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 8px;
  background-image: url(../img/common/line.png),url(../img/common/line_bg.png);
  background-repeat: no-repeat,repeat-x;
  background-position: center 0,0 0;
}

/* = footer
-------------------------------------------------------------- */
footer {
  padding-bottom:15px;
  overflow: hidden;
}
footer .spec {
  padding: 38px 0 30px;
  font-size: 16px;
  background-image: url(../img/common/bg_inner_grunge.png),url(../img/common/bg_grunge.png);
  background-repeat: repeat-y,repeat;
  background-position: center 0,0 0;
}
footer .spec .contents {
  display: flex;
  justify-content: space-between;
  width: 780px;
  margin: 0 auto 15px;
}
footer .spec .logo,footer .spec dl {
  width: 370px;
}
footer .spec dl {
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  text-align: left;
}
footer .spec dt {
  width: 80px;
  margin-bottom: 10px;
}
footer .spec dd {
  width: 290px;
  margin-bottom: 10px;
}
footer .spec dd::before {
  content: "：";
}
footer .spec .store {
  display: flex;
  justify-content: center;
  width: 800px;
  margin: 0 auto 15px;
}
footer .spec .store .ios {
  width: 190px;
  margin: 0 10px;
}
footer .spec .store .aos {
  width: 232px;
  margin: 0 10px;
}
footer .spec .text {
  color: #fff;
  font-size: 14px;
  opacity: 0.4;
}
footer .sns_info {
  margin: 30px 0;
}
.sns_info li {
  width: 50px;
}
footer .sns_info li {
  width: 50px;
}
footer ul {
  margin-bottom: 30px;
  font-size: 14px;
  text-align: center;
}
footer ul li,.sns_info li  {
  display: inline-block;
  padding: 0 15px;
}
footer ul li a {
  color: #662d14;
}
footer p.copy {
  font-size: 12px;
}
footer .pagetop {
  position: absolute;
  right: 30px;
  bottom: -65px;
  width: 120px;
}

/* = pc
-------------------------------------------------------------- */
.modal_close {
  left: 32%!important;
  width: 36%!important;
  margin-top: 0px!important;
}
.hoverBtn a,
.modal_close {
    transition: all 0.3s ease 0s;
}
.hoverBtn a:hover,
.modal_close:hover {
    opacity: 0.8;
}

/* = slick
-------------------------------------------------------------- */
.slider,
.gallery {
  display: none;
}
.slider.slick-initialized,
.gallery.slick-initialized {
  display: block;
}

/* = modal
-------------------------------------------------------------- */
.modal-box {
  display: none;
}
.modaal-container {
  background-color: transparent !important;
  box-shadow: none !important;
  top: -5vh;
  width: 950px;
}
.modaal-content-container {
  position: relative;
  padding: 0 !important;
}
.modal_close {
  display: block;
  position: absolute;
  bottom: -135px;
  left: 25%;
  width: 50%;
  cursor: pointer;
}
.modal-pv {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.modal-pv iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* = btn animation
-------------------------------------------------------------- */
.btn_animation {
  animation: translateAni 4s infinite;
}
@keyframes translateAni {
    0% { transform: translate(0, 0);}
   15% { transform: translate(0, 0);}
   20% { transform: translate(0, -6px);}
   25% { transform: translate(0, 0);}
   30% { transform: translate(0, -5px);}
   35% { transform: translate(0, 0);}
  100% { transform: translate(0, 0);}
}