/* ==============================================================
    [recruit-info-detail]
   ============================================================== */

.page-recruit-info-detail__section.page_bg-left {
  padding-bottom: 120px; 
}

.page-recruit-info-detail {
  --ri-card-pad: 40px;
  --ri-label-w: 136px;     /* 左ラベル幅（デザイン値） */
  --ri-orange: #EEA837;    /* ラベル背景 */
  --ri-accent: #DE765B;    /* アクセント */
  --ri-text:   #5D5759;    /* 文字色 */
  --ri-bd:     #E7E2DC;    /* 行セパレーター */
}

/* セクションの余白は親（common）の背景帯に合わせる */
.page-recruit-info-detail__section { 
    padding: 80px 0px;
}

/* 白いカード外枠 */
.p-detail-card{
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 80px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(236,234,231,.6);
  color: var(--ri-text);
}

/* 見出し・イントロ */
.page-recruit-info-detail__header{
    display:grid; 
    gap:16px; 
    margin-bottom:24px;
}
.page-recruit-info-detail__heading{
  margin:0; font-weight:700; font-size:32px;
   line-height:1.5; color:var(--ri-text);
}
.page-recruit-info-detail__intro{ 
  margin-top: 40px;
}
.page-recruit-info-detail__actions{ 
    display:flex; justify-content:flex-end;
}

/* 本文ブロック */
.page-recruit-info-detail__body{ 
    border-top:1px solid var(--ri-bd); 
}

/* ==============================
   行レイアウト（左ラベル + 右本文）
   ※高さは右本文に追従して可変
============================== */
.page-recruit-info-detail .c-info-item{
  display:grid;
  grid-template-columns: var(--ri-label-w) 1fr;
  column-gap:24px;
  align-items:stretch;
  border-bottom:1px solid var(--ri-bd);
  padding-block:8px;
}

/* 左ラベル（高さは常に行の高さにフィット） */
.page-recruit-info-detail .c-info-item__label{
  background:var(--ri-orange);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  font-weight:700;
  line-height:1.5;
  min-height:108px;          /* 低すぎる行の見栄え用（必要なければ削除可） */
  height:100%;
  align-self:stretch;
}


/* 右本文 */
.page-recruit-info-detail .c-info-item__text{
  padding:24px 0 24px 56px;
  display:grid;
  align-items: center;
  gap:16px;
  color:var(--ri-text);
}

.page-recruit-info-detail .c-list--dot li {
  position: relative;
  padding-left: 1.6em;        /* 丸ぶんの余白を確保（お好みで 1.4–1.8em） */
  line-height: 1.8;           /* Figmaの見た目に寄せて行間少し広め */
  margin: .35em 0;
}

.page-recruit-info-detail .c-list--dot li::before {
  content: "";
  position: absolute;
  left: 0;                    /* テキストの左端に丸 */
  top: 0.9em;                 /* 行の中央に来るよう微調整（フォントで前後OK） */
  transform: translateY(-50%);
  width: 16px;                /* 丸の大きさ：太め */
  height: 16px;
  border-radius: 50%;
  background: #EEA837;        /* オレンジ（ラベルと同色） */
  
}

/* 2階層目以降の入れ子がある場合の軽い調整（任意） */
.page-recruit-info-detail .c-list--dot li > .c-list--dot {
  margin-top: .35em;
}
.page-recruit-info-detail .c-list--dot li > .c-list--dot li {
  padding-left: 1.4em;
  margin: .25em 0;
}
.page-recruit-info-detail .c-list--dot li > .c-list--dot li::before {
  width: 8px; height: 8px;    /* ネストは少し小さめに */
}

/* 小ブロック（説明・条件などのまとまり） */
.page-recruit-info-detail .c-info-item__group{ display:grid; gap:8px; }

/* 小見出し（行内の強調見出し） */
.page-recruit-info-detail .c-info-item__lead{
  margin:0;
  font-weight:var(--font-weight-bold);
  color:var(--ri-text);
  display: inline-flex;
  align-items: center;
  gap: var(--dot-gap, 8px); 
}

.page-recruit-info-detail .c-dot{ 
  display:inline-block;
  width:16px;
  height:16px;
  background:var(--ri-orange);
  border-radius:50%;
  vertical-align:middle;
  margin-right:.5em;
  /* 文字の黒丸を視覚に残さない */
  font-size:0;
  line-height:0;
  color:transparent;

}

.page-recruit-info-detail .c-info-item__text .c-list--disc {
  padding-left: 6px;
}

/* 枠付きパネル（仕事内容：一日の流れ） */
.page-recruit-info-detail .c-info-item__panel{
  border:1px solid var(--ri-orange);
  border-radius:10px;
  padding:24px;
  display:grid;
  gap:16px;
}

