/* ノーコード記事（body.smb-nocode）だけに読み込む表示用CSS。既存記事には読み込まれない。
   既存記事で手書きされていた style 属性（最新60記事で多いもの）をここにまとめて、全記事で統一する。 */

/* 隙間：段落・リスト・定義リスト・表・画像の下に1行分（既存記事の style="margin-bottom: 1em" 相当）
   画像は reset.css で余白0になっているため、ここで付ける
   （中央寄せの画像は <div class="wp-block-image"><figure> で出力されるので、タグ名を付けずに指定する） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body .wp-block-image,
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body p:not(.toc_title), /* 目次の「目次」（p.toc_title）は除く：閉じたときに余白が残るため */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ul.wp-block-list,
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ol.wp-block-list,
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body dl,
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table {
	margin-bottom: 1em;
}

/* 「メリット」など短い太字だけの段落（取り込み時に smb-label を付ける）：下の余白なしで次の文章・箇条書きと詰める
   本番記事の「<strong>メリット</strong><br>本文」と同じ見た目 */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body p.smb-label {
	margin-bottom: 0;
}

/* 「太字の項目名＋改行＋説明」のように改行を含む項目がある箇条書きは、項目どうしの間を1行分あける
   （1行だけの項目の箇条書きは詰めたまま） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ul.wp-block-list:has(br) > li:not(:last-child),
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ol.wp-block-list:has(br) > li:not(:last-child) {
	margin-bottom: 1em;
}

/* チェックリスト（箇条書きのスタイル「チェックリスト」を選んだものだけ）：行頭の●を□にする。既存記事の「□」と同じ見た目 */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ul.wp-block-list.is-style-smb-check {
	list-style: none;
	margin-left: 0.3rem;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ul.wp-block-list.is-style-smb-check > li {
	position: relative;
	padding-left: 1.4em;
	cursor: pointer;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ul.wp-block-list.is-style-smb-check > li::before {
	content: "□";
	position: absolute;
	left: 0;
}
/* 押すとチェックが入る（もう一度押すと消える）。切り替えは nocode.php の小さなスクリプト。再読み込みで元に戻る */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body ul.wp-block-list.is-style-smb-check > li.is-checked::before {
	content: "☑";
}

/* コラムの囲み（ポイントボックス／コラムボックス）の中の「コラム見出し」：既存記事の .column-title（main-style.css）と同じ見た目 */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body .column dd p.is-style-smb-column-title {
	font-size: 22px;
	font-weight: bold;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: solid 1px #006D24;
}
/* 囲みの中の最後の段落・箇条書きなどの下の余白は、枠の内側の余白と重ならないようになくす（既存記事と同じ） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body .column dd > :last-child {
	margin-bottom: 0;
}

/* まとめ見出し（h2.last-summary）の本のアイコン：main-style.css は見出しの文字の後ろから -98px 戻して置くため、
   文字が「まとめ」3文字のときしか正しい位置にならない。文字の前に置き直して、どんな見出しでも同じ位置にする
   （「まとめ」3文字のときは今までと同じ位置：文字の始まりから 38px 左） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single h2.wp-block-heading.last-summary::after {
	display: none;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single h2.wp-block-heading.last-summary::before {
	content: "";
	position: relative;
	display: inline;
	background: url(../../../images/book.svg) left 7px no-repeat;
	padding-left: 30px;
	margin-left: -38px;
	margin-right: 8px; /* アイコンの分だけ文字がずれないように戻す */
}

/* FAQ見出し（h2.faq-summary）の吹き出しアイコン：まとめ見出しと同じく、main-style.css は「FAQ」3文字のときしか位置が合わない。
   文字の前に置き直して、「よくある質問（Q&A）」などどんな見出しでも同じ位置にする */
body.smb-nocode #wrapper main .main-contents section.left-contents.single h2.wp-block-heading.faq-summary::after {
	display: none;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single h2.wp-block-heading.faq-summary::before {
	content: "";
	position: relative;
	display: inline;
	background: url(../../../images/faq.svg) left 5px no-repeat;
	padding-left: 30px;
	margin-left: -38px;
	margin-right: 8px;
	/* main-style.css の h2 の ::before（三角の飾り）の指定を打ち消す */
	width: auto;
	height: auto;
	border: none;
	vertical-align: baseline;
}

/* タイトル下のリード（抜粋）：原稿で段落が分かれていれば、段落の間を1行分あける（1段落だけのリードは変わらない） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-excerpt-text p + p {
	margin-top: 1.6rem;
}

/* 小見出し（H4）の下の余白を詰める（main-style.css は margin-bottom 20px ＋ padding-bottom 10px） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body h4.wp-block-heading {
	margin-bottom: 10px;
	padding-bottom: 0;
}

/* スペーサーの3サイズ（小・中・大）。PC / SP（480px以下、sp-main-style.css と同じ境目）で高さを切り替える
   ブロックが書き込む高さ（style属性）より優先させるため !important */
body.smb-nocode .post-content-body .wp-block-spacer.is-style-smb-s { height: 20px !important; }
body.smb-nocode .post-content-body .wp-block-spacer.is-style-smb-m { height: 40px !important; }
body.smb-nocode .post-content-body .wp-block-spacer.is-style-smb-l { height: 80px !important; }
@media screen and (max-width: 480px) {
	body.smb-nocode .post-content-body .wp-block-spacer.is-style-smb-s { height: 10px !important; }
	body.smb-nocode .post-content-body .wp-block-spacer.is-style-smb-m { height: 20px !important; }
	body.smb-nocode .post-content-body .wp-block-spacer.is-style-smb-l { height: 40px !important; }
}

/* 注釈（出典など）：既存記事の style="font-size: 0.8em" 相当 */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body .smb-note {
	font-size: 0.8em;
	/* 行の高さは段落（p）の 1.6rem が引き継がれるため指定し直す。
	   インライン要素のままだと行の高さが段落の値より小さくならないので inline-block にする */
	display: inline-block;
	vertical-align: top;
	line-height: 1.2rem;
}

/* 表：横スクロール・グレー枠・オレンジ見出し行（既存記事の手書きstyle相当） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #ddd;
	width: 100%;
	min-width: 600px;
	/* 文字の大きさは本番の手書きの表と同じ16px（main-style.css の .wp-block-table table は14px） */
	font-size: 16px;
	/* ブロックエディタ標準の「列幅を均等に固定」（has-fixed-layout）を解除し、本番の手書き表と同じく中身に合わせる */
	table-layout: auto;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table thead {
	background: #f8b400;
	color: #fff;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table tr th,
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table tr td {
	display: table-cell;
	width: auto;
	min-height: 0;
	padding: 8px;
	border: 1px solid #ddd;
	background: none;
	color: inherit;
	vertical-align: middle;
	white-space: normal;
}
/* 長い英数字・URLも途中で折り返す（見出し行を含む全セル。短い見出しは幅に余裕があれば1行のまま） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table th,
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table td {
	overflow-wrap: anywhere;
}
/* 10文字以内の短いセルは折り返さない（印は nocode.php の render_block_core/table で付ける） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table .smb-nowrap {
	white-space: nowrap;
}
/* 列の幅は中身の量に合わせてブラウザが自動配分する。
   1列目（項目名）は最低10em、それ以外の列も最低8em（長い文だけの列が1〜2文字幅まで細くならないように。
   幅は余白込みなので、文字は1行に約9文字・約7文字）。画面に収まらない表は横スクロールになる */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table tbody th {
	min-width: 10em;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table td {
	min-width: 8em;
}
/* 7列以上の表は、1列あたり約110pxを確保して横スクロールにする（細長くなりすぎ防止） */
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table:has(tr > :nth-child(7)) {
	min-width: 770px;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table:has(tr > :nth-child(8)) {
	min-width: 880px;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table:has(tr > :nth-child(9)) {
	min-width: 990px;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table:has(tr > :nth-child(10)) {
	min-width: 1100px;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table:has(tr > :nth-child(12)) {
	min-width: 1320px;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table thead th {
	color: #fff;
}
body.smb-nocode #wrapper main .main-contents section.left-contents.single .post-content-body figure.wp-block-table table tbody th {
	background: #fff9ec;
}