@charset "UTF-8";

/* =========================================================
   support.css … 福利厚生・研修制度（support/index.html）
   ※ ページ見出し（写真・丸い見出し・飾りの輪）は common.css の .page-hero（エムズの想い・働く魅力と共通）
   ※ フォントサイズは custom.css の :root 変数をそのまま使う（calc で増やさない）
   ※ アイコンは Google Fonts の Material Symbols から書き出した SVG を img で読み込む（/assets/img/support-icon01.svg〜14。番号はページの上から順）
   ========================================================= */

/* =========================================================
   ページ全体（SP）
   ========================================================= */
.support {
  color: #5b534d;
  overflow-x: clip;
  /* 飾りの輪が画面の外にはみ出しても横スクロールさせない */
}

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

/* ---------- ページ見出し ---------- */
.support-head {
  padding: 30px 12px 0;
}

/* スライダーの飾りの輪（SP）… 中央の写真（幅315px）の左上と左下（エムズの想いと同じ） */
.support-head .page-hero-img::before,
.support-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);
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

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

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

/* =========================================================
   セクションの見出し（英字 → 見出し → 線 → リード）
   色：.support-heading-pink（ピンク）／.support-heading-green（緑）
   ========================================================= */
.support-heading-pink {
  --support-color: #c96e86;
}

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

.support-heading {
  text-align: center;
}

.support-heading-head {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--support-color);
}

.support-heading-en {
  font-family: "Inter", sans-serif;
  font-size: var(--sub-heading);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.support-heading-title {
  margin-top: 14px;
  color: var(--support-color);
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.support-heading-lead {
  margin-top: 24px;
  padding: 0 20px;
  font-size: var(--main-text);
  line-height: 1.8;
  text-align: left;
}

/* BENEFITS（SP）：線はリードの下 */
.support-heading-benefits {
  padding-bottom: 24px;
  border-bottom: 2px solid var(--support-color);
}

.support-heading-benefits .support-heading-head {
  padding-bottom: 0;
  border-bottom: none;
}

/* =========================================================
   飾りの輪（グラデーションの枠だけ。中は透明）
   ========================================================= */
.support-ring {
  position: absolute;
  z-index: -1;
  display: block;
  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;
}

/* =========================================================
   BENEFITS（SP）
   ========================================================= */
.support-benefits {
  margin-top: 70px;
}

/* ---------- WORK STYLE／LIFE SUPPORT のまとまり ---------- */
.support-group {
  position: relative;
  isolation: isolate;
  margin-top: 50px;
  padding: 0 20px;
}

.support-group-work {
  --support-color: #c96e86;
  --support-light: #f6e5e2;
}

.support-group-life {
  --support-color: #7f9f83;
  --support-light: #dde8dd;
  margin-top: 80px;
}

.support-group-en {
  padding-left: 12px;
  font-family: "Inter", sans-serif;
  font-size: var(--sub-heading);
  font-weight: 500;
  line-height: 1.4;
}

/* SPは見出しをすべて色付き、PCは「〇つ」だけ色付き */
.support-group-title {
  margin-top: 14px;
  padding-left: 12px;
  color: var(--support-color);
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* 輪の位置（SP） */
.support-ring-work {
  top: 10px;
  right: -230px;
  width: 360px;
  background: linear-gradient(200deg, #e2917e, #f3d77b 60%) border-box;
}

/* LIFE SUPPORT の輪：見出しの左側から右へ回り込む。右上はうすい黄色、左下に向かって緑（カンプの色） */
.support-ring-life {
  top: -42px;
  left: -166px;
  width: 364px;
  background: linear-gradient(to bottom left, #f8ed9a 55%, #a9bf8f) border-box;
}

/* ---------- カード（SP：1列） ---------- */
.support-card-list {
  display: grid;
  gap: 22px;
  margin: 40px 0 0;
  padding: 0;
}

.support-card {
  position: relative;
  padding: 0 11px 30px;
  border: 1px solid var(--support-color);
  background-color: #fdfcfa;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* 左上の縦長のタブ（GOOD＃番号・縦書き） */
.support-card-tab {
  position: absolute;
  top: 0;
  left: 10px;
  width: 24px;
  height: 117px;
  padding-top: 10px;
  background-color: var(--support-color);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: var(--main-text);
  line-height: 24px;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  /* 英数字も全角の＃も横に寝かせる（カンプ通り） */
  white-space: nowrap;
}

/* アイコン ＋ タイトル（SPは横並び） */
.support-card-head {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 117px;
  padding: 20px 0 0 58px;
}

/* アイコン（右下にうすい丸） */
.support-card-icon {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  line-height: 0;
}

.support-card-icon::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  z-index: -1;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--support-light);
}

.support-card-icon img {
  position: relative;
  width: 100%;
  height: auto;
}

.support-card-title {
  font-size: var(--sub-heading);
  font-weight: 700;
  line-height: 1.6;
}

.support-card-text {
  margin-top: 26px;
  font-size: var(--main-text);
  line-height: 1.75;
}

/* ---------- LIFE SUPPORT：横長のカード ---------- */
.support-card-wide .support-card-title {
  color: var(--support-color);
}

/* 対象の園（角丸の枠） */
/* 対象の園：1行に3園ずつ（3列 × 2段）。枠の幅はそろえる */
.support-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 4px;
  margin: 26px 0 0;
  padding: 0;
}

.support-tags li {
  padding: 3px 0;
  border: 1px solid #5b534d;
  border-radius: 999px;
  font-size: calc(var(--main-text) - 6px);
  /* SP 10px（ユーザー指定。園名が3つ並ぶ大きさ） */
  line-height: 1.5;
  letter-spacing: -0.03em;
  /* w360 でも「はっぴぃばーすKOBE」が枠に収まるよう少し詰める */
  text-align: center;
  white-space: nowrap;
}

/* 幅の狭いスマホ（w375未満）は文字間をもう少し詰める */
@media screen and (max-width: 374px) {
  .support-tags li {
    letter-spacing: -0.08em;
  }
}

.support-card-body {
  margin-top: 22px;
  font-size: var(--main-text);
  line-height: 1.75;
}

/* ---------- 折りたたみ（詳しくみる）… 開閉は support.js ---------- */
.support-more-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 0 auto;
  padding: 4px 0;
  color: var(--support-color);
  font-size: var(--main-text);
  cursor: pointer;
  transition: opacity 0.3s;
}

.support-more-btn:hover {
  opacity: 0.7;
}

/* ＋（開くと −） */
.support-more-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}

.support-more.is-open .support-more-btn::before {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

.support-more-body {
  display: none;
  padding-top: 6px;
}

.support-more.is-open .support-more-body {
  display: block;
}

/* 定着一時金の園ごとの内容（■＋園名） */
.support-detail dt {
  margin-top: 6px;
  font-weight: 700;
}

.support-detail dt::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.4em;
  background-color: #b5c8b6;
}

.support-detail dd {
  margin: 0;
}

/* =========================================================
   GROW UP SUPPORT（SP）
   ========================================================= */
.support-grow {
  margin-top: 70px;
}

/* ---------- 写真の帯（SPのみ。features.css の写真の帯と同じ作り） ---------- */
.support-gallery {
  overflow: hidden;
}

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

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

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

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

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

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

.support-grow .support-heading {
  margin-top: 90px;
}

/* ---------- 写真 ＋ 3つの項目 ---------- */
.support-grow-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}

