/* ========================================
   お仕事紹介ページ専用CSS
======================================== */
.jd-main {
  padding-top: clamp(3.5rem, 5.15vw, 6.2rem);
}
/* ========================================
   FV：1920×744の背景写真＋メッセージ
======================================== */
.jd-hero {
  position: relative;
  width: 100%;
  line-height: 0;
}
/* 背景写真：1920×744基準 */
.jd-hero__bg {
  width: 100%;
  aspect-ratio: 1920 / 744;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* メッセージ：写真の上に中央配置 */
.jd-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* キャッチコピー */
.jd-hero__catch {
  font-size: clamp(2rem, 5vw, 6rem);
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.4;
  opacity: 1 !important;
  text-shadow: 0 0.21vw 0.21vw rgba(0, 0, 0, 0.8);
}
/* ========================================
   FV下：H1エリア
   白背景をなくしてsite-bgが下まで見えるように
======================================== */
.jd-intro {
  background: transparent;
  position: relative;
  z-index: 1;
}
.jd-intro__inner {
  max-width: var(--content-max, 1400px);
  margin-inline: auto;
  padding-inline: 5.73vw;
  padding-block: clamp(2rem, 4vw, 4rem);
}
/* H1＋縦棒の横並び */
.jd-intro__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
/* 縦棒：4×70px基準 */
.jd-intro__bar {
  width: clamp(3px, 0.21vw, 4px);
  height: clamp(3rem, 3.65vw, 4.375rem);
  background: #FF644E;
  flex-shrink: 0;
  border-radius: 2px;
}
/* H1：36px → 1.875vw */
.jd-intro__h1 {
  font-size: clamp(1.2rem, 1.875vw, 2.25rem);
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
}
/* イラスト：588×392基準・センター */
.jd-illust {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 4rem);
}
.jd-illust img {
  width: clamp(20rem, 30.625vw, 36.75rem);
  height: auto;
  aspect-ratio: 588 / 392;
  object-fit: contain;
  display: block;
}
/* テキストボックス：1120×316基準・センター */
.jd-textbox {
  width: clamp(20rem, 58.33vw, 70rem);
  margin-inline: auto;
  margin-top: clamp(2rem, 4vw, 4rem);
  background: #FFFFFF;
  border-radius: clamp(1rem, 1.98vw, 2.375rem);
  box-shadow: 0 0.37vh 0.37vh rgba(0, 0, 0, 0.25);
  padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 4vw, 5rem);
  min-height: clamp(10rem, 16.48vw, 19.75rem);
  display: flex;
  align-items: center;
}
/* P：32px → 1.67vw */
.jd-textbox__p {
  font-size: clamp(0.9rem, 1.67vw, 2rem);
  font-weight: 500;
  color: #333333;
  line-height: 1.9;
  text-align: left;
}
/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 768px) {
  .jd-hero__bg {
    aspect-ratio: 4 / 3;
    object-position: center center;
  }
  .jd-hero__catch {
    font-size: clamp(1.4rem, 6vw, 2.5rem);
  }
  .jd-intro__inner {
    padding-inline: 5%;
  }
  .jd-intro__h1 {
    font-size: clamp(1rem, 4.5vw, 1.5rem);
  }
}

/* ========================================
   V字矢印
======================================== */
.jd-arrow {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

.jd-arrow svg {
  width: clamp(3rem, 4.17vw, 5rem);
  height: auto;
}

/* ========================================
   スケジュールセクション
======================================== */

/* 外枠：1920×990基準・全幅・#F5F5F5 */
.jd-schedule-outer {
  width: 100%;
  /* 高さ：990/1080 ≒ 91.67vh */
  min-height: clamp(40rem, 91.67vh, 61.875rem);
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(3rem, 5vw, 6rem);
  margin-top: clamp(2rem, 4vw, 4rem);
}

/* 内枠：1390×782基準・#FFFFFF */
.jd-schedule-box {
  /* 幅：1390/1920 ≒ 72.4vw */
  width: clamp(20rem, 72.4vw, 86.875rem);
  /* 高さ：782/1080 ≒ 72.4vh */
  min-height: clamp(30rem, 72.4vh, 48.875rem);
  background: #FFFFFF;
  border-radius: clamp(8px, 0.83vw, 16px);
  padding: clamp(2.5rem, 4vw, 5rem) clamp(2rem, 4vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* タイトル：H1と同じ横棒付き・センター */
.jd-schedule__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
  width: 100%;
}

/* H2：H1と同じサイズ */
.jd-schedule__h2 {
  font-size: clamp(1.2rem, 1.875vw, 2.25rem);
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
}

/* ========================================
   レスポンシブ（スケジュール）
======================================== */
@media (max-width: 768px) {
  .jd-schedule-box {
    width: 90%;
  }

  .jd-schedule__h2 {
    font-size: clamp(1rem, 4.5vw, 1.5rem);
  }
}

/* スケジュール本体：左右レイアウト */
.jd-schedule__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 5rem);
  width: 100%;
}

/* 左：スケジュールリスト */
.jd-schedule__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 2rem);
  list-style: none;
  flex-shrink: 0;
}

.jd-schedule__item {
  display: flex;
  align-items: baseline;
  gap: clamp(0.5rem, 1vw, 1rem);
}

/* ●：#FF644E */
.jd-schedule__dot {
  color: #FF644E;
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  flex-shrink: 0;
}

/* 時間・ラベル：#000000 */
.jd-schedule__time {
  color: #000000;
  font-weight: 700;
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  flex-shrink: 0;
  min-width: clamp(3rem, 4vw, 5rem);
}

.jd-schedule__label {
  color: #000000;
  font-weight: 500;
  font-size: clamp(1rem, 1.25vw, 1.5rem);
}

