/* ============================================================
   リンクスコミット様 キャリアの処方箋LP
   1rem = デザイン(390px幅)の10px。全コードはFigma実測値÷10のrem指定
   ============================================================ */
:root {
  --blue: #008dcf;
  --green: #06c755;
  --green-dark: #049a42;
  --yellow: #ffee26;
  --ink: #2d2d2d;
  --grey: #70767c;
  --bg-light: #ecf7fb;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 2.5641vw; /* 390pxで10px */ -webkit-text-size-adjust: 100%; }
@media (min-width: 500px) { html { font-size: 12.82px; } }   /* 列を500pxで頭打ち */
@media (min-width: 1024px) { html { font-size: 11.282px; } } /* PC: 列440px(ちょい太め) */

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ink);
  background: #fff;
  word-break: auto-phrase;
  line-break: strict;
}
img { display: block; }
.nw { white-space: nowrap; }

/* 画像に焼き込まれたコピーを検索エンジン・スクリーンリーダーへ渡すためのテキスト
   （視覚表示はデザイン通り画像のまま。内容は画像内の文言と完全に一致させる） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
ul { list-style: none; }
a { -webkit-tap-highlight-color: rgba(0,0,0,.1); }

/* ===== LP列 ===== */
.page {
  width: 39rem;
  margin: 0 auto;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.sec-img { width: 100%; height: auto; }

/* ===== 上部バナー ===== */
.top-banner {
  height: 4.2rem;
  background: var(--blue);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 4.2rem;
  text-align: center;
  letter-spacing: .05em;
}
.top-banner .yl { color: var(--yellow); }

/* ===== FV（画像＋CTA重ね） ===== */
.fv { position: relative; }
.fv .fv-cta { position: absolute; left: 2rem; top: 49.59rem; width: 35rem; }

/* ===== CTAボタン（共通コンポーネント） ===== */
.cta {
  display: block;
  position: relative;
  width: 100%;
  max-width: 40rem;
  background: var(--green);
  border-bottom: .3rem solid var(--green-dark);
  border-radius: .6rem;
  height: 7rem;
  padding: .4rem 1.4rem .6rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  animation: cta-pulse 2.4s ease-in-out infinite;
}
.cta:hover { filter: brightness(1.06); }
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.cta-top {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .048rem;
  line-height: 2.28rem;
  color: #fff;
}
.cta-top .n { font-size: 1.8rem; font-weight: 900; color: var(--yellow); }
.cta-top .m { font-size: 1.2rem; font-weight: 900; color: var(--yellow); }
.cta-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  height: 3.4rem;
  padding-top: .2rem;
  box-sizing: border-box;
}
.cta-words { display: flex; align-items: center; gap: .3rem; }
.cta-words .t { font-size: 1.9rem; font-weight: 900; line-height: 2.47rem; white-space: nowrap; }
.cta-words .box {
  background: #fff;
  border-radius: .3rem;
  padding: .2rem .9rem;
  color: var(--green);
  font-size: 2rem;
  font-weight: 900;
  line-height: 2.47rem;
  white-space: nowrap;
}
.cta-ic { width: 2.6rem; height: 2.6rem; }
.cta-ar { width: .8rem; height: 1.4rem; }
.cta-zero { position: absolute; left: -.7rem; top: -1.186rem; width: 5rem; height: 5.014rem; }
.cta-zero img { width: 100%; height: 100%; }
.cta-zero .z {
  position: absolute;
  left: 50%;
  top: 1.35rem;
  transform: translateX(-50%);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--green-dark);
  font-size: 1.9rem;
  line-height: 1.9rem;
  white-space: nowrap;
}
.cta-zero .z b { font-size: 2.9rem; font-weight: 800; }

