/*------------------------------------
.recruit-hero（採用フルスクリーンヒーロー）
------------------------------------*/
.recruit-hero {
  position: relative;
  width: 100%;
  height: 74svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

/* 背景スライド */
.recruit-hero__bg {
  position: absolute;
  inset: 0;
}

.recruit-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.recruit-hero__slide.active {
  opacity: 1;
}

.recruit-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.recruit-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(15, 30, 45, 0.88) 0%,
    rgba(15, 30, 45, 0.5)  50%,
    rgba(15, 30, 45, 0.3)  100%
  );
}

/* コンテンツ */
.recruit-hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .recruit-hero__inner {
    padding: 6rem 3rem;
  }
}

@media (min-width: 1024px) {
  .recruit-hero__inner {
    padding: 7rem 5rem;
  }
}

/* キャッチコピー登場アニメーション */
@keyframes reveal-down {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(0);
    opacity: 1;
  }
}

.reveal-text {
  display: block;
  animation: reveal-down 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  opacity: 0;
}

/* フェードインアニメーション */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.recruit-hero__catch {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.recruit-hero__desc {
  font-size: 0.875rem;
  line-height: 2;
  text-align: justify;
  color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 1024px) {
  .recruit-hero__desc {
    font-size: 1.0625rem;
    line-height: 2.6;
    text-align: center;
  }
}

/* ヒーロー内ボタン */
.recruit-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.recruit-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: filter 0.2s, transform 0.2s;
}

.recruit-hero__btn:hover {
  transform: translateY(-2px);
}

.recruit-hero__btn--primary {
  background-color: var(--brand-accent);
  color: #fff;
}

.recruit-hero__btn--primary:hover {
  filter: brightness(1.1);
}

.recruit-hero__btn--outline {
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}

.recruit-hero__btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* スクロールインジケーター */
.recruit-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 1024px) {
  .recruit-hero__scroll {
    right: 3rem;
  }
}

.recruit-hero__scroll-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.recruit-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 3.5rem;
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.recruit-hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: scroll-line 2s ease-in-out infinite;
}


/*------------------------------------
.section-recruit-vision（条件だけで決めたくない人へ）
------------------------------------*/
.section-recruit-vision {
  background-color: var(--bg-sub);
  padding: 7rem 0;
}

@media (max-width: 1024px) {
  .section-recruit-vision {
    padding: 3rem 0;
  }
}

.section-recruit-vision__inner {
	position: relative;
	min-height: 600px;
}
.section-recruit-vision__container {
	max-width: 1200px;
	width: calc(100% - 3rem);
	margin: auto;
}
.section-recruit-vision__container > * {
	width: 50%;
}
.section-recruit-vision__img {
	position: absolute;
	top: 0;
	right: 0;
	height: 600px
}
.section-recruit-vision__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section-recruit-vision__txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 600px;
	margin-right: auto;
	padding-right: 5rem;
}
.section-recruit-vision__txt .section-title::after {
	left: 0;
	transform: none;
}
.section-recruit-vision__txt p {
	font-size: 0.875rem;
	line-height: 2;
	text-align: justify;
	margin: 0;
}
@media (min-width: 1024px) {
  .section-recruit-vision__txt p {
    font-size: 1rem;
  }
}
@media (max-width: 1024px) {
	.section-recruit-vision__inner {
		min-height: auto;
	}
	.section-recruit-vision__container {
		display: block;
		width: 100%;
		height: auto;
	}
	.section-recruit-vision__container > * {
		width: 100%;
	}
	.section-recruit-vision__img {
		position: static;
		height: auto;
		padding-left: 1.5rem;
	}
	.section-recruit-vision__txt {
		height: auto;
		margin: auto;
		padding: 2rem 1.5rem 0;
	}
}


/*------------------------------------
.section-recruit-policy（採用で大切にしていること）
------------------------------------*/
.section-recruit-policy {
  padding: 3rem 1.5rem 0;
  background-color: var(--bg-main);
}

@media (min-width: 1024px) {
  .section-recruit-policy {
    padding: 7rem 1.5rem 0;
  }
}

.section-recruit-policy__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .section-recruit-policy__inner {
    flex-direction: row;
    gap: 5rem;
  }
}

.section-recruit-policy__img {
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .section-recruit-policy__img {
    width: 44%;
  }
}

.section-recruit-policy__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.section-recruit-policy__body {
  flex: 1;
  text-align: center;
}
@media (min-width: 1024px) {
  .section-recruit-policy__body {
    text-align: justify;
  }
}

