@charset "UTF-8";

/*!
top > opening
------------------------------
*/
.opening-animation {
  position: relative;
}

.opening__skip {
  position: fixed;
  bottom: 24px;
  left: 50%;
  font-size: 14px;
  z-index: 999;
  transform: translateX(-50%);
  opacity: 0;
}

.opening__01,
.opening__02 {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  color: black;
  z-index: 99;
  text-align: center;
}

.opening__02 {
  opacity: 0;
}

.opening__01 {
  opacity: 0;
}

.opening__text-01 span {
  display: inline-block;
  padding: 0 0.2rem;
  font-family: var(--font-family-title-jp);
  color: var(--color-theme-base);
  font-size: 4vw;
  opacity: 0;
}

.opening__text-02 {
  font-family: var(--font-family-title-jp);
  color: var(--color-theme-base);
  font-size: 4vw;
  letter-spacing: 0.6;
  line-height: 130%;
  z-index: 2;
}

.opening__text-02.neon {
  animation: neon 2s ease-out forwards;
}

.opening__text-02 .sub {
  font-size: 0.6em;
}

.opening__02-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14vw;
  height: 14vw;
  background-image: url(../img/common/opening-logo.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {

  .opening__text-01,
  .opening__text-02 {
    margin-bottom: 40px;
  }

  .opening__text-01 span {
    font-size: 8vw;
  }

  .opening__text-02 {
    font-size: 9vw;
  }

  .opening__02-bg {
    width: 30vw;
    height: 30vw;
  }
}

/* xxs */
@media (max-width: 427px) {}

/*!
top > mv
------------------------------
*/
.mv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  opacity: 0;
  z-index: -1;
}

.mv__bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transform: scale(1.2)
}

.mv__logo img {
  position: fixed;
  width: 460px;
  height: auto;
  transform: translate(-50%, -50%);
}

.mv__scroll {
  position: absolute;
  left: 50%;
  bottom: 60px;
  height: 50px;
  color: #fff;
  font-weight: bold;
  transform: translateX(-50%);
  opacity: 0;
}

.mv__scroll span {
  position: absolute;
  left: -15px;
  top: -15px;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.mv__scroll::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 30px;
  background-color: #fff;
  animation: pathmove 1.6s ease-in-out infinite;
}

/* xs */
@media (max-width: 567px) {
  .mv__logo img {
    width: 68vw;
    transform: translate(-50%, -90%);
  }

}

/*!
top > section
------------------------------
*/
.content-area {
  color: #333;
  text-align: center;
  font-family: var(--font-family-content-jp);
  font-size: clamp(16px, 1.4vw, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  letter-spacing: 1.44px;
  opacity: 0;
}

.concept {
  position: relative;
  padding-top: clamp(40px, 9.38vw, 120px);
  padding-bottom: clamp(48px, 12.5vw, 160px);
  background-color: #fff;
  text-align: center;
}

.concept .section-title {
  z-index: 2;
}

.concept__bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 95%;
  width: 861px;
  height: 192px;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: 2s;
  filter: blur(10px);
  opacity: 0 ease;
}

.concept__bg-text.sharp {
  filter: blur(0);
}

.concept__text {
  position: relative;
  margin: clamp(24px, 4vw, 48px);
  text-align: center;
  z-index: 2;
  opacity: 0;
}

.top-section-left,
.top-section-right {
  position: relative;
  width: 100%;
  height: 500px;
  margin-bottom: clamp(64px, 9.38vw, 120px);
}

.top-section-left__inner,
.top-section-right__inner {
  position: relative;
  max-width: 1700px;
  width: calc(100% / 8 * 7);
  height: 100%;
  overflow: hidden;
}

.top-section-left__inner {
  margin-right: auto;
}

.top-section-right__inner {
  margin-left: auto;
}

.top-section__bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
}

.top-section__bg-mask {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  will-change: transform;
  transition-property: transform;
  z-index: 2;
}

.top-section__wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.top-section-right .top-section__wrap {
  justify-content: flex-start;
}

.top-section__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 58%;
  padding: clamp(56px, 6.25vw, 80px);
  text-align: left;
  overflow: hidden;
}

.top-section__content-bg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #002281 9.3%, rgba(15, 62, 146, 0.68) 39.9%, rgba(26, 84, 158, 0.44) 70.18%, rgba(46, 123, 180, 0.00) 104.45%);
  background-blend-mode: plus-darker;
  will-change: transform;
  transition-property: transform;
  z-index: 99;
}

