/*=============================================
 * body
 *=============================================*/
:root {
  --primary: #e8e8e8;
  --white: #fff;
  --violet: #64316c;
}

/* zen-old-mincho-regular - japanese_latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Zen Old Mincho";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/zen-old-mincho-v13-japanese_latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* zen-old-mincho-500 - japanese_latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Zen Old Mincho";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/zen-old-mincho-v13-japanese_latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* zen-old-mincho-600 - japanese_latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Zen Old Mincho";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/zen-old-mincho-v13-japanese_latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* zen-old-mincho-700 - japanese_latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Zen Old Mincho";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/zen-old-mincho-v13-japanese_latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* shippori-mincho-500 - japanese_latin */
/* gloock-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gloock-v8-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  font-size: 14px;
  line-height: 2.17;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.18em;
  font-family: "Zen Old Mincho";
  min-width: inherit;
  min-height: inherit;
  max-height: 100%;
  background: url("../img/shared/bg_sp.jpg") repeat-y center/100% auto;
  text-align: justify;
}

@media only screen and (min-width: 768px) {
  body {
    letter-spacing: 2px;
    font-size: 16px;
    line-height: 35px;
    background: url("../img/shared/bg.jpg") repeat top center;
  }
}

.nav--opened {
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.nav--opened #pagetop,
.nav--opened .fx-btn {
  z-index: -1;
  opacity: 0;
}

body.nav--opened,
body.nav--opened *,
body.nav--opened *:hover,
body.nav--opened *:focus,
body.nav--opened *:active {
  pointer-events: none !important;
  touch-action: none !important;
}

body.nav--opened .hamburger,
body.nav--opened #menu_toggle,
body.nav--opened #menu_toggle *,
body.nav--opened .nav-fixed.fixed,
body.nav--opened .nav-fixed.fixed *,
body.nav--opened #ft_fixed,
body.nav--opened #ft_fixed * {
  pointer-events: visible !important;
  touch-action: auto !important;
}

/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/
.fnt-shippori {
  font-family: "Shippori Mincho";
  font-weight: 500;
}

.fnt-zen {
  font-family: "Zen Old Mincho";
}

.fnt-gloock {
  font-family: "Gloock";
  font-weight: 400;
}

/*=============================================
 * main
 *=============================================*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

a[href^="tel:"]:hover {
  text-decoration: none;
}

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

  .txt {
    padding: 0 3.3%;
  }

  .df-sp {
    display: flex !important;
    justify-content: space-between;
  }
}

i {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  line-height: 1;
  position: relative;
}

section {
  position: relative;
}

.fz40 {
  font-size: 6.5vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz40 {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

.fz38 {
  font-size: 6.2vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz38 {
    font-size: 38px;
    letter-spacing: 2px;
  }
}

.fz35 {
  font-size: 6vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz35 {
    font-size: 35px;
    letter-spacing: 2px;
  }
}

.fz34 {
  font-size: 5.9vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz34 {
    font-size: 34px;
    letter-spacing: 2px;
  }
}

.fz33 {
  font-size: 5.8vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz33 {
    font-size: 33px;
    letter-spacing: 2px;
  }
}

.fz32 {
  font-size: 5.6vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz32 {
    font-size: 32px;
    letter-spacing: 2px;
  }
}

.fz31 {
  font-size: 5.4vw;
  letter-spacing: 0.12em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz31 {
    font-size: 31px;
    letter-spacing: 2px;
  }
}

.fz30 {
  font-size: 5.3vw;
  letter-spacing: 0.12em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz30 {
    font-size: 30px;
    letter-spacing: 2px;
  }
}

.fz28 {
  font-size: 4.7vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz28 {
    font-size: 28px;
    letter-spacing: 2px;
  }
}

.fz26 {
  font-size: 4.6vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz26 {
    font-size: 26px;
    letter-spacing: 2px;
  }
}

.fz25 {
  font-size: 4.5vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz25 {
    font-size: 25px;
    letter-spacing: 2px;
  }
}

.fz21 {
  font-size: 4.2vw;
  letter-spacing: 0.18em;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .fz21 {
    font-size: 21px;
    letter-spacing: 2px;
  }
}

/*=============================================
 * btn-link
 *=============================================*/
