@charset "UTF-8";

/* style.css … トップページ専用（全ページ共通の土台・ヘッダー・ボタンは common.css） */

/* =========================================================
   メインビジュアル（SP）
   ========================================================= */
.mv {
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
}

/* ---------- SPスライダー（動き・共通部分は common.css の .mv-slider。ここはトップ用の大きさだけ） ---------- */
.mv-slider {
  height: 395px;
  margin-top: 4px;
}

.mv-slide {
  width: 302px;
  /* カンプ実測 */
  margin-left: -151px;
  /* 302÷2 */
}

.mv-slide-img {
  border-radius: 20px;
}

/* ---------- スライダー下のロゴ ---------- */
.mv-brand {
  margin-top: 26px;
  text-align: center;
}

.mv-brand-logo {
  width: 112px;
  margin: 0 auto;
}

.mv-brand-company {
  font-family: "Noto Serif JP", serif;
  margin-top: 6px;
  color: #5b534d;
  font-size: var(--sub-heading);
  font-weight: 700;
  line-height: 1.4;
}

.mv-brand-label {
  width: 182px;
  margin: 10px auto 0;
  background-color: #c96e86;
  color: #fff;
  font-size: var(--main-text);
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.1em;
}

/* ---------- コピー ---------- */
.mv-text {
  margin-top: 30px;
  padding: 0 20px 0 max(0px, min(66px, 100vw - 324px));
  /* 左の余白は w390 で 66px。それより狭い画面（w375・w360 など）では余白を詰めて、コピーの改行位置を w390 と同じにする */
}

.mv-heading {
  color: #c96e86;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.mv-lead {
  margin-top: 30px;
  margin-left: -8px;
  /* カンプではリード文がコピーより少し左 */
  font-size: var(--main-text);
  line-height: 1.95;
  letter-spacing: 0.04em;
}

/* 飾りの丸はPCのみ */
.mv-circle {
  display: none;
}

/* =========================================================
   エムズの想い（SP）
   ========================================================= */
.our-philosophy {
  position: relative;
  padding-bottom: 68px;
}


/* 緑の背景 … 下辺は右上がりの斜め（画像の上辺と同じ角度） */
.philosophy-head {
  padding: 40px 20px 92px;
  background-color: #d5e6d9;
}

.philosophy-heading {
  margin: 22px 0 0;
  color: #82a98a;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* 画像の上辺を斜めにカットして緑の背景に重ねる（左が55px低い） */
.philosophy-img-wrap {
  margin-top: -55px;
  clip-path: polygon(0 55px, 100% 0, 100% 100%, 0 100%);
}

.philosophy-img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}

.philosophy-body {
  padding: 0 16px 0 20px;
}

.philosophy-text {
  margin-top: 44px;
  font-size: var(--main-text);
  line-height: 2;
}

.philosophy-btn {
  margin: 70px auto 0;
}

/* =========================================================
   働くうえで気になること WORK STYLE（SP）
   ========================================================= */
.work-style {
  position: relative;
  background-color: #fdf4f0;
}

/* 見出しの帯（ベージュ）… 英字・見出し・ピンクの線・リード文 */
.work-head {
  padding: 50px 0 48px;
  background-color: #eddcd5;
  text-align: center;
}

.work-label {
  color: #5b534d;
  font-size: var(--main-text);
  font-weight: 500;
}

