@charset "UTF-8";

/* =====================
  トップ共通タイトル
===================== */
.top-title {
  border-bottom: solid 1px #002a87;
}

.top-title .title-no {
  font-family: Taviraj;
  font-size: 4vw;
  font-weight: 600;
  line-height: 1;
  color: #002a87;
}

.top-title .t-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9333333333333333vw;
  padding-bottom: 1.3vw;
}

.top-title .t-title-wrap span {
  font-family: Taviraj;
  font-size: 8.533333333333333vw;
  font-weight: 600;
  line-height: 1.5;
  color: #002a87;
}

.top-title .t-title-wrap h2 {
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #002a87;
}

/* ==== トップのボタンサイズ調整 ==== */

.link-btn2 {
  width: 55.333333333333336vw;
}

/* =====================
  MV
===================== */
.mv-content {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 177.86666666666667vw;
}

/* ==== 背景スライダー ==== */
.mv-content .mv-slider {
  position: relative;
  height: inherit;
}

.mv-content .mv-slider .mv-swiper-container {
  /* position: relative; */
  position: absolute;
  top: 0;
  right: 0;
  height: inherit;
  width: 100%;
}

.mv-content .mv-slider .swiper-slide {
  background-repeat: no-repeat;
  background-position: right center;
  object-fit: cover;
  width: 100%;
  height: 177.86666666666667vw;
  background-size: cover;
  position: relative;
}
.mv-content .mv-slider .swiper-slide::before {
  content: '';
  display: block;
  width: calc((100 / 750) * 648 * 1vw);
  height: calc((100 / 750) * 953 * 1vw);
  background-repeat: no-repeat;
  background-size: cover;
  top: calc((100 / 750) * 128 * 1vw);
  background-position: right center;
  right: 0;
  position: absolute;
}
.mv-content .mv-slider .swiper-slide[data-id='1'] {
  background-image: url('/assets/img/top/mv/01_2x.png');
}
.mv-content .mv-slider .swiper-slide[data-id='1']::before {
  background-image: url('/assets/img/top/mv/01t_2x.png');
}
.mv-content .mv-slider .swiper-slide[data-id='2'] {
  background-image: url('/assets/img/top/mv/02_2x.png');
}
.mv-content .mv-slider .swiper-slide[data-id='2']::before {
  background-image: url('/assets/img/top/mv/02t_2x.png');
}
.mv-content .mv-slider .swiper-slide[data-id='3'] {
  background-image: url('/assets/img/top/mv/03_2x.png');
}
.mv-content .mv-slider .swiper-slide[data-id='3']::before {
  background-image: url('/assets/img/top/mv/03t_2x.png');
}

/* =====================
    ページネーション
===================== */
.mv .pagenation {
  position: absolute;
  z-index: 10;
  right: 4.666666666666667vw;
  bottom: 37.9vw;
  font-family: Taviraj;
  font-weight: bold;
  color: #fff;
  width: 22.133333333333333vw;
  aspect-ratio: 1 / 1;
}

.mv .pagenation-inner {
  position: relative;
}

