.fadein-default {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
}

/*------------------------
  rect
------------------------*/
.rectangle-wrap {
  position: relative;
}

.rectangle {
  position: absolute;
  transition: 1s ease;
  -webkit-transition: 1s ease;
  width: 100%;
  left: 0;
}

.news-sect .rectangle.rectangle01 {
  z-index: 3;
  height: 250%;
  transform: translate(0, -80%) skewY(-9deg);
  -webkit-transform: translate(0, -80%) skewY(-9deg);
}

.news-sect .rectangle.active.rectangle.rectangle01 {
  transform: translate(0, -98%) skewY(-9deg);
  -webkit-transform: translate(0, -98%) skewY(-9deg);
}

@media screen and (max-width: 768px) {
  .news-sect .rectangle.rectangle01 {
    height: 160%;
    transform: translate(0, -440px) skewY(-9deg);
    -webkit-transform: translate(0, -440px) skewY(-9deg);
  }

  .news-sect .rectangle.active.rectangle.rectangle01 {
    transform: translate(0, -550px) skewY(-9deg);
    -webkit-transform: translate(0, -550px) skewY(-9deg);
  }
}

@media screen and (max-width: 576px) {
  .news-sect .rectangle.rectangle01 {
    height: 160%;
    transform: translate(0, -80%) skewY(-9deg);
    -webkit-transform: translate(0, -80%) skewY(-9deg);
  }

  .news-sect .rectangle.active.rectangle.rectangle01 {
    transform: translate(0, -98%) skewY(-9deg);
    -webkit-transform: translate(0, -98%) skewY(-9deg);
  }
}

.com-sect {
  position: relative;
}

.com-sect figure {
  position: absolute;
  width: 100%;
  height: 150%;
  transform: translate(0, -20%) skewY(-9deg);
  overflow: hidden;
  background-color: #FFF;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}

.com-sect figure.active {
  transform: translate(0, -43%) skewY(-9deg);
}

.com-sect figure.active .inner {
  transform: translate(0, 43%) skewY(9deg);
}

.com-sect figure .inner {
  height: 100%;
  transform: translate(0, 15%) skewY(9deg);
  -webkit-transform: translate(0, 15%) skewY(9deg);
  transition: 1s ease;
  -webkit-transition: 1s ease;
}

.com-sect .rectangle {
  position: absolute;
  transition: 1s ease;
  -webkit-transition: 1s ease;
  width: 100%;
  top: -50%;
}

.com-sect .rectangle.rectangle01 {
  height: 160%;
  z-index: -1;
  transform: translate(0, -10px) skewY(-9deg);
  -webkit-transform: translate(0, -10px) skewY(-9deg);
}

.com-sect .rectangle.rectangle01::before {
  content: "";
  background: url(../images/top/img-com.jpg) no-repeat center/cover;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0, 0) skewY(9deg);
  -webkit-transform: translate(0, 0) skewY(9deg);
  left: 0;
}

.about-sect .rectangle {
  position: absolute;
  transition: 1s ease;
  -webkit-transition: 1s ease;
  width: 100%;
}

.about-sect .rectangle.rectangle03 {
  z-index: 5;
  height: 300%;
  transform: translate(0, 10%) skewY(9deg);
  -webkit-transform: translate(0, 10%) skewY(9deg);
  transition-delay: 0.05s;
  -webkit-transition-delay: 0.05s;
}

.about-sect .rectangle.active.rectangle.rectangle03 {
  transform: translate(0, -7vw) skewY(9deg);
  -webkit-transform: translate(0, -7vw) skewY(9deg);
}

.about-sect .rectangle.rectangle-dots {
  background-color: #FFF;
}

.about-sect .rectangle-dots {
  background-image: url(../images/common/bg-dots-mg.svg), url(../images/common/bg-dots-rectangle.svg);
  background-repeat: repeat;
  background-position: center center, left top;
  background-attachment: fixed;
  width: 100%;
  height: 2000px;
  z-index: -2;
  top: -50%;
  right: 0;
}

