@charset "UTF-8";
/* =====================
  変数
===================== */
:root {
  --inner-width: 100%;
}

/* =====================
  共通
===================== */
.main {
  padding-top: 16vw;
}
.inner {
  width: var(--inner-width);
  margin-inline: auto;
  padding-inline: 4.666666666666667vw;
}
.main-inner {
  background: var(--black);
  padding-bottom: 27vw;
}
.tecs .title-wrapper span::before {
  background: var(--white);
}
.all-wrap {
  position: relative;
  background: var(--black);
  overflow: hidden;
}
.main .all-wrap[data-id='1'] .bg {
  pointer-events: none;
  position: absolute;
  top: 33vw;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(/assets/image/common/bg.png);
  width: 100%;
  height: 284vw;
  transform: skewY(-10deg);
  z-index: 1;
}
.main .all-wrap[data-id='2'] .bg {
  pointer-events: none;
  position: absolute;
  top: 11vw;
  left: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background: var(--red);
  width: 100%;
  height: 212vw;
  transform: skewY(10deg);
  z-index: 1;
}
.main .all-wrap[data-id='2'] .bg::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/pm.png');
  width: 747px;
  height: 630px;
  display: block;
  transform: skewY(-10deg);
  top: -22px;
  left: 0;
  position: absolute;
}

/* =====================
  mv
===================== */
.main .mv {
  background: var(--black);
  min-height: 98.26666666666667vw;
  overflow: hidden;
  padding-top: 0;
  position: relative;
}
.main .mv .mv-bg {
  background-image: url('/assets/image/top/mv_bg_2x.png');
  height: 145.86666666666667vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.mv .mv-inner {
  position: relative;
}
.mv::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/wave.png');
  width: 100%;
  height: 54.8vw;
  position: absolute;
  z-index: 2;
  top: 87.2vw;
}
.main .mv .catch-wrapper {
  position: relative;
  z-index: 2;
  gap: 1.5em;
  display: flex;
  margin-inline: auto;
  justify-content: space-between;
  flex-direction: column-reverse;
}

.main .mv .catch-wrapper .catch {
  color: var(--white);
  font-family: var(--mincho);
  position: relative;
}
.main .mv .catch-wrapper .catch .aniv-img {
  position: absolute;
  top: 5.9vw;
  right: 1vw;
}
.main .mv .catch-wrapper .catch .aniv-img img {
  width: 23.2vw;
  height: 23.466666666666665vw;
}
.main .mv .catch-wrapper .catch h2 {
  font-size: 8vw;
  white-space: nowrap;
  line-height: 1.5;
  text-shadow: 0px 0px 11px rgba(23, 28, 22, 0.6);
  padding-top: 9.2vw;
}
.main .mv .catch-wrapper .catch span {
  color: var(--pink);
}
.main .mv .catch-wrapper .catch p {
  font-size: 3.7333333333333334vw;
  margin-top: 4.6vw;
  line-height: 1.8;
}
.scroll {
  width: 21px;
  height: 173px;
  position: absolute;
  left: 15px;
  bottom: 0px;
  display: none;
}
.scroll-inner {
  position: relative;
}
.scroll-inner::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/scrolldown.png');
  width: 10px;
  height: 76px;
  display: block;
}
.scroll-item[data-id] {
  position: absolute;
}
.scroll-item[data-id='1'] {
  right: 0;
  top: 0;
  width: 1px;
  height: 173px;
  background: white;
  opacity: 0.3;
}
.scroll-item[data-id='2'] {
  width: 2px;
  right: -1px;
  background: var(--pink);
  animation-name: scroll;
  animation-duration: 2000ms;
  animation-delay: 0ms;
  animation-timing-function: ease; /* ease/ease-in/ease-out/ease-in-out/linear/cubic-bezier()/steps(1, jump-end) */
  animation-iteration-count: infinite; /* {num}/infinite */
  animation-direction: normal; /* normal/reverse/alternate/alternate-reverse */
  animation-fill-mode: forwards; /* none/backwards(0%)/forwards(100%)/both(0%->100%) */
  animation-play-state: running; /* running/paused */
  pointer-events: none;
}
@keyframes scroll {
  0% {
    top: 0;
    height: 0;
  }
  100% {
    top: 0;
    height: 173px;
  }
}
.mv-inner {
  margin-inline: auto;
  padding-inline: 4.2vw;
}
.mv-long {
  max-width: 100vw;
  height: 12.133333333333333vw;
  pointer-events: none;
  margin-right: calc(50% - 50vw);
  margin-top: -4vw;
  left: 7vw;
  position: relative;
}
.mv-long .mv-long-item {
  background-repeat: repeat-x;
  background-position: 0 0;
  background-image: url('../../image/top/a.png');
  background-size: auto 100%;
  width: 5683px;
  height: 12.133333333333333vw;
  display: block;
  animation: scroll-anim 100s linear infinite;
  position: relative;
  z-index: 2;
}
@keyframes scroll-anim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -5683px 0;
  }
}

