@charset 'UTF-8';

/* ======================================================
  pc
====================================================== */

html {
  /* 1rem = 10px */
  font-size: calc(100vw * 10 / 1366);

  scroll-behavior: smooth;
}

img {
  max-width: 100%;
}

.inner {
  max-width: 112.5rem;

  margin-inline: auto;
}
.flex{
  display: flex;
  flex-wrap: wrap;
}

/* main
----------------------- */
.main {
  position: relative;
  aspect-ratio: 1366 / 860;
  background: url(../img/pc/main-bg.png) center top no-repeat;
  background-size: cover;
  z-index: 1;
}

.main .main_title {
  padding-top: 4.4rem;
  width: 81.1rem;
  margin-inline: auto;
}




.section-bg{
  background-image: linear-gradient(180deg, #dfd6b8, #cabb89);

}

/* present
----------------------- */

.present {
  position: relative;
  padding-top: 16.5rem;
  margin-top: -13.5rem;
  padding-bottom: 5rem;
}


/* components
----------------------- */
.components{
  position: relative;

}
.components--mt{
  margin-top: 4.5rem;
}
.components-area{

}
.components-area-side{
  width: 50%;

}
.components-area-side .-img img{
  height: 100%;

}
.components-area-list{
  width: 50%;

}
.components-area-list-in{
  width: 100%;

}
.components-area-list-in .-img{
  width: 50%;
}
.components-area-list-in .-img img{
  height: 100%;
}

.components-area .-imganime01{
  opacity: 0;
  transform: translateY(2rem);
  transition: all 1s;
  transition-delay: 0s;
}
.components-area .-imganime01.isActive{
  opacity: 1;
  transform: translateY(0rem);
}
.components-area .-imganime02{
  opacity: 0;
  transform: translateY(2rem);
  transition: all 1s;
  transition-delay: 0.4s;
}
.components-area .-imganime02.isActive{
  opacity: 1;
  transform: translateY(0rem);
}
.components-area .-imganime03{
  opacity: 0;
  transform: translateY(2rem);
  transition: all 1s;
  transition-delay: 0.8s;
}
.components-area .-imganime03.isActive{
  opacity: 1;
  transform: translateY(0rem);
}
.components-area .-imganime04{
  opacity: 0;
  transform: translateY(2rem);
  transition: all 1s;
  transition-delay: 1.2s;
}
.components-area .-imganime04.isActive{
  opacity: 1;
  transform: translateY(0rem);
}
.components-area .-imganime05{
  opacity: 0;
  transform: translateY(2rem);
  transition: all 1s;
  transition-delay: 1.6s;
}
.components-area .-imganime05.isActive{
  opacity: 1;
  transform: translateY(0rem);
}
.components-block{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 96.6rem;
  box-shadow: 1.6rem 1.6rem 1.6rem rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: all 1s;
}

.components-block.isActive{
  opacity: 1;
  transition-delay: 2s;
  top: 50%;
}
.components-block.components-block--delay.isActive{
  opacity: 1;
  transition-delay: 1s;
  top: 50%;
}
.components-block-movie{
  position: absolute;
  width: 39.6rem;
  height: 22.3rem;
  right: 5rem;
  top: 12rem;
}
.components-block-movie iframe{
  width: 100%;
  height: 100%;
}



/* experience
----------------------- */
.experience{
  padding: 7rem 0 10rem;

}
.experience--inner{
  max-width: 112rem;
}
.experience-ttl{
  margin: auto;
  width: 82.5rem;

}
.experience-area{
  margin-top: 4rem;
  justify-content: space-between;
}
.experience-area-block{
  width: 52rem;
}
.experience-area-block-ttl{
  margin: auto;

}
.experience-area-block-ttl--01{
  width: 18rem;

}
.experience-area-block-ttl--02{
  width: 29.3rem;

}
.swiper-box{
  position: relative;
  margin-top: 3rem;
  padding: 0 3.5rem; /* 左右に矢印用のスペースを確保（増やすと矢印が外へ） */
  --swiper-navigation-color: #865429;
  --swiper-navigation-size: 2.3rem;
  --swiper-navigation-top-offset: calc(50% - 2.5rem); /* pagination分を差し引いて画像の中央に合わせる */
}
.experience .swiper{
  padding-bottom: 5rem;
}
.swiper-pagination{
  bottom: .4rem !important;
}
.swiper-pagination-bullet{
  margin: 0 .75rem !important;
  background-color: #fff;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color:#865429;
}
.swiper-button-prev {
  left: 0 !important;   /* 画像の左外側。内側へ寄せたい時は値を大きく */
}
.swiper-button-next {
  right: 0 !important;  /* 画像の右外側。内側へ寄せたい時は値を大きく */
}


/* support
----------------------- */
.support{
  background-color: #EFE7BC;
  padding: 10rem 0;

}
.support-ttl{
  margin: auto;
  width: 60.5rem;

}
.support-graph{
  position: relative;
  margin-top: 4.6rem;

}
.support-graph-img{
  box-shadow: 1.6rem 1.6rem 1.6rem rgba(0, 0, 0, 0.25);
  border-radius: 2rem;

}
.support-graph-posi01{
  position: absolute;
  width: 16.2rem;
  top: 19.5rem;
  right: 20rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: all .8s;
}
.support-graph-posi01.isActive{
  transform: translateY(0);
  opacity: 1;
}
.support-graph-posi02{
  position: absolute;
  width: 16.2rem;
  bottom: 12rem;
  left: 19.5rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: all .8s;
}
.support-graph-posi02.isActive{
  transform: translateY(0);
  opacity: 1;
}
.support-graph-posi03{
  position: absolute;
  width: 36.8rem;
  bottom: 6rem;
  left: 21rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: all .8s;
}
.support-graph-posi03.isActive{
  transform: translateY(0);
  opacity: 1;
}
.support-graph02{
  position: relative;
  margin-top: 7rem;
}
.support-graph02-img{
  box-shadow: 1.6rem 1.6rem 1.6rem rgba(0, 0, 0, 0.25);
  border-radius: 2rem;
}
.support-graph02-posi01{
  position: absolute;
  width: 35.5rem;
  bottom: 5.8rem;
  left: 12.5rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: all .8s;
}
.support-graph02-posi01.isActive{
  transform: translateY(0);
  opacity: 1;
}
.support-txt{
  margin-top: 6rem;
}



/* instalive
----------------------- */
.instalive{
  padding: 5rem 0 2.5rem;
  background: url(../img/pc/Instagram-bg.jpg) no-repeat center center / cover;
}
.instalive-area{
  position: relative;
}
.instalive-txt{
  width: 100%;
}
.instalive-btn{
  position: absolute;
  width: 40rem;
  bottom: 10rem;
  margin-left: 15rem;
}
.instalive-btn a{
  display: block;
}



/* consultation
----------------------- */
.consultation{
  background-color: #865429;
  padding: 8rem 0;
}
.consultation-ttl{
  margin: auto;
  width: 102.6rem;

}
.consultation-area{
  margin-top: 5rem;
  justify-content: space-between;

}
.consultation-area-block{
  width: 35rem;

}
.consultation-area-ttl{
  margin: auto;

}
.consultation-area-ttl--01{
  width: 21rem;

}
.consultation-area-ttl--02{
  width: 15rem;

}
.consultation-area-ttl--03{
  width: 12.5rem;

}
.consultation-area-img{
  margin-top: 1.5rem;

}
.consultation-area-txt{
  margin: auto;
  margin-top: 2rem;

}
.consultation-area-txt--01{
  width: 23rem;
}
.consultation-area-txt--02{
  width: 26rem;
}
.consultation-area-txt--03{
  width: 35rem;
}





/* links
----------------------- */
.links {
  padding: 16rem 0;
}

.links_inner {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.links_item {
  padding: 4rem;
  border: 1px solid #000;
}

.links_content p {
  margin-top: 2.4rem;
  width: 33rem;

  margin-inline: auto;
}


.links_content a {
  display: block;
  margin-top: 2rem;
}

.links_img {
  width: 51rem;
}

/* youtube
----------------------- */
.youtube_inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9.8rem;
}

.youtube_content {
  width: 37.8rem;
}

.youtube_content a {
  width: 34.9rem;

  margin-inline: auto;
}

/* instagram
----------------------- */
.instagram_inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8.7rem;
}

.instagram_content {
  width: 40.2rem;
}

.instagram_content a {
  margin: 2rem auto 0;
  width: 34.7rem;
}

/* myhomepark
----------------------- */
.myhomepark {
  padding: 0 4rem 0 0;
}

.myhomepark_inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6.3rem;
}

.myhomepark_content {
  width: 42.4rem;
}

.myhomepark_img {
  width: 57.6rem;
}

.myhomepark_img img {
  height: 100%;
  object-fit: cover;
}

.myhomepark_content a {
  display: block;
  margin-top: 2rem;
  width: 34.8rem;

  margin-inline: auto;
}


.myhomepark_txt {
  margin-top: 1rem;
  width: 32rem;

  margin-inline: auto;
}

.myhomepark_note {
  margin-top: 2rem;
}

/* green
----------------------- */
.green {
  padding: 8rem 12rem 12rem;
  background-color: #dcfcc6;
}

.green_inner {
  padding: 8rem;
  background-color: #fff;
}

.green_main {
  max-width: 65.7rem;

  margin-inline: auto;
}

.green01 {
  margin: 6rem auto 0;
}

.green02 {
  margin: 8rem auto 0;
}

.green_btn {
  margin: 6rem auto 0;
  max-width: 61.5rem;
}