@charset "UTF-8";
/* ============================================================
   /job-change-support 固有
   共通部分は ../shared/css/subpage.css。こちらを後に読み込む。
   ============================================================ */

/* KV の「doda」だけ色を変える（.sub-kv-title .num は共通側で青） */
.sub-kv-title .num{font-size:1em;letter-spacing:.02em}

/* ------------------------------------------------------------
   リード
   ------------------------------------------------------------ */
.lead-box{
  max-width:900px;margin:0 auto;padding:34px 40px;
  background:var(--blue-pale);border-radius:20px;
  font-size:20px;font-weight:400;line-height:1.8;text-align:justify;
}
.lead-box b{color:var(--blue)}

/* ------------------------------------------------------------
   特長 3 点
   ------------------------------------------------------------ */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat li{
  display:flex;flex-direction:column;gap:12px;
  padding:34px 30px;
  background:#fff;border:2px solid var(--blue);border-radius:20px;
}
.feat-no{
  align-self:flex-start;min-width:52px;padding:4px 14px;
  background:var(--blue);border-radius:30px;
  color:#fff;font-size:18px;font-weight:700;line-height:1.3;text-align:center;
}
.feat-title{font-size:22px;font-weight:700;line-height:1.5}
.feat-desc{font-size:16px;line-height:1.8;text-align:justify}

/* ------------------------------------------------------------
   転職サポートの流れ（画像ではなく HTML/CSS）
   ------------------------------------------------------------ */
.flow{display:flex;gap:10px}
.flow li{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:26px 8px;
  background:#fff;border:2px solid var(--blue);border-radius:20px;
  text-align:center;
}
.flow-no{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:var(--blue);border-radius:50%;
  color:#fff;font-size:20px;font-weight:700;line-height:1;
}
/* 5 列に「キャリアカウンセリング」が 1 行で収まる大きさ */
.flow-label{font-size:17px;font-weight:700;line-height:1.5}
/* 項目のあいだの矢印（最後には付けない） */
.flow li:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-15px;z-index:1;
  width:0;height:0;transform:translateY(-50%);
  border-left:10px solid var(--blue);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}

/* ------------------------------------------------------------
   転職事例
   768px 以上は 3 カラムの表組み、640px 以下はカードへ積み替える。
   横スクロールはさせない。
   ------------------------------------------------------------ */
