@charset "UTF-8";

/* =====================
  共通
===================== */
.inner {
  width: 100%;
  padding-inline: 4vw;
  margin-inline: auto;
}

/* =====================
  About
===================== */
.about {
  position: relative;
  background-color: #000;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAOklEQVQImW3MMQrAQAwDwT317oz+/0uXShOOEFyoGcRiO1UV4E5S2NB2zgsASKK7mRn4Pz+FFcOKkAdDQSQ19+SIJAAAAABJRU5ErkJggg==');
  background-repeat: repeat;
  background-size: 0.8vw;
  overflow: hidden;
  padding-top: 34vw;
}

/* メカ */
.about::before {
  content: '';
  display: block;
  background-image: url('/assets/image/top/works_bg_decoration_2x.png');
  width: 162.93333333333334vw;
  height: 207.06666666666666vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -116.466667vw;
  right: -80.2vw;
  pointer-events: none;
}

/* タウン */
.about::after {
  content: '';
  display: block;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  background-image: url('../../image/top/about_bg_2x.png');
  height: 57.2vw;
  width: 100%;
  bottom: -9vw;
  left: 50%;
  transform: translateX(-50%);
}

.about .inner {
  position: relative;
  padding-block: 0 0;
  padding-inline: 0;
  color: white;
  display: block;
  justify-content: space-between;
  gap: 0;
}

.about .deco-tri {
  display: block;
  height: 0;
  border-style: solid;
  top: 0;
  position: absolute;
  left: 0;
  border-width: 21.333333333333332vw 21.333333333333332vw 0 0;
  border-color: var(--navy) transparent transparent transparent;
}

/* ==== 画像 左 ==== */
.about .inner .img {
  flex-shrink: 0;
  position: relative;
  text-align: center;
}

.about .inner .img img {
  opacity: 0;
  margin-top: 0;
  position: relative;
  width: 75.06666666666666vw;
  height: 49.2vw;
  z-index: 2;
  transform: translateX(-6em) skewX(10deg);
  filter: blur(1em);
  transition: all 400ms var(--easeOutExpo) 0ms;
}
.about.on .inner .img img {
  opacity: 1;
  transform: translateX(0) skewX(0);
  filter: blur(0);
}
.about .inner .img .deco {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 1200ms var(--easeOutExpo) 300ms;
  opacity: 0;
}
.about.on .inner .img .deco {
  background-size: 100%;
  opacity: 1;
  filter: blur(0);
}
.about .inner .img .deco[data-id='1'] {
  background-image: url('../../image/top/about_01_2x.png');
  width: 20vw;
  height: 20vw;
  right: 23vw;
  top: -14vw;
  transition: all 1200ms var(--easeOutExpo) 150ms;
}

.about .inner .img .deco[data-id='2'] {
  background-image: url('../../image/top/about_02_2x.png');
  width: 18.266666666666666vw;
  height: 18.266666666666666vw;
  left: 5vw;
  top: 42vw;
  transition: all 1200ms var(--easeOutExpo) 300ms;
}

.about .inner .img .deco[data-id='3'] {
  background-image: url('../../image/top/about_03_2x.png');
  width: 28vw;
  height: 28vw;
  right: 7vw;
  top: 42vw;
  transition: all 1200ms var(--easeOutExpo) 450ms;
}

/* ==== テキスト 右 ==== */
.about .inner .text {
  position: relative;
  padding-top: 5.866666666666666vw;
  padding-inline: 5vw;
}

.about .inner .text .cross {
  position: relative;
  top: -2.6vw;
  left: 1vw;
}

.about .inner .text .h2 {
  line-height: 1.25;
  font-weight: bold;
  font-size: 5.866666666666666vw;
}

.about .inner .text .h2::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/h2_about_2x.png');
  width: 47.2vw;
  height: 13.2vw;
  display: block;
  font-family: var(--mincho);
  z-index: 21;
  position: relative;
}