.btn-link {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--violet);
  width: 100%;
  max-width: 308px;
  margin: 0 auto;
  padding: 15px 0;
}

.btn-link:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 2px;
  width: 21px;
  background: var(--violet);
}

.btn-link.btn-popup:before {
  background: url("../img/shared/icon_popup.png") no-repeat center/100% auto;
  width: 13px;
  height: 13px;
  left: auto;
  right: 17px;
  transform: translateY(-50%);
}

.btn-link:hover {
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .btn-link {
    font-size: 19px;
    max-width: 410px;
    padding: 10px 0;
  }

  .btn-link:before {
    width: 24px;
    left: calc(100% - 24px);
  }

  .btn-link:hover {
    text-decoration: none;
  }

  .btn-link:hover:before {
    animation: hoverline 0.5s linear;
  }

  .btn-link.btn-popup {
    padding: 15px 0;
    letter-spacing: 6px;
    transition: ease 0.3s;
  }

  .btn-link.btn-popup:before {
    width: 17px;
    height: 17px;
  }

  .btn-link.btn-popup:hover {
    opacity: 0.7;
  }

  .btn-link.btn-popup:hover:before {
    animation: none;
  }
}

@keyframes hoverline {
  0% {
    width: 0;
  }

  100% {
    width: 21px;
  }
}

.btn-reverse {
  height: 60px;
  padding-left: 0;
  font-size: 17px;
  border: none !important;
  background: url("../img/shared/bg_violet.jpg") repeat center;
  transition: ease 0.3s;
}

.btn-reverse i {
  width: 21px;
  margin-right: 10px;
}

.btn-reverse:before {
  display: none;
}

.btn-reverse:hover {
  opacity: 0.7;
}

/*=============================================
 * tel
 *=============================================*/
.tel {
  line-height: 1.4;
}

.tel p {
  display: flex;
  align-items: flex-end;
  font-size: 21px;
  font-weight: 500;
}

.tel p span {
  display: block;
  font-size: 15px;
}

@media only screen and (min-width: 768px) {
  .tel p {
    font-size: 24px;
    letter-spacing: 3px;
  }

  .tel p span {
    font-size: 17px;
  }
}

.gnav1 li {
  margin-bottom: 9px;
}

.gnav1 a {
  display: block;
  line-height: 1;
  transition: ease 0.3s;
  padding-bottom: 5px;
  position: relative;
}

.gnav1 a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: url("../img/shared/line.jpg") repeat-x left bottom;
  opacity: 0;
}

.gnav1 a span {
  display: block;
}

.gnav1 a span:nth-child(1) {
  font-size: 20px;
  font-weight: 400;
  font-family: "Gloock";
  color: #fff;
  letter-spacing: 3px;
}

.gnav1 a span:nth-child(2) {
  font-size: 14px;
  color: #828180;
  line-height: 17px;
  margin-top: 5px;
}

.gnav1 a.active,
.gnav1 a:hover {
  text-decoration: none;
}

.gnav1 a.active:before,
.gnav1 a:hover:before {
  opacity: 1;
}

.gnav1 li:first-child a span:nth-child(2) {
  margin-top: 0;
}

.gnav2 {
  border: 1px solid #787776;
}

.gnav2 li {
  height: 100%;
  width: 50%;
}

.gnav2 li:nth-child(1) {
  border-right: 1px solid #787776;
}

.gnav2 li a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  font-family: "Gloock";
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out;
}

.gnav2 li a:hover {
  text-decoration: none;
  opacity: 0.7;
}

