@charset "UTF-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

iframe {
  max-width: 100%;
  vertical-align: middle;
}

picture {
  display: block;
  max-width: 100%;
}

:root {
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-gray: #777777;
  --color-success: #47AC59;
  --color-error: #FF0000;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-white);
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.2;
}
body.of-hidden {
  overflow: hidden;
}

.container {
  display: block;
  max-width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .container {
    max-width: 1232px;
  }
}

.error-msg {
  color: var(--color-error);
  font-size: 14px;
}

.d-none {
  display: none !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-inline-flex {
  display: inline-flex !important;
}
.d-block {
  display: block !important;
}
.d-flex {
  display: flex !important;
}
@media only screen and (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
}
@media only screen and (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }
}
@media only screen and (min-width: 576px) {
  .d-sm-inline-block {
    display: inline-block !important;
  }
}
@media only screen and (min-width: 576px) {
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}
@media only screen and (min-width: 576px) {
  .d-sm-block {
    display: block !important;
  }
}
@media only screen and (min-width: 576px) {
  .d-sm-flex {
    display: flex !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-md-inline-block {
    display: inline-block !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-md-inline-flex {
    display: inline-flex !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
}
@media only screen and (min-width: 768px) {
  .d-md-flex {
    display: flex !important;
  }
}
@media only screen and (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
}
@media only screen and (min-width: 1200px) {
  .d-xl-inline {
    display: inline !important;
  }
}
@media only screen and (min-width: 1200px) {
  .d-xl-inline-block {
    display: inline-block !important;
  }
}
@media only screen and (min-width: 1200px) {
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}
@media only screen and (min-width: 1200px) {
  .d-xl-block {
    display: block !important;
  }
}
@media only screen and (min-width: 1200px) {
  .d-xl-flex {
    display: flex !important;
  }
}

.header {
  position: relative;
  z-index: 20;
}
.header__wrapper {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 18px 40px;
}
@media screen and (max-width: 767px) {
  .header__wrapper {
    padding: 12px 16px;
  }
}
.header__logo {
  transition: all 0.3s ease;
}
.header__logo:hover {
  opacity: 0.7;
}
.header__btn a {
  font-size: 14px;
  line-height: 22px;
}
.header__opt {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header__ham {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 11px;
  width: 32px;
  height: 28px;
  cursor: pointer;
  position: relative;
}
.header__ham-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  display: inline-block;
}
.header__ham-line:last-of-type {
  width: 50%;
}
.header__ham.active .header__ham-line {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.header__ham.active .header__ham-line:nth-of-type(2) {
  opacity: 0;
}
.header__ham.active .header__ham-line:nth-of-type(1) {
  transform: translateY(-50%) rotate(45deg);
}
.header__ham.active .header__ham-line:nth-of-type(3) {
  transform: translateY(-50%) rotate(-45deg);
}

.ham__menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background-color: var(--color-white);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}
.ham__menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: all 0.3s ease;
}
.ham__menu-container {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
  justify-content: center;
  padding: 50px 40px;
}
@media screen and (max-width: 767px) {
  .ham__menu-container {
    padding: 50px 0;
    align-items: flex-start;
  }
}
.ham__menu-list {
  display: flex;
  align-items: flex-start;
  gap: 40px 120px;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .ham__menu-list {
    gap: 20px;
  }
}
.ham__menu-list li {
  width: calc(33.3333333333% - 80px);
}
@media screen and (max-width: 991px) {
  .ham__menu-list li {
    width: calc(50% - 60px);
  }
}
@media screen and (max-width: 767px) {
  .ham__menu-list li {
    width: 100%;
  }
}
.ham__menu-list a {
  color: var(--color-black);
}
.ham__menu-list-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 6.4px;
  padding-left: 33px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .ham__menu-list-t {
    font-size: 24px;
    line-height: 24px;
  }
}
.ham__menu-list-t::before {
  content: "";
  top: 65%;
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  width: 25px;
  height: 1px;
  background-color: var(--color-black);
}
@media screen and (max-width: 767px) {
  .ham__menu-list-t::before {
    width: 20px;
  }
}
.ham__menu-list-t::after {
  content: "";
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M10.9629 8L14 3.99976L10.9629 0L9.7731 0.690728L11.8116 3.37555H0V4.62445H11.8116L9.7731 7.30927L10.9629 8Z' fill='black'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 14px;
  height: 8px;
  display: block;
}
.ham__menu-list-b {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.7px;
  margin-top: 8px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .ham__menu-list-b {
    margin-top: 5px;
  }
}
.ham__menu-phone {
  padding: 24px;
  margin-top: 60px;
  max-width: 600px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ham__menu-phone {
    margin-top: 30px;
  }
}
.ham__menu-phone-t {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-black);
}
.ham__menu-phone-main {
  font-size: 48px;
  font-weight: 400;
  line-height: 72px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  color: var(--color-black);
}
@media screen and (max-width: 767px) {
  .ham__menu-phone-main {
    font-size: 36px;
    line-height: 48px;
  }
}
.ham__menu-phone-main span {
  margin-bottom: 9px;
}
.ham__menu-btn a {
  border: 1px solid var(--color-black);
  max-width: 600px;
  margin: 0 auto;
  justify-content: center;
  padding: 11px 23px;
}