.about .inner .text h3 {
  font-size: 5.866666666666666vw;
  line-height: 1.6875;
  font-family: var(--mincho);
  font-weight: bold;
  font-feature-settings: 'palt';
  letter-spacing: 0.03em;
  padding-top: 10.9vw;
}

.about .inner .text p {
  font-size: 3.466666666666667vw;
  line-height: 1.825;
  letter-spacing: 0.03em;
  font-feature-settings: 'palt';
  width: 100%;
  margin-top: 7.3vw;
  padding: 0 1.3vw;
}

.about .inner .text .anchor {
  margin: 9vw auto 20.4vw;
  text-align: center;
  z-index: 11;
  position: relative;
}

.about .inner .text .anchor a {
  margin-inline: auto;
  display: inline-flex;
}

/* =====================
  ビジネス
===================== */
.business {
  position: relative;
  z-index: 3;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  padding: 21vw 0 0;
  background-image: url('../../image/top/business_bg_2x.png');
}

.business .inner::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/h2_business_2x.png');
  width: 56.266666666666666vw;
  height: 12.933333333333334vw;
  display: block;
}

/* ==== テキスト 右 ==== */
.business .inner .cross {
  width: 100%;
  position: absolute;
  top: 10.8vw;
  left: 6vw;
}

.business::before,
.business::after {
  content: '';
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  top: 0;
}

.business::before {
  background-image: url('../../image/top/business_bg_2x.png');
  height: 217.2vw;
}

/* 三角形 */
.business::after {
  display: block;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
  border-width: 21.333333333333332vw 21.333333333333332vw 0 0;
  border-color: #0c0c0c transparent transparent transparent;
  z-index: 2;
}

.business .inner {
  position: relative;
  z-index: 3;
  padding: 0 5vw;
  margin-inline: auto;
}

/* ==== 画像 左 ==== */
.business .inner .img {
  position: relative;
  padding-top: 14.4vw;
}
.business .inner .img .unit {
  opacity: 0;
  filter: blur(1em);
  transition: all 600ms var(--easeOutExpo) 0s;
}
.business .inner .img img {
  position: relative;
  z-index: 2;
}
.business .inner .img .unit[data-id='1'] {
  transform: translateX(-3em) skewX(10deg);
  transition-delay: 0ms;
}
.business .inner .img .unit[data-id='2'] {
  transform: translateX(3em) skewX(-10deg);
  transition-delay: 300ms;
}
.business.on .inner .img .unit {
  transform: translateX(0) skewX(0);
  opacity: 1;
  filter: blur(0);
}
.business .inner .img .unit[data-id='1'] img {
  width: 76.8vw;
  height: 99.73333333333333vw;
  margin-inline: auto 0;
  display: block;
}

.business .inner .img .unit[data-id='2'] img {
  width: 46.13333333333333vw;
  height: 33.86666666666667vw;
  position: relative;
  top: -24.9vw;
  display: block;
}
.business .inner .text .cross {
  position: absolute;
}

.business .inner .text .h2 {
  display: none;
}

.business .inner .text h3 {
  font-size: 5.866666666666666vw;
  line-height: 1.825;
  font-family: var(--mincho);
  font-weight: bold;
  font-feature-settings: 'palt';
  letter-spacing: -0.01em;
  margin-top: -15.4vw;
}

.business .inner .text p {
  font-size: 3.466666666666667vw;
  line-height: 1.825;
  letter-spacing: 0.03em;
  font-feature-settings: 'palt';
  width: 100%;
  margin-top: 3.4vw;
}

.business .inner .text .anchor {
  margin-top: 74px;
  margin-left: 14px;
}

