@charset "UTF-8";

/*=============================================
 * body
 *=============================================*/
body {
   background: url("../img/shared/body-bg.jpg") repeat center top;
   color: #fff;
   font-family: "游明朝", YuMincho, 'Noto Serif JP', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   letter-spacing: 0.12em;
   line-height: 28px;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
}

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

/*=============================================
 * 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-noto-sans {
   font-family: "Noto Sans JP", sans-serif;
}

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

.fnt-shippori-mincho {
   font-family: "Shippori Mincho", 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;
      margin: 0 auto;
      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;
   }
}

@media only screen and (min-width: 1240px) {
   .wr_1100 {
      width: 1100px;
   }

   .wr_1200 {
      width: 1200px;
   }
}

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

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

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

@media only screen and (max-width: 767px) {
   header h1 {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 118vw;
      color: #d2d2d2;
      font-size: 10px;
      line-height: 22px;
      letter-spacing: 0.1em;
      text-align: center;
      position: absolute;
      top: 0;
      right: 4vw;
      left: 4vw;
   }

   header .logo {
      width: 40vw;
      position: absolute;
      top: 8vw;
      left: 50%;
      transform: translateX(-50%);
   }

   #menu-toggle {
      background: url("../img/shared/bg-pattern-04.jpg") repeat center top/15px auto;
      color: #fff;
      width: 100%;
      height: 100vh;
      overflow-y: auto;
      position: fixed;
      top: 0;
      left: 0;
      box-sizing: border-box;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s linear;
      z-index: 99;
      padding: 100px 0 200px;
      text-align: center;
   }

   #menu-toggle .nav {
      display: flex;
      flex-direction: column;
      gap: 6vw;
   }

   #menu-toggle .nav a {
      display: inline-block;
      font-weight: 700;
      font-size: 5vw;
      line-height: 2;
      letter-spacing: 0.14em;
      color: #a9a9a9;
      position: relative;
   }

   #menu-toggle .nav a:after {
      content: '・';
      width: 100%;
      position: absolute;
      bottom: -9px;
      left: 0;
      opacity: 0;
      transition: opacity 0.3s;
      line-height: 1;
      text-align: center;
   }

   #menu-toggle .nav a.current {
      color: #fff;
   }

   #menu-toggle .nav a.current:after {
      opacity: 1;
   }

   #menu-toggle .nav-sub {
      display: flex;
      justify-content: center;
      gap: 0px;
      font-weight: 300;
      font-size: 3.6vw;
      line-height: 1.5;
      letter-spacing: 0.15em;
      padding-top: 8vw;
   }

   #menu-toggle .nav-sub li {
      border-left: 1px solid #fff;
      padding: 0 3vw;
   }

   #menu-toggle .nav-sub li:last-child {
      border-right: 1px solid #fff;
   }

   #menu-toggle .nav-sub a {
      display: inline-block;
   }

   #menu-toggle .nav-sub a:hover {
      text-decoration: underline;
   }

   #menu-toggle .nav-sub li:nth-child(1) a {
      background: url("../img/shared/icon-news.png") no-repeat top 0.2vw left/4vw auto;
      padding-left: 6vw;
   }

   #menu-toggle .nav-sub li:nth-child(2) a {
      background: url("../img/shared/icon-location.png") no-repeat top 0.2vw left/3.5vw auto;
      padding-left: 6vw;
   }

   #menu-toggle .sns-icon {
      display: flex;
      justify-content: center;
      gap: 4vw;
      padding-top: 8vw;
   }

   #menu-toggle .sns-icon p {
      width: 6vw;
   }

   .navOpen #menu-toggle {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   .nav-fixed {
      display: none;
   }
}

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

   header h1 {
      color: #d2d2d2;
      font-size: 13px;
      line-height: 32px;
      letter-spacing: 0.1em;
      position: absolute;
      bottom: 0;
      left: 48px;
   }

   header .logo {
      width: 170px;
      position: absolute;
      top: 40px;
      left: 40px;
   }

   header .logo img {
      filter: drop-shadow(0px 0px 36px rgba(0, 0, 0, 0.46));
   }

   header .tel {
      font-weight: 400;
      font-size: 15px;
      line-height: 28px;
      letter-spacing: 0.12em;
      text-align: center;
   }

   header .tel span {
      display: inline-block;
      font-size: 25px;
      letter-spacing: 0.15em;
   }

   header .tel span:before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 21px;
      background: url("../img/shared/icon-tel.png") no-repeat bottom left/100% auto;
      margin-right: 2px;
   }

   header .sns-icon {
      display: flex;
      gap: 20px;
   }

   header .sns-icon p {
      width: 27px;
   }

   header .nav {
      display: flex;
      gap: 27px;
   }

   header .nav a {
      display: block;
      color: #a9a9a9;
      font-weight: 700;
      font-size: 17px;
      letter-spacing: 0.14em;
      line-height: 26px;
      position: relative;
      cursor: pointer;
   }

   header .nav a:after {
      content: '・';
      width: 100%;
      position: absolute;
      bottom: -9px;
      left: 0;
      opacity: 0;
      transition: opacity 0.3s;
      line-height: 1;
      text-align: center;
   }

   header .nav a:hover,
   header .nav a.current {
      color: #fff;
      opacity: 1;
   }

   header .nav a:hover:after,
   header .nav a.current:after {
      opacity: 1;
   }

   header .nav-sub {
      display: flex;
      gap: 0px;
      font-weight: 300;
      font-size: 13px;
      line-height: 26px;
      letter-spacing: 0.15em;
   }

   header .nav-sub li {
      border-left: 1px solid #fff;
      padding: 0 10px;
   }

   header .nav-sub li:last-child {
      border-right: 1px solid #fff;
   }

   header .nav-sub a {
      display: inline-block;
   }

   header .nav-sub a:hover {
      text-decoration: underline;
   }

   header .nav-sub li:nth-child(1) a {
      background: url("../img/shared/icon-news.png") no-repeat top 1px left/18px auto;
      padding-left: 23px;
   }

   header .nav-sub li:nth-child(2) a {
      background: url("../img/shared/icon-location.png") no-repeat top 2px left/13px auto;
      padding-left: 18px;
   }

   #menu-toggle .nav {
      border-bottom: 1px solid #fff;
      position: absolute;
      top: 30px;
      right: 0;
      padding: 0 44px 12px 0;
      text-shadow: 0px 0px 36px rgba(0, 0, 0, 0.46);
   }

   #menu-toggle .nav-sub {
      position: absolute;
      top: 220px;
      left: 48px;
      text-shadow: 0px 0px 36px rgba(0, 0, 0, 0.46);
   }

   #menu-toggle .sns-icon {
      position: absolute;
      top: 265px;
      left: 93px;
   }

   #menu-toggle .tel {
      text-shadow: 0px 0px 36px rgba(0, 0, 0, 0.46);
      position: absolute;
      top: 147px;
      left: 30px;
   }

   #menu-toggle .bnr-right {
      position: absolute;
      top: 142px;
      right: 0;
   }

   #menu-toggle .bnr-right li+li {
      padding-top: 20px;
   }

   #menu-toggle .bnr-right a {
      display: block;
      width: 54px;
      background: url("../img/shared/bg-pattern-05.jpg") repeat center top;
      color: #fff;
      font-weight: 700;
      font-size: 22px;
      line-height: 54px;
      letter-spacing: 0.14em;
      text-align: center;
      padding: 0 8px;
      position: relative;
      cursor: pointer;
   }

   #menu-toggle .bnr-right a:after {
      content: '';
      width: 29px;
      height: 29px;
      background: url("../img/shared/arrow-circle-r-white.png") no-repeat center top/cover;
      position: absolute;
      bottom: 17px;
      left: 50%;
      transform: translateX(-50%);
   }

   #menu-toggle .bnr-right li:nth-child(1) a {
      height: 247px;
   }

   #menu-toggle .bnr-right li:nth-child(1) a:before {
      content: '';
      width: 24px;
      height: 24px;
      background: url("../img/shared/icon-calendar.png") no-repeat center top/cover;
      position: absolute;
      top: 25px;
      left: 50%;
      transform: translateX(-50%);
   }

   #menu-toggle .bnr-right li:nth-child(2) a {
      height: 269px;
   }

   #menu-toggle .bnr-right li:nth-child(2) a:before {
      content: '';
      width: 25px;
      height: 28px;
      background: url("../img/shared/icon-shopping.png") no-repeat center top/cover;
      position: absolute;
      top: 25px;
      left: 50%;
      transform: translateX(-50%);
   }

   .nav-fixed {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100px;
      background: url("../img/shared/bg-pattern-04.jpg") repeat center top;
      color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      padding: 0;
      box-sizing: border-box;
   }

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

   .nav-fixed .wrap {
      display: grid;
      grid-template-areas: "tel sub sns bnr""nav nav nav bnr";
      align-items: center;
      gap: 0 0px;
   }

   .nav-fixed .nav {
      gap: 0 32px;
      grid-area: nav;
   }

   .nav-fixed .nav-sub {
      grid-area: sub;
   }

   .nav-fixed .sns-icon {
      grid-area: sns;
   }

   .nav-fixed .tel {
      display: flex;
      align-items: baseline;
      gap: 4px;
      grid-area: tel;
      letter-spacing: 0.05em;
   }

   .nav-fixed .bnr {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      grid-area: bnr;
   }

   .nav-fixed .bnr li {
      width: 152px;
   }

   .nav-fixed .bnr a {
      display: block;
      background: url("../img/shared/bg-pattern-05.jpg") repeat center top;
      color: #fff;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.14em;
      line-height: 20px;
      text-align: center;
      padding: 10px 0;
   }

   .nav-fixed .bnr li:nth-child(1) a:before {
      content: '';
      display: block;
      width: 24px;
      height: 28px;
      background: url("../img/shared/icon-calendar.png") no-repeat center top/100% auto;
      margin: 0 auto 2px;
   }

   .nav-fixed .bnr li:nth-child(2) a:before {
      content: '';
      display: block;
      width: 25px;
      height: 28px;
      background: url("../img/shared/icon-shopping.png") no-repeat center top/100% auto;
      margin: 0 auto 2px;
   }
}

/*=============================================
   section
*=============================================*/
#key {
   width: 100%;
   box-sizing: border-box;
   position: relative;
   z-index: -1;
}

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

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

