/* Career Path page styles */

.ng-careerHero{
  width:100%;
  height:560px;
  background-color:#d0d0d0;
  background-image:url("../images/career-fv.png");
  background-position: 0 0;
  background-size:cover;
  background-repeat:no-repeat;
}

.ng-careerBody{
  padding:120px 0 160px;
  background:var(--white);
}

.ng-careerLead{
  margin:0 0 64px;
  font-size:18px;
  line-height:1.8;
  color:var(--text);
}

.ng-careerGrid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:94px;
  align-items:start;
}

/* Left sticky index (same pattern as features) */
.ng-careerIndex__sticky{
  position:sticky;
  top:160px;
  align-self:start;
}
.ng-careerIndex__title{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-weight:700;
  font-size:18px;
  line-height:1.2;
  color:var(--accent);
  margin:0 0 24px;
}
.ng-careerIndex__list{margin:0;padding:0;list-style:none}
.ng-careerIndex__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px;
}
.ng-careerIndex__label{
  margin:0;
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  color:var(--text);
}
.ng-careerIndex__rule{height:1px;background:var(--border)}
.ng-careerIndex__arrow{
  width:18px;height:18px;
  background-image:url("../images/icon/under-arrow.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  flex:0 0 auto;
}

/* Content sections */
.ng-careerSection{display:flex;flex-direction:column;gap:40px}
.ng-careerSection + .ng-careerSection{margin-top:120px}

.ng-careerH2{display:flex;flex-direction:column;gap:20px}
.ng-careerH2__title{
  margin:0;
  font-weight:500;
  font-size:32px;
  line-height:1.2;
  color:var(--accent);
}
.ng-careerH2__rule{height:1px;background:var(--border)}
@media (min-width:641px){
  .ng-brSp{display:none}
}

.ng-careerText{
  margin:0;
  font-size:16px;
  line-height:2;
  color:var(--text);
}

/* Summary (top of screenshot) */
.ng-careerSummaryNote{
  margin:24px 0 24px;
  font-size:14px;
  line-height:1.8;
  color:var(--text);
  opacity:.9;
}
.ng-careerSummaryCards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  margin-bottom:18px;
}
.ng-careerSummaryCard{
  background:var(--bg);
  padding:64px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:170px;
}
.ng-careerSummaryIcon{
  width:44px;height:44px;
  color:var(--accent);
  margin-bottom:10px;
}
.ng-careerSummaryIcon img{width:100%;height:100%;object-fit:contain}
.ng-careerSummaryLabel{
  margin:0 0 10px;
  font-weight:700;
  font-size:16px;
  line-height:1.4;
  color:var(--accent);
}
.ng-careerSummaryValue{
  margin:0;
  font-weight:700;
  font-size:56px;
  line-height:1;
  color:var(--accent);
}
.ng-careerSummaryLink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  line-height:1;
  color:var(--accent);
  text-decoration:none;
}
.ng-careerSummaryLink:hover{opacity:.85}

/* Admissions（主な合格実績：タググリッド） */
.ng-careerAdmissionsGroup{margin-top:32px}
.ng-careerAdmissionsGroup:first-child{margin-top:8px}
.ng-careerAdmissionsGroupTitle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  font-size:1.25rem;
  line-height:1.6;
  font-weight:700;
  color:var(--text);
}
.ng-careerAdmissionsGroupTitle::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.ng-careerTagGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}
.ng-careerTag{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:.75rem .875rem;
  background:#f5f5f5;
  border:1px solid rgba(221,221,221,.7);
  border-radius:4px;
  font-size:1rem;
  line-height:1.35;
  color:var(--text);
  text-align:center;
}

.ng-careerAdmissionsLink{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-size:1rem;
  line-height:1;
  color:var(--accent);
  text-decoration: underline;
}
.ng-careerAdmissionsLink:hover{opacity:.85}
.ng-careerAdmissionsLink__icon{width:20px;height:20px;display:block;flex:0 0 auto}

