@media screen and (max-width:767px) {
  .no-sm {
    display: none !important
  }
}

@media screen and (min-width:768px) {

  .no-lg,
  .sm-only {
    display: none !important
  }
}

@media screen and (max-width:767px) {
  .lg-only {
    display: none !important
  }
}

:root {
  --color-white-pure: #fff;
  --color-primary: #5a2521;
  --color-red: #b4332c;
  --color-black: #201a1a;
  --color-text-body: #505050;
  --color-primary-light: #e9d4c3;
  --color-line-light: hsla(0, 0%, 87%, .4);
  --color-line: #aaa;
  --color-bg-gray: #f5f5f5;
  --color-bg-gray-light: #f9f9f9;
  --document-h-padding: min(60px, 4.39238653vw);
  --drop-shadow: drop-shadow(20px 20px 20px rgba(77, 57, 57, .4))
}

html.lenis,
html.lenis body {
  height: auto
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain
}

.lenis.lenis-stopped {
  overflow: hidden
}

.lenis.lenis-smooth iframe {
  pointer-events: none
}

.keen-slider:not([data-keen-slider-disabled]) {
  align-content: flex-start;
  display: flex;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: 100%
}

.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
  flex-direction: row-reverse
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
  flex-wrap: wrap
}

[data-inview-fade] {
  opacity: 0;
  transform: translateY(20px);
  transition-duration: .6s;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.37, 0, .63, 1)
}

[data-inview-fade].visible {
  opacity: 1;
  transform: none
}

[data-inview-blur] {
  filter: blur(10px);
  opacity: 0;
  transition-duration: .8s;
  transition-property: transform, opacity, filter;
  transition-timing-function: cubic-bezier(.61, 1, .88, 1)
}

[data-inview-blur].visible {
  filter: blur(0);
  opacity: 1
}

[data-inview-blur-char] {
  filter: blur(10px);
  opacity: 0;
  transform: translateY(20px);
  transition-duration: .7s;
  transition-property: transform, opacity, filter;
  transition-timing-function: cubic-bezier(.61, 1, .88, 1)
}

[data-inview-blur-char].visible {
  filter: blur(0);
  opacity: 1;
  transform: none
}

* {
  box-sizing: border-box
}

main {
  overflow-x: hidden;
  width: 100%;
  z-index: 1
}

.document-wrapper,
main {
  position: relative
}

.reservation-button {
  z-index: 2
}

.global-header {
  z-index: 3
}

.reservation-button {
  opacity: 0;
  position: fixed;
  transition-duration: .6s;
  transition-property: transform opacity;
  transition-timing-function: cubic-bezier(.37, 0, .63, 1);
  visibility: hidden
}

@media screen and (min-width:768px) {
  .reservation-button {
    bottom: 60px;
    right: 0;
    transform: translateX(10px)
  }
}

@media screen and (max-width:767px) {
  .reservation-button {
    align-items: flex-end;
    background-color: hsla(0, 0%, 100%, .8);
    bottom: 0;
    display: flex;
    height: 21.3333333333vw;
    transform: translateY(50%);
    width: 100%
  }
}

.reservation-button>a {
  align-items: center;
  background-color: var(--color-primary);
  color: var(--color-white-pure);
  display: flex;
  filter: var(--drop-shadow);
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  justify-content: space-between;
  letter-spacing: .05em;
  text-decoration: none
}

@media(hover:hover) {
  .reservation-button>a:hover:after {
    transform: scaleX(1);
    transform-origin: left
  }

  .reservation-button>a:hover i {
    transform: translateX(6px)
  }
}

.reservation-button>a:after {
  background-color: var(--color-black);
  bottom: unset;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  right: unset;
  top: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition-duration: .37s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  width: 100%;
  z-index: -1
}

.reservation-button>a i {
  background-image: url(../images/svg/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition-duration: .35s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width:768px) {
  .reservation-button>a {
    aspect-ratio: 7/2;
    font-size: max(min(18px, 1.317715959vw), 14px);
    padding-inline: min(30px, 2.196193265vw);
    width: max(min(280px, 20.4978038067vw), 200px)
  }
}

@media screen and (max-width:767px) {
  .reservation-button>a {
    font-size: 4.8vw;
    height: 16vw;
    margin-inline: auto;
    margin-bottom: 2.6666666667vw;
    padding-inline: 8vw;
    width: 74.6666666667vw
  }
}

@media screen and (min-width:768px) {
  .reservation-button i {
    height: 10px;
    width: 23px
  }
}

@media screen and (max-width:767px) {
  .reservation-button i {
    height: 2.6666666667vw;
    width: 6.1333333333vw
  }
}

.reservation-button.visible {
  opacity: 1;
  visibility: visible
}

@media screen and (min-width:768px) {
  .reservation-button.visible {
    transform: translateX(0)
  }
}

@media screen and (max-width:767px) {
  .reservation-button.visible {
    transform: translateY(0)
  }
}

.global-header {
  position: fixed;
  width: 100%
}

@media screen and (max-width:767px) {
  .global-header {
    height: 26.6666666667vw
  }
}

.global-header .inner {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-end;
  margin-inline: auto;
  max-width: 1920px;
  padding-inline: 6.4vw;
  width: 100%
}

.global-header .hamburger {
  display: block;
  height: 2.6666666667vw;
  position: relative;
  width: 5.3333333333vw
}

.global-header .hamburger.active span:first-child {
  transform: translateY(0) rotate(45deg)
}

.global-header .hamburger.active span:nth-child(2) {
  transform: translateY(0) rotate(135deg)
}

.global-header .hamburger.active span:nth-child(3) {
  opacity: 0;
  transform: rotate(90deg)
}

.global-header .hamburger span {
  background-color: var(--color-primary);
  bottom: unset;
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  right: unset;
  top: 50%;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  width: 100%
}

.global-header .hamburger span:first-child {
  transform: translateY(1.0666666667vw);
  transition-duration: 1s
}

.global-header .hamburger span:nth-child(2) {
  transform: translateY(-1.0666666667vw);
  transition-duration: 1s
}

.global-header .hamburger span:nth-child(3) {
  transition-duration: .7s
}

.global-header nav {
  align-items: center;
  background-color: var(--color-white-pure);
  display: flex;
  flex-direction: column;
  gap: 12.2666666667vw;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1
}

.global-header nav.open span:after {
  transform: scaleX(1)
}

.global-header nav span {
  color: var(--color-primary);
  font-family: Zen Old Mincho, serif;
  font-size: 6.4vw;
  font-weight: 700;
  line-height: 2.0833333333;
  opacity: 0;
  padding-bottom: .8vw;
  position: relative;
  transform: translateY(20px);
  transition-duration: .6s;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.37, 0, .63, 1)
}