@media screen and (max-width: 768px) {
  .about-sect .rectangle.rectangle03 {
    height: 120%;
    transform: translate(0, 5vw) skewY(11deg);
    -webkit-transform: translate(0, 5vw) skewY(11deg);
  }

  .about-sect .rectangle.active.rectangle.rectangle03 {
    transform: translate(0, -8vw) skewY(11deg);
    -webkit-transform: translate(0, -8vw) skewY(11deg);
  }
}

.column-archive .rectangle.rectangle02 {
  height: 60%;
  transform: translate(0, -10px) skewY(-9deg);
  -webkit-transform: translate(0, 0) skewY(-9deg);
  overflow: hidden;
  background-color: #FFF;
}

.column-archive .rectangle.rectangle02::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  z-index: 6;
  width: 100%;
  height: 100%;
  background: url(../images/common/bg-rect-blk.svg) repeat;
  transform: skewY(9deg);
  -webkit-transform: skewY(9deg);
  top: -50%;
}

.column-archive .rectangle.rectangle03 {
  z-index: 5;
  height: 120%;
  transform: translate(0, -10px) skewY(9deg);
  -webkit-transform: translate(0, -10px) skewY(9deg);
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}

.column-archive .rectangle.active.rectangle.rectangle02 {
  transform: translate(0, -120px) skewY(-9deg);
  -webkit-transform: translate(0, -120px) skewY(-9deg);
}

.column-archive .rectangle.active.rectangle.rectangle03 {
  transform: translate(0, -120px) skewY(9deg);
  -webkit-transform: translate(0, -120px) skewY(9deg);
}

@media screen and (max-width: 768px) {
  .column-archive .rectangle.rectangle02 {
    height: 60%;
    transform: translate(0, 0) skewY(-11deg);
    -webkit-transform: translate(0, 0) skewY(-11deg);
  }

  .column-archive .rectangle.rectangle02::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    z-index: 6;
    background: url(../images/common/bg-rect-blk.svg) repeat;
    transform: skewY(11deg);
    -webkit-transform: skewY(11deg);
  }

  .column-archive .rectangle.rectangle03 {
    height: 105%;
    transform: translate(0, 0) skewY(11deg);
    -webkit-transform: translate(0, 0) skewY(11deg);
    transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
  }

  .column-archive .rectangle.active.rectangle.rectangle02 {
    transform: translate(0, -70px) skewY(-11deg);
    -webkit-transform: translate(0, -70px) skewY(-11deg);
  }

  .column-archive .rectangle.active.rectangle.rectangle03 {
    transform: translate(0, -70px) skewY(11deg);
    -webkit-transform: translate(0, -70px) skewY(11deg);
  }
}

.rectangle-wrap .rectangle.rectangle01 {
  height: 60%;
  transform: translate(0, 50px) skewY(-9deg);
  -webkit-transform: translate(0, 50px) skewY(-9deg);
  overflow: hidden;
  background-color: #F8F6F6;
  z-index: 2;
}

.rectangle-wrap .rectangle.rectangle01::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  z-index: 6;
  width: 100%;
  height: 200%;
  background: url(../images/common/bg-rect-blk.svg) repeat;
  transform: skewY(9deg);
  top: -50%;
  left: 0;
}

.about-detail-sect .rectangle.rectangle02,
.rectangle-wrap .rectangle.rectangle02 {
  z-index: 5;
  height: 200%;
  transform: translate(0, 50px) skewY(9deg);
  -webkit-transform: translate(0, 50px) skewY(9deg);
  transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
}

.rectangle-wrap .rectangle.active.rectangle.rectangle01 {
  transform: translate(0, -120px) skewY(-9deg);
}

.about-detail-sect .rectangle.active.rectangle.rectangle02,
.rectangle-wrap .rectangle.active.rectangle.rectangle02 {
  transform: translate(0, -120px) skewY(9deg);
}

.lead-sect .rectangle01 {
  height: 130%;
  transform: translate(0, -150px) skewY(-9deg);
  -webkit-transform: translate(0, -150px) skewY(-9deg);
  overflow: hidden;
  background-color: #F8F6F6;
  position: absolute;
  z-index: 2;
}

