/* ==========================================================================
   記事の本文の飾り（お知らせ・導入事例）— 2026-10-19
   WordPress（/cms/）の本文エディタで使える飾りの見た目。サイトの記事ページと、
   エディタの中（body id="articleContent"）の両方で同じに見えるようにする。
   色はサイトの変数（css/style.css）を使い、無いとき（エディタ）は後ろの値を使う。
   ========================================================================== */

#articleContent, #caseContent { font-family: var(--font-ja, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif); }

/* 見出し（大・中・小） */
#articleContent h2, #caseContent h2 {
  position: relative; font-size: 1.375rem; font-weight: 700; line-height: 1.6;
  color: var(--text-on-light, #1A1816); margin: 3rem 0 1.25rem; padding: 0.25rem 0 0.25rem 1rem;
  border-left: 4px solid var(--gold, #C5975B);
}
#articleContent h3, #caseContent h3 {
  font-size: 1.125rem; font-weight: 700; line-height: 1.6; color: var(--text-on-light, #1A1816);
  margin: 2.25rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--warm-border, #E5E0D8);
}
#articleContent h4, #caseContent h4 {
  font-size: 1rem; font-weight: 700; color: var(--gold-dark, #A67C4A); margin: 1.75rem 0 0.75rem;
}

/* 文字の飾り */
#articleContent em, #caseContent em { font-style: italic; }
#articleContent u, #caseContent u { text-decoration: underline; text-underline-offset: 3px; }
#articleContent s, #caseContent s, #articleContent del, #caseContent del { text-decoration: line-through; color: var(--text-on-light-muted, #8A8580); }
#articleContent .aj-mark, #caseContent .aj-mark {
  background: linear-gradient(transparent 62%, rgba(197,151,91,0.35) 62%); font-weight: 700; color: var(--text-on-light, #1A1816);
}
#articleContent .aj-big, #caseContent .aj-big { font-size: 1.2em; font-weight: 700; color: var(--text-on-light, #1A1816); }
#articleContent p.aj-note, #caseContent p.aj-note { font-size: 0.8125rem; line-height: 1.9; color: var(--text-on-light-muted, #8A8580); }

/* 並び（左・中央・右） */
#articleContent [style*="text-align: center"], #caseContent [style*="text-align: center"] { text-align: center; }

/* 引用 */
#articleContent blockquote, #caseContent blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--gold, #C5975B);
  background: rgba(197,151,91,0.05); border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}
#articleContent blockquote p, #caseContent blockquote p { margin-bottom: 0.5rem; font-style: italic; }
#articleContent blockquote p:last-child, #caseContent blockquote p:last-child { margin-bottom: 0; }

/* 区切り線 */
#articleContent hr, #caseContent hr {
  border: 0; height: 1px; margin: 2.5rem auto; width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold, #C5975B), transparent);
}

/* 囲み枠（グレー・金・紺） */
#articleContent .aj-box, #caseContent .aj-box {
  margin: 2rem 0; padding: 1.5rem 1.75rem; border-radius: var(--radius-lg, 16px);
  background: var(--warm-gray, #F2EFE9); border: 1px solid var(--warm-border, #E5E0D8);
}
#articleContent .aj-box > :last-child, #caseContent .aj-box > :last-child { margin-bottom: 0; }
#articleContent .aj-box--gold, #caseContent .aj-box--gold { background: rgba(197,151,91,0.08); border-color: rgba(197,151,91,0.45); }
#articleContent .aj-box--navy, #caseContent .aj-box--navy { background: var(--navy, #0F1B2D); border-color: var(--navy, #0F1B2D); }
#articleContent .aj-box--navy, #caseContent .aj-box--navy,
#articleContent .aj-box--navy p, #caseContent .aj-box--navy p,
#articleContent .aj-box--navy li, #caseContent .aj-box--navy li { color: var(--text-on-dark, #E8E4DF); }
#articleContent .aj-box--navy h2, #caseContent .aj-box--navy h2,
#articleContent .aj-box--navy h3, #caseContent .aj-box--navy h3,
#articleContent .aj-box--navy h4, #caseContent .aj-box--navy h4,
#articleContent .aj-box--navy strong, #caseContent .aj-box--navy strong { color: #fff; border-color: rgba(255,255,255,0.2); }
#articleContent .aj-box--navy a:not(.aj-btn), #caseContent .aj-box--navy a:not(.aj-btn) { color: var(--gold-light, #D9B87C); }
#articleContent .aj-box h2, #caseContent .aj-box h2, #articleContent .aj-box h3, #caseContent .aj-box h3 { margin-top: 0; }