.section-recruit-policy__body .section-title {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.section-recruit-policy__body .section-title::after {
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1024px) {
  .section-recruit-policy__body .section-title::after {
    left: 0;
    transform: none;
  }
}

.section-recruit-policy__text {
  font-size: 0.875rem;
  line-height: 2;
  text-align: justify;
}

@media (min-width: 1024px) {
  .section-recruit-policy__text {
    font-size: 1rem;
  }
}


/*------------------------------------
.section-recruit-target（対象者訴求）
------------------------------------*/
.section-recruit-target {
  padding: 5rem 1.5rem;
  background-color: #fff;
}

@media (min-width: 1024px) {
  .section-recruit-target {
    padding: 7rem 1.5rem;
  }
}

.section-recruit-target__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.section-recruit-target__head {
  text-align: center;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .section-recruit-target__head {
    margin-bottom: 3.5rem;
  }
}

.target-layout {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .target-layout {
    flex-direction: row;
    gap: 5rem;
    align-items: stretch;
  }
}

/* ターゲットリスト */
.target-list {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #e2e8f0;
  align-self: stretch;
}

.target-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-main);
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .target-item {
    gap: 1.25rem;
    font-size: 1.125rem;
    padding: 1.5rem 0;
  }
}

.target-item__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent);
}

.target-item__icon svg {
  width: 100%;
  height: 100%;
}

/* ターゲット写真 */
.target-imgs {
  flex-shrink: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .target-imgs {
    width: 40%;
  }
}

.target-imgs img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.target-imgs img:first-child {
  margin-top: 2rem;
}

.target-imgs img:last-child {
  margin-top: -2rem;
}


/*------------------------------------
.section-recruit-reasons（3つの理由）
------------------------------------*/
.section-recruit-reasons {
  padding: 5rem 1.5rem;
  background-color: var(--brand-main);
  color: #fff;
}

@media (min-width: 1024px) {
  .section-recruit-reasons {
    padding: 7rem 1.5rem;
  }
}

.section-recruit-reasons__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.section-recruit-reasons__head {
  text-align: center;
  margin-bottom: 4rem;
}

.section-recruit-reasons__head .section-en-label {
  color: rgba(255, 255, 255, 0.5);
}

.section-recruit-reasons__lead {
  font-size: 0.875rem;
  line-height: 2;
  text-align: justify;
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 768px) {
  .section-recruit-reasons__lead {
    font-size: 1rem;
    text-align: center;
  }
}

/* 理由リスト（3枚横並び） */
.reason-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .reason-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reason-item__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.reason-item__img {
  overflow: hidden;
  flex-shrink: 0;
}

.reason-item__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.reason-item__body {
  flex: 1;
  padding: 1.75rem;
}

.reason-item__num {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
  opacity: 0.2;
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}
@media (min-width: 768px) {
  .reason-item__num {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
  }
}

.reason-item__title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.875rem;
}

.reason-item__desc {
  font-size: 0.875rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
}


/*------------------------------------
.section-recruit-nav（回遊導線）
------------------------------------*/
.section-recruit-nav {
  padding: 5rem 1.5rem;
  background-color: #f8fafc;
}

@media (min-width: 1024px) {
  .section-recruit-nav {
    padding: 7rem 1.5rem;
  }
}

.section-recruit-nav__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.section-recruit-nav__head {
  text-align: center;
  margin-bottom: 4rem;
}

/* ナビカードグリッド（3+3） */
.recruit-nav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .recruit-nav-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .recruit-nav-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.recruit-nav-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  background-color: #fff;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e8f0;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}

@media (min-width: 1024px) {
  .recruit-nav-card {
    padding: 1.25rem 1.5rem;
  }
}

.recruit-nav-card:hover {
  border-color: var(--brand-main);
  box-shadow: 0 4px 24px rgba(53, 90, 101, 0.12);
  transform: translateY(-3px);
}

/* プライマリカード（募集職種）*/
.recruit-nav-card--primary {
  background-color: var(--brand-main);
  border-color: var(--brand-main);
}

.recruit-nav-card--primary:hover {
  background-color: #2a4a54;
  border-color: #2a4a54;
}

.recruit-nav-card--primary .recruit-nav-card__icon {
  color: var(--brand-accent);
}

.recruit-nav-card--primary .recruit-nav-card__title {
  color: #fff;
}

.recruit-nav-card--primary .recruit-nav-card__desc {
  color: rgba(255, 255, 255, 0.65);
}

.recruit-nav-card--primary .recruit-nav-card__arrow {
  color: var(--brand-accent);
}

.recruit-nav-card__icon {
  width: 3rem;
  height: 3rem;
  color: var(--brand-main);
  margin-bottom: 1.25rem;
}

.recruit-nav-card__icon svg {
  width: 100%;
  height: 100%;
}