/* ==== バナー ==== */
.business .inner[data-id='banner'] {
  width: 100%;
  margin-top: 11.4vw;
  left: 0;
  padding: 12.9vw 5.4vw 18.3vw;
  border-radius: 0;
  position: relative;
  z-index: 5;
  margin-inline: auto;
  background-image: -moz-linear-gradient(164deg, rgb(35, 64, 96) 0%, rgb(24, 48, 76) 100%);
  background-image: -webkit-linear-gradient(164deg, rgb(35, 64, 96) 0%, rgb(24, 48, 76) 100%);
  background-image: -ms-linear-gradient(164deg, rgb(35, 64, 96) 0%, rgb(24, 48, 76) 100%);
}

.business .inner[data-id='banner']::before {
  display: none;
}

.business .inner .banner p {
  text-align: left;
  line-height: 1.875;
  font-size: 3.466666666666667vw;
  letter-spacing: 0.03em;
  padding-top: 3.1vw;
  font-feature-settings: 'palt';
}

.business .inner .banner a {
  display: grid;
  place-content: center;
  font-weight: bold;
  font-feature-settings: 'palt';
  letter-spacing: 0.04em;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('../../image/top/business_bnr_2x.png');
  width: 89.46666666666667vw;
  height: 36vw;
}

.business .gear {
  position: relative;
  z-index: 3;
}

.business .gear::before {
  content: '';
  display: block;
  background-image: url('/assets/image/top/works_bg_decoration.png');
  width: 85.2vw;
  height: 87.73333333333333vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -8vw;
  right: -3vw;
  pointer-events: none;
}

/* =====================
  WORKS
===================== */
.works {
  background-color: #000;
  background-repeat: repeat;
  position: relative;
  padding-top: 19.9vw;
}

.works .text-slide {
  position: relative;
  z-index: 2;
}

.works .text-slide::before {
  display: block;
  content: '';
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  background-image: url('../../image/top/business-textslide1_2x.png');
  width: 329.73333333333335vw;
  height: 20.266666666666666vw;
  animation: scroll-anim 50s linear infinite;
  position: relative;
  z-index: 2;
}

@keyframes scroll-anim {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -329.73333333333335vw 0;
  }
}

.works .text-slide::after {
  content: '';
  display: block;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  background-image: url('../../image/top/business-textslide2_2x.png');
  width: 330.8vw;
  height: 21.333333333333332vw;
  animation: scroll-anim2 50s linear reverse infinite;
  position: relative;
  top: -31px;
  z-index: 2;
}

@keyframes scroll-anim2 {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -330.8vw 0;
  }
}

/* ==== スライダー ==== */
.works-slide {
  overflow: hidden;
  margin-top: -12vw;
  position: relative;
  z-index: 3;
}

.works-slide-wrapper {
  position: relative;
  width: 100%;
  padding-left: 5vw;
  margin: auto;
}

.works-slide-contents {
  margin-right: calc(50% - 50vw);
  display: flex;
  gap: 2.3vw;
}
.works-slide-unit {
  position: relative;
}
.works-slide-unit[data-id='1'] {
  width: 100%;
}

.works-slide-unit[data-id='2'] {
  width: 100%;
  padding-top: 18vw;
}

.works-slide-unit[data-id='3'] {
  width: 100%;
  display: none;
}

.works-slide-unit .works-unit-inner {
  background: #000;
  position: relative;
  width: 60vw;
  height: 72vw;
  overflow: hidden;
}
.works-slide-unit .works-unit-inner::after {
  content: '';
  transition: background-image 2500ms ease 0s;
  position: absolute;
  top: 0;
  left: 0;
  width: 60vw;
  height: 72vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  animation-name: zoom;
  animation-duration: 15000ms;
  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: 1; /* {num}/infinite */
  animation-direction: normal; /* normal/reverse/alternate/alternate-reverse */
  animation-fill-mode: none; /* none/backwards(0%)/forwards(100%)/both(0%->100%) */
  animation-play-state: running; /* running/paused */
}

.works-unit-inner[data-state='1']::after {
  background-image: url('../../image/top/works_01.png');
}

.works-unit-inner[data-state='2']::after {
  background-image: url('../../image/top/works_02.png');
}

