/*
Theme Name: Union Child (Article Style)
Template: uniontheme
Author: MDS(t.katashima)
Author URI: https://www.mdsg.co.jp/
Description: 記事投稿用のカスタマイズ」「見出し・CTAスタイル調整
Tags: knowledge, news, blog
Version: 1.4.1759364209
Updated: 2025-10-02 09:16:49
*/
/*ここから上を消さないでください。WPにログインできなくなり、サーバーから修復することになります！




/* --- 読みやすさ重視のスタイル --- */
/* 投稿記事だけに適用 */
body.single-post .entry-content {
  --acc:#37a54e;   /* アクセント緑 */
  --acc2:#1e8c39;  /* 濃い緑 */
  --bd:#e8eef1;    /* 枠線用グレー */
  --txt:#1a1a1a;   /* 本文テキスト色 */
  --mut:#667085;   /* 補足テキスト色 */
  --tag:#eaf7ee;   /* 見出しタグ背景 */
  --cta:#37a54e;   /* CTAボタン緑 */
  --ctaTxt:#fff;   /* CTAボタン文字色 */
  --tblHd:#f6faf7; /* テーブルヘッダ背景 */

  font-family:system-ui,Arial,sans-serif;
  line-height:1.8;
  color:var(--txt);
  max-width:880px;
  margin:0 auto;
  padding:24px;
}

body.single-post .entry-content p{margin:0 0 1.1em}

