@charset "UTF-8";

:root {
  --color-01: #ffffff;
  --color-02: #FAFAFA;
  --color-03: #F5F5F5;
  --color-04: #E5E5E5;
  --color-05: #D4D4D4;
  --color-06: #A3A3A3;
  --color-07: #737373;
  --color-08: #525252;
  --color-09: #404040;
  --color-10: #262626;
  --color-11: #171717;
  --color-12: #0A0A0A;

  --c-color-02: #FAFAFA;
  --c-color-12: #0A0A0A;

  --noto-sans: "Noto Sans JP", sans-serif;
  --inter: "Inter", sans-serif;

  --e_xxxl: 11rem;
  --e_xxl: 9rem;
  --e_xl: 8rem;
  --e_l: 6.4rem;
  --e_m: 5.8rem;
  --e_s: 5.2rem;
  --e_xs: 4.2rem;
  --e_xxs: 2.8rem;
  --e_xxxs: 2.2rem;


  --n_xxxl: 5rem;
  --n_xxl: 4.4rem;
  --n_xl: 3.9rem;
  --n_l: 3.4rem;
  --n_m: 3rem;
  --n_s: 2.2rem;
  --n_xs: 1.8rem;
  --n_xxs: 1.6rem;
  --n_xxxs: 1.4rem;
  --n_small: 1.2rem;

  --b: 700;
  --m: 500;

  --grad02: linear-gradient(90deg, rgba(163, 163, 163, 1) 0%, rgba(115, 115, 115, 1) 100%);
  --grad03: linear-gradient(135deg, rgba(245, 245, 245, 1) 0%, rgba(212, 212, 212, 1) 100%);
}

:root.darkmode {
  --color-01: #000000;
  --color-02: #0A0A0A;
  --color-03: #171717;
  --color-04: #262626;
  --color-05: #373737;
  --color-06: #525252;
  --color-07: #8A8A8A;
  --color-08: #A3A3A3;
  --color-09: #D4D4D4;
  --color-10: #E5E5E5;
  --color-11: #F5F5F5;
  --color-12: #FAFAFA;

  --c-color-02: #FAFAFA;
  --c-color-12: #0A0A0A;
}

/*================================================
 *  preloader
 ================================================*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preloader video {
  width: 100%;
  /* aspect-ratio: 1920/1080; */
  height: 100vh;
  object-fit: cover;
  display: block;
}

.preloader video.sp {
  display: none;
}

.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

@media screen and (max-width:767px) {


  .preloader video {
    width: 100%;
    height: auto;
    aspect-ratio: 1080/1920;
  }

  .preloader video.sp {
    display: block;
  }

  .preloader video.pc {
    display: none;
  }

}

/*================================================
 *  
 ================================================*/
#mainVisual {
  position: relative;
  width: 95.78%;
  height: calc(100vh - 18.2rem);
  margin: 0 auto;
  overflow: hidden;
  margin-top: 15rem;
  border-radius: 1rem;
}

#mainVisual #mv_slider {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#mainVisual #mv_slider canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 1rem;


  object-fit: cover;
  border-radius: 1rem;
}

#mainVisual #mv_slider img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 0;
  object-fit: cover;
}

.darkmode .mv_catch,
.mv_catch {
  position: absolute;
  left: 4.4%;
  /* bottom: 6.4rem; */
  /* bottom: clamp(1rem, 8.333vh, 6.4rem); */
  bottom: clamp(1rem, 6.7vh, 6.4rem);
  z-index: 10;
  color: var(--color-02);
}

.darkmode .mv_catch {
  color: var(--color-12);
}

.mv_catch h2 {
  font-weight: 700;
  /* font-size: var(--e_xxl); */
  /* font-size: 5.952vw; */
  /* font-size: clamp(1.6rem, 5.952vw, 9rem); */
  font-size: clamp(1rem, 11.71vh, 9rem);
  line-height: 1.05;
  margin-bottom: clamp(1rem, 0.7em, 6rem);
}