.works-unit-inner[data-state='3']::after {
  background-image: url('../../image/top/works_03.png');
}
@keyframes zoom {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* コントローラー */
.works-slide-controller {
  position: absolute;
  width: 100%;
  bottom: 1.5vw;
  right: 0;
}

.works-slide-controller .works-slide-controller-inner {
  position: relative;
  display: flex;
  gap: 4vw;
}

.works-slide-controller .works-slide-controller-inner button {
  background-repeat: no-repeat;
  cursor: pointer;
  background-size: contain;
  background-position: center;
  background-image: url('../../image/top/btn_r_2x.png');
  width: 14vw;
  height: 14vw;
}

.works-slide-controller .works-slide-controller-inner button.prev {
  transform: scale(-1, -1);
}

.works::after {
  content: '';
  display: block;
  background-image: url('/assets/image/top/works_bg_2x.png');
  height: 176.13333333333333vw;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

/* ==== てきすと ==== */
.works-text {
  margin-top: 47px;
  padding-inline: 5vw;
}

.works-text .h2-title img {
  width: 50.4vw;
  height: 12.933333333333334vw;
}

.works-text .cross {
  width: 100%;
  position: relative;
  top: -3.7vw;
  left: 4px;
}

.works-text .unit[data-id='1'] {
  display: block;
  margin-top: 14.1vw;
  text-align: center;
  padding-bottom: 20vw;
  justify-content: space-between;
}

.works-text .unit[data-id='1'] p {
  line-height: 1.825;
  font-size: 3.466666666666667vw;
  letter-spacing: -0.02em;
  padding-left: 0;
  text-align: left;
}

.works-text .unit[data-id='1'] p br {
  display: none;
}

.works-text .unit[data-id='1'] .u-anchor {
  text-align: center;
}

.works-text .unit[data-id='1'] a {
  margin-top: 40px;
  display: inline-flex;
}

.works-text .unit[data-id='1'] a .u-anchor {
  display: inline-flex;
  justify-content: center;
}

.works-text .unit[data-id='1'] a .u-anchor div {
  display: inline-flex;
}

.works-text .unit[data-id='1'] a {
  position: relative;
}

/* =====================
  リクルート（一番下）
===================== */
.recruit {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/image/top/recruit_bg_2x.png');
}

.recruit .cross {
  width: 100%;
  position: relative;
  top: -3.5vw;
  right: -1vw;
}

.recruit .inner {
  padding-inline: 0;
  position: relative;
  padding-top: 19.9vw;
  text-align: center;
}

.recruit .inner .h2-title {
  padding-inline: 5vw;
  text-align: left;
}

.recruit .inner .h2-title img {
  width: 50.4vw;
  height: 12.933333333333334vw;
}

.recruit .inner::after {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url('/assets/image/top/recruit01_2x.png');
  width: 100%;
  height: 64.13333333333333vw;
  margin-top: 17vw;
}

.recruit .inner > p {
  padding-inline: 5vw;
  font-feature-settings: 'palt';
  width: 100%;
  line-height: 1.825;
  margin-top: 15.5vw;
  margin-left: 0;
  letter-spacing: 0.03em;
  font-size: 3.466666666666667vw;
  text-align: left;
}

.recruit .inner .u-anchor a {
  display: inline-flex;
}

.recruit .inner .u-anchor {
  font-family: var(--title);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
  margin-top: 12.8vw;
}

.recruit .inner .u-anchor {
  margin-inline: auto;
}

.cross::before {
  content: '';
  top: 5vw;
  position: absolute;
  width: 13.333333333333334vw;
  /* よこ棒の幅 */
  height: 1px;
  /* よこ棒の長さ */
  left: -8vw;
  background: var(--white);
}

.cross::after {
  content: '';
  position: absolute;
  top: 0px;
  /* たて棒のy位置 */
  left: 7px;
  /* たて棒のX位置 */
  width: 1px;
  /* たて棒の長さ */
  height: 10.666666666666666vw;
  /* たて棒の幅 */
  background: var(--white);
}