.recruit-nav-card__text {
  flex: 1;
}

.recruit-nav-card__title {
  font-size: 0.9375rem;
  font-weight: 900;
  color: var(--brand-main);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.recruit-nav-card__desc {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #64748b;
}

.recruit-nav-card__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0;
  color: var(--brand-accent);
}

.recruit-nav-card__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}


/*------------------------------------
.section-jobs（募集職種一覧リスト）
------------------------------------*/
.section-jobs {
  padding: 4rem 1.5rem;
  background-color: #fff;
  border-bottom: 1px solid #e2e8f0;
}

@media (min-width: 1024px) {
  .section-jobs {
    padding: 5rem 1.5rem;
  }
}

.section-jobs__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.section-jobs__head {
  margin-bottom: 2rem;
}

.section-jobs__title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--brand-main);
  letter-spacing: 0.04em;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .section-jobs__title {
    font-size: 1.5rem;
  }
}

/* 職種リスト：4カラムグリッド */
.jobs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  border-top: 1px solid #e2e8f0;
}

@media (min-width: 768px) {
  .jobs-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .jobs-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 2rem;
  }
}

.job-item {
  padding: 0.875rem 0;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.job-item::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--brand-accent);
}

.job-item__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  letter-spacing: 0.02em;
  line-height: 1.55;
  display: block;
}

@media (min-width: 1024px) {
  .job-item__title {
    font-size: 0.9375rem;
  }
}

/* 一覧下の共通ボタン */
.jobs-cta {
  text-align: center;
}

.jobs-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 3rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background-color: var(--brand-accent);
  transition: filter 0.2s, transform 0.2s;
}

.jobs-cta__btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}



/*------------------------------------
Slick カルーセル上書き（SP のみ）
理由：.js-reason-slider
------------------------------------*/

/* SP のみ適用 */
@media (max-width: 767px) {

  /* セクションの左右 padding を打ち消して画面端まで広げる */
  .section-recruit-reasons .js-reason-slider.slick-initialized {
    margin-left  : -1.5rem;
    margin-right : -1.5rem;
  }

  /* slick-list が overflow:hidden を持つので centerPadding が機能する */
  .js-reason-slider.slick-initialized .slick-list {
    padding-top    : 0;
    padding-bottom : 0.5rem; /* ドット分の余白 */
  }

  /* 各スライド */
  .js-reason-slider.slick-initialized .reason-item {
    padding-left  : 0.5rem;
    padding-right : 0.5rem;
  }

  /* スライダー内のfade-upを無効化（表示済み状態に固定） */
  .js-reason-slider.slick-initialized .reason-item.fade-up {
    opacity   : 1;
    transform : translateY(0);
  }

  .js-reason-slider.slick-initialized .slick-center .reason-item__inner {
    opacity    : 1;
    transform  : scale(1);
    transition : opacity 0.4s, transform 0.4s;
  }

  /* ドット */
  .js-reason-slider.slick-initialized .slick-dots {
    position : static;
    margin-top : 1rem;
  }

  .js-reason-slider.slick-initialized .slick-dots li button::before {
    color   : rgba(255, 255, 255, 0.3);
    opacity : 1;
    font-size : 10px;
  }

  .js-reason-slider.slick-initialized .slick-dots li.slick-active button::before {
    color   : var(--brand-accent);
    opacity : 1;
  }

}
/* /SP のみ */


/*------------------------------------
.reason-slider-wrap（矢印ボタン配置用ラッパー）
SP のみ有効・PC では矢印を非表示
------------------------------------*/
@media (max-width: 767px) {

  .reason-slider-wrap {
    position: relative;
  }

  /* 矢印ボタン共通 */
  .reason-slider__arrow {
    position        : absolute;
    top             : 38%;
    transform       : translateY(-50%);
    z-index         : 20;
    width           : 2.5rem;
    height          : 2.5rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: rgba(15, 30, 45, 0.55);
    border          : 1px solid rgba(255, 255, 255, 0.3);
    border-radius   : 50%;
    color           : #fff;
    cursor          : pointer;
    padding         : 0;
    transition      : background-color 0.2s;
  }

  .reason-slider__arrow:hover {
    background-color: rgba(15, 30, 45, 0.85);
  }

  .reason-slider__arrow svg {
    display        : block;
    width          : 20px;
    height         : 20px;
    stroke         : currentColor;
    pointer-events : none;
  }

  .reason-slider__arrow--prev { left : 0.25rem; }
  .reason-slider__arrow--next { right: 0.25rem; }

}

/* PC では非表示 */
@media (min-width: 768px) {
  .reason-slider__arrow {
    display: none;
  }
}