@media only screen and (min-width: 768px) {
  .gnav2 a {
    font-size: 16px;
    letter-spacing: 2px;
  }
}

/*=============================================
 * header
 *=============================================*/
header {
  position: relative;
  z-index: 1;
}

header h1 {
  text-align: center;
  margin: 3vw 5% 0;
  font-size: 10px;
  line-height: 16px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.8);
}

header .logo {
  margin: 5vw auto;
  width: 37.3vw;
  display: block;
}

@media only screen and (min-width: 768px) {
  header {
    background: url("../img/shared/header_deco.jpg") no-repeat top left;
  }

  header h1 {
    text-align: left;
    position: absolute;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    left: 200px;
    bottom: 34px;
  }

  header .logo {
    margin: 0;
    width: 257px;
    position: absolute;
    left: 85px;
    top: 123px;
    z-index: 1;
  }

  header .header-top>.df {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  header .header-top .btn-reverse {
    display: block;
    text-align: center;
    width: 167px;
    height: 100px;
    font-size: 16px;
    letter-spacing: 0.8px;
    box-sizing: border-box;
    padding: 23px 0 0 0;
    line-height: 1;
    margin: 0 0 0 18px;
  }

  header .header-top .btn-reverse i {
    width: 32px;
    margin: 0 auto 11px;
  }

  header .header-top .gnav2 {
    width: 128px;
    height: 30px;
    margin-right: 25px;
  }

  header .sidebar {
    position: absolute;
    left: 89px;
    top: 307px;
    width: 215px;
    z-index: 1;
  }

  header .btn-link {
    border: 1px solid #898887;
    margin: 24px 0 24px 0;
    width: 203px;
    padding: 5px 0;
  }

  header .btn-link:before {
    background-color: #898887;
    height: 1px;
  }
}

#key {
  position: relative;
  z-index: 0;
}

@media only screen and (min-width: 768px) {
  #key {
    margin-left: auto;
    width: calc(100% - 330px);
    height: 795px;
  }

  #key li {
    width: 100%;
    height: 795px;
  }

  #key li img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  }

  #key p {
    width: 100%;
    height: 795px;
  }

  #key p img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  }
}

/*=============================================
 * nav
 *=============================================*/
.gnav a {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .gnav a {
    display: inline-block;
  }
}

/*=============================================
 * animation
 *=============================================*/
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation: 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) fadeInUp;
}

@-webkit-keyframes fadeInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    opacity: 1;
    transform: translateZ(0)
  }

}

@keyframes fadeInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    opacity: 1;
    transform: translateZ(0)
  }

}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}

@-webkit-keyframes fadeInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes fadeInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

.animated {
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}

@media (prefers-brownuced-motion) {
  .animated {
    -webkit-animation: unset !important;
    -webkit-transition: none !important;
    animation: unset !important;
    transition: none !important;
  }
}

#menu_toggle {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  z-index: 999;
  padding: 15vw 9% 30vw;
  background: #000 url("../img/shared/menu_bg.jpg") no-repeat center top/100% auto;
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

#menu_toggle .inner {
  width: 100%;
}

#menu_toggle .gnav .btn-link {
  border: 1px solid #fff;
  margin: 24px 0 24px 0;
  width: 100%;
  padding: 15px 0;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 17px;
}

#menu_toggle .gnav .btn-link:before {
  background-color: #fff;
  height: 1px;
}

#menu_toggle .sns {
  margin: 0 auto;
  width: 32px;
}

@media only screen and (max-width: 767px) {
  #menu_toggle .gnav1 {
    margin: 0 auto;
    width: 195px;
  }

  #menu_toggle .gnav1 a {
    display: block;
  }

  #menu_toggle .gnav1 a:before {
    left: auto;
    right: 0;
    width: 200%;
  }

  #menu_toggle .gnav1 a span:nth-child(1) {
    font-size: 17px;
  }

  #menu_toggle .gnav1 a span:nth-child(2) {
    font-size: 11px;
  }

  #menu_toggle .gnav2 {
    margin: 23px auto 35px;
    width: 225px;
  }

  #menu_toggle .gnav2 a {
    line-height: 34px;
  }
}