.work-heading {
  margin: 18px 0 0;
  padding: 0 20px;
  color: #c96e86;
  font-family: "Noto Serif JP", serif;
  font-size: var(--middle-heading);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 横いっぱいのピンクの線（画面に入ったら左から右へ伸びる。js-scroll） */
.work-line {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 14px;
  background-color: #c96e86;
}

.work-line.is-ready {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s ease, opacity 1.2s ease;
}

.work-line.is-visible {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の端末では演出なし */
@media (prefers-reduced-motion: reduce) {
  .work-line.is-ready {
    transition: none;
  }
}

.work-lead {
  margin-top: 20px;
  padding: 0 20px;
  color: #5b534d;
  font-size: var(--main-text);
  line-height: 1.8;
}

/* 飾りのドット（茶） … SPは帯の下端に重ねる */
.work-accent-brown {
  position: absolute;
  top: 320px;
  right: 47px;
  /* 右から位置を決める（w390 で左255px と同じ位置。狭い画面でもはみ出さない） */
  z-index: 2;
  width: 88px;
}

/* ---------- 各項目（01〜） ---------- */
.work-item {
  display: flex;
  flex-direction: column;
  padding: 48px 0 70px;
}

/* SPは「番号 → 文章 → 画像 → ボタン」の順に並べるため、中身を親の直下として扱う */
.work-item-body {
  display: contents;
}

.work-item-number {
  order: 1;
  color: #6b5f58;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--main-heading) * 1.4);
  /* 28px × 1.4 ≒ 39px */
  font-weight: 300;
  line-height: 1;
  text-align: center;
}

/* 文章（h3＋本文） */
.work-item-copy {
  order: 2;
  margin: 34px 20px 0;
}

/* 02〜04 は h3 と本文を1つの段落のように続けて表示 */
.work-item-copy-inline .work-item-heading,
.work-item-copy-inline .work-item-text {
  display: inline;
}

.work-item-heading {
  margin: 0;
  color: #5b534d;
  font-size: var(--main-text);
  font-weight: 400;
  line-height: 2.1;
}

/* 強調ワード（ピンク） */
.work-item-keyword {
  color: #c96e86;
  font-size: var(--sub-heading);
  font-style: normal;
  font-weight: 700;
}

.work-item-text {
  margin: 0;
  font-size: var(--main-text);
  line-height: 2.1;
}

.work-item-img-wrap {
  position: relative;
  order: 4;
  margin-top: 56px;
}

.work-item-img {
  width: 100%;
  height: auto;
  aspect-ratio: 665 / 376;
  object-fit: cover;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.work-item-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  order: 5;
  margin-top: 64px;
}

/* 01 のボタンはSPのみピンクの塗り */
.work-item-btn-pink.more-btn {
  border-color: #c96e86;
  background-color: #c96e86;
  color: #fff;
  font-weight: 700;
}

/* ホバー時（上のピンク指定が共通ボタンのホバーより優先されるため明記）。色は custom.css の --hover-〇〇 */
/* 塗りのボタン（ピンク・職場見学会の緑）でも、枠の外にはみ出す長い矢印は茶色（白だと背景に埋もれる） */
.work-item-btn-pink.more-btn::before,
.work-item-btn-pink.more-btn::after,
.more-btn.interview-btn.hover-job-tour::before,
.more-btn.interview-btn.hover-job-tour::after,
.more-btn.bonus-btn.hover-job-tour::before,
.more-btn.bonus-btn.hover-job-tour::after {
  background-color: #6b5f58;
}

.work-item-btn-pink.more-btn:hover {
  border-color: var(--hover-color);
  background-color: var(--hover-color);
}

/* 飾りのドット（緑） … 02 の画像右下に重ねる */
.work-accent-green {
  position: absolute;
  right: 55px;
  bottom: -46px;
  width: 88px;
}

/* 飾りのドット（グレーの格子） … 03・04 の画像の下 */
.work-accent-grid {
  position: absolute;
  top: calc(100% + 2px);
  left: 90px;
  width: 200px;
}

/* =========================================================
   DATA 数字でみるエムズ（SP）
   ========================================================= */
/* 背景・影・飾りの帯は .data（画面いっぱい）、中身は .data-inner */
.data {
  position: relative;
  z-index: 1;
  background-color: #faf3ea;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  isolation: isolate;
}

/* SPは「見出し → 文章 → 円グラフ → ボタン」の順に並べるため flex＋order */
.data-inner {
  display: flex;
  flex-direction: column;
  padding-bottom: 95px;
}

/* SP：上部の帯（下辺は右上がりの斜め） */
.data::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 205px;
  background-color: #efdcd6;
  clip-path: polygon(0 0, 100% 0, 100% 160px, 0 100%);
  /* 右端は160px、左端は205px の高さ */
}

.data-body {
  display: contents;
}

.data .en-ttl {
  display: block;
  padding: 54px 20px 0;
}

.data-heading {
  margin: 30px 20px 0;
  color: #5b534d;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-align: center;
}

.data-heading-num {
  color: #c96e86;
  font-size: calc(var(--main-heading) * 1.15);
  /* 28px × 1.15 ≒ 32px */
  letter-spacing: 0.02em;
}

.data-text {
  margin: 40px 20px 0;
  font-size: var(--main-text);
  line-height: 1.75;
}

.data-btn {
  order: 2;
  margin: 72px auto 0;
}

/* ---------- 円グラフ（トップでの置き場所・大きさ・ラベル位置。部品の形と動きは common.css の .data-chart） ---------- */
.data-chart {
  order: 1;
  width: 298px;
  margin: 62px auto 0;
}

/* 各ラベル（位置は円グラフの幅に対する％） */
.data-chart-label-great {
  top: 46%;
  left: 87%;
  color: #fff;
}

.data-chart-label-good {
  top: 65%;
  left: 15%;
}

.data-chart-label-other {
  top: 15%;
  left: 33%;
}

/* =========================================================
   Interview（SP）
   ========================================================= */
/* SPは「見出し → スライダー → ボタン」の順に並べるため flex＋order */
.interview {
  display: flex;
  flex-direction: column;
  padding: 70px 0 64px;
  background-color: #fdf4f0;
}

.interview-side {
  display: contents;
}

.interview-intro {
  position: relative;
  order: 0;
  padding: 0 20px;
}

/* 飾りの丸はPCのみ */
.interview-circle {
  display: none;
}

.interview-heading {
  margin: 48px 0 0 max(0px, min(43px, 100vw - 347px));
  /* 63−20＝43px 内側（w390）。それより狭い画面では詰めて、改行位置を w390 と同じにする */
  color: #5b534d;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.06em;
}

.interview-sub {
  margin-top: 26px;
  color: #5b534d;
  font-family: "Noto Serif JP", serif;
  font-size: var(--middle-heading);
  font-weight: 500;
  text-align: center;
}

.interview-sub-em {
  color: #c96e86;
  font-weight: 700;
}

.interview-text {
  margin-top: 26px;
  font-size: var(--main-text);
  line-height: 1.6;
}

/* ---------- スライダー ---------- */
.interview-slider {
  order: 1;
  margin-top: 36px;
}

.interview-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* スクロールバーを隠す（Firefox） */
}

