@charset "UTF-8";
header {
  position: fixed;
  background: rgba(255, 255, 255, 0.85);
  height: 40px;
  z-index: 1;
  width: 100%;
}

.engineering {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%);
  padding: 0 7%;
  background: url(../images/Engineering-06.png) top left/cover no-repeat;
  color: #fff;
  width: 100%;
  background-size: 100%;
}

.engineering h2 {
  font-weight: 100;
  font-size: 5.8vw;
  padding-block: .85em .1em;
  line-height: 1em;
  color: #707070;
}

.engineering h2 span {
  color: #fff;
}

.engineering .lead_area {
  width: 69%;
  font-weight: 100;
}

.engineering .lead_area p {
  font-size: 1.166vw;
  padding-block: 1em 3.4em;
}

.engineering .circle-area {
  display: flex;
  position: relative;
  color: #fff;
  margin: 0 auto;
  padding-block-end: 17%;
  width: 100%;
}

.engineering .circle-area div {
  max-width: 387px;
  width: 25%;
}

.engineering .circle-area .circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.engineering .circle-area .circle p {
  position: absolute;
  text-align: center;
  font-size: .8vw;
  line-height: 2vw;
  transform: rotate(90deg);
}

.engineering .circle-area .circle p span {
  color: #686868;
  font-size: 1.2vw;
}

.engineering .circle-area .c02 {
  left: -1.1%;
  position: relative;
}

.engineering .circle-area .c03 {
  left: -2.2%;
  position: relative;
}

.engineering .circle-area .c04 {
  left: -3.3%;
  position: relative;
}

.engineering_detail {
  padding: 0 7%;
  position: relative;
  overflow: hidden;
}

.engineering_detail .detail_01 {
  position: relative;
  overflow: hidden;
}

.engineering_detail .detail_01 .fix_layer {
  position: relative;
  left: -100px;
}

.engineering_detail .detail_01 .fix_text_01 {
  font-size: 1vw;
  position: absolute;
  left: 9%;
  top: 27%;
  letter-spacing: 0.05vw;
  line-height: 2.778;
}

.engineering_detail .detail_01 .fall_layer {
  position: absolute;
}

.engineering_detail .detail_02 {
  position: relative;
  overflow: hidden;
}

.engineering_detail .detail_02 .fix_layer {
  left: 100px;
  position: relative;
}

.engineering_detail .detail_02 .fix_text_02 {
  font-size: 1vw;
  position: absolute;
  left: 63%;
  top: 21%;
  letter-spacing: 0.05vw;
  line-height: 2.778;
  text-align: right;
}

.engineering_detail .detail_02 .fall_layer {
  position: absolute;
}

.engineering_detail .detail_03 {
  position: relative;
  overflow: hidden;
}

.engineering_detail .detail_03 .fix_layer {
  left: -100px;
  position: relative;
}

.engineering_detail .detail_03 .fix_text_03 {
  font-size: 1vw;
  position: absolute;
  left: 9%;
  top: 21%;
  letter-spacing: 0.05vw;
  line-height: 2.778;
}

.engineering_detail .detail_03 .fall_layer {
  position: absolute;
}

.engineering_detail .detail_04 {
  position: relative;
  overflow: hidden;
}

.engineering_detail .detail_04 .fix_layer {
  left: 100px;
  position: relative;
}

.engineering_detail .detail_04 .fix_text_04 {
  font-size: 1vw;
  position: absolute;
  left: 55.3%;
  top: 29.5%;
  letter-spacing: 0.05vw;
  line-height: 2.778;
  text-align: right;
}

.engineering_detail .detail_04 .fall_layer {
  position: absolute;
}

.works {
  -webkit-clip-path: polygon(0 0, 100% 6.603%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 6.603%, 100% 100%, 0 100%);
  padding: 0 7% 40px;
  background: #000;
  color: #fff;
  width: 100%;
}

.works h2 {
  font-weight: 100;
  font-size: 5.8vw;
  padding-block: .85em;
  line-height: 1em;
  color: #707070;
}

.works h2 span {
  color: #fff;
}

