@charset "UTF-8";

/*--------------------------------
  mv
--------------------------------*/
#mv {
  overflow: hidden;
  position: relative;
}
#mv .mv-inr {
  gap: 16px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
#mv .mv-slider {
  height: 80vh;
  width: 100%;
}

#mv .mv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes mvCopyFadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--mv-copy-offset));
  }
  to {
    opacity: 1;
    transform: translateY(var(--mv-copy-offset));
  }
}

/* nav */
#mv .hd-primary {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 120px 24px 0;
}
#mv .hd-logo {
  width: 146px;
  margin-bottom: 48px;
}
#mv .hd-logo a {
  display: block;
}

#mv .hd-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
#mv .hd-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#mv .hd-nav-item {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  letter-spacing: 0.2em;
  position: relative;
  margin-bottom: 30px;
  padding-left: 26px;
  white-space: nowrap;
}
#mv .hd-nav-item:last-child {
  margin-bottom: 0;
}
#mv .hd-nav-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 2px;
  border-radius: 50%;
  background-color: var(--color-red-1);
}
@media screen and (max-width: 1800px) {
  #mv .mv-slider {
    height: 800px;
  }
}
@media screen and (max-width: 960px) {
  #mv .mv-slider {
    height: 600px;
  }
  #mv .hd-primary {
    padding: 32px 24px 0;
  }
  #mv .hd-logo {
    margin-bottom: 32px;
    width: 100px;
  }
  #mv .hd-nav-item {
    margin-bottom: 20px;
    padding-left: 16px;
  }
  #mv .hd-nav-item::before {
    left: 0;
    width: 8px;
  }
}
@media screen and (max-width: 768px) {
  #mv .mv-inr {
    gap: 12px;
  }
  #mv .mv-slider {
    height: 480px;
  }
  #mv .hd-logo {
    margin-bottom: 24px;
    width: 80px;
  }
  #mv .hd-nav-item {
    font-size: var(--fs-14);
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 600px) {
  #mv .mv-inr {
    gap: 8px;
  }
  #mv .mv-slider {
    height: 400px;
  }
  #mv .hd-primary {
    position: fixed;
    top: 16px;
    left: 16px;
    height: auto;
    background-color: initial;
    padding: 0;
    z-index: 10;
  }
  #mv .hd-nav {
    display: none;
  }
  #mv .hd-logo {
    width: 40px;
  }
}
/* copy */
#mv .mv-copy {
  position: absolute;
  right: 20%;
  top: 50%;
  transform: translateY(-65%);
  z-index: 20;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
#mv .mv-copy img {
  --mv-copy-offset: 0px;
  width: 53px;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(var(--mv-copy-offset));
  animation: mvCopyFadeIn 1.2s ease-out forwards;
}
#mv .mv-copy .mv-copy-01 {
  animation-delay: 0.7s;
  --mv-copy-offset: 45px;
}
#mv .mv-copy .mv-copy-02 {
  animation-delay: 0.2s;
}
@media screen and (max-width: 960px) {
  #mv .mv-copy {
    gap: 16px;
  }
  #mv .mv-copy img {
    width: 40px;
  }
}
@media screen and (max-width: 600px) {
  #mv .mv-copy {
    gap: 12px;
  }
  #mv .mv-copy img {
    width: 34px;
  }
}

/*--------------------------------
  copy
--------------------------------*/
#copy .copy-en {
  display: block;
  width: 90%;
  height: auto;
  object-fit: contain;
  margin: 0 auto 8px;
}
#copy .copy-jp {
  font-size: var(--fs-24);
  text-align: center;
}
#copy .images {
  gap: 12px;
}
#copy .images img {
  width: calc(25% - 9px);
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 960px) {
  #copy .images {
    gap: 8px;
  }
  #copy .images img {
    width: calc(25% - 6px);
    height: 160px;
    object-fit: cover;
  }
}
@media screen and (max-width: 768px) {
  #copy .copy-en {
    width: 80%;
    max-width: 400px;
    margin-bottom: 16px;
  }
}

