/* ============================================================
   mamacareers.com — ママのFXでキャリア+
   archetype: フェミニン・きらめきエディトリアル（画像hero / ピンク派手 / 装飾あり）
   ※オーナー指示(2026-07-09): ピンクで女性的、装飾つき派手、キャリアアップを表現、
     左寄せテキストheroは廃止し画像heroにする。→ この方針を体現するため、
     通常のミニマル・アンチスロップ基調をあえて外し「華やかで装飾的」に振っている。
     ただし汎用AIっぽさ（紫青グラデ/汎用ガラスモーフィズム）は使わず、
     暖色ピンク→コーラル→ゴールドのブランド配色＋kawaiiきらめきで独自化。
   palette: ローズ/マゼンタ/コーラル × ゴールド × ピンクホワイト地
   fonts: 見出し=Zen Maru Gothic（丸くやわらかい）/ 本文=Noto Sans JP
   隣接ブログと骨格・配色・フォント・Hero・装飾を構造レベルで変えている（フットプリント回避）。
   ============================================================ */

:root{
  --paper:#fff6f9;      /* ソフトピンクホワイト地 */
  --paper-2:#ffeaf1;    /* 一段濃いピンクウォッシュ */
  --card:#ffffff;
  --ink:#3c2b33;        /* 暖色プラムチャコール */
  --ink-soft:#7c626c;
  --ink-faint:#b18ea0;
  --rose:#e8407f;       /* 主役ピンク */
  --rose-deep:#c62a68;
  --coral:#ff7fa2;
  --gold:#e2a63a;
  --gold-lt:#f4cd6b;
  --rule:#f6d3e1;
  --rule-soft:#fbe4ee;
  --wash:#ffeef4;
  --grad:linear-gradient(120deg,#ff8ab0 0%,#e8407f 52%,#c62a68 100%);
  --grad-soft:linear-gradient(120deg,#fff0f5 0%,#ffe1ec 100%);
  --glow:0 10px 30px -12px rgba(216,51,122,.45);
  --max:900px;
  --read:720px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1200px 520px at 90% -10%, #ffe3ee 0%, rgba(255,227,238,0) 60%),
    radial-gradient(1000px 520px at 5% 108%, #fff2d9 0%, rgba(255,242,217,0) 60%),
    var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.95;
  font-weight:400;
  letter-spacing:.012em;
}
/* ページ全体の上品なきらめき（微細スパークル）。固定レイヤーでスクロール中もシマー。
   ※本文可読性のため 1px の疎なドット＋低opacityに抑える。カード等の不透明背景は上に乗るので本文は死守。 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(240,192,90,.55) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, rgba(232,64,127,.40) 0 1px, transparent 1.7px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0 1px, transparent 1.6px);
  background-size:150px 150px, 210px 210px, 96px 96px;
  background-position:0 0, 78px 46px, 34px 96px;
  opacity:.55;
}
@media (prefers-reduced-motion:no-preference){
  body::before{animation:shimmer 7s ease-in-out infinite alternate;}
}
@keyframes shimmer{from{opacity:.42;}to{opacity:.66;}}

h1,h2,h3,.brand{
  font-family:"Zen Maru Gothic","Noto Sans JP",system-ui,sans-serif;
  font-weight:700;
  line-height:1.55;
  color:var(--ink);
}

a{color:var(--rose-deep);text-decoration:none;}
a:hover{color:var(--rose);}
p{margin:0 0 1.4em;}
strong{font-weight:700;color:var(--rose-deep);}
img{max-width:100%;height:auto;display:block;}

/* ---- header ---- */
.site-head{
  background:rgba(255,246,249,.92);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.2);
}
.site-head .inner{
  max-width:var(--max);margin:0 auto;
  padding:16px 22px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px 20px;
}
.brand{
  font-size:20px;color:var(--ink);text-decoration:none;line-height:1.3;
  display:inline-flex;flex-direction:column;
}
.brand::before{content:"❀ ";color:var(--rose);}
.brand small{
  font-size:10.5px;font-weight:500;letter-spacing:.18em;
  color:var(--rose-deep);margin-top:2px;
}
.nav{display:flex;gap:20px;flex-wrap:wrap;}
.nav a{font-size:14px;color:var(--ink-soft);font-weight:500;}
.nav a:hover{color:var(--rose-deep);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px 64px;}
.post.wrap,.wrap.read{max-width:var(--read);}

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

/* ============ HERO（画像・派手） ============ */
.hero{
  position:relative;margin:22px 0 10px;
  border-radius:24px;overflow:hidden;
  background:var(--grad-soft);
  box-shadow:var(--glow);
  border:1px solid var(--rule);
}
.hero-img{width:100%;display:block;aspect-ratio:1344/768;object-fit:cover;}
.hero-card{
  position:absolute;left:5%;top:50%;transform:translateY(-50%);
  width:min(46%,420px);
}
.hero-card .eyebrow{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:#fff;background:var(--grad);padding:5px 14px;border-radius:999px;
  box-shadow:var(--glow);margin:0 0 14px;
}
.hero-card h1{
  font-size:clamp(22px,3.4vw,34px);line-height:1.4;margin:0 0 12px;
  color:var(--rose-deep);
  text-shadow:0 2px 10px rgba(255,255,255,.85);
}
.hero-card h1 .hl{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-card .lead{
  font-size:14px;color:var(--ink-soft);margin:0 0 18px;
  text-shadow:0 1px 6px rgba(255,255,255,.9);
}
.hero-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--grad);color:#fff;font-weight:700;font-size:14.5px;
  padding:12px 24px;border-radius:999px;box-shadow:var(--glow);
}
.hero-cta::after{content:"→";}
.hero-cta:hover{color:#fff;filter:brightness(1.05);}

/* きらめきステップ: 3カード */
.steps{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0 6px;}
.step{
  background:var(--card);border:1px solid var(--rule);
  border-radius:16px;padding:16px 18px;box-shadow:0 6px 18px -14px rgba(198,42,104,.5);
}
.step .n{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--rose);}
.step .t{font-weight:700;margin:4px 0 3px;}
.step .d{font-size:13.5px;color:var(--ink-soft);margin:0;}

/* ============ セクション見出し ============ */
.sec-h{
  font-size:22px;margin:52px 0 20px;padding:0 0 12px;
  position:relative;display:flex;align-items:center;gap:10px;
}
.sec-h::before{content:"✦";color:var(--gold);font-size:18px;}
.sec-h::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--rose) 0%,var(--coral) 30%,var(--rule-soft) 90%);
  border-radius:3px;
}