@media only screen and (min-width: 768px) {
  #menu_toggle {
    padding: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
  }

  #menu_toggle .inner {
    max-width: 694px;
    box-sizing: border-box;
    padding-right: 28px;
  }

  #menu_toggle .inner>.df-pc {
    position: relative;
  }

  #menu_toggle .gnav {
    width: 213px;
  }

  #menu_toggle .gnav .btn-link {
    font-size: 18px;
    width: 205px;
    height: 41px;
    margin-bottom: 0;
  }

  #menu_toggle .menu-contact {
    width: 347px;
    margin-top: 96px;
  }

  #menu_toggle .contact-box {
    padding: 30px 20px 40px;
  }

  #menu_toggle .btn-reverse {
    width: 241px;
    height: 50px;
    font-size: 18px;
  }

  #menu_toggle .btn-reverse i {
    width: 24px;
  }

  #menu_toggle .sns {
    position: absolute;
    top: 298px;
    left: 0;
    width: 347px;
  }

  #menu_toggle .sns a {
    display: block;
    margin: 0 auto;
    width: 36px;
  }

  #menu_toggle .gnav2 {
    position: absolute;
    left: 110px;
    top: 358px;
    width: 128px;
  }

  #menu_toggle .gnav2 a {
    line-height: 30px;
    font-size: 15px;
  }
}

.navOpen #menu_toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}

/*=============================================
 * hamburger
 *=============================================*/
.hamburger {
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .hamburger {
    background: url("../img/shared/fixed_sp_04_on.jpg") no-repeat center/cover;
  }
}

@media only screen and (min-width: 768px) {
  .hamburger {
    width: 115px;
    height: 86px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: ease 0.3s;
  }

  .hamburger:hover {
    opacity: 0.7;
  }
}

@media only screen and (min-width: 768px) {
  .has_nav .hamburger {
    opacity: 1;
    pointer-events: visible;
  }
}

.navOpen .hamburger img {
  opacity: 0;
}

@media only screen and (min-width: 768px) {
  .navOpen .hamburger {
    background: url("../img/shared/hambuger_pc_on.jpg") no-repeat center/cover;
  }
}

.btn-zoom {
  display: block;
  overflow: hidden;
  position: relative;
}

.btn-zoom .bnr-img {
  height: 100%;
}

.btn-zoom .bnr-img img {
  transition: 0.5s all ease-in-out !important;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.btn-zoom:hover {
  text-decoration: none;
}

.btn-zoom:hover .bnr-img img {
  transform: scale(1.05) !important;
}

.btn-zoom:hover img {
  opacity: 1 !important;
}

.nav-fixed {
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.nav-fixed .nav-left {
  padding: 32px 0 0 28px;
  align-items: center;
  justify-content: flex-start;
}

.nav-fixed .btn-reverse {
  width: 134px;
  height: 42px;
  font-size: 16px;
  margin-right: 17px;
}

.nav-fixed .btn-reverse i {
  width: 21px;
  margin-right: 5px;
}

.nav-fixed .tel p {
  font-size: 21px;
}

.nav-fixed .tel p span {
  font-size: 15px;
}

.nav-fixed .map-link {
  position: absolute;
  bottom: -104px;
  right: 44px;
  display: block;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.nav-fixed .map-link i {
  margin-bottom: 10px;
}

.nav-fixed .map-link span {
  display: inline-block;
  writing-mode: vertical-lr;
}

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

.nav-fixed.fixed {
  opacity: 1;
  pointer-events: visible;
}

/*=============================================
 * footer
 *=============================================*/
footer {
  padding: 13vw 0 30vw;
  text-align: center;
  background-color: #000;
}

footer .footer-bnr1 {
  display: block;
  margin: 0 auto 8vw;
  width: 70vw;
}

footer .btn-zoom {
  height: 30.4vw;
}

footer .btn-zoom .btn-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9.3vw;
  max-width: 46px;
  z-index: 1;
}

footer .btn-zoom .btn-txt {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 51.3vw;
}

footer .cookie-link {
  margin-top: 2px;
  margin-bottom: 20px;
}

footer .cookie-link a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #717171;
  letter-spacing: 0.12em;
  position: relative;
}

footer .cookie-link a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #717171;
}

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

