#maincopy {
  text-align: center;
  padding: 120px 40px;
}
@media screen and (max-width: 1050px) {
  #maincopy {
    padding: 60px 10px;
  }
}
#maincopy #maintitle {
  width: min(1280px, 100%);
  margin: auto;
  --clip: 100%;
  clip-path: inset(var(--clip) 0 0 0);
}

#readcopy {
  width: min(1360px, 100%);
  padding: 0 40px 40px 40px;
  margin: auto;
  font-size: var(--semi_regular_size);
}
@media screen and (max-width: 1050px) {
  #readcopy {
    padding: 0 20px 30px 10px;
  }
}
@media screen and (max-width: 1050px) {
  #readcopy span {
    display: block;
  }
}

#heroimage {
  height: 150vh;
  position: relative;
}
#heroimage #kv {
  height: 100vh;
  clip-path: inset(0 0 0 0);
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  position: sticky;
  top: 0;
  z-index: 1;
  transition: 0.5s;
}
#heroimage #kv.active {
  clip-path: inset(0 40% 0 40%);
}
@media screen and (max-width: 1050px) {
  #heroimage #kv.active {
    clip-path: inset(0 80% 0 0);
  }
}
#heroimage #kv img {
  height: 100%;
}
#heroimage #mission {
  width: 100%;
  height: 680px;
  padding: 50px 40px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  z-index: 0;
  background-color: #fff;
}
@media screen and (max-width: 1050px) {
  #heroimage #mission {
    height: auto;
    padding: 20px 10px 20px 20%;
    flex-direction: column;
  }
}
#heroimage #mission #box_1 span {
  width: 138px;
  display: inline-block;
  margin: 0 0 50px 0;
}
@media screen and (max-width: 1050px) {
  #heroimage #mission #box_1 span {
    margin: 0 0 20px 10px;
  }
}
#heroimage #mission #box_1 h2 {
  font-size: var(--large_size);
  font-weight: var(--bold_weight);
}
@media screen and (max-width: 1050px) {
  #heroimage #mission #box_1 h2 {
    font-size: 20px;
    margin: 0 0 20px 10px;
  }
}
#heroimage #mission #box_2 {
  display: grid;
  align-content: end;
}
#heroimage #mission #box_2 p {
  width: 400px;
  text-align: justify;
}
@media screen and (max-width: 1050px) {
  #heroimage #mission #box_2 p {
    width: auto;
    margin: 0 0 0 10px;
  }
}

#contents {
  padding: 180px 0 460px 0;
  display: grid;
  gap: 200px;
  background-color: #f4f4f0;
}
@media screen and (max-width: 1050px) {
  #contents {
    padding: 90px 0 230px 0;
    gap: 100px;
  }
}
#contents #service {
  padding: 0 40px;
}
@media screen and (max-width: 1050px) {
  #contents #service {
    padding: 0 10px;
  }
}
#contents #service h2 {
  width: 226px;
  margin: 50px 0 80px 0;
}
@media screen and (max-width: 1050px) {
  #contents #service h2 {
    margin: 20px 0 40px 0;
  }
}
#contents #service article {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 180px;
}
@media screen and (max-width: 1050px) {
  #contents #service article {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
#contents #service article .list {
  display: grid;
  gap: 80px;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list {
    gap: 40px;
  }
}
#contents #service article .list section figure {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section figure {
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }
}
#contents #service article .list section figure figcaption {
  display: grid;
  align-content: space-between;
  gap: 10px;
}
#contents #service article .list section figure figcaption h3 {
  display: inline-block;
}
#contents #service article .list section figure figcaption h4 {
  font-size: var(--medium_size);
  font-weight: var(--medium_weight);
  margin: 0 0 20px 0;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section figure figcaption h4 {
    margin: 0 0 5px 0;
  }
}
#contents #service article .list section figure figcaption p {
  font-size: var(--small_size);
  text-align: justify;
}
#contents #service article .list section:nth-child(1) h3 {
  width: 225px;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section:nth-child(1) h3 {
    width: 112px;
  }
}
#contents #service article .list section:nth-child(2) h3 {
  width: 316px;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section:nth-child(2) h3 {
    width: 158px;
  }
}
#contents #service article .list section:nth-child(3) h3 {
  width: 124px;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section:nth-child(3) h3 {
    width: 62px;
  }
}
#contents #workflow {
  padding: 0 40px;
}
@media screen and (max-width: 1050px) {
  #contents #workflow {
    padding: 0 10px;
  }
}
#contents #workflow h2 {
  width: 280px;
  margin: 50px 0 80px 0;
}
@media screen and (max-width: 1050px) {
  #contents #workflow h2 {
    margin: 20px 0 40px 0;
  }
}
#contents #workflow div {
  margin: 0 0 20px 0;
}
@media screen and (max-width: 1050px) {
  #contents #workflow div {
    display: none;
  }
}
#contents #workflow ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  padding: 0 20px;
}
@media screen and (max-width: 1050px) {
  #contents #workflow ul {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    padding: 0;
  }
}
@media screen and (max-width: 1050px) {
  #contents #workflow ul li figure {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }
}
#contents #workflow ul li figure img {
  display: none;
}
@media screen and (max-width: 1050px) {
  #contents #workflow ul li figure img {
    display: block;
    margin: 0 0 10px 0;
  }
}
#contents #workflow ul li figure figcaption {
  text-align: justify;
}
#contents #cliants {
  padding: 0 0 0 40px;
  overflow-x: auto;
}
@media screen and (max-width: 1050px) {
  #contents #cliants {
    padding: 0 10px;
  }
}
#contents #cliants h2 {
  width: 208px;
  margin: 50px 0 80px 0;
}
@media screen and (max-width: 1050px) {
  #contents #cliants h2 {
    margin: 20px 0 40px 0;
  }
}
#contents #cliants p {
  padding: 0 70% 0 0;
  margin: 0 0 100px 0;
}
@media screen and (max-width: 1050px) {
  #contents #cliants p {
    padding: 0;
    margin: 0 0 50px 0;
  }
}
#contents #scroll {
  width: 70%;
  margin: 0 0 0 30%;
  overflow-x: auto;
  white-space: nowrap;
}
@media screen and (max-width: 1050px) {
  #contents #scroll {
    width: 100%;
    margin: 0;
  }
}
#contents #scroll div {
  width: 962px;
  cursor: grab;
}