/* ============ 記事カードグリッド（画像付き） ============ */
.cardgrid{
  list-style:none;margin:6px 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.pcard{
  background:var(--card);border:1px solid var(--rule);
  border-radius:20px;overflow:hidden;
  box-shadow:0 10px 26px -20px rgba(198,42,104,.55);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;flex-direction:column;
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(198,42,104,.55);}
.pcard .ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--wash);}
.pcard .ph img{width:100%;height:100%;object-fit:cover;}
.pcard .badge{
  position:absolute;left:12px;top:12px;
  background:rgba(255,255,255,.92);color:var(--rose-deep);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 12px;border-radius:999px;box-shadow:0 4px 12px -6px rgba(198,42,104,.5);
}
.pcard .pb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pcard .pt{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
  font-size:16.5px;line-height:1.5;color:var(--ink);
}
.pcard:hover .pt{color:var(--rose-deep);}
.pcard .psay{font-size:13px;color:var(--ink-soft);line-height:1.8;margin:0;flex:1;}
.pcard .pmeta{
  font-size:11.5px;color:var(--ink-faint);letter-spacing:.04em;
  border-top:1px dashed var(--rule);padding-top:9px;
}
.pcard a.cover{position:absolute;inset:0;z-index:1;}

/* 旧guide-list（記事側で使う場合の保険） */
.guide-list{list-style:none;margin:14px 0;padding:0;}
.guide-list li{border-bottom:1px solid var(--rule);padding:16px 4px;}
.guide-list a{font-size:16.5px;font-weight:700;color:var(--ink);}
.guide-list a:hover{color:var(--rose-deep);}
.guide-list .say{display:block;font-size:13px;color:var(--ink-soft);margin-top:5px;}
.guide-list .meta{display:block;font-size:12px;color:var(--ink-faint);margin-top:6px;}

