@charset 'UTF-8';

/* ======================================================
  sp
====================================================== */

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

.inner {
  padding-inline: 1.8rem;
}

/* main
----------------------- */
.main {
  aspect-ratio: 375 / 700;
  background: url(../img/sp/main-bg.png) center top no-repeat;
  background-size: cover;
}

.main .main_title {
  padding-top: 1rem;
  width: 100%;
}


/* present
----------------------- */
.present {
  padding-top: 16.5rem;
  margin-top: -13.5rem;
  padding-bottom: 5rem;
}



/* components
----------------------- */
.components{
  position: relative;
  background-color: #fff;

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

}
.components-block{
  background-color: #fff;
  position: static;
  transform: translate(0%,0%);
  transform: translateY(2rem);
  margin: 0 calc(50% - 50vw);
	width: 100vw;
  box-shadow: none;
  opacity: 1;
 
}
.components-block-in{
   opacity: 0;
   background-color: #fff;
  transition: all 1s;

}
.components-block-in.isActive{
   opacity: 1;

}
.components-block--inner{
  padding-inline: 0;
}
.components-block.isActive{
  opacity: 1;
  transition-delay: 0s;
  transform: translateY(0rem);
}
.components-block-movie{
  width: 34rem;
  height: 19rem;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: 2rem;
}


/* experience
----------------------- */
.experience{
  padding: 5rem 0 6rem;

}
.experience--inner{
  max-width: 100%;
}
.experience-ttl{
  margin: auto;
  width: 33.3rem;

}
.experience-area{
  margin-top: 2.4rem;
}
.experience-area-block{
  width: 100%;
}
.experience-area-block--mt{
  margin-top: 3rem;
}
.experience-area-block-ttl{
  margin: auto;

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

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

}
.swiper-box{
  position: relative;
  margin-top: 1.5rem;
  padding: 0 2rem; /* 左右に矢印用のスペースを確保（増やすと矢印が外へ） */
}
.experience .swiper{
  padding-bottom: 3rem;
}
.swiper-pagination{
  bottom: .3rem !important;
}
.swiper-button-prev {
  left: -.6rem !important;   /* 画像の左外側。内側へ寄せたい時は値を大きく */
}
.swiper-button-next {
  right: -.6rem !important;  /* 画像の右外側。内側へ寄せたい時は値を大きく */
}


/* support
----------------------- */
.support{
  padding: 5rem 0;

}
.support-ttl{
  width: 28.2rem;

}
.support-graph{
  margin-top: 2rem;

}
.support-graph-img{
  box-shadow: .4rem .4rem .4rem rgba(0, 0, 0, 0.25);

}
.support-graph-posi01{
  position: absolute;
  width: 8.25rem;
  top: auto;
  right: auto;
  left: 2rem;
  bottom: 9rem;
}
.support-graph-posi02{
  position: absolute;
  width: 11.7rem;
  bottom: auto;
  top: 32.5rem;
  left: 4rem;
}
.support-graph-posi03{
  position: absolute;
  width: 21rem;
  bottom: 34.5rem;
  left: 9.7rem;
}
.support-graph02{
  margin-top: 2rem;
}
.support-graph02-img{
  box-shadow: .4rem .4rem .4rem rgba(0, 0, 0, 0.25);
}
.support-graph02-posi01{
  position: absolute;
  width: 26rem;
  bottom: 28rem;
  left: 4.5rem;
}
.support-txt{
  margin-top: 2.3rem;
}


/* instalive
----------------------- */
.instalive{
  padding: 5rem 0 5rem;
  background: url(../img/sp/Instagram-bg.jpg) no-repeat center center / cover;
}
.instalive-area{
  position: relative;
}
.instalive-txt{
  width: 100%;
}
.instalive-btn{
  position: absolute;
  width: 100%;
  bottom: 6rem;
  margin-left: 0rem;
}



/* consultation
----------------------- */
.consultation{
  padding: 5rem 0;
}
.consultation-ttl{
  margin: auto;
  width: 29rem;

}
.consultation-area{
  margin-top: 0;
}

.consultation-area-block{
  width: 100%;
  margin-top: 4rem;

}
.consultation-area-block:nth-child(1){
  margin-top: 5rem;

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

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

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

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

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

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

}
.consultation-area-txt--01{
  width: 29.5rem;
}
.consultation-area-txt--02{
  width: 25rem;
}
.consultation-area-txt--03{
  width: 35rem;
}




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

.links_inner {
  gap: 4rem;
}

.links_item,
.myhomepark {
  padding: 4rem 1.4rem;
}

.links_content p {
  margin-top: 2rem;
  width: 27rem;
}

.links_content a {
  margin-top: 4rem;
}

.links_img {
  width: 100%;
}

.youtube_inner,
.instagram_inner{
  flex-direction: column;
  gap: 0rem;

}
.myhomepark_inner {
  flex-direction: column;
  gap: 4rem;
}

/* youtube
----------------------- */
.youtube {
  padding-top: 5rem;
}

.youtube_content,
.youtube_content a {
  width: 100%;
}
.youtube_content{
  display: contents;
}
.youtube_content h2{
  order: 1;
}
.youtube_content p{
  order: 2;
}
.youtube_img{
  order: 3;
  margin-top: 4rem;
}
.youtube_content a{
  order: 4;
}

/* instagram
----------------------- */
.instagram_content,
.instagram_content a {
  width: 100%;
}
.instagram_content{
  display: contents;
}
.instagram_content h2{
  order: 1;
}
.instagram_content p{
  order: 2;
}
.instagram_img{
  order: 3;
  margin-top: 4rem;
}
.instagram_content a{
  order: 4;
}

/* myhomepark
----------------------- */
.myhomepark_content {
  padding: 0;
}

.myhomepark_content,
.myhomepark_content a,
.myhomepark_img {
  width: 100%;
}

.myhomepark_txt {
  width: 24rem;
}

.myhomepark_content a {
  margin-top: 2.4rem;
}

.myhomepark_note {
  margin-top: 1.6rem;
}