/* =========================================================
   求職者LP（/personal/career/）専用スタイル
   /assets/aigent/css/common.css の後に読み込む
   FV・実績エンブレム・4項目・選ばれる理由・採用企業様インタビュー・
   キャリアアドバイザー・診断/FDEカード など、このページだけの部分
   ========================================================= */
@media (hover:hover){.hero-cta .btn-navy:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 6px 12px -7px rgba(7,19,45,.35)}}

/* HERO */
.hero{position:relative;padding-top:var(--header-h);display:flex;flex-direction:column}
.hero-copy{order:1}
.hero-photo{order:2}
.stats{order:3}
.hero-cta{order:4}
.hero-fade{display:none}
.hero-copy{padding:24px 0 20px;display:flex;flex-direction:column;gap:14px}
.hero-copy>*{max-width:600px}
.hero-bar{width:44px;height:3px;border-radius:2px;background:var(--g-gold)}
.hero-title{font-size:clamp(26px,7.7vw,34px);line-height:1.4;color:var(--navy)}
.hero-title span{white-space:nowrap}
.hero-lead{font-size:15px;line-height:1.85}
.hero-photo{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;max-width:720px;margin-inline:auto}
.hero-photo picture{position:absolute;left:-19.2%;top:-16%;width:125.3%}
.hero-photo img{width:100%;height:auto}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 55%,#FFF 100%)}
.stats{position:relative;z-index:2;margin:-46px auto 0;padding:0 16px 4px;display:flex;justify-content:center;gap:4px}
.stat{display:flex;align-items:center;height:84px}
.stat .laurel{height:100%;width:auto}
.stat-body{width:74px;margin:0 -10px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.stat dt{font-size:10px;font-weight:700;line-height:1.3;color:var(--navy2)}
.stat dt sup{font-weight:500;color:var(--muted)}
.stat dd{display:flex;align-items:baseline;justify-content:center;gap:1px;white-space:nowrap}
.stat dd.stack{flex-direction:column;align-items:center}
.stat .n{font-weight:600;font-size:34px;line-height:1;color:var(--navy)}
.stat dd.stack .n{font-size:26px}
.stat .u{font-size:15px;font-weight:700;line-height:1.2;color:var(--gold-d)}
.stat dd.stack .u{font-size:11px}
.stat .lb-pc{display:none}
.hero-cta{padding:20px 0 32px}
.hero-cta-box{display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-cta .btn-navy{align-self:stretch;height:58px;font-size:17px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 12px 24px -14px rgba(7,19,45,.7)}
.hero-note{font-size:14px;font-weight:700}

/* 登録・利用の4項目 */
.assure{padding:24px 0 20px;background:var(--bg)}
.assure .inner{display:flex;flex-direction:column;gap:16px}
.assure-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.assure-list li{display:flex;flex-direction:column;gap:6px;padding:14px 12px 16px;border-radius:6px;background:#FFF}
.assure-list .ttl{display:flex;align-items:flex-start;gap:6px;font-size:13px;font-weight:700;line-height:1.5;color:var(--navy)}
.assure-list svg{flex-shrink:0;margin-top:2px}
.assure-list .sub{font-size:12px;line-height:1.7}
.notes{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.6;color:var(--muted)}

/* 選ばれる理由 */
.features{background:var(--navy) url(https://skillup-aigent.com/assets/aigent/images/bg-section.webp) 30% center/cover no-repeat}
.features{position:relative;padding:56px 0 104px;color:#FFF}
.features .inner{display:flex;flex-direction:column;gap:28px}
.features-head{display:flex;flex-direction:column;gap:14px}
.features-head h2{font-size:26px;line-height:1.45}
.features-head p{font-size:14px;line-height:1.9;color:rgba(255,255,255,.9)}
.points{display:flex;flex-direction:column;gap:28px}
.point{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px}
.point svg{margin-top:2px}
.point h3{font-size:18px;line-height:1.55}
.point p{margin-top:8px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.9)}

/* 採用企業様インタビュー */
.hints{padding:48px 0 72px}
.hints .inner{display:flex;flex-direction:column;gap:22px}
.yt{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--navy)}
.yt-body,.yt-side{display:contents}
.yt-meta{order:1}
.yt-thumb{order:2}
.yt h3{order:3}
.yt-body>p:not(.yt-meta){order:4}
.yt .text-link{order:5}
.yt-meta{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--navy2)}
.yt-thumb{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--navy2)}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(7,19,45,.82);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center}
.yt h3{font-size:19px;line-height:1.55}
.yt-body p{font-size:14px;line-height:1.9;color:var(--text)}
.text-link{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1.5px solid var(--navy);font-weight:700;font-size:14px;color:var(--navy)}
.articles{display:flex;flex-direction:column;gap:16px;padding-top:28px;border-top:1px solid var(--line)}
.articles h3{font-size:19px;color:var(--navy)}
.article-list{display:flex;flex-direction:column;gap:16px}
.article a{display:grid;grid-template-columns:144px minmax(0,1fr);gap:14px;align-items:center;text-decoration:none;color:var(--navy)}
.article img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.article-body{display:flex;flex-direction:column;gap:10px}
.article-co{font-weight:700;font-size:17px;line-height:1.45;color:var(--navy)}
.article-co span{display:inline-block}
.article .tags{display:flex;flex-wrap:wrap;gap:4px}
.article .tags li{display:flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--bg);font-size:10px;font-weight:700;color:var(--navy2)}

