@charset "UTF-8";

/* =====================
  変数
===================== */
:root {
  --inner-width: 1120px;
  --header-height: 100px;
}

/* =====================
  共通
===================== */
.inner {
  width: var(--inner-width);
  margin-inline: auto;
}
.main-inner {
  padding-bottom: 87px;
  background: var(--black);
}
.tecs .title-wrapper span::before {
  background: var(--white);
}
.all-wrap {
  position: relative;
  background: var(--black);
}
.main .all-wrap[data-id='1'] .bg {
  pointer-events: none;
  position: absolute;
  top: 9vw;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(/assets/image/common/bg.png);
  width: 100%;
  height: 763px;
  transform: skewY(-10deg);
  z-index: 1;
}
.main .all-wrap[data-id='2'] .bg {
  pointer-events: none;
  position: absolute;
  top: 28.5vw;
  left: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background: var(--red);
  width: 100%;
  height: 710px;
  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);
  padding-top: 162px;
  position: relative;
  height: 768px;
  overflow: hidden;
}
.main .mv .mv-bg {
  background-image: url('/assets/image/top/mv_bg.png');
  min-height: 737px;
  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 {
  padding-left: 39px;
}
.main .mv .catch-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  margin-inline: auto;
  justify-content: space-between;
}

.main .mv .catch-wrapper .catch {
  width: 570px;
  color: var(--white);
  font-family: var(--mincho);
  position: relative;
}
.main .mv .catch-wrapper .catch .aniv-img {
  position: absolute;
  top: 11px;
  right: -4px;
}
.main .mv .catch-wrapper .catch h2 {
  font-size: 50px;
  white-space: nowrap;
  line-height: 1.8;
  padding-top: 52px;
}
.main .mv .catch-wrapper .catch span {
  color: var(--pink);
}
.main .mv .catch-wrapper .catch p {
  font-size: 15px;
  margin-top: 20px;
  line-height: 2;
}
.scroll {
  width: 21px;
  height: 173px;
  position: absolute;
  left: 15px;
  bottom: 0px;
}
.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 {
  width: 1200px;
  margin-inline: auto;
  /* overflow: hidden; */
}
.mv-long {
  max-width: 100vw;
  height: 88px;
  pointer-events: none;
  margin-right: calc(50% - 50vw);
  margin-top: -18px;
}
.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: 88px;
  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: 539px;
  position: relative;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  z-index: 10;
}
.main .mv .slide.dontTouch,
.main .mv .slide.dontTouch .swiper,
.main .mv .slide.dontTouch .arrows div {
  pointer-events: none;
}

/* ==== 単体 ==== */
.main .mv .slide .swiper {
  width: 426px;
  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: -77px;
}
.main .slide .thumb ul {
  display: flex;
  list-style: none;
}
.main .thumb .swiper-slide {
  width: 66px;
}
.main .thumb .swiper-slide div {
  max-width: 66px;
  height: 547px;
  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: 78px;
}

/* ==== Inner ==== */
.main article.news {
  overflow: hidden;
}
.main article.news .inner {
  width: 1200px;
  position: relative;
  z-index: 2;
  margin-inline: auto;
  display: grid;
  grid-template:
    'h2 ul' auto
    'anchor ul' 1fr / 1fr 73%;
  padding-inline: 83px;
}
.main article.news .inner h2 {
  grid-area: h2;
  color: white;
  font-size: 18px;
  font-family: var(--mincho);
}
.main article.news .inner h2::before {
  content: attr(data-text);
  font-weight: 900;
  display: block;
  font-size: 30px;
}
.main article.news .inner h2::first-letter {
  font-size: 47px;
  color: var(--pink);
}
.main article.news .inner ul {
  grid-area: ul;
  color: white;
  background: var(--red);
  margin-right: calc(50% - 50vw);
  padding: 3.7em 5.4em;
}
.main article.news .inner ul li .anchor {
  display: inline-flex;
  gap: 2.5em;
  align-items: center;
  padding-block: 0.85em;
}
.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: 66px;
  font-family: var(--mincho);
  color: white;
}
.main article.news .inner .bottom-anchor a {
  display: flex;
  gap: 2em;
  align-items: center;
}
.main article.news .inner .bottom-anchor .u-anchor::after {
  width: 7px;
  height: 7px;
  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%;
  /* min-height: 100vh; */
  color: white;
  padding-top: 88px;
}
.main article.service .inner {
  width: 1200px;
  position: relative;
  margin-inline: auto;
  padding-inline: 37px;
}
.main article.service .inner::before {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/service.png');
  left: 0;
  top: 18px;
  width: 14px;
  height: 203px;
}
.main article.service .inner h2 {
  font-family: var(--mincho);
  letter-spacing: 0.04em;
  font-size: 36px;
  line-height: 1.8;
}
.main article.service .inner p {
  margin-top: 2.5em;
  padding-inline: 3px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  width: 640px;
}
.main article.service .inner::after {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/service_kv.png');
  right: 86px;
  top: -7px;
  width: 338px;
  height: 472px;
}