@media only screen and (max-width: 767px) {
   #key {
      height: 120vw;
   }

   #key:after {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/shared/key-mask_sp.png") no-repeat center top/100% auto;
      position: absolute;
      top: 0;
      left: 0;
   }
}

@media only screen and (min-width: 768px) {
   #key {
      height: 100%;
   }

   #key:after {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/shared/key-mask.png") no-repeat center top/100% auto;
      position: absolute;
      top: 0;
      left: 0;
   }
}

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

/*=============================================
   footer
*=============================================*/
footer {
   box-sizing: border-box;
   position: relative;
}

@media only screen and (max-width: 767px) {
   footer {
      background-color: #000;
      color: #fff;
      font-size: 11px;
      line-height: 18px;
      text-align: center;
      padding: 11vw 0 24.5vw;
   }

   footer .box {
      display: flex;
      flex-direction: column;
   }

   footer .box li:nth-child(1) {
      order: 1;
   }

   footer .box li:nth-child(2) {
      order: 3;
   }

   footer .box li:nth-child(3) {
      order: 1;
   }

   footer .copy {
      display: inline-block;
      border-bottom: 1px solid;
      position: relative;
      margin-top: 6.4vw;
      padding: 2px 0;
   }

   footer .copy:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/shared/icon-url.png") no-repeat center right/14px auto;
      position: absolute;
      top: 0;
      right: -20px;
   }

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

   footer address {
      padding-top: 10vw;
   }

   .pagetop {
      width: 24vw;
      position: static;
      opacity: 1;
      visibility: visible;
      margin: 0 auto;
      padding-top: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   footer {
      background: #000 url("../img/shared/bg-pattern-01.png") repeat center top;
      padding: 32px 0 30px;
   }

   footer .nav {
      display: flex;
      justify-content: center;
      gap: 0 27px;
   }

   footer .nav a {
      display: block;
      color: #a9a9a9;
      font-weight: 700;
      font-size: 17px;
      letter-spacing: 0.14em;
      line-height: 26px;
      position: relative;
      position: relative;
      cursor: pointer;
   }

   footer .nav a:after {
      content: '・';
      width: 100%;
      position: absolute;
      bottom: -9px;
      left: 0;
      opacity: 0;
      transition: opacity 0.3s;
      line-height: 1;
      text-align: center;
   }

   footer .nav a.current,
   footer .nav a:hover {
      color: #fff;
      opacity: 1;
   }

   footer .nav a.current:after,
   footer .nav a:hover:after {
      opacity: 1;
   }

   footer .box {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      font-size: 14px;
      letter-spacing: 0.1em;
      line-height: 20px;
      padding-top: 50px;
   }

   footer .copy {
      display: inline-block;
      border-bottom: 1px solid;
      position: relative;
      margin: 0 33px 0 0;
   }

   footer .copy:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/shared/icon-url.png") no-repeat center right/16px auto;
      position: absolute;
      top: 0;
      right: -29px;
   }

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

   footer .cookies-link {
      padding-top: 12px;
   }

   footer .cookies-link a {
      display: inline-block;
      border-bottom: 1px solid transparent;
   }

   footer .cookies-link a:hover {
      border-color: #fff;
   }

   footer address {
      padding-top: 18px;
   }

   footer #socialbuttons {
      padding-bottom: 26px;
   }

   .pagetop {
      width: 128px;
      position: static;
      opacity: 1;
      visibility: visible;
      padding-top: 37px;
   }
}