/* =====================
  スライダー
===================== */
.main .mv .slide {
  width: 92.533333vw;
  position: relative;
  padding: 0 5vw;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  z-index: 10;
  padding: 0 5vw;
}
.main .mv .slide.dontTouch,
.main .mv .slide.dontTouch .swiper,
.main .mv .slide.dontTouch .arrows div {
  pointer-events: none;
}

/* ==== 単体 ==== */
.main .mv .slide .swiper {
  width: 65.2vw;
  margin-right: 11px;
  flex-shrink: 0;
  position: relative;
  margin-left: 0;
  z-index: 10;
}
.main .slide .swiper .swiper-slide {
  transition: opacity 0.5s linear 0.3s !important;
}
.main .slide .swiper .swiper-slide div {
  transition: clip-path 0.6s cubic-bezier(0.94, 0.06, 0.83, 0.67),
    -webkit-clip-path 0.6s cubic-bezier(0.94, 0.06, 0.83, 0.67);
  transition-delay: 0.8s;
  clip-path: inset(0 0 0 100%);
  width: 100%;
  height: 100%;
}
.main .slide .swiper .swiper-slide div img {
  transform: translateX(3em) scale(1.2);
}
.main .slide .swiper .swiper-slide-prev,
.main .slide .swiper .prev {
  transition: opacity 1.5s linear 0.5s !important;
}
.main .slide .swiper .swiper-slide-prev div,
.main .slide .swiper .prev div {
  clip-path: inset(0 100% 0 0);
}
.main .slide .swiper .active div {
  transition-delay: 0s;
  clip-path: inset(0 0 0 0);
}
.main .slide .swiper .active div img {
  transform: translateX(3em) scale(1.2);
  animation: worksSlide 15s linear 0s forwards;
}
@keyframes worksSlide {
  0% {
    transform: translateX(3em) scale(1.2);
  }
  100% {
    transform: translateX(-3em) scale(1.2);
  }
}
.main .slide .swiper-wrapper {
  list-style: none;
}

/* ==== サムネ ==== */
.main .slide .thumb {
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  margin-left: calc((10vw + 3.2vw) * -1);
}
.main .slide .thumb ul {
  display: flex;
  list-style: none;
}
.main .thumb .swiper-slide {
  width: 10vw;
}
.main .thumb .swiper-slide div {
  max-width: 10vw;
  height: 65.6vw;
  position: relative;
  overflow: hidden;
}
.main .thumb .swiper-slide img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%;
  width: auto;
  max-width: initial;
}
.main .mv.show .text {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.6s ease-in-out 0.3s;
}
.mv.show .works {
  opacity: 1;
  transition: all 0.6s ease-in-out 0.5s;
}

/* =====================
  ニュース
===================== */
.main article.news {
  position: relative;
  background: var(--black);
  padding-top: 6vw;
}