footer .cookie-link a:hover span:before {
  opacity: 0;
}

footer .btn-copy {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 13px;
}

footer .btn-copy i {
  width: 14px;
  margin-right: 5px;
  position: relative;
}

footer .btn-copy span {
  display: block;
  margin-top: 2px;
}

footer address {
  margin-top: 9vw;
  font-size: 14px;
  letter-spacing: 0.12em;
}

footer #pagetop {
  margin: 0 auto;
  width: 74px;
  margin-top: 11vw;
}

footer .footer-logo {
  margin: 0 auto;
  width: 180px;
}

footer .footer-txt {
  margin: 5px 0 25px;
  font-weight: 500;
}

footer .tel p {
  justify-content: center;
}

footer .btn-reverse {
  margin: 20px auto 30px;
  width: 261px;
  height: 50px;
}

footer .sns {
  margin-bottom: 50px;
}

footer .footer-right {
  text-align: left;
  margin-bottom: 0;
}

footer .footer-right dl {
  margin-bottom: 18px;
  letter-spacing: 1.5px;
  line-height: 21px;
}

footer .footer-right dl dt {
  width: 90px;
}

footer .footer-right dl dd {
  width: calc(100% - 90px);
}

footer .link_gmap {
  display: inline-block;
  border: 1px solid #9b780e;
  color: #9b780e;
  padding: 0 5px 2px;
  margin-left: 10px;
}

footer .link_gmap:hover {
  text-decoration: none;
  opacity: 0.7;
}

@media only screen and (max-width: 767px) {
  footer #socialbuttons>* {
    margin: 0 12px;
  }

  footer .link_gmap {
    font-size: 90%;
    line-height: 1.5;
  }
}