.lead-sect .rectangle01.active {
  transform: translate(0, -420px) skewY(-9deg);
  -webkit-transform: translate(0, -420px) skewY(-9deg);
}

.community .lead-sect .rectangle01 {
  height: 160%;
  transform: translate(0, -150px) skewY(-9deg);
  -webkit-transform: translate(0, -150px) skewY(-9deg);
  overflow: hidden;
  background-color: #F8F6F6;
  position: absolute;
  z-index: 2;
}

.community .lead-sect .rectangle01.active {
  transform: translate(0, -420px) skewY(-9deg);
  -webkit-transform: translate(0, -420px) skewY(-9deg);
}

.local-government .lead-sect .rectangle01 {
  height: 150%;
  transform: translate(0, -150px) skewY(-9deg);
  -webkit-transform: translate(0, -150px) skewY(-9deg);
  overflow: hidden;
  background-color: #F8F6F6;
  position: absolute;
  z-index: 2;
}

.local-government .lead-sect .rectangle01.active {
  transform: translate(0, -420px) skewY(-9deg);
  -webkit-transform: translate(0, -420px) skewY(-9deg);
}

.crafts-industry .rectangle01 {
  height: 143%;
  transform: translate(0, -150px) skewY(-9deg);
  -webkit-transform: translate(0, -150px) skewY(-9deg);
  overflow: hidden;
  background-color: #F8F6F6;
  position: absolute;
  z-index: 2;
}

.crafts-industry .rectangle01.active {
  transform: translate(0, -420px) skewY(-9deg);
  -webkit-transform: translate(0, -420px) skewY(-9deg);
}

.rental .lead-sect .rectangle01 {
  height: 133%;
  transform: translate(0, -150px) skewY(-9deg);
  -webkit-transform: translate(0, -150px) skewY(-9deg);
  overflow: hidden;
  background-color: #F8F6F6;
  position: absolute;
  z-index: 2;
}

.rental .lead-sect .rectangle01.active {
  transform: translate(0, -420px) skewY(-9deg);
  -webkit-transform: translate(0, -420px) skewY(-9deg);
}

.rectangle-dots {
  background-image: url(../images/common/bg-dots-mg.svg), url(../images/common/bg-dots-rectangle.svg);
  background-repeat: repeat;
  background-position: center center, left top;
  background-attachment: fixed;
  background-color: #F8F6F6;
  width: 100%;
  height: 2000px;
  z-index: 1;
  top: -50%;
  right: 0;
}

@media screen and (max-width: 992px) {
  .lead-sect .rectangle01 {
    height: 130%;
    transform: translate(0, -150px) skewY(-9deg);
    -webkit-transform: translate(0, -150px) skewY(-9deg);
  }

  .lead-sect .rectangle01.active {
    transform: translate(0, -480px) skewY(-9deg);
    -webkit-transform: translate(0, -480px) skewY(-9deg);
  }

  .community .lead-sect .rectangle01 {
    height: 160%;
    transform: translate(0, -150px) skewY(-9deg);
    -webkit-transform: translate(0, -150px) skewY(-9deg);
    overflow: hidden;
    background-color: #F8F6F6;
    position: absolute;
    z-index: 2;
  }

  .community .lead-sect .rectangle01.active {
    transform: translate(0, -480px) skewY(-9deg);
    -webkit-transform: translate(0, -480px) skewY(-9deg);
  }

  .local-government .lead-sect .rectangle01,
  .rental .lead-sect .rectangle01 {
    height: 155%;
    transform: translate(0, -150px) skewY(-9deg);
    -webkit-transform: translate(0, -150px) skewY(-9deg);
  }

  .local-government .lead-sect .rectangle01.active,
  .rental .lead-sect .rectangle01.active {
    transform: translate(0, -480px) skewY(-9deg);
    -webkit-transform: translate(0, -480px) skewY(-9deg);
  }

  .crafts-industry .lead-sect .rectangle01 {
    height: 147.5%;
    transform: translate(0, -150px) skewY(-9deg);
    -webkit-transform: translate(0, -150px) skewY(-9deg);
  }

  .crafts-industry .lead-sect .rectangle01.active {
    transform: translate(0, -480px) skewY(-9deg);
    -webkit-transform: translate(0, -480px) skewY(-9deg);
  }

  .rental .lead-sect .rectangle01 {
    height: 136%;
    transform: translate(0, -150px) skewY(-9deg);
    -webkit-transform: translate(0, -150px) skewY(-9deg);
  }

  .rental .lead-sect .rectangle01.active {
    transform: translate(0, -480px) skewY(-9deg);
    -webkit-transform: translate(0, -480px) skewY(-9deg);
  }
}

