@charset "utf-8";
.top__fv {
  width: 100%;
  padding-top: 122px;
}

.top__fv-inner {
  padding-block: 100px 97px;
  width: 100%;
  position: relative;
  z-index: 10;
  padding-inline: 20px;
  max-width: calc(1326px + 20px * 2);
  margin-inline: auto;
}

@media screen and (min-width: 600px) {
  .top__fv-inner {
    padding-block: 0;
  }
}

.top__fv-inner::before,
.top__fv-inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.top__fv-inner::before {
  width: 54.39vw;
  max-width: 743px;
  aspect-ratio: 743/498;
  top: -2.12vw;
  left: 0;
  background: url(../images/top-fv__bg1.svg) no-repeat center center/contain;
  background-position: -13.1vw center;
}

.top__fv-inner::after {
  aspect-ratio: 798/628;
  max-width: 798px;
  width: 58.42vw;
  right: 0;
  bottom: -8.63vw;
  background: url(../images/top-fv-bg-2.svg) no-repeat center center/contain;
  background-position: 1.46vw center;
}

@media screen and (min-width: 1366px) {
  .top__fv-inner::before {
    top: -20px;
    background-position: -179px center;
  }

  .top__fv-inner::after {
    background-position: 20px center;
    bottom: -120px;
  }
}

.top__header-text {
  position: absolute;
  display: flex;
  gap: 10px;
}

@media screen and (min-width: 768px) {
  .top__header-text {
    gap: 20px;
  }
}

.top__header-text p {
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 500;
  font-family: var(--ff-serif);
  letter-spacing: calc(181 / 1000 * 1em);
  color: #b9a679;
  writing-mode: vertical-rl;
}

.top__header-text--1 {
  top: -40px;
  left: 20px;
}
@media screen and (min-width: 768px) {
  .top__header-text--1 {
    top: -14px;
  }
}

.top__header-text--2 {
  top: -23px;
  right: 20px;
}

@media screen and (min-width: 590px) {
  .top__header-text--2 {
    bottom: 0;
    top: auto;
  }
}

.top__header-text--2 p {
  align-self: self-end;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.4),
    0 0 80px rgba(255, 255, 255, 0.2);
}

