@import url("xlb3nos.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
@keyframes scroll {
  0% {
    height: 180px;
    top: -180px;
  }
  80% {
    height: 180px;
    top: 180px;
  }
  100% {
    height: 180px;
    top: 180px;
  }
}
#loader {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99999;
  transition: opacity 1s linear;
}
#loader .logo {
  width: 272px;
  height: 84px;
  background-image: url(../svg/logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  line-height: 1;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  position: absolute;
  top: calc(50% - 42px);
  left: calc(50% - 136px);
}
#loader .bar {
  width: 100%;
  background-color: #E6E6E6;
  position: absolute;
  left: 0px;
  bottom: 0px;
}
#loader .bar span {
  width: 0;
  height: 20px;
  background-color: #51489d;
  display: block;
}

body {
  width: 100%;
}
body.loading {
  position: fixed;
  overflow-y: scroll;
}
body .scroll {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
}
body .scroll p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin-bottom: 5px;
}
body .scroll div {
  width: 1px;
  height: 180px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}
body .scroll div span {
  width: 1px;
  height: 1px;
  background-color: #000;
  position: absolute;
  display: block;
  animation: scroll 1.5s infinite;
}

main {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.sec {
  /* sec1 */
  /* sec2 */
}
.sec.sec1 {
  width: 100%;
  height: 3650px;
  overflow: hidden;
}
.sec.sec1 .deco {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.sec.sec1 .deco.obj1 {
  width: 244px;
  height: 220px;
  background-image: url(../png/object_clane1.png);
  left: calc(50% - 1000px);
  top: -50px;
}
.sec.sec1 .deco.obj2 {
  width: 244px;
  height: 220px;
  background-image: url(../png/object_clane1.png);
  left: calc(50% + 100px);
  top: 600px;
}
.sec.sec1 .deco.obj3 {
  width: 244px;
  height: 220px;
  background-image: url(../png/object_clane2.png);
  left: calc(50% - 250px);
  top: 905px;
}
.sec.sec1 .deco.obj4 {
  width: 75px;
  height: 136px;
  background-image: url(../png/object_clane3.png);
  left: calc(50% + 965px);
  top: 1725px;
}
.sec.sec1 .deco.mecha1 {
  width: 177px;
  height: 139px;
  background-image: url(../png/object_machine1.png);
  left: calc(50% + 340px);
  top: 1920px;
  z-index: 15;
}
.sec.sec1 .deco.mecha2 {
  width: 212px;
  height: 263px;
  background-image: url(../png/object_machine4.png);
  left: calc(50% - 35px);
  top: 1970px;
  z-index: 15;
}
.sec.sec1 .deco.man1 {
  width: 100px;
  height: 100px;
  background-image: url(../gif/object_man1.gif);
  top: 120px;
  left: calc(50% - 20px);
}
.sec.sec1 .deco.man2 {
  width: 100px;
  height: 100px;
  background-image: url(../gif/object_man2.gif);
  top: 560px;
  left: calc(50% + 265px);
}
.sec.sec1 .deco.man3 {
  width: 83px;
  height: 98px;
  background-image: url(../gif/object_man2.gif);
  top: 1620px;
  left: calc(50% + 1020px);
}
.sec.sec1 .deco.man4 {
  width: 95px;
  height: 100px;
  background-image: url(../gif/object_man1.gif);
  top: 1445px;
  left: calc(50% - 960px);
}
.sec.sec1 .deco.cnv1 {
  width: 889px;
  height: 535px;
  background-image: url(../png/object_conveyor1.png);
  top: 1595px;
  left: calc(50% - 1730px);
}
.sec.sec1::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../svg/lineset1.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 3000px 3100px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  pointer-events: none;
}
.sec.sec1 .inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.sec.sec1 .inner .block.head {
  width: 100%;
  position: relative;
}
.sec.sec1 .inner .block.head h2 {
  width: 638px;
  height: 66px;
  background-image: url(../svg/catch.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  line-height: 1;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 295px;
  left: calc(50% - 40px);
}
.sec.sec1 .inner .block.head .photo {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: absolute;
}
.sec.sec1 .inner .block.head .photo span {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: block;
}
.sec.sec1 .inner .block.head .photo.p1 {
  width: 650px;
  height: 378px;
  top: -51px;
  left: calc(50% - 678px);
}
.sec.sec1 .inner .block.head .photo.p1 span .slider {
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p1 span .slider .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p1 span .slider .swiper-wrapper .swiper-slide {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p1 span .slider .swiper-wrapper .swiper-slide.p1 {
  background-image: url(../jpg/photo_head1_1.jpg);
}
.sec.sec1 .inner .block.head .photo.p1 span .slider .swiper-wrapper .swiper-slide.p2 {
  background-image: url(../jpg/photo_head1_2.jpg);
}
.sec.sec1 .inner .block.head .photo.p1 span .slider .swiper-wrapper .swiper-slide.p3 {
  background-image: url(../jpg/photo_head1_3.jpg);
}
.sec.sec1 .inner .block.head .photo.p2 {
  width: 650px;
  height: 379px;
  top: 135px;
  left: calc(50% - 1000px);
}
.sec.sec1 .inner .block.head .photo.p2 span {
  background-image: url(../jpg/photo_head2.jpg);
}
.sec.sec1 .inner .block.head .photo.p3 {
  width: 405px;
  height: 236px;
  top: 327px;
  left: calc(50% - 550px);
}
.sec.sec1 .inner .block.head .photo.p3 span {
  background-image: url(../jpg/photo_head3.jpg);
}
.sec.sec1 .inner .block.head .photo.p4 {
  width: 923px;
  height: 534px;
  top: 443px;
  left: calc(50% - 606px);
}
.sec.sec1 .inner .block.head .photo.p4 span .slider {
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p4 span .slider .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p4 span .slider .swiper-wrapper .swiper-slide {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p4 span .slider .swiper-wrapper .swiper-slide.p1 {
  background-image: url(../jpg/photo_head4_1.jpg);
}
.sec.sec1 .inner .block.head .photo.p4 span .slider .swiper-wrapper .swiper-slide.p2 {
  background-image: url(../jpg/photo_head4_2.jpg);
}
.sec.sec1 .inner .block.head .photo.p4 span .slider .swiper-wrapper .swiper-slide.p3 {
  background-image: url(../jpg/photo_head4_3.jpg);
}
.sec.sec1 .inner .block.head .photo.p5 {
  width: 373px;
  height: 217px;
  top: 609px;
  left: calc(50% + 311px);
}
.sec.sec1 .inner .block.head .photo.p5 span {
  background-image: url(../jpg/photo_head5.jpg);
}
.sec.sec1 .inner .block.head .photo.p6 {
  width: 378px;
  height: 220px;
  top: 500px;
  left: calc(50% + 496px);
}
.sec.sec1 .inner .block.head .photo.p6 span .slider {
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p6 span .slider .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p6 span .slider .swiper-wrapper .swiper-slide {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.sec.sec1 .inner .block.head .photo.p6 span .slider .swiper-wrapper .swiper-slide.p1 {
  background-image: url(../jpg/photo_head6_1.jpg);
}
.sec.sec1 .inner .block.head .photo.p6 span .slider .swiper-wrapper .swiper-slide.p2 {
  background-image: url(../jpg/photo_head6_2.jpg);
}
.sec.sec1 .inner .block.head .photo.p6 span .slider .swiper-wrapper .swiper-slide.p3 {
  background-image: url(../jpg/photo_head6_3.jpg);
}
.sec.sec1 .inner .block.message {
  text-align: left;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  top: 975px;
  left: calc(50% - 755px);
  z-index: 10;
}
.sec.sec1 .inner .block.message ul {
  padding: 175px 0 0 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.sec.sec1 .inner .block.message ul.photos {
  width: 665px;
}
.sec.sec1 .inner .block.message ul.photos li:nth-child(odd) {
  width: 385px;
}
.sec.sec1 .inner .block.message ul.photos li:nth-child(even) {
  width: 280px;
  margin-left: auto;
}
.sec.sec1 .inner .block.message .text {
  margin: 0 0 0 130px;
}
.sec.sec1 .inner .block.message .text h3 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 7.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
.sec.sec1 .inner .block.message .text h3:not(:last-child) {
  margin-bottom: 90px;
}
.sec.sec1 .inner .block.message .text dl dt {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  margin-bottom: 40px;
}
.sec.sec1 .inner .block.message .text dl dd p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 3rem;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
.sec.sec1 .inner .block.message .text dl dd p:not(:last-child) {
  margin-bottom: 30px;
}
.sec.sec1 .inner .block.about {
  text-align: left;
  width: 100%;
  position: absolute;
  top: 2105px;
  left: 0%;
}
.sec.sec1 .inner .block.about .title h3 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 7.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  margin-bottom: 10px;
}
.sec.sec1 .inner .block.about .title p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
.sec.sec1 .inner .block.about .link {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: absolute;
}
.sec.sec1 .inner .block.about .link a {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.25s ease-in 0s;
  position: relative;
}
.sec.sec1 .inner .block.about .link a:hover {
  background-size: 102% auto;
  opacity: 0.8;
}
.sec.sec1 .inner .block.about .link a span {
  width: 160px;
  height: 100%;
  background-color: rgba(81, 72, 157, 0.95);
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 58px 65px;
  text-align: left;
  text-indent: 999%;
  line-height: 1;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  display: block;
}
.sec.sec1 .inner .block.about .link.l1 {
  width: 1165px;
  height: 677px;
  top: -20px;
  left: calc(50% - 348px);
}
.sec.sec1 .inner .block.about .link.l1 a {
  background-image: url(../jpg/photo_about1.jpg);
  justify-content: center;
}
.sec.sec1 .inner .block.about .link.l2 {
  width: 606px;
  height: 352px;
  top: 595px;
  left: calc(50% - 565px);
}
.sec.sec1 .inner .block.about .link.l2 a {
  background-image: url(../jpg/photo_about2.jpg);
}
.sec.sec1 .inner .block.about .link.l2 a span {
  background-image: url(../svg/title_about_sp1.svg);
}
.sec.sec1 .inner .block.about .link.l3 {
  width: 606px;
  height: 352px;
  top: 944px;
  left: calc(50% - 406px);
}
.sec.sec1 .inner .block.about .link.l3 a {
  background-image: url(../jpg/photo_about3.jpg);
}
.sec.sec1 .inner .block.about .link.l3 a span {
  background-image: url(../svg/title_about_sp2.svg);
}
.sec.sec1 .inner .block.about .link.l4 {
  width: 606px;
  height: 352px;
  top: 1172px;
  left: calc(50% - 14px);
}
.sec.sec1 .inner .block.about .link.l4 a {
  background-image: url(../jpg/photo_about4.jpg);
}
.sec.sec1 .inner .block.about .link.l4 a span {
  background-image: url(../svg/title_about_sp3.svg);
}
.sec.sec1 .inner .block.about .ltext {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  transform: rotate(30deg);
  display: inline-block;
  position: absolute;
}
.sec.sec1 .inner .block.about .ltext.text-l2 {
  top: 635px;
  left: calc(50% - 565px + 305px);
}
.sec.sec1 .inner .block.about .ltext.text-l3 {
  top: 979px;
  left: calc(50% - 406px + 305px);
}
.sec.sec1 .inner .block.about .ltext.text-l4 {
  top: 1222px;
  left: calc(50% - 14px + 295px);
}
.sec.sec2 {
  width: 100%;
  height: 6090px;
  margin-top: -1645px;
  overflow: hidden;
  position: relative;
  pointer-events: none;
}
.sec.sec2 .deco {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.sec.sec2 .deco.obj5 {
  width: 75px;
  height: 136px;
  background-image: url(../png/object_clane3.png);
  left: calc(50% + 1290px);
  top: 110px;
}
.sec.sec2 .deco.obj6 {
  width: 75px;
  height: 136px;
  background-image: url(../png/object_clane3.png);
  left: calc(50% + 140px);
  top: 780px;
}
.sec.sec2 .deco.obj7 {
  width: 75px;
  height: 136px;
  background-image: url(../png/object_clane4.png);
  left: calc(50% + 955px);
  top: 750px;
}
.sec.sec2 .deco.obj8 {
  width: 61px;
  height: 115px;
  background-image: url(../png/object_clane5.png);
  left: calc(50% + 130px);
  top: 2835px;
  z-index: 20;
}
.sec.sec2 .deco.man5 {
  width: 165px;
  height: 140px;
  background-image: url(../gif/object_man3.gif);
  left: calc(50% - 1375px);
  top: 500px;
}
.sec.sec2 .deco.man6 {
  width: 157px;
  height: 136px;
  background-image: url(../gif/object_man4.gif);
  left: calc(50% + 180px);
  top: 1660px;
}
.sec.sec2 .deco.man7 {
  width: 83px;
  height: 98px;
  background-image: url(../gif/object_man2_2.gif);
  left: calc(50% + 80px);
  top: 2700px;
}
.sec.sec2 .deco.man8 {
  width: 83px;
  height: 98px;
  background-image: url(../gif/object_man2.gif);
  left: calc(50% - 1320px);
  top: 3400px;
  z-index: 20;
}
.sec.sec2 .deco.cnv2 {
  width: 614px;
  height: 371px;
  background-image: url(../png/object_conveyor3.png);
  left: calc(50% - 1800px);
  top: 475px;
  z-index: 15;
}
.sec.sec2 .deco.cnv3 {
  width: 675px;
  height: 454px;
  background-image: url(../png/object_conveyor2.png);
  left: calc(50% + 365px);
  top: 1190px;
  z-index: 15;
}
.sec.sec2 .deco.cnv4 {
  width: 614px;
  height: 371px;
  background-image: url(../png/object_conveyor3.png);
  left: calc(50% - 50px);
  top: 2840px;
  z-index: 15;
}
.sec.sec2 .deco.cnv5 {
  width: 614px;
  height: 371px;
  background-image: url(../png/object_conveyor3.png);
  left: calc(50% + 505px);
  top: 3165px;
  z-index: 15;
}
.sec.sec2 .deco.cnv6 {
  width: 614px;
  height: 371px;
  background-image: url(../png/object_conveyor3.png);
  left: calc(50% + 1060px);
  top: 3495px;
  z-index: 15;
}
.sec.sec2 .deco.cnv7 {
  width: 614px;
  height: 371px;
  background-image: url(../png/object_conveyor4.png);
  left: calc(50% - 1400px);
  top: 3550px;
  z-index: 15;
}
.sec.sec2 .deco.cnv8 {
  width: 889px;
  height: 535px;
  background-image: url(../png/object_conveyor1.png);
  left: calc(50% + 670px);
  top: 3970px;
}
.sec.sec2 .deco.box1 {
  width: 531px;
  height: 419px;
  background-image: url(../png/object_box1.png);
  left: calc(50% - 1305px);
  top: 745px;
  z-index: 15;
}
.sec.sec2 .deco.box2 {
  width: 531px;
  height: 419px;
  background-image: url(../png/object_box1.png);
  left: calc(50% + 950px);
  top: 1740px;
  z-index: 15;
}
.sec.sec2 .deco.box3 {
  width: 1008px;
  height: 692px;
  background-image: url(../png/object_box2.png);
  left: calc(50% + 340px);
  top: 2670px;
}
.sec.sec2 .deco.box4 {
  width: 531px;
  height: 419px;
  background-image: url(../png/object_box1.png);
  left: calc(50% - 1380px);
  top: 3110px;
  z-index: 15;
}
.sec.sec2 .deco.box5 {
  width: 531px;
  height: 419px;
  background-image: url(../png/object_box1.png);
  left: calc(50% + 800px);
  top: 4280px;
  z-index: 15;
}
.sec.sec2 .deco.mecha3 {
  width: 147px;
  height: 188px;
  background-image: url(../png/object_machine2.png);
  left: calc(50% - 580px);
  top: 410px;
  z-index: 15;
}
.sec.sec2 .deco.mecha4 {
  width: 154px;
  height: 163px;
  background-image: url(../png/object_machine3.png);
  left: calc(50% + 240px);
  top: 960px;
}
.sec.sec2 .deco.mecha5 {
  width: 126px;
  height: 166px;
  background-image: url(../png/object_machine5.png);
  left: calc(50% - 1460px);
  bottom: 1140px;
}
.sec.sec2 .deco.mecha6 {
  width: 126px;
  height: 166px;
  background-image: url(../png/object_machine5.png);
  left: calc(50% - 880px);
  bottom: 800px;
  z-index: 10;
}
.sec.sec2 .deco.mecha7 {
  width: 126px;
  height: 166px;
  background-image: url(../png/object_machine5.png);
  left: calc(50% - 355px);
  bottom: 495px;
}
.sec.sec2 .deco.car1 {
  width: 1420px;
  height: 876px;
  background-image: url(../png/object_car1.png);
  left: calc(50% - 1470px);
  top: 1450px;
}
.sec.sec2 .deco.car1::before {
  content: "";
  width: 200px;
  height: 200px;
  background-image: url(../gif/object_man5.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: calc(50% - 295px);
  left: calc(50% + 195px);
}
.sec.sec2 .deco.car2 {
  width: 672px;
  height: 404px;
  background-image: url(../png/object_car2.png);
  left: calc(50% - 1310px);
  bottom: 900px;
}
.sec.sec2::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../svg/lineset2.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 3000px 6090px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  pointer-events: none;
}
.sec.sec2 .special {
  width: 100%;
  position: absolute;
  top: 1624px;
  left: 0px;
}
.sec.sec2 .special .inner {
  text-align: left;
  width: 2082px;
  height: 1212px;
  padding: 0 780px 0 280px;
  background-image: url(../svg/bg_special.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  left: calc(50% - 830px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.sec.sec2 .special .inner .title h3 {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 7.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  margin-bottom: 10px;
}
.sec.sec2 .special .inner .title p {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
.sec.sec2 .special .inner .line {
  width: 350px;
}
.sec.sec2 .special .inner .line:nth-child(2) {
  margin-left: 70px;
}
.sec.sec2 .special .inner .line:nth-child(3) {
  margin-left: 10px;
}
.sec.sec2 .special .inner .line .box {
  width: 100%;
  background-color: #FFF;
  pointer-events: auto;
}
.sec.sec2 .special .inner .line .box:not(:last-child) {
  margin-bottom: 10px;
}
.sec.sec2 .special .inner .line .box a {
  width: 100%;
  padding-bottom: 30px;
  display: block;
}
.sec.sec2 .special .inner .line .box a dl {
  width: 100%;
  transition: all 0.25s ease-in 0s;
}
.sec.sec2 .special .inner .line .box a dl dt {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.sec.sec2 .special .inner .line .box a dl dd {
  width: calc(100% - 15px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.sec.sec2 .special .inner .line .box a dl dd::before {
  content: "";
  width: 14px;
  height: 26px;
  background-color: #51489d;
  display: block;
}
.sec.sec2 .special .inner .line .box a dl dd::after {
  content: "";
  width: 10px;
  height: 14px;
  background-image: url(../svg/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: auto;
  display: block;
}
.sec.sec2 .special .inner .line .box a dl dd span {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-left: 10px;
}
.sec.sec2 .special .inner .line .box a:hover dl {
  opacity: 0.7;
}
.sec.sec2 .work {
  width: 1080px;
  position: absolute;
  top: 2650px;
  left: calc(50% - 540px);
  z-index: 10;
}
.sec.sec2 .work .inner {
  text-align: left;
  width: 100%;
}
.sec.sec2 .work .inner .title {
  margin-bottom: 100px;
}
.sec.sec2 .work .inner .title h3 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 7.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  margin-bottom: 10px;
}
.sec.sec2 .work .inner .title p {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
}
.sec.sec2 .work .inner .line {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
.sec.sec2 .work .inner .line:not(:last-child) {
  margin-bottom: 100px;
}
.sec.sec2 .work .inner .line .box {
  width: 520px;
  pointer-events: auto;
}
.sec.sec2 .work .inner .line .box a {
  width: 100%;
  background-color: #51489d;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 10px 10px 10px;
  box-sizing: border-box;
  transition: all 0.25s ease-in 0s;
}
.sec.sec2 .work .inner .line .box a dl {
  width: 100%;
}
.sec.sec2 .work .inner .line .box a dl dt {
  width: 100%;
  padding: 0 20px;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
}
.sec.sec2 .work .inner .line .box a dl dt span {
  display: inline-block;
}
.sec.sec2 .work .inner .line .box a dl dt span:nth-child(1) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-bottom: 20px;
}
.sec.sec2 .work .inner .line .box a dl dt span:nth-child(2) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  padding: 5px;
  border: solid 1px #FFF;
}
.sec.sec2 .work .inner .line .box a dl dd {
  width: 100%;
  background-color: #FFF;
}
.sec.sec2 .work .inner .line .box a:hover {
  background-color: rgba(81, 72, 157, 0.95);
}
.sec.sec2 .work .inner .project,
.sec.sec2 .work .inner .culture {
  width: 100%;
}
.sec.sec2 .work .inner .project:not(:last-child),
.sec.sec2 .work .inner .culture:not(:last-child) {
  margin-bottom: 100px;
}
.sec.sec2 .work .inner .project h4,
.sec.sec2 .work .inner .culture h4 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  text-align: center;
  margin-bottom: 10px;
}
.sec.sec2 .work .inner .project h5,
.sec.sec2 .work .inner .culture h5 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  text-align: center;
  margin-bottom: 40px;
}
.sec.sec2 .work .inner .project .box,
.sec.sec2 .work .inner .culture .box {
  width: 100%;
  pointer-events: auto;
}
.sec.sec2 .work .inner .project .box:not(:last-child),
.sec.sec2 .work .inner .culture .box:not(:last-child) {
  margin-bottom: 35px;
}
.sec.sec2 .work .inner .project .box a,
.sec.sec2 .work .inner .culture .box a {
  width: 100%;
  padding: 10px;
  background-color: #51489d;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.25s ease-in 0s;
  position: relative;
}
.sec.sec2 .work .inner .project .box a::after,
.sec.sec2 .work .inner .culture .box a::after {
  content: "VIEW MORE";
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  width: 84px;
  height: 28px;
  border: solid 1px #FFF;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
  bottom: 10px;
}
.sec.sec2 .work .inner .project .box a > div,
.sec.sec2 .work .inner .culture .box a > div {
  width: 50%;
}
.sec.sec2 .work .inner .project .box a dl,
.sec.sec2 .work .inner .culture .box a dl {
  width: 50%;
  padding: 0 55px;
  position: relative;
  box-sizing: border-box;
}
.sec.sec2 .work .inner .project .box a dl dt,
.sec.sec2 .work .inner .culture .box a dl dt {
  width: 100%;
  padding: 0px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
}
.sec.sec2 .work .inner .project .box a dl dt span,
.sec.sec2 .work .inner .culture .box a dl dt span {
  display: inline-block;
}
.sec.sec2 .work .inner .project .box a dl dt span:nth-child(1),
.sec.sec2 .work .inner .culture .box a dl dt span:nth-child(1) {
  color: #51489d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  background-color: #FFF;
  padding: 5px;
  margin-bottom: 0px;
}
.sec.sec2 .work .inner .project .box a dl dt span:nth-child(2),
.sec.sec2 .work .inner .culture .box a dl dt span:nth-child(2) {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  position: absolute;
  right: 10px;
  top: 6px;
}
.sec.sec2 .work .inner .project .box a dl dd,
.sec.sec2 .work .inner .culture .box a dl dd {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 3.8rem;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
.sec.sec2 .work .inner .project .box a:hover,
.sec.sec2 .work .inner .culture .box a:hover {
  background-color: rgba(81, 72, 157, 0.95);
}
.sec.sec2 .work .inner .project .box:nth-child(4) a::after,
.sec.sec2 .work .inner .culture .box:nth-child(4) a::after {
  right: 560px;
}
.sec.sec2 .work .inner .project .box:nth-child(4) a > div,
.sec.sec2 .work .inner .culture .box:nth-child(4) a > div {
  order: 2;
}
.sec.sec2 .work .inner .project .box:nth-child(4) a dl,
.sec.sec2 .work .inner .culture .box:nth-child(4) a dl {
  order: 1;
}
.sec.sec2 .work .inner .project .box:nth-child(4) a dl dt span:nth-child(2),
.sec.sec2 .work .inner .culture .box:nth-child(4) a dl dt span:nth-child(2) {
  right: 20px;
}
.sec.sec2 .world {
  width: 100%;
  height: 820px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0px;
  bottom: 180px;
}
.sec.sec2 .world::before {
  content: "";
  width: 1544px;
  height: 820px;
  background-image: url(../png/bg_world.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -40px;
  left: calc(50% - 760px);
  z-index: -1;
  display: block;
}
.sec.sec2 .world a {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  pointer-events: auto;
  transition: all 0.25s ease-in 0s;
}
.sec.sec2 .world a:hover {
  opacity: 0.7;
}
.sec.sec2 .world a h4 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  margin-bottom: 25px;
}
.sec.sec2 .world a .btn {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  padding: 5px;
  border: solid 1px #000;
}
.sec.sec2 .foot {
  width: 1120px;
  position: absolute;
  bottom: 40px;
  left: calc(50% - 560px);
}
.sec.sec2 .foot .inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.sec.sec2 .foot .inner .pgtop {
  margin-bottom: 40px;
}
.sec.sec2 .foot .inner .pgtop a {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  pointer-events: auto;
  transition: all 0.25s ease-in 0s;
}
.sec.sec2 .foot .inner .pgtop a:hover {
  opacity: 0.7;
}
.sec.sec2 .foot .inner .pgtop a::before {
  content: "";
  width: 1px;
  height: 35px;
  background-color: #000;
  margin-bottom: 10px;
  display: block;
}
.sec.sec2 .foot .inner .logoset {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.sec.sec2 .foot .inner .logoset .logo {
  width: 136px;
  margin-bottom: 20px;
}
.sec.sec2 .foot .inner .logoset .logo span {
  width: 136px;
  height: 42px;
  background-image: url(../svg/logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: left;
  text-indent: 999%;
  line-height: 1;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  display: block;
}
.sec.sec2 .foot .inner .logoset .link {
  margin-left: 40px;
}
.sec.sec2 .foot .inner .logoset .link ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sec.sec2 .foot .inner .logoset .link ul li:not(:first-child) {
  margin-left: 20px;
}
.sec.sec2 .foot .inner .logoset .link ul li a {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  pointer-events: auto;
}
.sec.sec2 .foot .inner .logoset .link ul li a:hover {
  color: #51489d;
}
.sec.sec2 .foot .inner .logoset .link .cp {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0em;
  font-feature-settings: "palt";
  text-align: left;
}

/* --------------------------------------- Media Queries Smartphone ---------------------------------- */
@media screen and (max-width: 768px) {
  @keyframes scroll {
    0% {
      height: 90px;
      top: -90px;
    }
    80% {
      height: 90px;
      top: 90px;
    }
    100% {
      height: 90px;
      top: 90px;
    }
  }
  #loader .logo {
    width: 136px;
    height: 42px;
    top: calc(50% - 21px);
    left: calc(50% - 68px);
  }
  #loader .bar span {
    height: 10px;
  }

  body .scroll {
    left: 10px;
    bottom: 20px;
    z-index: 20;
  }
  body .scroll div {
    width: 1px;
    height: 90px;
  }
  body .scroll div span {
    animation: scroll 1s infinite;
  }

  main {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .sec {
    /* sec1 */
    /* sec2 */
  }
  .sec.sec1 {
    width: 100%;
    height: 2465px;
    overflow: hidden;
  }
  .sec.sec1 .deco {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    z-index: 5;
    pointer-events: none;
  }
  .sec.sec1 .deco.obj1 {
    width: 122px;
    height: 110px;
    left: calc(50% - 500px);
    top: -25px;
  }
  .sec.sec1 .deco.obj2 {
    width: 122px;
    height: 110px;
    left: calc(50% + 50px);
    top: 300px;
  }
  .sec.sec1 .deco.obj3 {
    width: 122px;
    height: 110px;
    left: calc(50% - 125px);
    top: 453px;
  }
  .sec.sec1 .deco.obj4 {
    width: 38px;
    height: 68px;
    left: calc(50% + 483px);
    top: 863px;
  }
  .sec.sec1 .deco.mecha1 {
    width: 89px;
    height: 70px;
    left: calc(50% + 170px);
    top: 1600px;
  }
  .sec.sec1 .deco.mecha2 {
    width: 106px;
    height: 131px;
    left: calc(50% - 18px);
    top: 1625px;
    z-index: 15;
  }
  .sec.sec1 .deco.man1 {
    width: 48px;
    height: 50px;
    top: 60px;
    left: calc(50% - 10px);
  }
  .sec.sec1 .deco.man2 {
    width: 42px;
    height: 49px;
    top: 280px;
    left: calc(50% + 130px);
  }
  .sec.sec1 .deco.man3 {
    width: 42px;
    height: 49px;
    top: 1620px;
    left: calc(50% + 80px);
  }
  .sec.sec1 .deco.man4 {
    width: 42px;
    height: 50px;
    top: 723px;
    left: calc(50% - 480px);
  }
  .sec.sec1 .deco.cnv1 {
    width: 445px;
    height: 268px;
    top: 798px;
    left: calc(50% - 865px);
  }
  .sec.sec1::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../svg/lineset1_1.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1500px 1550px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
    pointer-events: none;
  }
  .sec.sec1 .inner {
    max-width: 100%;
  }
  .sec.sec1 .inner .block.head {
    width: 100%;
    position: relative;
  }
  .sec.sec1 .inner .block.head h2 {
    width: 169px;
    height: 68px;
    background-image: url(../svg/catch-2.svg);
    top: 150px;
    left: calc(50% - 0px);
  }
  .sec.sec1 .inner .block.head::before {
    content: "";
    width: 100vw;
    height: 2px;
    background-color: #51489d;
    position: absolute;
    left: calc(50% + 28px);
    top: 429px;
    z-index: 10;
    display: block;
    transform: rotate(31deg);
    transform-origin: left top;
  }
  .sec.sec1 .inner .block.head::after {
    content: "";
    width: 100vw;
    height: 4px;
    background-color: #51489d;
    position: absolute;
    left: calc(50% + 98px);
    top: calc(50vw + 85px);
    z-index: 10;
    display: block;
    transform: rotate(-31deg);
    transform-origin: right bottom;
  }
  .sec.sec1 .inner .block.head .photo.p1 {
    width: 325px;
    height: 188px;
    top: -25px;
    left: calc(50% - 339px);
  }
  .sec.sec1 .inner .block.head .photo.p2 {
    width: 650px;
    height: 378px;
    top: 134px;
    left: calc(50% - 1000px);
    display: none;
  }
  .sec.sec1 .inner .block.head .photo.p2 span {
    background-image: url(../jpg/photo_head2.jpg);
  }
  .sec.sec1 .inner .block.head .photo.p3 {
    width: 203px;
    height: 118px;
    top: 163px;
    left: calc(50% - 277px);
  }
  .sec.sec1 .inner .block.head .photo.p3 span {
    background-image: url(../jpg/photo_head3_sp.jpg);
  }
  .sec.sec1 .inner .block.head .photo.p4 {
    width: 459px;
    height: 267px;
    top: 222px;
    left: calc(50% - 302px);
  }
  .sec.sec1 .inner .block.head .photo.p5 {
    width: 187px;
    height: 109px;
    top: 304px;
    left: calc(50% + 155px);
  }
  .sec.sec1 .inner .block.head .photo.p6 {
    width: 258px;
    height: 150px;
    top: 356px;
    left: calc(50% + 27px);
  }
  .sec.sec1 .inner .block.message {
    width: calc(100% - 60px);
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: 610px;
    left: 40px;
    z-index: 2;
  }
  .sec.sec1 .inner .block.message ul {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    order: 2;
  }
  .sec.sec1 .inner .block.message ul.photos {
    width: 100%;
  }
  .sec.sec1 .inner .block.message ul.photos li {
    height: calc((100vw - 60px) / 2 * 0.75);
    background-repeat: no-repeaat;
    background-position: center;
    background-size: cover;
  }
  .sec.sec1 .inner .block.message ul.photos li img {
    display: none;
  }
  .sec.sec1 .inner .block.message ul.photos li:nth-child(1) {
    width: 60%;
    margin: 0 0 5px 0;
    background-image: url(../jpg/photo_message1.jpg);
  }
  .sec.sec1 .inner .block.message ul.photos li:nth-child(2) {
    width: calc(40% - 5px);
    margin: 0 0 5px 5px;
    background-image: url(../jpg/photo_message2.jpg);
  }
  .sec.sec1 .inner .block.message ul.photos li:nth-child(3) {
    width: calc(40% - 5px);
    background-image: url(../jpg/photo_message4.jpg);
  }
  .sec.sec1 .inner .block.message ul.photos li:nth-child(4) {
    width: 60%;
    margin: 0 0 0 5px;
    background-image: url(../jpg/photo_message3.jpg);
  }
  .sec.sec1 .inner .block.message .text {
    width: 100%;
    margin: 0 0 20px 0;
    order: 1;
  }
  .sec.sec1 .inner .block.message .text h3 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
  }
  .sec.sec1 .inner .block.message .text h3:not(:last-child) {
    margin-bottom: 10px;
  }
  .sec.sec1 .inner .block.message .text dl dt {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
    margin-bottom: 20px;
  }
  .sec.sec1 .inner .block.message .text dl dd p {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.4rem;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    text-align: justify;
    font-feature-settings: "palt";
  }
  .sec.sec1 .inner .block.message .text dl dd p:not(:last-child) {
    margin-bottom: 10px;
  }
  .sec.sec1 .inner .block.message .text dl dd p br {
    display: none;
  }
  .sec.sec1 .inner .block.about {
    width: calc(100% - 20px);
    top: 1640px;
    left: 20px;
  }
  .sec.sec1 .inner .block.about::before {
    content: "";
    width: 1500px;
    height: 1550px;
    background-image: url(../svg/lineset1_2.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1500px 1550px;
    position: absolute;
    left: calc(50% - 750px - 10px);
    top: -1000px;
    z-index: 1;
    pointer-events: none;
  }
  .sec.sec1 .inner .block.about .title h3 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
    margin-bottom: 10px;
  }
  .sec.sec1 .inner .block.about .title p {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  .sec.sec1 .inner .block.about .link a {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.6rem;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
  }
  .sec.sec1 .inner .block.about .link a:hover {
    background-size: 100% auto;
    opacity: 1;
  }
  .sec.sec1 .inner .block.about .link a span {
    width: 80px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 29px 33px;
  }
  .sec.sec1 .inner .block.about .link.l1 {
    width: 585px;
    height: 340px;
    top: 42px;
    left: calc(50% - 184px);
  }
  .sec.sec1 .inner .block.about .link.l1 a {
    text-align: center;
    background-image: url(../jpg/photo_about1.jpg);
    justify-content: center;
  }
  .sec.sec1 .inner .block.about .link.l1 a strong {
    position: relative;
    transform: translateX(-20px);
  }
  .sec.sec1 .inner .block.about .link.l2 {
    width: 250px;
    height: 145px;
    top: 335px;
    left: calc(50% - 180px);
  }
  .sec.sec1 .inner .block.about .link.l3 {
    width: 250px;
    height: 145px;
    top: 522px;
    left: calc(50% - 252px);
  }
  .sec.sec1 .inner .block.about .link.l3 a {
    justify-content: flex-end;
  }
  .sec.sec1 .inner .block.about .link.l3 a span {
    background-position: left 10px center;
  }
  .sec.sec1 .inner .block.about .link.l4 {
    width: 250px;
    height: 145px;
    top: 631px;
    left: calc(50% - 64px);
  }
  .sec.sec1 .inner .block.about .ltext {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    text-align: right;
    transform: rotate(30.5deg);
  }
  .sec.sec1 .inner .block.about .ltext.text-l2 {
    top: 350px;
    left: calc(50% - 180px + 130px);
  }
  .sec.sec1 .inner .block.about .ltext.text-l3 {
    top: 522px;
    left: calc(50% - 252px + 152px);
  }
  .sec.sec1 .inner .block.about .ltext.text-l4 {
    top: 631px;
    left: calc(50% - 64px + 140px);
  }
  .sec.sec2 {
    width: 100%;
    height: 3900px;
    margin-top: -820px;
  }
  .sec.sec2 .deco.obj5 {
    width: 38px;
    height: 68px;
    left: calc(50% + 645px);
    top: 55px;
  }
  .sec.sec2 .deco.obj6 {
    width: 38px;
    height: 68px;
    left: calc(50% + 70px);
    top: 390px;
  }
  .sec.sec2 .deco.obj7 {
    width: 38px;
    height: 68px;
    left: calc(50% + 477px);
    top: 375px;
  }
  .sec.sec2 .deco.obj8 {
    width: 30px;
    height: 57px;
    left: calc(50% + 65px);
    top: 1417px;
    z-index: 20;
  }
  .sec.sec2 .deco.man5 {
    width: 78px;
    height: 68px;
    left: calc(50% - 687px);
    top: 250px;
  }
  .sec.sec2 .deco.man6 {
    width: 78px;
    height: 68px;
    left: calc(50% + 90px);
    top: 830px;
  }
  .sec.sec2 .deco.man7 {
    width: 42px;
    height: 49px;
    left: calc(50% + 40px);
    top: 1350px;
  }
  .sec.sec2 .deco.man8 {
    width: 41px;
    height: 49px;
    left: calc(50% - 660px);
    top: 1700px;
  }
  .sec.sec2 .deco.cnv2 {
    width: 307px;
    height: 185px;
    left: calc(50% - 900px);
    top: 237px;
    z-index: 15;
  }
  .sec.sec2 .deco.cnv3 {
    width: 338px;
    height: 227px;
    left: calc(50% - 0px);
    top: 420px;
    z-index: 15;
  }
  .sec.sec2 .deco.cnv4 {
    width: 307px;
    height: 186px;
    left: calc(50% + 60px);
    top: 1460px;
    z-index: 15;
  }
  .sec.sec2 .deco.cnv5 {
    width: 307px;
    height: 186px;
    left: calc(50% + 253px);
    top: 1583px;
    z-index: 15;
  }
  .sec.sec2 .deco.cnv6 {
    width: 307px;
    height: 186px;
    left: calc(50% + 530px);
    top: 1748px;
    z-index: 15;
  }
  .sec.sec2 .deco.cnv7 {
    width: 307px;
    height: 186px;
    left: calc(50% - 700px);
    top: 1775px;
    z-index: 15;
  }
  .sec.sec2 .deco.cnv8 {
    width: 445px;
    height: 268px;
    left: calc(50% + 335px);
    top: 1985px;
  }
  .sec.sec2 .deco.box1 {
    width: 240px;
    height: 189px;
    left: calc(50% - 330px);
    top: 580px;
    z-index: 15;
  }
  .sec.sec2 .deco.box2 {
    width: 531px;
    height: 419px;
    background-image: url(../png/object_box1.png);
    left: calc(50% + 950px);
    top: 1740px;
    z-index: 15;
  }
  .sec.sec2 .deco.box3 {
    width: 1008px;
    height: 692px;
    background-image: url(../png/object_box2.png);
    left: calc(50% + 340px);
    top: 2670px;
    display: none;
  }
  .sec.sec2 .deco.box4 {
    width: 531px;
    height: 419px;
    background-image: url(../png/object_box1.png);
    left: calc(50% - 1380px);
    top: 3110px;
    z-index: 15;
    display: none;
  }
  .sec.sec2 .deco.box5 {
    width: 266px;
    height: 210px;
    background-image: url(../png/object_box1.png);
    left: calc(50% + 150px);
    top: 2100px;
    z-index: 0;
  }
  .sec.sec2 .deco.mecha3 {
    width: 147px;
    height: 188px;
    background-image: url(../png/object_machine2.png);
    left: calc(50% - 580px);
    top: 410px;
    z-index: 15;
  }
  .sec.sec2 .deco.mecha4 {
    width: 154px;
    height: 163px;
    background-image: url(../png/object_machine3.png);
    left: calc(50% + 240px);
    top: 960px;
  }
  .sec.sec2 .deco.mecha5 {
    width: 63px;
    height: 83px;
    background-image: url(../png/object_machine5.png);
    left: calc(50% - 1460px);
    bottom: 1140px;
    display: none;
  }
  .sec.sec2 .deco.mecha6 {
    width: 63px;
    height: 83px;
    background-image: url(../png/object_machine5.png);
    left: -40px;
    bottom: 730px;
    z-index: 10;
  }
  .sec.sec2 .deco.mecha7 {
    width: 126px;
    height: 166px;
    background-image: url(../png/object_machine5.png);
    left: calc(50% - 355px);
    bottom: 495px;
    display: none;
  }
  .sec.sec2 .deco.car1 {
    width: 1420px;
    height: 876px;
    background-image: url(../png/object_car1.png);
    left: calc(50% - 1410px);
    top: 1380px;
  }
  .sec.sec2 .deco.car2 {
    width: 672px;
    height: 404px;
    background-image: url(../png/object_car2.png);
    left: calc(50% - 750px);
    bottom: 770px;
  }
  .sec.sec2::before {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1500px 3045px;
  }
  .sec.sec2 .special {
    top: 812px;
  }
  .sec.sec2 .special .inner {
    text-align: left;
    width: 1041px;
    height: 606px;
    padding: 0 0px 0 228px;
    background-image: url(../svg/bg_special.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    left: calc(50% - 415px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .sec.sec2 .special .inner .title {
    width: 100%;
    padding-top: 40px;
    margin-bottom: 60px;
  }
  .sec.sec2 .special .inner .title h3 {
    color: #51489d;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
    margin-bottom: 10px;
  }
  .sec.sec2 .special .inner .title p {
    color: #51489d;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  .sec.sec2 .special .inner .line {
    width: calc(50vw - 20px);
  }
  .sec.sec2 .special .inner .line:nth-child(2) {
    margin-left: 0px;
  }
  .sec.sec2 .special .inner .line:nth-child(3) {
    margin-left: 10px;
    transform: translateY(-60px);
  }
  .sec.sec2 .special .inner .line .box {
    width: 100%;
    background-color: #FFF;
    pointer-events: auto;
  }
  .sec.sec2 .special .inner .line .box:not(:last-child) {
    margin-bottom: 10px;
  }
  .sec.sec2 .special .inner .line .box a {
    width: 100%;
    padding-bottom: 15px;
    display: block;
  }
  .sec.sec2 .special .inner .line .box a dl {
    width: 100%;
    transition: all 0.25s ease-in 0s;
  }
  .sec.sec2 .special .inner .line .box a dl dt {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .sec.sec2 .special .inner .line .box a dl dd {
    width: calc(100% - 5px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .sec.sec2 .special .inner .line .box a dl dd::before {
    width: 7px;
    height: 13px;
  }
  .sec.sec2 .special .inner .line .box a dl dd::after {
    width: 7px;
    height: 10px;
    margin-left: auto;
  }
  .sec.sec2 .special .inner .line .box a dl dd span {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.6rem;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    width: calc(100% - 30px);
    margin-left: 10px;
  }
  .sec.sec2 .special .inner .line .box a dl dd span br {
    display: none;
  }
  .sec.sec2 .special .inner .line .box a:hover dl {
    opacity: 1;
  }
  .sec.sec2 .work {
    width: calc(100% - 40px);
    position: absolute;
    top: 1570px;
    left: 20px;
  }
  .sec.sec2 .work .inner {
    text-align: left;
    width: 100%;
  }
  .sec.sec2 .work .inner .title {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .sec.sec2 .work .inner .title h3 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
    text-align: center;
    margin-bottom: 10px;
  }
  .sec.sec2 .work .inner .title h3 br {
    display: none;
  }
  .sec.sec2 .work .inner .title p {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    text-align: center;
  }
  .sec.sec2 .work .inner .line {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .sec.sec2 .work .inner .line:not(:last-child) {
    margin: 0 0 40px 0;
  }
  .sec.sec2 .work .inner .line:last-child {
    margin: 0 0 20px 0;
  }
  .sec.sec2 .work .inner .line .box {
    width: calc((100% - 10px) / 2);
  }
  .sec.sec2 .work .inner .line .box a {
    padding: 10px 5px 5px 5px;
  }
  .sec.sec2 .work .inner .line .box a dl dt {
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
  }
  .sec.sec2 .work .inner .line .box a dl dt span {
    display: inline-block;
  }
  .sec.sec2 .work .inner .line .box a dl dt span:nth-child(1) {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    margin-bottom: 20px;
  }
  .sec.sec2 .work .inner .line .box a dl dt span:nth-child(2) {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  .sec.sec2 .work .inner .line .box a dl dd {
    width: 100%;
    background-color: #FFF;
  }
  .sec.sec2 .work .inner .line .box a:hover {
    background-color: #51489d;
  }
  .sec.sec2 .work .inner .project,
.sec.sec2 .work .inner .culture {
    width: 100%;
  }
  .sec.sec2 .work .inner .project:not(:last-child),
.sec.sec2 .work .inner .culture:not(:last-child) {
    margin-bottom: 40px;
  }
  .sec.sec2 .work .inner .project h4,
.sec.sec2 .work .inner .culture h4 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
    text-align: center;
    margin-bottom: 10px;
  }
  .sec.sec2 .work .inner .project h5,
.sec.sec2 .work .inner .culture h5 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    text-align: center;
    margin-bottom: 20px;
  }
  .sec.sec2 .work .inner .project .box,
.sec.sec2 .work .inner .culture .box {
    width: 100%;
    pointer-events: auto;
  }
  .sec.sec2 .work .inner .project .box:not(:last-child),
.sec.sec2 .work .inner .culture .box:not(:last-child) {
    margin-bottom: 20px;
  }
  .sec.sec2 .work .inner .project .box a,
.sec.sec2 .work .inner .culture .box a {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .sec.sec2 .work .inner .project .box a::after,
.sec.sec2 .work .inner .culture .box a::after {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    width: auto;
    height: auto;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    right: auto;
    bottom: auto;
    left: 10px;
  }
  .sec.sec2 .work .inner .project .box a > div,
.sec.sec2 .work .inner .culture .box a > div {
    width: 100%;
    margin-bottom: 10px;
  }
  .sec.sec2 .work .inner .project .box a dl,
.sec.sec2 .work .inner .culture .box a dl {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .sec.sec2 .work .inner .project .box a dl dt,
.sec.sec2 .work .inner .culture .box a dl dt {
    width: 100%;
    padding: 0px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
  }
  .sec.sec2 .work .inner .project .box a dl dt span,
.sec.sec2 .work .inner .culture .box a dl dt span {
    display: inline-block;
  }
  .sec.sec2 .work .inner .project .box a dl dt span:nth-child(1),
.sec.sec2 .work .inner .culture .box a dl dt span:nth-child(1) {
    color: #51489d;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    background-color: #FFF;
    padding: 5px;
    margin-bottom: 5px;
  }
  .sec.sec2 .work .inner .project .box a dl dt span:nth-child(2),
.sec.sec2 .work .inner .culture .box a dl dt span:nth-child(2) {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    position: relative;
    top: auto;
    right: auto;
  }
  .sec.sec2 .work .inner .project .box a dl dd,
.sec.sec2 .work .inner .culture .box a dl dd {
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2.4rem;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  .sec.sec2 .work .inner .project .box a:hover,
.sec.sec2 .work .inner .culture .box a:hover {
    background-color: #51489d;
  }
  .sec.sec2 .work .inner .project .box:nth-child(4) a::after,
.sec.sec2 .work .inner .culture .box:nth-child(4) a::after {
    right: auto;
    order: 3;
  }
  .sec.sec2 .work .inner .project .box:nth-child(4) a > div,
.sec.sec2 .work .inner .culture .box:nth-child(4) a > div {
    order: 1;
  }
  .sec.sec2 .work .inner .project .box:nth-child(4) a dl,
.sec.sec2 .work .inner .culture .box:nth-child(4) a dl {
    order: 2;
  }
  .sec.sec2 .work .inner .project .box:nth-child(4) a dl dt span:nth-child(2),
.sec.sec2 .work .inner .culture .box:nth-child(4) a dl dt span:nth-child(2) {
    right: auto;
  }
  .sec.sec2 .world {
    width: 100%;
    height: 410px;
    left: 0px;
    bottom: 140px;
  }
  .sec.sec2 .world::before {
    content: "";
    width: 772px;
    height: 410px;
    top: -20px;
    left: calc(50% - 386px);
  }
  .sec.sec2 .world a:hover {
    opacity: 1;
  }
  .sec.sec2 .world a h4 {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
    margin-bottom: 20px;
  }
  .sec.sec2 .world a .btn {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    padding: 10px;
  }
  .sec.sec2 .foot {
    width: calc(100% - 40px);
    position: absolute;
    bottom: 40px;
    left: 20px;
  }
  .sec.sec2 .foot .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .sec.sec2 .foot .inner .pgtop {
    margin-bottom: 20px;
  }
  .sec.sec2 .foot .inner .pgtop a {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
  }
  .sec.sec2 .foot .inner .pgtop a:hover {
    opacity: 1;
  }
  .sec.sec2 .foot .inner .pgtop a::before {
    content: "";
    width: 1px;
    height: 35px;
    background-color: #000;
    margin-bottom: 10px;
    display: block;
  }
  .sec.sec2 .foot .inner .logoset {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .sec.sec2 .foot .inner .logoset .logo {
    width: 81px;
    margin-bottom: 20px;
  }
  .sec.sec2 .foot .inner .logoset .logo a {
    width: 81px;
    height: 25px;
    background-image: url(../svg/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: left;
    text-indent: 999%;
    line-height: 1;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    display: block;
    pointer-events: auto;
  }
  .sec.sec2 .foot .inner .logoset .link {
    width: 100%;
    margin-left: 0px;
  }
  .sec.sec2 .foot .inner .logoset .link ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 10px;
  }
  .sec.sec2 .foot .inner .logoset .link ul li:not(:first-child) {
    margin-left: 20px;
  }
  .sec.sec2 .foot .inner .logoset .link ul li a {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    pointer-events: auto;
  }
  .sec.sec2 .foot .inner .logoset .link ul li a:hover {
    color: #51489d;
  }
}
@media screen and (max-width: 394px) {
  .sec {
    /* sec1 */
    /* sec2 */
  }
  .sec.sec1 {
    height: 2365px;
  }
  .sec.sec1 .deco.man3 {
    top: 1520px;
  }
  .sec.sec1 .deco.mecha1 {
    top: 1500px;
  }
  .sec.sec1 .deco.mecha2 {
    top: 1525px;
  }
  .sec.sec1 .inner .block.head::after {
    left: calc(50% + 102px);
    top: calc(50vw + 106px);
  }
  .sec.sec1 .inner .block.message {
    top: 635px;
  }
  .sec.sec1 .inner .block.about {
    top: 1540px;
  }
  .sec.sec2 {
    height: 3760px;
  }
  .sec.sec2 .special .inner {
    padding-left: 238px;
  }
}
@media screen and (max-width: 375px) {
  .sec {
    /* sec1 */
    /* sec2 */
  }
  .sec.sec1 .inner .block.head::after {
    left: calc(50% + 104px);
    top: 312px;
  }
  .sec.sec2 {
    height: 3800px;
  }
  .sec.sec2 .special .inner {
    padding-left: 248px;
  }
  .sec.sec2 .world {
    bottom: 140px;
  }
}

/*# sourceMappingURL=style_home.css.map */