@media only screen and (min-width: 1301px) {
   footer nav .wrap {
      width: 1300px;
   }

   footer .row .wrap {
      width: 1300px;
      padding: 0 5px 0 40px;
   }
}

/*=============================================
   css for ie 11 
*=============================================*/
#fixed-sp {
   width: 100%;
   background: url("../img/shared/bg-pattern-05.jpg") repeat center top;
   color: #fff;
   box-sizing: border-box;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 100;
   opacity: 1;
   visibility: visible;
}

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

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

#fixed-sp ul li {
   width: 27.6vw;
   height: 14vw;
   box-sizing: border-box;
   position: relative;
   font-weight: 700;
   font-size: 2.6vw;
   letter-spacing: 0.1em;
   line-height: 2;
   text-align: center;
}

#fixed-sp ul li+li:before {
   content: '';
   border-left: 1px solid #fff;
   position: absolute;
   top: 2vw;
   bottom: 2vw;
   left: 0;
}

#fixed-sp ul li a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1vw;
   height: 100%;
}

#fixed-sp ul li a img {
   width: auto;
   height: 5.6vw;
}

#fixed-sp ul li:nth-child(4) {
   width: 17.2vw;
   background: url("../img/shared/hamburger.png") no-repeat center/100% auto;
}

#fixed-sp ul li:nth-child(4):before {
   display: none;
}

