@charset "UTF-8";
/* ============================================================
   top.css — TOP（front-page.php）専用
   common.css の後に読み込む前提。
   画像パスは本ファイルからの相対（assets/css/ → ../img/top/）。
   ============================================================ */

/* ============================================================
   hero
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:calc(84px + 4vw) 0 clamp(80px,10vw,130px);
  /* 下端固定＝人物が必ず見える。画面が高くなると空が上へ伸びる */
  background:#0a3a68 url("../img/top/hero-tall.jpg") 32% bottom / cover no-repeat;
  isolation:isolate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,40,74,.44) 0%,rgba(8,54,96,.14) 32%,rgba(8,54,96,.10) 62%,rgba(6,40,74,.30) 100%);
}
.hero__inner{position:relative;text-align:center;color:#fff}
.hero__box{max-width:100%;margin-inline:auto}

/* PC：横長版KVに差し替え。人物は左下に小さく、コピーは画面中央のまま
   （タブレット縦など縦長画面では縦版を使う） */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .hero{
    background-image:url("../img/top/hero-wide.jpg");
    background-position:center bottom;
    /* 下寄せの余白を厚くして、中央のコピーが人物の頭に重ならないようにする */
    padding-bottom:clamp(200px,38vh,420px);
  }
  .hero::after{
    background:
      linear-gradient(180deg,rgba(6,40,74,.40) 0%,rgba(8,54,96,.10) 34%,rgba(8,54,96,.06) 66%,rgba(6,40,74,.20) 100%);
  }
  .hero__box{max-width:100%}
}

/* メインコピーは900px以上で1行固定（意図しない折り返しを防ぐ）
   全角12文字 × letter-spacing .05em ≒ 12.6em ぶんの幅に収まるサイズで上限を設定 */
@media (min-width:900px){
  .hero__catch{white-space:nowrap;font-size:min(4.4rem,6.8vw)}
}
.hero__eyebrow{
  display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7em;
  margin-bottom:clamp(20px,3vw,34px);
}
.hero__corp{font-size:.78rem;letter-spacing:.16em;opacity:.92}
.hero__catch{
  font-family:var(--f-serif);font-weight:600;
  font-size:clamp(2.1rem,7.4vw,4.6rem);line-height:1.32;letter-spacing:.05em;
  text-shadow:0 2px 26px rgba(4,32,60,.5);
}
.hero__school{
  margin-top:clamp(16px,2.4vw,26px);
  font-weight:700;font-size:clamp(1rem,2.3vw,1.4rem);letter-spacing:.08em;
  text-shadow:0 2px 16px rgba(4,32,60,.5);
  text-align: center;
}
.hero__open{
  margin-top:clamp(26px,4vw,44px);
  display:inline-block;padding:.7em 1.6em;border-radius:8px;
  background:var(--yellow);color:var(--blue-900);
  font-weight:800;letter-spacing:.08em;font-size:clamp(1rem,2.6vw,1.5rem);
  box-shadow:0 8px 30px rgba(0,0,0,.22);
}
.hero__depts{
  margin-top:clamp(28px,4vw,44px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5em .7em;
  font-size:clamp(.72rem,1.8vw,.86rem);font-weight:600;
}
.hero__depts li{
  padding:.42em 1em;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(4px);
}
.hero__scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5em;
  font-size:.62rem;letter-spacing:.24em;color:rgba(255,255,255,.85);
}
.hero__scroll span::after{
  content:"";display:block;width:1px;height:44px;margin:.7em auto 0;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:scrolldot 2.2s ease-in-out infinite;
}
@keyframes scrolldot{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============================================================
   message
   ============================================================ */
.message{
  position:relative;padding:var(--sec-y) 0;color:#fff;
  background:var(--blue-800) url("../img/common/sky.jpg") center / cover no-repeat;
  isolation:isolate;
}
.message::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,58,104,.86),rgba(15,77,134,.80));
}
.message__head{text-align:center;max-width:900px;margin:0 auto clamp(40px,5vw,64px)}
.message__sub{
  font-family:var(--f-serif);font-weight:600;color:var(--yellow);
  font-size:clamp(1.15rem,3.2vw,1.95rem);line-height:1.6;letter-spacing:.04em;
  margin-top:1.1em;
}
.message__main{
  font-family:var(--f-serif);font-weight:700;color:var(--yellow);
  font-size:clamp(1.7rem,5.6vw,3.3rem);line-height:1.35;letter-spacing:.03em;
  margin-top:.35em;
}
.message__body{max-width:760px;margin:0 auto;display:grid;gap:1.5em}
.message__body p{font-size:clamp(.9rem,1.9vw,1rem);line-height:2.05;color:rgba(255,255,255,.94)}
.message__hr{height:1px;background:rgba(255,255,255,.3);max-width:760px;margin:0 auto clamp(36px,5vw,52px);border:0}

