@charset "UTF-8";

/*=============================================
 * body
 *=============================================*/
body {
   color: #000;
   font-family: 'Noto Serif JP', serif;
   font-size: 16px;
   line-height: 36px;
   letter-spacing: 0.08em;
   background: url("../img/shared/body-bg.jpg") repeat center top;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
}

@media only screen and (max-width: 767px) {
   body {
      font-size: 12px;
      line-height: 24px;
   }
}

/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/
.fnt-mincho {
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.fnt-meiryo {
   font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fnt-gothic {
   font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/*=============================================
 * .fnt - customs
 *=============================================*/
/*=============================================
 * <main>
 *=============================================*/
main {
   clear: both;
   width: 100%;
   position: relative;
   overflow: hidden;
}

.wrap {
   width: 1000px;
   box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
   .wrap {
      width: 100%;
      padding: 0 3%;
   }

   img {
      width: 100%;
      height: auto;
   }
}

/*=============================================
 * <header>
 *=============================================*/
header .wrap {
   width: 100%;
   max-width: 1150px;
}

header .hd-top {
   padding-top: 24px;
}

header .hd-top h1 {
   font-size: 13px;
   line-height: 30px;
   letter-spacing: 0;
   color: #7a7a7a;
}

header .hd-top .logo {
   width: 310px;
   padding-top: 6px;
   padding-bottom: 33px;
}

header .hd-top nav {
   width: 541px;
   font-weight: 500;
   font-size: 16px;
   line-height: 18px;
   letter-spacing: 0.05em;
   position: absolute;
   top: 42px;
   right: 0;
}

header .hd-top nav a {
   display: inline-block;
   color: #184e18;
   border-bottom: 1px solid transparent;
   margin-bottom: 11px;
   padding-bottom: 6px;
}

header .hd-top nav a+a {
   margin-left: 30px;
}

header .hd-top nav a:nth-child(5) {
   margin-left: 0;
}

header .hd-top nav a:hover,
header .hd-top nav a.active {
   color: #bd9b55;
   text-decoration: none;
   border-color: #bd9b55;
}

header .hd-top .box {
   width: 490px;
   background: url("../img/shared/body-bg.jpg") repeat center top;
   margin-top: -50px;
   position: relative;
   z-index: 1;
}

header .hd-top .box .tel {
   padding: 26px 0 0 5px;
}

header .hd-top .box .tel dt {
   font-size: 16px;
   line-height: 18px;
   letter-spacing: 0.05em;
   color: #79602d;
}

header .hd-top .box .tel dt span {
   font-size: 26px;
   letter-spacing: 0.05em;
}

header .hd-top .box .tel dd {
   font-weight: 300;
   font-size: 14px;
   line-height: 24px;
   letter-spacing: 0;
   padding-left: 8px;
}

header .hd-top .box .icon {
   border-left: 1px solid #000;
   padding: 11px 0 12px 19px;
   position: absolute;
   top: 19px;
   left: 411px;
}

header .hd-top .box .icon a {
   display: block;
   width: 30px;
}

header .hd-top .box .icon a img {
   display: block;
   transition: all 0.3s;
}

header .hd-top .box .icon a:hover img {
   opacity: 0.7;
}

header .hd-top .box .bnr {
   padding: 24px 0 0 8px;
}

.hamburger {
   display: block;
   width: 85px;
   height: 85px;
   background-color: #162916;
   padding: 0;
   position: fixed;
   top: 0;
   right: 0;
   z-index: 101;
}

.hamburger:after {
   content: 'MENU';
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0;
   color: #fff;
   text-align: center;
   position: absolute;
   right: 0;
   bottom: 14px;
   left: 0;
}

.hamburger .hamburger-box {
   display: block;
   width: 40px;
   height: 18px;
   position: absolute;
   top: 28px;
   left: 50%;
   transform: translateX(-50%);
}

.hamburger .hamburger-inner,
.hamburger .hamburger-inner:after,
.hamburger .hamburger-inner:before {
   width: 100%;
   height: 2px;
   border-radius: 0;
   background-color: #fff;
}

.hamburger .hamburger-inner:before {
   top: 8px;
}

.hamburger .hamburger-inner:after {
   top: 16px;
}

.hamburger.is-active:after {
   content: "CLOSE";
}

.hamburger.is-active .hamburger-box {
   top: 20px;
}

.hamburger.is-active .hamburger-inner:after {
   transform: translate3d(0, -16px, 0) rotate(-90deg);
}

#menu-toggle {
   display: block;
   width: 100%;
   height: 100vh;
   background: url("../img/shared/body-bg.jpg") repeat center top;
   box-sizing: border-box;
   overflow: hidden auto;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s;
   padding: 140px 0;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
}

#menu-toggle .menu-inr {
   width: 670px;
   margin: 0 auto;
   position: relative;
}

#menu-toggle .tel dt {
   font-size: 18px;
   line-height: 18px;
   letter-spacing: 0.08em;
   color: #79602d;
}

