/* ---------- base */
:root {
  font-size: clamp(12px, 2vw, 14px);
  --main-color: #0f0b0c;
  --sub-color: #ad9c34;
  --fff: rgb(233, 233, 233);
  --fff-translucent: rgba(255, 255, 255, .5);
}

body {
  background: #0f0b0c;
  font-family: "游ゴシック体",
    "YuGothic",
    "游ゴシック",
    "Yu Gothic",
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro",
    "メイリオ",
    "Meiryo",
    sans-serif;
  font-weight: 400;
  min-height: 100vh;
}

header img,
main img,
footer img {
  image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
}

@supports(-webkit-touch-callout: none) {

  /* iPhoneの表示のみ指定を上書き */
  html {
    height: -webkit-fill-available;
  }

  body {
    min-height: -webkit-fill-available;
  }
}

.l-wrapper {
  margin: 0 auto;
  max-width: 1200px;
}

/* --------------------------------
  header
-------------------------------- */

@media screen and (min-width: 1200px) {
  .header {
    left: 50%;
    transform: translateX(-50%);
  }
}

.header {
  overflow: visible;
  position: absolute;
  scrollbar-width: none;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.header::-webkit-scrollbar {
  display: none;
}

.header-inner {
  margin: 0 auto;
  padding: max(24px, 5%);
  position: relative;
  width: 100%;
}

.header .siteLogo,
.header+.l-content {
  opacity: 1;
  transition: .2s;
}

.siteLogo {
  margin: 0 auto;
  width: 252px;
}

.nav--pc {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 1200px;
  width: fit-content;
}

.nav_trigger {
  display: none;
}

.snsList {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 4px 0 8px;
}

.snsList li {
  opacity: .9;
  width: 21px;
}

.navList {
  align-items: center;
  color: var(--fff);
  display: flex;
  gap: max(8px, 1vw);
  justify-content: center;
}

.navList li {
  height: auto;
  position: relative;
  text-align: left;
}

.nav--sp {
  display: none;
}

@media screen and (max-width:599.9px) {
  .siteLogo {
    width: 212px;
  }

  .header-inner {
    padding: 24px;
  }

  .nav--pc {
    display: none;
  }

  .nav--sp {
    align-items: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: rgb(15, 11, 12);
    display: flex;
    flex-direction: column;
    padding: 72px 24px 0 32px;
    position: fixed;
    right: -220px;
    top: 0;
    height: 100%;
    width: 220px;
    z-index: 9998;
  }

  .snsList {
    gap: 16px;
    padding: 24px 2px 0;
    width: 164px;
  }

  .navList {
    flex-direction: column;
    gap: 16px;
    margin-left: -3%;
  }

  .nav_trigger {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 44px;
    justify-content: center;
    position: absolute;
    right: 25px;
    top: 12px;
    width: 44px;
    z-index: 9999;
  }

  .nav_trigger_button {
    height: 22px;
    position: relative;
    width: 22px;
  }

  .nav_trigger span {
    background: #fff;
    display: inline-block;
    transition: all .4s;
    position: absolute;
    height: 1px;
  }

  .nav_trigger span:nth-of-type(1) {
    top: 8px;
    width: 22px;
  }

  .nav_trigger span:nth-of-type(2) {
    top: 14px;
    width: 16px;
  }

  .header.--menuOpen .header-inner {
    background: #000;
    left: 0;
    height: 100vh;
    opacity: .3;
    position: fixed;
    top: 0;
    width: 100vw;
  }

  .header.--menuOpen .nav_trigger span:nth-of-type(1) {
    top: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 18px;
  }

  .header.--menuOpen .nav_trigger span:nth-of-type(2) {
    top: 12px;
    transform: translateY(-6px) rotate(45deg);
    width: 18px;
  }
}

@media screen and (max-width:599.9px) {
  .overlay {
    background: rgba(0, 0, 0, 0);
    width: 100% !important;
  }

  .slide_5 {
    width: max(132.5%, 764.25px);
  }
}

/* ---------- slide */
.slide {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  scrollbar-width: none;
  width: 100%;
  z-index: -9999;
}

.slide_5 {
  width: clamp(864.25px, 132.5%, 2600px);
  position: absolute;
  right: 0;
  top: 0;
}

.overlay {
  background: rgba(0, 0, 0, .3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 72.5%;
  z-index: -1;
}

/* ---------- main */
.l-content {
  color: var(--fff);
  margin: min(480px, 32.25vw) auto 0;
  position: relative;
}

.l-content img {
  max-height: 100%;
  max-width: 100%;
}

.l-section {
  margin-bottom: max(10%, 108px);
  padding: 0 max(30px, 2.5%) 0 5%;
  position: relative;
  transition: .4s;
  width: 72.5%;
}

.section_head {
  margin-bottom: 27.5%;
  position: relative;
}

.section_head h2 {
  opacity: .9;
}

.section_subHead {
  display: block;
  position: absolute;
  right: -28.5vw;
  top: 0;
  max-width: 253px;
}

.section_content {
  font-size: 1em;
  letter-spacing: .1em;
  line-height: 2;
  margin-bottom: 20%;
  position: relative;
  text-align: justify;
}

.section_content img {
  transition: .4s;
}

.section_content dl {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  line-height: 1.75;
}

.section_content dt {
  letter-spacing: .25em;
  width: max(17%, 63.5px);
}

.section_content dd {
  width: 78%;
}

.section_content dd:not(:last-child) {
  margin-bottom: 1em;
}

.section_img {
  margin-bottom: 2em;
}

@media screen and (max-width:599.9px) {
  .l-content {
    overflow: hidden;
  }

  .l-section {
    padding: 0 max(5%, 25px);
    width: 100%;
  }

  .section_subHead {
    display: none;
  }

  .section_content {
    width: 100%;
  }

  .section_content dl {
    align-items: flex-start;
    flex-direction: column;
  }

  .section_content dt {
    width: 100%;
  }

  .section_content dd {
    margin-bottom: 1em;
    width: 100%;
  }
}

/* ---------- floorGuide */
.page-floorGuide .img-bg {
  position: absolute;
  bottom: min(-15.5vw, -142px);
  right: -47.5%;
  transition: .2s;
  width: 420px;
  z-index: -1;
}

@media screen and (max-width:599.9px) {
  .page-floorGuide .img-bg {
    right: -21.5%;
  }
}

/* ---------- footer */
.footer {
  position: relative;
}

.footer-inner {
  margin-bottom: 12.5vh;
  padding-bottom: 12.5vh;
  position: relative;
  width: 72.5%;
}

.copyright {
  position: absolute;
  right: -26.25vw;
  bottom: 0;
  width: 222px;
}

@media screen and (max-width:599.9px) {
  .footer-inner {
    width: 100%;
  }

  .copyright {
    right: 5%;
  }
}

/* ---------- pageTop */
.pageTop {
  position: absolute;
  right: -26.25vw;
  top: -24px;
  height: 1em;
  width: 1em;
}

@media screen and (max-width:599.9px) {
  .pageTop {
    right: 5%;
  }
}