/* ============================================================
   index-5.html 追加スタイル（コンテンツ修正 2026-07-30 依頼分）
   ------------------------------------------------------------
   styles.css / styles-4.css には手を入れず、このファイルだけで
   今回の追加パーツを定義しています。
   （デザインのバックデートができるよう分離）

   接頭辞  g- : 年次成長マップ（研修セクション）
           p- : 人口推移グラフ（01セクション差し替え）
           o- : インターンの「こんな人へおすすめ」
           j- : 募集要項（求人票より）
   ============================================================ */

/* ============================================================
   01セクション：85歳以上人口の推移グラフ
   青の濃淡で表現し、2040年のみ濃色にして増加を示す
   ============================================================ */
.p-bars{ display:flex; align-items:flex-end; gap:14px; padding:0 4px; }
.p-bar-col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; text-align:center; }
.p-bar-val{
  font-family:"Inter",sans-serif; font-size:17px; font-weight:800;
  color:var(--blue); line-height:1.2; margin-bottom:8px; white-space:nowrap;
}
.p-bar-val small{ font-size:11px; font-weight:700; margin-left:1px; }
.p-bar{ border-radius:8px 8px 0 0; background:#bcd6f0; transition:height .8s cubic-bezier(.2,.7,.2,1); }
.p-bar-col:nth-child(2) .p-bar{ background:#8fbbe6; }
.p-bar-col:nth-child(3) .p-bar{ background:#5f9adb; }
.p-bar-col:nth-child(4) .p-bar{ background:linear-gradient(180deg,var(--blue),var(--blue-700)); }
.p-bar-col:nth-child(4) .p-bar-val{ color:var(--blue-700); font-size:19px; }
.p-bar-label{ font-size:11.5px; color:var(--ink-3); margin-top:10px; line-height:1.45; }
.p-bar-label b{ display:block; font-weight:700; color:var(--ink-2); font-size:12.5px; }
.p-src{ font-size:11px; color:var(--ink-3); line-height:1.75; margin:10px 0 0; }
.p-src a{ color:var(--blue); text-decoration:underline; word-break:break-all; }

/* 伊東・伊豆の高齢化（セクション末尾の結び） */
.p-local{
  margin-top:32px; background:#fff; border:1px solid var(--blue-100);
  border-radius:var(--radius-lg); padding:36px 40px; box-shadow:var(--shadow-sm);
}
.p-local h3{ font-size:clamp(18px,2.1vw,24px); font-weight:800; line-height:1.6; margin:0 0 20px; }
.p-local h3 em{ font-style:normal; color:var(--orange); }
.p-local-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:start; }
.p-local p{ font-size:14.5px; line-height:1.95; color:var(--ink-2); margin:0 0 18px; }
.p-local p:last-child{ margin-bottom:0; }
.p-rate{ background:var(--blue-050); border-radius:var(--radius); padding:24px; }
.p-rate-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 0; }
.p-rate-row + .p-rate-row{ border-top:1px dashed var(--blue-200); }
.p-rate-area{ font-size:13px; font-weight:700; color:var(--ink-2); }
.p-rate-area span{ display:block; font-size:10.5px; font-weight:400; color:var(--ink-3); margin-top:2px; }
.p-rate-val{ font-family:"Inter",sans-serif; font-size:26px; font-weight:900; color:var(--ink-3); line-height:1; }
.p-rate-row.is-key .p-rate-val{ font-size:34px; color:var(--orange); }
.p-rate-note{ font-size:11px; color:var(--ink-3); line-height:1.7; margin:14px 0 0; }

/* ============================================================
   研修セクション：年次成長マップ
   ============================================================ */
.g-map{ margin-bottom:56px; }
.g-phase{ margin-bottom:40px; }
.g-phase:last-child{ margin-bottom:0; }
.g-phase-head{
  display:inline-flex; align-items:center; gap:12px;
  font-size:14px; font-weight:800; letter-spacing:.04em;
  color:#fff; background:var(--blue); border-radius:999px;
  padding:10px 22px; margin-bottom:22px;
}
.g-phase.is-branch .g-phase-head{ background:var(--orange); }
.g-phase.is-later .g-phase-head{ background:var(--blue-700); }
.g-phase-note{ font-size:14px; color:var(--ink-2); line-height:1.9; margin:0 0 22px; }

/* 全員が通る土台（1年目・2〜3年目） */
.g-base{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.g-year{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.g-year::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--blue),var(--blue-600));
}
.g-year-no{
  display:inline-block; font-family:"Inter",sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.12em; color:var(--blue); background:var(--blue-050);
  border-radius:999px; padding:5px 14px; margin-bottom:14px;
}
.g-year h4{ font-size:19px; font-weight:800; line-height:1.55; margin:0 0 14px; }
.g-year p{ font-size:14px; line-height:1.95; color:var(--ink-2); margin:0 0 14px; }
.g-year p:last-of-type{ margin-bottom:0; }
.g-year .g-hl{ color:var(--orange); font-weight:700; }
.g-ref{
  display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-size:11.5px; color:var(--ink-3); margin-bottom:16px;
}
.g-ref b{ font-weight:700; color:var(--ink-2); }
.g-ref span{ background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:3px 9px; }