@media only screen and (min-width: 768px) {
  footer {
    padding: 82px 30px 75px;
  }

  footer .footer-nav {
    font-size: 17px;
    margin-bottom: 68px;
  }

  footer .footer-nav ul {
    justify-content: center;
  }

  footer .footer-nav ul li {
    display: flex;
    align-items: center;
  }

  footer .footer-nav ul li:before {
    content: "";
    display: block;
    width: 1px;
    height: 22px;
    background-color: #404040;
    margin: 0 10px;
  }

  footer .footer-nav ul li:first-child:before {
    display: none;
  }

  footer .footer-nav ul a {
    line-height: 22px;
    display: block;
  }

  footer .footer-nav ul a:hover,
  footer .footer-nav ul a.active {
    text-decoration: none;
    color: #6c6537;
  }

  footer .footer-bnr1 {
    display: block;
    margin: 0 auto 35px;
    width: 300px;
  }

  footer .btn-zoom {
    width: 500px;
    height: 130px;
    margin: 0 auto;
  }

  footer .btn-zoom .btn-arrow {
    width: 41px;
  }

  footer .btn-zoom .btn-txt {
    width: 221px;
  }

  footer .footer-bottom {
    align-items: center;
    justify-content: center;
  }

  footer .cookie-link {
    margin-top: -7px;
    margin-bottom: 0;
  }

  footer .cookie-link a {
    font-size: 13px;
    letter-spacing: 2px;
  }

  footer .cookie-link a:before {
    bottom: 9px;
  }

  footer .btn-copy {
    margin: 5px 0 0 24px;
    font-size: 15px;
  }

  footer .btn-copy i {
    width: 17px;
    margin-right: 5px;
  }

  footer #socialbuttons {
    margin: 0;
  }

  footer address {
    margin-top: 47px;
    font-size: 16px;
    letter-spacing: 2px;
  }

  footer #pagetop {
    margin: 0;
    width: 33px;
    margin-top: 0;
    position: absolute;
    bottom: 75px;
    right: 96px;
  }

  footer .footer-top {
    margin: 0 auto 75px;
    max-width: 1000px;
  }

  footer .footer-left {
    width: 35%;
    padding-top: 14px;
  }

  footer .footer-right {
    box-sizing: border-box;
    width: 65%;
    border-left: 1px solid #808080;
    padding-left: 5.7%;
  }

  footer .footer-logo {
    width: 158px;
  }

  footer .footer-txt {
    margin: 20px 0 18px;
    font-size: 20px;
    letter-spacing: 4px;
  }

  footer .tel p {
    justify-content: center;
    letter-spacing: 3px;
  }

  footer .btn-reverse {
    margin: 18px auto 24px;
  }

  footer .sns {
    margin-bottom: 0;
  }

  footer .footer-right {
    text-align: left;
    margin-bottom: 0;
    padding-top: 10px;
  }

  footer .footer-right dl {
    margin-bottom: 20px;
    letter-spacing: 1.5px;
    line-height: 21px;
  }

  footer .footer-right dl dt {
    width: 90px;
  }

  footer .footer-right dl dd {
    width: calc(100% - 90px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1120px) {
  footer .footer-nav {
    font-size: 14px;
  }

  footer .footer-left {
    width: 32%;
  }

  footer .footer-right {
    padding-left: 4%;
  }
}

iframe {
  width: 100%;
  height: 100%;
}

/*=============================================
 * ft_fixed
 *=============================================*/
#socialbuttons .social-facebook {
  margin: 0 5px;
  transform: translateY(-2px);
}

#ft_fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  transition: 0.2s;
  z-index: 1000;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
}

#ft_fixed a {
  display: block;
}

@media only screen and (min-width: 768px) {
  #ft_fixed {
    display: none;
  }
}

.has_nav #ft_fixed {
  opacity: 1;
  pointer-events: visible;
}

#ft_fixed a:hover,
#ft_fixed a:focus,
#ft_fixed a:active,
#ft_fixed a:visited {
  opacity: 1 !important;
}

/* iPhone X */
@media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  footer:after {
    background: url("../img/shared/ft_fixed_bg.jpg") repeat-y top center/100% auto;
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 99;
  }

  #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) {
  footer:after {
    background: url("../img/shared/ft_fixed_bg.jpg") repeat-y top center/100% auto;
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 99;
  }

  #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),
only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  footer:after {
    background: url("../img/shared/ft_fixed_bg.jpg") repeat-y top center/100% auto;
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 99;
  }

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

@media only screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) {
  footer:after {
    background: url("../img/shared/ft_fixed.jpg") repeat center top/100% auto;
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 99;
  }

  #ft_fixed {
    bottom: env(safe-area-inset-bottom);
  }
}

@media only screen and (min-width: 600px) {
  footer:after {
    display: none !important;
  }
}

/*=============================================
 * general
 *=============================================*/
.align-bottom {
  align-items: flex-end;
}

