@charset "UTF-8";
:root {
  --design-width-desktop: 1440;
  --design-width-mobile: 375;
  --header-height: 122px;
  --space-m: 25px;
  --bdrs: 10px;
  /* fonts */
  --font-en-num: "EB Garamond", serif;
  --font-en: "Cormorant Garamond", serif;
  --font-num: "Libre Bodoni", serif;
  --font-mincho: "Noto Serif JP", serif;
  /* z-index */
  --z-index-header: 100;
  --z-index-modal: 200;
  --z-index-bg: -10;
  /* font-weight */
  --fw-thin: 100;
  --fw-ex-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-ex-bold: 800;
  --fw-black: 900;
  /* colors */
  --color-accent: #b49567;
  --color-accent-muted: #44795d;
  --color-light-grey: #828282;
  --color-light-grey-soft: #f5f5f5;
}

/*------------------------------
    template 上書き
--------------------------------*/
.navi--header .navi__item {
  flex: none !important;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
}

.pageFooter__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 50px;
  font-size: 0.75rem;
  line-height: 1.7;
  font-family: var(--font-mincho);
  gap: 10px;
}
@media (max-width: 767px) {
  .pageFooter__contact {
    font-size: 0.8125rem;
  }
}
.pageFooter__contact dt {
  font-size: 0.875rem;
}
.pageFooter__contact .contact__tel {
  font-weight: var(--fw-semi-bold);
  font-size: clamp(2.375rem, 2.0642265193rem + 1.3259668508vw, 3.125rem);
}

.pageFooter__note {
  font-family: var(--font-mincho);
}

.pageFooter__related {
  padding-bottom: 60px;
}
.pageFooter__related .bnr__item a {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  text-align: center;
  gap: 1em;
}

/*--------------------------------
  ベース（base）
--------------------------------*/
html {
  scroll-behavior: smooth;
}
@media (min-width: 851px) {
  html {
    scroll-padding: var(--header-height);
  }
}

body {
  -webkit-animation: fadeInBody 1s;
          animation: fadeInBody 1s;
}