/* ============ 記事本文 ============ */
.post h1{font-size:clamp(23px,3.2vw,30px);line-height:1.5;margin:8px 0 14px;}
.post-meta{
  font-size:13px;color:var(--ink-soft);
  border-bottom:2px solid var(--rule);padding-bottom:16px;margin-bottom:30px;
}
.post-meta .author{color:var(--rose-deep);font-weight:700;}
.post h2{
  font-size:21px;margin:48px 0 18px;padding:12px 16px;
  background:var(--grad-soft);border-left:5px solid var(--rose);border-radius:0 14px 14px 0;
}
.post h3{font-size:17.5px;margin:32px 0 12px;color:var(--rose-deep);}
.post h3::before{content:"❤ ";color:var(--coral);font-size:14px;}
.post p{margin:0 0 1.5em;}
.post ul,.post ol{margin:0 0 1.5em;padding-left:1.4em;}
.post li{margin:0 0 .55em;}
.post img{border-radius:14px;margin:22px 0;box-shadow:0 10px 26px -18px rgba(198,42,104,.5);}

/* ノート */
.note{
  background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--rose);
  border-radius:16px;padding:18px 20px;margin:26px 0;font-size:15px;line-height:1.9;
  box-shadow:0 8px 22px -18px rgba(198,42,104,.5);
}
.note .label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--rose-deep);margin-bottom:6px;}
.note .label::before{content:"✎ ";}

/* 表 */
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0;font-size:14.5px;
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;}
.tbl th,.tbl td{border-bottom:1px solid var(--rule);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.75;}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0;}
.tbl th{background:var(--grad-soft);font-weight:700;color:var(--rose-deep);white-space:nowrap;}

/* CTA */
.cta{
  border:1px solid var(--rule);background:var(--grad-soft);
  border-radius:20px;padding:24px;margin:34px 0;box-shadow:var(--glow);
}
.cta .ttl{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:18px;margin:0 0 8px;color:var(--rose-deep);}
.cta .ttl::before{content:"✦ ";color:var(--gold);}
.cta p{margin:0 0 12px;font-size:15px;}
.cta .btn,.asp-placeholder a{
  display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;
  font-weight:700;padding:12px 26px;border-radius:999px;box-shadow:var(--glow);
}
.asp-placeholder{
  border:1px dashed var(--rose);background:var(--card);color:var(--ink-soft);
  font-size:13px;text-align:center;padding:18px 12px;margin-top:8px;border-radius:14px;
}

/* 著者カード */
.author-card{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--rule);background:var(--card);
  border-radius:20px;padding:20px;margin:44px 0 26px;
  box-shadow:0 10px 26px -20px rgba(198,42,104,.5);
}
.author-card .av{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:22px;box-shadow:var(--glow);
}
.author-card .nm{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;margin-bottom:4px;}
.author-card .nm::after{content:" ❀";color:var(--coral);}
.author-card .bio{font-size:13.5px;color:var(--ink-soft);line-height:1.85;}

/* 関連 */
.related{border-top:2px solid var(--rule);margin-top:40px;padding-top:20px;}
.related .label{font-size:13.5px;font-weight:700;color:var(--rose-deep);margin-bottom:10px;}
.related .label::before{content:"✦ ";color:var(--gold);}
.related ul{list-style:none;margin:0;padding:0;}
.related li{margin:0 0 8px;}
.related a{font-size:15px;}