.mv_catch p {
  font-size: var(--n_s);
  /* font-size: clamp(1rem, 1.45vw, 2.2rem); */
  font-size: clamp(1.6rem, 2.86vh, 2.2rem);
}

@media screen and (max-width:767px) {
  #mainVisual {
    width: 92.7%;
    height: calc(100vh - 11.8rem);
    min-height: unset;
    margin-top: 10.2rem;
  }

  #mainVisual #mv_slider img.pc {
    display: none;
  }

  #mainVisual #mv_slider img.sp {
    display: block;
  }


  .darkmode .mv_catch,
  .mv_catch {
    left: 7.8%;
    width: 100%;
  }

  .mv_catch h2 {
    font-size: clamp(1rem, 11.8vw, var(--e_s));
  }

  .mv_catch p {
    font-size: var(--n_xxs);
    margin-top: 3.2rem;
    width: 90%;
  }

}

/*================================================
 *  company_brand
 ================================================*/
#company_brand .company {
  width: 69%;
  background: url(../images/company_bg.jpg) no-repeat center/cover;
  height: 100%;
  border-radius: 1rem;
  position: relative;
}

#company_brand .company h2.n_hd {
  padding-top: 42.4rem;
  padding-bottom: 3.2rem;
  line-height: 1.3;
}


#company_brand .company p {
  color: var(--color-02);
  width: 80%;
  line-height: 1.8;
  max-width: 41rem;
  max-width: 53rem;
}

/* brand */
#company_brand .brand {
  width: 28.7%;
  background: var(--color-02);
  border-radius: 1rem;
  position: relative;
}

#company_brand .brand img {
  width: 48.5%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#company_brand .brand .arrow-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
}

#company_brand .card_btn {
  padding: 6.4rem 6.4%;
}

.darkmode #company_brand .company h2.e_hd,
.darkmode #company_brand .company h2.n_hd,
.darkmode #company_brand .company p {
  color: var(--color-12);
}

#company_brand .brand .card_btn {
  padding: 6.4rem 15.4%;
}

@media screen and (max-width:767px) {
  #company_brand .company {
    width: 100%;
    background: url(../images/company_bg_sp.jpg) no-repeat center / cover;
  }

  #company_brand .company h2.n_hd {
    padding-top: 48.2rem;
  }

  #company_brand .company p {
    width: 100%;
    max-width: unset;
  }

  #company_brand .brand {
    width: 100%;
    margin-top: 1.6rem;
  }

  #company_brand .brand img {
    position: static;
    transform: unset;
    width: 20.2rem;
    margin: 19.2rem auto 24.4rem;
  }

  #company_brand .card_btn {
    padding: 3.2rem 7.8%;
  }

  #company_brand .brand .card_btn {
    padding: 3.2rem 7.8%;
  }
}

/*================================================
 *  apps
 ================================================*/
#apps {
  margin: 1.2rem 0;
}

#apps .wrap {
  width: 100%;
}

.app_swiper .swiper-wrapper {
  align-items: stretch;
}

.apps_banner {
  width: calc(88.6% + 2rem);
  border-radius: 1rem;
  position: relative;
  z-index: 1;
  padding: 2rem;
  min-height: 56rem;
}

.apps_banner .card_btn {
  padding: 6.4rem 4.9%;
  background: var(--c-color-02);
  color: var(--c-color-12);
  overflow: hidden;
  z-index: 1;
}

.apps_banner .card_btn h2 {
  color: var(--c-color-12);
}


.app_swiper .slide_member .apps_banner .card_btn {
  background: var(--c-color-12);
  color: var(--c-color-02);
}

.apps_banner .card_btn::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  z-index: -1;
  width: 37.9vw;
  height: 27.44vw;
  max-width: 71.8rem;
  max-height: 52.9rem;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.app_swiper .slide_owner .apps_banner .card_btn::before {
  background-image: url(../images/apps_link01-bg.png);
}

.app_swiper .slide_member .apps_banner .card_btn::before {
  background-image: url(../images/apps_link02-bg.png);
}