@-webkit-keyframes fadeInBody {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInBody {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
/*--------------------------------
  共通レイアウト（layout）
--------------------------------*/
.main {
  font-family: var(--font-mincho);
}
.main h1, .main h2, .main h3, .main h4, .main h5 {
  font-weight: var(--fw-medium);
}
.main img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
.main a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}
.main a img {
  transition: opacity 0.3s;
}
.main a:hover img {
  opacity: 0.7;
}

/*--------------------------------
  汎用クラス（utility）
--------------------------------*/
@media (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

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

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

.text-white {
  color: #fff !important;
}

.w-full {
  width: 100%;
  max-width: none;
}

.object-cover, .finebubble__img img, .top-lineup-list__img img, .top-loc__img img, .top-loc__bg img, .top-design__img img, .top-access__bg img, .top-info__bg img, .top-intro__bg img, .page-fv__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.overflow-hidden {
  overflow: hidden;
}

.text-xxs, .top-info__note, .top-info__yokoku dd, .contents-block__en, .card__en {
  font-size: 0.625rem;
  line-height: 1.6;
}

.text-xs, .seculity-other-list, .seculity-system-point, .top-lineup__lead, .top-info__ttl-en {
  font-size: 0.75rem;
  line-height: 1.6;
}

.text-s {
  font-size: 0.875rem;
  line-height: 1.75;
}

.text-m {
  font-size: 1rem;
  line-height: 1.75;
}

.text-l {
  font-size: 1.125rem;
  line-height: 1.75;
}

.text-s-fluid {
  font-size: clamp(0.75rem, 0.6982044199rem + 0.2209944751vw, 0.875rem);
}

.text-l-fluid {
  font-size: clamp(0.875rem, 0.7714088398rem + 0.4419889503vw, 1.125rem);
}

.font-num {
  font-family: var(--font-en-num);
}

.img-border {
  border: 1px solid #ccc;
}

/*--------------------------------
  共通パターン（pattern）
--------------------------------*/
.slider {
  overflow: hidden;
}
.slider .swiper-pagination {
  z-index: 1;
}
.slider .swiper-pagination-bullets {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.slider .swiper-pagination-bullet {
  width: 20px;
  height: 3px;
  margin: 0;
  border: 1px solid #62605d;
  border-radius: 0;
  box-sizing: content-box;
}
.slider .swiper-pagination-bullet-active {
  background-color: #62605d;
}

@media (min-width: 768px) {
  .slider-type1 {
    margin-left: -310px;
  }
}
.slider-type1 .swiper-slide {
  width: clamp(16.25rem, -17.5rem + 70.3125vw, 38.75rem);
}
.slider-type1 .swiper-slide figcaption {
  margin-top: 10px;
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
  text-align: right;
}

.slider-type2 .swiper-slide {
  width: clamp(16.25rem, -0.625rem + 35.15625vw, 27.5rem);
}
.slider-type2 .swiper-slide figcaption {
  margin-top: 10px;
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
  text-align: right;
}
.slider-type2 .swiper-pagination {
  position: relative;
  margin-top: clamp(1.875rem, 1.0980662983rem + 3.3149171271vw, 3.75rem);
}

.slider-type3 .swiper-slide {
  width: 100%;
}
.slider-type3 .swiper-slide figcaption {
  margin-top: 10px;
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
  text-align: right;
}

/*--------------------------------
  共通コンポーネント（components）
--------------------------------*/
.img-photo {
  position: relative;
}
.img-photo__caption {
  position: absolute;
  right: 0.6em;
  bottom: 0.6em;
  color: #fff;
  font-size: clamp(0.5rem, 0.125rem + 0.78125vw, 0.75rem);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2), -1px 1px 1px rgba(0, 0, 0, 0.2), 1px -1px 1px rgba(0, 0, 0, 0.2);
}
.img-photo--bk .img-photo__caption {
  color: #000;
  text-shadow: none;
}
.img-photo--left .img-photo__caption {
  right: auto;
  left: 0.6em;
}

.btn-basic {
  display: grid;
  position: relative;
  width: 220px;
  height: 57px;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  font-weight: var(--fw-semi-bold);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  transition: opacity 0.3s;
  place-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .btn-basic:hover {
    opacity: 0.7;
  }
}
.btn-basic span {
  position: relative;
  color: var(--color-accent);
}
.btn-basic::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgb(45, 42, 39) 0%, rgb(25, 23, 20) 100%);
  content: "";
}
.btn-basic::after {
  -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background-color: var(--color-accent);
  content: "a";
}
.btn-basic--cta {
  width: 260px;
  color: #fff;
  font-size: 1.125rem;
}
.btn-basic--cta::before {
  background: linear-gradient(90deg, rgb(157, 116, 56) 0%, rgb(70, 52, 24) 100%);
}
.btn-basic--cta::after {
  background-color: #fff;
}
.btn-basic--cta span {
  color: #fff;
}
.btn-basic--size-l {
  width: 100%;
  height: 66px;
  font-size: 1.3125rem;
  font-family: var(--font-mincho);
  letter-spacing: 0.2em;
}
@media (min-width: 768px) {
  .btn-basic--size-l {
    width: 550px;
  }
}

.btn-more {
  display: grid;
  position: relative;
  width: 210px;
  height: 57px;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  font-weight: var(--fw-semi-bold);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  transition: opacity 0.3s;
  place-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .btn-more:hover {
    opacity: 0.7;
  }
}
.btn-more span {
  position: relative;
}
.btn-more::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(157, 116, 56) 0%, rgb(70, 52, 24) 100%);
  content: "";
}
.btn-more::after {
  -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background-color: currentColor;
  content: "a";
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card::after {
  display: inline-block;
  width: 46px;
  height: 2px;
  margin-top: 10px;
  background-color: currentColor;
  content: "";
}
.card__ttl-en {
  color: var(--color-accent);
  font-size: 21px;
  line-height: 1;
  font-family: var(--font-en);
}
.card__ttl {
  font-size: 21px;
}
.card__en {
  color: var(--color-light-grey);
}

.contents-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1024px) {
  .contents-block {
    flex-direction: row;
  }
}
.contents-block > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 40px;
}
.contents-block__text {
  font-size: 0.75rem;
  line-height: 2.2;
}
.contents-block__en {
  color: var(--color-light-grey);
}

