@charset "UTF-8";

/* ============================================================
   various.css
   「いろいろな働き方」ページ専用スタイル
   （共通パーツは common.css / global-menu.css を参照）
============================================================ */

/* ページタイトル */
.various-eyebrow {
  text-align: center;
  font-family: var(--font-mincho);   /* v17：ゴシック→明朝 */
  font-style: normal;              /* v17：斜体をやめた */
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  color: var(--color-mauve-light);  /* v17：#0065B0 → #18BFD7 */
  margin: 0 0 4px;                 /* v17：h1との間隔を 8px→4px に */
}
.various-page-title {
  font-family: var(--font-mincho);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 400;   /* v17：PCを一段階太く（300→400）。SPは768px以下で700に上書き */
  letter-spacing: 0.1em;
  color: var(--text-heading);
  margin: 0 0 15px;
}
.various-lead {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: 1.02rem;
  color: var(--text-light);
  line-height: 1.9;
  margin: 0 0 50px;
}
@media screen and (max-width: 768px) {
  /* v17：SPのページタイトルを統一（明朝700 / 27px / 字間0.04em）。
     font-family は上のベース宣言（var(--font-mincho)）を継承。
     1rem＝18px なので 1.5rem＝27px。ウェイトは 300/500 → 700 に上げる。 */
  .various-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .various-lead { font-size: 0.95rem; margin-bottom: 36px; }
}

/* ============================================================
   キャリア3コラム（勤務時間変更・キャリアアップ・チェンジ）
============================================================ */
.career-wrap {
  display: flex;
  justify-content: center;
  gap: 30px;
  align-items: stretch;
}
.career-card {
  flex: 1;
  border: 1px solid var(--color-mauve);
  padding: 40px 30px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.career-title {
  font-family: var(--font-gothic);
  font-size: 1.23rem;
  color: var(--text-heading);
  margin-bottom: 15px;
  font-weight: bold;
}

/* キャリアチェンジ可能：イラスト上のアースグループ紹介コピー */
.career-earth-catch {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-heading);
  background: var(--color-pink-pale);
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.career-desc {
  font-size: 1.01rem;
  color: var(--text-main);
  margin-bottom: 25px;
  line-height: 1.4;
  font-weight: 300;
}

/* フロー図（箱と矢印） */
.career-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.cf-box {
  background: var(--color-champagne);
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-weight: 500;
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  width: 100%;
  box-sizing: border-box;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
/* 中途（復帰）・新卒を横並びにする行（キャリアアップ可能） */
.cf-row-pair {
  display: flex;
  gap: 10px;
  width: 100%;
}
.cf-row-pair .cf-box {
  font-size: 0.89rem;
  padding: 12px 8px;
}
.cf-arrow {
  font-size: 1.8rem;
  line-height: 1;
  margin: 5px 0;
  color: var(--color-blue-ink);
}
/* 補足テキスト（赤・小さめ） */
.cf-note {
  color: var(--color-pink-text);
  font-family: var(--font-gothic);
  font-weight: 300;
  font-size: 0.97rem;
  margin: 5px 0 0 0;
  text-align: center;
  line-height: 1.3;
}
.small {
  font-size: 0.9rem;
  font-weight: normal;
  display: block;
  margin-top: 6px;
  color: var(--text-light);
}

/* キャリアチェンジ用の画像枠 */
.career-img-space {
  width: 100%;
  height: 160px;
  background-color: var(--color-champagne);
  border: 1px dashed var(--color-pink-pale);
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.career-img-space img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .career-wrap { flex-direction: column; gap: 20px; }
  /* SP：キャリア枠内（タイトル・フロー箱以外）を太く */
  .career-desc, .career-earth-catch,
  .cf-note, .cf-box .small { font-weight: 700; }
  /* タイトルは細く */
  .career-title { font-weight: 400; }
  /* 水色四角（フロー箱）はゴシック体・1.5倍・一段細く */
  .cf-box { font-family: var(--font-gothic); font-size: 1.35rem; font-weight: 500; }
  .cf-row-pair .cf-box { font-size: 1.2rem; }
}

/* 関連リンク（求人概要・支援制度へ） */
.various-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 50px;
}
.various-links a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 1.0rem;
  padding: 10px 22px;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.various-links a:hover {
  background: var(--color-blue-ink);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .various-links { flex-direction: column; align-items: center; margin-top: 36px; }
}