body.single-post .entry-content h2{
  margin:2.2em 0 .8em;
  font-size:1.55rem;
  font-weight:700;
  padding:.35em .6em;
  border-left:6px solid var(--acc);
  background:linear-gradient(90deg,var(--tag),#fff); /* 左に緑線＋グラデ背景 */
}

body.single-post .entry-content h3{
  margin:1.6em 0 .6em;
  font-size:1.2rem;
  font-weight:700;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol{margin:.6em 0 .9em;padding-left:1.3em}
body.single-post .entry-content li{margin:.35em 0}

/* --- CTAボタン --- */
body.single-post .entry-content .cta{
  display:inline-block;
  background:var(--cta);      /* 緑 */
  color:var(--ctaTxt);        /* 白文字 */
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--cta);
  transition:.15s;
  font-size:1rem;             /* 文字を少し大きく */
  line-height:1;              /* 縦の詰まりを解消 */
  border-radius:12px;         /* 当て感の良い角丸 */
  box-shadow:0 2px 0 rgba(0,0,0,.05); /* 立体感で押しどころを示す */
  letter-spacing:.02em;       /* 可読性UP */
  text-align:center;          /* 文字をセンター寄せ */
}

/* ホバー／アクティブ（押下）で反応をはっきり */
body.single-post .entry-content .cta:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
body.single-post .entry-content .cta:active{
  transform:translateY(0);
  box-shadow:none;
}

/* --- テーブル --- */
body.single-post .entry-content .tbl-wrap{
  overflow:auto;
  border:1px solid var(--bd);
  border-radius:8px;
  margin:1em 0;
}
body.single-post .entry-content table{
  border-collapse:collapse;
  width:100%;
  min-width:640px;
}
body.single-post .entry-content th,
body.single-post .entry-content td{
  border:1px solid var(--bd);
  padding:10px 14px;
  text-align:left;
}
body.single-post .entry-content thead th{background:var(--tblHd)}
/* 投稿記事のテーブルヘッダー（<th>）すべてに背景色 */
body.single-post .entry-content table th {
  background: var(--tblHd); /* 薄いグリーン (#f6faf7) */
}

/* --- アコーディオン --- */
body.single-post .entry-content details{
  border:1px solid var(--bd);
  border-radius:6px;
  padding:12px 14px;
  margin:.6em 0;
  background:#fff;
}
body.single-post .entry-content summary{
  cursor:pointer;
  font-weight:700;
}
body.single-post .entry-content details[open]{
  background:#fbfdfb;
  border-color:var(--acc);
}

/* --- モバイル調整 --- */
@media(max-width:640px){
  body.single-post .entry-content{padding:16px}
  body.single-post .entry-content h2{font-size:1.35rem}
}

/* お試しレンタル＝ピンク */
body.single-post .entry-content .cta--trial{
  background:#ff4fa0;      /* 鮮やかピンク */
  color:#fff;
  border:1px solid #ff4fa0;
}
body.single-post .entry-content .cta--trial:hover{ filter:brightness(1.05); }

/* 料金プラン＝白（セカンダリー） */
body.single-post .entry-content .cta--ghost{
  background:#fff;         /* 白背景 */
  color:var(--acc2);       /* 緑文字 */
  border:1px solid var(--acc2);
}

/* フォーカス可視化 */
body.single-post .entry-content .cta:focus-visible{
  outline:3px solid rgba(255,79,160,.45); /* ピンクのリング */
  outline-offset:2px;
}

/* --- 情報枠（汎用） --- */
body.single-post .entry-content .note {
  border:1px solid var(--bd);
  background:#fbfdfb;
  padding:14px 16px;
  border-radius:8px;
  margin:1.2em 0;
}
body.single-post .entry-content .note--accent{
  border-color:var(--acc);
  background:#f4fbf6;
}

/* 強調ハイライト */
body.single-post .entry-content .highlight {
  background:#f4fbf6;   /* 淡いグリーン背景 */
  padding:12px 16px;    /* 内側余白 */
  border-radius:6px;    /* 少し角丸 */
  margin:1.5em 0;       /* 上下に余白 */
  font-weight:500;      /* 少し強調 */
  text-align:center;    /* 中央寄せ */
}

/* --- CTA付きの強調枠 --- */
body.single-post .entry-content .note-cta{
  border:2px solid #c6e9d3;     /* 枠線（緑系でやさしく） */
  background:#f7fdf9;           /* 少し明るいグリーン背景 */
  padding:28px 26px;
  border-radius:12px;
  margin:2em 0;
}
body.single-post .entry-content .note-cta .inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
body.single-post .entry-content .note-cta p{
  margin:0 0 1.2em;
  font-weight:500;
}
body.single-post .entry-content .note-cta .cta-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

/* ボタン間隔をmarginで設定（gapの代替） */
body.single-post .entry-content .note-cta .cta{
  margin:0 10px;  /* 左右に10pxの間隔 */
}

/* モバイル版のみ */
@media(max-width:640px){
  body.single-post .entry-content .note-cta .cta{
    margin:0 2px;  /* モバイル版は間隔を詰める */
  }
}
body.single-post .entry-content .note-cta .cta{
  /* min-widthを削除して文字の長さに合わせる */
}

/* --- CTA色別 --- */
body.single-post .entry-content .cta--primary{          /* 緑（既定） */
  background:#2f9a48;
  border-color:#2f9a48;
    border-radius: 6px;
    padding: 12px 14px;
    margin: .6em 0;
}
body.single-post .entry-content .cta--inquiry{          /* ピンク（お問い合わせ） */
  background:#ff3d98;
  border-color:#ff3d98;
  color:#fff;
	border-radius: 6px;
    padding: 12px 14px;
    margin: .6em 0;
}
body.single-post .entry-content .cta--inquiry:hover,
body.single-post .entry-content .cta--primary:hover{
  filter:brightness(1.05);
}

/* キーボード操作（アクセシビリティ） */
body.single-post .entry-content .cta:focus-visible{
  outline:3px solid rgba(20,115,230,.35); /* 視認しやすい青系リング */
  outline-offset:2px;
}

/* カラー別のコントラスト最適化（少し濃いめに） */
body.single-post .entry-content .cta--ghost{
  color:#166534;
  border-color:#1e8c39;
  background:#fff;
}
body.single-post .entry-content .cta--ghost:hover{
  background:#f0faf3;
}

/* モバイルは"幅いっぱい"で押しやすく */
@media (max-width:640px){
  body.single-post .entry-content .cta{
    display:block;          /* ブロック要素にして幅いっぱい */
    width:100%;
    min-height:44px;        /* Apple/Google推奨の44pxタップ領域 */
    text-align:center;      /* 文字をセンター寄せ */
    margin-bottom:8px;      /* ボタン間の縦間隔 */
  }
}

/* 動きが苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  body.single-post .entry-content .cta,
  body.single-post .entry-content .cta:hover,
  body.single-post .entry-content .cta:active{
    transition:none;
    transform:none;
  }
}

/* モバイル版：縦並び＋間隔を詰める */
@media screen and (max-width: 768px) {
  .l-sta_new_service_template_cv_btn_area {
    display: flex;
    flex-direction: column-reverse;
    max-width: 100%;
    gap: 4px;  /* 20px → 8px に詰める */
    margin: 0 auto;
  }
}