.interview-list::-webkit-scrollbar {
  display: none;
  /* スクロールバーを隠す（Chrome・Safari） */
}

.interview-slide {
  flex: 0 0 100%;
  padding: 0 28px;
  scroll-snap-align: center;
}

/* ---------- カード ---------- */
.interview-card {
  display: block;
  margin: 6px 0 10px;
  /* 影が切れないように上下に余白 */
  padding: 26px 21px 22px;
  border: 1px solid #d9cfc5;
  background-color: #faf3ea;
  color: #5b534d;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: opacity 0.3s;
}

.interview-card:hover {
  opacity: 0.85;
}

.interview-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 610 / 458;
  object-fit: cover;
}

/* 番号・見出し・園名は左、MOREは右下 */
.interview-card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 12px;
  margin-top: 14px;
}

.interview-card-num {
  grid-column: 1 / 3;
  color: #5b534d;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--main-text) * 0.75);
  /* 16px × 0.75 ＝ 12px */
  font-weight: 600;
  line-height: 1.2;
}

.interview-card-num-current {
  color: #c96e86;
  font-size: var(--sub-heading);
  font-weight: 700;
}

.interview-card-title {
  grid-column: 1;
  margin: 10px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: var(--sub-heading);
  font-weight: 500;
  line-height: 1.45;
}

.interview-card-meta {
  grid-column: 1;
  margin-top: 8px;
  font-size: calc(var(--main-text) * 0.7);
  /* 16px × 0.7 ≒ 11px */
  line-height: 1.4;
}

/* MORE ＋ 四角い矢印ボタン */
.interview-card-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  margin-bottom: 18px;
  color: #c96e86;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--main-text) * 0.75);
  font-weight: 700;
  line-height: 1;
}

.interview-card-more-icon {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  margin-top: 6px;
  border: 1px solid #b9aea6;
  background-color: #fff;
  color: #5b534d;
}

/* 「↗」… ::before が斜線、::after が角（.more-btn と同じ作り） */
.interview-card-more-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background-color: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.interview-card-more-icon::after {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  right: calc(50% - 6px);
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

/* ホバーで矢印を右上へ少し移動（四角の枠は動かさず、中の矢印だけ） */
.interview-card-more-icon::before,
.interview-card-more-icon::after {
  transition: translate 0.3s;
}

.interview-card:hover .interview-card-more-icon::before,
.interview-card:hover .interview-card-more-icon::after {
  translate: 4px -4px;
}


/* ---------- バー（現在位置） ---------- */
.interview-dots {
  display: flex;
  justify-content: center;
  gap: 19px;
  margin-top: 30px;
}

.interview-dot {
  width: 47px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background-color: #ead9d6;
  cursor: pointer;
  transition: background-color 0.3s;
}

.interview-dot.is-active {
  background-color: #c96e86;
}

/* ---------- ボタン ---------- */
.interview-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  order: 2;
  margin-top: 66px;
}

/* 職場見学会（Interview） … ヘッダーの職場見学会ボタンと同じ色 */
.more-btn.interview-btn.hover-job-tour {
  border-color: #7f9f83;
  background-color: #7f9f83;
  color: #fdfdfd;
}

.more-btn.interview-btn.hover-job-tour:hover {
  border-color: #afc7b3;
  background-color: #afc7b3;
  color: #5b534d;
}

/* =========================================================
   change-img セクション切り替え用画像
   ========================================================= */