.slick-slide>div {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.slick-dots {
  font-size: 0;
  line-height: 0;
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  bottom: 10px;
  left: 0;
  width: 100%;
}

.slick-dots li {
  display: block;
  line-height: 0;
  margin: 0 5px;
  cursor: pointer;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
}

.slick-dots li button {
  border: none;
  position: relative;
  cursor: pointer;
  outline: none;
  background: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  background: none;
  border: 1px solid #fff;
}

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

.slick-arrow {
  bottom: 0;
  z-index: 2;
  border: none;
  outline: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
  background: transparent;
  width: 25px;
  height: 25px;
}

.slick-arrow.slick-prev {
  background: url("../img/shared/arrow_left_black.png") no-repeat center/100% auto;
  left: -20px;
}

.slick-arrow.slick-next {
  background: url("../img/shared/arrow_right_black.png") no-repeat center/100% auto;
  right: -20px;
}

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

.bg_parallax {
  position: relative;
}

.img_parallax {
  clip: rect(0, auto, auto, 0);
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

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

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .img_parallax img {
    height: auto !important;
    -o-object-fit: unset;
    object-fit: unset;
    top: 50%;
    transform: translateY(-50%) !important;
  }
}

@supports (-ms-accelerator: true) {
  .img_parallax img {
    height: auto !important;
    -o-object-fit: unset;
    object-fit: unset;
    top: 50%;
    transform: translateY(-50%) !important;
  }
}

@media only screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }

  img {
    width: auto;
  }

  .slick-dots {
    bottom: 15px;
  }

  .slick-dots li {
    transition: 0.2s;
    width: 12px;
    height: 12px;
    margin: 0 4px;
  }

  .slick-arrow {
    width: 40px;
    height: 40px;
  }

  .slick-arrow.slick-prev {
    left: -22px;
  }

  .slick-arrow.slick-next {
    right: auto;
    left: 556px;
  }

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

  .wrap {
    margin: auto;
    max-width: 1200px;
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 0;
    box-sizing: border-box;
  }

  .has_nav footer:after {
    content: none !important;
  }

  .df-pc {
    display: flex !important;
    justify-content: space-between;
  }
}

.df {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

em {
  font-style: normal;
}

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

.remodal-overlay {
  background: rgba(41, 37, 32, 0.8);
}

.remodal {
  background: url("../img/shared/popup_bg.png") repeat center;
  padding: 50px 20px;
  color: #d4d4d4;
}

.remodal button {
  border: none;
  background: none;
  mix-blend-mode: difference;
}

.remodal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 100%;
}

.remodal .remodal-close {
  position: sticky;
  top: 0;
  width: 100%;
}

.remodal .remodal-close2 {
  margin: 30px auto 0;
  width: 250px;
  height: 50px;
  color: #fff;
  font-size: 18px;
  mix-blend-mode: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--violet);
  position: relative;
}

.remodal .remodal-close2 img {
  position: absolute;
  width: 16px;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
}

.remodal .menu-ttl {
  margin-bottom: 2vw;
  font-size: 7vw;
  color: #fff;
}

.remodal .menu-txt1 {
  margin-bottom: 10vw;
  line-height: 1.7;
  letter-spacing: 1px;
  font-size: 12px;
}

.remodal .wrap {
  padding: 0;
}

.remodal .df-pc {
  text-align: left;
}

.remodal h3 {
  text-align: center;
  background: url("../img/shared/bg.jpg") repeat center;
  letter-spacing: 0.12em;
  line-height: 1.6;
  padding: 10px 0;
  margin-bottom: 10px;
}

.remodal .menu-txt2 {
  margin-bottom: 10px;
}

.remodal .menulist {
  margin-bottom: 13vw;
}

.remodal dl {
  letter-spacing: 1.5px;
  border-bottom: 1px solid #696765;
  align-items: flex-end;
}

.remodal dl dt {
  position: relative;
  width: calc(100% - 85px);
}

.remodal dl dd {
  text-align: right;
}

.remodal dl.price-long dt {
  width: calc(100% - 120px);
}

.remodal ul {
  text-align: center;
  border-bottom: 1px solid #6a6766;
  padding-bottom: 5px;
}

