@charset "UTF-8";
/* =========================================================
   採用情報ページ
   構成（fig実測 2026-06-08）:
   FV(写真なし・緑グラデ) → marquee → 職種一覧Occupation →
   職種詳細×5(縦積み・同一構造) → Contact/Entry(共通) → footer(共通)
   ※ 旧Codex版のタブUI(__tab/__pane)は破棄。職種は縦積み＋アンカージャンプ。
   ========================================================= */
/* ---------- S1: FV（写真あり・薄い暗幕＋共通アーチドーム） ---------- */
.p-recruitFv::after {
  background: linear-gradient(180deg, rgba(37, 56, 54, 0.26) 0%, rgba(49, 70, 66, 0.24) 48%, rgba(255, 255, 255, 0) 100%);
}

.p-recruitFv .c-lowerFv__media {
  opacity: 1;
}

.p-recruitFv .c-lowerFv__media img {
  object-fit: cover;
  object-position: center;
}

.p-recruitFv .c-lowerFv__inner {
  z-index: 2;
  min-height: 536px;
}

/* ---------- 緑ドームステージ（FV〜職種一覧の背面） ---------- */
.p-recruitMarquee {
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 66px;
}

.p-recruitNav {
  gap: 21px;
}

.p-recruitNav .c-sectionNav__body {
  margin-top: 10px;
}

/* ---------- S3: 職種一覧（Occupation）ナビ ---------- */
.p-lowerSection--recruitNav {
  position: relative;
  z-index: 2;
  padding-block: 43px 100px;
}

.p-recruitNav {
  --section-nav-gap: 30px;
  --section-nav-padding-inline: 35px;
  --section-nav-grid-template: repeat(5, minmax(0, 1fr));
  --section-nav-list-gap: 20px 30px;
  --section-nav-link-min-height: 60px;
  --section-nav-link-padding: 18px 20px 18px 24px;
  --section-nav-link-min-height-sp: 54px;
  --section-nav-link-padding-sp: 18px 20px;
  --section-nav-eyebrow-color: #20bcb0;
  --section-nav-eyebrow-size: 44px;
  --section-nav-eyebrow-weight: 500;
  --section-nav-eyebrow-line-height: 40px;
  --section-nav-eyebrow-letter-spacing: 0;
  --section-nav-eyebrow-size-sp: 26px;
  --section-nav-eyebrow-line-height-sp: 1.14;
  --section-nav-title-color: #505050;
  --section-nav-title-letter-spacing: 0.48px;
  --section-nav-link-color: #00a49d;
  --section-nav-link-size: 14px;
}

.p-recruitNav .c-sectionNav__link::after {
  width: 12px;
  height: 12px;
  border: 0;
  background: url("../images/icon_recruit-occupation-arrow-down.svg") center/contain no-repeat;
  transform: none;
}

/* ---------- S4-8: 職種詳細ブロック（共通コンポーネント・縦積み） ---------- */
.p-recruitJob {
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding-top: 50px;
}

.p-recruitJob--visiting::before,
.p-recruitJob--office::before,
.p-recruitJob--clerical::before,
.p-recruitJob--supporter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(485px, 100%);
  z-index: -1;
  top: 0;
  pointer-events: none;
}

