@charset "UTF-8";

header {
  min-height: 500px;
  height: 50vh;
  background-image: url(../images/Rent-header.jpg);
  background-size: cover;
  background-position: center top;
  align-content: center;
  position: relative;
  margin-bottom: 100px;
}

.dounyu {
  max-width: 1080px;
  margin: 0 auto 50px auto;
  padding: 0 4%;
}

.dounyu p {
  font-size: 1.125rem;
}

.titlephoto {
  height: 200px;
  margin-bottom: 40px;
}

.titlephoto2 {
  width: 70%;
  height: inherit;
  background-image: url(../images/Rent-set.jpg);
  background-size: cover;
  background-position: center center;
  border-radius: 0 80px 0 0;
  align-content: center;
  text-align: center;
}

.phototitle {
  color: var(--primary-color);
  font-size: 2rem;
  text-align: center;
  text-shadow: 0 0 3px #000;
}

.brsp {
  display: none;
}

.Rensec {
  margin: 0 auto 100px auto;
}

.Rensec p {
  text-align: center;
}

.Rentalbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 4%;
}

.Rentalpic {
  margin-bottom: 30px;
}

.Rentalpic img {
  border-radius: 8px;
  margin-bottom: 5px;
  aspect-ratio: 4/3;
}

.Rentalbox2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  justify-content: space-around;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 4%;
}

.red {
  margin-top: 10px;
  color: brown;
}

.titlephoto3 {
  width: 70%;
  height: inherit;
  background-image: url(../images/Rent-item.jpg);
  background-size: cover;
  background-position: center center;
  border-radius: 80px 0 0 0;
  align-content: center;
  text-align: center;
  margin-left: 30%;
}

.rightphoto {
  align-content: flex-end;
}

.titlephoto4 {
  width: 70%;
  height: inherit;
  background-image: url(../images/Rent-cooking.jpg);
  background-size: cover;
  background-position: center center;
  border-radius: 0 80px 0 0;
  align-content: center;
  text-align: center;
}

.titlephoto5 {
  width: 70%;
  height: inherit;
  background-image: url(../images/Rent-foods.jpg);
  background-size: cover;
  background-position: center center;
  border-radius: 80px 0 0 0;
  align-content: center;
  text-align: center;
  margin-left: 30%;
}

.titlephoto6 {
  width: 70%;
  height: inherit;
  background-image: url(../images/Rent-spice.jpg);
  background-size: cover;
  background-position: center center;
  border-radius: 0 80px 0 0;
  align-content: center;
  text-align: center;
}

#Chuui {
  max-width: 1080px;
  padding: 20px 8%;
  margin: 0 auto 100px auto;
}

#Service {
  max-width: 1080px;
  padding: 0 4%;
  margin: 0 auto 100px auto;
}

#Service img {
  aspect-ratio: 16/9;
  border-radius: 10px;
}

.Servicebox {
  display: flex;
  gap: 30px;
  align-content: center;
  margin-bottom: 20px;
}

.Servicep {
  align-content: center;
}

.Servicep h5 {
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 20px;
}



.footerbg {
  min-height: 80vh;
  background-image: url(../images/Rent-footer.jpg);

  background-position: center bottom;
  background-size: cover;
  position: relative;
}

@media (max-width: 768px) {
  .titlephoto {
    height: 150px;
  }

  .titlephoto2,
  .titlephoto4,
  .titlephoto6 {
    width: 90%;
  }

  .phototitle {
    font-size: 1.5rem;
  }

  .brsp {
    display: block;
  }

  .Rentalbox {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .titlephoto3,
  .titlephoto5 {
    width: 90%;
    margin-left: 10%;
  }

  .Servicebox {
    flex-direction: column;
  }

  .Serviceimg {
    width: 80%;
    margin: 0 auto 20px auto;
  }

  .flex1st {
    flex-direction: column-reverse;
  }
}

/* 各セクション端～端に広がる時はwidth指定なし section名はidで指定すべし*/
/* 狭めのセクションはmax-width 1080px  padding ~ 4%*/
/* htmlのふわっとは、fadeuptrigger 下から上　fadeuptrigger2 左から右　fadeuptrigger3右から左 */