/* ==== テキスト ==== */
.mv .pagenation-count {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mv .pagenation-count-inner {
  position: relative;
}

.mv .pagenation-count-inner::before {
  content: '';
  width: 1px;
  height: 2.1333333333333333vw;
  background: white;
  display: block;
  position: absolute;
  top: 10vw;
  left: 11.8vw;
  transform: skew(-25deg);
}

/* ==== 文字単体 ==== */
.mv .pagenation-count {
  position: absolute;
  font-size: 5.066666666666666vw;
  line-height: 1;
}
.mv .customPagenation {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc((100 / 750) * 20 * 1vw);
  gap: calc((100 / 750) * 14.56 * 1vw);
  text-shadow: 0px 0px 10px rgba(27, 28, 32, 0.18);
}

/* 現在 */
.mv .pagenation-count .swiper-pagination-current {
  top: 8.6vw;
  left: 3vw;
  font-size: calc((100 / 750) * 38 * 1vw);
}
.mv .pagenation-count .swiper-pagination-current::before {
  content: '0';
}

/* 総数 */
.mv .pagenation .all-count {
  top: 9.3vw;
  right: 3vw;
  font-size: calc((100 / 750) * 28 * 1vw);
}
.mv .pagenation-count .swiper-pagination-total::before {
  content: '0';
}

.mv .pagenation svg {
  display: block;
  width: calc((100 / 750) * 166 * 1vw);
  height: calc((100 / 750) * 166 * 1vw);
  aspect-ratio: 1 / 1;
  transform: rotate(90deg);
}
.mv .pagenation circle {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
}
.mv .pagenation circle.dummy {
  stroke-opacity: 0.3;
}
.mv .pagenation circle:not(.dummy) {
  stroke-dasharray: calc(47 * 2 * pi * 1px);
  stroke-dashoffset: calc(47 * 2 * pi * 1px);
  will-change: stroke-dashoffset;
}
.mv .pagenation svg.animation circle {
  animation-name: circle;
  /* Swiper delay 2000 + speed 2000 なので 4000ms で設定 */
  animation-duration: 4000ms;
  animation-delay: 0ms;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes circle {
  0% {
    stroke-dashoffset: calc(47 * 2 * pi * 1px);
  }
  1% {
    stroke-dashoffset: calc(47 * 2 * pi * 1px);
  }
  79% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: calc(47 * 2 * pi * 1px);
  }
}

/* =====================
  キャッチ
===================== */
.mv-content .content-inner {
  position: relative;
  z-index: 10;
  padding-top: 17.066666666666666vw;
  padding-inline: 8.933333333333334vw;
  height: inherit;
}

.mv-content .content-inner .catch {
  font-size: 8.533333333333333vw;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.256vw;
  color: #131518;
  background-color: #fff;
  padding-block: 2.9vw 1.6vw;
  padding-inline: 2.1333333333333333vw;
  width: fit-content;
  position: relative;
  z-index: 35;
}

.mv-content .content-inner .catch-1 {
  margin-top: 80.93333333333334vw;
}

.mv-content .content-inner .catch-2 {
  margin-top: 3.2vw;
}

.mv-content .content-inner p {
  -webkit-text-stroke: 2px #fff;
  font-family: Taviraj;
  font-size: 17.066666666666666vw;
  font-weight: bold;
  line-height: 1.1;
  color: transparent;
  position: absolute;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  top: 17.066666666666666vw;
  left: 1vw;
}

/* ==== scroll ==== */
.mv .scroll {
  position: absolute;
  left: 3.6vw;
  bottom: 0px;
  z-index: 10;
}

.mv .scroll::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/img/top/scroll_2x.png');
  width: 2.2666666666666666vw;
  height: 12.266666666666666vw;
  position: relative;
  left: 3.3vw;
  top: 12.266666666666666vw;
}

.mv .scroll span {
  width: 1px;
  height: 30.933333333333334vw;
  display: block;
  background: #fff;
  margin-inline: auto;
  position: relative;
}

.mv .scroll span::before {
  content: '';
  position: absolute;
  display: block;
  transform: translateX(-50%);
  left: calc(50% + 0.5px);
  top: -3.5px;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  background: #fff;
  opacity: 0;
  animation: scroll 1.5s linear 0s infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  34% {
    top: calc(100% - 3.5px);
  }

  35% {
    opacity: 1;
    top: calc(100% - 3.5px);
    transform: translateX(-50%) scale(1);
  }

  40% {
    opacity: 0.5;
    top: calc(100% - 3.5px);
  }

  80% {
    opacity: 0;
    top: calc(100% - 3.5px);
    transform: translateX(-50%) scale(3);
  }

  100% {
    opacity: 0;
    top: calc(100% - 3.5px);
    transform: translateX(-50%) scale(3);
  }
}

/* =====================
  NEWS
===================== */
.mv .news {
  background-color: rgba(19, 21, 24, 0.7);
  color: #fff;
  height: 33.733333333333334vw;
  width: 86.4%;
  z-index: 32;
  position: absolute;
  bottom: 0;
  right: 0;
}

.mv .news-inner {
  position: relative;
  height: inherit;
  padding-block: 3.6vw;
  padding-inline: 5.333333333333333vw 4.7vw;
}

