@charset "utf-8";

/* メイン */

.mv {
  margin-bottom: 144px;
}

#lottie svg {
  width: 100% !important;
  height: auto !important;
}

/* 位置調整（任意） */
.mv-lottie {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

/* MVスクロール */

.scroll__wrap {
  height: 88px;
  display: flex;
  align-items: start;
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  display: none;
}



.scroll__wrap .scroll__arrow {
  width: 1px;
  height: 0%;
  background-color: #313131;
  position: relative;
  margin-bottom: auto;
  animation-name: arrow;
  animation-duration: 1.1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}



.scroll__wrap .scroll__arrow::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  transform: rotate(20deg);
  background-color: #313131;
  position: absolute;
  bottom: 0;
  left: 2.5px;
}



.scroll__wrap .scroll__txt {
  width: 12px;
  margin-top: 10px;
  margin-left: 10px;
}

#lottie {
  margin-top: 220px;
  margin-bottom: 220px;
}


@keyframes arrow {

  0% {
    height: 0;
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    height: 100%;
  }

}


@media (min-width: 768px) {
  #lottie {
    margin-top: 200px;
    margin-bottom: 200px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .scroll__wrap {
    display: none;
  }
}

/* 私たちについて */

.section_content--about {
  padding-block: 80px;
  background: url(../images/top/sp_about_bg.png) center / cover no-repeat;
}

.about_box {
  background-color: #fff;
  padding: 24px 24px 40px;
  border-radius: 16px;
  box-shadow: var(--main-shadow);
}

.about_box p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .section_content--about {
    padding: 80px 211px;
    background: url(../images/top/about_bg.png) center / cover no-repeat;
  }

  .section_content--about .ui-btn {
    max-width: 256px;
    width: 100%;
  }

  .about_box {
    padding: 40px 64px;
    max-width: 944px;
    margin-inline: auto;
  }

}

/* 私たちについて(実績) */

.works_box {
  background: var(--sub-color);
  border-radius: 10px 10px 0 0;
  padding: 40px 0 80px;
}

.works_box .works_top {
  padding: 0 24px;
}

.works_box p {
  font-size: 16px;
  line-height: 1.5;
}

.works_box .ui-btn {
  margin: 0 0 40px;
}

.works_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px;
}

[class*="works__item"] {
  width: calc((100% - 10px) / 2);
  margin: 0;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
}

[class*="works__item"]:nth-child(odd) {
  margin-right: 10px;
}

[class*="works__item"] a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  width: 100%;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}


[class*="works__item"] img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
}

.works_list.sp [class*="works__item"] a:hover img {
  box-shadow: var(--point-shadow);
  border-radius: 8px;
  background: #fff;
  opacity: 0.2;
  filter: grayscale(1) brightness(2);
}

[class*="works__item"] a:hover span {
  opacity: 1;
  visibility: visible;
}

.layer_top_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  display: flex;
  flex-direction: column;
  z-index: 1;
}


[class*="works__item"] a span {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

[class*="works__item"] .large_text {
  font-size: 20px;
  font-weight: bold;
  color: var(--main-color);
  font-family: var(--sub-font);
  text-align: center;
}

[class*="works__item"] .small_text {
  font-size: 11px;
  font-weight: 400;
  color: var(--main-color);
  font-family: var(--main-font);
  text-align: center;
}

.works_list.pc {
  display: none;
}

@media (min-width: 768px) {
  .works_list.sp {
    display: none;
  }

  .section_content--works .cont_space {
    width: 100%;
    max-width: 100%;
  }

  .works_box {
    width: calc(100% - 40%);
    border-radius: 10px 0 0 10px;
    padding-top: clamp(60px, 10vw, 249px);
    padding-right: clamp(20px, 8vw, 123px);
    padding-bottom: clamp(60px, 10vw, 249px);
    padding-left: clamp(40px, 32vw, 384px);
    margin-left: auto;
    position: relative;
  }

  .works_box .ttl_wrap {
    margin-bottom: 48px;
  }

  .works_box .works_top {
    padding: 0;
  }

  .works_list.pc {
    display: grid;
    grid-template-columns: repeat(3, 160px);
    gap: 32px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translate(-50%, -50%);
  }

  .works_list.pc [class*="works__item"] {
    width: 160px;
    height: 160px;
    position: relative;
    aspect-ratio: 1 / 1;
    margin: inherit;
  }

  .works_list.pc [class*="works__item"] img {
    filter: grayscale(1) brightness(3);
  }

  .works_list.pc [class*="works__item"] .large_text {
    font-weight: 500;
    color: #fff;
  }

  .works_list.pc [class*="works__item"] .small_text {
    color: #fff;
  }

  /* ホバー時の動き */

  .works_list.pc [class*="works__item"] a:hover img {
    opacity: 1;
    filter: inherit;
    border-radius: 8px;
  }

  /* ロゴ中央だけホバー無効 */
  .works_list.pc .works__item--company_logo {
    pointer-events: none;
  }

  .works__item--company_logo img {
    object-fit: contain;
    transform: none !important;
    opacity: 1 !important;
    filter: inherit !important;
  }
}

/* 新着情報 */

.news_box {
  padding: 40px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--main-shadow);
}

