@charset "UTF-8";

.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  width: calc(100% / 4 - 10px);
  /*	border: 1px solid #000;*/
  border-radius: 8px;
  box-sizing: border-box;
  padding-top: calc(75% / 4 - 40px);
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 1em;
}

.schedule {
  background-image: url(../images/top1.webp);
}

.member {
  background-image: url(../images/top2.webp);
}

.vs {
  background-image: url(../images/top3.webp);
}

.preparate {
  background-image: url(../image/top4.jpg);
}

.install {
  background-image: url(../image/top5.jpg);
}
.media {
  background-image: url(../image/top7.jpg);
}

.zoom {
  background-image: url(../image/top8.jpg);
}

.adv {
  background-image: url(../image/top9.jpg);
}

.home {
  background-image: url(../image/top10.jpg);
}

.record {
  background-image: url(../images/top4.webp);
}

.usage {
  background-image: url(../image/top6.jpg);
}

.up {
  background-image: url(../image/top7.jpg);
}

.ch9 {
  background-image: url(../image/top8.jpg);
}

.ch10 {
  background-image: url(../image/top9.jpg);
}

.ch11 {
  background-image: url(../image/top10.jpg);
}

h2 {
  margin-top: -40%;
  text-shadow: 2px 2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff,
    -2px -2px 2px #fff;
  font-size: 30px;
  text-align: center;
}

.item h2 a {
  text-decoration: none;
  color: blue;
  display: block;
}
@media screen and (max-width: 700px) {
  .box {
    justify-content: space-around;
    margin-right: 20px;
  }
  .item {
    width: calc(100% / 2 - 20px);

    box-sizing: border-box;
    padding-top: calc(75% / 2 - 40px);
  }
}