@charset "UTF-8";

/*=============================================
 * body
 *=============================================*/
body {
   background: #eee;
   color: #000;
   font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
   line-height: 25px;
   letter-spacing: 0.15em;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
}

@media only screen and (min-width: 768px) {
   body {
      font-size: 15px;
      line-height: 32px;
   }
}

/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/
.fnt-mincho {
   font-family: "游明朝", YuMincho, 'Noto Serif JP', "ヒラギノ明朝 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-hina-mincho {
   font-family: "Hina Mincho", serif;
   font-weight: 400;
}

.fnt-noto-serif {
   font-family: 'Noto Serif JP', serif;
}

.fnt-noto-sans {
   font-family: "Noto Sans JP", sans-serif;
}

/*=============================================
   main
*=============================================*/
main {
   clear: both;
   width: 100%;
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
}

/* -- -- */
@media only screen and (max-width: 767px) {
   .wrap {
      width: 100%;
      box-sizing: border-box;
      padding: 0 4vw;
      position: relative;
   }

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

@media only screen and (min-width: 768px) {
   .wrap {
      width: 1000px;
      box-sizing: border-box;
      position: relative;
      margin: 0 auto;
      padding: 0;
   }

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

.non-over a:hover {
   opacity: 1;
}

.non-over a:hover img {
   opacity: 1;
}

/*=============================================
   header
*=============================================*/
header {
   background-color: #555555;
   color: #fff;
   box-sizing: border-box;
   position: relative;
   z-index: 100;
}

@media only screen and (max-width: 767px) {
   header {
      padding-bottom: 13.3vw;
   }

   header h1 {
      background-color: #555;
      color: #fff;
      font-size: 10px;
      letter-spacing: 0.15em;
      line-height: 12px;
      text-align: left;
      padding: 8px 4vw;
      margin-top: -6.6vw;
      margin-left: 4vw;
      position: relative;
   }

   header .logo {
      width: 29vw;
      position: absolute;
      top: 11.2vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
   }

   .hamburger {
      width: 12vw;
      height: 12vw;
      background: url("../img/shared/hamburger.png") no-repeat center top/cover;
      position: fixed;
      top: 4vw;
      right: 2vw;
      z-index: 2;
   }

   .hamburger.is-active {
      background-image: url("../img/shared/hamburger-close.png");
   }

   #menu-toggle {
      width: 100%;
      height: 100vh;
      background-color: rgba(221, 221, 221, 0.95);
      color: #000;
      box-sizing: border-box;
      overflow-y: auto;
      position: fixed;
      top: 0;
      left: 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s linear;
      padding: 20vw 4vw 150px;
      z-index: 1;
   }

   #menu-toggle .nav {
      display: flex;
      justify-content: center;
   }

   #menu-toggle .nav a {
      display: block;
      width: 10vw;
      font-size: 4vw;
      line-height: 10vw;
      letter-spacing: 0.2em;
      padding: 4vw 0;
   }

   #menu-toggle .nav a.active {
      background-color: #fff;
      color: #999;
   }

   #menu-toggle .tel {
      margin-top: 10vw;
   }

   #menu-toggle .tel a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2vw;
      width: 44vw;
      height: 44vw;
      background-color: #fff;
      color: #000;
      border-radius: 50%;
      font-size: 4vw;
      letter-spacing: 0.05em;
      line-height: 1.2;
      text-align: center;
      box-sizing: border-box;
      margin: 0 auto;
   }

   #menu-toggle .tel a span {
      font-size: 5.6vw;
      line-height: 1;
      letter-spacing: 0.05em;
      border-top: 1px solid #c6c4c2;
      border-bottom: 1px solid #c6c4c2;
      padding: 3vw 0;
   }

   #menu-toggle .tel a small {
      font-size: 2.6vw;
      line-height: 1.2;
      letter-spacing: 0.05em;
      color: #999;
   }

   #menu-toggle .sns {
      padding-top: 10.8vw;
      display: flex;
      width: 150px;
      margin: 0 auto;
   }

   #menu-toggle .sns li {
      margin: 0 auto;
   }

   #menu-toggle .sns .insta {
      width: 10vw;
   }
   #menu-toggle .sns .line {
      width: 10vw;
   }

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

   .navOpen #menu-toggle .wrap {
      transform: translateY(0%);
   }
}