.p-recruitJob--visiting::before,
.p-recruitJob--clerical::before {
  background: linear-gradient(180deg, #d0fdd8 0%, rgba(208, 253, 216, 0.78) 28%, rgba(255, 255, 255, 0.96) 68%, #ffffff 100%);
}

.p-recruitJob--office::before {
  background: linear-gradient(180deg, #9eebc6 0%, rgba(158, 235, 198, 0.76) 28%, rgba(255, 255, 255, 0.96) 68%, #ffffff 100%);
}

.p-recruitJob--supporter::before {
  background: linear-gradient(180deg, #9eebc6 0%, rgba(158, 235, 198, 0.76) 28%, rgba(255, 255, 255, 0.96) 68%, #ffffff 100%);
}
.p-recruitJob--outpatient {
  padding-top: 0;
}
.p-recruitJob .l-container {
  width: min(1163px, 100% - 48px);
}

.p-recruitJob__head {
  display: grid;
  gap: 10px;
  margin-bottom: 58px;
  margin-left: 3px;
}

.p-recruitJob__intro {
  display: grid;
  grid-template-columns: 499px minmax(0, 1fr);
  gap: 122px;
  align-items: start;
  margin-bottom: 99px;
}

.p-recruitJob__heroImage {
  aspect-ratio: 499/494;
  overflow: hidden;
  border-radius: 10px;
}

.p-recruitJob__heroImage .p-servicePage__heroVisual {
  width: 100%;
  height: 100%;
}

.p-recruitJob__heroImage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.p-recruitJob__introBody {
  display: grid;
  gap: 38px;
  padding-top: 74px;
}

.p-recruitJob__lead {
  display: grid;
  gap: 25px;
}

.p-recruitJob__interviews {
  display: grid;
  gap: 20px;
  margin-bottom: 96px;
}

.p-recruitJob__timelineInner .p-recruitJob__subHeading {
  margin-left: -6px;
}

.p-recruitJob__interviews .p-recruitJob__subHeading {
  margin-bottom: 10px;
}

.p-recruitJob__interviewCard {
  display: grid;
  grid-template-columns: 386px minmax(0, 1fr);
  gap: 58px;
  align-items: start;
  padding-block: 50px;
  padding-inline: 50px 57px;
  border: 1px solid #c1e3e1;
  border-radius: 10px;
  background: #f2f9f2;
  box-shadow: none;
}

.p-recruitJob__interviewPhoto {
  aspect-ratio: 386/314;
  overflow: hidden;
  border-radius: 18px;
}

.p-recruitJob__interviewPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-recruitJob__interviewBody {
  margin-top: 30px;
  display: grid;
  gap: 24px;
}

.p-recruitJob__interviewMeta {
  padding-left: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 27px;
  padding-bottom: 20px;
  border-bottom: 1px solid #c1e3e1;
}

.p-recruitJob__interviewText {
  display: grid;
  gap: 15px;
}

.p-recruitJob__timeline {
  background: #f2f9f2;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 90px 100px;
}

.p-recruitJob__timelineInner {
  width: min(1142px, 100% - 48px);
  margin-inline: auto;
}

.p-recruitJob__flow {
  margin-left: 13px;
  margin-top: 60px;
  position: relative;
  display: grid;
  gap: 0;
}

/* レール上を 9:00→18:00 へ流れる移動ドット */
.p-recruitJob__flow::before {
  content: "";
  position: absolute;
  left: 2px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #44bc9a;
  animation: recruitFlowDot 3.2s ease-in-out infinite;
}

@keyframes recruitFlowDot {
  0% {
    top: 90px;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 90px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-recruitJob__flow::before {
    display: none;
  }
}
.p-recruitJob__flowStep {
  position: relative;
  display: grid;
  grid-template-columns: 176px 179px minmax(0, 1fr);
  align-items: start;
  padding-bottom: 40px;
}

/* 区切り線：カード（画像左〜右端 / fig: x297・w946）だけに引く。時刻・レール部分には引かない */
.p-recruitJob__flowStep::before {
  content: "";
  position: absolute;
  left: 176px;
  right: 0;
  bottom: 0;
  height: 1.5px;
    background: #cfcfcf;
  opacity: 0.5;
}

.p-recruitJob__flowStep:last-child::before {
  display: none;
}

/* 縦レール：各ステップにセグメントを描き、9:00ドット〜18:00ドットだけ繋ぐ
   （最初は下のみ／最後は上のみ。本文が画像より長くてもドット=画像中央に固定） */
.p-recruitJob__flowStep::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 1.5px;
  content: "";
  background: #c1e5e7;
}

.p-recruitJob__flowStep:first-child::after {
  top: 90px;
}

.p-recruitJob__flowStep:last-child::after {
  bottom: auto;
  height: 130px;
}

.p-recruitJob__flowStep + .p-recruitJob__flowStep {
  padding-top: 40px;
}

.p-recruitJob__flowStep:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.p-recruitJob__flowTime {
  position: relative;
  display: flex;
  align-items: center;
  align-self: start;
  height: 179px;
  padding-left: 56px;
}

.p-recruitJob__flowTime::before {
  position: absolute;
  top: calc(50% - 7px);
  left: 0;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  content: "";
  background: var(--flow-accent, #b0e0b9);
}

/* 時刻＆ドットの色：9:00→18:00 で段階的に濃く（fig実測） */
.p-recruitJob__flowStep:nth-child(1) {
  --flow-accent: #b0e0b9;
}

.p-recruitJob__flowStep:nth-child(2) {
  --flow-accent: #9ad5a5;
}

.p-recruitJob__flowStep:nth-child(3) {
  --flow-accent: #8bd098;
}

.p-recruitJob__flowStep:nth-child(4) {
  --flow-accent: #62c5a9;
}

.p-recruitJob__flowStep:nth-child(5) {
  --flow-accent: #44bc9a;
}

.p-recruitJob__flowImage {
  width: 179px;
  height: 179px;
  overflow: hidden;
  border-radius: 5px;
}

.p-recruitJob__flowImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-recruitJob__flowBody {
  display: grid;
  gap: 25px;
  padding-top: 5px;
  padding-left: 58px;
}

@media screen and (max-width: 1365px) {
  .p-recruitFv .c-lowerFv__inner {
    min-height: 39.2386530015vw;
  }
  .p-recruitMarquee {
    padding-bottom: 4.831625183vw;
  }
  .p-lowerSection--recruitNav {
    padding-block: 3.1478770132vw 7.3206442167vw;
  }
  .p-recruitNav {
    --section-nav-gap: calc(30 / 1366 * 100vw);
    --section-nav-padding-inline: calc(35 / 1366 * 100vw);
    --section-nav-list-gap: calc(20 / 1366 * 100vw) calc(30 / 1366 * 100vw);
    --section-nav-link-min-height: calc(60 / 1366 * 100vw);
    --section-nav-link-padding: calc(18 / 1366 * 100vw) calc(20 / 1366 * 100vw)
      calc(18 / 1366 * 100vw) calc(24 / 1366 * 100vw);
  }
  .p-recruitJob {
    padding-top: 7.3206442167vw;
  }
  .p-recruitJob__head {
    margin-bottom: 4.2459736457vw;
  }
  .p-recruitJob__intro {
    grid-template-columns: minmax(0, 36.5300146413vw) minmax(0, 1fr);
    gap: 8.9311859444vw;
    margin-bottom: 7.2474377745vw;
  }
  .p-recruitJob__introBody {
    gap: 2.7818448023vw;
    padding-top: 5.4172767204vw;
  }
  .p-recruitJob__lead {
    gap: 1.8301610542vw;
  }
  .p-recruitJob__interviews {
    gap: 1.4641288433vw;
    margin-bottom: 7.027818448vw;
  }
  .p-recruitJob__interviewCard {
    grid-template-columns: minmax(0, 28.2576866764vw) minmax(0, 1fr);
    gap: 4.2459736457vw;
    padding-block: 3.6603221083vw;
    padding-inline: 3.6603221083vw 4.1727672035vw;
    align-items: center;
  }
  .p-recruitJob__interviewBody {
    margin-top: 2.196193265vw;
    gap: 1.756954612vw;
  }
  .p-recruitJob__interviewMeta {
    gap: 1.9765739385vw;
    padding-bottom: 1.4641288433vw;
  }
  .p-recruitJob__interviewText {
    gap: 1.0980966325vw;
  }
  .p-recruitJob__timeline {
    padding-block: 6.588579795vw 7.3206442167vw;
  }
  .p-recruitJob__flow {
    margin-left: 0.9516837482vw;
    margin-top: 4.39238653vw;
  }
  .p-recruitJob__flowStep {
    grid-template-columns: 12.8843338214vw 13.1039531479vw minmax(0, 1fr);
    padding-bottom: 2.9282576867vw;
  }
  .p-recruitJob__flowStep::before {
    left: 12.8843338214vw;
  }
  .p-recruitJob__flowStep:first-child::after {
    top: 6.588579795vw;
  }
  .p-recruitJob__flowStep:last-child::after {
    height: 9.5168374817vw;
  }
  .p-recruitJob__flowStep + .p-recruitJob__flowStep {
    padding-top: 2.9282576867vw;
  }
  .p-recruitJob__flowTime {
    height: 13.1039531479vw;
    padding-left: 4.0995607613vw;
  }
  .p-recruitJob__flowImage {
    width: 13.1039531479vw;
    height: 13.1039531479vw;
  }
  .p-recruitJob__flowBody {
    gap: 1.8301610542vw;
    padding-top: 0.3660322108vw;
    padding-left: 4.2459736457vw;
  }
}
@media screen and (max-width: 1100px) {
  .p-recruitNav {
    --section-nav-grid-template: repeat(3, minmax(0, 1fr));
  }
  .p-recruitJob__intro {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 88px;
    justify-items: center;
  }
  .p-recruitJob__heroImage {
    width: min(100%, 440px);
    max-width: 560px;
    margin-inline: auto;
  }
  .p-recruitJob--outpatient .p-recruitJob__heroImage {
    aspect-ratio: 4/2;
  }
  .p-recruitJob--visiting .p-recruitJob__heroImage {
    aspect-ratio: 4/2;
  }
  .p-recruitJob--office .p-recruitJob__heroImage {
    aspect-ratio: 4/2;
  }
  .p-recruitJob--clerical .p-recruitJob__heroImage {
    aspect-ratio: 4/2;
  }
  .p-recruitJob--supporter .p-recruitJob__heroImage {
    aspect-ratio: 4/2;
  }
  .p-recruitJob__introBody {
    padding-top: 0;
    width: min(100%, 640px);
  }
  .p-recruitJob__catch {
    text-align: center;
  }
  .p-recruitJob__timeline {
    padding-block: 80px;
  }
}
@media screen and (max-width: 900px) {
  .p-recruitJob__interviewCard {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-recruitJob__interviewPhoto {
    width: min(100%, 480px);
    max-width: 480px;
    margin-inline: auto;
    aspect-ratio: 4/2;
  }
  .p-recruitJob__timeline {
    padding-block: 64px;
  }
  .p-recruitJob__flowStep {
    grid-template-columns: 140px 140px minmax(0, 1fr);
    column-gap: 24px;
    padding-bottom: 32px;
    align-items: center;
  }
  .p-recruitJob__flowStep::before {
    left: 140px;
  }
  .p-recruitJob__flowStep + .p-recruitJob__flowStep {
    padding-top: 32px;
  }
  .p-recruitJob__flowStep:first-child::after {
    top: 70px;
  }
  .p-recruitJob__flowStep:last-child::after {
    height: 102px;
  }
  .p-recruitJob__flowTime {
    height: 140px;
    padding-left: 32px;
  }
  .p-recruitJob__flowImage {
    width: 140px;
    height: 140px;
  }
  .p-recruitJob__flowBody {
    padding-top: 14px;
    padding-left: 30px;
  }
}
@media screen and (max-width: 768px) {
  .p-recruitNav {
    --section-nav-grid-template: repeat(2, minmax(0, 1fr));
    --section-nav-gap: 24px;
    --section-nav-padding-inline: 0px;
    --section-nav-list-gap: 16px;
  }
  .p-recruitNav .c-sectionNav__item:last-child {
    grid-column: 1/-1;
    width: 100%;
    justify-self: stretch;
  }
  .p-recruitJob {
    padding-top: 84px;
  }
  .p-recruitJob__head {
    margin-bottom: 46px;
    margin-left: 0;
  }
  .p-recruitJob__intro {
    gap: 32px;
    margin-bottom: 72px;
  }
  .p-recruitJob__interviewCard {
    padding: 36px 32px;
    gap: 20px;
  }
  .p-recruitJob__interviewBody {
    margin-top: 0;
  }
  .p-recruitJob__timeline {
    padding-block: 56px;
  }
  .p-recruitJob__flowStep {
    grid-template-columns: 124px 124px minmax(0, 1fr);
    column-gap: 20px;
    padding-bottom: 28px;
  }
  .p-recruitJob__flowStep::before {
    left: 124px;
  }
  .p-recruitJob__flowStep + .p-recruitJob__flowStep {
    padding-top: 28px;
  }
  .p-recruitJob__flowStep:first-child::after {
    top: 62px;
  }
  .p-recruitJob__flowStep:last-child::after {
    height: 90px;
  }
  .p-recruitJob__flowTime {
    height: 124px;
    padding-left: 28px;
  }
  .p-recruitJob__flowImage {
    width: 124px;
    height: 124px;
    align-self: center;
  }
  .p-recruitJob__flowBody {
    padding-top: 8px;
    padding-left: 18px;
  }
}
@media screen and (max-width: 600px) {
  .p-recruitJob__flow::before {
    display: none;
  }
  .p-recruitJob__flowStep:first-child::after {
    top: 0px;
  }
  .p-recruitJob__flowStep::after {
    left: 6px;
    top: 22px;
    bottom: -22px;
    width: 1.5px;
  }
  .p-recruitJob__flowStep {
    grid-template-columns: 1fr;
    row-gap: 14px;
    column-gap: 0;
  }
  .p-recruitJob__flowStep::before {
    left: 26px;
  }
  .p-recruitJob__flowTime {
    height: auto;
    padding-left: 26px;
  }
  .p-recruitJob__flowImage {
    width: calc(100% - 26px);
    max-width: calc(100% - 26px);
    height: 250px;
    aspect-ratio: auto;
    margin-left: 26px;
  }
  .p-recruitJob__flowBody {
    padding-top: 0;
    padding-left: 26px;
  }
  .p-recruitJob__flowStep:last-child::after {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .p-recruitIntroStage {
    margin-top: -162px;
    padding-top: 60px;
    background-size: 980px auto;
  }
  .p-lowerSection--recruitNav {
    padding-block: 28px 72px;
  }
  .p-recruitNav {
    --section-nav-grid-template: 1fr;
    --section-nav-gap: 18px;
    --section-nav-padding-inline: 0px;
    --section-nav-list-gap: 12px;
  }
  .p-recruitNav .c-sectionNav__item:last-child {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
  .p-recruitJob .l-container,
  .p-recruitJob__timelineInner {
    width: min(1163px, 100% - 40px);
  }
  .p-recruitJob {
    padding-top: 72px;
  }
  .p-recruitJob__head {
    gap: 8px;
    margin-bottom: 34px;
  }
  .p-recruitJob__intro {
    gap: 24px;
    margin-bottom: 56px;
  }
  .p-recruitJob__heroImage {
    border-radius: 8px;
  }
  .p-recruitJob__introBody {
    gap: 24px;
  }
  .p-recruitJob__interviews {
    gap: 16px;
    margin-bottom: 68px;
  }
  .p-recruitJob__timelineInner .p-recruitJob__subHeading,
  .p-recruitJob__interviews .p-recruitJob__subHeading {
    margin-left: 0;
  }
  .p-recruitJob__interviewCard {
    padding: 24px 20px 28px;
    gap: 18px;
  }
  .p-recruitJob__interviewPhoto {
    width: 100%;
    max-width: none;
    height: 300px;
    aspect-ratio: auto;
  }
  .p-recruitJob__interviewMeta {
    padding-left: 0;
    gap: 12px 20px;
    padding-bottom: 14px;
  }
  .p-recruitJob__interviewBody {
    gap: 18px;
  }
  .p-recruitJob__timeline {
    padding-block: 40px 48px;
  }
  .p-recruitJob__flow {
    margin-left: 0;
    margin-top: 32px;
  }
  .p-recruitJob__flowStep {
    row-gap: 12px;
    padding-bottom: 24px;
  }
  .p-recruitJob__flowTime {
    padding-left: 22px;
  }
  .p-recruitJob__flowTime::before {
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
  }
  .p-recruitJob__flowImage {
    max-width: calc(100% - 22px);
  }
}
@media screen and (max-width: 414px) {
  .p-recruitJob {
    padding-top: 64px;
  }
  .p-recruitJob__interviewCard {
    padding: 22px 18px 24px;
  }
  .p-recruitJob__flowTime {
    padding-left: 20px;
  }
}
@media screen and (max-width: 375px) {
  .p-recruitJob__intro {
    gap: 20px;
  }
  .p-recruitJob__interviewCard {
    padding-inline: 16px;
  }
}