.cases-lead{margin-bottom:24px;text-align:center}
/* 開閉 UI は 640px 以下だけ。768px 以上は 18 件とも表で出す */
.cases-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cases-more{display:none}
.cases{border:2px solid var(--blue);border-radius:20px;overflow:hidden}
.cases-row{display:grid;grid-template-columns:110px 1fr 1fr;align-items:center}
.cases-row+.cases-row{border-top:1px solid var(--blue-mid)}
.cases-row--head{background:var(--blue);color:#fff;font-weight:700}
.cases-row--head>div{padding:14px 20px;font-size:18px}
/* 見出し行では .cases-age の青文字を白に戻す（背景が青のため） */
.cases-row--head .cases-age{text-align:center;color:#fff}
.cases-row:not(.cases-row--head)>div{padding:16px 20px;font-size:17px;line-height:1.5}
.cases-row:not(.cases-row--head):nth-child(even){background:#F7FAFD}
.cases-age{font-weight:700;color:var(--blue);text-align:center}
.cases-to{font-weight:700}
/* 前職 → 転職先 の矢印 */
.cases-row:not(.cases-row--head) .cases-to{position:relative;padding-left:34px!important}
.cases-row:not(.cases-row--head) .cases-to::before{
  content:"";position:absolute;left:12px;top:50%;
  width:0;height:0;transform:translateY(-50%);
  border-left:9px solid var(--blue);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}

/* ------------------------------------------------------------
   1160px 以下
   ------------------------------------------------------------ */
@media (max-width:1160px){
  .lead-box{padding:30px 34px;font-size:18px}
  .feat{gap:18px}
  .feat li{padding:28px 24px}
  .feat-title{font-size:20px}
  .feat-desc{font-size:15px}
  .flow li{padding:22px 10px}
  .flow-label{font-size:16px}
  .cases-row{grid-template-columns:96px 1fr 1fr}
  .cases-row--head>div{font-size:16px}
  .cases-row:not(.cases-row--head)>div{font-size:16px}
}

/* ------------------------------------------------------------
   930px 以下
   ------------------------------------------------------------ */
@media (max-width:930px){
  .lead-box{padding:24px 26px;font-size:16px;line-height:1.7}
  .feat{grid-template-columns:1fr;gap:16px}
  .feat li{padding:24px 22px;gap:10px}
  .feat-title{font-size:19px}
  .flow{flex-wrap:wrap;gap:16px}
  .flow li{flex:1 1 calc(33.333% - 11px);padding:18px 10px}
  .flow li:not(:last-child)::after{display:none}
  .flow-no{width:38px;height:38px;font-size:17px}
  .flow-label{font-size:15px}
  .cases-row{grid-template-columns:80px 1fr 1fr}
  .cases-row--head>div{padding:12px 14px;font-size:15px}
  .cases-row:not(.cases-row--head)>div{padding:14px;font-size:15px}
  .cases-row:not(.cases-row--head) .cases-to{padding-left:28px!important}
  .cases-row:not(.cases-row--head) .cases-to::before{left:9px}
}

/* ------------------------------------------------------------
   640px 以下
   ------------------------------------------------------------ */
@media (max-width:640px){
  /* KV のサブコピーが /subsidy より長く、左右が画面端に着いてしまうので
     このページだけ余白を足す（共通側は触らない＝/subsidy に影響させない） */
  .sub-kv{padding-left:28px;padding-right:28px}
  .lead-box{padding:18px 18px;font-size:14px;line-height:1.7;border-radius:15px}
  .feat li{padding:18px 16px;border-radius:15px}
  .feat-no{min-width:46px;padding:3px 12px;font-size:16px}
  .feat-title{font-size:17px}
  .feat-desc{font-size:14px;line-height:1.7}
  .flow{flex-direction:column;gap:12px}
  .flow li{flex:none;width:100%;flex-direction:row;justify-content:flex-start;gap:14px;padding:14px 16px;border-radius:15px;text-align:left}
  .flow-no{flex:0 0 34px;width:34px;height:34px;font-size:16px}
  .flow-label{font-size:16px}
  .cases-lead{margin-bottom:16px}

  /* 640px 以下は表をやめて「1 件 1 行」のリストにする。
     18 件あるので、1 件ずつカードにすると縦に伸びすぎるため
     （カード型だと 1 行 145px ＝ セクション 2,809px になっていた）。
     ラベルは繰り返さず、前職 → 転職後は矢印で示す。
     枠や影は付けず、区切りは行間の罫線（.cases-row+.cases-row）だけ。 */
  .cases{border-radius:15px}
  .cases-row--head{display:none}
  /* :not(--head) を付けないと、後から来るこの display:flex が
     上の .cases-row--head{display:none} に勝って見出し行が出てしまう */
  .cases-row:not(.cases-row--head){
    display:flex;flex-wrap:wrap;align-items:baseline;
    grid-template-columns:none;column-gap:8px;row-gap:1px;
  }
  .cases-row:not(.cases-row--head){padding:9px 14px}
  /* 折り返しを減らすため少しだけ詰める（375px で読める下限として 13px を採用） */
  .cases-row:not(.cases-row--head)>div{padding:0!important;font-size:13px;line-height:1.5}
  .cases-age{flex:0 0 auto;text-align:left;font-size:12px}
  .cases-from{flex:0 1 auto}
  /* 職種名が長い行は 2 行目へ折り返す。矢印は転職後の頭に残す */
  .cases-row:not(.cases-row--head) .cases-to{flex:1 1 auto;padding-left:15px!important}
  .cases-row:not(.cases-row--head) .cases-to::before{
    left:2px;border-left-width:7px;border-top-width:5px;border-bottom-width:5px;
  }

  /* --- 初期表示は 6 件。7 件目以降（見出し行が 1 つ目なので nth-child(n+8)）は隠す --- */
  .cases{position:relative}
  .cases-row:nth-child(n+8){display:none}
  /* 6 件目の下を軽くフェードさせて「続きがある」ことを示す */
  .cases::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:46px;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 90%);
    pointer-events:none;
  }
  .cases-toggle:checked ~ .cases .cases-row:nth-child(n+8){display:flex}
  .cases-toggle:checked ~ .cases::after{display:none}

  /* --- もっと見る / 閉じる。既存のボタンと同じ青とトークンだけで作る --- */
  .cases-more{
    display:flex;align-items:center;justify-content:center;gap:6px;
    width:100%;margin-top:14px;padding:12px 16px;
    background:#fff;border:2px solid var(--blue);border-radius:60px;
    color:var(--blue);font-size:14px;font-weight:700;line-height:1.4;
    cursor:pointer;
  }
  .cases-more::after{
    content:"";width:0;height:0;
    border-top:6px solid var(--blue);
    border-left:5px solid transparent;border-right:5px solid transparent;
  }
  .cases-more-close{display:none}
  .cases-toggle:checked ~ .cases-more .cases-more-open{display:none}
  .cases-toggle:checked ~ .cases-more .cases-more-close{display:inline}
  .cases-toggle:checked ~ .cases-more::after{
    border-top:0;border-bottom:6px solid var(--blue);
  }
  /* キーボード操作でどこにフォーカスがあるか分かるように */
  .cases-toggle:focus-visible ~ .cases-more{outline:2px solid var(--blue);outline-offset:3px}
}