@media only screen and (min-width: 768px) {
  .remodal {
    max-width: 1200px;
    padding: 105px 30px 95px;
  }

  .remodal .close {
    top: 20px;
    right: 20px;
    width: 35px;
  }

  .remodal .remodal-close2 {
    width: 324px;
    height: 51px;
  }

  .remodal .remodal-close2 img {
    width: 22px;
  }

  .remodal .menu-ttl {
    margin-bottom: 30px;
    font-size: 37px;
  }

  .remodal .menu-txt1 {
    margin-bottom: 70px;
    line-height: 2;
  }

  .remodal .wrap {
    padding: 0;
    max-width: 1000px;
  }

  .remodal .col {
    width: calc(50% - 30px);
  }

  .remodal .menulist {
    margin-bottom: 50px;
  }

  .remodal h3 {
    font-size: 16px;
    padding: 8px 0;
  }

  .remodal dl {
    margin-bottom: 0;
    padding-bottom: 0;
    letter-spacing: 1.8px;
  }

  .remodal dl dt {
    width: calc(100% - 90px);
  }

  .remodal dl.price-long dt {
    width: calc(100% - 150px);
  }
}

@media (max-width: 767px) {
  .div_pc {
    display: contents;
  }
}

@media (min-width: 768px) {
  .div_sp {
    display: contents;
  }
}

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

.contact-box {
  border: 1px solid transparent;
  -o-border-image: url("../img/shared/patent1.png") 1 stretch;
  border-image: url("../img/shared/patent1.png") 1 stretch;
  box-sizing: border-box;
  padding: 6vw 4.2% 7vw;
  text-align: center;
}

.contact-box .tel {
  margin-bottom: 14px;
}

.contact-box .tel p {
  justify-content: center;
}

@media only screen and (min-width: 768px) {
  .contact-box {
    padding: 25px 20px 30px;
    border-radius: 10px;
  }

  .contact-box .tel small {
    font-size: 13px;
    line-height: 16px;
  }
}

.toggle {
  background: #000;
  text-align: center;
}

.toggle+.toggle {
  margin-top: 10vw;
}

.toggle .toggle-ttl {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.185em;
}

.toggle .toggle-ttl .fzb {
  font-size: 24px;
  letter-spacing: 0.185em;
}

.toggle .toggle-ttl small {
  font-size: 18px;
  letter-spacing: 0.185em;
}

.toggle .toggle-link {
  padding: 15px 10px;
  box-sizing: border-box;
}

.toggle .toggle-link::after {
  content: "";
  width: -moz-max-content;
  width: max-content;
  display: block;
  margin: 10px auto 0;
  border: 8px solid transparent;
  border-top: 7px solid #fff;
  border-bottom: 0;
  transition: 0.3s;
}

.toggle .toggle-main {
  padding: 0 4vw 7vw;
  box-sizing: border-box;
}

.toggle .toggle-main dl {
  line-height: 2;
}

.toggle.active .toggle-link::after {
  transform: scaleY(-1);
}

@media only screen and (min-width: 768px) {
  .toggle {
    width: 330px;
  }

  .toggle+.toggle {
    margin-top: 0;
  }

  .toggle .toggle-ttl {
    padding-bottom: 10px;
    border-bottom: 0;
    font-size: 23px;
    line-height: 39px;
    position: relative;
    letter-spacing: 2.5px;
  }

  .toggle .toggle-ttl:hover {
    opacity: 0.7;
  }

  .toggle .toggle-ttl::before {
    content: "";
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
  }

  .toggle .toggle-ttl .fzb {
    font-size: 25px;
  }

  .toggle .toggle-ttl small {
    font-size: 20px;
  }

  .toggle .toggle-link {
    padding: 28px 5px 33px;
  }

  .toggle .toggle-link::after {
    margin-top: 17px;
    border-width: 8px;
    border-top-width: 7px;
  }

  .toggle .toggle-main {
    padding: 0 25px 30px;
  }

  .toggle .toggle-main dl {
    line-height: 35px;
  }
}

.youtube_i {
  width: 20%;
  margin-left: 9px;
  margin-bottom: 3px;
}

.f_i_one {
  filter: invert(1);
}

/*# sourceMappingURL=shared.css.map */