.badge {
  display: grid;
  width: clamp(8.75rem, 5.1761049724rem + 15.2486187845vw, 17.375rem);
  aspect-ratio: 278/58;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  background-color: #fff;
  color: var(--color-accent);
  font-size: clamp(0.75rem, 0.6464088398rem + 0.4419889503vw, 1rem);
  font-family: var(--font-en);
  place-items: center;
}
@media (min-width: 768px) {
  .badge {
    letter-spacing: 0.2em;
  }
}

.section {
  padding-block: clamp(3.75rem, 2.1961325967rem + 6.6298342541vw, 7.5rem);
}
.section--bg_light {
  background-color: var(--color-light-grey-soft);
}
.section--bg_dark {
  background-image: url("../img/common/bg.jpg");
  background-size: 100% auto;
  background-repeat: repeat;
  color: #fff;
}
.section__contents > *:not(:last-child) {
  margin-bottom: clamp(3.125rem, 1.8301104972rem + 5.5248618785vw, 6.25rem);
}
.section__ttl {
  color: var(--color-accent);
  font-size: clamp(1.25rem, 0.9910220994rem + 1.1049723757vw, 1.875rem);
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  text-align: center;
}

.figure figcaption {
  margin-top: 10px;
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
  line-height: 1;
  text-align: right;
}

/*--------------------------------
  アニメーション（animation）
--------------------------------*/
[data-animate] {
  opacity: 0;
  transition: opacity 0.6s, transform 0.6s;
}

.is-show[data-animate] {
  opacity: 1;
  transform: none;
}

[data-animate=fade-in] {
  transform: translateY(0);
}

[data-animate=fade-up] {
  transform: translateY(30px);
}

[data-animate=fade-down] {
  transform: translateY(-30px);
}

[data-animate=fade-left] {
  transform: translateX(-30px);
}

[data-animate=fade-right] {
  transform: translateX(30px);
}

[data-animate=zoom-in] {
  transform: scale(0.9);
}

[data-animate=gray-in] img {
  transition: filter 0.6s ease 0.6s;
  filter: grayscale(100%);
}
[data-animate=gray-in].is-show img {
  filter: grayscale(0);
}

/*--------------------------------
  トップページ（top）
--------------------------------*/
.page-fv {
  position: relative;
  height: 106.6666666667vw;
}
@media (min-width: 768px) {
  .page-fv {
    height: calc(100vh - var(--header-height));
  }
}
.page-fv__video {
  width: 100%;
  height: 100%;
  vertical-align: top;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-fv__img {
  width: 100%;
  height: 100%;
}
.page-fv__scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: clamp(1.875rem, 1.0980662983rem + 3.3149171271vw, 3.75rem);
  color: #fff;
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
  line-height: 1;
  letter-spacing: 0.1em;
}
.page-fv__scroll::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  width: 1px;
  height: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
  background-color: var(--color-accent);
  content: "";
  -webkit-animation: scroll-line 2s ease-in-out infinite;
          animation: scroll-line 2s ease-in-out infinite;
  transform-origin: top;
}