.news_box .ui-btn {
  margin: 0 0 31px;
}

.news_item_body {
  border-top: 1px solid var(--point-color);
  padding: 16px 14.5px;
}

.news_item:last-of-type .news_item_body {
  border-bottom: none;
}

.news_date {
  font-size: 12px;
  color: var(--main-color);
  line-height: calc(16 / 12);
  font-family: var(--main-font);
  margin-bottom: 4px;
}

.news_title {
  font-size: 12px;
  line-height: calc(18 / 12);
  font-family: var(--main-font);
  color: var(--main-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .news_box {
    max-width: 863px;
    margin-inline: auto;
    padding: 40px 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 31px;
  }

  .news_item {
    max-width: 448px;
  }

  .ttl_box {
    display: flex;
    flex-direction: column;
  }

  .news_box.cont_ttl {
    margin-bottom: 40px;
  }

  .news_box .ui-btn {
    margin: 0;
  }

  .news_item_body {
    padding: 24px 6px;
    display: flex;
    align-items: baseline;
    gap: 16px;
  }

  .news_date {
    font-weight: 200;
    line-height: calc(18 / 12);
  }

  .news_title {
    font-weight: 200;
    line-height: calc(18 / 12);
  }

  .news_item a:hover .news_date,
  .news_item a:hover .news_title {
    font-weight: 400;
    transition: all 0.4s;
  }
}

/* 採用情報 */

.section_content--recruit .cont_space {
  width: calc(100% - 10px);
  margin-left: 0;
  margin-right: auto;
}

.recruit_box {
  background-color: var(--sub-color);
  padding: 40px 24px;
  border-radius: 0 10px 10px 0;
}

.ui-card__item {
  margin-bottom: 20px;
}

.card__detail img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 280 / 186;
  border-radius: 8px;
  margin-bottom: 16px;
  filter: grayscale(1) brightness(0.8);
}

.card__ttl {
  font-size: 14px;
  font-weight: 500;
  color: var(--main-color);
  line-height: calc(20 / 14);
  font-family: var(--main-font);
}

.ui-card__box .ui-btn {
  margin: inherit;
}

/* swiper */
.l-main .swiper-button-prev,
.l-main .swiper-button-next {
  position: static;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  margin-top: 0;
  cursor: pointer;
}

.swiper-button-prev img,
.swiper-button-next img {
  width: 64px;
  height: 64px;
  display: block;
}


.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  display: none;
}

.swiper_button-box {
  display: flex;
  align-items: stretch;
}

.swiper_bottom {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

@media (min-width: 780px) {
  .section_content--recruit {
    margin-bottom: 0;
  }

  .section_content--recruit .cont_space {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
  }

  .recruit_box .cont_ttl {
    margin-bottom: 40px;
  }

  .recruit_box {
    padding: 80px 0 80px 123px;
    border-radius: 0 32px 32px 0;
    width: calc(100% - 40%);
    margin-left: 0;
  }

  .ui-card__item {
    width: 320px;
    margin-bottom: 54px;
  }

  .card__detail img {
    aspect-ratio: 320 / 213;
  }

  .card__detail {
    position: relative;
    overflow: hidden;
  }

  /* グレー状態 */
  .card__detail img {
    transition: filter 0.6s ease, box-shadow 0.6s ease;
    will-change: filter, box-shadow;
    box-shadow: var(--point-shadow);
  }

  /* ホバーでカラーに戻す */
  .ui-card__item a:hover .card__detail img {
    filter: grayscale(0) brightness(1);
    box-shadow: none;
  }

  /* swiper */
  .swiper {
    height: auto;
    margin-right: 0;
    margin-left: inherit;
  }

  .swiper_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 0;
  }
}