/* 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:40px;
}

/* footer */
.site-foot{border-top:1px solid var(--rule);background:var(--grad-soft);margin-top:48px;}
.site-foot .inner{max-width:var(--max);margin:0 auto;padding:30px 22px 38px;text-align:center;}
.site-foot nav{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;}
.site-foot nav a{font-size:13.5px;color:var(--ink-soft);font-weight:500;}
.site-foot nav a:hover{color:var(--rose-deep);}
.site-foot p{font-size:12px;color:var(--ink-faint);}

/* フォーム */
.form label{display:block;font-weight:700;font-size:14px;margin:18px 0 6px;color:var(--ink);}
.form input,.form textarea{width:100%;padding:12px 13px;border:1px solid var(--rule);border-radius:12px;background:var(--card);font-family:inherit;font-size:15px;color:var(--ink);}
.form textarea{min-height:150px;resize:vertical;}
.form button{margin-top:22px;padding:13px 32px;background:var(--grad);color:#fff;border:0;border-radius:999px;cursor:pointer;font-size:15px;font-weight:700;box-shadow:var(--glow);}
.form button:hover{filter:brightness(1.05);}

/* ---- レスポンシブ ---- */
@media (min-width:640px){
  .steps{grid-template-columns:repeat(3,1fr);}
  .cardgrid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:960px){
  .cardgrid{grid-template-columns:repeat(3,1fr);}
}
/* PC: heroをファーストビューで“ドーンと”大きく（フルブリード break-out＋大きめタイポ）。
   画像アスペクトは維持し被写体を切らない（幅拡大で自然に高さも増す）。SPは別ルールで維持。 */
@media (min-width:900px){
  .hero{
    width:min(1180px,94vw);left:50%;transform:translateX(-50%);
    margin:26px 0 22px;border-radius:28px;
  }
  .hero-card{width:min(50%,560px);left:6.5%;}
  .hero-card .eyebrow{font-size:13px;padding:6px 18px;margin-bottom:16px;}
  .hero-card h1{font-size:clamp(32px,3.7vw,46px);line-height:1.34;margin-bottom:16px;}
  .hero-card .lead{font-size:16.5px;line-height:1.85;margin-bottom:24px;}
  .hero-cta{font-size:16px;padding:14px 32px;}
}
/* モバイル: heroは画像を上に積み、カードは画像下に静的配置（被写体との衝突回避） */
@media (max-width:640px){
  .hero{background:var(--card);}
  .hero-img{aspect-ratio:16/10;}
  .hero-card{
    position:static;transform:none;width:auto;
    padding:20px 20px 22px;background:var(--grad-soft);
  }
  .hero-card h1{text-shadow:none;}
  .hero-card .lead{text-shadow:none;}
}

/* ============================================================
   2026-07-10 標準ルール実装（オーナー確定）
   ルールA: カテゴリで記事を回遊できる導線（.catfilter）
   ルールB: インタラクティブ・ギミック＝扶養の壁チェッカー（.simulator）
   ※税制は変わる旨＋公式確認を促す注意書きを必須表示・断定しない（教育目的の目安ツール）
   ============================================================ */

/* ---- カテゴリ絞り込みチップ（きらめきピンク） ---- */
.catfilter{display:flex;flex-wrap:wrap;gap:9px 10px;margin:2px 0 20px;}
.catbtn{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;font-size:13px;
  color:var(--rose-deep);background:var(--card);border:1px solid var(--rule);
  border-radius:999px;padding:7px 16px;cursor:pointer;line-height:1.3;
  box-shadow:0 6px 16px -14px rgba(198,42,104,.5);transition:transform .15s ease,box-shadow .15s ease;
}
.catbtn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(198,42,104,.55);}
.catbtn.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--glow);}
.catbtn .cnt{font-size:11px;opacity:.8;margin-left:5px;font-weight:500;}

