@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: 60px;
      gap: 30px;
      margin-top: 80px;
      right: -10px;
      line-height: 150%;
   }
}

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

   }
}

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

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%;
   display: none;
}

@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.smallwedding h3 .en {
   letter-spacing: .05em
}

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

@media screen and (max-width:767px) {
   section.concept .areas li.banquet.smallwedding h3 .en {
      font-size: 10.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
   }
}