@media screen and (min-width: 590px) {
  .top__header-text--2 p {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

.top__fv-description {
  position: absolute;
  bottom: 28px;
  left: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.4),
    0 0 80px rgba(255, 255, 255, 0.2);
}

@media screen and (min-width: 600px) {
  .top__fv-description {
    bottom: -65px;
  }
}

@media screen and (min-width: 1220px) {
  .top__fv-description {
    bottom: 28px;
  }
}

@media screen and (min-width: 1164px) {
  .top__fv-description {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

.top__fv-description p {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: calc(50 / 1000 * 1em);
  line-height: calc(20.2 / 13);
  color: #b9a679;
}

.top__fv-image {
  width: 60.33vw;
  max-width: 800px;
  margin-inline: auto;
  aspect-ratio: 800/644;
}

.top__fv-image img {
  aspect-ratio: 800/644;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
}

/* ====================
concept
====================== */
.top__concept {
  padding-block: 60px 86px;
}

@media screen and (min-width: 768px) {
  .top__concept {
    padding-block: 120px 86px;
  }
}

.top__concept-inner {
  text-align: left;
}

@media screen and (min-width: 600px) {
  .top__concept-inner {
    text-align: center;
  }
}

.top__concept-title {
  font-size: clamp(20px, 1.76vw, 24px);
  font-weight: 700;
  letter-spacing: calc(50 / 1000 * 1em);
  color: #b9a57b;
}

.top__concept-description {
  margin-top: 40px;
  font-size: clamp(12px, 1.03vw, 14px);
  font-weight: 500;
  line-height: calc(30 / 14);
  color: #483c42;
}

/* =======================
service
========================= */
.top__service {
  padding-bottom: 108px;
}

.top__service-container {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 92px;
}

.top__service-slider {
  width: 100%;
}

.top__service-slide-image {
  aspect-ratio: 750/390;
  width: 100%;
  height: auto;
}

.top__service-slide-image img {
  aspect-ratio: 750/390;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.top__service-content-wrapper {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media screen and (min-width: 768px) {
  .top__service-content-wrapper {
    flex-direction: row;
    align-items: flex-end;
    gap: 10.32vw;
  }
}

@media screen and (min-width: 1366px) {
  .top__service-content-wrapper {
    flex-direction: row;
    align-items: flex-end;
    gap: 141px;
  }
}

@media screen and (min-width: 768px) {
  .top__service-content-head {
    max-width: 463px;
  }
}

.top__service-content-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: calc(50 / 1000 * 1em);
  line-height: 1.2;
  color: #000000;
}

.top__service-content-text {
  margin-top: 17px;
  font-size: 14px;
  font-weight: 500;
  line-height: calc(28 / 14);
}

.top__service-content-button {
  text-align: end;
}

@media screen and (min-width: 768px) {
  .top__service-content-button {
    text-align: start;
  }
}

.top__service-content-link p {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  padding: 16px 24px 15px 34px;
  border-radius: 50px;
  background: #505050;
  border: 1px solid #505050;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.5s ease;
}

.top__service-content-link p::after {
  content: "";
  width: 10px;
  height: 7px;
  background: url(../images/button-arrow-white.svg) no-repeat center
    center/contain;
  transition: all 0.5s ease;
}

.top__service-content-link:hover p {
  background: var(--color-white);
  color: #505050;
}

.top__service-content-link:hover p::after {
  background: url(../images/button-icon-brown.svg) no-repeat center
    center/contain;
  transform: translateX(5px);
}

/* ===================
works
==================== */
.top__works {
  padding-bottom: 142px;
}

.top__works-container {
  margin-top: 60px;
  padding-left: 51px;
  max-width: 1366px;
  margin-inline: auto;
}

@media screen and (min-width: 1367px) {
  .top__works-container {
    max-width: 1266px;
    padding-left: 0;
  }
}

.top__works-slider {
  position: relative;
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: -18%;
  width: 40px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9a679;
  background: #ebe1c4;
  border-radius: 50%;
  transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    top: -29%;
    width: 50px;
    height: 50px;
  }
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #b9a679;
  color: #ebe1c4;
}

.swiper-button-next {
  right: 20px;
}

.swiper-button-prev {
  right: 80px;
  left: auto;
}

@media screen and (min-width: 768px) {
  .swiper-button-next {
    right: 50px;
  }

  .swiper-button-prev {
    right: 110px;
  }
}

@media screen and (min-width: 1367px) {
  .swiper-button-next {
    right: 0;
  }

  .swiper-button-prev {
    right: 70px;
  }
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 20px;
  font-weight: 500;
}

/* 無効状態のスタイル */
.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

/* カスタム矢印アイコン */
.swiper-button-next:after {
  content: ">";
}

.swiper-button-prev:after {
  content: "<";
}

.top__works-button {
  margin-top: 82px;
  text-align: center;
}

.top__works-button-link {
  color: var(--color-white);
}

.top__works-button-link p {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  line-height: calc(19 / 13);
  padding: 16px 24px 15px 46px;
  background: #505050;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 19px;
  border: 1px solid #505050;
  transition: all 0.5s ease;
}

.top__works-button-link p::after {
  content: "";
  width: 10px;
  height: 7px;
  background: url(../images/button-arrow-white.svg) no-repeat center
    center/contain;
  transition: all 0.5s ease;
}

.top__works-button-link:hover p {
  color: #505050;
  background: var(--color-white);
}

.top__works-button-link:hover p::after {
  background: url(../images/button-icon-brown.svg) no-repeat center
    center/contain;
  transform: translateX(5px);
}

/* =================
cta
==================== */
.top__cta {
  width: 100%;
  padding-bottom: 142px;
}

.top__cta-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media screen and (min-width: 900px) {
  .top__cta-inner {
    flex-direction: row;
    align-items: stretch;
  }
}

.top__cta-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  color: var(--color-white);
  padding: 14.78vw 3.66vw 4.31vw;
}

@media screen and (min-width: 1366px) {
  .top__cta-box {
    padding: 202px 50px 59px;
  }
}

.top__cta-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgba(96, 77, 37, 0.55);
  z-index: 0;
}

.top__cta-box--1 {
  border-radius: 0 20px 20px 0;
}

.top__cta-box--2 {
  border-radius: 20px 0 0 20px;
}

.top__cta-box-image {
  aspect-ratio: 682/533;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.top__cta-box-image img {
  aspect-ratio: 682/533;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.top__cta-box:hover .top__cta-box-image img {
  transform: scale(1.05);
}

.top__cta-box-contents {
  position: relative;
  z-index: 2;
}

.top__cta-box-title-en {
  color: var(--color-white);
  font-size: clamp(38px, 3.52vw, 48px);
  font-weight: 400;
  letter-spacing: calc(30 / 1000 * 1em);
  line-height: calc(70 / 48);
}

.top__cta-box-title-ja {
  color: var(--color-white);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--ff-serif);
  letter-spacing: calc(160 / 1000 * 1em);
  line-height: calc(26 / 18);
}

.top__cta-box-title-ja::before {
  content: "";
  width: 22px;
  height: 13px;
  background: url(../images/top-cta-icon.svg) no-repeat center center/contain;
}

.top__cta-box-text {
  color: var(--color-white);
  margin-top: 22px;
  font-size: clamp(12px, 1.03vw, 14px);
  font-weight: 500;
  line-height: calc(30 / 14);
}

.top__cta-box-button {
  margin-top: 35px;
}

.top__cta-box-button p {
  font-size: 13px;
  font-weight: 600;
  color: #b9a57b;
  padding: 19px 24px 17px 35px;
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
}

.top__cta-box-button p::after {
  content: "";
  width: 10px;
  height: 7px;
  background: url(../images/button-arrow-g.svg) no-repeat center center/contain;
  transition: transform 0.5s ease;
}

.top__cta-box:hover .top__cta-box-button p::after {
  transform: translateX(5px);
}

/* =================
news
================== */
.top__news {
  padding-bottom: 150px;
}

.top__news-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media screen and (min-width: 768px) {
  .top__news-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.top__news-button {
  text-align: end;
}

.top__news-button-link {
  color: var(--color-white);
}

.top__news-button-link p {
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  background: #505050;
  border: 1px solid #505050;
  padding: 19px 24px 17px 35px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.5s ease;
}

.top__news-button-link p::after {
  content: "";
  width: 10px;
  height: 7px;
  background: url(../images/button-arrow-white.svg) no-repeat center
    center/contain;
  transition: all 0.5s ease;
}

.top__news-button-link:hover p {
  color: #505050;
  background: var(--color-white);
}

.top__news-button-link:hover p::after {
  background: url(../images/button-icon-brown.svg) no-repeat center
    center/contain;
  transform: translateX(5px);
}

.top__news-container {
  padding: 10px 20px;
  margin-top: 70px;
  max-width: 1000px;
  margin-inline: auto;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

@media screen and (min-width: 768px) {
  .top__news-container {
    padding: 10px 44px;
  }
}