/* 写真（後ろに少し傾いた色の板） */
.support-grow-photo {
  position: relative;
  width: calc(100% - 50px);
  margin: 0 auto;
}

.support-grow-photo::before {
  content: "";
  position: absolute;
  inset: -20px 18px 14px -20px;
  z-index: -1;
  transform: rotate(-2deg);
}

.support-grow-photo01::before {
  background-color: #7f9f83;
}

.support-grow-photo02::before {
  background-color: #eebccb;
}

.support-grow-photo img {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.support-grow-photo01 img {
  aspect-ratio: 410 / 514;
  object-fit: cover;
}

.support-grow-photo02 {
  margin-top: 80px;
}

.support-grow-photo02 img {
  aspect-ratio: 543 / 408;
  object-fit: cover;
}

/* 3つの項目（SPは白い帯） */
.support-grow-list {
  display: grid;
  gap: 30px;
  margin: 46px 0 0;
  padding: 0;
}

.support-grow-item {
  padding: 14px 20px 16px;
  background-color: #fff;
}

.support-grow-title {
  color: #7f9f83;
  font-size: var(--sub-heading);
  font-weight: 700;
  line-height: 1.5;
}

.support-grow-text {
  margin-top: 4px;
  font-size: var(--main-text);
  line-height: 1.75;
}

.support-grow-btns {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

/* 輪の位置（SP） */
.support-ring-grow01 {
  top: -50px;
  right: -200px;
  width: 300px;
  background: linear-gradient(160deg, #f3e88f, #93b48b) border-box;
}

.support-ring-grow02 {
  right: -170px;
  bottom: -110px;
  width: 300px;
  background: linear-gradient(200deg, #e2917e, #c96e86) border-box;
}

/* ---------- ボタン（SPは塗り、PCは共通の枠線ボタン） ---------- */
.more-btn.support-btn {
  color: #fff;
  font-weight: 700;
}

.more-btn.support-btn-beige {
  border-color: #c6a991;
  background-color: #c6a991;
}

.more-btn.support-btn-pink {
  border-color: #c96e86;
  background-color: #c96e86;
}

/* 枠の外にはみ出す長い矢印は茶色（白だと背景に埋もれる） */
.more-btn.support-btn::before,
.more-btn.support-btn::after {
  background-color: #6b5f58;
}

/* =========================================================
   SUPPORT FOR YOU（SP：1列）
   ========================================================= */
.support-help {
  margin-top: 110px;
}

.support-help-list {
  display: grid;
  gap: 56px;
  margin: 50px 0 0;
  padding: 0 20px;
}

.support-help-item {
  --support-color: #e29bae;
  --support-text: #c96e86;
}

/* 帯の色：SPは ピンク → ベージュ の交互 */
.support-help-item:nth-child(even) {
  --support-color: #c8a990;
  --support-text: #6b5f58;
}

.support-help-icon {
  display: block;
  width: 64px;
  margin: 0 auto;
  line-height: 0;
}

.support-help-icon img {
  width: 100%;
  height: auto;
}

/* 縦書きの番号 ＋ 色の帯 */
.support-help-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.support-help-num {
  flex-shrink: 0;
  color: var(--support-text);
  font-family: "Inter", sans-serif;
  font-size: var(--main-text);
  line-height: 1;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  white-space: nowrap;
}

.support-help-title {
  flex: 1;
  padding: 10px;
  background-color: var(--support-color);
  color: #fff;
  font-size: var(--main-text);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.support-help-text {
  margin-top: 20px;
  font-size: var(--main-text);
  line-height: 1.8;
}

/* =========================================================
   横長の写真 ＋ ボタン（SP）
   ========================================================= */
.support-wide {
  margin-top: 80px;
}

.support-wide-img {
  aspect-ratio: 390 / 165;
  object-fit: cover;
}

/* SPは一番下（フッターの上）にピンクの帯 */
.support-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 60px 0 70px;
  border-bottom: 20px solid #c96e86;
}

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

  /* ---------- パンくず ---------- */
  .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;
  }

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

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

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

  .support-head .page-hero-title {
    margin-top: 14px;
    line-height: 1.4;
    text-align: center;
  }

  /* ---------- セクションの見出し ---------- */
  .support-heading-head {
    padding-bottom: 16px;
  }

  .support-heading-title {
    margin-top: 8px;
  }

  .support-heading-lead {
    margin-top: 22px;
    padding: 0 40px;
    line-height: 1.9;
    text-align: center;
  }

  /* BENEFITS もPCは見出しの下に線 */
  .support-heading-benefits {
    padding-bottom: 0;
    border-bottom: none;
  }

  .support-heading-benefits .support-heading-head {
    padding-bottom: 16px;
    border-bottom: 2px solid var(--support-color);
  }

  /* ---------- BENEFITS ---------- */
  .support-benefits {
    margin-top: 60px;
  }

  .support-group {
    width: min(1160px, 100% - 80px);
    margin: 110px auto 0;
    padding: 0;
  }

  .support-group-life {
    margin-top: 90px;
  }

  .support-group-en {
    padding-left: 0;
  }

  .support-group-title {
    margin-top: 16px;
    padding-left: 0;
    color: #5b534d;
  }

  .support-group-num {
    color: var(--support-color);
  }

  /* 輪の位置（PC）：WORK STYLE は右、LIFE SUPPORT はなし（GROW UP 側に出す） */
  .support-ring-work {
    top: 4px;
    right: calc(-1 * max(0px, (100vw - 1160px) / 2) - 190px);
    width: 667px;
    border-width: 5px;
  }

  .support-ring-life {
    display: none;
  }

  /* ---------- WORK STYLE：3列。2段目は右にずらす ---------- */
  .support-card-list {
    grid-template-columns: repeat(3, minmax(0, 295px));
    gap: 64px 62px;
    margin-top: 40px;
  }

  /* 2段目は右端が中身の右端にそろうまで右へずらす（w1440 で 151px。狭い画面ではずらさない）
     1009px ＝ カード3枚（295px × 3）＋ 間隔（62px × 2） */
  .support-card-list > li:nth-child(n + 4) {
    translate: max(0px, min(1160px, 100vw - 80px) - 1009px);
  }

  .support-card {
    padding: 0 38px 40px;
  }

  .support-card-tab {
    left: 14px;
    height: 134px;
    padding-top: 14px;
  }

  /* PC：アイコン（中央）→ タイトル（中央）の縦並び */
  .support-card-head {
    flex-direction: column;
    gap: 34px;
    min-height: 0;
    padding: 44px 0 0;
  }

  .support-card-icon {
    width: 60px;
  }

  .support-card-icon::after {
    right: -26px;
    bottom: -14px;
    width: 56px;
  }

  .support-card-title {
    font-size: var(--main-text);
    line-height: 1.85;
    text-align: center;
  }

  .support-card-text {
    margin-top: 30px;
    line-height: 1.8;
  }

  /* ---------- LIFE SUPPORT：横長のカード（幅 1160px） ---------- */
  .support-card-list-wide {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .support-card-list-wide > li:nth-child(n + 4) {
    translate: none;
  }

  .support-card-wide {
    padding: 0 40px 26px 98px;
  }

  .support-card-wide .support-card-tab {
    left: 18px;
  }

  .support-card-wide .support-card-head {
    flex-direction: row;
    gap: 34px;
    padding: 18px 0 0;
  }

  .support-card-wide .support-card-icon {
    width: 70px;
  }

  .support-card-wide .support-card-title {
    font-size: var(--sub-heading);
    text-align: left;
  }

  .support-tags {
    grid-template-columns: repeat(3, 149px);
    gap: 10px 20px;
    margin-top: 22px;
  }

  .support-tags li {
    padding: 4px 6px;
    font-size: calc(var(--main-text) - 4px);
    /* PC 13px（ユーザー指定） */
    letter-spacing: 0;
  }

  .support-card-body {
    margin-top: 20px;
    line-height: 2;
  }

  /* GOOD＃7 の折りたたみはSPだけ（PCは最初から全部表示） */
  .support-more-sp .support-more-btn {
    display: none;
  }

  .support-more-sp .support-more-body {
    display: block;
    padding-top: 0;
  }

  .support-more-btn {
    margin-top: 16px;
  }

  /* ---------- GROW UP SUPPORT（背景うすい緑。上のカードが少しかかる） ---------- */
  .support-grow {
    margin-top: -80px;
    padding: 180px 0 90px;
    background-color: #e5ede4;
  }

  .support-gallery {
    display: none;
  }

  .support-grow .support-heading {
    margin-top: 0;
  }

  .support-grow .support-heading-title {
    color: #5b534d;
  }

  /* 左に写真（大）・右に3つの項目／下段：左にボタン・右に写真（下はセクションの外にはみ出す） */
  .support-grow-inner {
    display: grid;
    grid-template-columns: 414px minmax(0, 1fr);
    column-gap: min(172px, 12vw);
    width: min(1150px, 100% - 80px);
    margin: 120px auto 0;
  }

  .support-grow-photo {
    width: auto;
    margin: 0;
  }

  .support-grow-photo::before {
    inset: -24px 40px 40px -26px;
    transform: rotate(-1.5deg);
  }

  .support-grow-photo01 {
    grid-column: 1;
    grid-row: 1;
  }

  .support-grow-list {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 60px;
    margin: 0;
  }

  .support-grow-item {
    padding: 0;
    background-color: transparent;
  }

  .support-grow-text {
    margin-top: 10px;
  }

  .support-grow-btns {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-content: flex-start;
    margin: 0 0 80px 15px;
  }

  .support-grow-photo02 {
    grid-column: 2;
    grid-row: 2;
    width: min(546px, 100%);
    margin: 55px 0 -170px;
  }

  .support-grow-photo02::before {
    inset: -18px 30px 30px -18px;
    transform: rotate(-2deg);
  }

  /* 輪の位置（PC） */
  .support-ring-grow01 {
    top: -120px;
    right: auto;
    left: calc(-1 * max(40px, (100vw - 1150px) / 2) - 230px);
    width: 690px;
  }

  .support-ring-grow02 {
    right: -70px;
    bottom: -280px;
    width: 340px;
  }

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

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

  /* ---------- SUPPORT FOR YOU：2列 ---------- */
  .support-help {
    margin-top: 270px;
  }

  .support-help-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 90px min(210px, 14.5vw);
    width: min(1168px, 100% - 80px);
    margin: 50px auto 0;
    padding: 0;
  }

  /* 帯の色：PCは市松（01・04 ピンク／02・03 ベージュ） */
  .support-help-item:nth-child(even) {
    --support-color: #e29bae;
    --support-text: #c96e86;
  }

  .support-help-item:nth-child(2),
  .support-help-item:nth-child(3) {
    --support-color: #c8a990;
    --support-text: #6b5f58;
  }

  .support-help-icon {
    width: 66px;
    margin-left: calc(50% + 10px - 33px);
  }

  .support-help-row {
    gap: 18px;
    margin-top: 40px;
  }

  .support-help-title {
    padding: 14px 10px;
  }

  .support-help-text {
    margin-top: 28px;
    line-height: 1.9;
  }

  /* ---------- 横長の写真 ＋ ボタン ---------- */
  .support-wide {
    margin-top: 170px;
  }

  .support-wide-img {
    aspect-ratio: 1440 / 303;
  }

  .support-btns {
    flex-direction: row;
    justify-content: center;
    gap: 124px;
    padding: 150px 0 120px;
    border-bottom: none;
  }

}