/*Mv
=======================================================*/
.mv{
  width: 100%;
  height: 70vh;
  position: relative;
  margin-top: 60px;
}
.mv .mv-bg{
  width: 100%;
  height: 70vh;
  object-fit: cover;
  object-position: top;
}

@media screen and (max-width: 1200px){
  .mv{
    height: 50vh;
    margin-top: 50px;
  }
  .mv .mv-bg{
    height: 50vh;
  }
}
@media screen and (max-width: 768px){
}

/*ご挨拶
=======================================================*/
.intro{
  background: url(../img/intro-bg.png) no-repeat center;
  background-size: cover;
}
.intro-wrap{
  display: flex;
  gap: 70px;
}
.intro-img-box{
  width: 50%;
}
.intro-img-box img{
  object-fit: contain;
}
img.intro-img01{
  height: 330px;
  margin-top: -150px;
  z-index: 1;
  position: relative;
}
img.intro-img02{
  z-index: 0;
  position: relative;
  height: 360px;
  margin-top: -80px;
  margin-left: auto;
  display: block;
}
.intro-box{
  width: 50%;
}
img.icon03{
  position: absolute;
  bottom:-50px;
  width: 25%;
  right: 0;
  object-fit: contain;
}
img.icon03-L{
  right: auto;
  left: 0;
  transform: scale(-1, 1);
}

@media screen and (max-width: 768px){
  .intro-wrap{
    flex-wrap: wrap;
    gap:40px;
  }
  .intro-img-box{
    width: 100%;
  }
  img.intro-img01{
    height: auto;
    width: 50%;
    margin-top: -100px;
  }
  img.intro-img02{
    height: auto;
    width: 60%;
  }
  .intro-box{
    width: 100%;
  }
}

/*猫舎の特徴
=======================================================*/
.feature-wrap{
  display: flex;
  align-items: center;
  gap:60px;
}
.feature-box{
  width: 50%;
}
img.feature-img01{
  object-fit: contain;
  width: 50%;
}

@media screen and (max-width: 768px){
  .feature-wrap{
    flex-wrap: wrap;
    gap: 40px;
  }
  .feature-box{
    width: 100%;
  }
  img.feature-img01{
    width: 60%;
    margin: 0 auto;
  }
}

/*お客様のお声
=======================================================*/
.voice{
  background: url(../img/voice-bg.png) no-repeat top;
  background-size: 100%;
}
.voice .common{
  padding: 150px 0 100px;
}
.voice-wrap{
  display: flex;
  gap:20px;
}
.voice-box{
  width: calc(100% / 3);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(180,180,180,0.25);
  padding: 30px;
}
.voice-img{
  display: block;
  width: 70%;
  margin: 0 auto;
}
.voice-box-txt{
  margin-top: 20px;
}

@media screen and (max-width: 768px){
  .voice .common{
    padding: 50px 0;
  }
  .voice-wrap{
    flex-wrap: wrap;
  }
  .voice-box{
    width: 100%;
    padding: 20px;
  }
  .voice-img{
    width: 40%;
  }
}

/*家族になるまでの流れ
=======================================================*/
.flow-txt{
  text-align: center;
}
.flow-wrap{
  margin-top: 50px;
}
.flow-box{
  padding-bottom: 40px;
  position: relative;
}
.flow-box:last-child{
  padding-bottom: 0;
}
.flow-box::before{
  content: "";
  background: #FFCCBF;
  width: 1px;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  left: 5%;
}
.flow-box:last-child::before{
  content: unset;
}
.flow-box-ttl{
  font-family: "ZenMaruGothic M";
  position: relative;
  background: #FFCCBF;
  border-radius: 20px 0 20px 0;
  width: 250px;
  text-align: center;
  font-size: 18px;
  padding: 5px 0;
}
span.flow-box-ttl-step{
  color:#FFCCBF;
  position: absolute;
  top: -33px;
  font-family: "JosefinSans R";
  font-size: 20px;
  left: 40%;
}
span.flow-box-ttl-step span.flow-box-ttl-step-num{
  font-size: 30px;
}
.flow-box-txt{
  background: #FFF4F2;
  padding: 30px 20px 20px 20px;
  width: 90%;
  margin-left: auto;
  border-radius: 20px 0 20px 0;
  margin-top: -20px;
}

@media screen and (max-width: 768px){
  span.flow-box-ttl-step{
    left: 15%;
  }
}

/*よくあるご質問
=======================================================*/
.faq{
  background: #FFFBDD;
}
.faq-box{
  background: #fff;
  margin-bottom: 20px;
  padding: 20px;
}
.faq-box:last-child{
  margin-bottom: 0;
}
.faq-box-q{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.faq-box-q-icon{
  background: #FF8A6C;
  color: #fff;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.faq-box-q-icon span{
  font-family: "JosefinSans M";
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
}
.faq-box-q-txt{
  font-family: "ZenMaruGothic M";
  font-size: 18px;
  width: calc(100% - 50px);
}
.faq-box-a{
  display: flex;
}
.faq-box-a-icon{
  background: #FFCCBF;
  color:#FF8A6C;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.faq-box-a-icon span{
  font-family: "JosefinSans M";
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
}
.faq-box-a-txt{
  width: calc(100% - 50px);
}

@media screen and (max-width: 768px){
  .faq-box-q-txt{
    font-size: 15px;
  }
}