@charset "UTF-8";
/* ============================================================
   副業FXの教科書（会社員のための）— job.fxonecareer.com
   デザイン系統：紺×白のビジネスコラム型 / 2カラム（本文＋右サイド）
   フォント：Noto Sans JP のみ（明朝なし）
   anti-AI-slop：グラデ/角丸ピル/blur sticky/hover浮き/紫青グラデ なし
   ============================================================ */

:root{
  --paper:#ffffff;
  --paper-soft:#f6f7f9;     /* ごく薄いグレー地 */
  --paper-line:#eceff3;
  --navy:#1f3a5f;           /* 濃紺：見出し・文字 */
  --navy-deep:#162b46;      /* さらに濃い紺：ヘッダー・強調 */
  --navy-soft:#3c577a;      /* 紺の中間 */
  --ink:#22303f;            /* 本文 */
  --ink-soft:#5b6b7c;       /* 補助テキスト */
  --rule:#d8dee6;           /* 罫線 */
  --accent:#1f3a5f;         /* アクセント＝紺（単色） */
  --accent-bg:#eef2f7;      /* 紺の淡い面 */
  --max:1080px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--paper-soft);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.01em;
}
a{color:var(--navy);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;}

/* ---------- ヘッダー（不透明・罫線で締める。blur/sticky半透明なし） ---------- */
.site-head{
  background:var(--navy-deep);
  color:#fff;
  border-bottom:3px solid var(--navy);
}
.site-head .inner{
  max-width:var(--max);margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.brand{
  color:#fff;display:flex;flex-direction:column;line-height:1.25;text-decoration:none;
}
.brand .name{font-weight:700;font-size:19px;letter-spacing:.02em;}
.brand small{font-weight:400;font-size:11px;color:#aebfd3;letter-spacing:.14em;margin-top:2px;}
.nav{display:flex;gap:20px;}
.nav a{color:#cdd9e8;font-size:13.5px;font-weight:500;}
.nav a:hover{color:#fff;text-decoration:none;border-bottom:1px solid #cdd9e8;}

/* ---------- 全体ラップ ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:30px 22px 60px;}

/* パンくず */
.crumb{font-size:12.5px;color:var(--ink-soft);margin:0 0 22px;}
.crumb a{color:var(--navy-soft);}

/* ---------- 2カラムレイアウト ---------- */
.layout{display:grid;grid-template-columns:1fr 282px;gap:42px;align-items:start;}
.sidebar{position:sticky;top:22px;}

/* ---------- 記事本体 ---------- */
.post{background:var(--paper);border:1px solid var(--rule);padding:38px 42px 44px;}
.post h1{
  font-size:27px;font-weight:700;line-height:1.5;color:var(--navy-deep);
  margin:0 0 14px;letter-spacing:.005em;
}
.post-meta{
  font-size:12.5px;color:var(--ink-soft);border-bottom:1px solid var(--rule);
  padding-bottom:16px;margin-bottom:26px;
}
.post-meta .author{color:var(--navy);font-weight:500;}
.post p{margin:0 0 17px;}
.post strong{color:var(--navy-deep);font-weight:700;}

/* H2：小さな番号バッジ付き */
.post h2{
  font-size:21px;font-weight:700;color:var(--navy-deep);
  margin:40px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--navy);
  display:flex;align-items:center;gap:12px;line-height:1.45;
}
.post h2 .badge{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;background:var(--navy);color:#fff;
  font-size:13px;font-weight:700;border-radius:3px;letter-spacing:0;
}
.post h3{
  font-size:17px;font-weight:700;color:var(--navy);
  margin:26px 0 10px;padding-left:12px;border-left:4px solid var(--navy-soft);
}

.post ul,.post ol{margin:0 0 18px;padding-left:1.4em;}
.post li{margin:0 0 9px;}

/* 表 */
.tbl{
  width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:14.5px;
  border:1px solid var(--rule);
}
.tbl th,.tbl td{border:1px solid var(--rule);padding:11px 13px;text-align:left;vertical-align:top;}
.tbl th{background:var(--accent-bg);color:var(--navy-deep);font-weight:700;white-space:nowrap;}
.tbl tr:nth-child(even) td{background:var(--paper-soft);}

/* 解説 / 体験ノート ボックス */
.note{
  background:var(--paper-soft);border:1px solid var(--rule);border-left:4px solid var(--navy);
  padding:16px 20px;margin:24px 0;font-size:14.5px;color:var(--ink);
}
.note .label{
  display:block;font-size:12px;font-weight:700;color:var(--navy);
  letter-spacing:.08em;margin-bottom:7px;
}

/* CTA + asp-placeholder */
.cta{
  border:1px solid var(--navy);background:var(--accent-bg);
  padding:22px 24px;margin:30px 0;
}
.cta .ttl{font-size:16px;font-weight:700;color:var(--navy-deep);margin:0 0 8px;}
.cta p{margin:0 0 10px;font-size:14.5px;}
.asp-placeholder{
  margin-top:12px;border:1px dashed var(--navy-soft);background:var(--paper);
  color:var(--ink-soft);font-size:13px;text-align:center;padding:16px 12px;letter-spacing:.02em;
}

/* 内部リンク帯 */
.inlink{margin:26px 0;padding:14px 18px;border:1px solid var(--rule);background:var(--paper);font-size:14px;}
.inlink b{display:block;font-size:12px;color:var(--navy-soft);font-weight:700;margin-bottom:4px;letter-spacing:.06em;}

/* 著者カード */
.author-card{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--rule);background:var(--paper-soft);
  padding:18px 20px;margin:34px 0 20px;
}
.author-card .av{
  flex:0 0 auto;width:52px;height:52px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
}
.author-card .nm{font-weight:700;color:var(--navy-deep);font-size:15px;margin-bottom:4px;}
.author-card .bio{font-size:13px;color:var(--ink-soft);line-height:1.7;}

/* 免責 */
.disclaimer{
  font-size:11.5px;color:var(--ink-soft);line-height:1.75;
  border-top:1px solid var(--rule);padding-top:16px;margin-top:30px;
}

/* ---------- サイドバー（目次 / 関連） ---------- */
.side-box{background:var(--paper);border:1px solid var(--rule);padding:18px 20px;margin-bottom:20px;}
.side-box .side-h{
  font-size:13px;font-weight:700;color:var(--navy-deep);letter-spacing:.06em;
  border-bottom:2px solid var(--navy);padding-bottom:8px;margin:0 0 12px;
}
.toc{list-style:none;margin:0;padding:0;counter-reset:toc;}
.toc li{counter-increment:toc;margin:0 0 9px;font-size:13.5px;line-height:1.5;padding-left:26px;position:relative;}
.toc li::before{
  content:counter(toc);position:absolute;left:0;top:1px;
  width:19px;height:19px;background:var(--accent-bg);color:var(--navy);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:2px;
}
.toc a{color:var(--ink);}
.toc a:hover{color:var(--navy);}
.side-rel{list-style:none;margin:0;padding:0;}
.side-rel li{margin:0 0 11px;font-size:13px;line-height:1.5;border-bottom:1px solid var(--paper-line);padding-bottom:11px;}
.side-rel li:last-child{border-bottom:0;padding-bottom:0;}

/* ---------- トップ：ヒーロー ---------- */
.hero{background:var(--navy-deep);color:#fff;padding:42px 40px 38px;border:1px solid var(--navy-deep);}
.hero .eyebrow{font-size:12px;letter-spacing:.18em;color:#9fb4cd;margin:0 0 12px;font-weight:500;}
.hero h1{font-size:28px;font-weight:700;line-height:1.55;margin:0 0 16px;color:#fff;letter-spacing:.01em;}
.hero .lead{font-size:15px;color:#d4def0;line-height:1.9;margin:0;max-width:640px;}

/* トップ：記事一覧（見出し＋1行要約の縦並びリスト） */
.sec-h{
  font-size:18px;font-weight:700;color:var(--navy-deep);
  margin:40px 0 4px;padding-bottom:10px;border-bottom:2px solid var(--navy);
}
.sec-sub{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;}
.guide-list{list-style:none;margin:0;padding:0;}
.guide-list li{
  background:var(--paper);border:1px solid var(--rule);
  padding:16px 20px;margin:0 0 12px;display:flex;gap:16px;align-items:flex-start;
}
.guide-list .num{
  flex:0 0 auto;width:26px;height:26px;background:var(--navy);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:3px;margin-top:2px;
}
.guide-list .ttl{font-size:16px;font-weight:700;color:var(--navy-deep);line-height:1.5;display:block;}
.guide-list .ttl:hover{text-decoration:underline;}
.guide-list .sum{font-size:13.5px;color:var(--ink-soft);line-height:1.7;margin:5px 0 0;}
.guide-list .tag{font-size:11.5px;color:var(--navy-soft);margin-top:6px;display:block;letter-spacing:.03em;}

/* 固定ページのフォーム */
.form label{display:block;font-weight:500;font-size:13.5px;margin:18px 0 6px;color:var(--navy-deep);}
.form input,.form textarea{
  width:100%;padding:11px 12px;border:1px solid var(--rule);background:var(--paper-soft);
  font-family:inherit;font-size:15px;color:var(--ink);
}
.form textarea{min-height:150px;resize:vertical;}
.form button{
  margin-top:22px;padding:12px 30px;background:var(--navy);color:#fff;border:0;
  cursor:pointer;font-size:15px;font-family:inherit;letter-spacing:.04em;font-weight:500;
}
.form button:hover{background:var(--navy-deep);}

/* ---------- フッター ---------- */
.site-foot{background:var(--navy-deep);color:#aebfd3;border-top:3px solid var(--navy);margin-top:40px;}
.site-foot .inner{max-width:var(--max);margin:0 auto;padding:26px 22px;text-align:center;}
.site-foot nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.site-foot nav a{color:#cdd9e8;font-size:13px;}
.site-foot nav a:hover{color:#fff;}
.site-foot p{font-size:12px;color:#7e90a6;}

/* ---------- レスポンシブ：1カラムへ ---------- */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;gap:0;}
  .sidebar{position:static;margin-top:28px;}
  .post{padding:26px 20px 32px;}
  .hero{padding:30px 22px 28px;}
  .hero h1{font-size:22px;}
  .post h1{font-size:22px;}
}