.change-img {
  width: 100%;
  background-image: url(/assets/img/top-change-img.jpg);
  height: 170px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media screen and (min-width: 1024px) {

  .change-img {
    height: 290px;
    background-position: center 40%;
  }
}


/* =========================================================
   LOCATIONS 保育園エリアマップ（SP）
   見出し → 地図（画面幅いっぱい） → 園のカード（2列）
   ※ 園のカードの小さい文字（園名・住所・more など）はカンプに合わせて calc で小さくしている（ユーザー了承済みの例外）
   ========================================================= */
.map {
  padding: 56px 0 64px;
  color: #5b534d;
}

.map-head {
  padding: 0 20px;
}

.map-heading {
  margin-top: 20px;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.map-intro {
  margin-top: 16px;
  font-size: var(--main-text);
  line-height: 1.6;
}

/* 地図（iframe を箱いっぱいに） */
/* SP：画面の高さの約6割（60svh）。縦長・横長の画面でも大きくなりすぎないよう 380〜560px の間 */
.map-frame {
  height: clamp(380px, 60svh, 560px);
  margin-top: 40px;
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* 保育園一覧ボタンはPCのみ */
/* 保育園一覧ボタン：SPは園のリストの下（.sp-only）、PCは地図の下（.pc-only）に1つずつ */
.map-btns {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.map-btns.pc-only {
  display: none;
}

/* ---------- 園のリスト ---------- */
.map-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(323px, 100% - 40px);
  margin: 48px auto 0;
}

/* グループの色（帯・番号・more）：小規模はピンク、企業主導型は緑 */
.map-group-mini {
  --map-color: #c96e86;
}

.map-group-corp {
  --map-color: #7f9f83;
}

/* 帯（小規模保育園／企業主導型保育園） */
.map-group-ttl {
  padding: 6px 10px;
  background-color: var(--map-color);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-text);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}

.map-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 27px;
  margin: 24px 0 0;
  padding: 0;
}

/* SP：番号 → 園名 → 住所 → more を中央に縦並び */
.map-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 14px 6px 10px;
  border: 1px solid #d9d2cc;
  background-color: #faf8f5;
  color: #5b534d;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.3s;
}

.map-card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.map-card-num {
  color: var(--map-color);
  font-family: "Inter", sans-serif;
  font-size: var(--sub-heading);
  font-weight: 600;
  line-height: 1.3;
}

.map-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 4px;
}

.map-card-name {
  font-size: calc(var(--main-text) - 2px);
  /* SP 14px */
  font-weight: 700;
  line-height: 1.4;
}

/* 英字の園名のふりがな（SPは改行して下に） */
.map-card-kana {
  display: block;
  font-weight: 500;
}

.map-card-address {
  margin-top: auto;
  padding-top: 10px;
  font-size: calc(var(--main-text) - 4px);
  /* SP 12px */
  line-height: 1.4;
}

.map-card-more {
  margin-top: 2px;
  color: var(--map-color);
  font-family: "Inter", sans-serif;
  font-size: calc(var(--main-text) - 4px);
  /* SP 12px */
  font-weight: 700;
  line-height: 1.3;
}

@media screen and (min-width: 1024px) {

  /* ---------- LOCATIONS（PC）：左に見出し・地図・ボタン／右に園のリスト（幅216px） ---------- */
  .map {
    padding: 80px 0 70px;
  }

  .map-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    width: min(1040px, 100% - 120px);
    margin: 0 auto;
  }

  .map-main {
    flex: 0 1 640px;
    min-width: 0;
  }

  .map-head {
    padding: 0;
  }

  .map-heading {
    margin-top: 24px;
    font-size: var(--middle-heading);
  }

  .map-intro {
    margin-top: 16px;
    font-size: calc(var(--main-text) - 3px);
    /* PC 14px */
  }

  .map-frame {
    height: auto;
    margin-top: 12px;
    aspect-ratio: 566 / 397;
    border: 1px solid #8a7f78;
  }

  .map-btns.pc-only {
    display: flex;
  }

  .map-btns.sp-only {
    display: none;
  }

  /* ---------- 園のリスト ---------- */
  .map-list {
    flex-shrink: 0;
    gap: 46px;
    width: 216px;
    margin: 0;
  }

  .map-group-ttl {
    padding: 3px 8px;
    font-size: calc(var(--main-text) - 3px);
    /* PC 14px */
  }

  .map-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 21px;
    width: 210px;
    margin-top: 22px;
  }

  /* PC：左に番号、右に園名・住所。右端から長い矢印（→）がはみ出し、その下に more */
  .map-card {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 8px 30px 8px 10px;
    /* 右は枠の内側に入る矢印の分あける */
    text-align: left;
  }

  .map-card-num {
    flex-shrink: 0;
    font-size: var(--main-text);
  }

  .map-card-body {
    margin-top: 0;
  }

  .map-card-name {
    font-size: calc(var(--main-text) - 3px);
    /* PC 14px */
  }

  .map-card-kana {
    display: inline;
    margin-left: 0.5em;
    font-size: calc(var(--main-text) - 5px);
    /* PC 12px */
  }

  .map-card-address {
    margin-top: 2px;
    padding-top: 0;
    font-size: calc(var(--main-text) - 5px);
    /* PC 12px */
  }

  /* 長い矢印（横線＋右上の斜め線）… .more-btn と同じ形。ホバーで右へ10px */
  .map-card::before,
  .map-card::after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: -16px;
    height: 1px;
    background-color: #6b5f58;
    transition: right 0.3s;
  }

  .map-card::before {
    width: 30px;
  }

  .map-card::after {
    width: 10px;
    transform: rotate(30deg);
    transform-origin: right center;
  }

  .map-card:hover::before,
  .map-card:hover::after {
    right: -26px;
  }

  .map-card-more {
    position: absolute;
    top: calc(50% + 2px);
    right: -32px;
    margin-top: 0;
    color: #8a7f78;
    font-size: calc(var(--main-text) - 5px);
    /* PC 12px */
  }

}


