/* ==========================================================================
   記事の本文（ブロックエディタで作ったもの）の見た目 — 2026-10-19
   サイトの記事ページ（#articleContent・#caseContent）と、WordPress のエディタの中（.editor-styles-wrapper）で同じに見える。
   WordPress の block-library の CSS の上に、AthleteJapan の色・形を足す。
   ========================================================================== */
:root {
  --aj-navy: #0F1B2D; --aj-navy2: #1C2E4A; --aj-gold: #C5975B; --aj-gold-l: #D9B87C; --aj-gold-d: #A67C4A;
  --aj-red: #B91C1C; --aj-red-h: #991B1B; --aj-text: #1A1816; --aj-gray: #5E6470; --aj-muted: #8A8580;
  --aj-beige: #F2EFE9; --aj-cream: #F8F1E6; --aj-line: #E5E0D8;
}

/* ---------- 色と文字の大きさ（エディタの色・大きさの選択と同じ名前） ---------- */
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-navy-color { color: var(--aj-navy) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-gold-color { color: var(--aj-gold) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-gold-dark-color { color: var(--aj-gold-d) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-red-color { color: var(--aj-red) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-text-color { color: var(--aj-text) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-gray-color { color: var(--aj-gray) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-white-color { color: #fff !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-navy-background-color { background-color: var(--aj-navy) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-gold-background-color { background-color: var(--aj-gold) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-gold-dark-background-color { background-color: var(--aj-gold-d) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-red-background-color { background-color: var(--aj-red) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-beige-background-color { background-color: var(--aj-beige) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-cream-background-color { background-color: var(--aj-cream) !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-white-background-color { background-color: #fff !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-small-font-size { font-size: 13px !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-normal-font-size { font-size: 15px !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-large-font-size { font-size: 19px !important; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-aj-xlarge-font-size { font-size: 26px !important; line-height: 1.5; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-text-align-center { text-align: center; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-text-align-right { text-align: right; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .has-background { padding: 1.25rem 1.5rem; border-radius: 12px; }

/* ---------- 並べ方（WordPress の「横並び・縦並び」） ---------- */
:is(#articleContent, #caseContent) .is-layout-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
:is(#articleContent, #caseContent) .is-layout-flex > * { margin: 0; }
:is(#articleContent, #caseContent) .is-content-justification-center { justify-content: center; }
:is(#articleContent, #caseContent) .is-content-justification-right { justify-content: flex-end; }
:is(#articleContent, #caseContent) .is-content-justification-space-between { justify-content: space-between; }
:is(#articleContent, #caseContent) .is-layout-flow > * + * { margin-block-start: 1.25rem; }
:is(#articleContent, #caseContent) .wp-block-columns { display: flex; gap: 2rem; margin: 2rem 0; align-items: flex-start; }
:is(#articleContent, #caseContent) .wp-block-column { flex: 1 1 0; min-width: 0; }
:is(#articleContent, #caseContent) .wp-block-column > :first-child { margin-top: 0; }
:is(#articleContent, #caseContent) .wp-block-column > :last-child { margin-bottom: 0; }
:is(#articleContent, #caseContent) .wp-block-spacer { clear: both; }
:is(#articleContent, #caseContent) .alignwide { margin-left: -6%; margin-right: -6%; max-width: none; }
@media (max-width: 781px) {
  :is(#articleContent, #caseContent) .wp-block-columns { flex-direction: column; gap: 1.25rem; }
  :is(#articleContent, #caseContent) .alignwide { margin-left: 0; margin-right: 0; }
}

/* ---------- 写真・写真と文章・ギャラリー ---------- */
:is(#articleContent, #caseContent) .wp-block-image { margin: 2rem 0; }
:is(#articleContent, #caseContent) .wp-block-image img { width: 100%; height: auto; margin: 0; border-radius: 12px; box-shadow: none; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-image figcaption,
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-element-caption { margin-top: 0.5rem; font-size: 13px; line-height: 1.7; color: var(--aj-muted); text-align: center; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-image.is-style-aj-shadow img { border-radius: 16px; box-shadow: 0 12px 30px -12px rgba(15,27,45,.35); }
:is(#articleContent, #caseContent) .wp-block-media-text { display: grid; grid-template-columns: 45% 1fr; align-items: center; gap: 2rem; margin: 2.5rem 0; }
:is(#articleContent, #caseContent) .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 45%; }
:is(#articleContent, #caseContent) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; grid-row: 1; }
:is(#articleContent, #caseContent) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-column: 1; grid-row: 1; }
:is(#articleContent, #caseContent) .wp-block-media-text__media img { width: 100%; height: auto; margin: 0; border-radius: 14px; box-shadow: none; }
:is(#articleContent, #caseContent) .wp-block-media-text__content { padding: 0; }
:is(#articleContent, #caseContent) .wp-block-media-text__content > :first-child { margin-top: 0; }
@media (max-width: 600px) {
  :is(#articleContent, #caseContent) .wp-block-media-text,
  :is(#articleContent, #caseContent) .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr !important; gap: 1rem; }
  :is(#articleContent, #caseContent) .wp-block-media-text .wp-block-media-text__media,
  :is(#articleContent, #caseContent) .wp-block-media-text .wp-block-media-text__content { grid-column: 1 !important; grid-row: auto !important; }
}
:is(#articleContent, #caseContent) .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0; }
:is(#articleContent, #caseContent) .wp-block-gallery .wp-block-image { margin: 0; flex: 1 1 calc(33.333% - 0.75rem); }
:is(#articleContent, #caseContent) .wp-block-gallery img { height: 100%; object-fit: cover; }
:is(#articleContent, #caseContent) .wp-block-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 2rem; margin: 2rem 0; border-radius: 16px; overflow: hidden; color: #fff; }
:is(#articleContent, #caseContent) .wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
:is(#articleContent, #caseContent) .wp-block-cover__background { position: absolute; inset: 0; background: rgba(15,27,45,.55); }
:is(#articleContent, #caseContent) .wp-block-cover__inner-container { position: relative; z-index: 1; }
:is(#articleContent, #caseContent) .wp-block-cover__inner-container :is(p, h2, h3) { color: #fff; }
:is(#articleContent, #caseContent) .wp-block-embed { margin: 2rem 0; }
:is(#articleContent, #caseContent) .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; }

/* ---------- 囲み（グレー・金・紺） ---------- */
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group:is(.is-style-aj-box, .is-style-aj-box-gold, .is-style-aj-box-navy) {
  margin: 2rem 0; padding: 1.5rem 1.75rem; border-radius: 16px; background: var(--aj-beige); border: 1px solid var(--aj-line);
}
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group.is-style-aj-box-gold { background: rgba(197,151,91,.08); border-color: rgba(197,151,91,.45); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group.is-style-aj-box-navy { background: var(--aj-navy); border-color: var(--aj-navy); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group.is-style-aj-box-navy :is(p, li) { color: #E8E4DF; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group.is-style-aj-box-navy :is(h2, h3, h4, strong) { color: #fff; border-color: rgba(255,255,255,.2); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group.is-style-aj-box-navy a:not(.wp-block-button__link) { color: var(--aj-gold-l); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group:is(.is-style-aj-box, .is-style-aj-box-gold, .is-style-aj-box-navy) > :first-child { margin-top: 0; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-group:is(.is-style-aj-box, .is-style-aj-box-gold, .is-style-aj-box-navy) > :last-child { margin-bottom: 0; }

/* ---------- ボタン ---------- */
:is(#articleContent, #caseContent) .wp-block-buttons { margin: 1.5rem 0; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.75rem;
  border-radius: 9999px; font-weight: 700; font-size: .9375rem; text-decoration: none; border: 0;
  background: var(--aj-navy); color: #fff; transition: transform .2s, background .2s;
}
:is(#articleContent, #caseContent) .wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-button.is-style-aj-cta .wp-block-button__link { background: var(--aj-red); box-shadow: 0 6px 16px rgba(185,28,28,.18); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-button.is-style-aj-cta .wp-block-button__link::after { content: '→'; }
:is(#articleContent, #caseContent) .wp-block-button.is-style-aj-cta .wp-block-button__link:hover { background: var(--aj-red-h); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-button.is-style-aj-navy .wp-block-button__link { background: var(--aj-navy); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-button.is-style-aj-ghost .wp-block-button__link { background: transparent; color: var(--aj-navy); box-shadow: inset 0 0 0 2px var(--aj-navy); }
:is(#articleContent, #caseContent) a.wp-block-button__link { border-bottom: 0 !important; }

/* ---------- 文字の種類 ---------- */
:is(#articleContent, #caseContent, .editor-styles-wrapper) p.is-style-aj-lead { font-size: 1.15em; font-weight: 700; line-height: 1.9; color: var(--aj-text); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) p.is-style-aj-note { font-size: 13px; line-height: 1.9; color: var(--aj-muted); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) p.is-style-aj-number { margin-bottom: .25rem; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 2.25rem; font-weight: 800; line-height: 1.2;
  background: linear-gradient(135deg, #D9B87C, #C5975B, #A67C4A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) p.is-style-aj-step { margin-bottom: .25rem; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--aj-gold-d); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) h2.is-style-aj-plain, :is(#articleContent, #caseContent, .editor-styles-wrapper) h3.is-style-aj-plain { border: 0; padding-left: 0; }

/* ---------- 表 ---------- */
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table { margin: 1.5rem 0 2rem; overflow-x: auto; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table :is(th, td) { padding: .85rem 1rem; border: 0; border-bottom: 1px solid var(--aj-line); text-align: left; vertical-align: top; line-height: 1.8; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table th { background: #FAF8F5; color: var(--aj-text); font-weight: 700; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table.is-style-aj-info th { width: 28%; white-space: nowrap; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table.is-style-aj-compare thead th { background: var(--aj-navy); color: #fff; text-align: center; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table.is-style-aj-compare td:not(:first-child) { text-align: center; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-table thead { border-bottom: 0; }
@media (max-width: 600px) { :is(#articleContent, #caseContent) .wp-block-table.is-style-aj-info th { width: 34%; white-space: normal; } }

/* ---------- 引用・区切り線・開閉 ---------- */
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-quote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--aj-gold); background: rgba(197,151,91,.05); border-radius: 0 8px 8px 0; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-quote p { font-style: italic; margin-bottom: .5rem; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-quote cite { display: block; margin-top: .5rem; font-size: 12px; font-style: normal; color: var(--aj-muted); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-pullquote { margin: 2.5rem 0; padding: 2rem 1rem; border-top: 2px solid var(--aj-gold); border-bottom: 2px solid var(--aj-gold); text-align: center; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) .wp-block-pullquote p { font-size: 1.3em; font-weight: 700; line-height: 1.7; color: var(--aj-text); }
:is(#articleContent, #caseContent, .editor-styles-wrapper) hr.wp-block-separator { border: 0; height: 1px; margin: 2.5rem auto; background: var(--aj-line); opacity: 1; }
:is(#articleContent, #caseContent, .editor-styles-wrapper) hr.wp-block-separator.is-style-aj-gold { height: 2px; background: linear-gradient(90deg, transparent, var(--aj-gold), transparent); }
:is(#articleContent, #caseContent) .wp-block-details { margin: 1rem 0; padding: 1rem 1.25rem; border: 1px solid var(--aj-line); border-radius: 12px; }
:is(#articleContent, #caseContent) .wp-block-details summary { cursor: pointer; font-weight: 700; color: var(--aj-text); }

/* ---------- 箇条書きの「・」と番号（サイト全体の style.css が消しているので、記事の中だけ戻す。10/19） ---------- */
:is(#articleContent, #caseContent) ul.wp-block-list, :is(#articleContent, #caseContent) > ul:not([class]) { list-style: disc; padding-left: 1.5em; }
:is(#articleContent, #caseContent) ol.wp-block-list, :is(#articleContent, #caseContent) > ol:not([class]) { list-style: decimal; padding-left: 1.6em; }
:is(#articleContent, #caseContent) :is(ul.wp-block-list, ol.wp-block-list) :is(ul, ol) { margin: .25rem 0; }
:is(#articleContent, #caseContent) ul.wp-block-list ul { list-style: circle; }

/* ---------- エディタの中だけ：本文の地・文字 ---------- */
.editor-styles-wrapper { font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif; color: var(--aj-gray); font-size: 15px; line-height: 2.1; }
.editor-styles-wrapper :is(h2, h3, h4) { color: var(--aj-text); }
.editor-styles-wrapper h2.wp-block-heading:not(.is-style-aj-plain) { padding: .25rem 0 .25rem 1rem; border-left: 4px solid var(--aj-gold); font-size: 1.375rem; }
.editor-styles-wrapper h3.wp-block-heading:not(.is-style-aj-plain) { padding-bottom: .5rem; border-bottom: 1px solid var(--aj-line); font-size: 1.125rem; }
.editor-styles-wrapper h4.wp-block-heading { color: var(--aj-gold-d); font-size: 1rem; }