.pillars{
  max-width:1000px;margin:clamp(48px,6vw,76px) auto 0;
  display:grid;gap:16px;grid-template-columns:1fr;
}
@media (min-width:720px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius);padding:1.6em 1.4em;backdrop-filter:blur(6px);
}
.pillar__no{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--yellow);color:var(--blue-900);font-weight:800;font-size:.9rem;
  margin-bottom:.9em;
}
.pillar__no--new{width:auto;padding:0 .8em;border-radius:999px;font-size:.72rem;letter-spacing:.1em}
.pillar h3{font-size:1rem;line-height:1.6;margin-bottom:.5em;color:var(--yellow)}
.pillar p{font-size:.85rem;line-height:1.9;color:rgba(255,255,255,.9)}
.pillar--new{background:rgba(255,225,77,.14);border-color:rgba(255,225,77,.5)}

.message__closing{
  text-align:center;margin-top:clamp(48px,6vw,76px);
  font-family:var(--f-serif);font-weight:600;color:#fff;
  font-size:clamp(1.15rem,3.4vw,2rem);line-height:1.6;letter-spacing:.04em;
  text-shadow:0 2px 20px rgba(4,32,60,.4);
}

/* ============================================================
   campus
   ============================================================ */
.campus{padding:var(--sec-y) 0;background:var(--blue-050)}
.campus__grid{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media (min-width:860px){.campus__grid{grid-template-columns:1fr 1fr}}
.campus__photo{margin:0}
.campus__photo img{
  width:100%;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);background:#fff;
}
.campus__cap{
  margin-top:.9em;font-size:.74rem;color:var(--gray);
  letter-spacing:.06em;line-height:1.7;text-align:center;
}
.campus__txt h2{
  font-family:var(--f-serif);font-weight:600;
  font-size:clamp(1.45rem,3.6vw,2.2rem);line-height:1.5;letter-spacing:.03em;margin-bottom:1em;
}
.campus__txt p{color:var(--ink-2);margin-bottom:1.2em}
.campus__ai{
  display:flex;gap:1em;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1em 1.2em;box-shadow:var(--shadow);
}
.campus__ai img{width:84px;flex:0 0 auto;border-radius:8px}
.campus__ai p{margin:0;font-size:.85rem;line-height:1.85}
.campus__ai strong{color:var(--blue-700)}

/* ============================================================
   departments
   ============================================================ */