/* 3年目から広がる道 */
.g-paths{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.g-path{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.g-path:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.g-path-ic{
  width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-050); color:var(--blue); margin-bottom:16px;
}
.g-path:nth-child(2) .g-path-ic{ background:#eaf7ee; color:#2f9e5c; }
.g-path:nth-child(3) .g-path-ic{ background:var(--orange-050); color:var(--orange); }
.g-path:nth-child(4) .g-path-ic{ background:#f0edfa; color:#6a52c9; }
.g-path h4{ font-size:17px; font-weight:800; margin:0 0 4px; }
.g-path-sub{ font-size:12.5px; color:var(--ink-3); margin:0 0 14px; }
.g-path p{ font-size:14px; line-height:1.9; color:var(--ink-2); margin:0 0 14px; }
.g-path p:last-of-type{ margin-bottom:16px; }

/* 該当インタビューへのリンク */
.g-link{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:800; color:var(--blue);
  background:var(--blue-050); border-radius:999px; padding:8px 16px;
  transition:background .2s, color .2s;
}
.g-link:hover{ background:var(--blue); color:#fff; }
.g-link svg{ transition:transform .2s; }
.g-link:hover svg{ transform:translateX(3px); }

/* 結び */
.g-goal{
  margin-top:40px; text-align:center;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 100%);
  border-radius:var(--radius-lg); padding:40px 32px; color:#fff;
  box-shadow:var(--shadow-md);
}
.g-goal p{ margin:0; font-size:clamp(17px,2.1vw,23px); font-weight:800; line-height:1.7; }
.g-goal em{ font-style:normal; color:#ffcf8a; }

/* 既存6ステップ見出し */
.g-detail-head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 0 28px; padding-top:48px; border-top:1px solid var(--line);
}
.g-detail-head h3{ font-size:20px; font-weight:800; margin:0; }
.g-detail-head p{ font-size:13px; color:var(--ink-3); margin:0; }

/* ============================================================
   インターン：こんな人へおすすめ
   ============================================================ */
.o-rec{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--orange-050); border:1px solid var(--orange-100);
  border-radius:var(--radius); padding:16px 18px; margin:0 0 18px;
}
.o-rec-label{
  flex-shrink:0; font-size:11px; font-weight:800; letter-spacing:.04em;
  color:#fff; background:var(--orange); border-radius:999px; padding:4px 11px; margin-top:1px;
}
.o-rec p{ margin:0 !important; font-size:13px !important; line-height:1.85 !important; color:var(--ink-2); }

/* 選考フロー（内容確定待ち） */
.o-flow-tbd{
  display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
  background:var(--paper-2); border:1.5px dashed var(--blue-200);
  border-radius:var(--radius-lg); padding:28px 32px; margin-top:32px;
}
.o-flow-tbd .ic{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  background:var(--blue-050); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.o-flow-tbd h4{ font-size:16px; font-weight:800; margin:0 0 6px; }
.o-flow-tbd p{ font-size:13px; color:var(--ink-2); line-height:1.85; margin:0; max-width:640px; }

/* ============================================================
   募集要項（求人票より）
   ============================================================ */
.j-lead{ font-size:14.5px; color:var(--ink-2); line-height:1.9; margin:0 0 32px; }
.j-highlights{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:36px; }
.j-hl{
  flex:1 1 200px; background:#fff; border:1px solid var(--blue-100);
  border-radius:var(--radius-lg); padding:24px; text-align:center; box-shadow:var(--shadow-sm);
}
.j-hl-val{ font-family:"Inter",sans-serif; font-size:32px; font-weight:900; color:var(--blue); line-height:1.1; }
.j-hl-val small{ font-size:14px; font-weight:700; margin-left:2px; }
.j-hl-val .yen{ font-size:20px; margin-right:1px; }
.j-hl-label{ font-size:13px; font-weight:700; margin-top:10px; }
.j-hl-note{ font-size:11px; color:var(--ink-3); margin-top:6px; line-height:1.6; }

.j-table{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.j-row{ display:grid; grid-template-columns:210px 1fr; border-top:1px solid var(--line); }
.j-row:first-child{ border-top:0; }
.j-row dt{
  background:var(--paper-2); padding:22px 24px;
  font-size:13.5px; font-weight:800; color:var(--ink); letter-spacing:.02em;
}
.j-row dd{ margin:0; padding:22px 26px; font-size:13.5px; line-height:1.9; color:var(--ink-2); }
.j-row dd strong{ color:var(--ink); font-weight:700; }
.j-row dd .num{ font-family:"Inter",sans-serif; font-size:19px; font-weight:900; color:var(--blue); }
.j-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.j-list li{ padding-left:15px; position:relative; }
.j-list li::before{ content:"・"; position:absolute; left:0; color:var(--blue); }
.j-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.j-tag{ font-size:12px; font-weight:700; color:var(--blue); background:var(--blue-050); border-radius:999px; padding:5px 13px; }
.j-sub{ font-size:12px; color:var(--ink-3); line-height:1.75; margin:8px 0 0; }
.j-note{ font-size:12px; color:var(--ink-3); line-height:1.8; margin:20px 0 0; }
.j-cta{ margin-top:36px; display:flex; justify-content:center; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:900px){
  .p-local-grid{ grid-template-columns:1fr; gap:24px; }
  .p-local{ padding:28px 24px; }
  .g-base{ grid-template-columns:1fr; }
  .g-paths{ grid-template-columns:1fr; }
  .j-row{ grid-template-columns:1fr; }
  .j-row dt{ padding:16px 20px 6px; background:transparent; color:var(--blue); }
  .j-row dd{ padding:0 20px 20px; }
  .j-row + .j-row dt{ border-top:0; }
}
@media (max-width:640px){
  .p-bars{ gap:8px; }
  .p-bar-val{ font-size:13px; }
  .p-bar-col:nth-child(4) .p-bar-val{ font-size:15px; }
  .p-bar-label{ font-size:10.5px; }
  .p-bar-label b{ font-size:11.5px; }
  .g-year{ padding:24px 20px; }
  .g-path{ padding:22px 20px; }
  .g-phase-head{ font-size:13px; padding:9px 18px; }
  .g-goal{ padding:28px 22px; }
  .g-detail-head{ padding-top:36px; }
  .j-hl{ flex:1 1 100%; }
  .o-rec{ flex-direction:column; gap:8px; }
}