@media screen and (max-width: 768px) {
  .rectangle-wrap .rectangle.rectangle01 {
    height: 60%;
    transform: translate(0, 0) skewY(-11deg);
    -webkit-transform: translate(0, 0) skewY(-11deg);
    overflow: hidden;
  }

  .rectangle-wrap .rectangle.rectangle01::before {
    background: url(../images/common/bg-rect-blk.svg) repeat;
    transform: skewY(9deg);
  }

  .about-detail-sect .rectangle.rectangle02,
  .rectangle-wrap .rectangle.rectangle02 {
    height: 150%;
    transform: translate(0, 0) skewY(11deg);
    -webkit-transform: translate(0, 0) skewY(11deg);
  }

  .rectangle-wrap .rectangle.active.rectangle.rectangle01 {
    transform: translate(0, -70px) skewY(-11deg);
    -webkit-transform: translate(0, -70px) skewY(-11deg);
  }

  .about-detail-sect .rectangle.active.rectangle.rectangle02,
  .rectangle-wrap .rectangle.active.rectangle.rectangle02 {
    transform: translate(0, -70px) skewY(11deg);
    -webkit-transform: translate(0, -70px) skewY(11deg);
  }

  .lead-sect .rectangle01 {
    height: 100%;
    transform: translate(0, -40px) skewY(-9deg);
    -webkit-transform: translate(0, -40px) skewY(-9deg);
  }

  .lead-sect .rectangle01.active {
    transform: translate(0, -90px) skewY(-9deg);
    -webkit-transform: translate(0, -90px) skewY(-9deg);
  }

  .community .lead-sect .rectangle01 {
    height: 105%;
    transform: translate(0, -40px) skewY(-9deg);
    -webkit-transform: translate(0, -40px) skewY(-9deg);
  }

  .community .lead-sect .rectangle01.active {
    transform: translate(0, -90px) skewY(-9deg);
    -webkit-transform: translate(0, -90px) skewY(-9deg);
  }

  .local-government .lead-sect .rectangle01 {
    height: 102%;
    transform: translate(0, -40px) skewY(-9deg);
    -webkit-transform: translate(0, -40px) skewY(-9deg);
  }

  .local-government .lead-sect .rectangle01.active {
    transform: translate(0, -90px) skewY(-9deg);
    -webkit-transform: translate(0, -90px) skewY(-9deg);
  }

  .crafts-industry .lead-sect .rectangle01 {
    height: 102%;
    transform: translate(0, -40px) skewY(-9deg);
    -webkit-transform: translate(0, -40px) skewY(-9deg);
  }

  .crafts-industry .lead-sect .rectangle01.active {
    transform: translate(0, -90px) skewY(-9deg);
    -webkit-transform: translate(0, -90px) skewY(-9deg);
  }

  .rental .lead-sect .rectangle01 {
    height: 100%;
    transform: translate(0, -40px) skewY(-9deg);
    -webkit-transform: translate(0, -40px) skewY(-9deg);
  }

  .rental .lead-sect .rectangle01.active {
    transform: translate(0, -90px) skewY(-9deg);
    -webkit-transform: translate(0, -90px) skewY(-9deg);
  }
}

.fadein {
  opacity: 0;
}

.fadein.fade-on {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.delay01 {
  animation-delay: 0.1s;
}

.delay02 {
  animation-delay: 0.15s;
}

.delay03 {
  animation-delay: 0.2s;
}

.delay04 {
  animation-delay: 0.25s;
}