.app_swiper .slide_prod .apps_banner .card_btn::before {
  background-image: url(../images/apps_link03-bg.png);
}



.apps_banner h2.n_hd {
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 3.2rem;
  margin: 9.2rem 0 6.4rem;
  color: var(--c-color-12);
}

.app_swiper .slide_member .apps_banner h2.n_hd,
.app_swiper .slide_member .apps_banner h2.e_hd {
  color: var(--c-color-02);
}

.app_swiper .slide_prod .apps_banner h2.n_hd {
  margin-bottom: 2rem;
}

.apps_banner h2.n_hd img {
  width: 8rem;
}

.apps_banner p {
  margin-top: 3.2rem;
  width: 49%;
}

.app_swiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;

  padding-left: 2.11%;
  padding-right: calc(2.11% - 2em);
  flex-direction: row-reverse;
  height: auto;
}

/* .app_swiper .swiper-slide.slide01 {
  padding-left: 2.11%;
  padding-right: calc(2.11% - 2em);
  flex-direction: row-reverse;
}

.app_swiper .swiper-slide.slide02 {
  padding-right: 2.11%;
  padding-left: calc(2.11% - 2em);
} */


/* .app_swiper .swiper-button-next.sp,
.app_swiper .swiper-button-prev.sp {
  display: none;
} */

.app_swiper .swiper-button-next,
.app_swiper .swiper-button-prev {
  display: block;
  position: relative;
  left: auto;
  right: auto;
  width: 9.323%;
  height: auto;
  margin: 2em 0;
  background: var(--c-color-12);
  border-radius: 1rem;
  top: 0;
}

.app_swiper .swiper-button-next.swiper-button-disabled,
.app_swiper .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}


.app_swiper .swiper-button-next .arrow-icon,
.app_swiper .swiper-button-prev .arrow-icon {
  position: absolute;
  z-index: 1;
  width: 1.45rem;
  height: 3rem;
}

.app_swiper .swiper-button-next .arrow-icon:before,
.app_swiper .swiper-button-next .arrow-icon:after,
.app_swiper .swiper-button-prev .arrow-icon:before,
.app_swiper .swiper-button-prev .arrow-icon:after {
  width: 1.5rem;
  height: 3rem;
}

.app_swiper .swiper-button-next .arrow-icon:before,
.app_swiper .swiper-button-next .arrow-icon:after {
  background-image: url(../images/li-apps_right.png);
}

.app_swiper .swiper-button-prev .arrow-icon:before,
.app_swiper .swiper-button-prev .arrow-icon:after {
  background-image: url(../images/li-apps_left.png);
}




/* next */
.app_swiper .swiper-button-next.is-hover .arrow-icon:before {
  animation-name: transformLeftRight02;
}

.app_swiper .swiper-button-next.is-hover .arrow-icon::after {
  animation-name: transformRightLeft02;
}


.app_swiper .swiper-button-next.is-hover:hover .arrow-icon:before {
  animation-name: transformRightLeft02;
}

.app_swiper .swiper-button-next.is-hover:hover .arrow-icon::after {
  animation-name: transformLeftRight02;
}

/* prev */
.app_swiper .swiper-button-prev.is-hover .arrow-icon:before {
  animation-name: transformLeftRight;
}

.app_swiper .swiper-button-prev.is-hover .arrow-icon::after {
  animation-name: transformRightLeft;
}


.app_swiper .swiper-button-prev.is-hover:hover .arrow-icon:before {
  animation-name: transformRightLeft;
}

.app_swiper .swiper-button-prev.is-hover:hover .arrow-icon::after {
  animation-name: transformLeftRight;
}


.app_swiper .swiper-button-next:after,
.app_swiper .swiper-button-prev:after {
  content: none;
}