/* ==============================
   MV Base Layout
============================== */
.mv {
  position: relative;
  /* min-height: 100vh; */
  /* padding: clamp(40px, 8vw, 80px); */
  background: #ffffff;
  color: #000000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans JP", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* padding-left: 20px; */
}

.mv_main-txt {
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
  margin-top: 200px;
}

/* ==============================
   Text Line
============================== */
.mv_line {
  position: relative;
  display: inline-block;
  padding: 0 0.40em;
  /* ← 上下 0、左右のみ維持 */
  margin-bottom: 0.18em;
}

.mv_line-text {
  display: inline-block;
  letter-spacing: 0;
  font-weight: 900;
}

/* === 1文字ずつ出るアニメーション === */
.mv__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
}

@keyframes mv-char-bounce {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }

  55% {
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
  }

  75% {
    transform: translateY(3px) scale(0.99);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mv.is-active .mv__char {
  animation: mv-char-bounce 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* ==============================
   BOX LINES - HTML/CSS only
   文字と枠線の距離：10px指定
============================== */
.mv_line-box {
  position: absolute;
  inset: -10px;
  /* ← 10px 固定 */
  pointer-events: none;
  opacity: 0;
}

/* 各辺の線共通 */
.mv_border {
  position: absolute;
  background: #000;
  opacity: 0;
}

/* 上辺（右→左） */
.mv_border-top {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right center;
}

/* 左辺（上→下） */
.mv_border-left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: center top;
}

/* 下辺（左→右） */
.mv_border-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

/* 右辺（下→上） */
.mv_border-right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  transform-origin: center bottom;
  transform: scaleY(0);
}

/* === 辺ごとのアニメーション === */
@keyframes border-grow-x {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes border-grow-y {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* === 枠線フェード消失 === */
@keyframes border-box-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* === 右上→左回りで1周描画 === */
.mv_line--box-active .mv_line-box {
  opacity: 1;
  animation: border-box-fade 0.3s ease-out 0.64s forwards;
}

.mv_line--box-active .mv_border-top {
  animation: border-grow-x 0.16s ease-out forwards;
}

.mv_line--box-active .mv_border-left {
  animation: border-grow-y 0.16s ease-out 0.16s forwards;
}

.mv_line--box-active .mv_border-bottom {
  animation: border-grow-x 0.16s ease-out 0.32s forwards;
}

.mv_line--box-active .mv_border-right {
  animation: border-grow-y 0.16s ease-out 0.48s forwards;
}

/* ==============================
   Caption
============================== */
.mv_caption {
  margin-top: 24px;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.16em;
  opacity: 0;
  transform: translateY(20px);
}

.mv_caption01 {
  /* margin-top: 40px; */
  margin-top: 10px;
  padding-left: 15px;
}

.mv_caption02 {
  margin-top: 16px;
  padding-left: 15px;
}

.mv_caption-label {
  font-weight: 700;
}

@keyframes mv-caption-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.mv.is-active .mv_caption01 {
  animation: mv-caption-up 0.8s ease-out forwards;
  animation-delay: 1.4s;
}

.mv.is-active .mv_caption02 {
  animation: mv-caption-up 0.8s ease-out forwards;
  animation-delay: 1.9s;
}

@media (max-width: 768px) {
  .mv_line-box {
    inset: -6px -10px;
    /* 上下-6px / 左右-10px */
  }

  .mv_line {
    white-space: nowrap;
  }
}

@media (min-width: 780px) {
  .mv_caption01 {
    margin-left: 25px;
  }

  .mv_caption02 {
    margin-left: 20px;
  }

  .mv_main-txt {
    /* display: flex;
    flex-flow: column nowrap; */
  }

  #mv {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .mv_line-text {
    font-size: 83px;
  }
}