@keyframes slide-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-right {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader {
  height: 100svh;
  overflow: hidden;
  position: fixed;
  inset: 0;
  z-index: 999;
  transition: all 1s ease;
}
.loader-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loader .mv_main-content {
  z-index: 5;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  -webkit-transform: translate(-50%, -50%);
}
.loader .mv_main-contents {
  animation: fadeIn 3s linear forwards;
}
.loader .mv_main-catch-txt,
.loader .mv_main-sub,
.loader .mv__scroll {
  color: var(--color-black);
}
.loader .mv_main-logo img {
  filter: none;
}
.loader .cloud-left,
.loader .cloud-right {
  width: 100%;
  position: absolute;
  z-index: 3;
  pointer-events: none;
  animation-duration: 40s;
  animation-timing-function: linear;
}
.loader .cloud-left {
  left: 0;
  bottom: 0;
  max-width: 767px;
  animation-name: slide-left;
}
.loader .cloud-right {
  right: 0;
  top: 0;
  max-width: 588px;
  animation-name: slide-right;
}
.loader-skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-black);
  font-family: "Zen Old Mincho", serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2.8px;
  line-height: 1;
  padding: 10px 16px;
  border: 1px solid var(--color-black);
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
.loader-skip::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M10.9629 8L14 3.99976L10.9629 0L9.7731 0.690728L11.8116 3.37555H0V4.62445H11.8116L9.7731 7.30927L10.9629 8Z' fill='black'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 14px;
  height: 8px;
  display: block;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .loader-skip {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
    letter-spacing: 2.4px;
    padding: 8px 12px;
  }
  .loader .mv_main-catch {
    gap: 12px;
    margin-top: 24px;
  }
  .loader .mv_main-sub {
    margin-top: 24px;
  }
}
.loader-skip:hover {
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.85);
}