#fixed-sp ul li:nth-child(4).is-active {
   background-image: url("../img/shared/hamburger_close.png");
}

/* iPhone X */
@media only screen and (max-width: 767px) and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
   footer {
      padding-bottom: calc(env(safe-area-inset-bottom) + 24.5vw);
   }

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

/* iPhone XR */
@media only screen and (max-width: 767px) and (min-device-width: 414px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
   footer {
      padding-bottom: calc(env(safe-area-inset-bottom) + 24.5vw);
   }

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

/* iPhone 11 */
@media only screen and (max-width: 767px) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
   footer {
      padding-bottom: calc(env(safe-area-inset-bottom) + 24.5vw);
   }

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

@media only screen and (max-width: 767px) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
   footer {
      padding-bottom: calc(env(safe-area-inset-bottom) + 24.5vw);
   }

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

@media only screen and (max-width: 767px) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
   footer {
      padding-bottom: calc(env(safe-area-inset-bottom) + 24.5vw);
   }

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

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

.sp {
   display: block;
}

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

   .sp {
      display: none;
   }
}

/* -- -- */
.shadow-img {
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.22);
}

.cl-red {
   color: #910000;
}

.cl-brown {
   color: #34332d;
}

.cl-yellow {
   color: #c4ab6f;
}

.cl-white {
   color: #f3ece9;
}