/*--------------------------------
  news
 --------------------------------*/
#t-news {
  position: relative;
}
#t-news::after {
  content: "";
  position: absolute;
  top: -127px;
  left: 0;
  width: 100%;
  height: calc(100% + 127px);
  background-color: var(--color-white);
  z-index: -1;
}
#t-news .news-hd {
  gap: 80px;
  padding-bottom: 40px;
}

@media screen and (max-width: 960px) {
  #t-news::after {
    top: -96px;
    height: calc(100% + 96px);
  }
  #t-news .news-hd {
    gap: 40px;
  }
}
@media screen and (max-width: 768px) {
  #t-news .news-hd {
    flex-direction: column;
    gap: 16px;
  }
}

/*--------------------------------
  about
--------------------------------*/
#t-about .about-img {
  width: 100%;
  height: 448px;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  #t-about .about-img {
    height: 320px;
  }
}
@media screen and (max-width: 600px) {
  #t-about .about-img {
    height: 240px;
  }
}
#t-about .t-about-hd .pin-img {
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  #t-about .t-about-hd .pin-img {
    transform: translateY(0);
  }
}
#t-about .content {
  justify-content: center;
  align-items: center;
}
#t-about .content .ttl {
  color: var(--color-red-2);
  letter-spacing: 0.2em;
  font-size: 90px;
  font-weight: var(--fw-bold);
  background-color: var(--color-white);
  line-height: 1;
  padding: 10px 16px 14px;
  border: 4px solid var(--color-red-2);
  width: fit-content;
  height: fit-content;
}

#t-about .content .desc {
  position: relative;
  font-size: var(--fs-21);
  padding: 64px 0;
  padding-left: 40px;
  flex: 1;
}

#t-about .content .desc::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% + 120px);
  height: 100%;
  border: 1.2px solid var(--color-red-2);
  z-index: -1;
}
#t-about .content.top {
  margin-bottom: 72px;
}
#t-about .content.bottom .desc {
  width: 100%;
}
#t-about .content.bottom .circle-txt {
  transform: translateY(-50%);
}
#t-about .content.bottom .txt-wrap {
  flex: 1;
}
#t-about .content.bottom .desc::before {
  height: calc(100% + 56px);
}
#t-about .t-about-txt-img {
  width: 70%;
  margin-left: auto;
  margin-right: 0;
  object-fit: contain;
}
@media screen and (max-width: 1400px) {
  #t-about .content .ttl {
    font-size: 72px;
  }
}
@media screen and (max-width: 1100px) {
  #t-about .content .ttl {
    font-size: 64px;
  }
  #t-about .content .desc {
    padding: 48px 0;
    padding-left: 32px;
  }
}
@media screen and (max-width: 960px) {
  #t-about .content {
    flex-direction: column;
  }
  #t-about .content .ttl {
    font-size: 64px;
    margin-left: 0;
    margin-right: auto;
  }
  #t-about .content .desc {
    padding: 40px;
    width: 90%;
    font-size: var(--fs-18);
  }
  #t-about .content .desc::before {
    width: 100%;
    height: calc(100% + 48px);
    top: -48px;
  }
  #t-about .content.top .desc {
    padding: 40px 64px;
    width: auto;
  }
  #t-about .content.bottom {
    flex-direction: row;
    align-items: flex-start;
  }
  #t-about .content.bottom .txt-wrap {
    width: 100%;
    flex: 1;
  }
  #t-about .content.bottom .ttl {
    margin-left: auto;
    margin-right: 0;
  }
  #t-about .content.bottom .circle-txt {
    transform: translateY(-30%);
  }
  #t-about .content.bottom .desc {
    width: 90%;
  }
  #t-about .content.bottom .desc::before {
    top: initial;
    bottom: -48px;
    width: calc(100% + 40px);
  }
}
@media screen and (max-width: 768px) {
  #t-about .content .ttl {
    font-size: var(--fs-32);
    border: 3px solid var(--color-red-2);
  }
  #t-about .content .desc {
    padding: 24px;
  }
  #t-about .content .desc::before {
    height: calc(100% + 24px);
    top: -24px;
  }
  #t-about .content.top {
    margin-bottom: 40px;
  }
  #t-about .content.top .desc {
    padding: 24px 40px;
  }
  #t-about .content.bottom {
    gap: 24px;
  }
  #t-about .content.bottom .desc {
    width: 95%;
  }
  #t-about .content.bottom .desc::before {
    bottom: -24px;
    top: initial;
    height: calc(100% + 24px);
  }
  #t-about .t-about-txt-img {
    width: 90%;
  }
}
@media screen and (max-width: 600px) {
  #t-about .content .ttl {
    white-space: nowrap;
    padding: 4px 8px 6px;
  }
  #t-about .content.bottom .desc::before {
    width: 100%;
  }
  #t-about .content.top {
    margin-bottom: 24px;
  }
  #t-about .content.top .desc {
    padding: 16px;
    width: 90%;
  }
  #t-about .content.bottom {
    gap: 24px;
    flex-direction: column-reverse;
  }
  #t-about .content.bottom .desc {
    width: 90%;
  }
  #t-about .content.bottom .circle-txt {
    transform: initial;
    margin-left: auto;
    margin-right: auto;
  }
  #t-about .t-about-txt-img {
    margin-top: 16px;
  }
}