@media only screen and (min-width: 768px) {
   header {
      padding: 0;
   }

   header h1 {
      width: calc(50% + 50px);
      background-color: #555;
      color: #fff;
      font-size: 12px;
      letter-spacing: 0.15em;
      line-height: 32px;
      text-align: left;
      padding: 9px 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      box-sizing: border-box;
   }

   header .logo {
      width: 209px;
      position: absolute;
      top: 60px;
      left: 40px;
      z-index: 1;
   }

   #menu-toggle .nav {
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      top: 40px;
      right: 43px;
      z-index: 1;
   }

   #menu-toggle .nav a {
      display: block;
      width: 50px;
      font-size: 20px;
      line-height: 50px;
      letter-spacing: 0.2em;
      padding: 17px 0;
      cursor: pointer;
   }

   #menu-toggle .nav a.active,
   #menu-toggle .nav a:hover {
      background-color: #fff;
      color: #000;
   }

   .nav-fixed {
      width: 100%;
      background-color: #fff;
      color: #000;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
   }

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

   .nav-fixed .wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 30px;
      height: 90px;
   }

   .nav-fixed .nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 25px;
   }

   .nav-fixed .nav a {
      font-size: 18px;
      line-height: 50px;
      letter-spacing: 0.2em;
      border-bottom: 1px solid transparent;
   }

   .nav-fixed .nav a:hover,
   .nav-fixed .nav a.active {
      border-bottom-color: #000;
   }

   .nav-fixed .tel {
      font-size: 16px;
      letter-spacing: 0.05em;
      line-height: 24px;
       width: 200px;
   }

   .nav-fixed .tel span {
      display: inline-block;
      font-size: 24px;
      letter-spacing: 0.05em;
      padding-left: 15px;
   }

   .nav-fixed .tel small {
      display: block;
      font-size: 13px;
      line-height: 18px;
      letter-spacing: 0.05em;
      color: #999;
   }
}

/*=============================================
   section
*=============================================*/
#key {
   box-sizing: border-box;
   position: relative;
}

#key .slick-slider {
   width: 100%;
   height: 100%;
}

#key .slick-slider .slick-list,
#key .slick-slider .slick-track,
#key .slick-slider .slick-slide {
   width: 100%;
   height: 100%;
}

@media only screen and (max-width: 767px) {
   #key .tel {
      position: absolute;
      /*bottom: 10.8vw;*/
       bottom: 21.8vw;
      left: -2vw;
   }

   #key .tel a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2vw;
      width: 44vw;
      height: 44vw;
      background-color: #fff;
      color: #000;
      border-radius: 50%;
      font-size: 4vw;
      letter-spacing: 0.05em;
      line-height: 1.2;
      text-align: center;
      box-sizing: border-box;
      margin: 0 auto;
   }

   #key .tel a span {
      font-size: 5.6vw;
      line-height: 1;
      letter-spacing: 0.05em;
      border-top: 1px solid #c6c4c2;
      border-bottom: 1px solid #c6c4c2;
      padding: 3vw 0;
   }

   #key .tel a small {
      font-size: 2.6vw;
      line-height: 1.2;
      letter-spacing: 0.05em;
      color: #999;
   }

   #key .sns {
      position: absolute;
      bottom: 10vw;
      left: 40%;
      display: flex;
   }
   #key .sns li {
      padding-left: 5vw;
   }

    
}

@media only screen and (min-width: 768px) {
   #key .tel {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      width: 250px;
      height: 250px;
      background-color: #fff;
      color: #000;
      border-radius: 50%;
      position: absolute;
      top: 468px;
      left: -10px;
      font-weight: 400;
      font-size: 18px;
      letter-spacing: 0.05em;
      line-height: 24px;
      text-align: center;
      z-index: 1;
      padding: 0 20px;
      box-sizing: border-box;
   }

   #key .tel span {
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0.05em;
      border-top: 1px solid #c6c4c2;
      border-bottom: 1px solid #c6c4c2;
      padding: 8px 0 10px;
   }

   #key .tel small {
      font-size: 13px;
      line-height: 18px;
      letter-spacing: 0.05em;
      color: #999;
   }

   #key .sns {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      position: absolute;
      top: 798px;
      left: 60px;
   }
}

/* -- -- */
section {
   position: relative;
}

/*=============================================
   footer
*=============================================*/
footer {
   box-sizing: border-box;
   position: relative;
}
 