.cl-white1 {
   color: #fff;
}

.cl-black {
   color: #222;
}

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

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

.uppercase {
   text-transform: uppercase;
}

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 {
      opacity: 0.7;
   }
}

.img-object {
   -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 100%;
}

/* -- -- */
#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;
   border: 0;
   font-size: 0;
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
}

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

.slick-prev {
   left: 0;
}

.slick-next {
   right: 0;
}

.slick-dots {
   display: flex;
   align-items: center;
}

.slick-dots li {
   display: block;
   font-size: 0;
   cursor: pointer;
   position: relative;
}

.slick-dots button {
   font-size: 0;
   background: #fff;
   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: 1px solid #fff;
}

.slick-dots .slick-active button {
   background: url("../img/shared/bg-pattern-05.jpg") repeat center top;
}

@media only screen and (max-width: 767px) {
   .slick-arrow {
      display: block;
      width: 5vw;
      height: 10vw;
   }

   .slick-dots {
      justify-content: center;
      gap: 5vw;
      padding-top: 6vw;
   }

   .slick-dots li {
      width: 3.8vw;
      height: 3.8vw;
   }
}

@media only screen and (min-width: 768px) {
   .slick-arrow {
      display: block;
      width: 30px;
      height: 60px;
   }

   .slick-dots {
      gap: 25px;
   }

   .slick-dots li {
      width: 15px;
      height: 15px;
      position: relative;
   }

   .slick-dots li button:hover {
      opacity: 0.7;
   }
}

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

.button a {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
   .button {
      text-align: center;
   }

   .button a {
      display: flex;
      align-items: center;
      width: 78.6vw;
      height: 14vw;
      font-family: "Shippori Mincho", serif;
      font-weight: 700;
      font-size: 4.2vw;
      line-height: 2;
      letter-spacing: 0.14em;
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      color: #910000;
      margin: 0 auto;
      padding: 0 8vw 0;
      position: relative;
   }

   .button a:after {
      content: '';
      width: 5.6vw;
      height: 5.6vw;
      background: url("../img/shared/arrow-circle-r.png") no-repeat center/100% auto;
      position: absolute;
      top: 50%;
      right: 4.8vw;
      transform: translateY(-50%);
   }

   .button.black a {
      background: url("../img/shared/body-bg.jpg") repeat center top;
      color: #fff;
   }

   .btn_m1 a {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top !important;
      color: #910000 !important;
   }

   .button.black a:after {
      background-image: url("../img/shared/arrow-circle-r-white.png");
   }

   .button.red a {
      background: url("../img/shared/bg-pattern-05.jpg") repeat center top;
      color: #fff;
   }

   .button.red a:after {
      background-image: url("../img/shared/arrow-circle-r-white.png");
   }

   .button.cart a:before {
      content: '';
      display: inline-block;
      vertical-align: text-top;
      width: 4.8vw;
      height: 5.6vw;
      background: url("../img/shared/icon-shopping.png") no-repeat center/100% auto;
      margin-right: 2vw;
   }

   .button.web a:before {
      content: '';
      display: inline-block;
      vertical-align: baseline;
      width: 4.8vw;
      height: 4.8vw;
      background: url("../img/shared/icon-calendar.png") no-repeat center/100% auto;
      margin-right: 2vw;
   }

   .button.insta a:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 5.6vw;
      height: 5.6vw;
      background: url("../img/shared/icon-insta.png") no-repeat center/100% auto;
      margin-right: 2vw;
   }

   .button.modal a:after {
      background-image: url("../img/shared/icon-popup.png");
      width: 4vw;
      height: 4vw;
   }

   .button.black2 a:after {
      /* filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%); */
      filter: invert(85%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
   }

   .button.modal.red a:after,
   .button.modal.black a:after {
      background-image: url("../img/shared/icon-popup-white.png");
   }
}