.global-header nav span.visible {
  opacity: 1;
  transform: none
}

.global-header nav span:after {
  background-color: var(--color-primary);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition-delay: .4s;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  width: 100%
}

.global-header .logo {
  background-image: url(../images/svg/logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 6.4vw;
  left: 6.4vw;
  position: absolute;
  top: 10.1333333333vw;
  width: 42.6666666667vw;
  z-index: 0
}

section.kv {
  margin-inline: auto;
  max-width: 1920px
}

section.kv:before {
  background-color: var(--color-primary-light);
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

@media screen and (min-width:768px) {
  section.kv:before {
    height: calc(min(393.68px, 20.4978038067vw) + 95px)
  }
}

@media screen and (max-width:767px) {
  section.kv:before {
    height: 101.8666666667vw
  }
}

@media screen and (min-width:768px) {
  section.kv {
    padding-top: 30px
  }
}

@media screen and (max-width:767px) {
  section.kv {
    padding-left: 6.4vw;
    padding-top: 10.1333333333vw
  }
}

section.kv .logo {
  background-image: url(../images/svg/logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: relative
}

@media screen and (min-width:768px) {
  section.kv .logo {
    height: 37px;
    margin-bottom: 28px;
    margin-left: var(--document-h-padding);
    width: 247px
  }
}

@media screen and (max-width:767px) {
  section.kv .logo {
    height: 6.4vw;
    margin-bottom: 10.1333333333vw;
    width: 42.6666666667vw
  }
}

section.kv .inner {
  display: flex;
  position: relative;
  z-index: 1
}

section.kv nav {
  color: var(--color-primary);
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: Zen Old Mincho, serif;
  font-size: max(min(16px, 1.1713030747vw), 13px);
  font-weight: 500;
  gap: min(56.24px, 2.9282576867vw);
  justify-content: center;
  padding-left: var(--document-h-padding);
  width: min(385.244px, 20.0585651537vw)
}

section.kv nav span {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  position: relative;
  width: fit-content
}

section.kv nav span:after {
  background-color: var(--color-primary);
  content: "";
  display: block;
  height: 1px;
  width: 100%
}

@media(hover:hover) {
  @keyframes hover-line-flow {
    0% {
      transform: scaleX(1);
      transform-origin: right
    }

    33% {
      transform: scaleX(0);
      transform-origin: right
    }

    66% {
      transform: scaleX(0);
      transform-origin: left
    }

    to {
      transform: scaleX(1);
      transform-origin: left
    }
  }

  section.kv nav span:hover:after {
    animation-duration: .7s;
    animation-name: hover-line-flow;
    animation-timing-function: cubic-bezier(.25, .46, .45, .94)
  }
}

section.kv .contents {
  color: var(--color-white-pure);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  position: relative;
  text-align: center
}

@media screen and (min-width:768px) {
  section.kv .contents {
    aspect-ratio: 1092/560
  }
}

@media screen and (max-width:767px) {
  section.kv .contents {
    aspect-ratio: 351/500
  }
}

section.kv figure {
  bottom: unset;
  height: 100%;
  left: 0;
  position: absolute;
  right: unset;
  top: 0;
  width: 100%
}

section.kv figure img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%
}

section.kv .date {
  align-items: baseline;
  display: flex;
  font-family: EB Garamond, serif;
  font-weight: 400;
  gap: min(28.12px, 1.4641288433vw);
  justify-content: center;
  position: relative
}

section.kv .date span:first-child {
  letter-spacing: .1em
}

@media screen and (min-width:768px) {
  section.kv .date span:first-child {
    font-size: min(89.984px, 4.6852122987vw)
  }
}

@media screen and (max-width:767px) {
  section.kv .date span:first-child {
    font-size: 12.2666666667vw
  }
}

section.kv .date span:last-child {
  letter-spacing: .1em
}

@media screen and (min-width:768px) {
  section.kv .date span:last-child {
    font-size: min(98.42px, 5.1244509517vw)
  }
}

@media screen and (max-width:767px) {
  section.kv .date span:last-child {
    font-size: 13.8666666667vw
  }
}

section.kv h1 {
  align-items: center;
  display: flex;
  font-family: Zen Old Mincho, serif;
  font-weight: 500;
  justify-content: center;
  letter-spacing: .15em;
  position: relative;
}

@media screen and (min-width:768px) {
  section.kv h1 {
    flex-direction: column;
    font-size: min(44.992px, 2.3426061493vw);
    gap: .5em;
    margin-top: min(56.24px, 2.9282576867vw);
  }
}

@media screen and (max-width:767px) {
  section.kv h1 {
    flex-direction: column;
    font-size: 80%;
    line-height: 1.5;
    margin-top: 4.2666666667vw
  }
}

section.kv hr {
  background-color: var(--color-white-pure);
  border: none;
  display: block;
  margin-inline: auto;
  position: relative;
  width: 1px
}

@media screen and (min-width:768px) {
  section.kv hr {
    height: min(33.744px, 1.756954612vw);
    margin-bottom: min(16.872px, .878477306vw);
    margin-top: min(33.744px, 1.756954612vw)
  }
}

@media screen and (max-width:767px) {
  section.kv hr {
    height: 6.4vw;
    margin-bottom: 3.2vw;
    margin-top: 4.2666666667vw
  }
}

section.kv .description {
  font-family: Zen Old Mincho, serif;
  font-weight: 500;
  position: relative
}

@media screen and (min-width:768px) {
  section.kv .description {
    font-size: max(min(15px, 1.0980966325vw), 11px);
    letter-spacing: .1em;
    line-height: 2.5
  }
}

@media screen and (max-width:767px) {
  section.kv .description {
    font-size: 3.4666666667vw;
    letter-spacing: .05em;
    line-height: 2
  }
}

section.kv .button {
  align-items: center;
  background-color: var(--color-primary);
  bottom: 0;
  color: var(--color-white-pure);
  display: flex;
  filter: var(--drop-shadow);
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  justify-content: space-between;
  letter-spacing: .05em;
  position: absolute;
  right: 0;
  text-decoration: none;
  transform: translateY(50%);
  will-change: filter
}

@media(hover:hover) {
  section.kv .button:hover:after {
    transform: scaleX(1);
    transform-origin: left
  }

  section.kv .button:hover i {
    transform: translateX(6px)
  }
}

section.kv .button:after {
  background-color: var(--color-black);
  bottom: unset;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  right: unset;
  top: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition-duration: .37s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  width: 100%;
  z-index: -1
}

section.kv .button i {
  background-image: url(../images/svg/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition-duration: .35s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width:768px) {
  section.kv .button {
    aspect-ratio: 7/2;
    font-size: max(min(18px, 1.317715959vw), 14px);
    padding-inline: min(30px, 2.196193265vw);
    width: max(min(280px, 20.4978038067vw), 200px)
  }
}

@media screen and (max-width:767px) {
  section.kv .button {
    font-size: 4.8vw;
    height: 18.6666666667vw;
    padding-inline: 8vw;
    width: 74.6666666667vw
  }
}

@media screen and (min-width:768px) {
  section.kv .button i {
    height: 10px;
    width: 23px
  }
}

@media screen and (max-width:767px) {
  section.kv .button i {
    height: 2.6666666667vw;
    width: 6.1333333333vw
  }
}

@media screen and (min-width:768px) {
  section.concept {
    margin-top: min(280px, 20.4978038067vw)
  }
}

@media screen and (max-width:767px) {
  section.concept {
    margin-block: 53.3333333333vw 82.1333333333vw
  }
}

section.concept h2 {
  align-items: center;
  border: 1px solid var(--color-line-light);
  color: var(--color-black);
  display: flex;
  font-family: EB Garamond, serif;
  font-weight: 400;
  letter-spacing: .1em;
  margin-inline: auto;
  width: fit-content
}

@media screen and (min-width:768px) {
  section.concept h2 {
    font-size: 20px;
    height: 60px;
    padding-inline: 56px
  }
}

@media screen and (max-width:767px) {
  section.concept h2 {
    font-size: 4.2666666667vw;
    height: 13.3333333333vw;
    padding-inline: 10.6666666667vw
  }
}

section.concept .lead {
  color: var(--color-red);
  display: flex;
  flex-direction: column;
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  margin-inline: auto;
  position: relative;
  width: fit-content;
  text-align: center;
}

@media screen and (min-width:768px) {
  section.concept .lead {
    font-size: 80px;
    gap: 30px;
    margin-top: 80px;
    right: -10px
  }
}

@media screen and (max-width:767px) {
  section.concept .lead {
    font-size: 12.4666666667vw;
    gap: 5.3333333333vw;
    margin-top: 21.3333333333vw;
    right: -1.3333333333vw;
    line-height: 150%;
  }
}

section.concept .lead>span:first-child {
  letter-spacing: .2em
}

section.concept .lead>span:nth-child(2) {
  display: flex;
  justify-content: space-between;
  letter-spacing: .08em
}

@media screen and (min-width:768px) {
  section.concept .lead>span:nth-child(2) span:last-child {
    margin-right: 10px
  }
}

@media screen and (max-width:767px) {
  section.concept .lead>span:nth-child(2) span:last-child {
    margin-right: 3.2vw
  }
}

section.concept .message {
  align-items: center;
  color: var(--color-text-body);
  display: flex;
  flex-direction: column;
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 3.5;
  position: relative;
  z-index: 2
}

@media screen and (min-width:768px) {
  section.concept .message {
    font-size: 18px;
    gap: 44px;
    margin-top: 100px
  }
}

@media screen and (max-width:767px) {
  section.concept .message {
    font-size: 3.7333333333vw;
    gap: 13.3333333333vw;
    margin-top: 21.3333333333vw
  }
}

section.concept .message p {
  align-items: center;
  display: flex;
  flex-direction: column
}

section.concept .dappled {
  background-color: #ccc;
  overflow: hidden;
  width: 100%
}

@media screen and (min-width:768px) {
  section.concept .dappled {
    height: min(472px, 34.5534407028vw);
    margin-top: min(-210px, -15.3733528551vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .dappled {
    height: 122.6666666667vw;
    margin-top: -80vw
  }
}

section.concept .dappled img {
  display: block
}

@media screen and (min-width:768px) {
  section.concept .dappled img {
    width: 100%
  }
}

@media screen and (max-width:767px) {
  section.concept .dappled img {
    height: 120%;
    left: -110vw;
    position: relative
  }
}

section.concept .movie-area {
  background-color: var(--color-bg-gray);
  width: 100%;
}

@media screen and (min-width:768px) {
  section.concept .movie-area:last-child {
    margin-bottom: min(240px, 17.5695461201vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .movie-area:last-child {
    margin-bottom: 42.6666666667vw
  }
}

@media screen and (min-width:768px) {
  section.concept .movie-area {
    padding-block: min(240px, 17.5695461201vw);
    padding-inline: max(var(--document-h-padding), (100% - 1920px)/2)
  }
}

@media screen and (max-width:767px) {
  section.concept .movie-area {
    padding-block: 42.6666666667vw
  }
}

section.concept .movie-area h3 {
  color: var(--color-black);
  font-family: EB Garamond, serif;
  font-weight: 400;
  letter-spacing: .05em
}

@media screen and (min-width:768px) {
  section.concept .movie-area h3 {
    font-size: 24px;
    margin-bottom: 10px
  }
}

@media screen and (max-width:767px) {
  section.concept .movie-area h3 {
    font-size: 4.2666666667vw;
    margin-bottom: 4.2666666667vw;
    margin-left: 4.2666666667vw
  }
}

section.concept .movie-area .video-wrapper {
  aspect-ratio: 16/9;
  cursor: pointer;
  position: relative
}

@media(hover:hover) {
  section.concept .movie-area .video-wrapper:hover span {
    background-color: var(--color-white-pure)
  }

  section.concept .movie-area .video-wrapper:hover svg path {
    fill: var(--color-black)
  }
}

section.concept .movie-area .video-wrapper.play span,
section.concept .movie-area .video-wrapper.play:after {
  opacity: 0
}

section.concept .movie-area .video-wrapper:after {
  background-color: rgba(0, 0, 0, .3);
  bottom: unset;
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: unset;
  top: 0;
  transition-duration: .4s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  width: 100%;
  z-index: 0
}

section.concept .movie-area .video-wrapper video {
  display: block;
  height: 100%;
  width: 100%
}

section.concept .movie-area .video-wrapper span {
  background-color: hsla(0, 0%, 100%, .7);
  border-radius: 50%;
  bottom: unset;
  left: 50%;
  pointer-events: none;
  position: absolute;
  right: unset;
  top: 50%;
  transform: translate(-50%, -50%);
  transition-duration: .4s;
  transition-property: background-color, opacity;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  z-index: 1
}

@media screen and (min-width:768px) {
  section.concept .movie-area .video-wrapper span {
    height: 80px;
    width: 80px
  }
}

@media screen and (max-width:767px) {
  section.concept .movie-area .video-wrapper span {
    height: 16vw;
    width: 16vw
  }
}

section.concept .movie-area .video-wrapper span svg {
  bottom: unset;
  left: 50%;
  position: absolute;
  right: unset;
  top: 50%
}

@media screen and (min-width:768px) {
  section.concept .movie-area .video-wrapper span svg {
    height: 26px;
    transform: translate(calc(-50% + 4px), -50%);
    width: 25px
  }
}

@media screen and (max-width:767px) {
  section.concept .movie-area .video-wrapper span svg {
    height: 5.3333333333vw;
    transform: translate(calc(-50% + .53333vw), -50%);
    width: 5.0666666667vw
  }
}

section.concept .movie-area .video-wrapper span svg path {
  fill: var(--color-primary);
  transition-duration: .4s;
  transition-property: fill;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

section.concept .movie-area p.caption {
  color: var(--color-text-body);
  font-family: Zen Kaku Gothic New, sans-serif;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.8
}

@media screen and (min-width:768px) {
  section.concept .movie-area p.caption {
    font-size: 13px;
    margin-top: 20px
  }
}

@media screen and (max-width:767px) {
  section.concept .movie-area p.caption {
    font-size: 3.4666666667vw;
    margin-inline: 4.2666666667vw;
    margin-top: 4.2666666667vw
  }
}

section.concept .design-description {
  align-items: center;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 2
}

@media screen and (min-width:768px) {
  section.concept .design-description {
    font-size: max(min(32px, 2.3426061493vw), 24px);
    gap: 4rem;
    margin-top: min(240px, 17.5695461201vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .design-description {
    font-size: 5.3333333333vw;
    gap: 2.5rem;
    margin-top: 42.6666666667vw
  }
}

section.concept .design-description>p {
  align-items: center;
  display: flex;
  flex-direction: column
}

section.concept hr {
  background-color: var(--color-line);
  border: none;
  display: block;
  margin-inline: auto;
  width: 1px
}

@media screen and (min-width:768px) {
  section.concept hr {
    height: 180px;
    margin-bottom: 120px;
    margin-top: 90px
  }
}

@media screen and (max-width:767px) {
  section.concept hr {
    height: 32vw;
    margin-bottom: 29.3333333333vw;
    margin-top: 8vw
  }
}

section.concept .areas {
  display: flex;
  flex-direction: column;
  margin-inline: auto
}

@media screen and (min-width:768px) {
  section.concept .areas {
    gap: min(280px, 20.4978038067vw);
    max-width: 1920px;
    padding-bottom: min(340px, 24.8901903367vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas {
    gap: 64vw
  }
}

section.concept .areas li {
  display: flex
}

@media screen and (min-width:768px) {
  section.concept .areas li {
    align-items: flex-end;
    gap: max(min(84.36px, 4.39238653vw), 30px)
  }

  section.concept .areas li:nth-child(odd) {
    padding-left: max(min(126.54px, 6.588579795vw), 60px)
  }

  section.concept .areas li:nth-child(2n) {
    flex-direction: row-reverse;
    padding-right: max(min(126.54px, 6.588579795vw), 60px)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas li {
    flex-direction: column;
    gap: 10.6666666667vw
  }
}

section.concept .areas li.chapel figure.sub {
  filter: var(--drop-shadow);
  will-change: filter
}

@media screen and (min-width:768px) {
  section.concept .areas li.chapel figure.sub {
    bottom: min(646.76px, 33.6749633968vw);
    height: min(478.04px, 24.8901903367vw);
    right: min(84.36px, 4.39238653vw);
    width: min(281.2px, 14.6412884334vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas li.chapel figure.sub {
    height: 45.3333333333vw;
    left: 69.3333333333vw;
    top: 62.9333333333vw;
    width: 26.6666666667vw
  }
}

section.concept .areas li.banquet {
  align-items: flex-start
}

@media screen and (min-width:768px) {
  section.concept .areas li.banquet figure.sub {
    height: min(281.2px, 14.6412884334vw);
    left: min(843.6px, 43.9238653001vw);
    top: min(646.76px, 33.6749633968vw);
    width: min(478.04px, 24.8901903367vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas li.banquet figure.sub {
    height: 26.6666666667vw;
    left: 4.2666666667vw;
    top: 62.9333333333vw;
    width: 45.3333333333vw
  }
}

@media screen and (min-width:768px) {
  section.concept .areas li.garden figure.sub {
    height: min(478.04px, 24.8901903367vw);
    right: min(84.36px, 4.39238653vw);
    top: min(646.76px, 33.6749633968vw);
    width: min(281.2px, 14.6412884334vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas li.garden figure.sub {
    height: 45.3333333333vw;
    left: 69.3333333333vw;
    top: 62.9333333333vw;
    width: 26.6666666667vw
  }
}

@media screen and (min-width:768px) {
  section.concept .areas li.lobby figure.sub {
    height: min(281.2px, 14.6412884334vw);
    left: min(84.36px, 4.39238653vw);
    top: min(646.76px, 33.6749633968vw);
    width: min(478.04px, 24.8901903367vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas li.lobby figure.sub {
    height: 26.6666666667vw;
    left: 4.2666666667vw;
    top: 62.9333333333vw;
    width: 45.3333333333vw
  }
}

section.concept .areas .text {
  display: flex;
  flex-direction: column
}

@media screen and (min-width:768px) {
  section.concept .areas .text {
    gap: max(min(49.21px, 2.5622254758vw), 20px)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas .text {
    gap: 11.2vw;
    margin-inline: 6.4vw;
    text-align: justify
  }
}

section.concept .areas h3 {
  color: var(--color-black);
  display: flex;
  flex-direction: column
}

@media screen and (min-width:768px) {
  section.concept .areas h3 {
    gap: 15px
  }
}

@media screen and (max-width:767px) {
  section.concept .areas h3 {
    gap: 2.6666666667vw
  }
}

section.concept .areas h3 .en {
  font-family: EB Garamond, serif;
  font-weight: 400;
  letter-spacing: .05em
}

@media screen and (min-width:768px) {
  section.concept .areas h3 .en {
    font-size: min(89.984px, 4.6852122987vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas h3 .en {
    font-size: 10.6666666667vw
  }
}

section.concept .areas h3 .ja {
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  letter-spacing: .05em
}

@media screen and (min-width:768px) {
  section.concept .areas h3 .ja {
    font-size: max(min(28.12px, 1.4641288433vw), 16px)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas h3 .ja {
    font-size: 4.2666666667vw
  }
}

section.concept .areas p {
  color: var(--color-text-body);
  font-family: Zen Kaku Gothic New, sans-serif;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 2
}

@media screen and (min-width:768px) {
  section.concept .areas p {
    font-size: max(min(15px, 1.0980966325vw), 11px)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas p {
    font-size: 3.7333333333vw
  }
}

section.concept .areas .images {
  background-color: #ccc;
  flex-grow: 0;
  flex-shrink: 0;
  position: relative
}

@media screen and (min-width:768px) {
  section.concept .areas .images {
    aspect-ratio: 820/520;
    width: min(1152.92px, 60.0292825769vw)
  }
}

@media screen and (max-width:767px) {
  section.concept .areas .images {
    aspect-ratio: 375/300;
    width: 100%
  }
}

section.concept .areas figure.main {
  height: 100%;
  width: 100%
}

section.concept .areas figure.sub {
  filter: var(--drop-shadow);
  position: absolute;
  will-change: filter
}

section.concept .areas figure img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%
}

section.gallery {
  width: 100%
}

@media screen and (min-width:768px) {
  section.gallery {
    padding-block: min(40px, 2.9282576867vw) min(240px, 17.5695461201vw)
  }
}

@media screen and (max-width:767px) {
  section.gallery {
    padding-bottom: 42.6666666667vw
  }
}

section.gallery h2 {
  align-items: center;
  border: 1px solid var(--color-line-light);
  color: var(--color-black);
  display: flex;
  font-family: EB Garamond, serif;
  font-weight: 400;
  letter-spacing: .1em;
  margin-inline: auto;
  width: fit-content
}

@media screen and (min-width:768px) {
  section.gallery h2 {
    font-size: 20px;
    height: 60px;
    padding-inline: 56px
  }
}

@media screen and (max-width:767px) {
  section.gallery h2 {
    font-size: 4.2666666667vw;
    height: 13.3333333333vw;
    padding-inline: 10.6666666667vw
  }
}

.carousel {
  --main-height-lg: min(670px, 49.0483162518vw);
  --main-width-lg: calc(var(--main-height-lg)*3/2);
  overflow: hidden
}

@media screen and (min-width:768px) {
  .carousel {
    margin-top: 80px
  }
}

@media screen and (max-width:767px) {
  .carousel {
    margin-top: 21.3333333333vw
  }
}

.carousel img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%
}

.carousel .main {
  overflow: hidden;
  position: relative;
  z-index: 2
}

@media screen and (min-width:768px) {
  .carousel .main {
    height: var(--main-height-lg)
  }
}

.carousel .bg {
  filter: blur(8px);
  scale: 1.05;
  z-index: 1
}

.carousel .bg,
.carousel .bg li {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.carousel .bg li {
  transform-origin: center center
}

.carousel .slider-wrapper {
  height: 100%;
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  z-index: 2
}

@media screen and (min-width:768px) {
  .carousel .slider-wrapper {
    width: var(--main-width-lg)
  }
}

.carousel .main-slider {
  cursor: grab;
  height: 100%
}

.carousel .main-slider.grabbing {
  cursor: grabbing
}

.carousel .controller {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  left: 50%;
  margin-inline: auto;
  pointer-events: none;
  position: absolute;
  top: 0;
  translate: -50% 0;
  width: var(--main-width-lg);
  z-index: 2
}

.carousel .controller>div {
  background-color: var(--color-white-pure);
  border-radius: 100%;
  cursor: pointer;
  filter: drop-shadow(10px 10px 10px rgba(122, 87, 63, .3));
  height: 60px;
  pointer-events: auto;
  position: relative;
  width: 60px
}

@media(hover:hover) {
  .carousel .controller>div:hover.prev svg {
    fill: var(--color-black);
    transform: translate(calc(-50% - 4px), -50%) rotate(-90deg)
  }

  .carousel .controller>div:hover.next svg {
    fill: var(--color-black);
    transform: translate(calc(-50% + 4px), -50%) rotate(90deg)
  }
}

.carousel .controller>div svg {
  bottom: unset;
  display: block;
  left: 50%;
  position: absolute;
  right: unset;
  top: 50%;
  fill: var(--color-primary);
  transition-duration: .4s;
  transition-property: transform, fill;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

.carousel .controller>div.disabled {
  cursor: default;
  opacity: .5
}

.carousel .controller .prev {
  translate: -50% 0
}

.carousel .controller .prev svg {
  transform: translate(-50%, -50%) rotate(-90deg)
}

.carousel .controller .next {
  translate: 50% 0
}

.carousel .controller .next svg {
  transform: translate(-50%, -50%) rotate(90deg)
}

.carousel .thumbs-wrapper {
  height: 80px;
  margin-inline: auto
}

@media screen and (min-width:768px) {
  .carousel .thumbs-wrapper {
    width: var(--main-width-lg)
  }
}

@media screen and (max-width:767px) {
  .carousel .thumbs-wrapper {
    width: 90vw
  }
}

.carousel .thumbs {
  height: 100%;
  overflow: visible !important
}

.carousel .thumbs li {
  cursor: pointer;
  flex-shrink: 0;
  height: 100%;
  opacity: .5;
  width: 120px !important
}

.carousel .thumbs li.active {
  opacity: 1
}

.carousel .thumbs li.active:before {
  border: 2px solid var(--color-white-pure);
  bottom: unset;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: unset;
  top: 0;
  width: 100%
}

.carousel .extra {
  background-color: var(--color-primary);
  box-sizing: content-box;
  height: 80px;
  padding-block: 30px;
  position: relative
}

.carousel .extra .pages {
  bottom: unset;
  color: var(--color-white-pure);
  font-family: EB Garamond, serif;
  font-size: 13px;
  font-weight: 400;
  height: 30px;
  left: 0;
  line-height: 30px;
  position: absolute;
  right: unset;
  text-align: center;
  top: 0;
  user-select: none;
  width: 100%
}

section.information,
section.information section.news {
  display: flex;
  flex-direction: column
}

@media screen and (min-width:768px) {
  section.information section.news {
    gap: min(60px, 4.39238653vw)
  }
}

@media screen and (max-width:767px) {
  section.information section.news {
    gap: 60px
  }
}

section.information section.news .news-item {
  align-items: flex-start;
  background-color: var(--color-bg-gray-light);
  color: var(--color-text-body);
  display: flex;
  margin-inline: auto
}

section.information section.news .news-item a {
  font-family: Zen Kaku Gothic New,
    sans-serif;
  font-size: 3.7333333333vw
}

@media screen and (min-width:768px) {
  section.information section.news .news-item a {
    font-size: 15px;
  }

}

@media screen and (min-width:768px) {
  section.information section.news .news-item {
    width: max(min(1245.716px, 64.8609077599vw), 700px)
  }
}

@media screen and (max-width:767px) {
  section.information section.news .news-item {
    flex-direction: column;
    gap: 5.3333333333vw;
    padding-block: 9.0666666667vw;
    padding-inline: 6.4vw
  }
}

section.information section.news a.news-item {
  text-decoration: none
}

section.information section.news a.news-item h3 {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px
}

@media(hover:hover) {
  section.information section.news a.news-item:hover h3 {
    text-decoration: none
  }
}

section.information section.news figure {
  aspect-ratio: 350/258;
  background: #ddd;
  flex-grow: 0;
  flex-shrink: 0
}

@media screen and (min-width:768px) {
  section.information section.news figure {
    width: 40%
  }
}

@media screen and (max-width:767px) {
  section.information section.news figure {
    width: 100%
  }
}

section.information section.news figure img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%
}

section.information section.news .text {
  display: flex;
  flex-direction: column
}

@media screen and (min-width:768px) {
  section.information section.news .text {
    gap: 20px;
    padding: min(55px, 4.0263543192vw)
  }
}

@media screen and (max-width:767px) {
  section.information section.news .text {
    gap: 2.6666666667vw
  }
}

section.information section.news .text>h3 {
  font-family: Zen Old Mincho, serif;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.5
}

@media screen and (min-width:768px) {
  section.information section.news .text>h3 {
    font-size: 24px
  }
}

@media screen and (max-width:767px) {
  section.information section.news .text>h3 {
    font-size: 4vw
  }
}

section.information section.news .text p {
  font-family: Zen Kaku Gothic New, sans-serif;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 2
}

@media screen and (min-width:768px) {
  section.information section.news .text p {
    font-size: 15px
  }
}

@media screen and (max-width:767px) {
  section.information section.news .text p {
    font-size: 3.7333333333vw
  }
}

@media screen and (min-width:768px) {
  section.information {
    gap: 120px;
    padding-bottom: 120px
  }
}

@media screen and (max-width:767px) {
  section.information {
    gap: 32vw;
    padding-bottom: 26.6666666667vw
  }
}

section.information h2 {
  align-items: center;
  border: 1px solid var(--color-line-light);
  color: var(--color-black);
  display: flex;
  font-family: EB Garamond, serif;
  font-weight: 400;
  letter-spacing: .1em;
  margin-inline: auto;
  width: fit-content
}

@media screen and (min-width:768px) {
  section.information h2 {
    font-size: 20px;
    height: 60px;
    padding-inline: 56px
  }
}

@media screen and (max-width:767px) {
  section.information h2 {
    font-size: 4.2666666667vw;
    height: 13.3333333333vw;
    padding-inline: 10.6666666667vw
  }
}

section.information .wrapper>h3 {
  align-items: center;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  justify-content: center;
  letter-spacing: .1em
}

@media screen and (min-width:768px) {
  section.information .wrapper>h3 {
    font-size: 32px
  }
}

@media screen and (max-width:767px) {
  section.information .wrapper>h3 {
    font-size: 5.3333333333vw
  }
}

section.information .wrapper>h3:after {
  background-color: var(--color-line);
  content: "";
  width: 1px
}

@media screen and (min-width:768px) {
  section.information .wrapper>h3:after {
    height: 24px;
    margin-bottom: 40px;
    margin-top: 24px
  }
}

@media screen and (max-width:767px) {
  section.information .wrapper>h3:after {
    height: 6.4vw;
    margin-bottom: 10.6666666667vw;
    margin-top: 6.4vw
  }
}

section.information dl {
  display: grid
}

@media screen and (min-width:768px) {
  section.information dl {
    grid-template-columns: min(240px, 17.5695461201vw) 1fr;
    margin-inline: auto;
    row-gap: 1px;
    width: max(min(1245.716px, 64.8609077599vw), 700px)
  }
}

@media screen and (max-width:767px) {
  section.information dl {
    margin-inline: 4.2666666667vw
  }

  section.information dl dd+dt {
    margin-top: 1px
  }
}

section.information dt {
  background-color: var(--color-bg-gray);
  color: var(--color-black);
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  letter-spacing: .05em
}

@media screen and (min-width:768px) {
  section.information dt {
    font-size: 18px;
    padding-block: 20px;
    padding-inline: min(40px, 2.9282576867vw)
  }
}

@media screen and (max-width:767px) {
  section.information dt {
    font-size: 4vw;
    padding-block: 4.2666666667vw;
    padding-inline: 4.2666666667vw
  }
}

section.information dd {
  background-color: var(--color-bg-gray-light);
  color: var(--color-text-body);
  font-family: Zen Kaku Gothic New, sans-serif;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 2
}

@media screen and (min-width:768px) {
  section.information dd {
    font-size: 15px;
    padding-block: 16px;
    padding-inline: min(40px, 2.9282576867vw)
  }
}

@media screen and (max-width:767px) {
  section.information dd {
    font-size: 3.7333333333vw;
    padding-block: 3.2vw;
    padding-inline: 3.2vw
  }
}

section.information dd a {
  color: var(--color-primary);
  /* margin-left: 1rem */
}

@media screen and (min-width:768px) {
  section.information dd a {
    margin-left: 1rem
  }
}

@media(hover:hover) {
  section.information dd a:hover {
    text-decoration: none
  }
}

section.information dd .new-customers {
  margin-left: 0
}

section.information dd .map {
  position: relative
}

@media screen and (min-width:768px) {
  section.information dd .map {
    padding-left: 18px
  }
}

@media screen and (max-width:767px) {
  section.information dd .map {
    padding-left: 4.2666666667vw
  }
}

section.information dd .map:before {
  background-image: url(../images/svg/icon_map.svg);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: unset;
  content: "";
  left: 0;
  position: absolute;
  right: unset;
  top: 50%
}

@media screen and (min-width:768px) {
  section.information dd .map:before {
    height: 16px;
    transform: translateY(calc(-50% + 1px));
    width: 12px
  }
}

@media screen and (max-width:767px) {
  section.information dd .map:before {
    height: 4.2666666667vw;
    transform: translateY(calc(-50% + .26667vw));
    width: 3.2vw
  }
}

@media screen and (min-width:768px) {
  section.information dd p+p {
    margin-top: 24px
  }
}

@media screen and (max-width:767px) {
  section.information dd p+p {
    margin-top: 5.3333333333vw
  }
}

@media screen and (min-width:768px) {
  section.information dd .small {
    font-size: 12px
  }
}

@media screen and (max-width:767px) {
  section.information dd .small {
    font-size: 3.2vw
  }
}

section.information .spec-list {
  display: inline-grid
}

@media screen and (min-width:768px) {
  section.information .spec-list {
    column-gap: min(64px, 4.6852122987vw);
    grid-template-columns: auto auto;
    padding-block: 8px;
    row-gap: 24px
  }
}

@media screen and (max-width:767px) {
  section.information .spec-list {
    padding-block: 2.1333333333vw;
    row-gap: 3.2vw
  }
}

section.information .spec-list li {
  align-items: center;
  display: flex;
  gap: 8px
}

section.information .spec-list li:before {
  background-color: var(--color-white-pure);
  border: 1px solid var(--color-line-light);
  border-radius: 50%;
  content: "";
  display: block
}

@media screen and (min-width:768px) {
  section.information .spec-list li:before {
    height: 40px;
    width: 40px
  }
}

@media screen and (max-width:767px) {
  section.information .spec-list li:before {
    height: 8.5333333333vw;
    width: 8.5333333333vw
  }
}

section.information .spec-list li.fitting:before {
  background-image: url(../images/svg/icon_fitting.svg);
  background-repeat: no-repeat;
  background-size: cover
}

section.information .spec-list li.family:before {
  background-image: url(../images/svg/icon_family.svg);
  background-repeat: no-repeat;
  background-size: cover
}

section.information .spec-list li.accessible:before {
  background-image: url(../images/svg/icon_accessible.svg);
  background-repeat: no-repeat;
  background-size: cover
}

section.information .spec-list li.feeding:before {
  background-image: url(../images/svg/icon_feeding.svg);
  background-repeat: no-repeat;
  background-size: cover
}

section.information .spec-list li.cloak:before {
  background-image: url(../images/svg/icon_cloak.svg);
  background-repeat: no-repeat;
  background-size: cover
}

section.information .spec-list li.smoking:before {
  background-image: url(../images/svg/icon_smoking.svg);
  background-repeat: no-repeat;
  background-size: cover
}

section.links {
  align-items: center;
  background-color: var(--color-primary-light);
  display: flex;
  flex-direction: column;
  line-height: 180%;
}

@media screen and (min-width:768px) {
  section.links {
    gap: 30px;
    padding-bottom: 240px;
    padding-top: 120px
  }
}

@media screen and (max-width:767px) {
  section.links {
    gap: 8vw;
    padding-bottom: 42.6666666667vw;
    padding-top: 26.6666666667vw
  }
}

section.links a {
  align-items: center;
  background-color: var(--color-primary);
  color: var(--color-white-pure);
  display: flex;
  filter: var(--drop-shadow);
  flex-direction: column;
  font-family: Zen Old Mincho, serif;
  font-weight: 400;
  justify-content: center;
  letter-spacing: .05em;
  position: relative;
  text-align: center;
  text-decoration: none;
  will-change: filter;
  z-index: 0
}

@media(hover:hover) {
  section.links a:hover:after {
    transform: scaleX(1);
    transform-origin: left
  }

  section.links a:hover i {
    transform: translateX(6px)
  }
}

section.links a:after {
  background-color: var(--color-black);
  bottom: unset;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  right: unset;
  top: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition-duration: .37s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  width: 100%;
  z-index: -1
}

section.links a i {
  background-image: url(../images/svg/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition-duration: .35s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width:768px) {
  section.links a {
    width: 580px
  }
}

@media screen and (max-width:767px) {
  section.links a {
    width: 87.2vw
  }
}

section.links a:after {
  transition-duration: .45s
}

section.links a i {
  position: absolute;
  transition-duration: .4s
}

@media screen and (min-width:768px) {
  section.links a i {
    height: 16px;
    right: 30px;
    width: 37px
  }
}

@media screen and (max-width:767px) {
  section.links a i {
    height: 4.2666666667vw;
    right: 4.2666666667vw;
    width: 9.8666666667vw
  }
}

@media screen and (min-width:768px) {
  section.links .reservation {
    font-size: 20px;
    height: 120px
  }
}

@media screen and (max-width:767px) {
  section.links .reservation {
    font-size: 5.3333333333vw;
    height: 26.6666666667vw
  }
}

@media screen and (min-width:768px) {
  section.links .official {
    font-size: 15px;
    height: 70px
  }
}

@media screen and (max-width:767px) {
  section.links .official {
    font-size: 4vw;
    height: 16vw
  }
}

footer.global-footer {
  position: relative;
  z-index: 2
}

@media screen and (min-width:768px) {
  footer.global-footer {
    padding-inline: var(--document-h-padding)
  }
}

@media screen and (max-width:767px) {
  footer.global-footer {
    padding-inline: 4.2666666667vw
  }
}

footer.global-footer .inner {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-width: 1920px;
  position: relative
}

@media screen and (min-width:768px) {
  footer.global-footer .inner {
    gap: 100px;
    padding-bottom: 40px;
    padding-top: 80px
  }
}

@media screen and (max-width:767px) {
  footer.global-footer .inner {
    gap: 26.6666666667vw;
    padding-bottom: 10.6666666667vw;
    padding-top: 16vw
  }
}

footer.global-footer ul {
  font-family: Zen Kaku Gothic New, sans-serif;
  font-weight: 400
}

@media screen and (min-width:768px) {
  footer.global-footer ul {
    display: flex;
    gap: 35px
  }
}

@media screen and (max-width:767px) {
  footer.global-footer ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 6.4vw
  }
}

footer.global-footer ul li {
  align-items: center;
  display: flex;
  gap: 4px
}

footer.global-footer ul li:before {
  background-image: url(../images/svg/bullet.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 5px;
  width: 10px
}

footer.global-footer ul a {
  color: var(--color-primary);
  text-decoration: none
}

@media(hover:hover) {
  footer.global-footer ul a:hover {
    text-decoration: underline
  }
}

@media screen and (min-width:768px) {
  footer.global-footer ul a {
    font-size: 13px
  }
}

@media screen and (max-width:767px) {
  footer.global-footer ul a {
    font-size: 3.2vw
  }
}

footer.global-footer .copyright {
  color: var(--color-black);
  font-family: EB Garamond, serif;
  font-size: 12px;
  font-weight: 400
}

footer.global-footer .to-top {
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-50%)
}

@media screen and (min-width:768px) {
  footer.global-footer .to-top {
    height: 120px;
    width: 120px
  }
}

@media screen and (max-width:767px) {
  footer.global-footer .to-top {
    height: 24vw;
    width: 24vw
  }
}

@media(hover:hover) {
  footer.global-footer .to-top:hover .circle svg {
    fill: var(--color-black);
    transform: translateY(-9px)
  }
}

footer.global-footer .to-top .circle {
  align-items: center;
  background-color: var(--color-white-pure);
  border-radius: 50%;
  display: flex;
  filter: drop-shadow(15px 15px 15px rgba(77, 57, 57, .2));
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
  will-change: filter
}

footer.global-footer .to-top .circle svg {
  fill: var(--color-primary);
  transition-duration: .4s;
  transition-property: transform, fill;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width:768px) {
  footer.global-footer .to-top .circle svg {
    height: 37px;
    width: 16px
  }
}

@media screen and (max-width:767px) {
  footer.global-footer .to-top .circle svg {
    height: 9.8666666667vw;
    width: 4.2666666667vw
  }
}

footer.global-footer .to-top:before {
  background-image: url(../images/svg/page_top.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  left: 50%;
  position: absolute;
  transform: translate(-50%, -100%)
}

@media screen and (min-width:768px) {
  footer.global-footer .to-top:before {
    height: 22px;
    width: 82px
  }
}

@media screen and (max-width:767px) {
  footer.global-footer .to-top:before {
    height: 5.8666666667vw;
    width: 21.8666666667vw
  }
}