@charset "UTF-8";

/* =========================================================
   features.css … エムズで働く魅力（features/index.html）
   ※ フォントサイズは custom.css の :root 変数のみ使用
   ※ ページ見出しは common.css の .page-hero（エムズの想い・お知らせと共通）
   ※ 線が左から右へ伸びる演出は common.js の js-scroll（.is-ready → .is-visible）
   ========================================================= */

/* =========================================================
   ページ全体（SP）
   ========================================================= */
/* 丸い写真が画面の端からはみ出すので、はみ出した分を切る（横スクロール防止） */
.features {
  overflow-x: clip;
}

/* パンくずはPCのみ */
.breadcrumb {
  display: none;
}

/* 文字の色 */
.features-pink {
  color: #c96e86;
}

.features-green {
  color: #7f9f83;
}

/* 英字の小見出し */
.features-label {
  color: #5b534d;
  font-size: var(--sub-heading);
  font-weight: 600;
}

/* ---------- 横いっぱいの線（画面に入ったら左から右へ伸びる） ---------- */
.features-line {
  display: block;
  width: 100%;
  height: 3px;
}

.features-line-pink {
  background-color: #c96e86;
}

.features-line-green {
  background-color: #7f9f83;
}

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

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

/* ---------- 丸い写真と飾りの輪（共通） ---------- */
.features-point-photo,
.features-next-photo {
  position: relative;
  aspect-ratio: 1;
}