/* =========================================================
   Joining Bonus 入社支度金（SP）
   ========================================================= */
/* 背景色は画面いっぱい、中身は .bonus-inner（1440px以上は幅1440pxで中央寄せ） */
.bonus {
  background-color: #efdcd6;
}

/* SPは「見出し・文章 → 画像 → ボタン」の順に並べるため flex＋order */
.bonus-inner {
  display: flex;
  flex-direction: column;
  padding: 53px 0 94px;
}

.bonus-body {
  display: contents;
}

.bonus .en-ttl {
  padding: 0 36px;
}

.bonus-heading {
  margin: 44px 0 0;
  padding: 0 0 0 36px;
  color: #5b534d;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.4;
}

.bonus-heading-em {
  color: #c96e86;
  font-size: 1.1em;
}

.bonus-text {
  margin-top: 30px;
  padding: 0 36px;
  font-size: var(--main-text);
  line-height: 1.5;
}

.bonus-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  order: 2;
  margin-top: 77px;
}

/* 職場見学会（Joining Bonus） … ヘッダーの職場見学会ボタンと同じ色 */
.more-btn.bonus-btn.hover-job-tour {
  border-color: #7f9f83;
  background-color: #7f9f83;
  color: #fdfdfd;
}

.more-btn.bonus-btn.hover-job-tour:hover {
  border-color: #afc7b3;
  background-color: #afc7b3;
  color: #5b534d;
}

/* ---------- 画像＋最大10万円の丸 ---------- */
.bonus-visual {
  position: relative;
  order: 1;
  margin-top: 60px;
}