@media only screen and (max-width: 767px) {
   #info {
      background-color: #c6c6c6;
      padding: 14.8vw 0 0;
   }

   #info h2 {
      text-align: center;
   }

   #info .logo {
      width: 28vw;
      margin: 0 auto;
      padding-top: 6vw;
   }

   #info .tel {
      padding: 10.8vw 0 0;
      position: relative;
      z-index: 1;
   }

   #info .tel a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2vw;
      width: 44vw;
      height: 44vw;
      background-color: rgba(255, 255, 255, 0.95);
      color: #000;
      border-radius: 50%;
      font-size: 4vw;
      letter-spacing: 0.05em;
      line-height: 1.2;
      text-align: center;
      box-sizing: border-box;
   }

   #info .tel a span {
      font-size: 5.6vw;
      line-height: 1;
      letter-spacing: 0.05em;
      border-top: 1px solid #c6c4c2;
      border-bottom: 1px solid #c6c4c2;
      padding: 3vw 0;
   }

   #info .tel a small {
      font-size: 2.6vw;
      line-height: 1.2;
      letter-spacing: 0.05em;
      color: #999;
   }

   #info .box1 {
      position: relative;
   }

   #info .box1 figure {
      width: 60vw;
      position: absolute;
      top: 66vw;
      right: -8vw;
   }

   #info .sns {
      display: flex;
      flex-wrap: wrap;
      width: 150px;
      margin: 10vw auto 0 auto;
   }

   #info .sns li {
      margin: 0 auto;
   }

   #info .sns .insta {
      width: 10vw;
   }
   #info .sns .line {
      width: 10vw;
   }

   #info .box2 {      
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      margin-left: -4vw;
      padding: 10vw 0 10px;
   }

   #info .box2 dl {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      line-height: 20px;
      padding: 10px 6vw 10px 10vw;
   }

   #info .cancel {
      background: #eee;
      margin: 11vw 0 0 -4vw;
      padding: 9vw 6vw 9vw 10vw;
   }

   #info .cancel h3 {
      font-size: 5.3vw;
      line-height: 1.5;
      letter-spacing: 0.05em;
   }

   #info .cancel .txt {
      padding-top: 4vw;
   }

   #info .btn-group {
      width: 80vw;
      margin: 0 auto;
      padding-top: 11vw;
   }

   #info .btn-group h3 {
      font-size: 5.3vw;
      line-height: 1.5;
      letter-spacing: 0.05em;
   }

   #info .btn-group .button {
      padding-top: 4.8vw;
   }

   #info .btn-group .button a {
      width: 100%;
      gap: 10px;
   }

   #gmap {
      width: 80vw;
      height: 480px;
      margin: 8vw auto 0;
      position: relative;
      z-index: 1;
   }

   #gmap iframe {
      display: block;
      width: 100%;
      height: 100%;
   }

   footer nav {
      display: none;
   }

   footer .row {
      font-size: 10px;
      line-height: 22px;
      color: #fff;
      padding: 11.2vw 6vw 20vw;
      position: relative;
   }

   footer .row:before {
      content: '';
      background-color: #000;
      position: absolute;
      top: -25.8vw;
      right: 0;
      bottom: 0;
      left: 0;
   }

   footer .row .link {
      padding-top: 8vw;
   }

   footer .row .link+.link {
      padding-top: 2.6vw;
   }

   footer .row .link a {
      border-bottom: 1px solid #fff;
      margin-left: 4.8vw;
      position: relative;
   }

   footer .row .link a:before {
      content: '';
      width: 2.6vw;
      height: 2.6vw;
      background: url("../img/shared/icon-link.png") no-repeat center left/100% auto;
      position: absolute;
      top: 0.5vw;
      left: -4.8vw;
   }

   footer address {
      padding-top: 8vw;
   }

   .pagetop {
      width: 12vw;
      position: absolute;
      bottom: 0;
      right: 4vw;
      opacity: 1;
      visibility: visible;
   }
}