.depts{padding:var(--sec-y) 0}
.depts__grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:660px){.depts__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.depts__grid{grid-template-columns:repeat(4,1fr)}}
.dept{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.dept:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.dept__bar{height:5px;background:var(--dc,var(--blue-500))}
.dept__photo{aspect-ratio:3/2;overflow:hidden;background:var(--blue-100)}
.dept__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dept:hover .dept__photo img{transform:scale(1.05)}
.dept__body{padding:1.3em 1.3em 1.5em;display:flex;flex-direction:column;flex:1}
.dept__name{
  font-size:1.12rem;font-weight:700;line-height:1.45;letter-spacing:.01em;
  padding-left:.6em;border-left:4px solid var(--dc,var(--blue-500));margin-bottom:.8em;
}
.dept__majors{display:flex;flex-wrap:wrap;gap:.4em;margin-bottom:1em}
.dept__majors li{
  font-size:.72rem;background:var(--blue-100);color:var(--blue-800);
  padding:.3em .7em;border-radius:4px;font-weight:600;
}
.dept__spec{display:flex;gap:.5em;margin-bottom:1em}
.dept__spec span{
  background:var(--ink);color:#fff;font-size:.75rem;font-weight:700;
  padding:.34em .9em;border-radius:4px;letter-spacing:.04em;
}
.dept__copy{font-size:.88rem;line-height:1.85;color:var(--ink-2);margin-top:auto}

/* ============================================================
   achievement
   ============================================================ */
.ach{padding:var(--sec-y) 0;background:linear-gradient(180deg,var(--blue-050),#fff)}
.stats{
  display:grid;gap:14px;grid-template-columns:repeat(2,1fr);
  max-width:900px;margin:0 auto clamp(52px,7vw,86px);
}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
/* 卒業生ブロックを伏せている間は .stats が最後の要素になる。
   下マージンが残ると ACHIEVEMENT の下端に余白だけが空くので詰める。
   ブロックを戻せば :last-child が外れ、自動で元の余白に戻る。 */
.stats:last-child{margin-bottom:0}
.stat{
  text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5em .8em;box-shadow:var(--shadow);
}
.stat__num{
  font-family:var(--f-serif);font-weight:700;color:var(--blue-700);
  font-size:clamp(2.1rem,6vw,3.1rem);line-height:1.1;letter-spacing:-.01em;
}
.stat__num small{font-size:.42em;margin-left:.15em;letter-spacing:.02em}
.stat__lbl{font-size:.78rem;color:var(--gray);margin-top:.6em;letter-spacing:.06em}

.alm-lead{
  text-align:center;font-family:var(--f-serif);
  font-size:clamp(1.3rem,3.4vw,2rem);line-height:1.55;letter-spacing:.03em;
  margin-bottom:.9em;
}
.alm-note{text-align:center;color:var(--ink-2);font-size:.92rem;margin-bottom:clamp(36px,5vw,56px)}

.alm-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.alm-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.alm-grid{grid-template-columns:repeat(4,1fr)}}
.alm{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.alm__work{position:relative;aspect-ratio:3/4;overflow:hidden;background:#eef3f7}
.alm__work img{width:100%;height:100%;object-fit:cover}
.alm__role{
  position:absolute;top:0;left:0;color:#fff;font-size:.72rem;font-weight:700;
  padding:.5em 1em;letter-spacing:.06em;background:var(--ac,var(--blue-700));
  border-bottom-right-radius:8px;line-height:1.45;
}
.alm__body{padding:1.2em 1.2em 1.4em;text-align:center;display:flex;flex-direction:column;flex:1}
.alm__face{
  width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:3px solid var(--ac,var(--blue-700));margin:-3.2em auto .8em;background:#fff;
  position:relative;z-index:1;box-shadow:0 3px 12px rgba(10,58,104,.18);
}
.alm__org{font-size:.76rem;color:var(--gray);line-height:1.7}
.alm__name{font-size:1.15rem;font-weight:700;margin:.4em 0 .2em}
.alm__name small{font-size:.6em;font-weight:500;margin-left:.2em}
.alm__year{font-size:.74rem;color:var(--blue-700);font-weight:600;letter-spacing:.06em}
.alm__works{
  margin-top:.9em;padding-top:.9em;border-top:1px dashed var(--line);
  font-size:.76rem;color:var(--ink-2);line-height:1.85;text-align:left;
}
.alm__works dt{font-weight:700;margin-bottom:.2em;color:var(--ink)}
.alm__copy{font-size:.62rem;color:var(--gray);padding:.6em 1.2em 0;line-height:1.6;text-align:center}

/* voice actors */
.va-block{margin-top:clamp(56px,7vw,88px)}
.va-title{
  display:flex;align-items:center;gap:.8em;justify-content:center;
  font-family:var(--f-serif);font-size:clamp(1.15rem,2.8vw,1.6rem);
  margin-bottom:clamp(28px,4vw,44px);
}
.va-title::before,.va-title::after{content:"";height:1px;flex:1;max-width:120px;background:var(--line)}
.va-works{display:grid;gap:24px;grid-template-columns:1fr;margin-bottom:clamp(32px,4vw,48px)}
@media (min-width:760px){.va-works{grid-template-columns:repeat(2,1fr)}}
.va-work{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.va-work__ttl{background:#2fa397;color:#fff;text-align:center;font-weight:700;font-size:.95rem;padding:.6em 1em;letter-spacing:.04em}
.va-work--um .va-work__ttl{background:#4a8fbf}
.va-work__inner{padding:1.2em}
/* 縦長・横長どちらのキービジュアルもトリミングせず収める */
.va-work__key{
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-050);border:1px solid var(--line);
  border-radius:8px;padding:12px;margin-bottom:1.2em;
}
.va-work__key img{
  max-height:clamp(230px,26vw,300px);width:auto;max-width:100%;
  object-fit:contain;border-radius:4px;
  box-shadow:0 2px 12px rgba(10,58,104,.14);
}
.va-list{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:520px){.va-list{grid-template-columns:repeat(3,1fr)}}
.va{text-align:center}
.va img{
  width:86px;height:86px;border-radius:50%;object-fit:cover;
  border:3px solid var(--c-voice);margin:0 auto .6em;
}
.va__role{font-size:.72rem;color:var(--gray);line-height:1.5}
.va__name{font-size:.95rem;font-weight:700;margin:.2em 0}
.va__name small{font-size:.65em;font-weight:500}
.va__meta{font-size:.68rem;color:var(--ink-2);line-height:1.6}
.va-work__copy{font-size:.6rem;color:var(--gray);text-align:center;margin-top:.9em;line-height:1.6}


/* ============================================================
   alumni voice (from existing site)
   ============================================================ */
.voice{padding:var(--sec-y) 0;background:var(--blue-050)}
.voice__tabs{
  display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;
  margin-bottom:clamp(28px,4vw,42px);
}
.tab{
  border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:.6em 1.3em;font-size:.82rem;font-weight:700;color:var(--ink-2);
  transition:background-color .25s,color .25s,border-color .25s;
}
.tab:hover{border-color:var(--blue-300)}
.tab[aria-selected="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.panel[hidden]{display:none}
/* 最大4名のため2カラム上限。SPは1カラムのまま */
.voice__grid{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
@media (min-width:700px){
  .voice__grid{grid-template-columns:repeat(2,1fr);gap:26px;max-width:1040px;margin-inline:auto}
}
.vcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5em;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1em;
  border-top:4px solid var(--vc,var(--blue-700));
}
.vcard__top{display:flex;align-items:center;gap:1em}
.vcard__face{
  width:66px;height:66px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--blue-100);border:2px solid var(--vc,var(--blue-300));
}
/* ロゴ・全身イラストなど、円形で切れると困る画像用 */
.vcard__face--fit{object-fit:contain;background:#fff;padding:5px}
/* 写真が用意できない場合のフォールバック（頭文字アイコン） */
.vcard__face--mono{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-serif);font-size:1.6rem;font-weight:700;line-height:1;
  color:#fff;background:var(--vc,var(--blue-700));border-color:var(--vc,var(--blue-700));
}
.vcard__who{min-width:0}
.vcard__role{font-size:.7rem;color:var(--vc,var(--blue-700));font-weight:700;letter-spacing:.06em}
.vcard__name{font-weight:700;font-size:1.12rem;line-height:1.4;margin-top:.1em}
.vcard__name small{font-size:.62em;font-weight:500;margin-left:.15em}
.vcard__meta{font-size:.73rem;color:var(--gray);line-height:1.65;margin-top:.25em}
.vcard__award{
  align-self:flex-start;font-size:.68rem;line-height:1.55;font-weight:700;
  background:#fffaea;border:1px solid var(--yellow-deep);color:#8a6a00;
  padding:.35em .8em;border-radius:4px;
}
.vcard__works{font-size:.76rem;color:var(--ink-2);line-height:1.85}
.vcard__works dt{
  font-size:.68rem;font-weight:700;color:var(--gray);
  letter-spacing:.1em;margin-bottom:.3em;
}
.vcard__ttl{
  font-size:.98rem;font-weight:700;line-height:1.7;color:var(--blue-800);
  padding-left:.85em;border-left:3px solid var(--vc,var(--blue-300));
}
.vdet{border-top:1px dashed var(--line);padding-top:.9em;margin-top:auto}
.vdet__body{font-size:.84rem;line-height:1.95;color:var(--ink-2)}

/* 2カラム化に合わせたPC版の文字・余白の拡大 */
@media (min-width:700px){
  .vcard{padding:1.9em;gap:1.15em}
  .vcard__top{gap:1.2em}
  .vcard__face{width:84px;height:84px;border-width:3px}
  .vcard__face--mono{font-size:2rem}
  .vcard__role{font-size:.78rem}
  .vcard__name{font-size:1.32rem}
  .vcard__name small{font-size:.58em}
  .vcard__meta{font-size:.82rem;margin-top:.35em}
  .vcard__award{font-size:.76rem;padding:.4em .9em}
  .vcard__works{font-size:.86rem;line-height:1.9}
  .vcard__works dt{font-size:.74rem;margin-bottom:.4em}
  .vcard__ttl{font-size:1.16rem;line-height:1.75;padding-left:1em;border-left-width:4px}
  .vdet{padding-top:1.05em}
  .vdet__body{font-size:.94rem;line-height:2}
  .voice .voice__tabs{margin-bottom:clamp(32px,4vw,48px)}
  .voice .tab{font-size:.88rem;padding:.65em 1.5em}
}
.voice__more{display:flex;justify-content:center;margin-top:clamp(28px,4vw,42px)}
.voice__note{
  margin-top:clamp(24px,3vw,36px);text-align:center;
  font-size:.78rem;color:var(--gray);line-height:1.8;
}

/* 出演作品チップ */
.titles{margin-top:clamp(32px,4vw,48px)}
.titles__h{
  text-align:center;font-size:.82rem;font-weight:700;letter-spacing:.1em;
  color:var(--gray);margin-bottom:1em;
}
.titles__list{display:flex;flex-wrap:wrap;gap:.5em .6em;justify-content:center}
.titles__list li{
  font-size:.8rem;font-weight:600;padding:.4em .95em;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
}
.titles__list li.more{background:var(--c-voice);border-color:var(--c-voice);color:#fff}

/* ============================================================
   companies
   ============================================================ */
.comp{padding:var(--sec-y) 0;background:var(--ink);color:#fff}
.comp .tab{background:transparent;border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.82)}
.comp .tab:hover{border-color:rgba(255,255,255,.7)}
.comp .tab[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--blue-900)}
.comp__list{
  display:flex;flex-wrap:wrap;gap:.5em .7em;justify-content:center;
  max-width:960px;margin:0 auto;
}
.comp__list li{
  font-family:var(--f-serif);font-size:clamp(.8rem,1.9vw,.95rem);
  padding:.4em .95em;border-radius:6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  letter-spacing:.02em;
}
.comp__list li.more{background:var(--yellow);color:var(--blue-900);border-color:var(--yellow);font-weight:700}
.comp__note{text-align:center;font-size:.74rem;color:rgba(255,255,255,.6);margin-top:clamp(28px,4vw,40px)}

/* ============================================================
   history
   ============================================================ */
.hist{padding:var(--sec-y) 0}
/* 就職・デビュー実績（.comp／濃色）を伏せている間は、白で終わる ACHIEVEMENT と
   白背景の HISTORY が直に隣り合い、セクションの境目が消える。
   隣接しているときだけ区切り線を出す。.comp を戻せば自動的に外れる。 */
.ach + .hist{border-top:1px solid var(--line)}
.hist__grid{display:grid;gap:clamp(32px,5vw,56px)}
@media (min-width:900px){.hist__grid{grid-template-columns:1fr 300px}}
.tl{position:relative;padding-left:2.2em}
.tl::before{
  content:"";position:absolute;left:8px;top:.6em;bottom:.6em;width:2px;
  background:linear-gradient(180deg,var(--blue-300),var(--blue-700));
}
.tl__item{position:relative;padding-bottom:2em}
.tl__item:last-child{padding-bottom:0}
.tl__item::before{
  content:"";position:absolute;left:-2.2em;top:.55em;
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:4px solid var(--tc,var(--blue-700));
  box-shadow:0 0 0 4px #fff;
}
.tl__year{
  font-family:var(--f-serif);font-style:italic;font-weight:700;
  font-size:1.35rem;color:var(--tc,var(--blue-700));line-height:1;letter-spacing:.02em;
}
.tl__ttl{font-size:1.02rem;font-weight:700;line-height:1.6;margin:.35em 0 .3em}
.tl__txt{font-size:.85rem;color:var(--gray);line-height:1.85}
.tl__item--last .tl__ttl{font-size:1.15rem;color:var(--blue-800)}
.hist__photos{display:grid;gap:18px;align-content:start}
.hist__photo figcaption{font-size:.7rem;color:var(--gray);text-align:right;margin-top:.45em}
.hist__photo img{border-radius:10px;box-shadow:var(--shadow);width:100%}