.works .facilities {
  display: flex;
  width: 100%;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #686868;
}

.works .facilities:nth-child(4) {
  border-bottom: none;
}

.works .facilities .panel {
  display: flex;
  width: 65.64%;
  gap: 3%;
}

.works .facilities .panel .p-img {
  background: #fff;
  max-height: 483px;
  max-width: 483px;
  overflow: hidden;
}

.works .facilities .panel .p-img:hover img {
  transition-duration: 1.5s;
  transition-timing-function: ease-out;
  transform: scale(1.1);
}

.works .facilities .caption {
  width: 34.36%;
  padding-left: 4.54%;
  display: grid;
  align-items: end;
}

.works .facilities .caption .facilityName {
  font-size: 1.16vw;
  line-height: 2em;
}

.works .facilities .caption .description {
  color: #686868;
  font-size: .777vw;
}

.works .facilities .caption .btn {
  display: flex;
  justify-content: end;
  margin-block-start: 1em;
}

.works .button_r_s {
  color: #686868;
  border: solid 1px #686868;
  padding: .5em 2em;
  border-radius: 2em;
  font-size: 1vw;
}

.btn {
  text-align: center;
}

.button_s_m {
  color: #686868;
  border: solid 1px #686868;
  padding: .5em 5em;
  font-size: 1.22vw;
  margin: 3rem auto;
}

.space_w {
  background-position: left top;
  background-size: 100%;
  padding-inline: 7%;
}

.space_w .links {
  display: flex;
  justify-content: space-between;
  padding-block: 7%;
}

.space_w .links button {
  width: 46.75%;
  border: 1px solid #000;
  font-size: 2.3vw;
  text-align: left;
  line-height: .9em;
  padding: 1.4em 1.3em;
  position: relative;
}

.space_w .links button span {
  color: #8B8B8B;
  font-size: 1vw;
}

.space_w .links button::before {
  content: "";
  background: url(../images/arrow_a.png) no-repeat;
  display: block;
  position: absolute;
  top: 45%;
  right: 1.3em;
  width: 5%;
  height: 5%;
  background-size: contain;
}

.scroll_area img {
  max-width: 100%;
}

/* ----------------------------------------------
アニメーション設定
---------------------------------------------- */
.slide-left,
.slide-right,
.slide-bottom {
  opacity: 0;
}

.slide-left.is-inview {
  -webkit-animation: slide-left 2s ease forwards;
  animation: slide-left 2s ease forwards;
}

.slide-right.is-inview {
  -webkit-animation: slide-right 2s ease forwards;
  animation: slide-right 2s ease 1s forwards;
}

.slide-bottom.is-inview {
  -webkit-animation: slide-bottom 1s 2s forwards;
  animation: slide-bottom 1s 2s forwards;
}

.circle-animation {
  opacity: 0;
}

.circle-animation.is-inview {
  opacity: 1;
  stroke-dasharray: 314;
  stroke-dashoffset: 0;
  animation: dash 4s ease-in-out forwards;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

@keyframes dash {
  0% {
    stroke-dasharray: 628;
    stroke-dashoffset: 628;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 628;
  }
}

/* ----------------------------------------------
* Generated by Animista on 2024-8-25 23:26:28
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-left
* ----------------------------------------
*/
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 1;
  }
}

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 1;
  }
}

@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * 無限スライド
 * ----------------------------------------
 */
ul,
li {
  list-style: none;
}

/* スライドレールの枠 */
.wrap-hidden {
  width: 100%;
  overflow: hidden;
}

.wrap-hidden .roop_wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  width: max-content;
  /* スライドブロック */
}

.wrap-hidden .roop_wrap .slideshow {
  display: flex;
  -webkit-animation: loop-slide 50s infinite linear 0s both;
  animation: loop-slide 50s infinite linear 0s both;
}

@media (max-width: 720px) {
  .wrap-hidden .roop_wrap .slideshow {
    height: 5vh;
  }
  .wrap-hidden .roop_wrap .slideshow img {
    height: 100%;
  }
}

@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}