/* ============================================
   キャリアの余白｜サイトA 共通スタイルシート
   対象：ハブ・状態ページ・DIY記事・固定ページ
   ============================================ */

:root{
  --ink:#3a3436;
  --ink-soft:#6f6568;
  --ink-faint:#a39a9d;
  --line:#efe7e9;
  --bg:#ffffff;
  --bg-soft:#fbf7f8;
  --accent:#c9707f;
  --accent-deep:#b05a6a;
  --accent-pale:#f9edef;
  --marker:#fde8ec;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:2.0;
  letter-spacing:.02em;
  font-feature-settings:"palt";
}

/* ===== ヘッダー ===== */
.site-header{border-bottom:1px solid var(--line);background:#fff}
.site-header .inner{
  max-width:640px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.site-name{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.site-name span{color:var(--accent)}
.site-name svg{width:22px;height:22px}

/* ===== PR表記（記事ページ用・法的必須） ===== */
.pr-note{max-width:640px;margin:0 auto;padding:10px 20px 0;font-size:12px;color:var(--ink-faint)}

/* ===== 記事共通 ===== */
.article{max-width:640px;margin:0 auto;padding:40px 20px 64px}
.article h1{font-size:25px;font-weight:700;line-height:1.7;letter-spacing:.01em;margin-bottom:34px}
.article p{margin-bottom:1.9em}
.article a{color:var(--accent-deep);font-weight:700}
a.cta-btn,a.result-cta{color:#fff}
a.cta-btn:hover,a.result-cta:hover{color:#fff}
.article h2{
  font-size:20px;font-weight:700;line-height:1.7;
  margin:2.6em 0 1.1em;
  padding-left:14px;border-left:4px solid var(--accent-pale);
}
.article ul{margin:0 0 1.9em;padding-left:1.4em}
.article li{margin-bottom:.5em}

/* 著者情報（記事ページ用） */
.article-meta{
  display:flex;align-items:center;gap:10px;
  padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:36px;
  font-size:13px;color:var(--ink-soft);
}
.avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0}
.avatar svg{width:100%;height:100%;display:block}
.author-name{font-weight:500;color:var(--ink)}

/* 強調 */
.mk{font-weight:700;background:linear-gradient(transparent 62%,var(--marker) 62%)}
.huto{font-weight:700}

/* ひとこと締め */
.soft-note{
  margin:2.2em 0;padding:14px 18px;
  background:var(--bg-soft);border-radius:12px;
  color:var(--ink-soft);font-size:15px;
}

blockquote{
  margin:0 0 1.9em;padding:4px 0 4px 18px;
  border-left:3px solid var(--line);
  color:var(--ink-soft);
}

/* ===== CTAカード（状態ページ用） ===== */
.cta-card{
  border:1px solid var(--line);border-radius:16px;
  background:var(--bg-soft);
  padding:28px 24px;margin:2.6em 0;
  text-align:center;
}
.cta-card .cta-lead{font-size:15px;color:var(--ink-soft);margin-bottom:14px;line-height:1.9}
.cta-card .cta-lead b{color:var(--ink);font-weight:700}
.cta-btn{
  display:inline-block;width:100%;max-width:380px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-size:16px;font-weight:700;letter-spacing:.04em;
  padding:16px 24px;border-radius:999px;
  transition:background .15s ease;
}
.cta-btn:hover{background:var(--accent-deep)}
.cta-sub{font-size:12px;color:var(--ink-faint);margin-top:12px;line-height:1.7}

/* ===== チェックリスト（記事ページ用） ===== */
.checklist{list-style:none;padding:22px 24px;margin:0 0 1.9em;background:var(--bg-soft);border-radius:14px}
.checklist li{padding-left:1.7em;position:relative;margin-bottom:.7em}
.checklist li:last-child{margin-bottom:0}
.checklist li::before{content:"♡";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}

/* ===== 流れ・タイムライン（記事ページ用） ===== */
.steps{list-style:none;margin:0 0 1.9em;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:0 0 22px 52px}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;
  background:var(--accent-pale);color:var(--accent-deep);
  font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.steps li::after{content:"";position:absolute;left:16.5px;top:38px;bottom:2px;width:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps .step-title{font-weight:700;display:block;margin-bottom:2px}
.steps .step-body{font-size:15px;color:var(--ink-soft);line-height:1.9}

/* ===== 診断（ハブ用） ===== */
.quiz{
  border:1px solid var(--line);border-radius:16px;
  background:var(--bg-soft);
  padding:28px 24px;margin:2.4em 0;
}
.quiz-step{display:none}
.quiz-step.active{display:block}
.quiz-q{font-size:17px;font-weight:700;line-height:1.8;margin-bottom:18px}
.quiz-count{font-size:12px;color:var(--ink-faint);margin-bottom:8px;letter-spacing:.08em}
.quiz-btn{
  display:block;width:100%;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:14px 18px;margin-bottom:12px;
  font-size:15px;font-weight:500;color:var(--ink);
  text-align:left;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
  font-family:inherit;line-height:1.7;
}
.quiz-btn:hover{border-color:var(--accent);background:var(--accent-pale)}
.quiz-result{display:none;text-align:center}
.quiz-result.active{display:block}
.result-label{font-size:13px;color:var(--ink-faint);letter-spacing:.1em;margin-bottom:6px}
.result-type{font-size:24px;font-weight:700;color:var(--accent-deep);margin-bottom:14px}
.result-desc{font-size:15px;color:var(--ink-soft);line-height:1.9;margin-bottom:20px;text-align:left}
.result-cta{
  display:inline-block;width:100%;max-width:380px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-size:16px;font-weight:700;letter-spacing:.04em;
  padding:16px 24px;border-radius:999px;
  transition:background .15s ease;
}
.result-cta:hover{background:var(--accent-deep)}
.quiz-retry{
  display:inline-block;margin-top:14px;
  font-size:13px;color:var(--ink-faint);
  background:none;border:none;cursor:pointer;text-decoration:underline;
  font-family:inherit;
}

/* ===== 逃げ道（ハブ用） ===== */
.alt-path{
  margin:2.4em 0 0;padding:20px 22px;
  border:1px dashed var(--line);border-radius:14px;
  font-size:15px;color:var(--ink-soft);line-height:1.9;
}
.alt-path a{color:var(--accent-deep);font-weight:700}

/* ===== フッター ===== */
.site-footer{border-top:1px solid var(--line);padding:32px 20px 48px}
.site-footer .inner{max-width:640px;margin:0 auto;font-size:12px;color:var(--ink-faint);line-height:2}
.site-footer a{color:var(--ink-faint)}

/* ===== 追従CTA（状態ページ・モバイル用） ===== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none;
}
.sticky-cta a{
  display:block;text-align:center;
  background:var(--accent);color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;
  padding:13px;border-radius:999px;
}

/* ===== レスポンシブ ===== */
@media (max-width:680px){
  .article h1{font-size:21px}
  .article h2{font-size:18px}
  body.show-sticky .sticky-cta{display:block}
  body.show-sticky .site-footer{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
}