/* 掲載のご案内 /keisai/ だけで読む（keisai.mjs）。faclog の掲載ページの構成を、退職ナビのロゴの青で組んだもの。
   スマホが基準で、768px・1024px で PC の並びに広げる。文字の途中で折り返さないよう、行の単位は <span> で区切って inline-block にしている */
/* 色の変数はヘッダー（.kp の外）でも使うので両方に置く */
.kp, .kp-head {
  --kp-main:#0a8fd8; --kp-deep:#0b5f99; --kp-navy:#0b2e4a; --kp-band:#1b84c4; --kp-soft:#e8f4fb; --kp-gray:#f5f7f9;
  --kp-or:#c2410c; --kp-or-dark:#8a2e08; --kp-ul:#f59e0b; --kp-gold:#8a6a1c;
}
.kp { color:var(--kp-navy); overflow:hidden }
/* 本文の a に付く共通の高さを外す。:where で詳細度を下げ、.kp-cta などボタン側の指定が勝つようにする */
.kp :where(a) { min-height:0; padding-block:0 }
.kp img { max-width:100%; height:auto }
.kp-in { max-width:1080px; margin-inline:auto; padding-inline:16px }
.kp-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.kp section { margin-block:0; padding-block:56px }
.kp-gray { background:var(--kp-gray) }
.kp-ico { width:1.25em; height:1.25em; flex:none }
.kp-note { margin:10px 0 0; font-size:13px; color:#475569 }
.kp-c { text-align:center }
/* 行の単位。<span> ごとに折り返し、語の途中では切らない */
.kp-hero-lead > span, .kp-h2 > span, .kp-kadai-list p > span, .kp-sol-big > span, .kp-ts-list h3 > span, .kp-conclude > span,
.kp-bub > span, .kp-num-msg > span, .kp-st-t > span { display:inline-block }

/* ---- ヘッダー（このページだけ。faclog と同じく ロゴ＋2つのボタン） ---- */
.kp-head { position:sticky; top:0; z-index:30; background:#fff; box-shadow:0 2px 10px rgba(10,60,90,.10) }
.kp-head-row { max-width:1080px; margin-inline:auto; padding:8px 16px; display:flex; align-items:center; gap:12px; min-height:60px }
.kp-brand { display:flex; align-items:center; min-height:44px; min-width:44px; flex:none }
.kp-brand img { width:132px; height:auto }
.kp-head-btns { margin-left:auto; display:flex; gap:10px }
.kp-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px; border-radius:6px; color:#fff; font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; letter-spacing:.04em }
.kp-btn:hover { text-decoration:none; filter:brightness(1.06) }
.kp-btn-sub { display:none; background:var(--kp-deep); box-shadow:0 3px 0 #073e64 }
.kp-btn-main { background:var(--kp-or); box-shadow:0 3px 0 var(--kp-or-dark) }
@media (min-width:768px) {
  .kp-brand img { width:160px }
  .kp-btn-sub { display:inline-flex }
  .kp-btn { padding:0 20px; min-width:180px }
}
/* 360px 未満は .kp-wide（ヘッダーの「掲載の」・ヒーローの「はこちら」）を落とす。ヘッダーはロゴと並べると 1px あふれ、ヒーローは「は／こちら」で折れた */
@media (max-width:359px) { .kp-btn { padding:0 12px } .kp-brand img { width:112px } .kp-wide { display:none } }

/* ---- 見出し（中央・下に短い線） ---- */
.kp-h2 { margin:0 0 32px; text-align:center; font-size:clamp(22px, 5.6vw, 32px); line-height:1.5; font-weight:700; letter-spacing:.06em; color:var(--kp-navy) }
.kp-h2::after { content:""; display:block; width:36px; height:3px; margin:14px auto 0; background:var(--kp-main); border-radius:2px }
.kp-h2-w { color:#fff }
.kp-h2-w::after { background:#fff }
.kp-ul { background:linear-gradient(transparent 82%, var(--kp-ul) 82%, var(--kp-ul) 96%, transparent 96%); padding-inline:2px }

/* ---- ヒーロー ---- */
.kp-hero { position:relative; background:
  radial-gradient(circle, rgba(10,143,216,.35) 2.5px, transparent 3px) right 4% top 24px / 22px 22px no-repeat,
  linear-gradient(115deg, #fff 0 52%, #dff0fa 52% 74%, #cbe8f7 74%) }
.kp-hero::before { content:""; position:absolute; right:0; top:0; width:min(30vw,300px); height:min(30vw,300px); background-image:radial-gradient(circle, rgba(10,143,216,.30) 2.4px, transparent 2.8px); background-size:20px 20px; -webkit-mask:linear-gradient(225deg, #000 30%, transparent 70%); mask:linear-gradient(225deg, #000 30%, transparent 70%); pointer-events:none }
.kp-hero-grid { position:relative; display:grid; gap:24px; align-items:center }
.kp-hero-lead { margin:0; font-size:clamp(18px, 4.8vw, 24px); font-weight:700; line-height:1.6; letter-spacing:.04em }
.kp-hero-h1 { margin:12px 0 18px; line-height:1 }
.kp-hero-h1 img { width:min(100%, 420px) }
.kp-medals { list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; max-width:430px }
.kp-medals li { display:flex; flex-direction:column; justify-content:flex-end; text-align:center; color:var(--kp-gold) }
/* 見出しは語の単位で折る（320px で「掲載料・月額費用」が1行に入らない）。数字は下で揃う */
.kp-ml { display:block; font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.02em }
.kp-ml > span { display:inline-block }
.kp-mv { display:flex; align-items:center; justify-content:center; gap:2px; margin-top:4px; line-height:1 }
.kp-mv b { font-size:clamp(30px, 9vw, 44px); font-weight:700; letter-spacing:-.02em; font-family:"Noto Sans JP",sans-serif }
.kp-mv small { font-size:13px; font-weight:700; align-self:flex-end; margin-bottom:5px }
.kp-laurel { width:14px; height:40px; color:#b4953e; flex:none }
.kp-mv .kp-laurel:last-child { transform:scaleX(-1) }
.kp-cta { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:430px; min-height:60px; padding:12px 16px; border-radius:6px; background:var(--kp-or); box-shadow:0 5px 0 var(--kp-or-dark); color:#fff; font-size:clamp(16px, 4.4vw, 20px); font-weight:700; letter-spacing:.04em; text-decoration:none }
.kp-cta:hover { text-decoration:none; filter:brightness(1.06) }
.kp-hero-img img { width:100%; max-width:620px; margin-inline:auto }
@media (min-width:1024px) {
  .kp-hero { padding-block:48px 56px }
  .kp-hero-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:32px }
  .kp-laurel { width:16px; height:46px }
}

/* ---- 課題（青の帯）＋下向きの三角 ---- */
.kp .kp-kadai { background:var(--kp-band); padding-bottom:40px }
.kp-kadai-list { list-style:none; margin:0; padding:0; display:grid; gap:16px }
.kp-kadai-list li { background:#fff; border-radius:6px; padding:16px 16px 22px; text-align:center; box-shadow:0 4px 14px rgba(5,40,70,.12) }
.kp-kadai-list img { width:min(100%, 240px); margin:0 auto 6px }
.kp-kadai-list p { margin:0; font-weight:700; font-size:16px; line-height:1.6 }
.kp-v { height:56px; background:var(--kp-band); clip-path:polygon(0 0, 100% 0, 100% 0, 50% 100%, 0 0) }
@media (min-width:768px) {
  .kp-kadai-list { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px }
  .kp-v { height:80px }
}

/* ---- 解決の一文 ---- */
.kp .kp-sol { padding-block:32px 56px; text-align:center }
.kp-sol-lead { margin:0 0 10px; font-size:clamp(15px, 4vw, 18px); font-weight:700 }
.kp-sol-big { margin:0; font-size:clamp(24px, 6.6vw, 40px); font-weight:700; line-height:1.6; letter-spacing:.02em }
.kp-sol-big .kp-sl { margin-inline:.2em }
.kp-sol-big .kp-sm { font-size:.6em; margin-inline:.2em }

/* ---- 理由3つ ---- */
.kp-riyu-list { list-style:none; margin:0 auto; padding:0; display:grid; gap:20px; max-width:880px }
.kp-riyu-list li { background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 4px 14px rgba(5,40,70,.08); text-align:center; padding-bottom:24px }
.kp-no { margin:0; background:var(--kp-band); color:#fff; font-size:28px; font-weight:700; line-height:1; padding:12px 0 }
.kp-riyu-list img { width:min(70%, 220px); margin:16px auto 8px }
.kp-riyu-list h3 { margin:0 16px 10px; color:var(--kp-deep); font-size:19px; line-height:1.5 }
.kp-riyu-list p:not(.kp-no) { margin:0 20px; font-size:15px; text-align:left }
@media (min-width:768px) { .kp-riyu-list { grid-template-columns:repeat(3, minmax(0, 1fr)) } .kp-riyu-list h3 { font-size:18px } }

/* ---- 検索語 ---- */
.kp-kw-boxes { display:grid; gap:12px; max-width:620px; margin-inline:auto }
.kp-kw-boxes ul { list-style:none; margin:0; padding:14px 20px; border:1px solid var(--kp-main); border-radius:6px; background:#f7fbfe }
.kp-kw-boxes li + li { border-top:1px dashed #cfe3f0 }
.kp-kw-boxes a { display:flex; align-items:center; min-height:44px; color:var(--kp-navy); font-weight:500; text-decoration:none }
.kp-kw-boxes a::before { content:""; width:6px; height:6px; margin-right:10px; border-top:2px solid var(--kp-main); border-right:2px solid var(--kp-main); transform:rotate(45deg); flex:none }
.kp-kw-boxes a:hover { color:var(--kp-deep); text-decoration:underline }
@media (min-width:768px) { .kp-kw-boxes { grid-template-columns:1fr 1fr } }

/* ---- 強み（丸い白の中にイラスト） ---- */
.kp .kp-tsuyomi { background:var(--kp-soft) }
.kp-ts-list { list-style:none; margin:0; padding:0; display:grid; gap:36px; text-align:center }
.kp-circle { width:220px; height:220px; margin:0 auto 16px; border-radius:50%; background:#fff; display:grid; place-items:center; overflow:hidden }
.kp-circle img { width:78% }
.kp-ts-list h3 { margin:0 0 10px; color:var(--kp-deep); font-size:20px; line-height:1.5 }
.kp-ts-list p { margin:0 auto; max-width:300px; font-size:15px; text-align:left }
@media (min-width:768px) { .kp-ts-list { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px } .kp-circle { width:200px; height:200px } }
@media (min-width:1024px) { .kp-circle { width:230px; height:230px } }

/* ---- ビッグ／ミドル／スモールの図 ----
   スマホ: 3段のカード（各段に「検索回数・申し込み率」の札）。768px から faclog と同じ三角の図にする */
.kp-tail-fig { margin:0 auto; max-width:840px }
.kp-tail-y, .kp-tail-x, .kp-tail-tri, .kp-tail-band { display:none }
.kp-tail-cols { display:grid; gap:12px }
.kp-tc { border-radius:6px; overflow:hidden; background:#fff; border:1px solid #d6e8f3 }
.kp-tc-h { margin:0; padding:10px 16px; font-weight:700; font-size:18px; letter-spacing:.08em; color:#fff }
.kp-tc1 .kp-tc-h { background:#bfe5f6; color:var(--kp-navy) }
.kp-tc2 .kp-tc-h { background:var(--kp-band) }
.kp-tc3 .kp-tc-h { background:var(--kp-deep) }
.kp-tc ul { list-style:none; margin:0; padding:12px 16px 4px }
.kp-tc li { font-size:15px; padding:2px 0 }
.kp-tc-m { margin:0; padding:4px 16px 14px; display:flex; flex-wrap:wrap; gap:6px }
.kp-tc-m span { display:inline-block; padding:2px 10px; border-radius:999px; background:var(--kp-soft); font-size:13px; font-weight:700; color:var(--kp-deep) }
.kp-tc3 .kp-tc-m span:last-child { background:#fff1e6; color:var(--kp-or) }
@media (min-width:768px) {
  .kp-tail-fig { display:grid; grid-template-columns:44px minmax(0, 1fr); grid-template-rows:auto auto; gap:10px 8px }
  .kp-tail-y { display:flex; flex-direction:column; align-items:center; justify-content:space-between; margin-top:52px; padding:24px 0; border-radius:4px; background:linear-gradient(#d6e8f1, #e9f2f7); clip-path:polygon(50% 0, 100% 18px, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px), 0 18px); font-weight:700; color:var(--kp-navy) }
  .kp-tail-y span { writing-mode:vertical-rl; font-size:16px }
  .kp-tail-y b { writing-mode:vertical-rl; background:#fff; padding:8px 4px; font-size:14px; letter-spacing:.2em }
  .kp-tail-main { position:relative }
  .kp-tail-cols { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 }
  .kp-tc { position:relative; z-index:1; border:0; border-radius:0; background:transparent; border-left:1px dashed #9cc3d9 }
  .kp-tc1 { border-left:0 }
  .kp-tc-h { text-align:center; font-size:20px; padding:12px 8px; height:52px; white-space:nowrap }
  .kp-tc ul { height:300px; padding:28px 12px 0 18%; }
  .kp-tc1 ul { padding-left:22% }
  .kp-tc li { padding:4px 0; font-size:15px; white-space:nowrap }
  .kp-tc-m { display:none }
  .kp-tail-tri { display:block; position:absolute; left:0; right:0; top:52px; bottom:0; background:linear-gradient(90deg, #bfe5f6 0 33.33%, var(--kp-band) 33.33% 66.66%, var(--kp-deep) 66.66%); clip-path:polygon(0 0, 100% 100%, 0 100%) }
  .kp-tail-band { display:flex; align-items:center; justify-content:center; position:absolute; z-index:2; left:33.33%; right:0; top:calc(52px + 300px * .58); height:40px; margin:0; background:rgba(245,158,11,.92); color:#3d2600; font-weight:700; letter-spacing:.08em }
  .kp-tail-x { grid-column:2; display:flex; align-items:center; justify-content:space-between; padding:0 30px; min-height:46px; background:linear-gradient(90deg, #e3eef4, #c8e0ec); clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%); font-weight:700 }
  .kp-tail-x b { background:#fff; padding:4px 12px; font-size:14px }
  .kp-tail-x span:last-child { font-size:20px }
}
@media (min-width:1024px) { .kp-tc li { font-size:16px } }
.kp-arrow { width:150px; height:56px; margin:32px auto 12px; background:linear-gradient(#bfe5f6, var(--kp-band)); clip-path:polygon(0 0, 100% 0, 50% 100%) }
.kp-conclude { margin:0; text-align:center; font-size:clamp(20px, 5.4vw, 30px); font-weight:700; line-height:1.6; letter-spacing:.04em }

/* ---- 数字（ノートPCの周りに吹き出しの丸） ---- */
/* スマホは縦1列（PC・帯3本・チーム）。丸の中に3行は 320px で収まらないので、帯にして横に読ませる */
.kp-num-stage { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:880px; margin-inline:auto }
.kp-laptop { order:-1; width:min(86%, 360px); margin-bottom:8px }
.kp-screen { aspect-ratio:16 / 10; border:10px solid #1b2430; border-radius:12px 12px 0 0; background:#fff; display:grid; place-items:center }
.kp-screen img { width:62% }
.kp-base { height:14px; margin-inline:-7%; border-radius:0 0 12px 12px; background:linear-gradient(#c9d2da, #9aa6b1) }
.kp-bub { position:relative; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; column-gap:.4em; width:100%; max-width:400px; margin:0; padding:12px 20px; border-radius:999px; background:var(--kp-band); color:#fff; font-weight:700; font-size:15px; line-height:1.5; text-align:center }
.kp-bub b { font-size:1.9em; line-height:1.1; margin-inline:2px }
.kp-team { width:min(100%, 360px) }
.kp-num-msg { margin:8px 0 0; color:var(--kp-deep); font-size:clamp(18px, 5vw, 26px); font-weight:700; line-height:1.6; text-align:center }
@media (min-width:768px) {
  .kp-num-stage { display:grid; grid-template-columns:200px minmax(0, 1fr) 200px; grid-template-rows:auto auto; gap:16px 20px; justify-items:center; align-items:center }
  .kp-laptop { order:0; margin-bottom:0; grid-column:2; grid-row:1 / span 2; width:100%; max-width:380px }
  .kp-bub { flex-direction:column; align-items:center; width:190px; aspect-ratio:1; padding:0; border-radius:50%; font-size:16px }
  .kp-bub b { font-size:2.1em }
  .kp-team { width:100% }
  .kp-bub::after { content:""; position:absolute; bottom:12px; width:22px; height:22px; background:inherit; clip-path:polygon(0 0, 100% 0, 50% 100%) }
  .kp-bub1 { grid-column:1; grid-row:1 } .kp-bub1::after { right:6px; transform:rotate(-40deg) }
  .kp-bub2 { grid-column:3; grid-row:1 } .kp-bub2::after { left:6px; transform:rotate(40deg) }
  .kp-bub3 { grid-column:3; grid-row:2 } .kp-bub3::after { left:6px; top:12px; bottom:auto; transform:rotate(140deg) }
  .kp-team { grid-column:1; grid-row:2 }
  .kp-num-msg { grid-column:1 / -1; grid-row:3 }
}

/* ---- 流れ（PC は右向きの矢羽根4つ・スマホは縦に4段） ---- */
.kp-steps { list-style:none; margin:0 auto; padding:0; display:grid; gap:10px; max-width:900px }
.kp-st { display:grid; grid-template-columns:minmax(0, 1fr) 112px; align-items:center; position:relative }
.kp-st-band { padding:16px 18px 26px; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px)); grid-column:1 / -1; grid-row:1 }
.kp-st img { grid-column:2; grid-row:1; width:104px; align-self:center; margin-bottom:10px; position:relative }
.kp-st-no { margin:0; font-weight:700; letter-spacing:.06em; font-size:15px }
.kp-st-t { margin:2px 0 0; font-size:19px; font-weight:700; line-height:1.45; padding-right:110px }
.kp-st1 .kp-st-band { background:#d9edf6; color:var(--kp-navy) } .kp-st1 .kp-st-no { color:var(--kp-deep) }
.kp-st2 .kp-st-band { background:#b4ddef; color:var(--kp-navy) } .kp-st2 .kp-st-no { color:var(--kp-deep) }
.kp-st3 .kp-st-band { background:#2f8fc4; color:#fff }
.kp-st4 .kp-st-band { background:var(--kp-deep); color:#fff }
@media (min-width:768px) {
  .kp-steps { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 }
  .kp-st { display:block; text-align:center }
  .kp-st-band { height:190px; padding:28px 28px 0 36px; clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%); margin-right:-14px }
  .kp-st1 .kp-st-band { clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); padding-left:16px }
  .kp-st4 .kp-st-band { margin-right:0 }
  .kp-st-t { padding-right:0; font-size:18px }
  .kp-st img { width:150px; margin:-70px auto 0 }
}
@media (min-width:1024px) { .kp-st-t { font-size:20px } .kp-st img { width:170px; margin-top:-80px } }

/* ---- よくあるご質問（青の帯に白いカード） ---- */
.kp .kp-faq { background:var(--kp-band) }
.kp-faq-list { margin:0 auto; max-width:880px; display:grid; gap:16px }
.kp-faq-list > div { background:#fff; padding:18px 20px }
.kp-faq-list dt, .kp-faq-list dd { display:flex; gap:12px; margin:0; align-items:baseline }
.kp-faq-list dt { font-weight:700; margin-bottom:10px }
.kp-faq-list b { flex:none; width:22px; color:var(--kp-main); font-size:24px; line-height:1; font-weight:700 }
.kp-faq-list dd b { color:var(--kp-deep) }
.kp-faq-list span { font-size:15px }

/* ---- お問い合わせ ---- */
.kp-form-in { max-width:820px }
.kp-form-lead { margin:-8px 0 24px; text-align:center; font-size:14px; color:#475569 }
.kp-grid { display:grid; gap:16px }
.kp-f { display:block; margin:0; padding:0; border:0; min-width:0 }
.kp-fl { display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:14px; font-weight:700; padding:0 }
.kp-req, .kp-opt { font-size:11px; font-style:normal; font-weight:700; padding:1px 6px; border-radius:3px }
.kp-req { background:var(--kp-or); color:#fff }
.kp-opt { background:#e2e8f0; color:#475569 }
.kp-f input, .kp-f select, .kp-f textarea { width:100%; min-height:46px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:4px; background:#f5f8fb; font-size:16px }
.kp-f textarea { min-height:120px; resize:vertical }
.kp-f input:focus, .kp-f select:focus, .kp-f textarea:focus { outline:3px solid rgba(10,143,216,.35); border-color:var(--kp-main); background:#fff }
.kp-radios { display:grid; gap:2px }
.kp-r { display:flex; align-items:center; gap:8px; min-height:40px; font-size:15px; cursor:pointer }
.kp-r input { width:20px; height:20px; margin:0; accent-color:var(--kp-deep) }
.kp-hp { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.kp-hp label, .kp-hp input { display:block; width:1px; height:1px; padding:0; border:0 }
.kp-agree { display:flex; align-items:center; gap:10px; margin:24px 0 18px; min-height:44px; font-size:15px; cursor:pointer }
.kp-agree a { display:inline-block; padding-block:9px; margin-block:-9px }   /* 文中のリンクのまま、押せる高さを 44px に */
.kp-agree input { width:22px; height:22px; margin:0; accent-color:var(--kp-deep); flex:none }
.kp-submit { display:block; width:100%; max-width:320px; min-height:54px; border:0; border-radius:6px; background:var(--kp-or); box-shadow:0 4px 0 var(--kp-or-dark); color:#fff; font-size:18px; font-weight:700; letter-spacing:.1em; cursor:pointer }
.kp-submit:disabled { opacity:.6; cursor:wait }
.kp-status { min-height:1.7em; margin:16px 0 0; font-weight:700; color:var(--kp-deep) }
.kp-mail { margin:24px 0 0; padding-top:16px; border-top:1px solid #e2e8f0; font-size:14px; overflow-wrap:anywhere }
@media (min-width:768px) {
  .kp-grid { grid-template-columns:1fr 1fr; gap:18px 28px }
  .kp-full { grid-column:1 / -1 }
}
@media (min-width:1024px) { .kp section { padding-block:80px } .kp .kp-sol { padding-block:40px 72px } .kp .kp-kadai { padding-bottom:48px } }