#company {
  padding: 90px 40px;
  margin: 0 0 200px 0;
}
@media screen and (max-width: 1050px) {
  #company {
    padding: 40px 10px;
    margin: 0 0 100px 0;
  }
}
#company h2 {
  width: 290px;
  margin: 0 0 120px 0;
}
@media screen and (max-width: 1050px) {
  #company h2 {
    margin: 0 0 60px 0;
  }
}
#company #detail {
  padding: 0 40px 0 200px;
  margin: 0 0 160px 0;
  display: grid;
  gap: 80px;
}
@media screen and (max-width: 1050px) {
  #company #detail {
    padding: 0 10px 0 0;
    margin: 0 0 80px 0;
    gap: 20px;
  }
}
#company #detail dl {
  font-size: var(--medium_size);
  line-height: 2.7;
  text-align: justify;
  display: flex;
}
@media screen and (max-width: 1050px) {
  #company #detail dl {
    flex-direction: column;
  }
}
#company #detail dl dt {
  width: 20%;
}
@media screen and (max-width: 1050px) {
  #company #detail dl dt {
    width: 100%;
  }
}
#company #detail dl dd {
  width: 80%;
}
@media screen and (max-width: 1050px) {
  #company #detail dl dd {
    width: 100%;
  }
}
#company #map {
  height: 0;
  overflow: hidden;
  padding: 0 0 46.66% 0;
  position: relative;
}
#company #map iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#contact {
  aspect-ratio: 12/4;
  padding: 0 10px;
  margin: 0 40px;
  display: flex;
  align-items: center;
  background-color: #205075;
}
@media screen and (max-width: 1050px) {
  #contact {
    margin: 0 10px;
  }
}
#contact div {
  width: 352px;
  margin: auto;
  text-align: center;
}
@media screen and (max-width: 1050px) {
  #contact div {
    width: 250px;
  }
}
#contact div h2 {
  margin: 0 0 20px 0;
}
@media screen and (max-width: 1050px) {
  #contact div h2 {
    margin: 0 0 10px 0;
  }
}
#contact div p {
  font-size: var(--medium_size);
  font-weight: var(--bold_weight);
  color: #fff;
}

footer {
  padding: 0 40px;
  margin: 40px 0 0 0;
}
@media screen and (max-width: 1050px) {
  footer {
    padding: 0 10px;
    margin: 20px 0 0 0;
  }
}
footer div {
  margin: 0 0 100px 0;
}
footer #footernav {
  margin: 0 0 190px 0;
  display: grid;
  justify-items: end;
  transform: translate(-250px, 0);
}
@media screen and (max-width: 1050px) {
  footer #footernav {
    transform: translate(0, 0);
  }
}
footer #footernav ul {
  display: grid;
  gap: 20px;
}
footer #footernav ul li:nth-child(1) {
  width: 28px;
}
footer #footernav ul li:nth-child(1) {
  width: 28px;
}
footer #footernav ul li:nth-child(2) {
  width: 60px;
}
footer #footernav ul li:nth-child(3) {
  width: 61px;
}
footer #footernav ul li:nth-child(4) {
  width: 75px;
}
footer #footernav ul li:nth-child(5) {
  width: 61px;
}
footer #footernav ul li:nth-child(6) {
  width: 75px;
}
footer #footernav ul li:nth-child(7) {
  width: 66px;
}
footer #credit {
  width: 340px;
  margin: 0 auto 60px auto;
}/*# sourceMappingURL=top.css.map */