/*--------------------------------
  strengths
--------------------------------*/
#t-str {
  position: relative;
}
#t-str::after {
  content: "";
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: calc(100% + 80px);
  background-color: var(--color-beige-2);
  z-index: -2;
}
#t-str .t-str-inr {
  position: relative;
}
#t-str .t-str-img {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc((min(100vw, 1300px) - 100%) * -0.5);
  gap: 8px;
}
#t-str .t-str-img img {
  width: 310px;
  height: auto;
  object-fit: contain;
}
#t-str .t-str-hd {
  width: 50%;
}

@media screen and (max-width: 1300px) {
  #t-str .t-str-img {
    width: 50%;
  }
  #t-str .t-str-img img {
    width: calc(50% - 4px);
  }
}
@media screen and (max-width: 1100px) {
  #t-str::after {
    top: -60px;
    height: calc(100% + 60px);
  }
}
@media screen and (max-width: 768px) {
  #t-str::after {
    top: -40px;
    height: calc(100% + 40px);
  }
  #t-str .t-str-img {
    gap: 4px;
  }
  #t-str .t-str-img img {
    width: calc(50% - 2px);
    height: 200px;
    object-fit: cover;
  }
}
@media screen and (max-width: 600px) {
  #t-str::after {
    top: -24px;
    height: calc(100% + 24px);
  }
}