@-webkit-keyframes scroll-line {
  0% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes scroll-line {
  0% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom;
  }
}
.top-intro {
  position: relative;
  background-color: #333;
}
.top-intro__first {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  place-items: center;
}
@media (min-width: 851px) {
  .top-intro__first {
    height: calc(100vh - 122px);
  }
}
.top-intro__copy {
  position: absolute;
  top: 8%;
  color: #fff;
  font-weight: var(--fw-semi-bold);
  font-size: clamp(1.3125rem, 1.2607044199rem + 0.2209944751vw, 1.4375rem);
  letter-spacing: 1em;
  writing-mode: vertical-rl;
}
.top-intro__logo {
  position: absolute;
  bottom: 0;
}
@media (max-width: 767px) {
  .top-intro__logo {
    width: 100%;
  }
}
.top-intro__bg {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: hidden;
}
@media (max-width: 850px) {
  .top-intro__bg {
    height: 100svh;
  }
}
@media (min-width: 851px) {
  .top-intro__bg {
    top: 122px;
    height: calc(100vh - 122px);
  }
}
.top-intro__bg img {
  display: block;
  transition: filter 0.8s ease, transform 0.8s ease;
}
.top-intro__bg::after {
  opacity: 0;
  position: absolute;
  inset: 0;
  background: #000;
  content: "";
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.top-intro__bg.is-active img {
  transform: scale(1.03);
  filter: blur(5px);
}
.top-intro__bg.is-active::after {
  opacity: 0.45;
}
.top-intro__contents {
  display: grid;
  position: relative;
  min-height: 100svh;
  margin-top: 100svh;
  color: #fff;
  text-align: center;
  place-items: center;
}
@media (min-width: 851px) {
  .top-intro__contents {
    min-height: calc(100vh - 122px);
    margin-top: calc(100vh - 122px);
  }
}
.top-intro__ttl {
  margin-bottom: clamp(1.875rem, 1.0980662983rem + 3.3149171271vw, 3.75rem);
  color: var(--color-accent);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
}
.top-intro__text {
  font-size: 0.875rem;
  line-height: 3;
  letter-spacing: 0.1em;
}
@media (max-width: 850px) {
  .top-intro__text {
    text-align: left;
  }
}

.top-info {
  position: relative;
  color: #fff;
}
.top-info__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-bg);
  overflow: hidden;
}
.top-info__inner {
  position: relative;
  padding-block: clamp(1.25rem, -2.1167127072rem + 14.364640884vw, 9.375rem) clamp(6.25rem, 3.6602209945rem + 11.0497237569vw, 12.5rem);
}
.top-info__yokoku {
  display: flex;
  align-items: center;
  color: var(--color-light-grey);
  gap: 15px;
}
@media (min-width: 768px) {
  .top-info__yokoku {
    position: absolute;
    top: 20px;
    left: 0;
  }
}
.top-info__yokoku dt {
  flex-shrink: 0;
  padding: 5px;
  border: 1px solid rgba(130, 130, 130, 0.5);
  font-size: clamp(0.75rem, 0.7241022099rem + 0.1104972376vw, 0.8125rem);
  line-height: 1;
}
.top-info__contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
@media (max-width: 767px) {
  .top-info__contents {
    margin-top: 50px;
  }
}
.top-info__ttl-en {
  color: var(--color-light-grey);
}
.top-info__ttl {
  font-size: clamp(1.75rem, 1.5428176796rem + 0.8839779006vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0.2em;
}
.top-info__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  gap: 20px;
}
@media (max-width: 767px) {
  .top-info__note {
    text-align: center;
  }
}

.top-access {
  position: relative;
  padding-block: clamp(5.625rem, -2.8125rem + 17.578125vw, 11.25rem);
  color: #fff;
}
@media (max-width: 767px) {
  .top-access {
    padding-bottom: 0;
  }
}
.top-access__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-bg);
  overflow: hidden;
}
.top-access__inner {
  display: flex;
  gap: 30px;
}
@media (max-width: 767px) {
  .top-access__inner {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .top-access__img {
    margin-inline: -25px;
  }
}
@media (min-width: 768px) {
  .top-access__img {
    flex-shrink: 0;
    width: 45%;
  }
}
.top-access .card {
  margin-bottom: clamp(3.4375rem, -1.71875rem + 10.7421875vw, 6.875rem);
}

.top-design {
  background-color: #1c1c1c;
  color: #fff;
}
@media (max-width: 767px) {
  .top-design {
    padding-top: 60px;
  }
}
.top-design__inner {
  display: flex;
  align-items: center;
  gap: clamp(3.75rem, -1.5rem + 10.9375vw, 7.25rem);
}
@media (max-width: 767px) {
  .top-design__inner {
    flex-direction: column-reverse;
  }
}
@media (max-width: 767px) {
  .top-design__img {
    margin-inline: -25px;
  }
}
@media (min-width: 768px) {
  .top-design__img {
    flex-shrink: 0;
    width: max(300px, 29.8611111111vw);
    height: clamp(50rem, 35.9375rem + 29.296875vw, 59.375rem);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
}
.top-design__contents {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  gap: clamp(3.75rem, 2.1961325967rem + 6.6298342541vw, 7.5rem);
}

.top-loc {
  position: relative;
  overflow: hidden;
  color: #fff;
}
@media (max-width: 767px) {
  .top-loc {
    padding-top: 60px;
  }
}
.top-loc__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-bg);
  overflow: hidden;
}
.top-loc__inner {
  display: flex;
  align-items: center;
  gap: clamp(3.75rem, -1.5rem + 10.9375vw, 7.25rem);
}
@media (max-width: 767px) {
  .top-loc__inner {
    flex-direction: column-reverse;
  }
}
@media (min-width: 768px) {
  .top-loc__inner {
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
}
@media (min-width: 1024px) {
  .top-loc__inner {
    margin-right: calc(50% - 50vw);
  }
}
@media (max-width: 767px) {
  .top-loc__img {
    margin-inline: -25px;
  }
}
@media (min-width: 768px) {
  .top-loc__img {
    flex-shrink: 0;
    width: max(300px, 29.8611111111vw);
    height: clamp(53.125rem, 43.75rem + 19.53125vw, 59.375rem);
  }
}
.top-loc__contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: clamp(3.75rem, 2.1961325967rem + 6.6298342541vw, 7.5rem);
}
@media (min-width: 768px) {
  .top-loc__contents {
    padding-block: 50px;
  }
}
.top-loc .contents-block {
  max-width: 600px;
}
.top-loc .contents-block .card {
  flex-shrink: 0;
  width: 320px;
}
.top-loc__header {
  position: relative;
}
.top-loc__header .card {
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .top-loc__header .card {
    position: absolute;
  }
}
@media (max-width: 767px) {
  .top-loc .slider {
    margin-right: -25px;
  }
}
@media (min-width: 1024px) {
  .top-loc .slider {
    margin-left: 320px;
  }
}
.top-loc .slider .swiper-slide {
  display: flex;
  flex-direction: column-reverse;
  width: clamp(16.25rem, 15.3694751381rem + 3.7569060773vw, 18.375rem);
  gap: 5px;
}
.top-loc .slider figcaption {
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
}
.top-loc .slider .swiper-pagination {
  margin-top: 20px;
}
.top-loc .slider .swiper-pagination-bullet {
  width: 15px;
  border: 1px solid #fff;
}
.top-loc .slider .swiper-pagination-bullet-active {
  background-color: #fff;
}