.btn-primary {
  color: var(--color-black);
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 29px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--color-black);
  transition: all 0.5s ease;
}
@media screen and (max-width: 767px) {
  .btn-primary {
    font-size: 14px;
    line-height: 22px;
  }
}
.btn-primary:hover {
  opacity: 0.7;
}
.btn-primary::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M10.9629 8L14 3.99976L10.9629 0L9.7731 0.690728L11.8116 3.37555H0V4.62445H11.8116L9.7731 7.30927L10.9629 8Z' fill='black'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 14px;
  height: 8px;
  display: block;
}
.mv {
  padding: 0;
  padding-inline: 20px;
  position: relative;
  padding-top: 70px;
}
.mv__swiper {
  border-radius: 20px;
}
.mv__swiper .swiper-wrapper {
  transition-timing-function: ease;
}
.mv__swiper .swiper-slide.swiper-slide-active img {
  animation: mvScroll 11s linear forwards 0.5s;
}
.mv__swiper .swiper-slide.swiper-slide-prev img {
  animation: mvScroll 11s linear forwards 0.5s;
}
.mv-slider-img {
  border-radius: 20px;
  overflow: hidden;
}
.mv-slider-img img {
  width: 100%;
  aspect-ratio: 1400/796;
  object-fit: cover;
  object-position: center left;
  transition: all 0.5s linear;
}
@media screen and (max-width: 767px) {
  .mv-slider-img img {
    height: calc(100vh - 120px);
    object-fit: cover;
  }
}
.mv_main-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .mv_main-content {
    width: 100%;
  }
}
.mv_main-content.colorBlack {
  color: var(--color-black);
  z-index: 2;
}
body.overflow .mv .mv_main-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.mv_main-content.colorBlack .mv_main-logo img {
  filter: invert(1);
}
.mv_main-content.colorBlack .mv_main-catch-txt {
  color: var(--color-black);
}
.mv_main-content.colorBlack .mv_main-sub {
  color: var(--color-black);
}
.mv_main-logo {
  margin: 0 auto;
  text-align: center;
}
.mv_main-sub {
  color: var(--color-white);
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 9px;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .mv_main-sub {
    font-size: 12px;
    line-height: 160%;
    letter-spacing: 6px;
  }
}
.mv_main-catch {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  justify-content: center;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .mv_main-catch {
    gap: 16px;
  }
}
.mv_main-catch-txt {
  color: var(--color-white);
  text-align: center;
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  text-orientation: upright;
  -webkit-text-orientation: upright;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
}
@media screen and (max-width: 992px) {
  .mv_main-catch-txt {
    font-size: 24px;
    line-height: 28.2px;
  }
}
@media screen and (max-width: 767px) {
  .mv_main-catch-txt {
    font-size: 24px;
  }
}
.mv__scroll {
  color: var(--color-white);
  font-size: 16px;
  text-align: center;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 3.2px;
  position: relative;
  padding-bottom: 32px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .mv__scroll {
    bottom: 0;
  }
}
.mv__scroll::after {
  content: "";
  width: 1px;
  height: 24px;
  background-color: var(--color-white);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.inquiry {
  padding: 80px 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  .inquiry {
    padding: 30px 0;
  }
}
.inquiry::before {
  content: "";
  background-image: url("../../assets/img/inquiry__logo.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 226px;
  height: 259px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .inquiry::before {
    width: 134px;
    height: 153px;
  }
}
.inquiry__ttl {
  color: var(--color-black);
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: 1.2px;
}
@media screen and (max-width: 767px) {
  .inquiry__ttl {
    color: #000;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0.9px;
  }
}
.inquiry__btn {
  text-align: center;
  margin-top: 36px;
}
@media screen and (max-width: 767px) {
  .inquiry__btn {
    margin-top: 20px;
  }
}
.inquiry__btn .btn-primary {
  display: inline-flex;
}

.reason {
  background-color: #333;
}
.reason__row {
  display: flex;
  gap: 60px;
  align-items: center;
}
.reason__row:not(:last-of-type) {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .reason__row:not(:last-of-type) {
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 991px) {
  .reason__row {
    gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .reason__row {
    flex-direction: column-reverse;
    gap: 16px;
    &:nth-child(2) {
      flex-direction: column;
    }
  }
}
.reason__img {
  flex: 0 0 461px;
  width: 461px;
}
.reason__img img {
  width: 100%;
  height: auto;
}
.reason__content {
  flex: 1;
}
@media screen and (max-width: 991px) {
  .reason__img {
    flex: 0 0 360px;
    width: 360px;
  }
}
@media screen and (max-width: 767px) {
  .reason__img {
    flex: 0 0 auto;
    width: 100%;
  }
  .reason__content {
    width: 100%;
  }
}
.reason__cat {
  color: var(--color-gray);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 3.2px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
@media screen and (max-width: 767px) {
  .reason__cat {
    font-size: 13px;
    letter-spacing: 2.6px;
  }
}
.reason__cat::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px solid var(--color-gray);
}
@media screen and (max-width: 767px) {
  .reason__cat::before {
    width: 6px;
    height: 6px;
  }
}
.reason__ttl {
  color: #FFF;
  font-size: 28px;
  font-weight: 400;
  line-height: 39px;
  margin-top: 8px;
}
@media screen and (max-width: 767px) {
  .reason__ttl {
    color: #FFF;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
  }
}
.reason__txt {
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .reason__txt {
    margin-top: 16px;
    font-size: 13px;
  }
}

section {
  padding: 130px 0;
}
@media screen and (max-width: 767px) {
  section {
    padding: 60px 0;
  }
}

.page-header {
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .page-header {
    margin-bottom: 40px;
  }
}

.eng-title {
  color: #777;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 3.2px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}
@media screen and (max-width: 767px) {
  .eng-title {
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 2.4px;
  }
}
.eng-title::before {
  content: "";
  width: 25px;
  height: 1px;
  background-color: #000;
  display: inline-block;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}
.eng-title.-white {
  color: #fff;
}
.eng-title.-white::before {
  background-color: #fff;
}

.main-title {
  color: #000;
  font-size: 32px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 1.6px;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
  .main-title {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
  }
}
.main-title.-white {
  color: #fff;
}

.introduction__block {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .introduction__block {
    flex-direction: column;
    gap: 8px;
  }
}
.introduction .image-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 900/639;
  background-color: #f0f0f0;
  max-width: 900px;
  width: 100%;
}
@media screen and (max-width: 1200px) {
  .introduction .image-container {
    max-width: 650px;
  }
}
@media screen and (max-width: 991px) {
  .introduction .image-container {
    max-width: 400px;
  }
}
@media screen and (max-width: 767px) {
  .introduction .image-container {
    border-radius: 6.022px;
    max-width: 100%;
  }
}
.introduction .image-container .main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.introduction .image-container .main-image.fading {
  opacity: 0.2;
}
.introduction .details-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav {
    width: 100%;
  }
}
.introduction .details-nav .room-list {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .room-list {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    width: 100%;
  }
}
.introduction .details-nav .room-list .room-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 4px;
  margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .room-list .room-item {
    flex-direction: column;
    gap: 4px;
    width: 25%;
    padding: 8px;
    margin-bottom: 0;
  }
}
.introduction .details-nav .room-list .room-item:hover {
  background-color: #f9f9f9;
}
.introduction .details-nav .room-list .room-item.active {
  background-color: #f4f4f4;
}
.introduction .details-nav .room-list .room-item .thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .room-list .room-item .thumb {
    width: 60px;
    height: 60px;
    margin-right: 0;
  }
}
.introduction .details-nav .room-list .room-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.introduction .details-nav .room-list .room-item .room-name {
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.9px;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .room-list .room-item .room-name {
    font-size: 13px;
    letter-spacing: 0.65px;
  }
}
.introduction .details-nav .nav-arrows {
  display: flex;
  gap: 25px;
  margin-bottom: 30px;
  justify-content: flex-end;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .nav-arrows {
    gap: 15px;
    margin-bottom: 18px;
  }
}
.introduction .details-nav .nav-arrows .arrow-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  background: transparent;
  cursor: pointer;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .nav-arrows .arrow-btn {
    width: 28px;
    height: 28px;
  }
}
.introduction .details-nav .nav-arrows .arrow-btn svg {
  transform: rotate(-45deg);
  width: 8px;
  height: 8px;
}
.introduction .details-nav .nav-arrows .arrow-btn:hover {
  background-color: #000;
}
.introduction .details-nav .nav-arrows .arrow-btn:hover svg path {
  fill: #fff;
}
.introduction .details-nav .divider {
  border: none;
  border-top: 1px solid #ddd;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .divider {
    margin-bottom: 8px;
  }
}
.introduction .details-nav .room-display-area {
  position: relative;
}
.introduction .details-nav .room-display-area .room-content {
  display: none;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.introduction .details-nav .room-display-area .room-content.active {
  display: block;
  opacity: 1;
}
.introduction .details-nav .room-display-area .room-content .info-header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.introduction .details-nav .room-display-area .room-content .info-header .current-room-title {
  color: #000;
  font-size: 24px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 1.2px;
  flex-shrink: 0;
}
.introduction .details-nav .room-display-area .room-content .info-header .toggle-switch {
  display: flex;
  gap: 20px;
}
.introduction .details-nav .room-display-area .room-content .info-header .toggle-switch .toggle-btn {
  background: none;
  border: none;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 1.2px;
  cursor: pointer;
  padding: 6px 8px 8px 8px;
  font-family: "Zen Old Mincho", serif;
}
.introduction .details-nav .room-display-area .room-content .info-header .toggle-switch .toggle-btn.active {
  color: #000;
  border-bottom: 1px solid #000;
}
.introduction .details-nav .room-display-area .room-content .description {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 2.8px;
}
@media screen and (max-width: 767px) {
  .introduction .details-nav .room-display-area .room-content .description {
    font-size: 13px;
    line-height: 180%;
    letter-spacing: 1.3px;
  }
}

@media (max-width: 768px) {
  .showcase-area {
    flex-direction: column;
  }
  .showcase-area .details-nav {
    width: 100%;
    padding-left: 0;
  }
}
.point {
  background: #F6F6F6;
}
.point-box:not(:last-child) {
  margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .point-box:not(:last-child) {
    margin-bottom: 60px;
  }
}
.point-box__inner {
  position: relative;
  height: 453px;
  width: 100%;
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .point-box__inner {
    height: 300px;
  }
}
.point-box__inner-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
}
.point-box__inner-img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}
.point-box:nth-child(1) .point-box__inner-img {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url("../../assets/img/point-01.webp") lightgray center/cover no-repeat;
}
@media only screen and (max-width: 767px) {
  .point-box:nth-child(1) .point-box__inner-img {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url("../../assets/img/point-01-sp.webp") lightgray center/cover no-repeat;
  }
}
.point-box:nth-child(2) .point-box__inner-img {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url("../../assets/img/point-02.webp") lightgray center/cover no-repeat;
}
@media only screen and (max-width: 767px) {
  .point-box:nth-child(2) .point-box__inner-img {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url("../../assets/img/point-02-sp.webp") lightgray center/cover no-repeat;
  }
}
.point-box:nth-child(3) .point-box__inner-img {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url("../../assets/img/point-03.webp") lightgray center/cover no-repeat;
}
@media only screen and (max-width: 767px) {
  .point-box:nth-child(3) .point-box__inner-img {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url("../../assets/img/point-03-sp.webp") lightgray center/cover no-repeat;
  }
}
.point-box__title {
  color: #000;
  font-size: 24px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 1.2px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}
