@charset "UTF-8";
/* ==========================================================================
   Project（p-*）— このページ固有の型
   FV（写真の帯＋名刺）／一日の流れ／働きやすさ／募集要項／CTA／写真の帯／フォーム
   ========================================================================== */

/* ── FV: 写真の帯＋名刺の見開き（35_マニュアル §5 の型） ──
   🔴 写真に文字を重ねない。名刺（カード）を写真の下端に少し重ねる。
   🔴 写真の見せ幅は aspect-ratio で決める（px だと広い画面ほど被写体が切れる） */
.p-fv {
  background: var(--c-white);
}

.p-fv__photo :is(img, .c-imgslot) {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* 🔴 縦位置は目分量で決めない。この写真の主役＝手前のテーブル天板とだいだい色の椅子（原寸 y460〜700）が
     名刺カードに隠れずに見える割合を、9つの画面幅で実測して決めた値（35_マニュアル §5-3）。
     ⚠️ 画像を差し替えたら測り直す */
  object-position: 50% 52%;
  border-radius: 0;
  display: block;
}

/* 🔴 帯の比率は2段。768〜1099px で 1400/470 にすると帯が細くなりすぎ、
   名刺の重なり（-60px）が占める割合が増えて主役（椅子と天板）が隠れた（実測 59〜66%）。
   その幅だけ帯を高くして逃がす。1100px 以上は 1400/470 で 74〜95% 見える。 */
@media (min-width: 768px) {
  .p-fv__photo :is(img, .c-imgslot) {
    aspect-ratio: 1400 / 560;
  }
}

@media (min-width: 1100px) {
  .p-fv__photo :is(img, .c-imgslot) {
    aspect-ratio: 1400 / 470;
  }
}

/* ⚠️ clinic（白カード＋生成りの右面）と面を反転（生成りカード＋白の右面）。
   同じ「帯＋名刺」の型でも、別の名刺に見せる（2026-08-15 本人指摘・38 §8） */
.p-fv__card {
  position: relative;
  z-index: 2;
  margin-top: -36px;
  background: var(--c-cream);
  border-radius: 20px;
  box-shadow: var(--c-shadow-hover);
  padding: clamp(24px, 4vw, 44px);
}

@media (min-width: 768px) {
  .p-fv__card {
    margin-top: -60px;
  }
}

.p-fv__spread {
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .p-fv__spread {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
  }
}

.p-fv__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--c-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-main-dark);
}

.p-fv__tit {
  margin-top: 10px;
  /* ⚠️ 375pxで「夜勤なし・日曜休みの、」（11字）がカード内に1行で入る大きさに。
     26pxだと字送りぶんで1pxあふれ、「日曜」が泣き別れた */
  font-size: clamp(23px, 6.4vw, 40px);
  letter-spacing: 0.02em;
}

/* 語のかたまり単位で折り返す（375pxの泣き別れ対策） */
.p-fv__tit span {
  display: inline-block;
}

.p-fv__lead {
  margin-top: 14px;
  max-width: 34em;
}

.p-fv__tel {
  margin-top: 22px;
}

/* 右面＝募集中の職種（採用ページの「連絡する前に絶対必要な情報」）。
   区切りは線でなく生成りの面で */
.p-fv__right {
  background: var(--c-white);
  border-radius: var(--c-radius);
  padding: 22px 24px;
  align-self: start;
  box-shadow: var(--c-shadow);
}

.p-fv__jobstit {
  font-family: var(--c-font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--c-main-dark);
  margin-bottom: 8px;
}

.p-fv__jobsnote {
  margin-top: 10px;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.7;
}

.p-fv__jobslink {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}

/* このページの中身（L5: スクロール前に全体像） */
.p-fv__index {
  margin-top: 28px;
  border-top: 1px solid var(--c-line);
  padding-top: 18px;
}

.p-fv__indextit {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  margin-bottom: 8px;
}

.p-fv__index ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.p-fv__index a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 14px;
}

.p-fv__index a:hover {
  color: var(--c-main-dark);
}

.p-fv__index a span {
  color: var(--c-main);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ── つなぎA: 曲線（FVの直後・1箇所だけ） ── */
.p-curve {
  background: var(--c-white);
}

.p-curve svg {
  display: block;
  width: 100%;
  height: clamp(28px, 4.5vw, 56px);
}

/* ── 01 一日の流れ ── */
.p-day {
  display: grid;
  gap: 48px;
  max-width: 980px;
  margin-inline: auto;
}

.p-day__item {
  display: grid;
  gap: 18px;
  align-items: center;
}

@media (min-width: 820px) {
  .p-day__item {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .p-day__item--rev .p-day__body {
    order: 2;
  }
}

.p-day__time {
  font-family: var(--c-font-head);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1;
  color: var(--c-main);
  font-variant-numeric: tabular-nums;
}

.p-day__tit {
  margin-top: 8px;
  font-size: 20px;
}

.p-day__desc {
  margin-top: 8px;
  max-width: 36em;
}

/* 最後（帰りの送迎と記録）は写真なし。白い面で1日を締める */
.p-day__item--noimg {
  background: var(--c-white);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 28px;
}

@media (min-width: 820px) {
  .p-day__item--noimg {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* ── 02 働きやすさ（枠や箱を使わず、薄い番号と余白で並べる） ── */
.p-env {
  display: grid;
  gap: 36px 56px;
  max-width: 980px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-env {
    grid-template-columns: 1fr 1fr;
  }
}

.p-env__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: baseline;
}

.p-env__num {
  grid-row: 1 / 3;
  font-family: var(--c-font-head);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--c-main-ghost);
  font-variant-numeric: tabular-nums;
}

.p-env__tit {
  font-size: 20px;
}

.p-env__body {
  grid-column: 2;
  margin-top: 6px;
}

/* ── 03 募集要項（2職種を並べて比べられるように） ── */
.p-jobs {
  display: grid;
  gap: 36px;
  align-items: start;
}

@media (min-width: 1000px) {
  .p-jobs {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.p-job__tit {
  font-size: 20px;
  margin-bottom: 14px;
}

/* ── 中間CTA（L4: 決めた瞬間に押せる場所） ── */
.p-midcta {
  background: var(--c-white);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 32px 24px;
  text-align: center;
}

.p-midcta__lead {
  font-family: var(--c-font-head);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
}

/* ── つなぎC: 写真の帯（中盤に1回） ── */
.p-band :is(img, .c-imgslot) {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

@media (min-width: 768px) {
  .p-band :is(img, .c-imgslot) {
    aspect-ratio: 1440 / 300;
  }
}

/* ── 05 見学・応募 ── */
.p-contact__tel {
  background: var(--c-white);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 40px;
}

.p-contact__teltit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 19px;
  margin-bottom: 14px;
}

.p-contact__form {
  background: var(--c-white);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: clamp(24px, 4vw, 40px);
}

.p-contact__formtit {
  font-size: 19px;
}

.p-contact__demo {
  margin-top: 12px;
}

.p-contact__submit {
  display: block;
  margin: 28px auto 0;
  min-width: min(100%, 320px);
}

/* ── 送信完了 ── */
.p-thanks {
  text-align: center;
}

.p-thanks__tit {
  font-size: clamp(24px, 3vw, 30px);
}