/**
 * メディアプレックス / クリエイティブ記事（single-mediaplex, single-creative）本文用
 * 旧 .wysiwyg-front / .p-blog-article-01 に近い見え方を、DBのHTMLを変えずに再現する。
 * セレクタは main.p-detail（body クラスに依存しない）。
 * single-creative は本文が .wysiwyg-front 内にあるため、リスト等は直下 > だけだと漏れる。
 */

/* 旧 .wysiwyg-front:after */
main.p-detail .p-detail__content::after,
main.p-detail .p-detail__content .wysiwyg-front::after {
  clear: both;
  content: "";
  display: block;
}

/* 本文ブロック全体のベース（旧 8682 行付近の .p-blog-article-01 .wysiwyg-front） */
main.p-detail .p-detail__content {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

/*
 * 段落: 子セレクタ > p だけだと、キャプション内 p やラッパー内が漏れる。
 * SNS は ul のみで p が無いためそのまま適用可。
 */
main.p-detail .p-detail__content p {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin-bottom: 1em;
}

/* 画像だけの段落: インライン img の行ボックス余白を抑える */
main.p-detail .p-detail__content p > img:only-child {
  display: block;
}

/* 旧 .wysiwyg-front strong / em */
main.p-detail .p-detail__content strong,
main.p-detail .p-detail__content b {
  font-weight: bold;
}

main.p-detail .p-detail__content em,
main.p-detail .p-detail__content i {
  font-style: italic;
}

/* 直接直下のブロック要素（従来の > ルール相当）— キャプション・カード等 */
main.p-detail .p-detail__content > ul:not(.p-detail__cates):not(.p-detail__social),
main.p-detail .p-detail__content > ol,
main.p-detail .p-detail__content > blockquote,
main.p-detail .p-detail__content > table,
main.p-detail .p-detail__content > figure,
main.p-detail .p-detail__content > h1,
main.p-detail .p-detail__content > h2:not(.p-detail__ttl),
main.p-detail .p-detail__content > h3,
main.p-detail .p-detail__content > h4,
main.p-detail .p-detail__content > h5,
main.p-detail .p-detail__content > h6,
main.p-detail .p-detail__content > .blog-card,
main.p-detail .p-detail__content > .wp-caption,
main.p-detail .p-detail__content > div:not([class^="p-detail"]) {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* 見出し（旧 .wysiwyg-front h1–h6）。記事タイトル h2.p-detail__ttl は除外 */
main.p-detail .p-detail__content h1 {
  font-size: 200%;
}
main.p-detail .p-detail__content h2:not(.p-detail__ttl) {
  font-size: 180%;
}
main.p-detail .p-detail__content h3 {
  font-size: 160%;
}
main.p-detail .p-detail__content h4 {
  font-size: 140%;
}
main.p-detail .p-detail__content h5 {
  font-size: 120%;
}
main.p-detail .p-detail__content h6 {
  font-size: 100%;
}

main.p-detail .p-detail__content h1,
main.p-detail .p-detail__content h2:not(.p-detail__ttl),
main.p-detail .p-detail__content h3 {
  letter-spacing: 1px;
}

/*
 * リスト（旧 .wysiwyg-front ul / ol）
 * .p-detail__cates / .p-detail__social 以外の ul（本文・.wysiwyg-front 内を含む）
 */
main.p-detail .p-detail__content > ul:not(.p-detail__cates):not(.p-detail__social),
main.p-detail .p-detail__content > ol,
main.p-detail .p-detail__content > .wysiwyg-front > ul:not(.p-detail__cates):not(.p-detail__social),
main.p-detail .p-detail__content > .wysiwyg-front > ol {
  margin-bottom: 1.5em;
}

main.p-detail .p-detail__content > ul:not(.p-detail__cates):not(.p-detail__social),
main.p-detail .p-detail__content > .wysiwyg-front > ul:not(.p-detail__cates):not(.p-detail__social) {
  display: table;
}

main.p-detail .p-detail__content > ul:not(.p-detail__cates):not(.p-detail__social) > li,
main.p-detail .p-detail__content > .wysiwyg-front > ul:not(.p-detail__cates):not(.p-detail__social) > li {
  display: table-row;
  margin-top: 0.5em;
}

main.p-detail .p-detail__content > ul:not(.p-detail__cates):not(.p-detail__social) > li:first-child,
main.p-detail .p-detail__content > .wysiwyg-front > ul:not(.p-detail__cates):not(.p-detail__social) > li:first-child {
  margin-top: 0;
}

main.p-detail .p-detail__content > ul:not(.p-detail__cates):not(.p-detail__social) > li::after,
main.p-detail .p-detail__content > .wysiwyg-front > ul:not(.p-detail__cates):not(.p-detail__social) > li::after {
  content: "";
  display: block;
  margin-bottom: 0.5em;
}

main.p-detail .p-detail__content > ul:not(.p-detail__cates):not(.p-detail__social) > li::before,
main.p-detail .p-detail__content > .wysiwyg-front > ul:not(.p-detail__cates):not(.p-detail__social) > li::before {
  content: "•";
  display: table-cell;
  padding-right: 0.4em;
}

main.p-detail .p-detail__content > ol,
main.p-detail .p-detail__content > .wysiwyg-front > ol {
  counter-reset: table-ol;
}

main.p-detail .p-detail__content > ol > li,
main.p-detail .p-detail__content > .wysiwyg-front > ol > li {
  display: table-row;
  counter-increment: table-ol;
  margin-top: 0.5em;
}

main.p-detail .p-detail__content > ol > li:first-child,
main.p-detail .p-detail__content > .wysiwyg-front > ol > li:first-child {
  margin-top: 0;
}

main.p-detail .p-detail__content > ol > li::after,
main.p-detail .p-detail__content > .wysiwyg-front > ol > li::after {
  content: "";
  display: block;
  margin-bottom: 5px;
}

main.p-detail .p-detail__content > ol > li::before,
main.p-detail .p-detail__content > .wysiwyg-front > ol > li::before {
  content: counter(table-ol) ".";
  display: table-cell;
  padding-right: 0.5em;
  text-align: right;
}

/* SyntaxHighlighter 等: DB 上の <pre><pre class="brush:..."> とプレーンプレ */
main.p-detail .p-detail__content pre {
  margin: 0 0 1em;
  padding: 1em 1.25em;
  overflow-x: auto;
  background: #f1f2f6;
  border: 1px solid #e3e5ed;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
  tab-size: 4;
}

/*
 * Legacy記事にある <pre><pre class="brush:..."> の外側ラッパーを無効化。
 * 外側 pre が本文見出しまで巻き込むため、背景や等幅化を当てない。
 */
main.p-detail .p-detail__content pre:has(> pre[class*="brush"]),
main.p-detail .p-detail__content .wysiwyg-front pre:has(> pre[class*="brush"]) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: normal;
  overflow: visible;
}

main.p-detail .p-detail__content pre pre {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
}

main.p-detail .p-detail__content :not(pre) code {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 0.9em;
  letter-spacing: 0;
}

/* blockquote / table（destyle で潰れた分の最低限） */
main.p-detail .p-detail__content blockquote {
  margin: 1em 0 1em 2em;
  padding: 0;
}

main.p-detail .p-detail__content > table,
main.p-detail .p-detail__content > .wysiwyg-front > table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

main.p-detail .p-detail__content > table th,
main.p-detail .p-detail__content > table td,
main.p-detail .p-detail__content > .wysiwyg-front > table th,
main.p-detail .p-detail__content > .wysiwyg-front > table td {
  border: 1px solid #ddd;
  padding: 0.5em 0.75em;
}


/* SyntaxHighlighter 内部要素を互換CSSから保護（コードブロック崩れ対策） */
main.p-detail .p-detail__content .syntaxhighlighter,
main.p-detail .p-detail__content .syntaxhighlighter *,
main.p-detail .p-detail__content .syntaxhighlighter table,
main.p-detail .p-detail__content .syntaxhighlighter td,
main.p-detail .p-detail__content .syntaxhighlighter tr,
main.p-detail .p-detail__content .syntaxhighlighter ol,
main.p-detail .p-detail__content .syntaxhighlighter ul,
main.p-detail .p-detail__content .syntaxhighlighter li,
main.p-detail .p-detail__content .syntaxhighlighter pre {
  letter-spacing: 0 !important;
}

main.p-detail .p-detail__content .syntaxhighlighter table,
main.p-detail .p-detail__content .syntaxhighlighter td,
main.p-detail .p-detail__content .syntaxhighlighter th {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

main.p-detail .p-detail__content .syntaxhighlighter ul,
main.p-detail .p-detail__content .syntaxhighlighter ol {
  display: block !important;
  margin: 0 !important;
  counter-reset: none !important;
}

main.p-detail .p-detail__content .syntaxhighlighter li {
  display: block !important;
  margin: 0 !important;
}

/*
 * 画像: common.css img{width:100%} 対策。インタビュー記事の小さな寸法付き画像は width:auto のまま。
 * WordPress の絵文字・スマイリー（img.emoji / img.wp-smiley）は除外—ここに width:auto を当てると
 * wp-includes の 1em 指定より特異性で勝ち、72px 画像が本文に対して巨大に見える。
 */
main.p-detail .p-detail__content img:not(.emoji):not(.wp-smiley),
main.p-detail .p-detail__content picture img:not(.emoji):not(.wp-smiley),
main.p-detail .p-detail__content .wp-caption img:not(.emoji):not(.wp-smiley),
main.p-detail .p-detail__content figure img:not(.emoji):not(.wp-smiley),
main.p-detail .p-detail__content img[class*="wp-image-"]:not(.emoji):not(.wp-smiley),
main.p-detail .p-detail__content img[class*="attachment-"]:not(.emoji):not(.wp-smiley) {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  vertical-align: bottom;
  min-width: 0;
}

/* 絵文字・スマイリーは WordPress デフォルト（formatting.php / wp_enqueue_emoji_styles）に合わせる */
main.p-detail .p-detail__content img.emoji,
main.p-detail .p-detail__content img.wp-smiley {
  display: inline !important;
  width: 1em !important;
  max-width: none !important;
  height: 1em !important;
  max-height: 1em !important;
  margin: 0 0.07em !important;
  vertical-align: -0.1em !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}

main.p-detail .p-detail__content .wp-caption {
  max-width: 100%;
}

/* 旧 style.css .alignleft / .alignright / .aligncenter（8971–8980 付近） */
main.p-detail .p-detail__content .alignleft {
  float: left;
  margin: 0 2em 2em 0;
}

main.p-detail .p-detail__content .alignright {
  float: right;
  margin: 0 0 2em 2em;
}

main.p-detail .p-detail__content .aligncenter {
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 798px) {
  main.p-detail .p-detail__content p {
    margin-bottom: 4.0625%;
  }
}