/*
Theme Name: SWELL CHILD
Template: swell
Version: 1.0.1
*/

/* =========================================================================
   シメルンノート（shimerun.jp/media）
   ルートLP（shimerun.jp/index.html）とトーンを揃えるための上書き。

   色はLPの CSS変数をそのまま移植している。LP側を変えたらここも変える。
     --navy    #1E2E3E   本文・見出し（背景に対し 12.69:1）
     --amber   #FFB93B   アクセント（装飾のみ。文字色に使わない＝1.57:1）
     --green   #06C755   フクロウの蝶ネクタイ。明るいので面には使わない（白文字 2.26:1）
     --green-d #04913E   CTAの面。白文字で 4.10:1（大きい太字ならAA）
     --bg      #F2F6F1   背景
     --gray    #68798A   補助テキスト

   リンクだけはLPの色を使わない。UIの慣習どおり青にしている。
     link      #1565C0   5.26:1・AA通過
     ※SWELL既定の #1176d4 は 4.21:1 でAAに届かないため少し濃くしたもの。
   ========================================================================= */

:root {
  --shmr-navy:  #1E2E3E;
  --shmr-link:  #1565C0;
  --shmr-slate: #46617C;
  --shmr-amber: #FFB93B;
  --shmr-amber-l: #FFF3DC;
  --shmr-green: #06C755;
  --shmr-green-d: #04913E;
  --shmr-bg:    #F2F6F1;
  --shmr-sub:   #E8EDE9;
  --shmr-gray:  #68798A;
}

/* --- フォント -----------------------------------------------------------
   SWELLのカスタマイザーは Zen Maru Gothic を選択肢に持たないため、
   カスタマイザー側は Noto Sans JP（フォールバック）にしたうえでここで上書きする。
   読み込みは functions.php の wp_enqueue_style。
   ------------------------------------------------------------------------ */
body,
.swell-block-button__link,
input, textarea, select, button {
  font-family: "Zen Maru Gothic", -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 500;
}

.post_content {
  line-height: 1.95;   /* LPと同じ。夜間・スマホで読む前提でゆったり */
  letter-spacing: .01em;
}

/* 見出しは太く。Zen Maru Gothic は 700 だと締まりが出る */
.post_content h2,
.post_content h3,
.post_content h4,
.c-postTitle__ttl,
.p-articleThumb__title {
  font-weight: 700;
}

/* --- リンク -------------------------------------------------------------
   青（#1565C0）はUIの慣習どおり。色だけに頼らないよう下線も併用する。
   ------------------------------------------------------------------------ */
.post_content a:not([class]) {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(21, 101, 192, .4);
}
.post_content a:not([class]):hover {
  text-decoration-color: var(--shmr-link);
}

/* --- 見出しのアクセント --------------------------------------------------
   LPの「アンバーの差し色」をH2に持ち込む。文字色ではなく罫線に使う。
   ------------------------------------------------------------------------ */
.post_content h2 {
  border-bottom: 3px solid var(--shmr-amber);
  padding-bottom: .4em;
}
.post_content h3 {
  border-left: 4px solid var(--shmr-amber);
  padding-left: .7em;
}

/* --- 表 -----------------------------------------------------------------
   比較表を多用する設計（KW管理シート 02_記事設計）なので読みやすさを優先。
   ------------------------------------------------------------------------ */
.post_content table th {
  background: var(--shmr-sub);
  color: var(--shmr-navy);
  font-weight: 700;
}
.post_content table td,
.post_content table th {
  border-color: #D6DED8;
}

/* --- CTA ---------------------------------------------------------------
   フリープラン登録の導線。フクロウの蝶ネクタイの緑。
   面は濃い方（#04913E）を使う。明るい #06C755 は白文字で 2.26:1 しかなく、
   大きい文字の基準3.0すら割るため面には使わない。影とホバーに回している。
   #04913E でも白文字は 4.10:1 なので、必ず18px・太さ900以上で使うこと
   （この条件なら「大きい文字」としてAAを満たす）。小さい文字に流用しない。
   ------------------------------------------------------------------------ */