#menu-toggle .tel dt small {
   font-size: inherit;
}

#menu-toggle .tel dt span {
   font-size: 28px;
}

#menu-toggle .tel dd {
   font-size: 15px;
   line-height: 30px;
   letter-spacing: 0;
}

#menu-toggle .icon-insta {
   border-left: 1px solid #000;
   padding: 7px 0 7px 30px;
   position: absolute;
   top: 0;
   left: 460px;
}

#menu-toggle .icon-insta a {
   display: block;
   width: 30px;
}

#menu-toggle .icon-insta a img {
   display: block;
   transition: all 0.3s;
}

#menu-toggle .icon-insta a:hover img {
   opacity: 0.7;
}

#menu-toggle .nav {
   font-weight: 500;
   font-size: 20px;
   line-height: 30px;
   letter-spacing: 0.05em;
   padding-top: 70px;
}

#menu-toggle .nav li {
   display: inline-block;
   padding-bottom: 30px;
}

#menu-toggle .nav li+li {
   margin-left: 35px;
}

#menu-toggle .nav li:nth-child(5) {
   margin-left: 0;
}

#menu-toggle .nav a {
   display: inline-block;
   color: #184e18;
   border-bottom: 1px solid transparent;
   padding-bottom: 5px;
}

#menu-toggle .nav a:hover,
#menu-toggle .nav a.active {
   color: #bd9b55;
   text-decoration: none;
   border-color: #bd9b55;
}

#menu-toggle .bnr {
   padding-top: 120px;
}

.navOpen #menu-toggle {
   opacity: 1;
   visibility: visible;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
   header .hd-top nav {
      width: 551px;
   }
}

@media only screen and (max-width: 1350px) {
   header .wrap {
      width: auto;
      max-width: 100%;
      margin: 0 90px;
   }

   header .hd-top nav a+a {
      margin-left: 20px;
   }
}

@media only screen and (max-width: 1100px) {
   header .hd-top .box .tel dd {
      font-size: 12px;
      padding-left: 0;
   }
}

@media only screen and (max-width: 767px) {
   header .wrap {
      margin: 0;
   }

   header .hd-top {
      padding-top: 10px;
   }

   header .hd-top h1 {
      font-size: 10px;
      line-height: 15px;
      letter-spacing: 0;
   }

   header .hd-top .logo {
      width: 50%;
      padding-top: 0;
      padding-bottom: 20px;
   }

   header .hd-top nav {
      display: none;
   }

   .hamburger {
      width: 54px;
      height: 54px;
   }

   .hamburger:after {
      font-size: 10px;
      bottom: 8px;
   }

   .hamburger .hamburger-box {
      width: 25px;
      height: 22px;
      top: 10px;
   }

   .hamburger .hamburger-inner,
   .hamburger .hamburger-inner:after,
   .hamburger .hamburger-inner:before {
      height: 3px;
   }

   .hamburger .hamburger-inner:before {
      top: 9px;
   }

   .hamburger .hamburger-inner:after {
      top: 18px;
   }

   .hamburger.is-active .hamburger-box {
      top: 10px;
   }

   .hamburger.is-active .hamburger-inner:after {
      transform: translate3d(0, -18px, 0) rotate(-90deg);
   }

   .hamburger:hover {
      opacity: 1;
   }

   #menu-toggle {
      padding: 45px 10% 120px;
   }

   #menu-toggle .menu-inr {
      width: auto;
   }

   #menu-toggle .tel {
      text-align: center;
   }

   #menu-toggle .tel dt {
      font-size: 12px;
      line-height: 24px;
      letter-spacing: 0.08em;
   }

   #menu-toggle .tel dt small {
      font-size: 18px;
   }

   #menu-toggle .tel dt span {
      font-size: 24px;
   }

   #menu-toggle .tel dd {
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.18em;
      padding-top: 5px;
   }

   #menu-toggle .nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 15px;
      line-height: 25px;
      letter-spacing: 0.05em;
      padding-top: 50px;
   }

   #menu-toggle .nav li {
      width: 50%;
      box-sizing: border-box;
      padding-bottom: 20px;
   }

   #menu-toggle .nav li+li {
      margin-left: 0;
   }

   #menu-toggle .nav li:nth-child(1) {
      order: 1;
   }

   #menu-toggle .nav li:nth-child(2) {
      order: 3;
   }

   #menu-toggle .nav li:nth-child(3) {
      order: 5;
   }

   #menu-toggle .nav li:nth-child(4) {
      order: 7;
   }

   #menu-toggle .nav li:nth-child(5) {
      order: 9;
   }

   #menu-toggle .nav li:nth-child(6) {
      order: 2;
      padding-left: 40px;
   }

   #menu-toggle .nav li:nth-child(7) {
      order: 4;
      padding-left: 40px;
   }

   #menu-toggle .nav li:nth-child(8) {
      order: 6;
      padding-left: 40px;
   }

   #menu-toggle .nav li:nth-child(9) {
      order: 8;
      padding-left: 40px;
   }

   #menu-toggle .bnr {
      padding-top: 60px;
   }
}

