@charset "utf-8";
/* CSS Document */

/***** home_common *****/
.home section {
}
.home_about_wrap{
  max-width: 1536px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/***** home_hero *****/
 .slide {
  position   : relative;
  overflow   : hidden;
  width: 100%;
  height: calc(100vh + 100px);
  margin     : auto;
  background : #fff;
}
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 18s 0s infinite;
}
 
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
.slide img:nth-of-type(3) { animation-delay: 12s }
 
@keyframes slideAnime{
   0% { opacity: 0 }
  16.6% { opacity: 1 }
  33.2% { opacity: 1 }
  49.8% { opacity: 0 }
 100% { opacity: 0 }
}

.catch{
  position: absolute;
  left: 4vw;
  top: 28.8vh;
  font-size: clamp(2.8rem, 8.2vw, 12rem);
  font-weight: 500;
  color: #fefefe;
  line-height: 1.4;
  text-shadow: 1px 1px 2px #333;
  opacity: 0;
}
@media screen and (max-width:899px){
  .slide {
    height: calc(100vh + 60px);
  }
}

/*** home_service ***/
/* text_img_list */
#home_service .text_img_list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.8rem;
}
#home_service  .text_img_list_item{
  position: relative;
  border-radius: 2rem;
  padding-bottom: 4rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
#home_service .img_outer img {
  border-radius: 1.2rem 1.2rem 0 0;
}
#home_service .text_area{
  padding: 0 2rem;
  margin-top: 3.2rem;
}
#home_service .text_img_list_item a{
  margin-left: auto;
  display: block;
  width: fit-content;
}
@media screen and (max-width:899px) {
  #home_service .text_img_list_item .text_area{
  }
}

/*** home_case ***/
#home_case h2{
  margin-bottom: 2rem;
}
#home_case h3{
  margin-top: 4rem;
}
#home_case .plan_box{
  margin-top: 3.2rem;
}
#home_case img{
  height: 50vh;
  object-fit: cover;
  object-position: 80% 50%;
}
@media screen and (min-width:900px) {
  #home_case .flex_box{
    align-items: flex-end;
  }
  #home_case .flex_left.flex_item{
    width: 50%;
  }
  #home_case .flex_right.flex_item{
    width: 42%;
  }
}
@media screen and (max-width:899px){
  #home_case .flex_right.flex_item{
    margin-top: 6rem;
  } 
}