.top-view {
  position: relative;
}
.top-view__ttl {
  color: #fff;
  font-size: clamp(0.875rem, 0.8232044199rem + 0.2209944751vw, 1rem);
  letter-spacing: 0.1em;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 19.4444444444vw;
}
@media (max-width: 767px) {
  .top-view__ttl {
    line-height: 1.9;
    top: 37.3333333333vw;
  }
}

.top-lineup {
  padding-block: clamp(3.125rem, -1.5625rem + 9.765625vw, 6.25rem);
}
.top-lineup__header {
  display: flex;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  gap: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
}
@media (max-width: 767px) {
  .top-lineup__header {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .top-lineup__header {
    align-items: center;
  }
}
.top-lineup__ttl {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1.3125rem;
}
.top-lineup-list {
  display: grid;
  gap: 10px;
}
@media (min-width: 768px) {
  .top-lineup-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .top-lineup-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.top-lineup-list > li {
  position: relative;
  border: 1px solid var(--color-accent);
}
.top-lineup-list > li:nth-child(1) {
  grid-area: 1/1/2/3;
}
.top-lineup-list > li:nth-child(2) {
  grid-area: 2/1/3/2;
}
@media (min-width: 768px) {
  .top-lineup-list > li:nth-child(2) {
    grid-area: 2/1/3/2;
  }
}
.top-lineup-list > li:nth-child(3) {
  grid-area: 3/1/4/2;
}
@media (min-width: 768px) {
  .top-lineup-list > li:nth-child(3) {
    grid-area: 2/2/3/3;
  }
}
.top-lineup-list > li:nth-child(4) {
  grid-area: 2/2/4/3;
}
@media (min-width: 768px) {
  .top-lineup-list > li:nth-child(4) {
    grid-area: 1/3/3/4;
  }
}
.top-lineup-list__ttl {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-size: clamp(0.75rem, 0.5946132597rem + 0.6629834254vw, 1.125rem);
}
.top-lineup-list__img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.top-lineup-list__img > div img {
  filter: grayscale(100%);
}
.top-lineup-list .-commingsoon {
  pointer-events: none;
}
.top-lineup-list .-commingsoon .top-lineup-list__img {
  position: relative;
}
.top-lineup-list .-commingsoon .top-lineup-list__img::before {
  opacity: 0.7;
  position: absolute;
  inset: 0;
  background-color: #fff;
  content: "";
}
.top-lineup-list .badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.top-lineup-list__btn {
  display: block;
  align-items: center;
  padding-inline: 20px;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  background: linear-gradient(95deg, rgb(45, 42, 39) 0%, rgb(25, 23, 20) 100%);
  color: var(--color-accent);
  font-weight: var(--fw-semi-bold);
  font-size: clamp(0.75rem, 0.6982044199rem + 0.2209944751vw, 0.875rem);
  letter-spacing: 0.2em;
}
@media (max-width: 767px) {
  .top-lineup-list__btn {
    padding: 5px 10px;
    line-height: 1.5;
  }
}
@media (min-width: 768px) {
  .top-lineup-list__btn {
    display: flex;
    justify-content: space-between;
    width: clamp(6.875rem, 4.0262430939rem + 12.1546961326vw, 13.75rem);
    height: 57px;
  }
}
.top-lineup-list__btn .-ttl {
  color: #fff;
  font-size: clamp(1rem, 0.9482044199rem + 0.2209944751vw, 1.125rem);
}

/*--------------------------------
  ロケーション（location）
--------------------------------*/
.loc-4way {
  display: grid;
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
  gap: 30px;
  justify-items: center;
}
@media (min-width: 768px) {
  .loc-4way {
    grid-template-columns: repeat(2, 1fr);
  }
}
.loc-4way__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.loc-4way__img img {
  width: 100%;
}
.loc-4way__badge {
  width: clamp(12.5rem, 7.7089088398rem + 20.4419889503vw, 24.0625rem);
}
.loc-4way__contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 385px;
}
@media (min-width: 768px) {
  .loc-4way__contents {
    justify-self: end;
  }
}
.loc-4way__contents p {
  max-width: 309px;
  font-size: 0.75rem;
}
@media (min-width: 768px) {
  .loc-4way__map {
    justify-self: start;
  }
}

.loc-block {
  display: flex;
  gap: 70px;
}
@media (max-width: 767px) {
  .loc-block {
    flex-direction: column;
  }
}
.loc-block__contents {
  display: flex;
  flex-direction: column;
  gap: clamp(1.875rem, 0.0621546961rem + 7.7348066298vw, 6.25rem);
}
@media (min-width: 768px) {
  .loc-block__img {
    flex-shrink: 0;
    width: clamp(21.875rem, -24.25rem + 96.09375vw, 52.625rem);
  }
}
.loc-block__img img {
  width: 100%;
}

.loc-header {
  position: relative;
}
.loc-header__ttl {
  position: absolute;
  top: 40%;
  color: #fff;
  font-size: clamp(1.125rem, 1.0473066298rem + 0.3314917127vw, 1.3125rem);
}
.loc-header__bg img {
  width: 100%;
}

.loc-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .loc-map {
    margin-inline: -25px;
  }
}