.bonus-img {
  width: 100%;
  height: auto;
  aspect-ratio: 754 / 424;
  object-fit: cover;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.bonus-badge {
  position: absolute;
  top: -30px;
  right: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #c96e86;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.bonus-badge-label {
  font-size: calc(var(--main-text) * 0.75);
  /* 16px × 0.75 ＝ 12px */
}

.bonus-badge-amount {
  margin-top: 4px;
  font-size: var(--sub-heading);
}

.bonus-badge-num {
  font-family: "Inter", sans-serif;
  font-size: calc(var(--main-heading) * 1.4);
  /* 28px × 1.4 ≒ 39px */
  letter-spacing: -0.02em;
}

/* 丸の上のキラキラ線（中央の線＋::before・::after で左右の線） */
.bonus-badge-rays {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  width: 2px;
  height: 17px;
  background-color: #c96e86;
  transform: translateX(-50%);
}

.bonus-badge-rays::before,
.bonus-badge-rays::after {
  content: "";
  position: absolute;
  bottom: -3px;
  width: 2px;
  height: 15px;
  background-color: #c96e86;
}

.bonus-badge-rays::before {
  left: -16px;
  transform: rotate(-25deg);
}

.bonus-badge-rays::after {
  right: -16px;
  transform: rotate(25deg);
}

/* =========================================================
   PC（1024px〜）  ※カンプ w1440 基準
   ========================================================= */
@media screen and (min-width: 1024px) {

  /* ---------- メインビジュアル ---------- */
  .mv {
    padding-bottom: 0;
  }

  .mv-slider,
  .mv-brand {
    display: none;
  }

  /* 画像エリアの形・大きさ・フェードの動きは common.css の .mv-fade（お知らせページと共通） */
  .mv-fade {
    margin-top: 24px;
  }

  /* ---------- コピー ---------- */
  .mv-text {
    position: absolute;
    top: min(182px, calc(182px - (1440px - 100vw) * 0.15));
    /* 1440pxで182px、幅が狭いほど上に詰める */
    left: calc(max(0px, (100% - 1440px) / 2) + 107px);
    /* 1440pxより広い画面では w1440 の配置のまま中央へ */
    z-index: 2;
    margin-top: 0;
    padding: 0;
  }

  .mv-heading {
    line-height: 1.72;
  }

  .mv-lead {
    margin-top: min(36px, 2.5vw);
    /* 36÷1440 */
    margin-left: 0;
    line-height: 1.85;
  }

  /* ---------- 飾りの丸 ---------- */
  .mv-circle {
    position: absolute;
    z-index: 3;
    display: block;
    border-radius: 50%;
  }

  /* 位置・大きさは 1440px 基準の比率（MVの高さ 851px ／ 画面幅 1440px）。1440px以上は固定 */
  .mv-circle-pink {
    bottom: 16.7%;
    /* 142÷851 */
    left: calc(max(0px, (100% - 1440px) / 2) + min(189px, 13.1vw));
    /* 189÷1440 */
    width: min(140px, 9.72vw);
    /* 140÷1440 */
    height: min(140px, 9.72vw);
    background-color: #c96e86;
  }

  .mv-circle-line {
    bottom: 12.8%;
    /* 109÷851 */
    left: calc(max(0px, (100% - 1440px) / 2) + min(111px, 7.7vw));
    /* 111÷1440 */
    width: min(140px, 9.72vw);
    height: min(140px, 9.72vw);
    border: 4px solid #c9a890;
  }

  .mv-circle-line-large {
    bottom: 2.5%;
    /* 21÷851 */
    right: calc(max(0px, (100% - 1440px) / 2) + min(27px, 1.9vw));
    /* 27÷1440 */
    width: min(200px, 13.9vw);
    /* 200÷1440 */
    height: min(200px, 13.9vw);
    border: 4px solid #c9a890;
  }

  /* ---------- エムズの想い ---------- */
  /* 左：見出し＋本文／右：画像（画面右端まで） */
  .our-philosophy {
    display: grid;
    grid-template-columns: min(620px, 43%) 1fr;
    /* 620÷1440 ≒ 43% */
    grid-template-rows: auto 1fr;
    padding-top: 96px;
    padding-bottom: 96px;
    isolation: isolate;
  }

  /* 左の緑の台形 */
  .our-philosophy::before {
    content: "";
    position: absolute;
    top: 32px;
    left: -109px;
    /* 左辺は画面外に出す（見える範囲：上辺191px／下辺119px） */
    z-index: -1;
    width: 300px;
    height: 593px;
    background-color: #d5e6d9;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transform: skewX(-6.92deg);
    /* 上辺と下辺の差 72px ÷ 高さ 593px → 約6.92° 右辺を斜めに */
    transform-origin: left top;
    /* ※clip-path だと影まで切れるため skew で台形にしている */
  }

  .philosophy-head {
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 0 min(103px, 7.15vw);
    /* 103÷1440 ≒ 7.15vw */
    background: none;
  }

  .philosophy-heading {
    margin-top: 30px;
    line-height: 1.4;
  }

  .philosophy-img-wrap {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 10px;
    clip-path: none;
  }

  .philosophy-img {
    height: auto;
    max-height: 560px;
    /* 画面が広いときに縦に伸びすぎないよう上限 */
    aspect-ratio: 820 / 461;
  }

  .philosophy-body {
    grid-column: 1;
    grid-row: 2;
    padding: 0 0 0 min(103px, 7.15vw);
  }

  .philosophy-text {
    max-width: 353px;
    margin-top: 34px;
    line-height: 1.95;
  }

  .philosophy-btn {
    margin: 25px 0 0 71px;
  }

  /* ---------- 働くうえで気になること ---------- */
  /* 見出しの帯（カンプ w1440 で高さ261px） */
  .work-head {
    padding: 52px 0 69px;
  }

  .work-heading {
    margin-top: 16px;
  }

  .work-line {
    margin-top: 14px;
  }

  .work-lead {
    margin-top: 18px;
  }

  /* 左：番号・文章・ボタン／右：画像 */
  .work-item {
    display: grid;
    grid-template-columns: 1fr min(666px, 54%);
    /* 666÷1230（左右の余白を除いた幅）≒ 54% */
    padding: 76px min(109px, 7.6vw) 120px min(101px, 7vw);
    /* 109÷1440 ≒ 7.6vw／101÷1440 ≒ 7vw */
  }

  .work-item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 40px 9px 0;
  }

  .work-item-number {
    font-size: calc(var(--main-heading) * 1.5);
    /* 32px × 1.5 ＝ 48px */
    text-align: left;
  }

  .work-item-copy {
    margin: 32px 0 0;
  }

  .work-item-heading {
    line-height: 2.05;
  }

  .work-item-keyword {
    font-size: var(--middle-heading);
  }

  .work-item-text {
    margin: 0;
    line-height: 2.05;
  }

  .work-item-img-wrap {
    margin-top: 0;
    isolation: isolate;
  }

  /* ボタンはカラムの一番下（画像の下端とそろえる） */
  .work-item-btns {
    align-items: flex-start;
    gap: 20px;
    margin: auto 0 0 3px;
  }

  /* 2つ目のボタンは右にずらす */
  .work-item-btn:nth-child(2) {
    margin-left: clamp(0px, calc(100% - 290px), 203px);
    /* 幅が狭いときは、はみ出さない範囲でずらす（ボタン271px＋矢印のはみ出し19px） */
  }

  /* PCは枠線のボタン */
  .work-item-btn-pink.more-btn {
    border-color: #6b5f58;
    background-color: transparent;
    color: #5b534d;
    font-weight: 500;
  }

  /* ホバー時（上の指定が共通ボタンのホバーより優先されるため明記）。色は custom.css の --hover-〇〇 */
  .work-item-btn-pink.more-btn:hover {
    border-color: var(--hover-color);
    background-color: var(--hover-color);
    color: #fff;
    font-weight: 700;
  }

  /* 02・04：画像が左、文章が右 */
  .work-item-reverse {
    grid-template-columns: min(666px, 54%) 1fr;
  }

  .work-item-reverse .work-item-img-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .work-item-reverse .work-item-body {
    grid-column: 2;
    grid-row: 1;
    padding: 20px 0 9px 63px;
  }

  /* 緑のドット … 画像の左上、画像の後ろ */
  .work-accent-green {
    top: -110px;
    right: auto;
    bottom: auto;
    left: 13px;
    z-index: -1;
    width: 124px;
  }

  /* 格子のドット … 画像の真下 */
  .work-accent-grid {
    top: 100%;
    left: 25.7%;
    /* 171÷664（1440時の画像幅）≒ 25.7% */
    width: 60%;
    /* 398÷664 ≒ 60%（1440で原寸） */
  }

  .work-item-reverse .work-accent-grid {
    left: 20%;
    /* 133÷664 ≒ 20% */
  }

  /* 飾りのドット（茶） … PCは画像の右下、画像の後ろ */
  .work-accent-brown {
    top: auto;
    right: 9px;
    bottom: -83px;
    left: auto;
    z-index: -1;
    width: 131px;
  }

  /* ---------- DATA ---------- */
  /* 左：文章／右：円グラフ */
  .data-inner {
    display: grid;
    grid-template-columns: 1fr min(449px, 38vw);
    /* 449÷1440 ≒ 31%（狭い画面では少し大きめに確保） */
    align-items: center;
    gap: 40px;
    padding: 53px min(171px, 11.9vw) 53px min(108px, 7.5vw);
    /* 171÷1440 ≒ 11.9vw／108÷1440 ≒ 7.5vw */
  }

  /* PC：左端のピンクの台形（右辺が下に向かって広がる） */
  .data::before {
    top: -24px;
    left: -100px;
    /* 左辺は画面外（見える上辺58px／下辺99px） */
    width: 158px;
    height: 598px;
    background-color: #c96e86;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    clip-path: none;
    transform: skewX(3.92deg);
    /* 上辺と下辺の差 41px ÷ 高さ 598px → 約3.92° */
    transform-origin: left top;
  }

  .data-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 0 17px;
  }

  .data .en-ttl {
    padding: 0;
    font-size: var(--middle-heading);
  }

  .data-heading {
    margin: 24px 0 0;
    text-align: left;
  }

  .data-text {
    margin: 25px 0 0;
    line-height: 2;
  }

  .data-btn {
    order: 0;
    margin: 66px 0 0 min(197px, 13.7vw);
    /* 197÷1440 ≒ 13.7vw */
  }

  .data-chart {
    width: 100%;
    margin: 0;
  }

  /* ---------- Interview ---------- */
  /* 左：見出し・ボタン（sticky で固定）／右：カードが縦に並んでスクロール */
  .interview {
    display: grid;
    grid-template-columns: 1fr min(708px, 57%);
    /* 708÷1232（左右の余白を除いた幅）≒ 57% */
    align-items: start;
    column-gap: 40px;
    padding: 28px min(107px, 7.4vw) 115px min(101px, 7vw);
    /* 107÷1440 ≒ 7.4vw／101÷1440 ≒ 7vw */
  }

  /* 固定する左側は「文字とボタン」だけの高さ。飾りの丸は上にはみ出して置く（高さに含めない）
     top は JS で、文字が画面に収まる位置に自動で調整（初期値は丸が全部見える 206px） */
  .interview-side {
    position: sticky;
    top: 206px;
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin-top: 206px;
    /* 丸のぶん（28＋178）。margin なので固定する高さには含まれない */
  }

  .interview-intro {
    padding: 0;
  }

  .interview-circle {
    position: absolute;
    display: block;
    border-radius: 50%;
  }

  /* 丸は Interview の文字の上に配置（文字の上端から 178px・206px 上） */
  .interview-circle-pink {
    top: -206px;
    left: 76px;
    width: 144px;
    height: 144px;
    background-color: #c96e86;
  }

  .interview-circle-line {
    top: -178px;
    left: 0;
    width: 140px;
    height: 140px;
    border: 4px solid #c9a890;
  }

  .interview .en-ttl {
    position: relative;
    font-size: var(--middle-heading);
  }

  .interview-heading {
    margin: 50px 0 0;
    line-height: 1.35;
    white-space: nowrap;
    /* 改行は <br> の位置だけ（w1024 など左の列が狭いときに「キャリ／ア。」と4行にならないように） */
  }

  .interview-sub {
    margin-top: 60px;
    text-align: left;
  }

  /* 左の列が狭いとき（w1024 など）は「本音に触れるインタビュー。」をまとめて次の行へ（途中で切れないように） */
  .interview-sub-em {
    display: inline-block;
  }

  .interview-text {
    margin-top: 45px;
    line-height: 1.5;
  }

  .interview-btns {
    align-items: flex-start;
    margin: 56px 0 0 7px;
  }

  /* 職場見学会（Interview）：PCの長い矢印は枠の外にはみ出すので、ホバー前も茶色に */
  .more-btn.interview-btn.hover-job-tour::before,
  .more-btn.interview-btn.hover-job-tour::after {
    background-color: #6b5f58;
  }

  /* MOREの矢印をボタンの大きさに合わせて大きく */
  .interview-card-more-icon::before {
    width: 20px;
  }

  .interview-card-more-icon::after {
    top: calc(50% - 8px);
    right: calc(50% - 8px);
    width: 11px;
    height: 11px;
  }

  /* 右側：スライダーをやめて縦に並べる */
  .interview-slider {
    grid-column: 2;
    grid-row: 1;
    margin-top: 87px;
    /* ※左側（.interview-side）の margin-top とは独立 */
    /* カードの上端はセクション上端から115px（115−28） */
  }

  .interview-list {
    flex-direction: column;
    gap: 80px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .interview-slide {
    padding: 0;
  }

  .interview-card {
    margin: 0;
    padding: 49px 52px 32px 45px;
    /* 画像の左右（45px・52px）はカンプ実測 */
  }

  .interview-card-body {
    margin-top: 28px;
    padding-right: 31px;
  }

  .interview-card-num {
    font-size: var(--main-text);
  }

  .interview-card-num-current {
    font-size: var(--middle-heading);
  }

  .interview-card-title {
    margin-top: 28px;
    font-size: var(--main-heading);
    line-height: 1.4;
  }

  .interview-card-meta {
    margin-top: 16px;
    font-size: calc(var(--main-text) * 0.88);
    /* 17px × 0.88 ≒ 15px */
  }

  .interview-card-more {
    margin-bottom: 30px;
    font-size: var(--sub-heading);
  }

  .interview-card-more-icon {
    width: 61px;
    height: 61px;
    margin-top: 8px;
  }

  .interview-dots {
    display: none;
  }

  /* ---------- Joining Bonus ---------- */
  /* 左：文章・ボタン／右：少し傾けた画像＋丸 */
  .bonus-inner {
    display: grid;
    grid-template-columns: 1fr min(770px, 62%);
    /* 770÷1248（左右の余白とすき間を除いた幅）≒ 62%（白フチ込みの画像幅） */
    align-items: center;
    column-gap: 40px;
    padding: 60px min(46px, 3.2vw) 50px min(106px, 7.4vw);
    /* 46÷1440 ≒ 3.2vw／106÷1440 ≒ 7.4vw */
  }

  .bonus-body {
    display: block;
    grid-column: 1;
    grid-row: 1;
  }

  .bonus .en-ttl {
    padding: 0;
    font-size: var(--middle-heading);
  }

  .bonus-heading {
    margin-top: 38px;
    padding: 0;
  }

  .bonus-heading-em {
    font-size: 1.12em;
  }

  .bonus-text {
    margin-top: 32px;
    padding: 0;
  }

  .bonus-btns {
    align-items: flex-start;
    margin-top: 70px;
  }

  /* 職場見学会：PCの長い矢印は枠の外にはみ出すので、ホバー前も茶色に（白だと背景に埋もれる） */
  .more-btn.bonus-btn.hover-job-tour::before,
  .more-btn.bonus-btn.hover-job-tour::after {
    background-color: #6b5f58;
  }

  .bonus-visual {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  /* 白フチ付きで少し傾ける（右上がり 約2°） */
  .bonus-img {
    transform: rotate(-2deg);
  }

  .bonus-badge {
    top: -2px;
    right: 11%;
    /* 86÷770 ≒ 11% */
    width: 155px;
    height: 155px;
  }

  .bonus-badge-label {
    font-size: var(--main-text);
  }

  .bonus-badge-amount {
    margin-top: 6px;
    font-size: var(--middle-heading);
  }

  .bonus-badge-num {
    font-size: calc(var(--main-heading) * 1.75);
    /* 32px × 1.75 ＝ 56px */
  }

  .bonus-badge-rays {
    height: 19px;
  }

  .bonus-badge-rays::before,
  .bonus-badge-rays::after {
    height: 17px;
  }

  .bonus-badge-rays::before {
    left: -22px;
  }

  .bonus-badge-rays::after {
    right: -22px;
  }

}

@media screen and (min-width:1440px) {

  .our-philosophy,
  .work-list,
  .data-inner,
  .interview,
  .bonus-inner {
    max-width: 1440px;
    margin: 0 auto;
  }

  /* ---------- メインビジュアル（w1440以上）----------
     写真の大きさ・位置は common.css の .mv-fade（下層ページと共通の --fv-w／--fv-left）
     コピー・丸は写真の左端 --fv-left からの距離で置く（w1440のカンプと同じ位置関係） */
  .mv-text {
    left: calc(var(--fv-left) - 163px);
    /* 270 − 107 */
  }

  .mv-circle-pink {
    left: calc(var(--fv-left) - 81px);
    /* 270 − 189 */
  }

  .mv-circle-line {
    left: calc(var(--fv-left) - 159px);
    /* 270 − 111 */
  }

  /* 右下の輪は写真に対する位置（w1440のカンプで写真の左端から 943px ＝ 写真の幅の 約69.6%）で置く */
  .mv-circle-line-large {
    right: auto;
    left: calc(var(--fv-left) + var(--fv-w) * 0.6964);
  }

}