/* 右：写真 650×434基準 */
.jd-schedule__img {
  flex-shrink: 0;
  width: clamp(18rem, 33.85vw, 40.625rem); /* 650/1920 ≒ 33.85vw */
}

.jd-schedule__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 650 / 434;
  object-fit: cover;
  border-radius: clamp(4px, 0.5vw, 8px);
  display: block;
}

@media (max-width: 768px) {
  .jd-schedule__body {
    flex-direction: column;
  }

  .jd-schedule__img {
    width: 100%;
  }
}

/* 写真右下の注記 */
.jd-schedule__note {
  font-size: clamp(0.6rem, 0.83vw, 1rem); /* 32px/1920 ≒ 0.83vw → 小さめに */
  font-weight: 400;
  color: #333333;
  text-align: right;
  margin-top: 0.4em;
}

/* ========================================
   One Day Story セクション
======================================== */
.jd-story {
  padding-block: clamp(3rem, 6vw, 6rem);
}

.jd-story__inner {
  max-width: var(--content-max, 1400px);
  margin-inline: auto;
  padding-inline: 5.73vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* One Day Story：24px → 1.25vw #C8C8C8 */
.jd-story__en {
  font-size: clamp(0.9rem, 1.25vw, 1.5rem);
  font-weight: 400;
  color: #C8C8C8;
  letter-spacing: 0.1em;
  margin-bottom: clamp(0.3rem, 0.5vw, 0.5rem);
}

/* H1と同じステータス */
.jd-story__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

.jd-story__h2 {
  font-size: clamp(1.2rem, 1.875vw, 2.25rem);
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
}

/* ========================================
   ストーリーアイテム：写真＋テキスト5セット
======================================== */
.jd-story__items {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2rem, 4vw, 4rem);
}

.jd-story__item {
  display: flex;
  flex-direction: column;
}

/* 写真：コンテンツ幅いっぱい */
.jd-story__img {
  width: 100%;
  max-width: var(--content-max, 1400px);
  margin-inline: auto;
  padding-inline: 5.73vw;
}

.jd-story__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト：写真の下にシンプルに */
.jd-story__text {
  font-size: clamp(0.8rem, 0.94vw, 1.125rem);
  font-weight: 500;
  color: #333333;
  line-height: 1.8;
  max-width: var(--content-max, 1400px);
  margin-inline: auto;
  width: 100%;
  padding: clamp(0.8rem, 1.5vw, 1.5rem) 5.73vw;
}

/* ※注記：テキストと同じサイズ・色 */
.jd-story__note {
  font-size: inherit;
  color: inherit;
}

@media (max-width: 768px) {
  .jd-story__text {
    padding-inline: 5%;
    font-size: clamp(0.8rem, 3.5vw, 1.1rem);
  }
  .jd-story__img {
    padding-inline: 5%;
  }
}

/* ========================================
   ちなみに、こんな日も...セクション
======================================== */
.jd-also {
  padding-block: clamp(6rem, 12vw, 12rem); /* 2回分多めの余白 */
}

.jd-also__inner {
  max-width: var(--content-max, 1400px);
  margin-inline: auto;
  padding-inline: 5.73vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

/* H2：36px Bold センター */
.jd-also__h2 {
  font-size: clamp(1.2rem, 1.875vw, 2.25rem);
  font-weight: 700;
  color: #333333;
  text-align: center;
}

/* イラスト：630×420基準・センター */
.jd-also__illust {
  display: flex;
  justify-content: center;
}

.jd-also__illust img {
  width: clamp(20rem, 32.8vw, 39.375rem); /* 630/1920 ≒ 32.8vw */
  height: auto;
  aspect-ratio: 630 / 420;
  object-fit: contain;
  display: block;
}

/* ========================================
   メッセージ＋右下イラスト
======================================== */
.jd-message {
  position: relative;
  padding-bottom: clamp(6rem, 10vw, 10rem); /* 右下イラスト分の余白 */
}

.jd-message__inner {
  max-width: var(--content-max, 1400px);
  margin-inline: auto;
  padding-inline: 5.73vw;
  padding-block: clamp(2rem, 4vw, 4rem);
  display: flex;
  justify-content: center;
}

/* H3：40px #25D2AB センター */
.jd-message__h3 {
  font-size: clamp(1.3rem, 2.08vw, 2.5rem);
  font-weight: 700;
  color: #25D2AB;
  text-align: center;
  line-height: 1.7;
}

/* 右下イラスト：CTAに乗っかる形 */
.jd-message__illust {
  position: absolute;
  right: 5.73vw;
  bottom: 0;
  transform: translateY(40%); /* CTAに半分乗っかる */
  z-index: 2;
  width: clamp(10rem, 16vw, 20rem);
}

.jd-message__illust img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 768px) {
  .jd-also__h2 {
    font-size: clamp(1rem, 4.5vw, 1.5rem);
  }

  .jd-also__illust img {
    width: 80%;
  }

  .jd-message__h3 {
    font-size: clamp(1rem, 4.5vw, 1.5rem);
  }

  .jd-message__illust {
    width: clamp(6rem, 25vw, 10rem);
    right: 5%;
  }
}

/* CTAがイラストより前面に */
.page-job-detail .cta {
  position: relative;
  z-index: 1;
}

/* こんな日もテキスト：32px Medium */
.jd-also__text {
  font-size: clamp(0.9rem, 1.67vw, 2rem);
  font-weight: 500;
  color: #333333;
  line-height: 1.9;
  text-align: left;
  width: 100%;
}

@media (max-width: 768px) {
  .jd-also__text {
    font-size: clamp(0.875rem, 4vw, 1.3rem);
  }
}