/*=============================================
 * key
 *=============================================*/
#key {
   position: relative;
}

/*=============================================
 * <section>
 *=============================================*/
/*=============================================
 * <footer>
 *=============================================*/
footer {
   background-color: #262114;
   color: #fff;
   font-size: 15px;
   line-height: 15px;
   letter-spacing: 0.1em;
   text-align: center;
   padding: 75px 0 55px;
}

footer .cookies_link {
   padding-top: 37px;
}

footer .cookies_link a {
   text-decoration: underline;
}

footer .cookies_link a:hover {
   text-decoration: none;
}

footer address {
   padding-top: 24px;
}

#pagetop {
   right: 0;
   bottom: 0;
}

.navOpen #pagetop {
   display: none;
}

@media only screen and (max-width: 767px) {
   footer {
      font-size: 10px;
      line-height: 15px;
      padding: 60px 0 100px;
   }

   footer address {
      padding-top: 30px;
   }

   footer .cookies_link {
      padding-top: 15px;
   }

   .social-facebook {
      width: 120px;
   }

   #pagetop {
      width: 50px;
      bottom: 60px;
   }
}

/*=============================================
 * 
 *=============================================*/
.pc {
   display: block;
}

.sp {
   display: none;
}

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

   .sp {
      display: block;
   }
}

/* -- -- */
.udl {
   display: inline-block;
   background: url("../img/index/text-line.png") repeat center top;
}

.udl1 {
   display: inline-block;
   background: url("../img/index/text-line1.png") repeat center top;
}

.udl2 {
   display: inline-block;
   background: url("../img/index/text-line2.png") repeat center top;
}

@media only screen and (max-width: 767px) {
   .udl {
      background-image: url("../img/index/sp_text-line.png");
   }

   .udl1 {
      background-image: url("../img/index/sp_text-line1.png");
   }

   .udl2 {
      background-image: url("../img/index/sp_text-line2.png");
   }
}

/* -- -- */
.bg-parallax .img-parallax {
   display: none;
}

@media only screen and (max-width: 1200px) {
   .bg-parallax {
      width: 100%;
      background-image: inherit !important;
      position: relative;
      z-index: 1;
   }

   .bg-parallax .img-parallax {
      display: block;
      clip: rect(0, auto, auto, 0);
      margin-bottom: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: -1;
   }

   .bg-parallax .img-parallax img {
      width: 100% !important;
      height: 100vh !important;
      position: fixed;
      top: 0;
      left: 0;
      padding: 0;
      margin: 0;
      object-fit: cover;
      z-index: 0;
      transform: translateZ(0);
   }
}

/* -- -- */
/*=============================================
 * 
 *=============================================*/
.sp_ft-fixed {
   width: 100%;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 90;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.sp_ft-fixed.visible {
   opacity: 1;
   visibility: visible;
}

.sp_ft-fixed ul {
   display: flex;
   flex-wrap: wrap;
}

.sp_ft-fixed ul li {
   width: 50%;
   box-sizing: border-box;
}

.sp_ft-fixed ul li+li {
   border-left: 1px solid #fff;
}

.sp_ft-fixed ul li a {
   display: block;
   background-color: #162916;
   color: #fff;
   text-align: center;
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0.1em;
   /*text-transform: uppercase;*/
   padding: 13px 0 11px;
}
.sp_ft-fixed ul li a span{
   display: inline-block;
   vertical-align: middle;
   padding-right: 5px;
   position: relative;
   top: -1px;
}
.sp_ft-fixed ul li a:hover{
   text-decoration: none;
}
/* iPhone X */
@media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
   .has_nav footer:after {
      background: #162916;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 36px;
   }

   #sp_ft-fixed {
      bottom: calc(env(safe-area-inset-bottom) - 0px);
   }

}

/* iPhone XR */
@media only screen and (min-device-width: 414px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
   .has_nav footer:after {
      background: #162916;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 36px;
   }

   #sp_ft-fixed {
      bottom: calc(env(safe-area-inset-bottom) - 0px);
   }
}

/* iPhone 11 */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {

   .has_nav footer:after {
      background: #162916;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 36px;
   }

   #sp_ft-fixed {
      bottom: calc(env(safe-area-inset-bottom) - 0px);
   }
}