@media screen and (max-width:767px) {
  #apps {
    margin: 1.6rem 0;
  }

  #apps .wrap {
    width: 100%;
    margin-right: auto;
  }



  .apps_link {
    flex-wrap: wrap;
    margin-left: 0;
  }

  .apps_banner {
    width: 100%;
    overflow: hidden;
    padding: 0 3.6%;
    min-height: unset;

    flex-grow: 1;
  }

  .apps_banner .card_btn::before {
    width: 34.4rem;
    height: 53.2rem;
    top: auto;
    right: auto;
    bottom: -24rem;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../images/apps_link01-bg_sp.png);
  }

  .apps_banner .card_btn {
    padding: 3.2rem 7.8% 30.7rem 7.8%;
  }


  .apps_banner h2.n_hd,
  .apps_banner p {
    width: 100%;
  }

  .apps_banner p {
    min-height: 17rem;
  }

  .apps_link .apps_btn {
    width: 100%;
    width: calc(100% - 7.2%);
    height: 5.5rem;
    margin-top: 1.6rem;
    margin: 1.6rem auto 0;
  }

  .app_swiper .swiper-slide {
    flex-wrap: wrap;
    flex-direction: column;
  }

  .app_swiper .swiper-slide.slide01,
  .app_swiper .swiper-slide.slide02 {
    padding: 0;
  }


  .app_swiper .swiper-button-next,
  .app_swiper .swiper-button-prev {
    width: 100%;
    width: calc(100% - 7.2%);
    height: 5.5rem;
    margin-top: 1.6rem;
    margin: 1.6rem auto 0;
    top: 0;
  }


}


/*================================================
 *  owners
 ================================================*/
.ota_inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.ota_item {
  width: 48.89%;
  border-radius: 1rem;
}

.ota_item.owners {
  background: url(../images/owners_bg.jpg) no-repeat center top/cover;
}

.ota_item.owners .card_btn {
  padding: 6.4rem;
  position: relative;
}


.ota_btnInner {
  position: absolute;
  left: 9%;
  bottom: 5.4rem;
  padding-right: 6.8rem;
}

.ota_btnInner h2 {
  font-size: var(--n_xl);
  margin-bottom: 0;
  line-height: 1.4;
}


.ota_item.owners p {
  color: var(--color-02);
}

.ta_item .card_btn,
.ota_item.owners .card_btn {
  padding: 6.4rem 9%;
}

.ta_item {
  border-radius: 1rem;
  position: relative;
  height: 40.55rem;
}


.ta_item.tenants {
  background: url(../images/tenants_bg.jpg) no-repeat center top/cover;
  margin-bottom: 3.2rem;
}

.ta_item.associations {
  background: url(../images/associations_bg.jpg) no-repeat center top/cover;
}


.ta_item p {
  color: var(--color-02);
  line-height: 1.8;
}

.darkmode .ota_item.owners p,
.darkmode .ota_inner .wt,
.darkmode .ta_item p {
  color: var(--color-12);
}

@media screen and (max-width:767px) {
  .ota_inner {
    flex-wrap: wrap;
  }

  .ota_item {
    width: 100%;
  }

  .ota_item.owners {
    background: url(../images/owners_bg_sp.jpg) no-repeat center top / cover;
    margin-bottom: 1.6rem;
  }

  .ta_item .card_btn,
  .ota_item.owners .card_btn {
    padding: 3.2rem 7.8%;
  }

  .ta_item {
    height: auto;
  }

  .ta_item .card_btn {
    min-height: 34rem;
  }

  .ota_btnInner {
    position: static;
    padding-right: 0;
  }

  .ota_item.owners div {
    position: static;
    width: 100%;
    padding: 115.4vw 0 0;
  }

  .ota_btnInner h2 {
    font-size: var(--n_m);
  }

  .ta_item h2.n_hd {
    padding-top: 19.1rem;
  }

  .ta_item.tenants {
    background: url(../images/tenants_bg_sp.jpg) no-repeat center top/cover;
    margin-bottom: 1.6rem;
  }

  .ta_item.associations {
    background: url(../images/associations_bg_sp.jpg) no-repeat center top/cover;
  }
}

