/* ===============================
   鳩環屋 本文の見た目（「この環について」・ご利用ガイド・よくある質問・特定商取引法など）
   見本：dev/design/content-styles.html ／ しくみ：includes/welcart-content.php
   お店の画面（.entry-content・Welcart の商品説明 .item-description）と、
   WordPress の編集画面（.editor-styles-wrapper）の両方で同じ見た目にする
   色は colors.css の変数。文字の大きさ・余白は site.css の変数（編集画面ではここで決めた予備の値）
   =============================== */

/* 編集画面には site.css を読み込まないので、使う変数だけここでも決める（お店の画面では site.css が先に決めている） */
.editor-styles-wrapper {
	--prs-f-small: 15px;
	--prs-f-base: 18px;
	--prs-f-large: 20px;
	--prs-f-h2: 24px;
	--prs-f-h1: 28px;
	--prs-lh: 1.8;
	--prs-s-1: 4px;
	--prs-s-2: 8px;
	--prs-s-3: 12px;
	--prs-s-4: 16px;
	--prs-s-5: 24px;
	--prs-s-6: 32px;
	--prs-r-small: 8px;
	font-family: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

/* ===============================
   文・見出し・箇条書き（自動でこの形）
   =============================== */
:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) p {
	margin: 0 0 1em;
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

/* 大きい見出し：左に青い線（カート・会員ページの見出しと同じ形） */
:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) h2,
.NP-section-title {
	margin: var(--prs-s-6) 0 var(--prs-s-4);
	padding: 0 0 0 var(--prs-s-3);
	border: 0;
	border-left: 6px solid var(--prs-color-main);
	color: var(--prs-color-text);
	font-size: var(--prs-f-h2);
	font-weight: 700;
	line-height: 1.5;
}

/* 小見出し：青い文字 */
:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) h3,
.NP-subtitle {
	margin: var(--prs-s-5) 0 var(--prs-s-2);
	padding: 0;
	border: 0;
	color: var(--prs-color-main);
	font-size: var(--prs-f-large);
	font-weight: 700;
	line-height: 1.5;
}

:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) h4 {
	margin: var(--prs-s-4) 0 var(--prs-s-2);
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	font-weight: 700;
	line-height: 1.6;
}

:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) :is(ul, ol) {
	margin: 0 0 1em;
	padding: 0 0 0 1.5em;
}

:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) li {
	margin: 0 0 var(--prs-s-1);
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) :is(strong, b) {
	font-weight: 700;
}

/* ===============================
   表（特定商取引法・送料など）：左の列はベージュ
   見出しのマス（th）か、2列の表の左のマス（本番の特定商取引法の表 .tokushoho-table もこれで同じ形になる）
   =============================== */
:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) table {
	width: 100%;
	margin: 0 0 1em;
	border: 0;
	border-collapse: collapse;
}

:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) :is(th, td) {
	padding: var(--prs-s-3) var(--prs-s-4);
	border: 1px solid var(--prs-color-border);
	background: var(--prs-color-white);
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	line-height: 1.7;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

/* マスの中の箇条書き・段落：最後のものの下の余白はいらない（マスの下があきすぎるため） */
:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) :is(th, td) > :is(ul, ol, p):last-child {
	margin-bottom: 0;
}

:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) th,
:is(body.prs-site .entry-content, body.prs-site .item-description, .editor-styles-wrapper) tr > td:first-child:nth-last-child(2) {
	width: 30%;
	background: var(--prs-color-beige);
	font-weight: 700;
}

/* スマホ：2列の表は、左のマスを上・右のマスを下に */
@media (max-width: 600px) {
	:is(body.prs-site .entry-content, body.prs-site .item-description) tr:has(> :is(th, td):nth-child(2):last-child) > :is(th, td) {
		display: block;
		width: auto;
	}

	:is(body.prs-site .entry-content, body.prs-site .item-description) tr:has(> :is(th, td):nth-child(2):last-child) > :is(th, td):first-child {
		border-bottom: 0;
	}
}

/* ===============================
   押して選ぶ箱（段落の「スタイル」）
   名前は config の 'content' → 'block_styles'
   =============================== */
.is-style-prs-note,
.is-style-prs-important,
.is-style-prs-info,
.NP-text.YE,
.NP-text.RD,
.important-text,
.purchase-info {
	margin: 0 0 1em;
	padding: var(--prs-s-3) var(--prs-s-4);
	border: 0;
	border-left: 6px solid;
	border-radius: var(--prs-r-small);
	font-size: var(--prs-f-base);
	font-weight: 700;
	line-height: 1.7;
}

/* 注意（黄）：発送までの日数など、気をつけてほしいこと */
.is-style-prs-note,
.NP-text.YE,
.important-text {
	border-color: var(--prs-color-accent);
	background: var(--prs-color-wait-bg);
	color: var(--prs-color-wait);
}

/* 大事（赤）：「5文字以上は印刷できません」のように、できないこと */
.is-style-prs-important,
.NP-text.RD {
	border-color: var(--prs-color-error);
	background: var(--prs-color-error-bg);
	color: var(--prs-color-error);
}

/* 案内（青）：補足の説明 */
.is-style-prs-info,
.purchase-info {
	border-color: var(--prs-color-main);
	background: var(--prs-color-main-light);
	color: var(--prs-color-text);
	font-weight: 400;
}

/* ===============================
   今の本番の商品説明の飾り（追加CSSの名前）を、新しい見た目に
   本番の商品説明・特定商取引法のページを書きなおさなくてもいいように
   =============================== */
.NP-title {
	margin: 0 0 var(--prs-s-4);
	padding: 0;
	border: 0;
	color: var(--prs-color-text);
	font-size: var(--prs-f-h1);
	font-weight: 700;
	line-height: 1.4;
}

.NP-text {
	margin: 0 0 1em;
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

/* 赤い太字だったもの → 黒い太字（赤は「大事」の箱だけに使う） */
.NP-text.highlight {
	color: var(--prs-color-text);
	font-weight: 700;
}

.purchase-info .guest {
	display: inline-block;
	margin-right: var(--prs-s-3);
}

.purchase-info .member {
	display: inline-block;
	color: var(--prs-color-main);
	font-weight: 700;
}