/* キャリアアドバイザー */
.advisor{padding:88px 0 48px;background:var(--g-light);clip-path:polygon(0 48px,100% 0,100% 100%,0 100%);overflow:hidden}
.advisor-head{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.adv-viewport{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.adv-viewport::-webkit-scrollbar{display:none}
.adv-track{display:flex;gap:12px;width:max-content;padding-bottom:4px}
.adv{flex-shrink:0;width:280px;display:flex;flex-direction:column;background:#FFF;border:1px solid rgba(25,49,98,.10);border-radius:6px;overflow:hidden}
.adv-photo{position:relative}
.adv-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.adv-name{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:6px;padding:6px 12px;border-top-right-radius:6px;background:var(--g-btn);color:#FFF}
.adv-name h3{font-family:var(--f-num);font-weight:600;font-size:15px}
.adv-name span{font-size:11px}
.adv p{padding:14px 16px 0;font-size:12px;line-height:1.8}
.adv .hashes{margin-top:auto;padding:12px 16px 16px;display:flex;flex-wrap:wrap;gap:6px}

/* 診断・FDE */
.more{padding:40px 0}
.more .inner{display:grid;gap:14px}
.card{display:flex;flex-direction:column;gap:12px;padding:28px 22px;border-radius:6px}
.card h2{font-size:22px;color:var(--navy)}
.card p{font-size:14px;line-height:1.9}
.card .btn{align-self:flex-end;margin-top:auto}
.card-diag{background:var(--g-light)}
.more .card:only-child{grid-column:1/-1}
.card-fde{background:radial-gradient(80% 120% at 100% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 65%),linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.38) 100%),linear-gradient(135deg,#E3C13C 0%,#E3B552 50%,#D29C09 100%)}

/* ===== PC（1200px以上） ===== */
@media (min-width:1200px){
  .hero{height:820px;padding:88px 0 200px;justify-content:center;gap:24px;overflow:hidden}
  .hero .inner{position:relative;z-index:3}
  .hero-photo{position:absolute;top:0;right:0;width:1040px;max-width:none;height:760px;aspect-ratio:auto;margin:0;-webkit-mask-image:linear-gradient(180deg,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,#000 90%,transparent 100%)}
  .hero-photo picture{left:auto;right:48px;top:0;width:1040px}
  .hero-photo::after{display:block;background:linear-gradient(90deg,rgba(255,255,255,0) calc(100% - 200px),#FFF calc(100% - 48px))}
  .hero-fade{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 160px),linear-gradient(90deg,#FFF 0,#FFF calc(50% - 220px),rgba(255,255,255,.85) calc(50% - 140px),rgba(255,255,255,.3) calc(50%),rgba(255,255,255,0) calc(50% + 140px))}
  .hero-copy{padding:0;gap:24px}
  .hero-bar{width:56px}
  .hero-title{font-size:48px;line-height:1.35}
  .hero-lead{font-size:19px;line-height:1.8}
  .hero-cta{padding:4px 0 0}
  .hero-cta-box{align-items:center;align-self:flex-start;display:inline-flex;gap:12px}
  .hero-cta .btn-navy{align-self:auto;height:64px;padding:0 36px;font-size:18px}
  .hero-note{font-size:15px}
  .stats{position:absolute;z-index:4;right:36px;top:136px;margin:0;padding:0;flex-direction:column;gap:16px}
  .stat{height:124px}
  .stat-body{width:152px;margin:0 -16px;gap:4px}
  .stat dt{font-size:15px;line-height:1.35}
  .stat .n{font-size:62px}
  .stat .u{font-size:25px}
  .stat dd.stack{gap:2px}
  .stat dd.stack .n{font-size:50px}
  .stat dd.stack .u{font-size:19px}
  .stat .lb-sp{display:none}
  .stat .lb-pc{display:inline}
  .assure{position:relative;z-index:5;margin-top:-200px;padding:24px 0 20px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
  .assure-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .assure-list li{padding:0 28px;border-radius:0;background:transparent;border-left:1px solid var(--line)}
  .assure-list li:first-child{border-left:0}
  .assure-list .ttl{font-size:18px;gap:8px}
  .assure-list svg{width:22px;height:22px}
  .assure-list .sub{font-size:14px;line-height:1.8}
  .notes{padding-top:10px;border-top:1px solid var(--line);font-size:12px}
  .features{padding:96px 0 200px;background-position:center}
  .features .inner{display:grid;grid-template-columns:440px minmax(0,1fr);gap:80px;align-items:start}
  .features-head{gap:24px}
  .features-head h2{font-size:38px}
  .features-head p{font-size:16px;line-height:2}
  .points{gap:40px}
  .point{grid-template-columns:30px minmax(0,1fr);gap:18px}
  .point svg{width:30px;height:30px;margin-top:3px}
  .point h3{font-size:22px}
  .point p{margin-top:10px;max-width:40em;font-size:15px;line-height:2}
  .hints{padding:80px 0 96px}
  .hints .inner{gap:40px}
  .hints .sec-lead{max-width:52em;margin-top:-16px}
  .yt{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:64px;align-items:start}
  .yt-body,.yt-side{display:flex;flex-direction:column;gap:16px}
  .yt-side{gap:14px}
  .yt-meta{font-size:13px}
  .yt-play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .yt h3{font-size:26px}
  .yt-body p{font-size:15px;line-height:2}
  .text-link{font-size:15px}
  .articles{gap:20px;padding-top:40px}
  .articles h3{font-size:22px}
  .article-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .article a{grid-template-columns:320px minmax(0,1fr);gap:24px}
  .article img{border-radius:8px}
  .article-body{gap:12px}
  .article .tags{gap:6px}
  .article .tags li{height:26px;padding:0 10px;font-size:12px}
  .article-co{font-size:20px}
  .advisor{padding:152px 0 80px;clip-path:polygon(0 88px,100% 0,100% 100%,0 100%)}
  .advisor-head{display:grid;grid-template-columns:440px minmax(0,1fr);gap:80px;align-items:end;margin-bottom:40px}
  .advisor-head p{max-width:40em;font-size:15px}
  .adv-viewport{width:min(100% - 80px,1200px);margin-inline:auto;overflow:visible}
  .adv-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:auto;animation:none;padding:0}
  .adv.dup{display:none}
  .adv{width:auto;border-radius:8px}
  .adv-name{gap:8px;padding:8px 16px}
  .adv-name h3{font-size:16px}
  .adv-name span{font-size:12px}
  .adv p{padding:18px 22px 0;font-size:13px;line-height:1.85}
  .adv .hashes{padding:14px 22px 22px}
  .more{padding:72px 0}
  .more .inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .card{gap:14px;padding:40px;border-radius:8px}
  .card h2{font-size:26px}
  .card p{font-size:15px;line-height:1.95}
  .card .btn{height:52px;padding:0 28px;margin-top:8px}
}
@media (min-width:1200px) and (max-width:1359px){
  .stats{right:20px}
  .hero-photo{width:960px}
  .hero-photo picture{right:72px}
  .hero-photo::after{background:linear-gradient(90deg,rgba(255,255,255,0) calc(100% - 220px),#FFF calc(100% - 72px))}
}

/* ===== アドバイザー：得意領域タグを写真の左上に（角丸なし） ===== */
.adv-tags{position:absolute;left:0;top:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;max-width:calc(100% - 16px)}
.adv-tags li{padding:3px 7px;background:rgba(232,240,251,.95);box-shadow:inset 2px 0 0 #2D5BA8;font-size:11px;font-weight:700;line-height:1.35;color:#1F4A94}
.adv p{padding-bottom:18px}
@media (min-width:1200px){
  .adv-tags li{padding:5px 11px;font-size:16px}
  .adv p{padding-bottom:24px}
}

/* ===== FV写真（女性・左向き） ===== */
.hero--b .hero-photo picture{left:-8.7%;top:-19.2%;width:109%}  /* SPは上に壁を足した hero-b-sp.webp を使用 */
.hero--b .hero-photo::after{background:linear-gradient(180deg,rgba(255,255,255,0) 45%,#FFF 100%)}
@media (min-width:1200px){
  /* 左右だけぼかして白に溶かす（上下はぼかさない） */
  .hero--b .hero-photo picture{left:-97px;right:auto;top:88px;width:1010px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 80%,transparent 100%)}
  .hero--b .hero-photo::after{display:none}
  /* エンブレムの後ろを白くぼかして視認性を上げる */
  .hero--b .stats::before{content:"";position:absolute;inset:-70px -60px -70px -90px;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,255,255,.96) 0,rgba(255,255,255,.88) 55%,rgba(255,255,255,0) 100%)}
}
@media (min-width:1200px) and (max-width:1359px){
  .hero--b .hero-photo picture{left:-117px}
}

/* ===== AIキャリア診断：サムネイル付きカード ===== */
.card-diag{overflow:hidden}
.card-thumb{display:block;margin:0 0 4px;overflow:hidden;border-radius:6px}
.card-thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}
.card-body{display:flex;flex-direction:column;gap:12px;flex:1}
@media (hover:hover){.card-thumb:hover img{transform:scale(1.03)}}
@media (min-width:1200px){
  .card-thumb{margin:0 0 6px}
  .card-body{gap:14px}
  /* 診断カードが1枚だけの時：左に画像・右にテキスト */
  .more .card-diag:only-child{display:grid;grid-template-columns:400px minmax(0,1fr);gap:48px;align-items:center;padding:36px 56px 36px 40px}
  .more .card-diag:only-child .card-thumb{margin:0;border-radius:6px;box-shadow:0 16px 32px -20px rgba(7,19,45,.45)}
  .more .card-diag:only-child .card-body{align-self:stretch;padding-top:4px}
  .more .card-diag:only-child .btn{align-self:flex-end;margin-top:auto}
}