@media only screen and (min-width: 768px) {
   .button a {
      display: block;
      width: 393px;
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      color: #910000;
      font-family: "Shippori Mincho", serif;
      font-weight: 700;
      font-size: 22px;
      line-height: 54px;
      letter-spacing: 0.14em;
      text-align: left;
      box-sizing: border-box;
      position: relative;
      text-transform: uppercase;
      padding: 8px 42px;
   }

   .button a:after {
      content: '';
      width: 27px;
      height: 27px;
      background: url("../img/shared/arrow-circle-r.png") repeat center top/100% auto;
      position: absolute;
      top: 50%;
      right: 24px;
      transform: translate(0, -50%);
      transition: transform 0.3s;
   }

   .button a:hover {
      opacity: 0.7;
   }

   .button a:hover:after {
      transform: translate(5px, -50%);
   }

   .button.black a {
      background: url("../img/shared/body-bg.jpg") repeat center top;
      color: #fff;
   }

   .btn_m1 a {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top !important;
      color: #910000 !important;
   }

   .button.black a:after {
      background-image: url("../img/shared/arrow-circle-r-white.png");
   }

   .button.red a {
      background: url("../img/shared/bg-pattern-05.jpg") repeat center top;
      color: #fff;
   }

   .button.red a:after {
      background-image: url("../img/shared/arrow-circle-r-white.png");
   }

   .button.cart a:before {
      content: '';
      display: inline-block;
      vertical-align: text-top;
      width: 25px;
      height: 28px;
      background: url("../img/shared/icon-shopping.png") no-repeat center top/cover;
      margin-right: 12px;
   }

   .button.web a:before {
      content: '';
      display: inline-block;
      vertical-align: baseline;
      width: 24px;
      height: 24px;
      background: url("../img/shared/icon-calendar.png") no-repeat center top/cover;
      margin-right: 12px;
   }

   .button.insta a:before {
      content: '';
      display: inline-block;
      vertical-align: sub;
      width: 27px;
      height: 27px;
      background: url("../img/shared/icon-insta.png") no-repeat center top/cover;
      margin-right: 12px;
   }

   .button.modal a:after {
      background-image: url("../img/shared/icon-popup.png");
      width: 25px;
      height: 25px;
   }

   .button.black2 a:after {
      /* filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%); */
      filter: invert(85%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
   }

   .button.modal.red a:after,
   .button.modal.black a:after {
      background-image: url("../img/shared/icon-popup-white.png");
   }

   .button.modal a:hover:after {
      transform: translate(0px, -50%);
   }
}

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

/* -- -- */
.js-title .cs-line {
   display: block;
   overflow: hidden;
}

.js-title ._l {
   display: block;
   transform: translateY(100%);
   transition: all 0.5s linear;
}

.js-title[style*="visible"] ._l {
   transform: translateY(0%);
}

.js-title.txt-vertical ._l {
   display: block;
   transform: translate(100%, 0);
}

.js-title.txt-vertical[style*="visible"] ._l {
   transform: translate(0%, 0);
}

@media only screen and (min-width: 768px) {
   .js-title.txt-vertical-pc ._l {
      display: block;
      transform: translate(100%, 0);
   }

   .js-title.txt-vertical-pc[style*="visible"] ._l {
      transform: translate(0%, 0);
   }
}

.fadeIn {
   animation-duration: 1.75s;
   animation-delay: 0.15s;
}

@media only screen and (max-width: 767px) {
   .fadeIn_sp {
      -webkit-animation-delay: 0.5s;
      animation-delay: 0.5s;
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
   }
}

/* --- --- */
.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);
}

