@charset "UTF-8";
/* 社会人力診断LP。トークン・ヘッダー・ボタンは style.css を共有する。
   数値はチャッピーが原画(877×1794px)を実測し 1440px 換算した再現用実値（倍率 約1.642）。

   本人が挙げた「実装で最も差が出るポイント」を上から優先している:
   1. Hero の女性写真の位置・サイズ・顔の向き
   2. 「未来の自分に、今できる準備を。」の手書き文字
   3. Hero CTA の大きさ（475×82px。TOPより相対的に大きい）
   4. Hero の白→空色グラデーション
   5. 5つの雲型吹き出し
   6. 7カードが1列に収まる細さ
   7. 3STEPカードと、上にはみ出す STEP ピル
   8. 結果パネルの「説明→68→レーダー→おすすめ」の横一列
   9. 最終CTAの淡黄色と手書きコピー
   10. 影・細かいアイコン色

   このLPは CV 一本道。コース一覧などの他導線をコンテンツ側に置かないこと。 */

.dwrap{max-width:1365px;margin-inline:auto;padding-inline:37px}

.sec-lead{margin-top:12px;text-align:center;font-size:14px;font-weight:500;line-height:1.7;color:var(--navy-soft)}
.sec-title + .sec-lead{margin-top:12px}
.sec-lead + *{margin-top:38px}
/* ＼ ／ で囲む見出し */
.sec-title--slash span{position:relative;padding-inline:44px}
.sec-title--slash span::before,
.sec-title--slash span::after{
  content:"";position:absolute;top:50%;width:2.5px;height:34px;background:var(--navy);
  border-radius:2px;
}
.sec-title--slash span::before{left:6px;translate:0 -50%;rotate:-22deg}
.sec-title--slash span::after{right:6px;translate:0 -50%;rotate:22deg}

/* ---------- 手書きコピー（Klee One + 微回転） ---------- */
.hand{
  font-family:"Klee One",cursive;font-weight:600;
  color:#0874BE;letter-spacing:.02em;line-height:1.45;
}
.hand span{display:block;white-space:nowrap}
.hand__line{display:block;height:auto}

