/* =====================================================================
   /fuku-sys/manae（マナe）固有スタイル
   出典: Figma manae 530:4786 / 現行サイト実測
   共通: page-header / feature-* / section-label / recruit-cta は他CSS
   ===================================================================== */

/* ---- イントロ: .lead* は components.css に共通化。イラスト幅だけこのページの値にする。
       PC専用の差分は min-width で囲む（メディアクエリ外に置くと、共通のSP指定より
       読み込み順・詳細度で勝ってしまい、SP側で打ち消しが必要になる） ---- */
@media (min-width: 840px) {
  .page-manae .lead-img { width: 400px; }
}

/* ---- FEATURE: .feature-section* は components.css に共通化。
       マナeはUI画像なので白カードに contain させる差分のみ持つ ---- */
.page-manae .feature-img--contain { flex-basis: 420px; background: transparent; box-shadow: none; }
.page-manae .feature-img--contain img { height: auto; max-height: 260px; margin-inline: auto; }

/* ---- 学べるコンテンツ ----
   下側の余白は次の「学びやすい特徴」(.page-section = padding-top 80px) と足し算になる。
   現行サイト実測ではカード下端から次の見出しまで100pxなので 20px + 80px にしている
   （100px のままだと180pxになり、間が空きすぎて不自然に見えていた）。 */
/* position / overflow / 上余白は .deco-section が持つ（components.css）*/
.contents-section { padding-bottom: 20px; }
.contents-section .container { position: relative; z-index: 1; }
.contents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}
.contents-card {
  padding: 30px;
  background: var(--c-primary-50);
  border-radius: var(--radius-card);
}
.contents-cat {
  margin: 0 auto 28px;
  max-width: 340px;
  padding: 10px 24px;
  text-align: center;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.contents-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.contents-icons li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.contents-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}
.contents-icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.contents-icon-label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-text-strong); text-align: center; }

/* ---- 学びやすい特徴 ---- */
.easy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.easy-item { display: flex; align-items: center; gap: 24px; }
.easy-body { flex: 1 1 0; min-width: 0; }
.easy-no {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 18px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.easy-title { margin: 0 0 12px; font-size: 1.1rem; font-weight: var(--fw-semibold); color: var(--c-primary); }
.easy-text { margin: 0; font-size: var(--fs-small); line-height: 1.8; color: var(--c-text-strong); }
.easy-img { flex: 0 0 130px; }
.easy-img img { width: 130px; height: 130px; object-fit: cover; border-radius: 12px; display: block; }

/* ---- 管理機能: カードは components.css の「3カラムのカードグリッド」を使う ---- */

/* ---- オプション機能
       カード本体は components.css の「帯見出し付きカード」を使う。ここは差分のみ ---- */
.option-section { padding-block: 20px 100px; }
/* ⚠️ 共通部品の値を上書きする差分は min-width で囲む（理由は page-work-support.css と同じ）。
   特に .option-img の flex-basis はメディアクエリ外に置くと縦積みで「高さ」として復活し、
   画像の下に約230pxの空白が戻ってしまう。 */
@media (min-width: 840px) {
  .option-item { align-items: center; }
  .option-item + .option-item { margin-top: 56px; }
  .option-img { flex-basis: 400px; max-width: 44%; }
}
.option-no {                         /* 現行サイト実測: 青アウトラインのピル */
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 20px;
  background: transparent;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.option-title { margin-bottom: 16px; }

/* =====================================================================
   レスポンシブ
   ===================================================================== */
/* SPの縦余白は現行サイト実測の 50px 基調に合わせる */
@media (max-width: 839px) {
  /* ⚠️ components.css の `.feature-img { flex-basis: auto }` より詳細度が高いため、
     ここで戻さないと flex-basis 420px が縦積みの「高さ」として残り、
     PC画面のスクリーンショットの下に約260pxの空白ができる。 */
  .page-manae .feature-img--contain { flex: 0 0 auto; }

  .contents-section { padding-bottom: 50px; }
  .contents-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .contents-card { padding: 20px; }
  .contents-cat { margin-bottom: 20px; }


  .easy-grid { grid-template-columns: 1fr; gap: 24px; }
  .easy-item { gap: 16px; }
  .easy-img { flex-basis: 96px; }
  .easy-img img { width: 96px; height: 96px; }

  .option-section { padding-block: 0 50px; }
}