/* ---- 扶養の壁チェッカー（きらめきカード） ---- */
.simulator{margin:8px 0 6px;}
.sim-badge{
  font-size:11px;font-weight:700;color:#fff;background:var(--grad);
  padding:3px 12px;border-radius:999px;margin-left:10px;vertical-align:middle;box-shadow:var(--glow);
  font-family:"Noto Sans JP",sans-serif;letter-spacing:.03em;
}
.sim-lead{font-size:14.5px;color:var(--ink-soft);margin:0 0 16px;line-height:1.9;}
.sim-card{
  background:var(--card);border:1px solid var(--rule);border-radius:22px;
  padding:22px 22px 24px;box-shadow:0 12px 30px -22px rgba(198,42,104,.6);
}
.sim-inputs{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:22px;}
.sim-inputs label{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14.5px;color:var(--ink);display:block;}
.sim-inputs .ip{display:flex;align-items:center;gap:8px;margin-top:8px;}
.sim-inputs input{
  width:130px;padding:11px 13px;border:1.5px solid var(--rule);border-radius:14px;
  background:var(--wash);font-family:ui-monospace,monospace;font-size:17px;font-weight:700;
  color:var(--rose-deep);text-align:right;
}
.sim-inputs input:focus{outline:none;border-color:var(--rose);background:#fff;box-shadow:0 0 0 3px var(--rule-soft);}
.sim-inputs .ip b{font-weight:700;font-size:14px;color:var(--ink-soft);}
/* 壁バー */
.sim-bar{margin:6px 0 20px;}
.sim-track{
  position:relative;height:30px;border-radius:999px;
  background:linear-gradient(90deg,#ffe1ec,#ffd0e0);
  border:1px solid var(--rule);overflow:visible;
}
.sim-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--grad);width:0;transition:width .35s cubic-bezier(.2,.7,.2,1);box-shadow:var(--glow);}
.sim-mark{
  position:absolute;top:-7px;bottom:-7px;width:4px;border-radius:3px;background:var(--gold);
  box-shadow:0 0 0 2px #fff,0 4px 10px -3px rgba(226,166,58,.8);transition:left .35s cubic-bezier(.2,.7,.2,1);z-index:3;
}
.sim-mark::after{
  content:"いまここ";position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:700;color:var(--gold);white-space:nowrap;
  font-family:"Zen Maru Gothic",sans-serif;
}
.sim-wall{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--rose-deep);opacity:.5;z-index:2;}
.sim-walllabels{position:relative;height:34px;margin-top:9px;font-size:0;}
.sim-walllabels span{
  position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;font-weight:700;
  color:var(--rose-deep);font-family:ui-monospace,monospace;white-space:nowrap;
}
/* 103万と106万が近接して重なるため互い違いに配置 */
.sim-walllabels span:nth-child(even){top:16px;color:var(--rose);}
/* 出力 */
.sim-out{margin:6px 0 4px;}
.sim-status{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;color:var(--rose-deep);
  background:var(--grad-soft);border:1px solid var(--rule);border-radius:16px;padding:14px 16px;margin:0 0 12px;line-height:1.7;
}
.sim-status .em{color:var(--rose);}
.sim-lines{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px;}
.sim-lines li{
  font-size:13.5px;color:var(--ink);line-height:1.8;
  background:var(--wash);border-left:4px solid var(--coral);border-radius:0 12px 12px 0;padding:10px 14px;
}
.sim-lines li b{color:var(--rose-deep);}
.sim-lines li.warn{border-left-color:var(--gold);background:#fff7e6;}
.sim-note{
  font-size:12.5px;color:var(--ink-soft);line-height:1.85;
  background:#fff7fa;border:1px dashed var(--rose);border-radius:14px;padding:14px 16px;margin-top:16px;
}
.sim-note b{display:block;color:var(--rose-deep);font-family:"Zen Maru Gothic",sans-serif;margin-bottom:5px;font-size:13px;}
@media (min-width:560px){ .sim-inputs{grid-template-columns:1fr 1fr;gap:18px;} }