@media only screen and (min-width: 768px) {
   #info {
      background-color: #c6c6c6;
      padding: 0px 0 0px;
   }

   #info:before {
      content: '';
      width: 40px;
      height: 100%;
      background-color: #eee;
      position: absolute;
      top: 0;
      right: 0;
   }

   #info .wrap {
      width: 900px;
   }

   #info .box1 {
      display: flex;
      flex-wrap: wrap;
   }

   #info h2 {
      display: flex;
      align-items: center;
      width: 40px;
      line-height: 40px;
      position: relative;
      padding-left: 30px;
   }

   #info h2:before {
      content: '';
      display: block;
      width: 2px;
      height: 105px;
      background: url("../img/index/title-border.png") repeat-y center top;
      margin-bottom: 17px;
   }

   #info .logo {
      padding: 82px 0 0 80px;
   }

   #info figure {
      width: 450px;
      position: absolute;
      top: 0;
      right: -90px;
   }

   #info .cta-btn {
      padding: 80px 0 0 44px;
      position: relative;
      z-index: 1;
   }

   #info .tel {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      width: 250px;
      height: 250px;
      background-color: #fff;
      color: #000;
      border-radius: 50%;
      font-size: 18px;
      letter-spacing: 0.05em;
      line-height: 24px;
      text-align: center;
      padding: 0 20px;
      box-sizing: border-box;
      position: relative;
   }

   #info .tel span {
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0.05em;
      border-top: 1px solid #c6c4c2;
      border-bottom: 1px solid #c6c4c2;
      padding: 8px 0 10px;
   }

   #info .tel small {
      font-size: 13px;
      line-height: 18px;
      letter-spacing: 0.05em;
      color: #999;
   }

   #info .sns {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      padding: 16px 0 0 70px;
   }

   #info .box2 {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 76px 0 60px 32px;
   }

   #info .box2 .col {
      width: calc(50% - 10px);
   }

   #info .box2 dl {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      line-height: 27px;
      padding: 13px 16px;
   }

   #info .box2 dl+dl {
      border-top: 0;
   }

   #info .cancel {
      display: flex;
      flex-wrap: wrap;
      gap: 47px;
      margin-right: -100px;
      margin-left: 30px;
      padding: 52px 0 57px 115px;
      position: relative;
      z-index: 1;
   }

   #info .cancel:before {
      content: '';
      width: 100000px;
      height: 100%;
      background-color: #eeee;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }

   #info .cancel h3 {
      font-size: 24px;
      line-height: 30px;
      letter-spacing: 0.05em;
      padding-top: 4px;
   }

   #info .cancel .txt {
      line-height: 27px;
   }

   #info .btn-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      padding: 60px 10px 40px 150px;
   }

   #info .btn-group h3 {
      font-size: 24px;
      line-height: 30px;
      letter-spacing: 0.05em;
      flex: auto;
   }

   #info .btn-group .button a {
      padding: 9px 35px;
   }

   #info .btn-group .button span.pc {
      display: inline-block;
   }

   #gmap {
      max-width: 860px;
      height: 550px;
      margin-right: 10px;
      margin-left: auto;
      position: relative;
      z-index: 1;
   }

   #gmap iframe {
      display: block;
      width: 100%;
      height: 100%;
   }

   footer .row {
      color: #fff;
      position: relative;
   }

   footer .row:before {
      content: '';
      width: 100%;
      background-color: #000;
      position: absolute;
      top: -200px;
      right: 0;
      bottom: 0;
      left: 0;
   }

   footer .row .wrap {
      display: flex;
      flex-wrap: wrap;
      width: 750px;
      padding: 48px 0 60px;
   }

   footer .row nav {
      width: 170px;
   }

   footer .row nav a {
      display: block;
      font-size: 14px;
      line-height: 35px;
      color: #ccc;
   }

   footer .row nav a:hover {
      opacity: 0.7;
   }

   footer .copyright {
      width: 423px;
      font-size: 12px;
      line-height: 30px;
      border-left: 1px solid #333;
      padding: 10px 0 0 52px;
   }

   footer address {
      padding-top: 62px;
   }

   footer .link a {
      display: inline-block;
      line-height: 20px;
      border-bottom: 1px solid #333;
      position: relative;
      margin-left: 23px;
   }

   footer .link a:before {
      content: '';
      display: block;
      width: 15px;
      height: 15px;
      background: url("../img/shared/icon-link.png") no-repeat center top/cover;
      position: absolute;
      top: 6px;
      left: -23px;
   }

   footer .link a:hover {
      border-bottom-color: transparent;
   }

   footer #socialbuttons {
      justify-content: flex-start;
      padding-bottom: 23px;
   }

   .pagetop {
      width: 90px;
      position: static;
      opacity: 1;
      visibility: visible;
      align-self: flex-end;
      padding-bottom: 10px;
   }
}

@media only screen and (min-width: 1400px) {
   #info:before {
      width: calc(50% - 600px);
   }
}

/*=============================================
   css for ie 11 
*=============================================*/
#fixed-sp {
   width: 100%;
   background-color: #000;
   box-sizing: border-box;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 101;
   opacity: 1;
   visibility: visible;
   text-align: center;
}