/* タイムライン（時間：本文） */
.page-recruit-info-detail .c-timeline{
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.page-recruit-info-detail .c-timeline__row{
  display:flex;
  grid-template-columns: auto 1fr; /* 時刻+見出しの実幅 / 説明 */
  column-gap:16px;
  align-items:start;
  flex-direction: column;
  padding-left: 16px;
}

/* タイトル行（時刻＋見出し）＝オレンジ */
.page-recruit-info-detail .c-timeline__title{
  display:flex;
  gap:12px;
  align-items:baseline;
  font-weight:var(--font-weight-bold);
  color:var(--ri-orange);
  line-height:1.8;
  margin:0;           /* dt のデフォルト余白を消す */
}

.page-recruit-info-detail .c-timeline__time{
  font-weight:700;
  color:var(--ri-orange);
}

/* 説明は黒（本文色）。段落の余白を詰める */
.page-recruit-info-detail .c-timeline__desc{
  display:grid;
  gap:6px;
}

.page-recruit-info-detail .c-timeline__desc p{
  margin:0;
  color:var(--ri-text);
}

/* 応募条件セクション内だけ余白調整 */
.page-recruit-info-detail .c-info-item--requirements .c-info-item__group {
  margin-bottom: 24px;
}

/* 最後のブロックだけは余白なし */
.page-recruit-info-detail .c-info-item--requirements .c-info-item__group:last-child {
  margin-bottom: 0;
}

/* 応募条件の配下リスト用（黒丸） */
.page-recruit-info-detail .c-list--disc{
  list-style:none;
  margin:0; padding:0;
}
.page-recruit-info-detail .c-list--disc li{
  position:relative;
  padding-left:1.6em;
  line-height:1.8;
  margin:.35em 0;
}
.page-recruit-info-detail .c-list--disc li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.9em;
  transform:translateY(-50%);
  width:4px;              /* オレンジ丸と同サイズ */
  height:4px;
  border-radius:50%;
  background:var(--ri-text); /* 黒（本文色） */
}

/* 下部CTA */
.page-recruit-info-detail__cta{
  display:flex; 
  justify-content:center; 
  padding:80px 0px;
}

/* =================================
   レスポンシブ
================================= */

@media (max-width: 1200px) {
  /* カードのパディングを軽くして読みやすく */
  .p-detail-card{
    padding: 64px 32px;
  }

  /* ラベル列が潰れないように少しだけ狭める */
  .page-recruit-info-detail{
    --ri-label-w: 120px;    /* PC:136px → TB:120px */
  }

  /* 行内の間隔を少し詰める */
  .page-recruit-info-detail .c-info-item{
    column-gap: 20px;
  }

  /* パネルの余白微調整 */
  .page-recruit-info-detail .c-info-item__panel{
    padding: 20px;
    gap: 14px;
  }
}



/* ===== SP: ≤767px ===== */
@media (max-width: 767px) {

  /* カード全体をモバイル向けに */
  .p-detail-card{
    padding: 40px 20px;
  }

  /* 上の本文エリアのボーダーはスマホでは不要 */
  .page-recruit-info-detail__body{
    border-top: 0;
  }

  /* 行（ラベル＋本文）を1カラム化し、区切り線を消す */
  .page-recruit-info-detail .c-info-item{
    grid-template-columns: 1fr;  /* 1列 */
    column-gap: 0;
    row-gap: 0;
    padding-block: 0;
    border-bottom: 0;            /* グレー線非表示 */
    margin-bottom: 24px;         /* 行間 */
  }

  /* オレンジのラベルを“横幅いっぱい”にしてその下に本文 */
  .page-recruit-info-detail .c-info-item__label{
    width: 100%;
    align-self: auto;
    height: auto;                /* 既存の height:100% を打ち消し */
    min-height: 0;
    padding: 16px;
    justify-content: flex-start; /* 文字は左寄せ */
    text-align: left;
    line-height: var(--line-height-normal);
  }

  /* 本文ブロックは下に続くシンプルな段組み */
  .page-recruit-info-detail .c-info-item__text{
    padding: 16px 16px;
    display: block;
  }

  /* 小ブロック・パネルの余白をモバイル用に */
  .page-recruit-info-detail .c-info-item__group{ gap: 8px; }
  .page-recruit-info-detail .c-info-item__panel{
    padding: 16px;
    border-radius: 8px;
    gap: 12px;
  }

  /* タイムライン間隔をやや詰める */
  .page-recruit-info-detail .c-timeline{ gap: 12px; }
  .page-recruit-info-detail .c-timeline__row{
    padding-left: 12px;
  }

  /* 箇条書きドットサイズを少し小さく */
  .page-recruit-info-detail .c-list--dot li{
    padding-left: 1.4em;
    margin: .3em 0;
  }
  .page-recruit-info-detail .c-list--dot li::before{
    width: 12px;
    height: 12px;
    top: .9em;
  }
}