#t-str .t-str-cards {
  gap: 64px;
}
#t-str .t-str-cards .card {
  width: calc(33.3333% - 42.7px);
}
#t-str .t-str-cards .card.card-02 {
  padding-top: 56px;
}
#t-str .t-str-cards .card.card-03 {
  padding-top: 112px;
}
#t-str .t-str-cards .card .num-img {
  margin-left: auto;
  margin-right: auto;
}
#t-str .t-str-cards .card .body {
  border: 0.5px solid var(--color-red-2);
  background-color: var(--color-white);
}
#t-str .t-str-cards .card .body .ttl {
  font-size: var(--fs-18);
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--color-white);
  font-weight: var(--fw-bold);
  padding: 32px 0;
  background-color: var(--color-red-2);
}
#t-str .t-str-cards .card .body .txt-wrap {
  padding: 20px 32px;
}
#t-str .t-str-cards .card .body .txt-wrap .desc {
  letter-spacing: 0.2em;
}
#t-str .t-str-cards .card .body .txt-wrap .desc-01 {
  color: var(--color-red-2);
  font-weight: var(--fw-bold);
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--color-red-2);
}
#t-str .t-str-cards .card .body .txt-wrap .desc-02 {
  padding-top: 24px;
}
@media screen and (max-width: 1100px) {
  #t-str .t-str-cards {
    gap: 40px;
  }
  #t-str .t-str-cards .card {
    width: calc(33.3333% - 28.8px);
  }
}
@media screen and (max-width: 960px) {
  #t-str .t-str-cards {
    gap: 16px;
    padding-top: 24px;
  }
  #t-str .t-str-cards .card {
    width: calc(33.3333% - 10.7px);
  }
  #t-str .t-str-cards .card.card-02 {
    padding-top: 40px;
  }
  #t-str .t-str-cards .card.card-03 {
    padding-top: 80px;
  }
  #t-str .t-str-cards .card .body .ttl {
    padding: 24px 8px;
    font-size: var(--fs-17);
  }
  #t-str .t-str-cards .card .body .txt-wrap {
    padding: 24px 16px;
  }
  #t-str .t-str-cards .card .body .txt-wrap .desc {
    letter-spacing: 0.1em;
  }
  #t-str .t-str-cards .card .body .txt-wrap .desc-01 {
    padding-bottom: 16px;
  }
  #t-str .t-str-cards .card .body .txt-wrap .desc-02 {
    padding-top: 16px;
  }
}
@media screen and (max-width: 768px) {
  #t-str .t-str-cards {
    flex-direction: column;
    gap: 16px;
  }
  #t-str .t-str-cards .card {
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  #t-str .t-str-cards .card.card-02,
  #t-str .t-str-cards .card.card-03 {
    padding-top: 0;
  }
  #t-str .t-str-cards .card .body .ttl {
    padding: 16px 0;
  }
  #t-str .t-str-cards .card .body .txt-wrap {
    padding: 16px;
  }
}
@media screen and (max-width: 480px) {
  #t-str .t-str-cards .card {
    max-width: 100%;
  }
}

/*--------------------------------
  business
--------------------------------*/
#t-bus {
  position: relative;
}

#t-bus .t-bus-inr {
  position: relative;
}
#t-bus .t-bus-bg-02 {
  position: absolute;
  top: 0;
  right: 0;
  width: 203px;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #t-bus .t-bus-bg-02 {
    width: 150px;
    top: 24px;
  }
}
@media screen and (max-width: 600px) {
  #t-bus .t-bus-bg-02 {
    width: 120px;
    top: 16px;
  }
}
@media screen and (max-width: 480px) {
  #t-bus .t-bus-bg-02 {
    width: 100px;
    top: 12px;
  }
}
#t-bus .cards {
  flex-wrap: nowrap;
}
#t-bus .cards .card {
  width: 33.3333%;
}
#t-bus .cards .card .num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 40px;
}
#t-bus .cards .card .num .num-img {
  position: relative;
  transform: translateY(50%);
  z-index: -1;
}
#t-bus .cards .card .txt {
  padding: 0 24px;
  border-right: 1.2px solid var(--color-black-1);
  margin-bottom: 32px;
  height: 168px;
}
#t-bus .cards .card:last-child .txt {
  border-right: none;
}
#t-bus .cards .card .bus-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 40px;
}
#t-bus .cards .card .btn-more-02 {
  padding: 0 24px;
}
@media screen and (max-width: 1000px) {
  #t-bus .cards .card .txt {
    height: 200px;
  }
}
@media screen and (max-width: 900px) {
  #t-bus .cards .card .txt {
    height: 224px;
  }
}
@media screen and (max-width: 840px) {
  #t-bus .cards .card .num,
  #t-bus .cards .card .bus-img {
    margin-bottom: 24px;
  }
  #t-bus .cards .card .txt {
    height: 254px;
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 768px) {
  #t-bus .cards .card .txt {
    height: 200px;
    padding: 0 16px;
  }
}
@media screen and (max-width: 700px) {
  #t-bus .cards {
    flex-direction: column;
  }
  #t-bus .cards .card {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 24px;
    border-bottom: 1.2px solid var(--color-black-1);
  }
  #t-bus .cards .card .txt {
    height: auto;
    border-right: none;
  }
  #t-bus .cards .card .bus-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}