@media only screen and (max-width: 767px) {
  .point-box__title {
    align-items: center;
    margin-bottom: 16px;
  }
}
.point-box__title::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99985 0.00015229L0 9L8.99985 17.9999L17.9997 9L8.99985 0.00015229Z' fill='white'/%3E%3Cpath d='M9.00001 0L0 9L9.00001 18L18 9L9.00001 0ZM2.7172 9L9.00001 2.71721L15.2828 9L9.00001 15.2828L2.7172 9Z' fill='black'/%3E%3Cpath d='M9.00074 6.90258L6.90332 9L9.00073 11.0974L11.0981 8.99999L9.00074 6.90258Z' fill='black'/%3E%3C/svg%3E%0A");
  flex-shrink: 0;
}
.point-box__text {
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 200%;
}
@media only screen and (max-width: 767px) {
  .point-box__text {
    font-size: 13px;
    line-height: 180%;
  }
}

.gallery {
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url("../../assets/img/gallery-bg-pc.webp") lightgray 50%/cover no-repeat;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.gallery-grid {
  display: flex;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  .gallery-grid {
    flex-direction: column;
    margin: 0 -16px;
    gap: 3px;
  }
}
.gallery-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  .gallery-row {
    gap: 3px;
    flex-direction: row;
  }
  .gallery-row:nth-child(1) .gallery-item:first-child {
    width: 41.6%;
  }
  .gallery-row:nth-child(1) .gallery-item:nth-child(2) {
    width: 58.4%;
  }
  .gallery-row:nth-child(2) .gallery-item:first-child {
    width: 58.9333333333%;
  }
  .gallery-row:nth-child(2) .gallery-item:nth-child(2) {
    width: 41.0666666667%;
  }
  .gallery-row:nth-child(3) .gallery-item:first-child {
    width: 53.3333333333%;
  }
  .gallery-row:nth-child(3) .gallery-item:nth-child(2) {
    width: 46.6666666667%;
  }
}
.gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s linear;
  display: block;
}
.gallery-item::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='35.9992' height='36.0023' rx='17.9996' fill='black'/%3E%3Cpath d='M23 16.5C23 17.9344 22.5344 19.2594 21.75 20.3344L25.7063 24.2937C26.0969 24.6844 26.0969 25.3188 25.7063 25.7094C25.3156 26.1 24.6812 26.1 24.2906 25.7094L20.3344 21.75C19.2594 22.5375 17.9344 23 16.5 23C12.9094 23 10 20.0906 10 16.5C10 12.9094 12.9094 10 16.5 10C20.0906 10 23 12.9094 23 16.5ZM16.5 21C17.0909 21 17.6761 20.8836 18.2221 20.6575C18.768 20.4313 19.2641 20.0998 19.682 19.682C20.0998 19.2641 20.4313 18.768 20.6575 18.2221C20.8836 17.6761 21 17.0909 21 16.5C21 15.9091 20.8836 15.3239 20.6575 14.7779C20.4313 14.232 20.0998 13.7359 19.682 13.318C19.2641 12.9002 18.768 12.5687 18.2221 12.3425C17.6761 12.1164 17.0909 12 16.5 12C15.9091 12 15.3239 12.1164 14.7779 12.3425C14.232 12.5687 13.7359 12.9002 13.318 13.318C12.9002 13.7359 12.5687 14.232 12.3425 14.7779C12.1164 15.3239 12 15.9091 12 16.5C12 17.0909 12.1164 17.6761 12.3425 18.2221C12.5687 18.768 12.9002 19.2641 13.318 19.682C13.7359 20.0998 14.232 20.4313 14.7779 20.6575C15.3239 20.8836 15.9091 21 16.5 21Z' fill='white'/%3E%3C/svg%3E%0A");
  width: 36px;
  height: 36px;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .gallery-item::after {
    width: 14px;
    height: 14px;
  }
}
.gallery-item img {
  will-change: transform;
  transition: all 0.3s ease-in-out;
}
.gallery-item img:hover {
  transform: scale(1.2);
}
.gallery .modal {
  /* We use display: block here so the visibility property can take over */
  display: flex;
  position: fixed;
  z-index: 1000;
  padding: 60px 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  /* KEY FIX: Controls visibility without JavaScript */
  visibility: hidden;
  opacity: 0;
  /* Transition both opacity and visibility for the awesome effect */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.gallery .modal.open {
  opacity: 1;
  visibility: visible;
}
.gallery .modal-content {
  margin: auto;
  display: block;
  transform: scale(0.8);
  transition: transform 0.3s ease-in-out;
}
.gallery .modal.open .modal-content {
  transform: scale(1);
  height: 100%;
}
@media screen and (max-width: 991px) {
  .gallery .modal.open .modal-content {
    height: 100%;
    transform: unset;
    object-fit: cover;
  }
}
@media screen and (max-width: 767px) {
  .gallery .modal.open .modal-content {
    height: auto;
  }
}
.gallery .close-btn {
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='35.9992' height='36.0023' rx='17.9996' fill='white'/%3E%3Cpath d='M25 12.412L23.59 11.002L18 16.592L12.41 11.002L11 12.412L16.59 18.002L11 23.592L12.41 25.002L18 19.412L23.59 25.002L25 23.592L19.41 18.002L25 12.412Z' fill='black'/%3E%3C/svg%3E%0A");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 36px;
  height: 36px;
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  transition: 0.3s;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .gallery .close-btn {
    width: 24px;
    height: 24px;
    right: 16px;
    top: 16px;
  }
}
.gallery .close-btn:hover,
.gallery .close-btn:focus {
  color: #bbb;
  text-decoration: none;
}
.gallery .modal-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media screen and (max-width: 767px) {
  .gallery .modal-inner {
    max-width: 100%;
    display: flex;
  }
}

.voice {
  position: relative;
}
.voice::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 545px;
  height: 545px;
  aspect-ratio: 1/1;
  background-image: url("../../assets/img/voice-bg-pc.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .voice::after {
    width: 329px;
    height: 329px;
  }
}
.voice-block {
  width: calc(50% + 41.6666666667vw);
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .voice-block {
    width: 100%;
  }
}
.voice-card {
  padding: 32px;
  background-color: #F6F6F6;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .voice-card {
    padding: 24px 24px 24px 16px;
  }
}
.voice-card__num {
  color: #777;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 3.2px;
  display: inline-block;
  transform: rotate(-180deg);
  transform-origin: left;
  writing-mode: vertical-lr;
}
.voice-card__title {
  color: var(--Text-primary, #000);
  font-size: 28px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .voice-card__title {
    font-size: 25px;
  }
}
.voice-card__title small {
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .voice-card__title small {
    font-size: 15px;
  }
}
.voice-card__desc {
  color: var(--Text-primary, #000);
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (max-width: 767px) {
  .voice-card__desc {
    font-size: 13px;
  }
}
.voice-nav {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.voice-nav__next, .voice-nav__prev {
  position: static;
  width: 32px;
  height: 32px;
  border: 1px solid #000;
  background: transparent;
  cursor: pointer;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-top: 0;
}
.voice-nav__next:hover, .voice-nav__prev:hover {
  background: #000;
}
.voice-nav__next:hover svg path, .voice-nav__prev:hover svg path {
  fill: #fff;
}
.voice-nav__next svg, .voice-nav__prev svg {
  transform: rotate(-45deg);
  width: 8px;
  height: 8px;
}
.voice-pagnav {
  display: flex;
  gap: 32px;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 0;
}
.voice .custom-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.voice .custom-pagination__active {
  width: 10px;
  height: 10px;
  transform: rotate(135deg);
  aspect-ratio: 1/1;
  border: 1px solid #000;
}
.voice .custom-pagination__notactive {
  width: 8px;
  height: 8px;
  transform: rotate(135deg);
  border-radius: 40px;
  border: 1px solid #000;
  background: #000;
}

.voice-swiper .swiper-wrapper {
  padding-left: 15px;
  margin-bottom: 24px;
  align-items: stretch;
}
.voice-swiper .swiper-wrapper .swiper-slide {
  height: auto;
}
.media {
  position: relative;
  padding: 130px 0;
}
@media screen and (max-width: 767px) {
  .media {
    padding: 60px 0;
  }
}
.media-block {
  padding-left: 60px;
  border-left: 1px solid #FFF;
}
@media screen and (max-width: 767px) {
  .media-block {
    padding-left: 24px;
  }
}
.media-row {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .media-row {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }
}
.media-row:last-child {
  margin-bottom: 0;
}
.media-col:last-child {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .media-col img {
    aspect-ratio: 319/150;
    object-fit: cover;
    border-radius: 8px;
  }
}
.media-note {
  padding: 4px 12px 6px 12px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  border-radius: 30px;
  background: #FFF;
  display: inline-block;
  margin-bottom: 8px;
}
.media-title {
  color: #FFF;
  font-size: 24px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .media-title {
    font-size: 18px;
  }
}
.media-title span {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .media-title span {
    font-size: 13px;
  }
}
.media-desc {
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (max-width: 767px) {
  .media-desc {
    font-size: 13px;
  }
}
.media-wrapper {
  position: absolute;
  inset: 0;
  clip-path: inset(0);
}
.media-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
}
.media-bg {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url("../../assets/img/media-bg-pc.webp") lightgray center/cover no-repeat;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  position: fixed;
  inset: 0;
}

.faq .page-header {
  flex-shrink: 0;
}
.faq__row {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
@media screen and (max-width: 767px) {
  .faq__row {
    flex-direction: column;
    gap: 0;
  }
}
.faq__inner {
  max-width: 700px;
}
.faq .accordion-item:not(:last-child) {
  margin-bottom: 20px;
}
.faq .accordion-item:last-child {
  border-bottom: none;
}
.faq .accordion-item .accordion-header {
  font-family: "Zen Old Mincho", serif;
  background-color: #F6F6F6;
  color: #000;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: background-color 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .faq .accordion-item .accordion-header {
    font-size: 15px;
  }
}
.faq .accordion-item .accordion-header.active .icons {
  transform: rotate(180deg);
}
.faq .accordion-item .accordion-header .icons {
  font-size: 20px;
  font-weight: normal;
  transition: transform 0.3s ease;
}
.faq .accordion-item .accordion-content {
  background-color: #f9fcfd;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.faq .accordion-item .accordion-content p {
  padding: 15px 25px;
  color: var(--Text-primary, #000);
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (max-width: 767px) {
  .faq .accordion-item .accordion-content p {
    font-size: 14px;
  }
}

.contact {
  background-color: #333;
}
.contact__row {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
@media screen and (max-width: 767px) {
  .contact__row {
    flex-direction: column;
    gap: 24px;
  }
}
.contact__text {
  color: #FFF;
  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .contact__text {
    font-size: 13px;
    margin-bottom: 16px;
  }
}
.contact__phone {
  padding: 24px;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: unset;
  display: block;
  transition: opacity 0.3s ease;
}
.contact__phone:hover {
  opacity: 0.8;
}
.contact__phone-text {
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 180%;
  display: block;
  border-bottom: 1px solid #FFF;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .contact__phone-text {
    font-size: 14px;
  }
}
.contact__phone-number {
  color: #FFF;
  font-size: 48px;
  font-weight: 400;
  line-height: 150%;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .contact__phone-number {
    font-size: 32px;
  }
}
.contact__phone-number::before {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M36 26.84V33.912C36.0002 34.4184 35.8084 34.9059 35.4632 35.2764C35.118 35.6468 34.6451 35.8726 34.14 35.908C33.2667 35.9693 32.5533 36 32 36C14.326 36 0 21.674 0 4C0 3.448 0.0306667 2.73467 0.092 1.86C0.127445 1.35489 0.353162 0.882022 0.723607 0.536818C1.09405 0.191614 1.58165 -0.000228866 2.088 5.13159e-07H9.16C9.40808 -0.000250669 9.64739 0.0917181 9.83146 0.258041C10.0155 0.424364 10.1312 0.653166 10.156 0.900001C10.2013 1.35867 10.244 1.72667 10.284 2.004C10.6814 4.77785 11.496 7.47568 12.7 10.006C12.89 10.406 12.766 10.884 12.406 11.14L8.09 14.224C10.7294 20.3726 15.6294 25.2726 21.778 27.912L24.858 23.604C24.9834 23.4274 25.1671 23.3006 25.3767 23.2461C25.5863 23.1916 25.8085 23.2128 26.004 23.306C28.534 24.5078 31.2312 25.3203 34.004 25.716C34.2813 25.756 34.648 25.7987 35.104 25.844C35.3505 25.8693 35.5788 25.9851 35.7447 26.1692C35.9106 26.3532 36.0003 26.5922 36 26.84Z' fill='white'/%3E%3C/svg%3E");
  width: 36px;
  height: 36px;
  background-size: cover;
  flex-shrink: 0;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .contact__phone-number::before {
    width: 28px;
    height: 28px;
  }
}
.contact__left {
  flex-shrink: 0;
}
.contact__right {
  max-width: 600px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .contact__right {
    max-width: 800px;
  }
}
.contact .form-title {
  color: #FFF;
  font-size: 20px;
  font-weight: 400;
  line-height: 180%;
  border-bottom: 1px solid #DDD;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.contact .form-description {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
}
.contact .required-note {
  color: #F00;
  font-size: 12px;
  font-weight: 400;
  line-height: 180%;
}
.contact .contact-form {
  margin-top: 32px;
}
.contact .contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact .contact-form .form-group:not(:last-child) {
  margin-bottom: 16px;
}
.contact .contact-form .form-group label {
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}
@media screen and (max-width: 767px) {
  .contact .contact-form .form-group label {
    font-size: 14px;
  }
}
.contact .contact-form .form-group label > span {
  color: #F00;
}
.contact .contact-form .form-group input {
  height: 48px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #777;
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color 0.3s;
  color: #fff;
  outline: unset;
}
.contact .contact-form .form-group textarea {
  border-radius: 8px;
  border: 1px solid #777;
  background: rgba(255, 255, 255, 0.1);
  height: 180px;
  padding: 12px;
  outline: unset;
  color: #fff;
}
.contact .contact-form .privacy-policy-box {
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  border-radius: 8px;
  border: 1px solid #777;
  background: rgba(255, 255, 255, 0.1);
  padding: 16px;
  height: 140px;
  overflow-y: auto;
  color: #FFF;
  margin-bottom: 16px;
}
.contact .contact-form .privacy-policy-box::-webkit-scrollbar {
  display: none;
}
.contact .contact-form .checkbox-group {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 0 24px;
  cursor: pointer;
}
.contact .contact-form .checkbox-group input {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #777;
  background: var(--Color-Neutral-white, #FFF);
  cursor: pointer;
}
.contact .contact-form .checkbox-group .checkbox-label {
  cursor: pointer;
}
.contact .contact-form .submit-button {
  border-radius: 8px;
  background: #47AC59;
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  color: var(--Text-alternate, #FFF);
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.6px;
  outline: unset;
  width: 100%;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}
.contact .contact-form .submit-button span {
  display: flex;
}
.contact .contact-form .submit-button:hover {
  background-color: #fff;
  border: 1px solid #47AC59;
  color: #47AC59;
}
.contact .contact-form .submit-button:hover span {
  transition: all 0.3s ease;
}
.contact .contact-form .submit-button:hover span path {
  transition: all 0.3s ease;
  fill: #47AC59;
}

.company {
  background: url("../../assets/img/company-bg.webp") no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.company__row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
@media screen and (max-width: 767px) {
  .company__row {
    flex-direction: column;
  }
}
.company__left {
  max-width: 445px;
  width: 100%;
}
.company__right {
  max-width: 675px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .company__right > iframe {
    border-radius: 10px;
    aspect-ratio: 342/280;
    height: auto;
  }
}
.company__logo {
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .company__logo {
    max-width: 222px;
  }
}
.company__social {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}
.company__details {
  border-left: 1px solid #fff;
  padding-left: 40px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .company__details {
    padding-left: 24px;
    margin-bottom: 24px;
  }
}
.company__details-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.company__details-title {
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  max-width: 130px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .company__details-title {
    font-size: 14px;
    max-width: 96px;
  }
}
.company__details-text {
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
.company__details-text a {
  color: inherit;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .company__details-text {
    font-size: 14px;
  }
}
.company__link {
  width: 100%;
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  border: 1px solid #FFF;
  text-decoration: unset;
  transition: all 0.3s ease;
}
.company__link span {
  display: flex;
}
.company__link:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}
.company__link:hover span svg {
  transition: all 0.3s ease;
}
.company__link:hover span svg path {
  transition: all 0.3s ease;
  fill: #000;
}

.overview {
  background: url("../../assets/img/overview-bg.webp") no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.overview__inner {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}
.overview__txt {
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: 3.2px;
  display: flex;
}
.overview__txt span {
  display: block;
  text-wrap: nowrap;
  writing-mode: vertical-lr;
  flex-shrink: 0;
}
.overview__txt span:not(:first-child) {
  margin-left: 24px;
}
.overview__txt span:last-child {
  text-indent: 24px;
}
.overview__block {
  display: flex;
  flex-direction: row-reverse;
  gap: 80px;
  margin-right: 80px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #FFF;
}
@media screen and (max-width: 767px) {
  .overview__block {
    margin-right: 60px;
    gap: 40px;
    padding-top: 16px;
  }
}

.-ver.page-header {
  margin-bottom: 0;
  margin-left: 80px;
  display: flex;
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .-ver.page-header {
    margin-left: 60px;
  }
}
.-ver .main-title {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  /* Vertical right-to-left */
  text-orientation: upright;
  -webkit-text-orientation: upright;
  display: flex;
  flex-direction: column;
}
.-ver .eng-title {
  color: #FFF;
  display: flex;
  align-items: center;
  transform: rotate(0deg);
  transform-origin: right;
  writing-mode: vertical-lr;
}
.-ver .eng-title::before {
  width: 1px;
  height: 25px;
  margin-left: 0;
}

.footer {
  background-color: #000;
}
.footer p {
  color: #FFF;
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  max-width: 1440px;
  padding: 24px 64px;
}
@media screen and (max-width: 767px) {
  .footer p {
    padding: 8px;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    line-height: 150%;
  }
}

@media screen and (max-width: 767px) {
  .overview__inner {
    position: relative;
    width: 100%;
    overflow-x: auto;
  }
}
@keyframes mvScroll {
  100% {
    object-position: center right;
  }
}
body.overflow {
  overflow: hidden;
}

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