/* --- --- */
@media only screen and (max-width: 767px) {
   .h-en {
      font-size: 4.8vw;
      letter-spacing: 0.2em;
      line-height: 2;
   }

   .h-30 {
      font-weight: 400;
      font-size: 5.6vw;
      line-height: 1.5;
      letter-spacing: 0.14em;
   }

   .h-36 {
      font-weight: 400;
      font-size: 6.2vw;
      line-height: 1.5;
      letter-spacing: 0.14em;
   }

   .h-38 {
      font-weight: 400;
      font-size: 6.4vw;
      line-height: 1.5;
      letter-spacing: 0.14em;
   }

   .h-45 {
      font-weight: 400;
      font-size: 7.8vw;
      line-height: 1.5;
      letter-spacing: 0.14em;
   }

   .h-50 {
      font-weight: 400;
      font-size: 8.6vw;
      line-height: 1.5;
      letter-spacing: 0.14em;
   }

   .h-78 {
      font-weight: 700;
      font-size: 10.4vw;
      line-height: 1.5;
      letter-spacing: 0.14em;
   }

   .price {
      font-weight: 400;
      font-size: 5vw;
      letter-spacing: 0.1em;
      line-height: 1.5;
   }

   .price span {
      font-size: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   .h-en {
      font-size: 25px;
      letter-spacing: 0.2em;
      line-height: 45px;
   }

   .h-30 {
      font-weight: 400;
      font-size: 30px;
      line-height: 60px;
      letter-spacing: 0.14em;
   }

   .h-36 {
      font-weight: 400;
      font-size: 36px;
      line-height: 70px;
      letter-spacing: 0.14em;
   }

   .h-38 {
      font-weight: 400;
      font-size: 38px;
      line-height: 70px;
      letter-spacing: 0.14em;
   }

   .h-45 {
      font-weight: 400;
      font-size: 45px;
      line-height: 70px;
      letter-spacing: 0.14em;
   }

   .h-50 {
      font-weight: 400;
      font-size: 50px;
      line-height: 70px;
      letter-spacing: 0.14em;
   }

   .h-78 {
      font-weight: 700;
      font-size: 78px;
      line-height: 90px;
      letter-spacing: 0.06em;
   }

   .price {
      font-weight: 400;
      font-size: 25px;
      letter-spacing: 0.14em;
      line-height: 60px;
   }

   .price span {
      font-size: 30px;
   }
}

/* -- -- */
.list-menu {
   text-align: left;
}

.list-menu h3 {
   text-align: center;
   border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.list-menu dl {
   display: flex;
   gap: 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.5);
   letter-spacing: 0.12em;
   line-height: 24px;
   padding: 0 0 5px;
}

.list-menu dl+dl {
   padding-top: 18px;
}

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

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

.list-menu dl.dl1 {
   display: block;
}

@media only screen and (max-width: 767px) {
   .list-menu {
      padding-top: 12vw;
   }

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

   .list-menu .col+.col,
   .list-menu .item+.item {
      padding-top: 8vw;
   }

   .list-menu h3 {
      font-size: 5vw;
      line-height: 1.5;
      border-bottom: 1px solid #000;
      margin-bottom: 4vw;
      padding-bottom: 2vw;
   }

   .list-menu h4 {
      text-align: left;
      padding-top: 18px;
   }
}

@media only screen and (min-width: 768px) {
   .list-menu {
      display: flex;
      gap: 40px;
   }

   .list-menu .col {
      width: 100%;
   }

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

   .list-menu h3 {
      font-size: 18px;
      line-height: 32px;
      padding: 0 0 5px;
      margin-bottom: 25px;
   }

   .list-menu h4 {
      text-align: left;
      padding-top: 18px;
   }
}

/* -- -- */
[data-remodal-target] {
   cursor: pointer;
}

.remodal-overlay {
   background: rgba(0, 0, 0, 0.5);
}

.remodal {
   background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
   color: #000;
}

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

   .remodal .wrap {
      padding: 0 8vw;
   }
}

@media only screen and (min-width: 768px) {
   .remodal {
      padding: 90px 0 150px;
   }

   .remodal h2 {
      letter-spacing: 0.23em;
      line-height: 65px;
   }

   .remodal .note {
      opacity: 0.7;
   }

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

#shop-list {
   position: relative;
}

