/* mamacareers.com — ママのおうちFX
   archetype: 「やさしいクリーン会話型」シングルカラム
   palette: クリーム/オフホワイト地 × やわらかチャコール文字 × スモーキーピンク(くすみコーラル)1色アクセント
   ※touishin(テラコッタ #d2694a / 色相~13°)とは色相をずらす → こちらは rose/dusty-pink 色相~350°・軽量・余白多め・会話調
   fonts: Noto Sans JP のみ（明朝禁止・やわらかいゴシック）
   anti-slop: グラデ無し / 角丸ピル過度無し / blur固定ヘッダー無し / hover浮き無し / パステル全面塗り無し
   やわらかさは「余白」と「細罫」で出す */

:root {
  --paper:   #fdfaf6;   /* クリーム地 */
  --paper-2: #f7f1ea;   /* 一段やわらかいオフホワイト */
  --ink:     #3f3a3b;   /* やわらかいチャコール */
  --ink-soft:#7c7375;   /* 弱いチャコール */
  --ink-faint:#a89fa1;
  --accent:  #c97b86;   /* スモーキーピンク／くすみコーラル（色相~350°） */
  --accent-deep:#a85d6b;/* 一段深いローズ */
  --accent-wash:#f4e7e7;/* ごく薄いローズ（罫・帯用・全面塗りはしない） */
  --rule:    #ece2d9;   /* 細罫 */
  --rule-pink:#e6cfd2;  /* ピンク寄りの細罫 */
  --max: 700px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 2.0;          /* 余白多め・軽い印象 */
  font-weight: 400;
  letter-spacing: .015em;
}

/* 見出しも本文と同じゴシック。明朝は使わない */
h1, h2, h3 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .01em;
  color: var(--ink);
}

a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent); }

p { margin: 0 0 1.4em; }
strong { font-weight: 700; color: var(--ink); }

/* ---- header：静的・非固定・blur無し・細い下罫だけ ---- */
.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-head .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 22px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.brand {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}
.brand small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--accent-deep);
  margin-top: 3px;
}
.nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nav a {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover { color: var(--accent-deep); }

/* ---- 本文ラッパ：余白たっぷり ---- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 30px 22px 60px;
}

/* ---- パンくず ---- */
.crumb {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 26px;
}
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent-deep); }

/* ---- hero（トップ）：軽く・余白で見せる ---- */
.hero {
  padding: 18px 0 6px;
  margin-bottom: 18px;
}
.hero .eyebrow {
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--accent-deep);
  margin: 0 0 14px;
}
.hero h1 {
  font-size: 27px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.hero .lead {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 38em;
}

/* hero の3ステップ：細罫カード・塗りつぶさない */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 6px;
}
.step {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  background: var(--paper);
}
.step .n {
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--accent-deep);
}
.step .t { font-weight: 700; margin: 4px 0 2px; }
.step .d { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* ---- 記事タイトル ---- */
.post h1 {
  font-size: 25px;
  line-height: 1.55;
  margin: 6px 0 14px;
}
.post-meta {
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.post-meta .author { color: var(--accent-deep); font-weight: 500; }

/* 会話調の問いかけ見出し */
.post h2 {
  font-size: 20px;
  margin: 44px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
}
.post h3 {
  font-size: 17px;
  margin: 30px 0 12px;
  color: var(--accent-deep);
}

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

/* セクション見出し（トップ） */
.sec-h {
  font-size: 19px;
  margin: 40px 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-pink);
}

/* ---- ノート（この記事でわかること／体験ノート） ---- */
.note {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: 16px 18px;
  margin: 24px 0;
  font-size: 15px;
  line-height: 1.95;
}
.note .label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent-deep);
  margin-bottom: 6px;
}

/* ---- 表 ---- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14.5px;
}
.tbl th, .tbl td {
  border: 1px solid var(--rule);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.tbl th {
  background: var(--accent-wash);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- CTA ＋ ASPプレースホルダ ---- */
.cta {
  border: 1px solid var(--rule-pink);
  background: var(--paper-2);
  padding: 22px;
  margin: 32px 0;
}
.cta .ttl {
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--accent-deep);
}
.cta p { margin: 0 0 12px; font-size: 15px; }
.asp-placeholder {
  border: 1px dashed var(--accent);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
  padding: 18px 12px;
  margin-top: 8px;
}

/* ---- 記事一覧：アイコン無し2行カード（見出し＋ひとこと）縦並び ---- */
.guide-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  counter-reset: none;
}
.guide-list li {
  border-bottom: 1px solid var(--rule);
  padding: 18px 4px;
}
.guide-list li:first-child { border-top: 1px solid var(--rule); }
.guide-list a {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.6;
}
.guide-list a:hover { color: var(--accent-deep); }
.guide-list .say {
  display: block;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 5px;
  line-height: 1.8;
}
.guide-list .meta {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 6px;
  letter-spacing: .05em;
}

/* ---- 著者カード ---- */
.author-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 18px;
  margin: 40px 0 24px;
}
.author-card .av {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
}
.author-card .nm { font-weight: 700; margin-bottom: 4px; }
.author-card .bio { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; }

/* ---- disclaimer ---- */
.disclaimer {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.85;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: 36px;
}

/* ---- 内部リンク（関連） ---- */
.related {
  border-top: 1px solid var(--rule-pink);
  margin-top: 36px;
  padding-top: 18px;
}
.related .label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin: 0 0 8px; }
.related a { font-size: 15px; }

/* ---- footer ---- */
.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  margin-top: 40px;
}
.site-foot .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 22px 36px;
  text-align: center;
}
.site-foot nav {
  display: flex;
  gap: 8px 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.site-foot nav a {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.site-foot nav a:hover { color: var(--accent-deep); }
.site-foot p { font-size: 12px; color: var(--ink-faint); }

/* ---- フォーム ---- */
.form label { display: block; font-weight: 500; font-size: 14px; margin: 18px 0 6px; }
.form input, .form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  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(--accent-deep);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: .04em;
}
.form button:hover { background: var(--accent); }

/* ---- レスポンシブ ---- */
@media (min-width: 620px) {
  .hero h1 { font-size: 30px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}