.shmr-cta a,
a.shmr-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--shmr-green-d);
  color: #fff !important;
  font-weight: 900;
  font-size: 18px;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 4px 0 #026B2C;
}
.shmr-cta a:hover,
a.shmr-cta:hover {
  background: var(--shmr-green);
  color: #10331C !important;   /* 明るい緑の上は濃色文字にする（7.4:1） */
  transform: translateY(2px);
  box-shadow: 0 2px 0 #026B2C;
}

/* --- CTAボックス ---------------------------------------------------------
   ブログパーツ「CTA｜シメルン登録」の枠。記事の書き出しとまとめに置く。
   ★見出し(H2/H3)にはしない。見出しは記事の骨組みを示す札なので、
     そこに宣伝文句が入ると目次が意味をなさなくなる。太字の段落で始める。
   ------------------------------------------------------------------------ */
/* ★ダークモード指定は入れないこと（renFB 2026-09-20：CTAの色が変）。
   SWELL本体は prefers-color-scheme を一切使っておらず、このサイトはダークモード非対応。
   子テーマだけが端末のダークモード設定に反応すると、背景だけ暗くなって
   文字色は暗いままになり、CTAが読めなくなる。実機のiPhoneで発覚した。 */
.shmr-ctabox {
  background: var(--shmr-amber-l);
  border: 2px solid var(--shmr-amber);
}
.shmr-ctabox__lead {
  font-size: 1.15em;
  margin-bottom: .6em;
}
.shmr-ctabox__list {
  margin: 1em 0 1.4em;
}
.shmr-ctabox__list li {
  margin-bottom: .3em;
}
/* --- フッター ------------------------------------------------------------ */
.l-footer {
  background: var(--shmr-navy);
  color: #fff;             /* 13.86:1 */
}
.l-footer a { color: #fff; }

/* CTAボックスの補助リンク（本文リンクと同じ青にせず、控えめにする） */
.shmr-ctabox__sub {
  font-size: .88em;
  margin-top: .9em;
  margin-bottom: 0;
}

/* --- CTAボックスのキャンペーン行 -----------------------------------------
   期間限定オファー（先着30店舗・有料プラン3か月無料）の告知。
   ★恒久のフリープラン（オーナー含め2人までずっと無料）とは性質が違うので、
     箇条書きに混ぜず1行として分けている。並べると
     「2人までなら3か月後に有料になるのか」と読まれるため。
   ★キャンペーン終了時は content/_cta.html の
     .shmr-ctabox__campaign のブロックを削除してブログパーツを更新するだけ。
     このCSSは残しておいて構わない。
   ------------------------------------------------------------------------ */
.shmr-ctabox__campaign {
  margin: 0 auto 1.2em;
  padding: .7em 1em;
  max-width: 34em;
  font-size: .92em;
  line-height: 1.7;
  background: rgba(255, 255, 255, .7);
  border: 1px dashed var(--shmr-amber);
  border-radius: 8px;
}
/* --- ダウンロードボックス -------------------------------------------------
   テンプレート配布記事（T-07など）で使う。
   CTAボックス（シメルン登録）とは役割が違うので見た目を分けている。
   読者の目的はダウンロードなので、記事の冒頭に置く。
   ------------------------------------------------------------------------ */
.shmr-dlbox {
  background: var(--shmr-sub);
  border: 2px solid var(--shmr-navy);
}
.shmr-dlbox__lead { font-size: 1.1em; margin-bottom: 1em; }
.shmr-dlbox__note { font-size: .85em; color: var(--shmr-gray); margin: .8em 0 0; }
.shmr-dl a {
  display: inline-block;
  background: var(--shmr-navy);
  color: #fff !important;          /* 12.69:1 */
  font-weight: 900;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none !important;
}
.shmr-dl a:hover { background: var(--shmr-slate); }