/* =====================
  テクノロジー
===================== */
.main article.tec {
  position: relative;
  z-index: 2;
  width: 100%;
  color: white;
  padding-top: 181px;
}
.main article.tec .inner {
  width: 1200px;
  position: relative;
  margin-inline: auto;
  padding-inline: 0 42px;
}
.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.png');
  width: 800px;
  height: 77px;
  top: -2px;
  left: 2px;
}
.main article.tec .inner .contents {
  position: relative;
  padding-block: 15.8em 11.3em;
}
.main article.tec .inner .contents::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/tec_kv.png');
  width: 964px;
  height: 348px;
  z-index: 1;
  position: absolute;
  top: 57px;
  left: 0;
}
.main article.tec .inner .contents .box {
  position: relative;
  z-index: 2;
  background: white;
  color: var(--black);
  padding: 3.8em 4.5em 3.7em 7.5em;
  width: 848px;
  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.png');
  width: 18px;
  height: 244px;
  position: absolute;
  left: 70px;
  top: 74px;
}
.main article.tec .inner .contents .box h2 {
  font-family: var(--mincho);
  letter-spacing: 0.04em;
  font-size: 36px;
  line-height: 1.8;
}
.main article.tec .inner .contents .box p {
  margin-top: 37.1px;
  padding-inline: 3px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.main article.tec .inner .contents .box .anchor {
  margin-top: 51px;
  font-family: var(--mincho);
  font-size: 16px;
}
.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;
  width: 7px;
  height: 7px;
}
.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;
  /* padding-bottom: 87px; */
}
.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.png');
  width: 361px;
  height: 77px;
  position: absolute;
  top: -51px;
  right: 552px;
  z-index: 3;
}
.main article.item .item-contents::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: calc((100% - 1200px) / 2 + 1200px);
  height: 100%;
  background-image: url(/assets/image/common/bg.png);
  background-repeat: repeat;
  background-position: 0 0;
}
.main article.item .inner {
  width: 1200px;
  position: relative;
  margin-inline: auto;
  padding: 3.8em 50px;
}
.main article.item .inner-contents {
  position: relative;
  height: inherit;
  padding-inline: 30px;
}
.main article.item .inner-contents::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/item-t.png');
  width: 15px;
  height: 187px;
  display: block;
  position: absolute;
  top: 17px;
  left: -9px;
}
.main article.item .inner::after {
  content: '';
  display: block;
  position: absolute;
  right: -1px;
  top: -33px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/item_kv.png');
  width: 573px;
  height: 594px;
}
.main article.item .inner h2 {
  font-family: var(--mincho);
  letter-spacing: 0.04em;
  font-size: 36px;
  line-height: 1.8;
}
.main article.item .inner ul {
  display: grid;
  gap: 0.9em 2.2em;
  margin-top: 2.5em;
  width: 444px;
  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 a {
  margin-top: 53px;
  display: inline-flex;
  align-items: center;
  font-family: var(--mincho);
  font-size: 16px;
  gap: 1.2em;
}
.main article.item .inner .anchor .u-anchor::after {
  border-color: var(--red) var(--red) transparent transparent;
  width: 6px;
  height: 6px;
}

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