/* 主な合格実績内「進路状況」PDFカード（各種書類ページと同型） */
.ng-careerAdmissionsSub{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
}
.ng-careerAdmissionsSub__h{display:flex;flex-direction:column;gap:12px}
.ng-careerAdmissionsSub__title{
  margin:0;
  font-weight:500;
  font-size:24px;
  line-height:1.2;
  color:var(--accent);
}
.ng-careerAdmissionsSub__rule{height:1px;background:var(--border)}
.ng-career .ng-vdocsCards{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
}
.ng-career a.ng-vdocsCard{
  border:1px solid var(--border);
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:64px;
  background:var(--white);
  width:calc((100% - 12px) / 2);
  text-decoration:none;
  color:inherit;
  box-sizing:border-box;
}
.ng-career a.ng-vdocsCard:hover{opacity:.9}
.ng-career .ng-vdocsCard__text{
  font-weight:500;
  font-size:18px;
  line-height:1.2;
  color:var(--text);
}
.ng-career .ng-vdocsCard__icon{
  width:20px;height:20px;
  flex:0 0 auto;
  background-image:url("../images/icon/pdf.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* Simple stat cards */
.ng-careerStats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}
.ng-careerStat{
  background:var(--bg);
  padding:32px 24px;
  border-radius:12px;
}
.ng-careerStat__label{
  margin:0 0 12px;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--muted);
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
.ng-careerStat__value{
  margin:0;
  font-size:32px;
  line-height:1.2;
  font-weight:700;
  color:var(--accent);
}
.ng-careerStat__note{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--text);
  opacity:.9;
}