.mv .news h2 {
  font-family: Taviraj;
  font-size: 5.333333333333333vw;
  font-weight: bold;
}

/* スライダー */
.mv .news-slider {
  overflow: hidden;
  width: 100%;
  height: inherit;
  position: relative;
}

/* 白線 */
.mv .news-slider::before {
  content: '';
  display: block;
  width: 6.133333333333333vw;
  height: 1px;
  background: white;
  position: relative;
  margin-top: 1vw;
}

/* コンテナ */
.mv .news-slider .swiper-container,
.mv .news-slider .swiper-wrapper {
  height: inherit;
  margin-top: 2vw;
}

/* 要素 */
.mv .news-slider .swiper-slide a {
  font-size: 3.2vw;
  font-weight: 500;
  color: #fff;
  position: relative;
}

.mv .news-slider .swiper-slide a time {
  font-family: Taviraj;
  font-size: 2.933333333333333vw;
}

.mv .news-slider .swiper-slide a p {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mv .news-slider .swiper-slide a p::after {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/img/common/arrow_w_2x.png');
  width: 3.2vw;
  height: 3.2vw;
  margin-left: 6px;
}

/* =====================
  会社案内
===================== */
.article[data-id='1'] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/img/top/company_bg_2x.png');
  width: 100%;
  height: 281.46666666666664vw;
  padding-top: 21.3vw;
}

.article[data-id='1'] .company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10.4vw;
}

.article[data-id='1'] .company .company-img picture img {
  width: 90.66666666666667vw;
  height: 100.8vw;
}

.article[data-id='1'] .company .company-p h3 {
  font-size: 5.066666666666666vw;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #131518;
  margin-top: 7.5vw;
}

.article[data-id='1'] .company .company-p p {
  margin-top: 4.8vw;
}

.article[data-id='1'] .company .company-p .link-btn2 {
  margin-top: 10.2vw;
}

/* =====================
  事業内容
===================== */
.article[data-id='2'] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/img/top/content_bg_2x.png');
  width: 100%;
  height: 542.4vw;
  padding-block: 16vw;
}

.article[data-id='2'] .content-list {
  background-color: #fff;
}

.article[data-id='2'] .content-list ol li {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.article[data-id='2'] .content-list ol li .content-wrap {
  padding-inline: 5.333333333333333vw;
  padding-block: 10.4vw 13.866666666666667vw;
}

.article[data-id='2'] .content-list ol li .content-wrap p {
  margin-top: 8vw;
}

.article[data-id='2'] .content-list ol li .content-wrap .sdgs-bnr img {
  display: block;
  margin-top: 7.3vw;
  width: 69.06666666666666vw;
  height: 8.666666666666666vw;
}

.article[data-id='2'] .content-list ol li .content-wrap .link-btn2 {
  margin-top: 10.5vw;
}

.article[data-id='2'] .content-list ol li:nth-child(3) .content-wrap .link-btn2 {
  margin-top: 13vw;
}

.article[data-id='2'] .content-list ol li .content-img picture img {
  width: 90.66666666666667vw;
  height: 63.6vw;
}

/* =====================
  採用情報
===================== */
.article[data-id='3'] {
  padding-top: 16vw;
  padding-bottom: 21.3vw;
}

.article[data-id='3'] .inner {
  position: relative;
}

.article[data-id='3'] .inner::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/img/top/recruit_img_2x.png');
  width: 90.66666666666667vw;
  height: 108.53333333333333vw;
}

.article[data-id='3'] .recruit-p {
  flex-shrink: 0;
  margin-top: 9.6vw;
}

.article[data-id='3'] .recruit-p h3 {
  font-size: 5.066666666666666vw;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #131518;
  margin-top: 7.3vw;
}

.article[data-id='3'] .recruit-p p {
  margin-top: 4.9vw;
}

.article[data-id='3'] .recruit-p .link-btn2 {
  margin-top: 10.5vw;
}

/* =====================
  Palarax
===================== */
.js-pallarax {
  opacity: 0;
  transition: all 1000ms ease 0ms;
  filter: blur(1rem);
  scale: 0.99;
}
.js-pallarax.on {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}