/* ボタン風リンク */
#articleContent a.aj-btn, #caseContent a.aj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.75rem; margin: 0.5rem 0; border: 0; border-radius: 9999px;
  background: var(--red, #B91C1C); color: #fff; font-weight: 700; font-size: 0.9375rem; text-decoration: none;
  box-shadow: 0 6px 16px rgba(185,28,28,0.18); transition: transform .2s, background .2s;
}
#articleContent a.aj-btn:hover, #caseContent a.aj-btn:hover { background: var(--red-hover, #991B1B); transform: translateY(-1px); }
#articleContent a.aj-btn::after, #caseContent a.aj-btn::after { content: '→'; }

/* 表 */
#articleContent table, #caseContent table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.9375rem; }
#articleContent th, #caseContent th, #articleContent td, #caseContent td {
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--warm-border, #E5E0D8); text-align: left; vertical-align: top; line-height: 1.8;
}
#articleContent th, #caseContent th { width: 28%; background: var(--warm-white, #FAF8F5); font-weight: 700; color: var(--text-on-light, #1A1816); white-space: nowrap; }
#articleContent td, #caseContent td { color: var(--text-on-light-sub, #5E6470); }

/* 写真：中央・左・右、写真の説明 */
#articleContent img, #caseContent img { max-width: 100%; height: auto; }
#articleContent img.alignleft, #caseContent img.alignleft,
#articleContent img.alignright, #caseContent img.alignright { width: auto; max-width: 45%; margin-top: 0.25rem; }
#articleContent .alignleft, #caseContent .alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; }
#articleContent .alignright, #caseContent .alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; }
#articleContent .aligncenter, #caseContent .aligncenter { display: block; margin-left: auto; margin-right: auto; }
#articleContent h2, #caseContent h2, #articleContent h3, #caseContent h3, #articleContent hr, #caseContent hr, #articleContent .aj-box, #caseContent .aj-box { clear: both; }
#articleContent figure, #caseContent figure { margin: 2rem 0; max-width: 100% !important; }
#articleContent figure img, #caseContent figure img { margin: 0 0 0.5rem; }
#articleContent figcaption, #caseContent figcaption, #articleContent .wp-caption-text, #caseContent .wp-caption-text {
  font-size: 0.8125rem; line-height: 1.7; color: var(--text-on-light-muted, #8A8580); text-align: center;
}
#articleContent figure.alignleft, #caseContent figure.alignleft, #articleContent figure.alignright, #caseContent figure.alignright { max-width: 45% !important; margin-top: 0.25rem; }

/* 箇条書きの印を金色に */
#articleContent ul li::marker, #caseContent ul li::marker { color: var(--gold, #C5975B); }
#articleContent ol li::marker, #caseContent ol li::marker { color: var(--gold-dark, #A67C4A); font-weight: 700; }

/* スマホ：横並びの写真は全幅にする */
@media (max-width: 640px) {
  #articleContent .alignleft, #caseContent .alignleft, #articleContent .alignright, #caseContent .alignright,
  #articleContent img.alignleft, #caseContent img.alignleft, #articleContent img.alignright, #caseContent img.alignright,
  #articleContent figure.alignleft, #caseContent figure.alignleft, #articleContent figure.alignright, #caseContent figure.alignright {
    float: none; max-width: 100% !important; width: 100%; margin: 1.5rem 0;
  }
  #articleContent th, #caseContent th { width: 34%; white-space: normal; }
  #articleContent .aj-box, #caseContent .aj-box { padding: 1.25rem; }
}

/* エディタの中だけ：本文の幅と地の色 */
body#articleContent { max-width: 760px; margin: 16px auto; padding: 0 16px; background: #fff; color: var(--text-on-light-sub, #5E6470); font-size: 15px; line-height: 2.1; }
body#articleContent p { margin: 0 0 1.25rem; }