@media screen and (max-width: 480px) {
  #t-bus .cards .card .num,
  #t-bus .cards .card .bus-img {
    margin-bottom: 16px;
  }
}

/*--------------------------------
  works
--------------------------------*/
#t-works {
  position: relative;
  z-index: 1;
}
#t-works .solid-ttl.first-child {
  white-space: nowrap;
}
#t-works .cards {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
#t-works .cards .card {
  position: relative;
  padding: 120px 64px 48px 64px;
}
#t-works .cards .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: calc(100% + ((100vw - 1000px) / 2));
  height: 100%;
  max-width: calc(100% + 250px);
  background-color: var(--color-white);
  border: 1px solid var(--color-red-2);
  border-top: none;
  z-index: -2;
}
#t-works .cards .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--color-red-2) 0,
    var(--color-red-2) 80px,
    transparent 80px,
    transparent 202px,
    var(--color-red-2) 202px,
    var(--color-red-2) 100%
  );
  width: calc(100% + ((100vw - 1000px) / 2));
  max-width: calc(100% + 250px);
  z-index: -1;
}
#t-works .cards .card .num {
  position: absolute;
  top: -24px;
  width: 148px;
}
#t-works .cards .card .num img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#t-works .cards .card .ttl {
  color: var(--color-red-2);
  font-size: var(--fs-24);
  letter-spacing: 0.2em;
  padding-bottom: 24px;
}
#t-works .cards .card table {
  width: 60%;
  border-collapse: collapse;
}
#t-works .cards .card table th,
#t-works .cards .card table td {
  font-size: var(--fs-15);
  padding-bottom: 8px;
}
#t-works .cards .card table th {
  width: 100px;
  text-align-last: justify;
  font-weight: var(--fw-thin);
  vertical-align: top;
}
#t-works .cards .card table td {
  padding-left: 16px;
}

#t-works .cards .card .works-img {
  position: absolute;
  top: 50%;
  right: calc(-1 * min(((100vw - 1000px) / 2), 300px));
  transform: translateY(-50%);
  width: calc(40% + min(((100vw - 1000px) / 2), 300px));
  max-width: calc(40% + 300px);
  height: calc(100% - 80px);
  object-fit: cover;
}
/* 偶数番目のカード */
#t-works .cards .card:nth-child(even)::after {
  left: calc(-1 * min(((100vw - 1000px) / 2), 250px));
  width: calc(100% + min(((100vw - 1000px) / 2), 250px));
  max-width: calc(100% + 250px);
}
#t-works .cards .card:nth-child(even)::before {
  background: linear-gradient(
    to left,
    var(--color-red-2) 0,
    var(--color-red-2) 72px,
    transparent 72px,
    transparent 212px,
    var(--color-red-2) 212px,
    var(--color-red-2) 100%
  );
  left: calc(-1 * min(((100vw - 1000px) / 2), 250px));
  width: calc(100% + min(((100vw - 1000px) / 2), 250px));
  max-width: calc(100% + 250px);
}
#t-works .cards .card:nth-child(even) .num {
  left: auto;
  right: 64px;
  width: 165px;
}

#t-works .cards .card:nth-child(even) .ttl {
  width: 60%;
  margin-left: auto;
  margin-right: 0;
}

#t-works .cards .card:nth-child(even) table {
  margin-left: auto;
  margin-right: 0;
}