.loc-info-ttl {
  color: var(--color-accent);
  font-size: clamp(1rem, 0.8705110497rem + 0.5524861878vw, 1.3125rem);
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  text-align: center;
}

.loc-info-wrap {
  display: grid;
  position: relative;
  margin-top: clamp(1.875rem, 0.8390883978rem + 4.4198895028vw, 4.375rem);
  gap: clamp(1.875rem, 0.0621546961rem + 7.7348066298vw, 6.25rem);
}
@media (min-width: 768px) {
  .loc-info-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .loc-info-wrap::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: rgba(180, 149, 103, 0.5);
    content: "";
  }
}
.loc-info-wrap > div {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.loc-info-dl {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.loc-info-dl dt {
  position: relative;
  color: var(--color-accent);
  font-size: 1rem;
}

.loc-info-list {
  display: flex;
  flex-direction: column;
}
.loc-info-list > li {
  display: grid;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  grid-template-columns: 1fr 56px 85px;
}
.loc-info-list > li .-time {
  text-align: right;
}
.loc-info-list > li .-dist {
  text-align: right;
}

/*--------------------------------
  プラン（plan）
--------------------------------*/
.plan-map {
  text-align: center;
}
.plan-map__inner {
  display: inline-block;
  position: relative;
}
.plan-map__type {
  position: absolute;
  z-index: 1;
}
@media (max-width: 767px) {
  .plan-map__type--a {
    top: 34.6666666667%;
    left: 14.9333333333%;
    width: 25.6%;
  }
}
@media (min-width: 768px) {
  .plan-map__type--a {
    top: 193px;
    left: 112px;
    width: 25.6613756614%;
  }
}
.plan-map__layer {
  opacity: 0.5;
  position: absolute;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .plan-map__layer {
    display: none;
  }
}
.plan-map__layer--a {
  top: 193px;
  left: 112px;
  width: 25.6613756614%;
}
.plan-map .plan-map__type:hover[data-layer="1"] ~ .plan-map__layer[data-layer="1"] {
  opacity: 1;
}

.plan-list {
  display: flex;
  max-width: 1100px;
  margin-inline: auto;
  gap: clamp(1.875rem, 1.0980662983rem + 3.3149171271vw, 3.75rem);
}
@media (max-width: 767px) {
  .plan-list {
    flex-direction: column;
  }
}
.plan-list > li {
  width: 100%;
  padding: clamp(1.25rem, 0.9910220994rem + 1.1049723757vw, 1.875rem);
  background-color: #ceccc2;
}
.plan-list > li > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  background-color: #e8e7e1;
  gap: 40px;
}
.plan-list img {
  width: 100%;
}
.plan-list .badge, .plan-list .btn-basic {
  width: 100%;
}

.finebubble__contents {
  display: flex;
  justify-content: space-between;
  padding: clamp(1.25rem, 0.3125rem + 1.953125vw, 1.875rem) clamp(1.25rem, -1.5625rem + 5.859375vw, 3.125rem);
  background-color: #56564a;
  color: #fff;
  gap: clamp(1.25rem, -1.5625rem + 5.859375vw, 3.125rem);
}
@media (max-width: 767px) {
  .finebubble__contents {
    flex-direction: column;
  }
}
.finebubble__contents--wh {
  border: 3px solid #56564a;
  background-color: transparent;
}
@media (min-width: 768px) {
  .finebubble__contents--wh .bubble-area__img {
    width: clamp(17.5rem, -8.75rem + 54.6875vw, 35rem);
    margin-left: auto;
  }
}
.finebubble__cont {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.finebubble__ttl {
  font-size: clamp(1.125rem, 0.9955110497rem + 0.5524861878vw, 1.4375rem);
}
.finebubble__img {
  overflow: hidden;
}
@media (min-width: 768px) {
  .finebubble__img {
    flex-shrink: 0;
    width: clamp(13.75rem, -15.3125rem + 60.546875vw, 33.125rem);
  }
}
.seculity-system {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
  border: 3px solid #56564a;
  background-color: #fff;
  color: #000;
  gap: 30px;
}
.seculity-system__ttl {
  color: var(--color-accent);
  font-size: clamp(1rem, 0.8446132597rem + 0.6629834254vw, 1.375rem);
}

.seculity-system-point {
  display: grid;
  max-width: 800px;
}
@media (min-width: 768px) {
  .seculity-system-point {
    grid-template-columns: 246px 235px 200px;
  }
}
.seculity-system-point > li:nth-child(2) .seculity-system-point__ttl {
  background-color: #48565c;
}
.seculity-system-point > li:nth-child(3) .seculity-system-point__ttl {
  background-color: #9f6027;
}
.seculity-system-point__ttl {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #aa4d43;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
}
.seculity-system-point p {
  margin-inline: 5px;
}

.seculity-other-list {
  display: grid;
  gap: clamp(0.625rem, -1.25rem + 3.90625vw, 1.875rem);
}
@media (max-width: 767px) {
  .seculity-other-list {
    width: 80%;
  }
}
@media (min-width: 768px) {
  .seculity-other-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.seculity-other-list > li {
  display: grid;
  align-items: center;
  gap: clamp(0.3125rem, -0.15625rem + 0.9765625vw, 0.625rem);
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.seculity-other-list__name {
  font-size: 0.875rem;
}

.plan-detail-header {
  display: flex;
  justify-content: center;
  gap: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
}
@media (max-width: 767px) {
  .plan-detail-header {
    flex-direction: column;
  }
}
.plan-detail-header > div {
  display: grid;
  place-items: center;
}
@media (min-width: 768px) {
  .plan-detail-header > div:first-child {
    position: relative;
    padding-right: 50px;
  }
  .plan-detail-header > div:first-child::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: var(--color-accent);
    content: "";
  }
}
.plan-detail-header__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-accent);
  font-size: 20px;
  line-height: 1;
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  gap: 10px;
}
.plan-detail-header__ttl .-num {
  font-size: 100px;
}
.plan-detail-header__layout {
  font-size: 30px;
  font-family: var(--font-en);
  letter-spacing: 0.1em;
}
.plan-detail-header__layout .-unit {
  font-size: 1.2em;
}
.plan-detail-header__layout .-num {
  font-size: 1.6em;
}
.plan-detail-header__spec {
  display: grid;
  align-items: baseline;
  position: relative;
  top: -15px;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  gap: 10px;
  grid-template-columns: 150px 1fr;
}
.plan-detail-header__area {
  font-size: 24px;
}
.plan-detail-header__area .-num {
  font-size: 2.2em;
}
.plan-detail-header__area .-num2 {
  font-size: 1.4em;
}

.plan-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5625rem, -5.46875rem + 14.6484375vw, 6.25rem) clamp(1.5625rem, -2.65625rem + 8.7890625vw, 4.375rem);
  background-color: #fff;
  color: #000;
  gap: clamp(2.1875rem, 1.2810773481rem + 3.8674033149vw, 4.375rem);
}
.plan-detail__layout {
  margin-bottom: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
}
.plan-detail__back .btn-basic {
  margin-inline: auto;
}
@media (min-width: 768px) {
  .plan-detail__back .btn-basic {
    width: 550px;
  }
}