/* Alumni accordion (PC/SP) */
.ng-careerAlumniCards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  margin-top:12px;
}
.ng-alumniAccordion{
  border:1px solid var(--border);
  background:var(--white);
  border-radius:4px;
  overflow:hidden;
}
.ng-alumniAccordion__trigger{
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:24px 24px 20px;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.ng-alumniAccordion__trigger:hover{opacity:.9}
.ng-alumniAccordion__trigger:focus-visible{
  outline:3px solid rgba(2,103,58,.35);
  outline-offset:2px;
}
.ng-alumniAccordion__header{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ng-alumniAccordion__title{
  margin:0;
  font-weight:700;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.2;
  color:var(--accent);
}
.ng-alumniAccordion__chips{display:flex;gap:10px;flex-wrap:wrap}
.ng-alumniAccordion__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#f2f2f2;
  font-size:16px;
  line-height:1;
  color:var(--text);
}
.ng-alumniAccordion__chip--name{
  padding-left:0;
  background:transparent;
  color:var(--text);
}
.ng-alumniAccordion__preview{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ng-alumniAccordion.is-open .ng-alumniAccordion__preview{display:none}
.ng-alumniAccordion__icon{
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:var(--white);
  font-size:24px;
  font-weight:700;
  line-height:1;
}
.ng-alumniAccordion__iconInner{
  display:block;
  transition:transform .2s ease;
}
.ng-alumniAccordion.is-open .ng-alumniAccordion__icon .ng-alumniAccordion__iconInner{transform:rotate(45deg)}
.ng-alumniAccordion__panel{
  display:none;
  padding:0 24px 24px;
}
.ng-alumniAccordion.is-open .ng-alumniAccordion__panel{display:block}
.ng-alumniAccordion__body{
  margin:0;
  padding:0 0 0 0;
  font-size:16px;
  line-height:1.8;
  color:var(--text);
}

@media (max-width: 1024px){
  .ng-careerHero{height:420px}
  .ng-careerBody{padding:80px 0 120px}
  .ng-careerLead{font-size:16px}
  .ng-careerGrid{grid-template-columns:1fr;gap:40px}
  .ng-careerIndex__sticky{position:relative;top:auto}
  .ng-careerStats{grid-template-columns:1fr}
  .ng-careerSummaryCards{grid-template-columns:1fr}
  .ng-careerTagGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ng-careerAlumniCards{grid-template-columns:1fr}
  .ng-alumniAccordion__trigger{padding:20px 20px 16px}
  .ng-alumniAccordion__icon{width:42px;height:42px;font-size:20px}
  .ng-alumniAccordion__panel{padding:0 20px 20px}
}

/* SP (640px以下) - Figma 卒業生の方へ_sp */
@media (max-width: 640px){
  .ng-careerHero{
    height:200px;
    background-image:url("../images/career-fv.png");
  }
  .ng-careerBody{padding:64px 0 80px}
  .ng-careerSection + .ng-careerSection{margin-top:64px}
  .ng-careerSection{gap:24px}

  /* ページタイトル（header.cssのpageTitleを上書き） */
  .ng-career .ng-pageTitle{padding:128px 0 32px;gap:8px}
  .ng-career .ng-pageTitle__title{font-size:48px}
  .ng-career .ng-pageTitle__kickerText{font-size:14px}
  .ng-career .ng-pageTitle__dot{width:6px;height:6px}
  .ng-career .ng-pageTitle__desc{font-size:16px;line-height:1.6;max-width:none}

  /* 目次: 横スライド形式 */
  .ng-careerIndex__title{display:none}
  .ng-careerIndex__list{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ng-careerIndex__list li{flex:0 0 auto;min-width:0}
  .ng-careerIndex__rule{display:none}
  .ng-careerIndex__item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:4px;
    background:var(--white);
    text-decoration:none;
  }
  .ng-careerIndex__item:hover{opacity:.9}
  .ng-careerIndex__item{white-space:nowrap}
  .ng-careerIndex__label{margin:0;font-size:14px;font-weight:500;color:var(--text)}
  .ng-careerIndex__arrow{
    width:16px;height:16px;
    background-image:url("../images/icon/under-arrow.svg");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    transform:rotate(-90deg);
    flex:0 0 auto;
  }

  /* セクション見出し */
  .ng-careerH2{gap:12px}
  .ng-careerH2__title{font-size:24px}
  .ng-careerH2__rule{width:100%;max-width:335px}

  /* サマリーカード */
  .ng-careerSummaryNote{margin:12px 0 20px;font-size:14px;line-height:1.8}
  .ng-careerSummaryCards{gap:12px;margin-bottom:20px}
  .ng-careerSummaryCard{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    padding:20px;
    min-height:auto;
    text-align:left;
  }
  .ng-careerSummaryIcon{width:32px;height:32px;margin-bottom:0;margin-right:0}
  .ng-careerSummaryLabel{margin:0;font-size:16px;font-weight:500;flex:0 0 96px}
  .ng-careerSummaryValue{font-size:48px;margin:0;line-height:1}
  .ng-careerSummaryLink{font-size:14px}

  /* 合格実績タグ */
  .ng-careerAdmissionsGroup{margin-top:24px}
  .ng-careerAdmissionsGroup:first-child{margin-top:4px}
  .ng-careerAdmissionsGroupTitle{font-size:18px;margin-bottom:10px;gap:8px}
  .ng-careerAdmissionsGroupTitle::before{width:6px;height:6px}
  .ng-careerTagGrid{
    grid-template-columns:repeat(2, minmax(0, 165px));
    gap:5px;
    justify-content:flex-start;
  }
  .ng-careerTag{
    min-height:auto;
    padding:10px 12px;
    font-size:14px;
  }
  .ng-careerAdmissionsLink{font-size:14px}
  .ng-careerAdmissionsLink__icon{width:16px;height:16px}
  .ng-careerAdmissionsSub{margin-top:32px;gap:16px}
  .ng-careerAdmissionsSub__title{font-size:20px}
  .ng-career a.ng-vdocsCard{width:100%}
  .ng-career .ng-vdocsCard__text{font-size:16px}

  /* 卒業生アコーディオン */
  .ng-careerAlumniCards{gap:12px;margin-top:12px}
  .ng-alumniAccordion__trigger{padding:20px 20px 16px;gap:12px}
  .ng-alumniAccordion__header{gap:10px}
  .ng-alumniAccordion__title{font-size:18px}
  .ng-alumniAccordion__chip{font-size:14px;padding:8px 12px}
  .ng-alumniAccordion__chip--name{font-size:14px}
  .ng-alumniAccordion__preview{font-size:16px;-webkit-line-clamp:2}
  .ng-alumniAccordion__icon{width:40px;height:40px;font-size:20px}
  .ng-alumniAccordion__panel{padding:0 20px 20px}
  .ng-alumniAccordion__body{font-size:16px;line-height:1.6}
}