#t-works .cards .card:nth-child(even) .works-img {
  left: calc(-1 * min(((100vw - 1000px) / 2), 300px));
  right: auto;
}
@media screen and (max-width: 1100px) {
  #t-works .cards {
    gap: 40px;
  }
  #t-works .cards .card {
    padding: 64px 40px 40px 40px;
  }
  #t-works .cards .card::after,
  #t-works .cards .card:nth-child(even)::after,
  #t-works .cards .card::before,
  #t-works .cards .card:nth-child(even)::before {
    width: 100%;
    left: 0;
    right: 0;
    max-width: 100%;
  }
  #t-works .cards .card::before {
    background: linear-gradient(
      to right,
      var(--color-red-2) 0,
      var(--color-red-2) 40px,
      transparent 40px,
      transparent 131px,
      var(--color-red-2) 131px,
      var(--color-red-2) 100%
    );
  }
  #t-works .cards .card:nth-child(even)::before {
    background: linear-gradient(
      to left,
      var(--color-red-2) 0,
      var(--color-red-2) 32px,
      transparent 32px,
      transparent 140px,
      var(--color-red-2) 140px,
      var(--color-red-2) 100%
    );
  }
  #t-works .cards .card .ttl {
    padding-bottom: 16px;
  }
  #t-works .cards .card table,
  #t-works .cards .card:nth-child(even) .ttl {
    width: 50%;
  }
  #t-works .cards .card .works-img,
  #t-works .cards .card:nth-child(even) .works-img {
    width: calc(50% - 16px);
  }
  #t-works .cards .card .works-img {
    right: -2.5%;
  }
  #t-works .cards .card:nth-child(even) .works-img {
    left: -2.5%;
  }
  #t-works .cards .card .num {
    width: 83px;
  }

  #t-works .cards .card:nth-child(even) .num {
    width: 100px;
    right: 40px;
  }
}
@media screen and (max-width: 860px) {
  #t-works .cards .card table,
  #t-works .cards .card:nth-child(even) .ttl {
    width: 100%;
  }
  #t-works .cards .card .works-img,
  #t-works .cards .card:nth-child(even) .works-img {
    position: relative;
    right: auto;
    left: auto;
    transform: translateY(0);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 671 / 376;
  }
}
@media screen and (max-width: 600px) {
  #t-works .cards .card {
    padding: 40px 16px 16px 16px;
  }
  #t-works .cards .card::before {
    background: linear-gradient(
      to right,
      var(--color-red-2) 0,
      var(--color-red-2) 16px,
      transparent 16px,
      transparent 96px,
      var(--color-red-2) 96px,
      var(--color-red-2) 100%
    );
  }
  #t-works .cards .card:nth-child(even)::before {
    background: linear-gradient(
      to left,
      var(--color-red-2) 0,
      var(--color-red-2) 16px,
      transparent 16px,
      transparent 112px,
      var(--color-red-2) 112px,
      var(--color-red-2) 100%
    );
  }
  #t-works .cards .card .num {
    left: 24px;
    width: 63px;
  }
  #t-works .cards .card:nth-child(even) .num {
    width: 80px;
    right: 24px;
  }
  #t-works .cards .card .ttl {
    padding-bottom: 8px;
  }
  #t-works .cards .card table,
  #t-works .cards .card table tr,
  #t-works .cards .card table th,
  #t-works .cards .card table td {
    display: block;
    width: 100%;
  }
  #t-works .cards .card table th {
    width: 100px;
    padding-bottom: 4px;
  }
  #t-works .cards .card .works-img {
    margin-top: 24px;
  }
}

/*--------------------------------
  recruit
--------------------------------*/
#t-recruit .t-recruit-hd {
  padding-left: 15vw;
}
#t-recruit .solid-ttl,
#t-recruit .large-txt {
  margin-bottom: 16px;
  line-height: 1;
}
#t-recruit .solid-ttl:last-child {
  margin-bottom: 0;
}
#t-recruit .t-recruit-hd .pin-img {
  transform: translateY(50%);
}
#t-recruit .imgs {
  gap: 12px;
  margin-top: -24px;
  position: relative;
  z-index: -1;
}
#t-recruit .imgs img {
  width: calc(33.333% - 8px);
  height: auto;
  object-fit: cover;
}
#t-recruit .cmn-recruit .box {
  margin-top: -40px;
}
#t-recruit .items .ttl {
  font-size: var(--fs-32);
  color: var(--color-black-1);
  font-weight: var(--fw-bold);
  text-align: center;
  position: relative;
  padding: 0 40px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
