#summary {
  padding: 160px 20px 80px 20px;
  background-color: var(--bg-color_01);
}
@media screen and (max-width: 768px) {
  #summary {
    padding: 60px 20px 20px 20px;
  }
}
#summary #concept {
  width: min(1030px, 100%);
  margin: 0 auto 100px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 150px;
}
@media screen and (max-width: 768px) {
  #summary #concept {
    margin: 0 auto 30px auto;
    grid-template-columns: 1fr;
    gap: 50px;
  }
}
#summary #concept figure {
  width: min(515px, 100%);
}
@media screen and (max-width: 768px) {
  #summary #concept figure {
    margin: auto;
  }
}
#summary #concept figure figcaption {
  font-size: 13px;
}
#summary #concept p {
  display: grid;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  #summary #concept p {
    gap: 0;
  }
}
@media screen and (max-width: 768px) {
  #summary #concept p span br {
    display: none;
  }
}
#summary #img_consulting {
  width: min(560px, 100%);
  margin: auto;
}

#consulting {
  padding: 90px 20px;
  background-color: var(--bg-color_03);
  background-image: url(../images/service/bg_1.png);
  background-size: 1440px;
  background-position: right top;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  #consulting {
    padding: 50px 20px;
    background-image: none;
  }
}
#consulting article {
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 40px;
  transform: translate(100px, 0);
}
@media screen and (max-width: 768px) {
  #consulting article {
    flex-direction: column;
    gap: 50px;
    transform: translate(0, 0);
  }
}
#consulting article figure {
  width: 414px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  #consulting article figure {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #consulting article figure img {
    width: 310px;
    margin: auto;
  }
}
#consulting article figure h2 {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #consulting article figure h2 {
    font-size: 16px;
  }
}
#consulting article:last-child div {
  transform: translate(0, 40px);
}
@media screen and (max-width: 768px) {
  #consulting article:last-child div {
    transform: translate(0, 0);
  }
}
#consulting article:last-child div p {
  display: grid;
  gap: 20px;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 768px) {
  #consulting article:last-child div p {
    margin: 0 0 50px 0;
  }
}
#consulting article:last-child div p span {
  display: block;
}
#consulting article:last-child div .button a {
  margin-inline: 0;
}
@media screen and (max-width: 768px) {
  #consulting article:last-child div .button a {
    margin-inline: auto;
  }
}

#design {
  padding: 60px 20px;
  background-color: var(--bg-color_03);
  background-image: url(../images/service/bg_2.png);
  background-size: 1440px;
  background-position: left bottom;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  #design {
    padding: 50px 20px;
    background-color: var(--bg-color_02);
    background-image: none;
  }
}
#design #concept {
  width: 414px;
  margin: 0 auto 50px auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  #design #concept {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #design #concept img {
    width: 310px;
    margin: auto;
  }
}
#design #concept figcaption h2 {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #design #concept figcaption h2 {
    font-size: 16px;
  }
}
#design #outline_1 {
  width: min(1200px, 100%);
  margin: 0 auto 50px auto;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  #design #outline_1 {
    flex-direction: column;
  }
}
#design #outline_1 p {
  text-align: justify;
  display: grid;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  #design #outline_1 p br {
    display: none;
  }
}
#design #outline_1 p:first-child {
  transform: translate(0, -70px);
}
@media screen and (max-width: 768px) {
  #design #outline_1 p:first-child {
    transform: translate(0, 0);
  }
}
#design #outline_2 {
  width: min(1200px, 100%);
  margin: 0 auto;
}
#design #outline_2 figure img {
  margin: 0 0 50px 0;
}
@media screen and (max-width: 768px) {
  #design #outline_2 figure img {
    margin: 0 0 20px 0;
  }
}
#design #outline_2 figure figcaption p {
  text-align: center;
  display: grid;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  #design #outline_2 figure figcaption p {
    text-align: justify;
  }
}
@media screen and (max-width: 768px) {
  #design #outline_2 figure figcaption p {
    gap: 0;
  }
}
@media screen and (max-width: 768px) {
  #design #outline_2 figure figcaption p br {
    display: none;
  }
}

#casestudy {
  padding: 100px 20px;
  background-color: var(--bg-color_02);
}
@media screen and (max-width: 768px) {
  #casestudy {
    padding: 0 20px 100px 20px;
    background-color: var(--bg-color_02);
  }
}
#casestudy h2 {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 30px 0;
}
@media screen and (max-width: 768px) {
  #casestudy h2 {
    font-size: 16px;
  }
}
#casestudy ul {
  width: min(1200px, 100%);
  margin: 0 auto 110px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: end;
  -moz-column-gap: 40px;
       column-gap: 40px;
  row-gap: 30px;
}
@media screen and (max-width: 768px) {
  #casestudy ul {
    margin: 0 auto 70px auto;
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}
#casestudy ul li figcaption {
  font-size: 13px;
  text-align: right;
}
#casestudy ul li:nth-last-child(-n+2) {
  width: 340px;
}
@media screen and (max-width: 768px) {
  #casestudy ul li:nth-last-child(-n+2) {
    width: 100%;
    padding: 0 50px;
  }
}

#contact {
  padding: 80px 20px;
  background-color: var(--bg-color_03);
}
@media screen and (max-width: 768px) {
  #contact {
    padding: 100px 20px;
  }
}/*# sourceMappingURL=service.css.map */