/* ---------- 1-2. パンくず + Hero ---------- */
.dhero{position:relative;min-height:667px;overflow:hidden;background:linear-gradient(90deg,#F8FCFF 0%,#EDF7FF 100%)}
/* 写真は右端から。人物の顔中心が viewport の約78%に来る大きさ */
.dhero__photo{
  position:absolute;right:0;bottom:0;z-index:1;
  width:790px;height:650px;object-fit:cover;object-position:62% center;
  /* 左端を背景に溶かす。写真の空色と Hero 左のグラデーションを連続させる */
  --fade:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
  -webkit-mask-image:var(--fade);mask-image:var(--fade);
}
.dhero__inner{position:relative;z-index:2;max-width:1440px;margin-inline:auto;min-height:667px}
.crumb{padding:22px 0 0 95px;font-size:12px;font-weight:500;line-height:1.5;color:var(--text-muted)}
.crumb a:hover{color:var(--blue)}
.crumb span[aria-hidden]{margin-inline:8px}

.dhero__copy{width:650px;padding:44px 0 0 95px}
.dhero__catch{font-size:19px;font-weight:700;line-height:1.4}
.dhero__catch span{position:relative;padding-inline:26px}
.dhero__catch span::before,
.dhero__catch span::after{
  content:"";position:absolute;top:50%;width:2px;height:22px;background:var(--navy);border-radius:2px;
}
.dhero__catch span::before{left:2px;translate:0 -50%;rotate:-22deg}
.dhero__catch span::after{right:2px;translate:0 -50%;rotate:22deg}

.dhero__title{margin-top:10px;font-size:54px;font-weight:800;line-height:1.18;letter-spacing:-.035em}
.dhero__title small{font-size:.52em;font-weight:800;letter-spacing:-.02em}
.dhero__lead{margin-top:18px;font-size:25px;font-weight:700;line-height:1.55;letter-spacing:-.02em}
.dhero__text{margin-top:16px;font-size:15px;font-weight:500;line-height:1.65;color:var(--navy-soft)}

/* Hero CTA は 475×82px。LP なので TOP より明確に大きい */
.dcta{
  margin-top:30px;width:475px;height:82px;
  font-size:18px;gap:.8em;padding:0;
  box-shadow:0 7px 18px rgba(244,194,0,.18);
}
.dhero__pill{
  margin-top:18px;width:460px;height:49px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(196,218,235,.75);border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;
}
.dhero__pill span{margin-inline:14px;color:#B9CFE0}

.hand--hero{position:absolute;left:706px;top:176px;width:auto;font-size:37px;rotate:-6deg}
.hand--hero span:nth-child(2){padding-left:18px}
.hand--hero span:nth-child(3){padding-left:6px}
.hand--hero .hand__line{width:265px;margin-top:6px;rotate:-1deg}

/* ---------- 3. 4メリット帯 ---------- */
.merit{max-width:1440px;margin-inline:auto;padding:0 37px}
.merit__list{
  margin-top:34px;min-height:118px;background:#EEF7FF;border-radius:var(--radius-lg);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
}
.merit__list li{display:flex;align-items:center;gap:16px;padding-inline:32px}
.merit__list svg{width:54px;height:54px;flex:none}
.merit__t{font-size:14px;font-weight:700;line-height:1.4}
.merit__d{margin-top:4px;font-size:12px;font-weight:500;line-height:1.45;color:var(--navy-soft)}

/* ---------- 4. 疑問喚起（雲型吹き出し） ---------- */
.doubt{padding:62px 0 72px}
.doubt__list{margin-top:48px;display:grid;grid-template-columns:repeat(5,1fr);gap:36px}
/* 雲型は角丸ではなく、複数の円を疑似要素で足して作る */
.bubble2{
  position:relative;min-height:126px;padding:26px 18px;
  display:grid;place-items:center;text-align:center;
  font-size:15px;font-weight:600;line-height:1.55;color:var(--navy);
  background:#fff;border:1px solid #E0EEF9;border-radius:50% / 34%;
  filter:drop-shadow(0 5px 12px rgba(40,96,140,.06));
}
.bubble2::before,.bubble2::after{
  content:"";position:absolute;background:#fff;border:1px solid #E0EEF9;border-radius:50%;
}
.bubble2::before{width:17px;height:17px;left:22%;bottom:-11px}
.bubble2::after{width:9px;height:9px;left:15%;bottom:-24px}

/* ---------- 5. 7スキル ---------- */
.skills{padding:58px 0 88px}
.skills__list{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.skill{
  background:var(--bg);border-radius:14px;
  min-height:247px;padding:24px 13px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.skill__icon{width:60px;height:60px;margin-bottom:16px}
.skill h3{font-size:15px;font-weight:700;line-height:1.45;letter-spacing:-.01em}
.skill p{margin-top:10px;font-size:12px;font-weight:600;line-height:1.55;color:var(--navy-soft)}

/* ---------- 6. 3STEP ---------- */
.dstep{padding:34px 0 74px}
.dstep__list{
  margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:60px;align-items:stretch;
}
.dcard{
  position:relative;min-height:300px;padding:44px 26px 30px;text-align:center;
  background:#fff;border:1px solid #DCEAF5;border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(31,90,134,.08);
  display:flex;flex-direction:column;align-items:center;
}
/* STEP ピルはカード上端からはみ出す */
.dcard__pill{
  position:absolute;top:0;left:50%;translate:-50% -18px;
  width:127px;height:36px;border-radius:var(--radius-pill);
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;
  display:grid;place-items:center;
}
.dcard__icon{width:110px;height:110px;margin-bottom:14px}
.dcard h3{font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.01em}
.dcard p{margin-top:12px;font-size:13px;font-weight:500;line-height:1.6;color:var(--navy-soft)}
/* カード間の矢印 */
.dcard:not(:last-child)::after{
  content:"";position:absolute;right:-38px;top:50%;translate:0 -50%;
  width:0;height:0;border-left:14px solid #3D9BE9;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
}

/* ---------- 7. 診断結果イメージ ---------- */
.result{padding-bottom:0}
.result__panel{
  max-width:1440px;margin-inline:auto;margin-bottom:0;
  margin-left:35px;margin-right:35px;
  background:linear-gradient(90deg,#F0F8FF 0%,#EAF5FF 100%);
  border-radius:var(--radius-lg);padding:32px 45px;
  display:grid;grid-template-columns:26fr 20fr 30fr 24fr;gap:10px;align-items:stretch;
}
.result__lead{align-self:center;padding-right:20px}
.result__lead h2{font-size:25px;font-weight:700;line-height:1.4;letter-spacing:-.02em}
.result__lead p{margin-top:14px;font-size:14px;font-weight:500;line-height:1.65;color:var(--navy-soft)}
.rcard{
  background:#fff;border-radius:var(--radius-md);padding:22px 20px;
  box-shadow:0 5px 18px rgba(30,73,105,.055);
}
.rcard__label{font-size:14px;font-weight:700;line-height:1.4;text-align:center}
.rcard__label--blue{color:var(--blue);text-align:left}
.rcard--score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.rscore{display:flex;align-items:baseline;gap:4px;line-height:1}
.rscore__num{font-family:"Inter","Noto Sans JP",sans-serif;font-size:52px;font-weight:700;color:var(--blue);letter-spacing:-.04em}
.rscore__den{font-size:15px;font-weight:600;color:var(--text-muted)}
.rbar{width:100%;height:9px;border-radius:var(--radius-pill);background:#E1ECF5;overflow:hidden}
.rbar span{display:block;height:100%;background:#2789DB;border-radius:inherit}
.rradar{width:100%;height:auto;margin-top:4px}
.rec{margin-top:14px;display:grid;gap:13px}
.rec li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.rec__no{
  width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:12px;font-weight:700;display:grid;place-items:center;
}
.rec__t{font-size:13px;font-weight:700;line-height:1.4}
.rec__d{margin-top:3px;font-size:11px;font-weight:500;line-height:1.5;color:var(--navy-soft)}

/* ---------- 8. 最終CTA ---------- */
.dfinal{margin-top:64px;background:linear-gradient(90deg,#FFFBE7 0%,#FFF4BF 55%,#FFF0A9 100%)}
.dfinal__inner{
  max-width:1440px;margin-inline:auto;min-height:270px;padding:40px 96px;
  display:grid;grid-template-columns:47fr 53fr;gap:28px;align-items:center;
}
.hand--final{font-size:32px;rotate:-4deg}
.hand--final .hand__line{width:470px;margin-top:8px}
.dfinal__cta{justify-self:end;text-align:center}
.dcta--last{width:640px;height:106px;font-size:21px;margin-top:0}
.dfinal__note{margin-top:14px;font-size:13px;font-weight:500;color:var(--navy-soft)}

/* ---------- responsive ---------- */
@media (max-width:1400px){
  .dhero__copy,.crumb{padding-left:56px}
  .dhero__copy{width:48%}
  .dhero__photo{width:56%}
  /* 900〜1400px はコピーと写真が詰まり、手書きを置ける空が残らない。
     顔に重ねるくらいなら落とす。1400px以上と、積みレイアウトの900px未満では出す。 */
  .hand--hero{display:none}
  .dcta{width:min(475px,100%)}
  .dhero__pill{width:min(460px,100%)}
  .skills__list{grid-template-columns:repeat(4,1fr)}
  .dstep__list{gap:48px}
  .dcard:not(:last-child)::after{right:-32px}
  .result__panel{grid-template-columns:1fr 1fr;gap:16px}
  .result__lead{grid-column:1/-1;padding-right:0}
  .rcard--rec{grid-column:1/-1}
  .dfinal__inner{padding-inline:56px}
  .dcta--last{width:min(660px,100%)}
  .hand--final .hand__line{width:min(470px,100%)}
}
@media (max-width:1060px){
  .gnav{gap:16px;font-size:12.5px}
  .hdr__inner{padding-inline:20px}
  .merit__list{grid-template-columns:repeat(2,1fr);row-gap:20px;padding-block:22px}
  .doubt__list{grid-template-columns:repeat(3,1fr);gap:28px}
  .dstep__list{grid-template-columns:1fr;gap:44px}
  .dcard:not(:last-child)::after{
    right:50%;top:auto;bottom:-30px;translate:50% 0;rotate:90deg;
  }
}
@media (max-width:900px){
  .dwrap{padding-inline:24px}
  .gnav,.hdr__actions .btn--ghost{display:none}
  .hdr__inner{height:68px}
  /* Hero は写真を背面に敷かず、コピーの下に置く */
  .dhero{min-height:0}
  .dhero__inner{min-height:0;display:flex;flex-direction:column}
  .crumb{padding:18px 24px 0}
  .dhero__copy{width:auto;padding:24px 24px 32px}
  .dhero__photo{position:static;width:100%;height:auto;aspect-ratio:16/9;order:2;-webkit-mask-image:none;mask-image:none}
  .hand--hero{position:static;rotate:-3deg;margin:0 24px 24px;order:1}
  .dhero__title{font-size:clamp(32px,7vw,54px)}
  .dhero__lead{font-size:clamp(19px,3.6vw,25px)}
  .dcta{height:70px;font-size:16px}
  .skills__list{grid-template-columns:repeat(2,1fr)}
  .result__panel{grid-template-columns:1fr;margin-inline:24px;padding:24px}
  .dfinal__inner{grid-template-columns:1fr;padding:32px 24px;text-align:center}
  .hand--final{font-size:clamp(22px,4.6vw,35px)}
  .hand--final .hand__line{margin-inline:auto}
  .dfinal__cta{justify-self:center}
  .dcta--last{height:82px;font-size:17px}
}
@media (max-width:640px){
  .merit__list{grid-template-columns:1fr}
  .doubt__list{grid-template-columns:repeat(2,1fr)}
  .skills__list{grid-template-columns:1fr}
  .sec-title--slash span{padding-inline:30px}
}