#t-recruit .items .ttl::before,
#t-recruit .items .ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 3px;
  background-color: var(--color-black-1);
  transform: rotate(-45deg);
}
#t-recruit .items .ttl::before {
  left: -8px;
  transform: rotate(45deg);
}
#t-recruit .items .ttl::after {
  right: -8px;
}
#t-recruit .recruit-slider-wrapper {
  position: relative;
}
#t-recruit .recruit-slider .swiper-wrapper {
  align-items: stretch;
}
#t-recruit .recruit-slider .swiper-slide {
  height: auto;
  display: flex;
}
#t-recruit .recruit-card {
  padding: 48px 56px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-red-2);
  position: relative;
}
#t-recruit .recruit-card .hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
#t-recruit .recruit-card .hd .hd-ttl {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
}
#t-recruit .recruit-card .hd .tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: var(--fs-15);
  color: var(--color-black-1);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  border: 1px solid var(--color-black-1);
  background-color: var(--color-white);
  white-space: nowrap;
  line-height: 1;
}
#t-recruit .recruit-card .desc {
  font-size: var(--fs-14);
  color: var(--color-black-1);
  line-height: 1.8;
  margin-bottom: 16px;
  flex-grow: 1;
}
#t-recruit .recruit-card .meta {
  font-size: var(--fs-14);
  color: var(--color-black-1);
  font-weight: var(--fw-medium);
  margin-bottom: 24px;
}

#t-recruit .recruit-slider .swiper-pagination {
  position: relative;
  bottom: 0;
}
#t-recruit .recruit-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: var(--color-black-1);
  opacity: 0.3;
  margin: 0 8px;
}
#t-recruit .recruit-slider .swiper-pagination-bullet-active {
  opacity: 1;
}
@media screen and (max-width: 1400px) {
  #t-recruit .imgs {
    width: calc(100% + 5%);
    margin-left: -2.5%;
  }
}
@media screen and (max-width: 1024px) {
  #t-recruit .items .ttl {
    font-size: var(--fs-28);
    margin-bottom: 32px;
  }
  #t-recruit .imgs {
    gap: 8px;
    height: 300px;
  }
  #t-recruit .imgs img {
    width: calc(33.333% - 6px);
  }
  #t-recruit .cmn-recruit .box {
    margin-top: -24px;
  }
  #t-recruit .recruit-card {
    padding: 24px 20px;
  }
}
@media screen and (max-width: 768px) {
  #t-recruit .items .ttl {
    font-size: var(--fs-24);
    margin-bottom: 24px;
    padding: 0 32px;
  }
  #t-recruit .solid-ttl,
  #t-recruit .large-txt {
    margin-bottom: 8px;
  }
  #t-recruit .txt span:nth-child(2) {
    margin-left: 0;
  }
  #t-recruit .imgs {
    height: 240px;
  }
  #t-recruit .imgs img:first-of-type {
    object-position: center right;
  }
  #t-recruit .items .ttl::before,
  #t-recruit .items .ttl::after {
    width: 32px;
  }

  #t-recruit .recruit-card {
    padding: 20px 16px;
  }
  #t-recruit .recruit-card__title {
    font-size: var(--fs-18);
  }
  #t-recruit .recruit-card__description {
    font-size: var(--fs-13);
  }
  #t-recruit .recruit-card__meta {
    font-size: var(--fs-13);
  }
  #t-recruit .recruit-card__btn {
    padding: 10px 24px;
    font-size: var(--fs-13);
  }
}
@media screen and (max-width: 600px) {
  #t-recruit .recruit-card .hd,
  #t-recruit .recruit-card .meta {
    margin-bottom: 16px;
  }
  #t-recruit .recruit-card .desc {
    margin-bottom: 8px;
  }
}