.plan-detail-point {
  display: grid;
  max-width: 900px;
  gap: clamp(1.25rem, 0.9910220994rem + 1.1049723757vw, 1.875rem);
}
@media (min-width: 768px) {
  .plan-detail-point {
    grid-template-columns: repeat(3, 1fr);
  }
}
.plan-detail-point > li {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}
.plan-detail-point__ttl {
  display: flex;
  align-items: center;
  line-height: 1.3;
  gap: clamp(0.3125rem, -0.15625rem + 0.9765625vw, 0.625rem);
}
.plan-detail-point__ttl .-num {
  display: grid;
  flex-shrink: 0;
  width: 22px;
  aspect-ratio: 1;
  background-color: #b79668;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  place-items: center;
}
.plan-detail-point__text {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.plan-detail-point figcaption {
  font-size: 0.625rem;
  letter-spacing: 0.05em;
}
@media (max-width: 767px) {
  .plan-detail-point__item {
    max-width: 85%;
    justify-self: center;
  }
}
@media (min-width: 768px) {
  .plan-detail-point__outpole {
    grid-column: span 2;
  }
}

.plan-outpole {
  padding: 20px;
  background-color: #f6f2ec;
}
.plan-outpole__inner {
  display: grid;
  align-items: center;
  -moz-column-gap: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
       column-gap: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
  row-gap: 20px;
}
@media (min-width: 768px) {
  .plan-outpole__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
.plan-outpole__note {
  margin-top: 5px;
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-align: right;
}
@media (min-width: 768px) {
  .plan-outpole__info {
    grid-column: span 2;
  }
}
.plan-outpole__info dd {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.plan-outpole-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-outpole-item--main .plan-outpole-item__ttl {
  background-color: #b79668;
  color: #fff;
}
.plan-outpole-item__ttl {
  display: grid;
  width: 100%;
  min-height: 57px;
  padding: 5px;
  background-color: #fff;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  place-items: center;
}
.plan-outpole-item__thumb {
  padding: 5px;
  background-color: #fff;
  text-align: center;
}

/*--------------------------------
  物件概要（outline）
--------------------------------*/
.outline-body {
  display: flex;
  flex-direction: column;
  padding-top: clamp(3.125rem, 1.8301104972rem + 5.5248618785vw, 6.25rem);
  gap: clamp(1.875rem, 1.3570441989rem + 2.2099447514vw, 3.125rem);
}

.outline-title {
  margin-top: clamp(0.9375rem, 0.5490331492rem + 1.6574585635vw, 1.875rem);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
  text-align: center;
}

.outline-dl {
  display: grid;
  border-top: 1px solid #ccc;
  font-size: 0.9375rem;
}
@media (min-width: 768px) {
  .outline-dl {
    grid-template-columns: 30% 1fr;
  }
}
.outline-dl dt {
  background-color: rgba(180, 149, 103, 0.1);
}
.outline-dl dt, .outline-dl dd {
  padding: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
  border-bottom: 1px solid #ccc;
}

.outline-note {
  font-size: 0.875rem;
}