.top-section-right .top-section__content-bg {
  background: linear-gradient(-90deg, rgba(2, 48, 210, 0.00) 0%, #021B79 100%);
}

.top-section__title {
  position: relative;
  margin-bottom: 16px;
  color: #F5F5F5;
  font-family: var(--font-family-title-en);
  font-size: clamp(36px, 3.9vw, 50px);
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 4px;
  text-align: left;
  z-index: 99;
}

.top-section__title span {
  display: inline-block;
  z-index: 99;
  opacity: 0;
}

.top-section__title.shine span {
  animation: shine .6s ease-out forwards;
}

.top-section__text {
  position: relative;
  margin-bottom: 40px;
  color: #F5F5F5;
  text-align: justify;
  font-family: var(--font-family-content-jp);
  font-size: clamp(16px, 1.4vw, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  letter-spacing: 0.9px;
  text-shadow: 2px 2px 6px #333;
  z-index: 99;
  opacity: 0;
}

.top-section__button {
  position: relative;
  z-index: 999;
  opacity: 0;
}

.license-button {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}

/* lg */
@media (max-width: 1279px) {

  .top-section-left__inner,
  .top-section-right__inner {
    width: calc(100% / 9 * 8);
  }

  .top-section__content {
    width: 60%;
  }
}

@media (max-width: 1079px) {
  .top-section__button .button-01 {
    width: 260px;
  }

  .top-section__button .border::after {
    width: 50px;
  }
}

/* md */
@media (max-width: 959px) {

  .top-section-left__inner,
  .top-section-right__inner {
    width: calc(100% / 12 * 11);
  }


}

/* sm */
@media (max-width: 767px) {

  .top-section-left__inner,
  .top-section-right__inner {
    width: calc(100% / 14 * 13);
  }

  .top-section__content {
    width: 80%;
  }
}

/* xs */
@media (max-width: 567px) {

  .top-section-left__inner,
  .top-section-right__inner {
    width: 100%;
  }

  .concept__text {
    text-align: left;
  }
}

/* xxs */
@media (max-width: 427px) {

  .profile .top-section__bg-image {
    object-position: 20% 50%;
  }

  .facility .top-section__bg-image {
    object-position: 20% 50%;
  }

  .rental .top-section__bg-image {
    object-position: 24% 50%;
  }

  .access .top-section__bg-image {
    object-position: 30% 50%;
  }


  .top-section-left,
  .top-section-right {
    height: 700px;
  }

  .top-section__wrap {
    flex-direction: column;
  }

  .top-section-right .top-section__wrap {
    justify-content: flex-end;
  }

  .top-section__content {
    width: 100%;
  }

  .top-section__content-bg {
    background: linear-gradient(0deg, #002281 9.3%, rgba(15, 62, 146, 0.68) 39.9%, rgba(26, 84, 158, 0.44) 70.18%, rgba(46, 123, 180, 0.00) 104.45%);
  }

  .top-section-right .top-section__content-bg {
    background: linear-gradient(180deg, rgba(2, 48, 210, 0.00) 0%, #021B79 100%);
  }
}

/*!
top > news
------------------------------
*/
.news {
  opacity: 0;
}

.news__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1280px;
  /* margin: 0 auto 56px; */
  margin: 0 auto clamp(80px, 12.5vw, 160px);
  padding: 0 40px;
}

.news__title {
  position: relative;
  width: 346px;
}

.news__bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 153px;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.news__title__inner {
  position: relative;
  z-index: 2;
}

.news__wrap {
  width: calc(100% - 346px);
}

.news__item a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid #D9D9D9;
  transition: all 0.5s
}

.news__item a:hover {
  background-color: #e6f2ff41;
}

.news__item a.disabled {
  pointer-events: none;
}

.news__item span {
  display: block
}

.news__item-category {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 144px;
  border-radius: 4px;
  border: 1px solid rgba(28, 42, 82, 0.50);
}

.news__item-date {
  width: 120px;
  margin: 0 40px;
  font-size: 18px;
}

.news__item-title {
  position: relative;
  width: calc(100% - 144px - 12px - 80px);
  padding: 6px 0;
  font-size: 18px;
  text-align: left;
}

.news__item-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  margin: auto;
  background-color: rgba(28, 42, 82, 0.50);
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.news__item a:hover .news__item-title::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.news__button {
  position: relative;
  margin-bottom: clamp(56px, 9.38vw, 120px);
}

/* banner */
.banner {
  padding: 40px;
  background-color: #F7F8FF;
}
.banner__inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 auto;
  max-width: 1280px;
}
.banner__item {
  /* 2個からはこちらを使う */
  /* width: calc((100% - 48px) / 3); */
  width: 65%;
}
.banner__item a {
  transition: all 0.5s
}
.banner__item a:hover {
  opacity: 0.7;
}

.banner .sp {
  display: none!important;
}

/* lg */
@media (max-width: 1279px) {
  .news__inner {
    flex-direction: column;
    margin-top: clamp(60px, 9.38vw, 120px);
  }

  .news__title {
    width: 100%;
    margin-bottom: 64px;
  }

  .news__bg-text {
    width: 31.25vw;
  }

  .news__wrap {
    width: 100%;
  }
}

/* md */
@media (max-width: 959px) {
  .news__bg-text {
    width: 80%;
  }

  .news__item a {
    flex-wrap: wrap;
    padding: clamp(24px, 2.5vw, 32px) 0;
  }

  .news__item-title {
    width: 100%;
    margin-top: clamp(16px, 1.88vw, 24px);
  }

  /* banner */
  .banner__item {
    /* 2個からはこちらを使う */
    /* width: calc((100% - 24px) / 2); */
    width: 90%;
  }
}

/* sm */
@media (max-width: 767px) {
  .banner .pc {
    display: none!important;
  }
  .banner .sp {
    display: block!important;
  }
}

/* xs */
@media (max-width: 567px) {
  .news__item-date {
    margin: 0 0 0 16px;
  }
  .banner {
    padding: 16px;
  }
  .banner__inner {
    gap: 16px;
  }
  .banner__item {
    /* 2個からはこちらを使う */
    /* width: calc((100% - 16px) / 2); */
  }
  .banner__item {
    width: 100%;
  }
}

/* xxs */
@media (max-width: 427px) {
  .news__bg-text {
    width: 80%;
  }
  .banner__inner {
    flex-direction: column;
  }
}

/*!
top > footer
------------------------------
*/
.footer {
  opacity: 0;
}