/* ==== Inner ==== */
.main article.news {
  overflow: hidden;
}
.main article.news .inner {
  position: relative;
  z-index: 2;
  margin-inline: auto;
}
.main article.news .inner h2 {
  grid-area: h2;
  color: white;
  font-size: 4vw;
  font-family: var(--mincho);
}
.main article.news .inner h2::before {
  content: attr(data-text);
  font-weight: 900;
  display: block;
  font-size: 7.733333333333333vw;
}
.main article.news .inner h2::first-letter {
  font-size: 12vw;
  color: var(--pink);
}
.main article.news .inner ul {
  grid-area: ul;
  color: white;
  background: var(--red);
  margin-right: calc(50% - 50vw);
  padding: 8.2vw 5vw 11vw;
  margin-top: 8.4vw;
}
.main article.news .inner ul li .anchor {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vw;
  padding-block: 0.95em;
}
.main article.news .inner ul li .anchor span {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.main article.news .inner ul li .anchor span.date {
  opacity: 0.66;
}
.main article.news .inner ul li .anchor span.title {
  /* flex-shrink: 0; */
  /* width: 630px; */
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
}
.main article.news .inner .bottom-anchor {
  grid-area: anchor;
  padding-top: 7vw;
  font-family: var(--mincho);
  color: white;
  font-size: 3.7333333333333334vw;
}
.main article.news .inner .bottom-anchor a {
  display: flex;
  gap: 2em;
  align-items: center;
  justify-content: flex-end;
  gap: 5vw;
}
.main article.news .inner .bottom-anchor .u-anchor::after {
  border: 2px solid;
  border-color: var(--red) var(--red) transparent transparent;
  top: 50%;
  left: 46%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* =====================
  サービス
===================== */
.main article.service {
  position: relative;
  z-index: 2;
  width: 100%;
  color: white;
  padding-top: 16.4vw;
}
.main article.service .inner {
  position: relative;
  margin-inline: auto;
}
.main article.service .inner::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  background-image: url('../../image/top/service_2x.png');
  width: 34.266666666666666vw;
  height: 3.2vw;
}
.main article.service .inner h2 {
  font-family: var(--mincho);
  letter-spacing: -0.02em;
  font-size: 6.4vw;
  line-height: 1.8;
  margin-top: 2.3vw;
  white-space: nowrap;
}
.main article.service .inner p {
  margin-top: 5vw;
  font-size: 3.7333333333333334vw;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.main article.service .inner::after {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  background-image: url('../../image/top/service_kv_2x.png');
  width: 64.8vw;
  height: 90.66666666666667vw;
  margin-inline: auto;
  margin-top: 8.8vw;
}

/* =====================
  テクノロジー
===================== */
.main article.tec {
  position: relative;
  z-index: 2;
  width: 100%;
  color: white;
  padding-top: 26vw;
}
.main article.tec .inner {
  position: relative;
  margin-inline: auto;
  padding-inline: 4.8vw;
}
.main article.tec .inner::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 3;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/technology_2x.png');
  width: 95.33333333333333vw;
  height: 10.266666666666666vw;
  top: -1.1vw;
  left: 5vw;
}
.main article.tec .inner .contents {
  position: relative;
  padding-block: 40vw 22vw;
}
.main article.tec .inner .contents::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/tec_kv_2x.png');
  width: 90.4vw;
  height: 71.06666666666666vw;
  z-index: 1;
  position: absolute;
  top: 8vw;
  left: -5vw;
}
.main article.tec .inner .contents .box {
  position: relative;
  z-index: 2;
  background: white;
  color: var(--black);
  padding: 19.7vw 4vw 13.9vw;
  margin-right: 0;
  margin-left: auto;
}
.main article.tec .inner .contents .box::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/tec-t_2x.png');
  width: 43.6vw;
  height: 4vw;
  position: absolute;
  left: 4vw;
  top: 14vw;
}
.main article.tec .inner .contents .box h2 {
  font-family: var(--mincho);
  letter-spacing: 0.04em;
  font-size: 6.4vw;
  line-height: 1.8;
  white-space: nowrap;
}
.main article.tec .inner .contents .box p {
  margin-top: 7.1vw;
  padding-inline: 3px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-size: 3.7333333333333334vw;
}
.main article.tec .inner .contents .box .anchor {
  margin-top: 5.4vw;
  font-family: var(--mincho);
  font-size: 3.7333333333333334vw;
}
.main article.tec .inner .contents .box .anchor .u-anchor {
  background: #9b003f10;
}
.main article.tec .inner .contents .box .anchor .u-anchor::after {
  border-color: var(--red) var(--red) transparent transparent;
}
.main article.tec .inner .contents .box .anchor a {
  display: inline-flex;
  align-items: center;
  gap: 1.3em;
}