#fixed-sp.visible {
   opacity: 1;
   visibility: visible;
}

#fixed-sp ul {
   display: flex;
   text-align: center;
}

/*=============================================
   Custom
*=============================================*/
/* -- --*/
.pc {
   display: none;
}

.sp {
   display: block;
}

@media only screen and (min-width: 768px) {
   .pc {
      display: block;
   }

   .sp {
      display: none;
   }
}

/* -- --*/
.bg-parallax {
   min-height: inherit;
   position: relative;
}

.img-parallax {
   display: none;
}

@media only screen and (max-width: 1200px) {
   .bg-parallax {
      background: transparent !important;
      position: relative;
   }

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

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

/* -- -- */
.shadow {
   box-shadow: 12px 16px 27px 0px rgba(0, 0, 0, 0.25);
}

.cl-red {
   color: #cb2f21;
}

.cl-green {
   color: #567f57;
}

.cl-purple {
   color: #584172;
}

.txt-c {
   text-align: center;
}

.txt-r {
   text-align: right;
}

a {
   transition: all 0.3s;
}

a img {
   transition: all 0.3s;
}

a:hover {
   text-decoration: none;
}

@media only screen and (min-width: 768px) {
   a:hover img {
      opacity: 0.7;
   }
}

/* -- -- */
#socialbuttons {
   display: flex;
   justify-content: center;
   margin: 0 auto;
}

.social-facebook {
   width: 95px;
   overflow: hidden;
   display: flex !important;
   justify-content: center;
}

/* -- slick -- */
.slick-arrow {
   display: block;
   width: 52px;
   height: 52px;
   border: 0;
   font-size: 0;
   cursor: pointer;
}

.slick-arrow:hover {
   opacity: 0.7;
}

.slick-arrow:hover {
   opacity: 0.8;
}

.slick-dots {
   display: flex;
   align-items: center;
   gap: 15px;
   position: absolute;
}

.slick-dots li {
   display: block;
   font-size: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   cursor: pointer;
   position: relative;
}

.slick-dots button {
   font-size: 0;
   background: #eeeeee;
   display: block;
   width: 100%;
   height: 100%;
   -webkit-appearance: none;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   cursor: pointer;
   border-radius: 50%;
   border: 0;
}

.slick-dots .slick-active button {
   background: #cb2f21;
}

.dots-number .slick-dots {
   gap: 30px;
}

.dots-number .slick-dots li {
   width: 30px;
   height: 30px;
}

.dots-number .slick-dots li button {
   background: transparent;
   border: 1px solid transparent;
   font-family: 'Shippori Mincho', serif;
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
   color: #000;
   padding-bottom: 2px;
}

.dots-number .slick-dots li.slick-active button {
   border-color: #000;
}

@media only screen and (max-width: 767px) {
   .slick-dots li {
      width: 5.6vw;
      height: 5.6vw;
   }
}

@media only screen and (min-width: 768px) {
   .slick-dots li {
      width: 25px;
      height: 25px;
   }
}

@media only screen and (min-width: 1101px) {
   .slick-dots li:hover button {
      opacity: 0.7;
   }
}

/* -- -- */
.button {
   position: relative;
}

.button a {
   background-color: #111;
   color: #fff;
   font-weight: 400;
   letter-spacing: 0.15em;
   text-align: center;
   border-radius: 50px;
   position: relative;
}

@media only screen and (max-width: 767px) {
   .button a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 41.3vw;
      height: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   .button a {
      display: inline-block;
      padding: 9px 0;
   }

   .button a:hover {
      opacity: 0.7;
   }
}

/* -- -- */
.list-menu {
   line-height: 22px;
   text-align: left;
}

.list-menu h3 {
   border-bottom: 2px solid #7b7b7b;
   padding-bottom: 12px;
}

.list-menu dl {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   letter-spacing: 0.15em;
   border-bottom: 1px solid #7b7b7b;
   padding: 12px 0;
}

.list-menu dl dt {
   flex: 1 0 65%;
}

.list-menu dl dd {
   text-align: right;
}

.remodal {
   background: url("../img/shared/bg01.jpg") repeat center top;
   color: #fff;
}

button.remodal-close {
   display: block;
   background: url("../img/shared/modal-close.png") no-repeat center top/cover;
}

