@charset "UTF-8";

/* ============================================================
   jobdetail.css
   求人詳細（1求人＝1ページ）専用スタイル
   ・共通パーツは common.css / global-menu.css を参照
   ・カード内のパーツ（バッジ・定義リスト・PRボックス等）は
     jobdescription.css と同じ見た目になるよう同等の定義を持たせ、
     詳細ページは common → global-menu → jobdetail の3枚読み込みで完結させる
============================================================ */

.jobdetail-page {
  padding: 60px 0 100px;
}
.jobdetail-page .container {
  max-width: 820px; /* 求人1件は中央に絞って読みやすく */
}

/* ------------------------------------------------------------
   ページ見出し（eyebrow ＋ タイトル）
------------------------------------------------------------ */
.jobdetail-eyebrow {
  text-align: center;
  font-family: var(--font-mincho);   /* v17：ゴシック→明朝 */
  font-style: normal;              /* v17：斜体をやめた */
  font-size: 0.97rem;
  letter-spacing: 0.2em;
  color: var(--color-mauve-light);  /* v17：#0065B0 → #18BFD7 */
  margin: 0 0 7px;                 /* v17：h1との間隔を 14px→7px に */
}

/* 店舗・雇用形態バッジ（見出し上に中央寄せ） */
.jobdetail-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.jobdetail-title {
  font-family: var(--font-mincho);
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;   /* v17：PCを一段階太く（500→700）。SPは768px以下で700に上書き */
  color: var(--text-heading);
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* 勤務地（タイトル直下・店舗ページへのリンク付き） */
.jobdetail-place {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.7;
  margin: 0 0 36px;
}
.jobdetail-place a {
  color: var(--color-blue-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (max-width: 768px) {
  /* v17：SPのページタイトルを統一（明朝700 / 27px / 字間0.04em）。
     font-family は上のベース宣言（var(--font-mincho)）を継承。
     1rem＝18px なので 1.5rem＝27px。ウェイトは 300/500 → 700 に上げる。 */
  .jobdetail-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}

/* ------------------------------------------------------------
   募集要項カード（1件ぶんの本体）
------------------------------------------------------------ */
.jobdetail-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
@media screen and (max-width: 640px) {
  .jobdetail-card { padding: 26px 20px; }
}

/* 募集要項の説明文（構造化データ description と一致させる本文） */
.jobdetail-lead {
  font-size: 1.0rem;
  color: var(--text-heading);
  line-height: 2;
  margin: 0 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
}

/* 小見出し（募集要項／PRの区切り） */
.jobdetail-subhead {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-blue-ink);
  letter-spacing: 0.08em;
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 3px solid var(--color-mauve);
  line-height: 1.5;
}

/* ============================================================
   以下、jobdescription.css と同等のカード内パーツ定義
   （詳細ページを common→global-menu→jobdetail の3枚で完結させるため）
============================================================ */

/* バッジ（店舗名・雇用形態） */
.job-badge {
  display: inline-block;
  padding: 5px 14px;
  font-family: var(--font-gothic);
  font-size: 0.89rem;
  font-weight: 500;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--color-blue-ink);
}
/* v12：店舗3種は同色。区別は店名テキストで行う */
.badge-nishi { border-color: var(--border-color); color: var(--color-blue-ink); }
.badge-okyo  { border-color: var(--border-color); color: var(--color-blue-ink); }
.badge-chika { border-color: var(--border-color); color: var(--color-blue-ink); }
.badge-full  { border-color: var(--text-main); color: var(--text-main); }
.badge-part  { border-color: var(--color-pink-bright); color: var(--color-pink-text); }

/* 定義リスト（求人詳細） */
.job-details {
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 16px;
  column-gap: 20px;
  margin: 0 0 30px;
}
.job-details dt {
  font-family: var(--font-gothic);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--color-blue-ink);
  padding-top: 2px;
}
.job-details dd {
  margin: 0;
  font-size: 1.0rem;
  color: var(--text-main);
}
.job-details dd ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.job-details dd ul li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: 6px;
  font-size: 0.97rem;
  line-height: 1.7;
}
.job-details dd ul li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--color-blue-ink);
}
.job-details dd ul li.note-li {
  font-size: 0.9rem;
  color: var(--text-light);
}
.job-details dd ul li.note-li::before { content: ''; }

.price-large {
  display: inline-block;
  font-family: var(--font-mincho);
  font-size: 1.33rem;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 4px;
}
.note {
  display: block;
  font-size: 0.89rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-top: 4px;
}
.text-highlight {
  color: var(--color-pink-text);
  font-weight: 700;
  margin: 0 2px;
}
.text-bold { font-weight: 700; }

.badge-outline-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.badge-outline {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--color-mauve);
  color: var(--color-blue-ink);
}

@media screen and (max-width: 640px) {
  .job-details {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .job-details dt {
    margin-top: 10px;
    padding-top: 0;
  }
  .job-details dt:first-child { margin-top: 0; }
}

/* PRボックス（キャッチコピー） */
.pr-box {
  background: var(--color-pink-pale);
  border-radius: 10px;
  padding: 20px 22px;
}
.pr-catch {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 1.01rem;
  color: var(--color-blue-ink);
  margin: 0 0 8px;
}
.pr-catch:not(:empty)::before { content: '＼ '; }
.pr-catch:not(:empty)::after { content: ' ／'; }
.pr-text {
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   応募CTA
============================================================ */
.jobdetail-cta {
  text-align: center;
  margin-top: 40px;
  padding: 40px 20px;
  background: var(--color-pink-pale);
  border-radius: 14px;
}
.jobdetail-apply-btn {
  display: inline-block;
  padding: 16px 44px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: 0.06em;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.jobdetail-apply-btn:hover { opacity: 0.85; transform: translateY(-2px); }
.jobdetail-cta-note {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.8;
  margin: 18px 0 0;
}
.jobdetail-cta-note .text-highlight { font-size: 1.05em; }

/* 電話応募（任意・店舗直通） */
.jobdetail-tel {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  color: var(--color-blue-ink);
}
.jobdetail-tel a {
  color: var(--color-blue-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* v23：SPで「076-」と「294-3559」に割れていたため、番号は必ず1かたまりで折り返す */
  white-space: nowrap;
}

/* ============================================================
   一覧へ戻る
============================================================ */
.jobdetail-back {
  text-align: center;
  margin: 36px 0 0;
}
.jobdetail-back a {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  color: var(--color-blue-ink);
}
.jobdetail-back a::before { content: '‹ '; }

/* ============================================================
   店名（最上部・小さめチップ表示）
   ※色は jobdescription.html の求人カード見出し（.jc-head-*）に準拠
============================================================ */
.jobdetail-storename {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 6px 18px;
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--color-blue-ink);
}
.jobdetail-store-nishi { border-color: var(--border-color); }
.jobdetail-store-okyo  { border-color: var(--border-color); }
.jobdetail-store-chika { border-color: var(--border-color); }

@media screen and (max-width: 768px) {
  .jobdetail-storename { font-size: 0.93rem; }
}

/* 勤務地（募集要項カード内・詳細リストの1行として表示） */
.job-details dd.job-place-dd {
  line-height: 1.7;
}
.job-details dd.job-place-dd a {
  color: var(--color-blue-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}