/* ===== Q&Aリスト3種カード ===== */
.sec-qa { background: var(--bg-light); padding: .9rem 2rem 3.4rem; }
.qa-wrap { padding-top: 2.4rem; }
.qa-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: .6rem;
  padding: 2.4rem 1.9rem 1.6rem;
  text-align: center;
}
.qa-pill {
  position: absolute;
  left: 50%;
  top: -1.7rem;
  transform: translateX(-50%);
  background: linear-gradient(94deg, #008dcf 70.4%, #8bd9fe 100%);
  border-radius: 3rem;
  padding: .8rem 2rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.qa-h1 { font-size: 1.5rem; font-weight: 700; color: #2a2e33; line-height: 2.85rem; }
.qa-h1 .mk {
  font-size: 1.7rem;
  font-weight: 900;
  background: linear-gradient(to bottom, transparent 60%, var(--yellow) 60%);
  padding: 0 .2rem;
}
.qa-h1 .wo { font-size: 1.5rem; }
.qa-h2 { font-size: 1.8rem; font-weight: 700; color: var(--blue); line-height: 2.85rem; white-space: nowrap; }
.qa-h2 .num { font-size: 3.6rem; font-weight: 700; }
.qa-h2 .big { font-size: 2.6rem; font-weight: 700; }
.qa-list {
  display: flex;
  justify-content: center;
  gap: .6rem;
  padding-top: 1rem;
}
.qa-list li { width: 10.6rem; }
.qa-label {
  display: block;
  background: var(--blue);
  border-radius: .3rem .3rem 0 0;
  padding: .8rem 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2rem;
  white-space: nowrap;
}
.qa-list img { width: 10.6rem; height: 7rem; object-fit: cover; }
.qa-note { padding-top: 1rem; font-size: 1.4rem; font-weight: 700; color: var(--ink); line-height: 2.185rem; }
.qa-note .gr { color: var(--green); font-size: 1.5rem; }

/* ===== 完全無料CTAセクション ===== */
.sec-free { background: #fff; padding: 3rem 2rem; }
.sec-free2 { background: var(--bg-light); padding: 3.4rem 2rem; }
.sec-free .cta, .sec-free2 .cta { margin-top: 1rem; }
.sec-free2 .qa-wrap { margin-top: 1rem; padding-top: 2.4rem; }
.free-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .8rem;
}
.free-head .sl, .free-head .sr {
  width: .2rem;
  height: 3.3rem;
  background: var(--ink);
  border-radius: .1rem;
  margin-bottom: .3rem;
}
.free-head .sl { transform: rotate(-15deg); }
.free-head .sr { transform: rotate(15deg); }
.mk-free {
  display: inline-block;
  font-size: 3rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: .3rem;
  line-height: 4.37rem;
  transform: skewX(-3.8deg);
  background: linear-gradient(to bottom, transparent 60%, var(--yellow) 60%);
  padding: 0 .05rem;
}

/* ===== 見出し共通 ===== */
.eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .3rem;
  color: var(--blue);
  text-align: center;
  line-height: 1.25rem;
}
.h2 {
  padding-top: .8rem;
  font-size: 2.7rem;
  font-weight: 900;
  color: var(--ink);
  text-align: center;
  line-height: 4.185rem;
}

/* ===== こんな方に向いています ===== */
.sec-foryou { background: #fff; padding: 5.2rem 2rem 5.6rem; }
.fy-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 3rem;
}
.fy-list li {
  position: relative;
  min-height: 8.36rem;
  background: #fff;
  border: .2rem solid var(--blue);
  border-radius: 1rem;
  padding: 1.6rem 1.6rem 1.6rem 4.8rem;
  display: flex;
  align-items: center;
}
.fy-list p { font-size: 1.8rem; font-weight: 400; color: var(--ink); line-height: 1.6; }
.fy-list b { font-weight: 900; color: var(--blue); }
.check {
  position: absolute;
  left: 1.5rem;
  top: 2rem;
  width: 1.2rem;
  height: 1.9rem;
  border-right: .4rem solid var(--blue);
  border-bottom: .4rem solid var(--blue);
  transform: rotate(42deg);
}
.fy-note {
  margin-top: 2.2rem;
  border: 1px solid #dde0e2;
  border-radius: .6rem;
  padding: 1.6rem 1.7rem 1.5rem;
}
.fy-note-title { font-size: 1.6rem; font-weight: 900; color: var(--ink); text-align: center; line-height: 2.21rem; white-space: nowrap; margin: 0 -1rem; }
.fy-note-body { padding-top: .5rem; font-size: 1.5rem; font-weight: 500; color: var(--ink); line-height: 2.535rem; }

/* ===== FAQ ===== */
.sec-faq { background: var(--bg-light); padding: 5.2rem 2rem 5.6rem; }
.sec-faq .faq:first-of-type { margin-top: 3rem; }
.faq {
  background: #fff;
  border-radius: .6rem;
  overflow: hidden;
  margin-top: 1.2rem;
}
.faq summary {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.6rem 4.2rem 1.6rem 1.6rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.badge {
  flex-shrink: 0;
  margin-top: .2rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .4rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 2.6rem;
  color: #fff;
  text-align: center;
}
.badge.q { background: var(--blue); }
.badge.a { background: #4a5056; }
.q-text { font-size: 1.45rem; font-weight: 900; color: var(--ink); line-height: 2.5375rem; }
.chev {
  position: absolute;
  right: 1.9rem;
  top: 2.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-right: 2px solid #6e7479;
  border-bottom: 2px solid #6e7479;
  transform: rotate(45deg);
  transition: transform .25s;
}
.faq:not([open]) .chev { transform: rotate(-45deg); }
.faq-a {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0 1.6rem 1.6rem;
}
.faq-a .badge { margin-top: .2rem; }
.faq-a p { font-size: 1.35rem; font-weight: 500; color: var(--ink); line-height: 2.6325rem; }

/* ===== 最終CTA ===== */
.sec-final {
  position: relative;
  padding: 5.6rem 2rem 6rem;
  background: linear-gradient(91deg, #008dcf 28.8%, #8bd9fe 100%);
  overflow: hidden;
}
.final-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
  pointer-events: none;
}
.final-h {
  position: relative;
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 4.5rem;
}
.final-h .yl { color: var(--yellow); }
.final-sub {
  position: relative;
  padding-top: 1.4rem;
  font-size: 1.45rem;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  text-align: center;
  line-height: 2.9rem;
}
.sec-final .cta { margin-top: 1rem; }

/* ===== フッター ===== */
.footer { background: #fff; padding: 3rem 2rem 3.4rem; text-align: center; }
.f-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}
.f-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 1.84rem;
  color: #2a2e33;
  line-height: 3.5rem;
  letter-spacing: -.02em;
}
.f-name .no { color: var(--green-dark); font-size: 1.39rem; }
.f-logo img { width: 2.77rem; height: 2.5rem; }
.f-links {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  padding-top: 1.2rem;
}
.f-links a { font-size: 1.2rem; color: var(--grey); line-height: 2.28rem; }
.f-copy { padding-top: 1.2rem; font-size: 1.15rem; color: var(--grey); line-height: 2.185rem; }

/* ===== SP用 追従CTA =====
   本文のCTAが画面に入っている間は隠れる（同じボタンが二重に見えるのを防ぐ）*/
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  /* 上は¥0バッジ（ボタン上端から11.9px出る）を収める分だけ。
     下はブラウザのツールバーがすぐ下に来るので詰める（ホームバーがある時はenvが効く） */
  padding: 1.4rem 2rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -.4rem 2.4rem rgba(0, 45, 80, .18);
  transform: translateY(115%);
  visibility: hidden;
  transition: transform .38s cubic-bezier(.22, .9, .3, 1), visibility .38s;
}
.sticky-cta.is-visible {
  transform: none;
  visibility: visible;
}
.sticky-cta .cta { max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: visibility .01s; }
  .cta { animation: none; }
}

/* ===== PC（1024px〜）: ゼロプラス式 背景＋左カラム ===== */
.pc-bg, .pc-left { display: none; }

@media (min-width: 1024px) {
  body { background: #008dcf; }
  .sticky-cta { display: none; }   /* PCは左カラムに常時CTAがあるため不要 */
  .pc-bg {
    display: block;
    position: fixed;
    inset: 0;
    background: linear-gradient(100deg, #008dcf 8%, #2aa3dc 50%, #8bd9fe 96%);
    overflow: hidden;
    z-index: 0;
  }
  .swoosh {
    position: absolute;
    border-radius: 48px;
    background: rgba(255,255,255,.16);
    width: 420px;
    height: 250px;
    transform: rotate(-45deg);
  }
  .swoosh-1 { right: -60px; top: 30px; }
  .swoosh-2 { right: -190px; top: 130px; background: rgba(255,255,255,.12); }

  /* QRとCTAは1つの塊として縦中央に置く。
     vhで別々に配置すると、画面が縦に長い端末（タブレット縦など）で
     2つの間隔だけが広がって離れてしまう */
  .pc-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    position: fixed;
    left: 0;
    top: 0;
    width: 51vw;
    height: 100vh;
    padding-left: 7vw;     /* 左カラムの見た目の中心を29vwに寄せる */
    padding-bottom: 120px; /* 下のGOALイラストに重ならないよう場所を空ける */
    z-index: 1;
  }
  .pc-qr {
    position: static;
    width: 249px;
    height: 249px;
    border-radius: 14px;   /* Figmaの白カードの角丸 */
  }
  .pc-cta-wrap {
    position: static;
    width: 387px;
    max-width: calc(100% - 24px);
  }
  .pc-cta-wrap .cta { max-width: none; }
  .pc-goal {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 308px;
    height: auto;
  }

  .page {
    margin: 0 0 0 51vw;
    z-index: 2;
    box-shadow: 0 0 40px rgba(0,40,80,.25);
  }
}

/* ===== CTA上の申込カウント吹き出し（数字はJSが入れる） ===== */
.cta-count {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -86%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: #fff;
  border: .2rem solid var(--green);
  border-radius: 99rem;
  padding: 0 1.5rem .1rem;
  height: 2.7rem;
  color: var(--green-dark);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .03rem;
  z-index: 2;
}
.cta-count .num {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin: 0 .25rem;
  transform: translateY(-.05rem);
}
.cta-count[hidden] { display: none; }
/* 吹き出しのぶん上の余白を確保 */
.sec-free .cta, .sec-free2 .cta, .sec-final .cta { margin-top: 3rem; }
/* FVのみ: 吹き出しの上がロゴ画像なので、上に出さずボタン上端に半分乗せる */
.fv-cta .cta-top { visibility: hidden; }
.fv-cta .cta-count { transform: translate(-50%, -40%); }
/* PC左カラム: QRと吹き出しが詰まらないように */
@media (min-width: 1024px) {
  .pc-cta-wrap { margin-top: 16px; }
}