@media only screen and (max-width: 767px) {

   #shop-list .row-1,
   #shop-list .row-2 {
      padding: 16vw 0;
      position: relative;
   }

   #shop-list .row-1 {
      padding-top: 0;
   }

   #shop-list .row-1:before {
      content: '';
      width: 92vw;
      height: 0;
      border-bottom: 1px solid #fff;
      position: absolute;
      bottom: 0;
      left: 4vw;
   }

   #shop-list .tel {
      font-weight: 400;
      font-size: 4vw;
      line-height: 1.5;
      letter-spacing: 0.12em;
      padding-top: 12vw;
      text-align: center;
   }

   #shop-list .tel span {
      display: inline-block;
      background: url("../img/shared/icon-tel-yellow.png") no-repeat bottom left/4vw auto;
      font-size: 6.4vw;
      letter-spacing: 0.12em;
      line-height: 1;
      padding-left: 6vw;
      margin-top: 1vw;
   }

   #shop-list .tel small {
      font-size: 11px;
      line-height: 18px;
   }

   #shop-list .sns-icon {
      display: flex;
      justify-content: center;
      gap: 6vw;
      padding-top: 8vw;
   }

   #shop-list .sns-icon p {
      width: 8vw;
   }

   #shop-list .col-cta .button {
      padding-top: 8vw;
   }

   #shop-list .col-info {
      font-size: 12px;
      line-height: 18px;
      word-break: break-all;
      padding: 16vw 3vw 0;
   }

   #shop-list .col-info dl {
      display: grid;
      grid-template-columns: 80px auto;
   }

   #shop-list .col-info dl+dl {
      padding-top: 5vw;
   }
}

@media only screen and (min-width: 768px) {
   #shop-list .row-1 {
      padding: 0 0 80px;
      position: relative;
   }

   #shop-list .row-1:before {
      content: '';
      width: 100%;
      max-width: 1218px;
      height: 0;
      border-bottom: 1px solid #fff;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
   }

   #shop-list .row-2 {
      padding: 90px 0 117px;
   }

   #shop-list .wrap {
      display: flex;
      justify-content: flex-end;
      gap: 50px;
   }

   #shop-list .tel {
      text-align: center;
      font-size: 18px;
      line-height: 35px;
      letter-spacing: 0.12em;
      padding-top: 42px;
   }

   #shop-list .tel span {
      display: inline-block;
      font-size: 32px;
      letter-spacing: 0.12em;
      background: url("../img/shared/icon-tel-yellow.png") no-repeat bottom left/20px auto;
      padding-left: 25px;
   }

   #shop-list .tel small {
      display: inline-block;
      font-size: 14px;
      line-height: 25px;
      padding-top: 7px;
   }

   #shop-list .sns-icon {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding-top: 30px;
   }

   #shop-list .sns-icon p {
      width: 27px;
   }

   #shop-list .col-cta .button {
      padding-top: 32px;
   }

   #shop-list .col-info {
      width: 500px;
      line-height: 25px;
   }

   #shop-list .col-info dl {
      display: grid;
      grid-template-columns: 117px auto;
      padding-bottom: 24px;
   }

   #shop-list .col-info dl dd a {
      border-bottom: 1px solid #fff;
   }

   #shop-list .col-info dl dd a i {
      display: inline-block;
      vertical-align: text-top;
      width: 11px;
      height: 17px;
      background: url("../img/shared/icon-location.png") no-repeat center left/11px auto;
      margin-right: 2px;
   }

   #shop-list .col-info dl dd a:hover {
      border-bottom-color: transparent;
   }
}

.tyou_m2 {
   text-align: center;
   margin: 0 0 20px 0;
}

.tyou_m3 {
   display: flex;
   justify-content: end;
   margin: 40px auto 0px;
}

.btn_m1 {
   margin: 0 auto 0;
}

@media only screen and (min-width: 768px) {
   .btn_m1 {
      margin-right: 105px;
   }

   .tyou_m3 {
      margin: 40px 0px 0px 0px;
   }
}