#summary {
  padding: 160px 20px 30px 20px;
  background-color: var(--bg-color_01);
}
@media screen and (max-width: 768px) {
  #summary {
    padding: 60px 20px 30px 20px;
  }
}
#summary article {
  display: grid;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  #summary article {
    gap: 10px;
  }
}
#summary article div {
  width: 124px;
  margin: auto;
}
#summary article p {
  text-align: center;
}
#summary article h2 {
  font-size: 24px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #summary article h2 {
    font-size: 16px;
  }
}
#summary article h2 br {
  display: none;
}
@media screen and (max-width: 768px) {
  #summary article h2 br {
    display: block;
  }
}

#detail {
  padding: 90px 20px;
  background-image: url(../images/casestudy/bg_01.png), url(../images/casestudy/bg_02.png);
  background-size: 830px 455px, 300px 230px;
  background-position: left 0 top 70px, right 50px bottom 300px;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--bg-color_03);
}
@media screen and (max-width: 768px) {
  #detail {
    padding: 30px 20px;
    background-image: none;
  }
}
#detail article {
  width: min(980px, 100%);
  margin: auto;
  display: grid;
}
@media screen and (max-width: 768px) {
  #detail article {
    gap: 60px;
  }
}
#detail article section {
  display: flex;
  justify-content: flex-start;
}
#detail article section:nth-child(even) {
  display: flex;
  justify-content: flex-end;
}
#detail article section h3 {
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px 0;
}
#detail article section div {
  width: 400px;
}
@media screen and (max-width: 768px) {
  #detail article section div {
    width: 100%;
  }
}
#detail article section div img {
  margin: 0 0 20px 0;
}
@media screen and (max-width: 768px) {
  #detail article section div img {
    width: 250px;
    margin: 0 auto 10px auto;
  }
}
#detail article section div figcaption {
  text-align: center;
}
@media screen and (max-width: 768px) {
  #detail article section div figcaption br {
    display: none;
  }
}

#contact {
  padding: 50px 20px 80px 20px;
  background-color: var(--bg-color_02);
}
@media screen and (max-width: 768px) {
  #contact {
    padding: 30px 20px 40px 20px;
  }
}
#contact p {
  text-align: center;
  padding: 0 20px;
  margin: 0 0 40px 0;
}/*# sourceMappingURL=casestudy.css.map */