/*================================================
 *  topics_other
 ================================================*/

.topicsOther_inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.topicsOther_inner .topics {
  width: 65.12%;
  background: var(--color-02);
  padding: 6.4rem 4.4%;
  border-radius: 1rem;
  position: relative;
}


.topicsOther_inner .topics ul {
  display: flex;
  align-items: stretch;
  justify-content: start;
  flex-wrap: wrap;
  gap: 2.6rem 3.08%;
  margin-top: 6.4rem;
}

.topicsOther_inner .topics ul li {
  background: rgb(245, 245, 245);
  background: var(--grad03);
  border-radius: 1rem;
  width: 31.28%;
  min-width: 18rem;
  min-height: 22.4rem;
}

.topicsOther_inner .topics ul li:last-child {
  margin-bottom: 0;
}

.topicsOther_inner .topics ul li .card_btn {
  padding: 3.2rem 2.2rem 5.2rem;
  position: relative;
  display: block;
}

.topicsOther_inner .topics ul li p {
  color: #737373;
  font-size: var(--n_xxxs);
  margin-bottom: 3.2rem;
}


.topicsOther_inner .topics ul li h3 {
  color: #0A0A0A;
  font-size: var(--n_xxs);
  line-height: 1.8;
}

.topicsOther_inner .topics ul li .new_label {
  font-size: var(--n_small);
  font-weight: var(--b);
  color: var(--c-color-02);
  background: var(--color-12);
  width: 7.4rem;
  height: 3.3rem;
  display: grid;
  place-content: center;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 1rem 0 1rem;
}

.darkmode .topicsOther_inner .topics ul li .new_label {
  background: #404040;
}

/* other */
.topicsOther_inner .other {
  width: 32.66%;
}

.topicsOther_inner .other .other_item {
  border-radius: 1rem;
}

.topicsOther_inner .other .other_item .card_btn {
  padding: 7.7rem 0 7.7rem 13.5%;
  position: relative;
}

.topicsOther_inner .other .other_item p {
  font-size: var(--n_l);
  font-weight: var(--b);
  color: var(--color-02);
  line-height: 1.3;
}


.topicsOther_inner .other .other_item.other01 {
  background: url(../images/other_img01.jpg) no-repeat center/cover;
}


.topicsOther_inner .other .other_item.other02 {
  background: url(../images/other_img02.jpg) no-repeat center/cover;
  margin-top: 3.2rem;
}

.darkmode .topicsOther_inner .other .other_item p {
  color: var(--color-12);
}

@media screen and (max-width:767px) {
  .topicsOther_inner {
    flex-wrap: wrap;
  }

  .topicsOther_inner .topics {
    width: 100%;
    padding: 3.2rem 7.8% 8.2rem;
    margin-bottom: 1.6rem;
  }

  .topicsOther_inner .topics ul {
    gap: 3.2rem;
    margin-top: 7.4rem;
  }

  .topicsOther_inner .topics ul li {
    width: 100%;
    min-width: unset;
    min-height: unset;
  }

  .topicsOther_inner .topics ul li .card_btn {
    padding: 3.2rem 6.4%;
  }

  .topicsOther_inner .other {
    width: 100%;
  }

  .topicsOther_inner .other .other_item .card_btn {
    padding: 8rem 7.8% 8rem 7.8%;
  }

  .topicsOther_inner .other .other_item.other01 {
    background: url(../images/other_img01_sp.jpg) no-repeat center/cover;
  }


  .topicsOther_inner .other .other_item.other02 {
    background: url(../images/other_img02_sp.jpg) no-repeat center/cover;
    margin-top: 1.6rem;
  }

  .topicsOther_inner .other .other_item p {
    font-size: var(--n_m);
  }
}


/*================================================
 *  
 ================================================*/

@media screen and (max-width:767px) {}

/*================================================
 *  
 ================================================*/

@media screen and (max-width:767px) {}

/*================================================
 *  
 ================================================*/

@media screen and (max-width:767px) {}