@charset "UTF-8";

/* ==========================================================
   働く環境・制度ページ固有CSS（is_page('workstyle') でのみ読み込み）
   ページ見出し等、下層ページ共通の部品は guide.css を参照してください。
   ========================================================== */

.workstylePage {
  border-top: 1px solid var(--c-border);
}

/* guide.css の `.pageColumn > section{padding:35px 24px}` は業種ページ(bizSection)の
   ::before計算式が前提にしているため共通側は変更せず、このページだけ0に打ち消し、
   子要素（systemSection__inner / __note）側にpaddingを持たせています */
.workstylePage .pageColumn > section {
  padding: 0;
}

@media (max-width: 900px) {
  .workstylePage .pageColumn > section {
    padding: 35px 24px;
  }
}
/* ==========================================================
   COMPONENT: ヒーロー直下のファクト帯  .factsStrip
   月平均残業時間・有給取得率など、数値で見せる4項目のハイライトです。
   ========================================================== */
.factsStrip {
  display: flex;
  max-width: var(--wrap);
  margin: 0 auto 3rem;
  gap: 16px;
}

.factsStrip__item {
  flex: 1 1 0;
  padding: 24px 16px;
  text-align: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.factsStrip__label {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-text);
  margin-bottom: 12px;
}

.factsStrip__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  color: var(--c-primary);
}

.factsStrip__value {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.2;
  color: var(--c-primary);
  margin-bottom: 12px;
}

.factsStrip__value span {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  margin-left: 2px;
}

.factsStrip__badge {
  display: inline-block;
  margin: 0 auto;
  padding: 4px 12px;
  background: var(--c-primary-s);
  border-radius: 10px;
  width: 100%;
  max-width: 230px;
  font-size: 1.4rem;
  font-weight: 700;
}
.factsStrip__badge span {
  font-size: inherit;
  color: var(--c-primary);
}

@media (max-width: 1100px) {
  .factsStrip {
    width: 95%;
  }
}
@media (max-width: 900px) {
  .factsStrip {
    flex-wrap: wrap;
  }
  .factsStrip__item {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 500px) {
  .factsStrip__item {
    flex: 1 1 100%;
  }
}

/* ==========================================================
   COMPONENT: 制度ブロック  .systemSection
   ----------------------------------------------------------
   head（左カラム・緑背景・15%）と body（右カラム・リード文+カード列・82%）
   の2カラム構成です。business.css の .bizSection と似た左右分割ですが、
   緑パネルの範囲がcalc()の::beforeではなくhead自体の背景である点が異なります
   （headの中身が番号+タイトルだけで済むため、::beforeの複雑な計算が不要です）。
   ========================================================== */
.systemSection {
  margin-bottom: 25px;
}

.systemSection:last-child {
  margin-bottom: 80px;
}
.systemSection__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.systemSection__head {
  flex: 0 0 15%;
  padding: 24px 20px;
  background: var(--c-primary-d);
  color: #fff;
}
@media (max-width: 900px) {
  .systemSection__head {
    border-radius: var(--radius);
  }
}
.systemSection__head span {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .7);
}

.systemSection__head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.2rem;
}

.systemSection__body {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 24px 0;
}

/* bodyがsection内で最後の要素なら下paddingも持たせます（＝note等が続かない
   01/02/04/05のケース）。03のように直後に.systemSection__noteが続く場合は
   note側のmargin-top/bottomで section境界からの余白を作ります */
.systemSection__inner:last-child .systemSection__body {
  padding-bottom: 24px;
}

.systemSection__body > p {
  margin-bottom: 20px;
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--c-muted);
}

@media (min-width: 901px) {
  .systemSection__body {
    flex-basis: calc(82% - 24px);
  }
}

@media (max-width: 900px) {
  .systemSection__inner {
    flex-direction: column;
  }
  .systemSection__head {
    flex: none;
  }
  .systemSection__body {
    flex: none;
    padding: 0;
  }
}

.systemCardList {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.systemCard {
  flex: 1 1 calc(25% - 12px);
  padding: 24px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* カード枚数はセクションごとに異なる（work=2, leave=3, pay=4, growth=3）ため、
   1枚あたりの最小幅を確保しつつ flex-wrap で折り返す方式にしています。
   business.css の等分calc()と違い、枚数固定の前提を置かない分、枚数変更に強い作りです。 */
.systemCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* min-width: 220px; */
}

.systemCard h3 {
  margin-bottom: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--c-primary);
}

.systemCard svg {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  color: var(--c-primary);
}

.systemCard p:not(.systemCard__badge) {
  margin: 0 auto 12px;
  max-width: 230px;
  line-height: 1.7;
  font-size: 1.4rem;
  color: var(--c-muted);
}

.systemCard__badge {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 999px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-primary);
}

/* 04 書籍購入補助制度：所有区分ごとの負担割合を対にして見せる小テーブルです */
.systemCard__badgeList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.systemCard__badgeList > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.systemCard__badgeList dt {
  text-align: center;
  font-size: 1.2rem;
  color: var(--c-muted);
}

.systemCard__badgeList dd {
  margin: 0;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--c-primary);
  white-space: nowrap;
}

/* 03 手当・給与：固定残業代についての注記です。
   section自体のpaddingを廃止した分、左右24px・下35pxをmarginで持たせて
   section境界からの余白をsystemSection__innerと揃えています */
.systemSection__note {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 24px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
}

.systemSection__note svg {
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--c-primary);
}

.systemSection__note h3 {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-text);
}

.systemSection__note p {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.systemSection__note > div {
  flex: 1 1 auto;
}

.systemSection__noteBadge {
  flex: none;
  padding: 6px 16px;
  background: var(--c-primary-s);
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-primary);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .systemCard {
    flex: 1 1 calc(50% - 8px);
  }

  .systemSection__note {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .systemSection__noteBadge {
    align-self: flex-start;
  }
}

@media (max-width: 500px) {
  .systemCard {
    flex: 1 1 100%;
  }
}

/* ==========================================================
   05 アイデア制度：単体のフィーチャーカード  .ideaCard
   ========================================================== */
.ideaCard {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
}

.ideaCard__icon {
  flex: none;
  width: 56px;
  height: 56px;
  color: var(--c-primary);
}

.ideaCard__body {
  flex: 1 1 auto;
}

.ideaCard__body h3 {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--c-primary);
}

.ideaCard__body > p {
  margin-bottom: 16px;
  font-size: 1.5rem;
  line-height: 1.7;
  color: #000;
}

.ideaCard__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ideaCard__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000;
}

.ideaCard__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--c-primary);
}

.ideaCard__stat {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--c-border);
  text-align: center;
  background: #fff;
  border-radius: var(--radius);
}

.ideaCard__statLabel {
  font-size: 1.2rem;
  color: #000;
}

.ideaCard__statValue {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--c-primary);
}

.ideaCard__statValue span {
  font-size: 1.3rem;
  margin-left: 2px;
}

.ideaCard__statCaption {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--c-primary);
}

@media (max-width: 900px) {
  .ideaCard {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
  }

  .ideaCard__icon {
    width: 48px;
    height: 48px;
  }

  .ideaCard__stat {
    flex: none;
    width: 100%;
  }
}