/* =====================
  ITEM
===================== */
.main article.item {
  position: relative;
  background: var(--black);
  z-index: 2;
  width: 100%;
  color: white;
}
.main article.item .item-contents::after {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/items_2x.png');
  width: 48.13333333333333vw;
  height: 10.266666666666666vw;
  position: absolute;
  top: -8vw;
  right: 4vw;
  z-index: 3;
}
.main article.item .item-contents::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: calc((100% - 100vw) / 2 + 95vw);
  height: 100%;
  background-image: url(/assets/image/common/bg.png);
  background-repeat: repeat;
  background-position: 0 0;
}
.main article.item .inner {
  position: relative;
  margin-inline: auto;
}
.main article.item .inner-contents {
  position: relative;
  height: inherit;
  padding-inline: 4.1vw;
  padding-block: 13.6vw 0;
}
.main article.item .inner-contents::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/item-t_2x.png');
  width: 30.4vw;
  height: 3.2vw;
  display: block;
  position: absolute;
}
.main article.item .inner::after {
  content: '';
  margin-inline: auto;
  margin-top: 0;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/item_kv_2x.png');
  width: 84.26666666666667vw;
  height: 87.86666666666666vw;
  position: relative;
  top: 12vw;
  right: -2vw;
}
.main article.item .inner h2 {
  font-family: var(--mincho);
  letter-spacing: 0.04em;
  font-size: 6.4vw;
  line-height: 1.8;
  margin-top: 5.7vw;
}
.main article.item .inner h2 .pc {
  display: none;
}
.main article.item .inner ul {
  display: grid;
  gap: 4vw 4vw;
  margin-top: 12.2vw;
  font-size: 3.7333333333333334vw;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
}
.main article.item .inner ul li {
  border-bottom: 1px solid #ddd;
  padding-bottom: 7.3px;
}
.main article.item .inner ul li::before {
  content: '・';
}
.main article.item .inner .anchor {
  margin-top: 13.5vw;
  display: inline-flex;
  align-items: center;
  font-family: var(--mincho);
  font-size: 4.6vw;
  font-size: 3.734666666666667vw;
  gap: 1.2em;
}
.main article.item .inner .anchor a {
  display: flex;
  align-items: center;
  gap: 6vw;
}
.main article.item .inner .anchor .u-anchor::after {
  border-color: var(--red) var(--red) transparent transparent;
}

/* =====================
  会社案内と採用情報
===================== */
.main .company .company-wrap {
  display: flex;
  flex-direction: column;
}
.main .company .company-wrap .company-link {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('/assets/image/top/company_kv_2x.png');
  width: 100%;
  min-height: 72.8vw;
}
.main .company .company-wrap .recruit-link {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('/assets/image/top/recruit_kv_2x.png');
  width: 100%;
  min-height: 72.8vw;
}
.main .company .company-wrap .link-title {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  font-family: var(--mincho);
  color: var(--white);
  margin-top: 10.1vw;
}
.main .company .company-wrap .link-title h3 {
  font-size: 4vw;
}
.main .company .company-wrap .link-title span {
  font-weight: 800;
  font-size: 7.733333333333333vw;
}
.main .company .company-wrap .link-title .deco {
  font-size: 12vw;
  color: var(--red);
}
.main .company .company-wrap .u-anchor {
  margin-inline: auto;
  margin-top: 72px;
}