#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);
}
#maincopy h1 {
  font-size: 36px;
  font-weight: 300;
  text-align: left;
  line-height: 1;
  margin: 40px 0 0 0;
}
@media screen and (max-width: 1050px) {
  #maincopy h1 {
    font-size: 24px;
  }
}

#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%;
  -o-object-fit: cover;
     object-fit: cover;
}
#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 {
    width: 203px;
    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;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section figure figcaption {
    align-content: center;
  }
}
#contents #service article .list section figure figcaption h3 {
  display: inline-block;
}
#contents #service article .list section figure figcaption h4 {
  font-size: var(--medium_size);
  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;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section figure figcaption p {
    display: none;
  }
}
#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: 155px;
  }
}
#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: 140px;
  }
}
#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: 85px;
  }
}
#contents #service article .list section .mobile_text {
  display: none;
  margin: 10px 0 0 0;
}
@media screen and (max-width: 1050px) {
  #contents #service article .list section .mobile_text {
    display: block;
  }
}
#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 {
    width: 252px;
    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);
  }
}
#contents #workflow ul li figure img {
  display: none;
}
@media screen and (max-width: 1050px) {
  #contents #workflow ul li figure img {
    display: block;
  }
}
#contents #workflow ul li figure figcaption {
  text-align: justify;
}
@media screen and (max-width: 1050px) {
  #contents #workflow ul li figure figcaption {
    display: none;
  }
}
#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;
}
@media screen and (max-width: 1050px) {
  #company {
    padding: 40px 10px;
  }
}
#company h2 {
  width: 290px;
  margin: 0 0 120px 0;
}
@media screen and (max-width: 1050px) {
  #company h2 {
    width: 261px;
    margin: 0 0 60px 0;
  }
}
#company #detail {
  padding: 0 40px 0 200px;
  margin: 0 0 160px 0;
  display: grid;
  gap: 40px;
}
@media screen and (max-width: 1050px) {
  #company #detail {
    padding: 0 10px 0 0;
    margin: 0 0 80px 0;
    gap: 20px;
  }
}
#company #detail dl {
  line-height: 1.8;
  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 #detail dl dd br {
  display: none;
}
@media screen and (max-width: 1050px) {
  #company #detail dl dd br {
    display: block;
  }
}
#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 {
    aspect-ratio: 12/5;
    margin: 0 10px;
  }
}
#contact div {
  width: 352px;
  margin: auto;
  text-align: center;
}
@media screen and (max-width: 1050px) {
  #contact div {
    width: 180px;
  }
}
#contact div p {
  font-size: var(--medium_size);
  color: #fff;
}
@media screen and (max-width: 1050px) {
  #contact div p {
    font-size: var(--small_size);
  }
}

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(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: 75px;
}
footer #footernav ul li:nth-child(6) {
  width: 66px;
}
footer #credit {
  width: 230px;
  margin: 0 auto 60px auto;
}/*# sourceMappingURL=top.css.map */