.features-point-photo img,
.features-next-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 輪（中は透明。グラデーションの枠だけ残す） */
.features-ring {
  position: absolute;
  aspect-ratio: 1;
  border: 4px solid transparent;
  border-radius: 50%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* 黄色〜ピンク */
.features-ring-pink {
  background: linear-gradient(60deg, #fbd87a, #d26f87) border-box;
}

/* 黄色〜緑 */
.features-ring-green {
  background: linear-gradient(90deg, #f3e88f, #8ea889) border-box;
}

/* ---------- ボタン（SP：塗り＋白文字。矢印は枠の外の長い →） ---------- */
.features-btn {
  justify-content: center;
  width: 265px;
  height: 56px;
  padding: 0;
  border-color: #c6a991;
  background-color: #c6a991;
  color: #fff;
}

/* ピンクの塗り（キャリアの「私のキャリアアップ」） */
.features-btn-pink {
  border-color: #c96e86;
  background-color: #c96e86;
}

/* 矢印は文字色（白）ではなく茶色 */
.features-btn::before,
.features-btn::after {
  background-color: #6b5f58;
}

/* =========================================================
   ページ見出し（SP）
   ========================================================= */
.features-head {
  padding: 30px 12px 0;
}

/* スライダーの飾りの輪（SP）… 中央の写真（幅315px）の左上と左下 */
.features-head .page-hero-img::before,
.features-head .page-hero-img::after {
  content: "";
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  border: 3.5px solid transparent;
  border-radius: 50%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.features-head .page-hero-img::before {
  top: -8px;
  left: calc(50% - 157.5px - 5px);
  width: 73px;
  background: linear-gradient(135deg, #a9b5e0, #e79bb5) border-box;
}

.features-head .page-hero-img::after {
  top: 369px;
  left: calc(50% - 157.5px - 19px);
  width: 79px;
  background: linear-gradient(100deg, #fbd87a, #d26f87) border-box;
}

/* =========================================================
   導入文（SP）
   ========================================================= */
.features-intro {
  position: relative;
  margin-top: 30px;
}

.features-intro-text {
  position: relative;
  padding: 0 22px;
  color: #5b534d;
  font-family: "Noto Serif JP", serif;
  font-size: var(--sub-heading);
  font-weight: 500;
  line-height: 2.4;
  font-feature-settings: "palt";
  /* かっこの前後を詰める */
}

.features-intro-large {
  display: inline-block;
  /* 「キャリア」などの途中で改行しない */
  font-size: var(--main-heading);
  font-weight: 600;
}

/* 「だからこそ」はSPでは小さい文字、PCでは大きい文字 */
.features-intro-large .features-intro-large-pc {
  display: none;
}

/* 文章の右下の飾りの輪（SPのみ） */
.features-intro-text::after {
  content: "";
  position: absolute;
  top: 50px;
  left: 243px;
  z-index: -1;
  width: 118px;
  aspect-ratio: 1;
  border: 4px solid transparent;
  border-radius: 50%;
  background: linear-gradient(90deg, #f3e88f, #8ea889) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}

.features-intro-text {
  isolation: isolate;
}

.features-intro .features-line {
  margin-top: 40px;
}

/* =========================================================
   働きやすさ（SP）… 小見出し → 見出し → 丸い写真 → 文章 → ボタン の順に並べ替え
   ========================================================= */
.features-point {
  display: flex;
  flex-direction: column;
  padding: 0 22px;
}

.features-point-flexible {
  margin-top: 30px;
}

.features-point-talk {
  margin-top: 100px;
}

/* SPは中身を1列に並べ替えるため、囲みを外す */
.features-point-body {
  display: contents;
}

.features-point-heading {
  order: 2;
  margin: 8px 0 0;
  color: #c96e86;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.65;
}

.features-label {
  order: 1;
}

.features-point-photo {
  order: 3;
  width: 304px;
  max-width: 100%;
  margin: 20px auto 0;
}

.features-point-photo .features-ring {
  top: 189px;
  left: -47px;
  width: 124px;
}

.features-point-text {
  order: 4;
  margin-top: 56px;
  line-height: 2.06;
}

.features-point-text strong {
  font-weight: 700;
}

/* 黄色い下線（SPのみ） */
.features-marker {
  text-decoration: underline 3px #f9d27a;
  text-underline-offset: 9px;
  text-decoration-skip-ink: none;
}

.features-point .features-btn {
  order: 5;
  margin: 70px auto 0;
}

/* =========================================================
   写真の帯（SP）… 右から左へ流れ続ける（複製は features.js）
   ========================================================= */
.features-gallery {
  margin-top: 80px;
  overflow: hidden;
}

.features-gallery-list {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
}

/* -50% でちょうど1周になるよう、間隔は gap ではなく右の余白で取る */
.features-gallery-item {
  flex-shrink: 0;
  width: 203px;
  margin-right: 7px;
}

.features-gallery-item img {
  aspect-ratio: 1;
  object-fit: cover;
}

.features-gallery.is-loop .features-gallery-list {
  animation: features-gallery 50s linear infinite;
}

@keyframes features-gallery {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .features-gallery.is-loop .features-gallery-list {
    animation: none;
  }
}

/* =========================================================
   キャリアパス・その先のキャリア 共通の見出し（SP）
   ========================================================= */
.features-section-head {
  text-align: center;
}

.features-section-heading {
  margin: 30px 0 0;
  padding: 0 22px;
  color: #5b534d;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.65;
}

.features-section-heading.features-green {
  color: #7f9f83;
}

.features-section-head+.features-line {
  margin-top: 25px;
}

.features-section-lead {
  margin-top: 25px;
  padding: 0 20px;
  line-height: 2.1;
}

/* =========================================================
   キャリアパス（SP）
   ========================================================= */
.features-career {
  position: relative;
  z-index: 1;
  padding: 110px 0 90px;
  background-color: #e7eee8;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.features-career .features-section-heading {
  padding: 0 70px;
}

.features-career-list {
  margin-top: 60px;
}

.features-career-item {
  display: flex;
  flex-direction: column;
}

.features-career-item+.features-career-item {
  margin-top: 75px;
}

.features-career-body {
  padding: 0 20px;
}

.features-career-heading {
  margin: 0;
  color: #7f9f83;
  font-size: var(--middle-heading);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.features-career-num {
  display: block;
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
  font-size: var(--main-heading);
  font-weight: 400;
  line-height: 1.2;
}

.features-career-sub {
  margin-top: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid #5b534d;
  font-size: var(--sub-heading);
  font-weight: 700;
  text-align: center;
}

.features-career-text {
  margin-top: 15px;
  line-height: 2.06;
}

.features-career-img {
  aspect-ratio: 4 / 3;
  margin-top: 35px;
  object-fit: cover;
}

.features-career-item .features-btn {
  margin: 46px auto 0;
}

/* =========================================================
   その先のキャリア（SP）
   ========================================================= */
.features-next {
  padding: 88px 0 75px;
  background-color: #eeddd5;
}

/* SPの見出しは左寄せ */
.features-next .features-section-heading {
  padding: 0 22px 0 57px;
  font-size: var(--main-heading);
  text-align: center;
}

.features-next-lead {
  margin-top: 25px;
  padding: 0 20px;
  /* font-family: "Noto Serif JP", serif; */
  font-size: var(--main-text);
  line-height: 2.06;
  text-align: center;
}

.features-next-body {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  padding: 0 20px;
}

.features-next-photo {
  width: 304px;
  max-width: 100%;
  margin: 0 auto;
}

.features-next-photo .features-ring {
  top: 189px;
  left: -47px;
  width: 124px;
}

/* ---------- 段階（左に色の帯、帯と帯の間はピンクの点線） ---------- */
.features-step-list {
  margin: 70px 0 0;
  padding: 0;
}

.features-step {
  position: relative;
  padding-left: 47px;
}

.features-step+.features-step {
  margin-top: 45px;
}

/* 「子育て中の職員の声」ボタンはPCのみ（SPは下のバナー） */
.features-next-btn {
  display: none;
}

/* 色の帯 */
.features-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  background-color: #fdda7a;
}

.features-step:nth-child(2)::before {
  background-color: #f0be7d;
}

.features-step:nth-child(3)::before {
  background-color: #e2a380;
}

.features-step:nth-child(4)::before {
  background-color: #d38284;
}

.features-step:nth-child(5)::before {
  background-color: #c96e86;
}

/* 点線（次の段階まで） */
.features-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 9px;
  height: 45px;
  border-left: 3px dotted #c96e86;
}

/* ---------- 順に表示する演出 ----------
   発火点はリスト全体の1つ（ol に js-scroll）。画面に入ったら li が上から 0.3秒ずつずれて表示
   段階を増やしたときは nth-child の行を足す */
.features-step-list.is-ready .features-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.features-step-list.is-visible .features-step {
  opacity: 1;
  transform: none;
}

.features-step-list.is-visible .features-step:nth-child(2) {
  transition-delay: 0.3s;
}

.features-step-list.is-visible .features-step:nth-child(3) {
  transition-delay: 0.6s;
}

.features-step-list.is-visible .features-step:nth-child(4) {
  transition-delay: 0.9s;
}

.features-step-list.is-visible .features-step:nth-child(5) {
  transition-delay: 1.2s;
}

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

.features-step-label {
  color: #6b5f58;
  font-family: "Inter", sans-serif;
  font-size: var(--sub-heading);
  font-weight: 600;
  line-height: 1.3;
}

.features-step-title {
  margin: 22px 0 0;
  color: #6b5f58;
  font-size: var(--middle-heading);
  font-weight: 700;
  line-height: 1.3;
}

.features-step-title.features-pink {
  color: #c96e86;
}

.features-step-text {
  margin-top: 10px;
  line-height: 1.6;
}

/* =========================================================
   エムズの８つのいいね（SPのみ）… 写真の上に白を重ねてボタン
   ========================================================= */
.features-banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 237px;
  border-bottom: 20px solid #c96e86;
  /* フッターの上のピンクの帯 */
}

.features-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.45);
}

.features-banner .features-btn {
  z-index: 2;
}

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

  /* ---------- パンくず（contact.css／recruit.css と同じ） ---------- */
  .breadcrumb {
    display: block;
    width: min(1160px, 100% - 80px);
    margin: 0 auto;
    padding: 10px 0 0 0;
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-size: var(--breadcrumb-text);
    list-style: none;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    margin: 0 10px;
  }

  .breadcrumb-link {
    color: #5b534d;
  }

  .breadcrumb-link:hover {
    text-decoration: underline;
  }

  /* ---------- ボタン（PC：共通の枠線ボタンに戻す） ----------
     文字は左右中央。一番長い「困ったときの相談体制を見る」（ホバーの太字）でも、
     枠の内側に入る矢印（右端から約28px）と重ならない幅に */
  .features-btn {
    justify-content: center;
    width: 300px;
    height: 60px;
    padding: 0;
    border-color: #6b5f58;
    background-color: transparent;
    color: #5b534d;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }

  .features-btn:hover {
    border-color: var(--hover-color);
    background-color: var(--hover-color);
    color: #fff;
  }

  /* ---------- ページ見出し ---------- */
  .features-head {
    padding: 0;
  }

  .features-head .page-hero-img::before,
  .features-head .page-hero-img::after {
    display: none;
  }

  /* 丸い見出しの英字と日本語の間に短い線 */
  .features-head .page-hero-label::after {
    content: "";
    display: block;
    width: 66px;
    height: 1px;
    margin: 16px auto 0;
    background-color: #7f9f83;
  }

  .features-head .page-hero-title {
    margin-top: 14px;
  }

  /* 「エムズで」は小さく */
  .page-hero-title-sub {
    font-size: min(var(--middle-heading), 1.74vw);
    /* 25px（w1440〜）。見出しと同じく画面幅で縮める（25 ÷ 1440 ≒ 1.74vw） */
  }

  /* ---------- 導入文 ---------- */
  .features-intro {
    margin-top: 72px;
  }

  .features-intro-text {
    padding: 0 40px;
    font-size: var(--middle-heading);
    line-height: 1.75;
    text-align: center;
  }

  .features-intro-large {
    font-size: calc(var(--main-heading) * 1.125);
    /* 32px × 1.125 ＝ 36px */
    font-weight: 500;
  }

  .features-intro-text::after {
    content: none;
  }

  .features-intro-large .features-intro-large-pc {
    display: inline;
  }

  .features-intro-sp {
    display: none;
  }

  .features-intro .features-line {
    margin-top: 36px;
  }

  /* ---------- 働きやすさ：文章と丸い写真を横並び（2つ目は左右逆、写真を1つ目に重ねる） ---------- */
  .features-point {
    display: grid;
    align-items: start;
    padding: 0;
  }

  .features-point-body {
    display: block;
  }

  .features-point-heading {
    margin-top: 20px;
    font-size: var(--main-heading);
  }

  .features-point-text {
    margin-top: 44px;
    line-height: 1.94;
  }

  .features-marker {
    text-decoration: none;
  }

  .features-point .features-btn {
    margin: 78px 0 0;
  }

  .features-point-photo {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* 1つ目：文章が左・写真が右（右端からはみ出す） */
  .features-point-flexible {
    grid-template-columns: minmax(0, 1fr) min(617px, 42.85vw);
    margin-top: 118px;
    padding-left: min(150px, 10.4vw);
  }

  .features-point-flexible .features-point-body {
    max-width: 552px;
    padding-right: 30px;
  }

  /* 写真は右端から少しはみ出す（はみ出した分は .features の overflow-x: clip で切れる）
     下は2つ目の写真と重ねるため、下の余白をマイナスにして高さに数えない */
  .features-point-flexible .features-point-photo {
    left: min(57px, 3.96vw);
    margin: 109px 0 calc(-1 * min(168px, 11.7vw));
  }

  /* 文章の下は2つ目の写真まで130px空ける（文章が長くなっても写真が重ならない） */
  .features-point-flexible .features-point-body {
    padding-bottom: 130px;
  }

  .features-point-flexible .features-ring {
    top: 79.4%;
    left: -14.9%;
    width: 41.7%;
    border-width: 8px;
  }

  /* 2つ目：写真が左（左端からはみ出す）・文章が右。1つ目の写真の下に食い込ませる */
  .features-point-talk {
    grid-template-columns: min(616px, 42.8vw) minmax(0, 1fr);
    column-gap: min(153px, 10.6vw);
    margin-top: 0;
  }

  .features-point-talk .features-point-photo {
    order: 0;
    left: calc(-1 * min(38px, 2.6vw));
  }

  .features-point-talk .features-point-body {
    order: 1;
    max-width: 554px;
    margin-top: min(379px, 26.3vw);
    padding-right: 30px;
  }

  .features-point-talk .features-point-heading {
    margin-top: 0;
  }

  .features-point-talk .features-point-text {
    margin-top: 44px;
  }

  .features-point-talk .features-btn {
    margin-top: 60px;
  }

  .features-point-talk .features-ring {
    top: 75.6%;
    left: 56.5%;
    width: 37.3%;
    border-width: 6px;
  }

  /* ---------- 写真の帯 ---------- */
  .features-gallery {
    margin-top: 187px;
    padding-bottom: 79px;
  }

  .features-gallery-item {
    width: min(311px, 21.6vw);
    margin-right: min(58px, 4vw);
  }

  /* ---------- 共通の見出し ---------- */
  .features-section-heading {
    margin-top: 40px;
    font-size: var(--main-heading);
  }

  .features-section-head+.features-line {
    margin-top: 16px;
  }

  .features-section-lead {
    margin-top: 30px;
    text-align: center;
  }

  /* ---------- キャリアパス：左に文章・右に写真のカード ---------- */
  .features-career {
    padding: 69px 0 83px;
  }

  .features-career .features-section-heading {
    padding: 0 22px;
  }

  .features-career-list {
    margin-top: 60px;
  }

  .features-career-item {
    display: grid;
    grid-template-columns: minmax(0, 883fr) minmax(0, 557fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "body photo"
      "btn photo";
    background-color: #faf7f3;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }

  .features-career-item+.features-career-item {
    margin-top: 28px;
  }

  .features-career-body {
    grid-area: body;
    max-width: calc(min(143px, 9.9vw) + 579px);
    padding: 52px 30px 0 min(143px, 9.9vw);
  }

  .features-career-heading {
    display: flex;
    align-items: baseline;
    gap: 15px;
    font-size: var(--middle-heading);
    font-weight: 500;
    text-align: left;
  }

  .features-career-num {
    display: inline;
    margin: 0;
    font-size: var(--main-heading);
  }

  .features-career-sub {
    margin-top: 40px;
    padding-bottom: 12px;
    text-align: left;
  }

  .features-career-text {
    margin-top: 14px;
    line-height: 1.94;
  }

  /* 写真はカードの高さ（文章側で決まる）に合わせて切り抜く。height: 0 ＋ min-height: 100% で写真自体は高さに数えない */
  .features-career-img {
    grid-area: photo;
    width: 100%;
    height: 0;
    min-height: 100%;
    aspect-ratio: auto;
    margin: 0;
  }

  .features-career-item .features-btn {
    grid-area: btn;
    align-self: end;
    justify-self: end;
    margin: 40px min(79px, 5.5vw) 45px 0;
  }

  /* ボタンがないカード（インタビュー非公開中など）：ボタンの分の高さをカードに残し、写真がつぶれないようにする
     （ボタンありのカードと同じ高さ ＝ 文章 ＋ 余白40px ＋ ボタン59px ＋ 余白45px） */
  .features-career-item:not(:has(> .features-btn)) .features-career-body {
    padding-bottom: 144px;
  }

  /* ---------- その先のキャリア：左に段階・右に丸い写真（右端からはみ出す） ---------- */
  .features-next {
    padding: 69px 0 106px;
  }

  .features-next .features-section-heading {
    padding: 0 22px;
    font-size: var(--main-heading);
    text-align: center;
  }

  .features-next-lead {
    margin-top: 30px;
    font-size: var(--sub-heading);
    text-align: center;
    font-family: Noto Sans JP;
  }

  .features-next-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(717px, 49.8vw);
    grid-template-rows: auto auto;
    margin-top: 42px;
    padding: 0 0 0 min(145px, 10vw);
  }

  .features-next-photo {
    grid-column: 2;
    grid-row: 1 / span 2;
    left: min(177px, 12.3vw);
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .features-next-photo .features-ring {
    top: 73.4%;
    left: -9.8%;
    width: 37.7%;
    border-width: 8px;
  }

  .features-step-list {
    grid-column: 1;
    grid-row: 1;
    margin: 49px 0 0;
    padding-right: 30px;
  }

  .features-step {
    padding-left: 46px;
  }

  .features-step-title {
    margin-top: 20px;
    font-size: var(--middle-heading);
  }

  .features-step-text {
    font-size: var(--main-text);
  }

  /* エムズの８つのいいね（SPのみ。common の .sp-only より .features-banner の display: flex が強いのでここで消す） */
  .features-banner {
    display: none;
  }

  .features-next-btn {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    margin: 122px 0 0 min(93px, 6.5vw);
  }

}

/* =========================================================
   1440px以上 … 2カラムの中身だけ幅1440pxで中央寄せ
   ・背景色のあるキャリアパス・その先のキャリアは、背景は画面いっぱいのまま中の要素だけ制限
   ・見出しの帯と横いっぱいの線、写真の帯（スライダー）は制限しない
   ・丸い写真の見切れ（画面端からのはみ出し）は1440pxの箱基準になる
   ========================================================= */
@media screen and (min-width: 1440px) {

  .features-point,
  .features-career-list,
  .features-next-body {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

}