@media only screen and (max-width: 767px) {
   .remodal-wrapper {
      padding: 4vw;
   }

   .remodal {
      padding: 20vw 0;
   }

   .remodal h2 {
      font-size: 10.4vw;
      line-height: 2;
      letter-spacing: 0;
   }

   .remodal .note {
      padding-top: 10vw;
   }

   .list-menu {
      padding-top: 6vw;
   }

   .list-menu .col+.col {
      padding-top: 12vw;
   }

   .list-menu .item+.item {
      padding-top: 12vw;
   }

   .list-menu h3 {
      font-size: 14px;
   }

   button.remodal-close {
      width: 4.8vw;
      height: 4.8vw;
      top: 4vw;
      right: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   .remodal {
      max-width: 1100px;
      padding: 120px 65px;
   }

   .remodal h2 {
      font-size: 50px;
      letter-spacing: 0;
      line-height: 50px;
   }

   .remodal .note {
      padding-top: 40px;
   }

   .list-menu {
      display: flex;
      flex-wrap: wrap;
      gap: 60px 36px;
      padding-top: 50px;
   }

   .list-menu .col {
      width: calc(50% - 18px);
   }

   .list-menu .item+.item {
      padding-top: 60px;
   }

   .list-menu h3 {
      font-size: 17px;
   }

   button.remodal-close {
      width: 21px;
      height: 21px;
      top: 40px;
      right: 50px;
   }
}

/* -- -- */
.d-flex {
   display: flex;
   flex-wrap: wrap;
}

/* -- -- */
.bg01 {
   background: url("../img/shared/bg-pattern01.jpg") repeat center top;
   color: #fff;
}

/* -- -- */
.wow-fade {
   opacity: 0;
   -webkit-transform: translate(10px, 10px);
   -ms-transform: translate(10px, 10px);
   transform: translate(10px, 10px);
   transition: all 1s cubic-bezier(0.42, 0, 0.58, 1);
}

.wow-fade[style*="visible"] {
   opacity: 1;
   -webkit-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   transform: translate(0, 0);
}

/* --- --- */
.bd-ra10 {
   border-radius: 10px;
}

/* --- --- */
.hvr-sweep-to-right {
   position: relative;
   z-index: 1;
}

.hvr-sweep-to-right:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #b1aeab;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transform-origin: 0 50%;
   transform-origin: 0 50%;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}

.hvr-sweep-to-right:hover {
   color: #000;
}

.hvr-sweep-to-right:hover:before {
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
}


.btn_reserve a{
    position: absolute;
    top: 728px;
        left: 25px;
	width: 180px;
	display: block;
	color:#fff;
	text-align: center;
	font-size: 18px;
	background-color: #cb2f21;
	border-radius: 50px;
	padding: 10px 0;
	text-decoration: none;
	box-sizing:border-box;
	line-height: 25px;
	letter-spacing: 2px;
    border:solid 1px #FFF;
}
.btn_reserve a:hover{
	background-color: #fff;
	color: #cb2f21;
    border:solid 1px #cb2f21;
}

.btn_reserve_fix a{
	width: 130px;
	display: block;
	color:#fff;
	text-align: center;
	font-size: 18px;
	background-color: #cb2f21;
	border-radius: 50px;
	padding: 10px 0;
	text-decoration: none;
	box-sizing:border-box;
	line-height: 25px;
	letter-spacing: 2px;
    border:solid 1px #FFF;
}
.btn_reserve_fix a:hover{
	background-color: #fff;
	color: #cb2f21;
    border:solid 1px #cb2f21;
}

.btn_reserve_common a{
	width: 180px;
    margin: 10px auto 0;
	display: block;
	color:#fff;
	text-align: center;
	font-size: 16px;
	background-color: #cb2f21;
	border-radius: 50px;
	padding: 10px 0;
	text-decoration: none;
	box-sizing:border-box;
	line-height: 25px;
	letter-spacing: 2px;
    border:solid 1px #FFF;
}
.btn_reserve_common a:hover{
	background-color: #fff;
	color: #cb2f21;
    border:solid 1px #cb2f21;
}
.mt_40{
    margin-top: 0px;
}
@media only screen and (max-width: 768px) {
.btn_reserve a{
    position: absolute;
    top:425px;
        left: 15px;
	width: 120px;
	display: block;
	color:#fff;
	text-align: center;
	font-size: 14px;
	background-color: #cb2f21;
	border-radius: 50px;
	padding: 5px 0;
	text-decoration: none;
	box-sizing:border-box;
	line-height: 25px;
	letter-spacing: 2px;
    border:solid 1px #FFF;
}
    .mt_40{
    margin-top: 40px;
}
}