/*
 * 記事本文とブロックのスタイル。
 * サイト表示（.entry-content）と編集画面（.editor-styles-wrapper）の両方で読み込まれます。
 */

/* ==========================================================
   変数
   ========================================================== */
:root {
	--bg: #faf6f0;
	--ink: #4b4742;
	--brown: #826b63;
	--line: #e9e1d6;
	--white: #fff;
	--teal: #12b5b9;
	--teal-dark: #0a8388;
	--teal-pale: #e4f6f6;
	--pink: #e98fa3;
	--pink-dark: #c9596f;
	--pink-pale: #fdeeee;
	--yellow: #ffd166;
	--yellow-dark: #f2ac2b;
	--yellow-pale: #fff6df;
	--blue: #a5c3db;
	--blue-dark: #4d7fa6;
	--blue-pale: #edf4f9;
	--accent: var(--teal);
	--accent-dark: var(--teal-dark);
	--accent-pale: var(--teal-pale);
	--font-ja: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--font-en: "Quicksand", var(--font-ja);
	--radius: 24px;
	--container: 1120px;
	--bunting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 18'%3E%3Cpath d='M1 3l13 3-9 10z' fill='%2312b5b9'/%3E%3Cpath d='M17 5h13l-6.500 12z' fill='%23ffd166'/%3E%3Cpath d='M32 6l13-3-4 13z' fill='%23e98fa3'/%3E%3C/svg%3E");
}

.is-teal { --accent: var(--teal); --accent-dark: var(--teal-dark); --accent-pale: var(--teal-pale); }
.is-pink { --accent: var(--pink); --accent-dark: var(--pink-dark); --accent-pale: var(--pink-pale); }
.is-yellow { --accent: var(--yellow); --accent-dark: #a56b00; --accent-pale: var(--yellow-pale); }
.is-blue { --accent: var(--blue); --accent-dark: var(--blue-dark); --accent-pale: var(--blue-pale); }

/* ==========================================================
   基本の文字組み
   ========================================================== */
.entry-content { font-size: 1.03rem; line-height: 2.05; overflow-wrap: anywhere; }
.entry-content > * + * { margin-top: 1.6em; }

:root .editor-styles-wrapper {
	background: #fff; color: var(--ink);
	font-family: var(--font-ja); font-weight: 500; font-size: 1.03rem; line-height: 2.05; letter-spacing: .04em;
}
.editor-styles-wrapper a { color: var(--teal-dark); }
.editor-styles-wrapper .wp-block-post-title { font-size: clamp(1.4rem, 4.2vw, 2rem); font-weight: 700; line-height: 1.6; letter-spacing: .05em; }

/* ==========================================================
   見出し・リスト・表など
   ========================================================== */
:is(.entry-content, .editor-styles-wrapper) h2 {
	position: relative; margin-top: 2.8em; padding: .7em 1em .7em 1.2em;
	font-size: clamp(1.2rem, 3.4vw, 1.45rem); font-weight: 700; line-height: 1.6;
	background: var(--teal-pale); border-radius: 16px;
}
:is(.entry-content, .editor-styles-wrapper) h2::before {
	content: ""; position: absolute; left: 14px; top: -11px; width: 46px; height: 18px;
	background: var(--bunting) center / contain no-repeat;
}
:is(.entry-content, .editor-styles-wrapper) h3 {
	margin-top: 2.4em; padding: .15em 0 .15em .8em; font-size: clamp(1.1rem, 3vw, 1.25rem); font-weight: 700; line-height: 1.5;
	border-left: 7px solid var(--pink); border-radius: 4px;
}
:is(.entry-content, .editor-styles-wrapper) h4 {
	margin-top: 2em; font-size: 1.08rem; font-weight: 700; line-height: 1.5; display: table;
	background: linear-gradient(transparent 62%, var(--yellow) 62%); padding: 0 .2em;
}

:is(.entry-content, .editor-styles-wrapper) :is(ul:not([class]), ol:not([class]), .wp-block-list) {
	padding: 1.1em 1.4em 1.1em 2.6em; background: var(--yellow-pale); border-radius: 18px;
}
:is(.entry-content, .editor-styles-wrapper) :is(ul:not([class]), ul.wp-block-list) { list-style: none; }
:is(.entry-content, .editor-styles-wrapper) :is(ul:not([class]), ul.wp-block-list) > li { position: relative; }
:is(.entry-content, .editor-styles-wrapper) :is(ul:not([class]), ul.wp-block-list) > li::before {
	content: ""; position: absolute; left: -1.2em; top: .82em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
}
:is(.entry-content, .editor-styles-wrapper) :is(ol:not([class]), ol.wp-block-list) { list-style: decimal; }
:is(.entry-content, .editor-styles-wrapper) ol li::marker { color: var(--pink-dark); font-family: var(--font-en); font-weight: 700; }
:is(.entry-content, .editor-styles-wrapper) li + li { margin-top: .4em; }
:is(.entry-content, .editor-styles-wrapper) li :is(ul, ol) { background: none !important; padding: .3em 0 0 1.4em !important; }

:is(.entry-content, .editor-styles-wrapper) strong { font-weight: 700; background: linear-gradient(transparent 68%, #ffe7a8 68%); }
:is(.entry-content, .editor-styles-wrapper) blockquote {
	position: relative; margin-inline: 0; padding: 1.2em 1.4em 1.2em 3.2em;
	background: var(--bg); border: 0; border-radius: 18px; font-size: .96em;
}
:is(.entry-content, .editor-styles-wrapper) blockquote::before {
	content: "“"; position: absolute; left: 14px; top: 0;
	font-family: Georgia, serif; font-size: 3.4rem; line-height: 1.3; color: var(--pink);
}
:is(.entry-content, .editor-styles-wrapper) img { border-radius: 14px; }
:is(.entry-content, .editor-styles-wrapper) figure { margin-inline: 0; }
:is(.entry-content, .editor-styles-wrapper) figcaption { font-size: .8rem; color: var(--brown); text-align: center; margin-top: .6em; }

:is(.entry-content, .editor-styles-wrapper) table {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; line-height: 1.7;
	border: 2px solid var(--line); border-radius: 14px; overflow: hidden;
}
:is(.entry-content, .editor-styles-wrapper) :is(th, td) {
	padding: .7em .9em; border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left;
}
:is(.entry-content, .editor-styles-wrapper) th { background: var(--teal-pale); font-weight: 700; }
:is(.entry-content, .editor-styles-wrapper) tr:last-child > * { border-bottom: 0; }
:is(.entry-content, .editor-styles-wrapper) tr > *:last-child { border-right: 0; }
:is(.entry-content, .editor-styles-wrapper) .wp-block-table { overflow-x: auto; }

:is(.entry-content, .editor-styles-wrapper) pre {
	background: #3f3a36; color: #f7f1ea; padding: 1.2em 1.4em; border: 0; border-radius: 16px; overflow-x: auto;
	font-size: .86rem; line-height: 1.7; letter-spacing: 0;
}
:is(.entry-content, .editor-styles-wrapper) code { font-family: Consolas, Menlo, monospace; letter-spacing: 0; }
/* プログラムのコードは途中で折り返さず、枠の中で横にスクロールさせる（字下げが崩れないように） */
.entry-content pre code { white-space: pre; overflow-wrap: normal; }
:is(.entry-content, .editor-styles-wrapper) :not(pre) > code { background: var(--pink-pale); color: var(--pink-dark); padding: .15em .5em; border-radius: 6px; font-size: .9em; }
:is(.entry-content, .editor-styles-wrapper) hr {
	border: 0; height: 6px; width: 120px; margin: 3em auto; border-radius: 6px;
	background: linear-gradient(90deg, var(--teal) 0 34%, var(--yellow) 34% 67%, var(--pink) 67%);
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-button__link {
	border-radius: 999px; background: var(--teal-dark); color: #fff; font-weight: 700; box-shadow: 5px 5px 0 var(--yellow);
}

/* ==========================================================
   マーカー・文字装飾（Cocoonと同じクラス名）
   ========================================================== */
.marker, .marker-under { background: linear-gradient(transparent 62%, #ffe58a 62%); }
.marker-red, .marker-under-red { background: linear-gradient(transparent 62%, #ffc9d3 62%); }
.marker-blue, .marker-under-blue { background: linear-gradient(transparent 62%, #bfe9ea 62%); }
.entry-content .bold { font-weight: 700; }
.entry-content .red { color: var(--pink-dark); }
.entry-content .blue { color: var(--blue-dark); }

/* ==========================================================
   吹き出し（オリジナルブロックと、Cocoonで作成済みのもの共通）
   ========================================================== */
.speech-wrap { --sb: var(--teal-pale); display: flex; align-items: flex-start; gap: 18px; }
.speech-wrap.sbp-r { --sb: var(--pink-pale); flex-direction: row-reverse; }
.speech-wrap.wp-block-shigotocho-balloon { --sb: var(--accent-pale); }
.speech-person { flex: none; width: 76px; text-align: center; }
.speech-icon { margin: 0; }
.speech-icon-image {
	display: block; width: 76px; height: 76px; border-radius: 50% !important; object-fit: cover;
	background: var(--yellow-pale); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--yellow);
}
.speech-icon-image--empty { display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--brown); }
.speech-name { margin-top: 10px; font-size: .72rem; font-weight: 700; line-height: 1.3; color: var(--brown); }
.speech-balloon {
	position: relative; min-width: 0; margin-top: 6px; padding: .9em 1.2em;
	background: var(--sb); border-radius: 20px; font-size: .96em; line-height: 1.9;
}
.speech-balloon::before {
	content: ""; position: absolute; top: 22px; left: -10px;
	border: 8px solid transparent; border-left-width: 0; border-right: 12px solid var(--sb);
}
.sbp-r > .speech-balloon::before { left: auto; right: -10px; border: 8px solid transparent; border-right-width: 0; border-left: 12px solid var(--sb); }
.speech-balloon > * + * { margin-top: .8em; }

/* ==========================================================
   ボックス
   ========================================================== */
.sg-box {
	position: relative; padding: 1.6em 1.4em 1.2em;
	border: 3px solid var(--accent); border-radius: 18px; background: var(--accent-pale);
}
.entry-content > .sg-box { margin-top: 2.4em; }
.sg-box__title {
	position: absolute; top: -1em; left: 16px; max-width: calc(100% - 32px);
	display: inline-flex; align-items: center; gap: .5em; margin: 0; padding: .1em 1.1em .1em .9em;
	border-radius: 999px; background: var(--accent-dark); color: #fff;
	font-size: .82rem; font-weight: 700; line-height: 1.8; letter-spacing: .08em;
}
.sg-box__title::before {
	content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
	-webkit-mask: var(--sg-icon) center / contain no-repeat; mask: var(--sg-icon) center / contain no-repeat;
}
.sg-box--memo { --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1-5L16 4l4 4L8 20z'/%3E%3C/svg%3E"); }
.sg-box--point { --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.700V17h8v-2.300A7 7 0 0 0 12 2zM9 19h6v3H9z'/%3E%3C/svg%3E"); }
.sg-box--alert { --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2l11 19H1zM11 9v6h2V9zm0 8v2h2v-2z'/%3E%3C/svg%3E"); }
.sg-box--check { --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.500 14.500L6 12l1.500-1.500 3 3 6-6L18 9z'/%3E%3C/svg%3E"); }
.sg-box__body > * + * { margin-top: .8em; }
:is(.entry-content, .editor-styles-wrapper) :is(.sg-box__body, .speech-balloon) > :is(ul, ol) { background: none; padding-top: 0; padding-bottom: 0; padding-right: 0; }

/* ==========================================================
   ブログカード
   ========================================================== */
.entry-content > .sg-card { margin-top: 2.4em; }
.sg-card__link {
	position: relative; display: flex; align-items: center; gap: 18px; padding: 24px 20px 18px;
	border: 3px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.editor-styles-wrapper a.sg-card__link { color: var(--ink); }
a.sg-card__link:hover { color: var(--ink); border-color: var(--teal); box-shadow: 6px 6px 0 var(--teal-pale); transform: translateY(-2px); }
.sg-card__label {
	position: absolute; top: -1em; left: 16px; padding: .1em 1.1em; border-radius: 999px;
	background: var(--teal-dark); color: #fff; font-size: .76rem; font-weight: 700; line-height: 1.8; letter-spacing: .08em;
}
.sg-card__thumb { flex: none; width: 32%; max-width: 200px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--teal-pale); }
.sg-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sg-card__body { display: grid; gap: 4px; min-width: 0; }
.sg-card__title { font-size: .98rem; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.sg-card__excerpt {
	font-size: .8rem; line-height: 1.7; color: #6b655f;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==========================================================
   Cocoonで作成済みのボックス
   ========================================================== */
.entry-content :is(.blank-box, .information-box, .memo-box, .alert-box, .primary-box, .secondary-box) {
	padding: 1.1em 1.4em; border: 3px solid var(--teal); border-radius: 18px; background: #fff;
}
.entry-content :is(.memo-box, .information-box) { border-color: var(--yellow); background: var(--yellow-pale); }
.entry-content .alert-box { border-color: var(--pink); background: var(--pink-pale); }

/* ==========================================================
   編集画面だけの調整
   ========================================================== */
.editor-styles-wrapper :is(.speech-balloon, .sg-box__body) > .wp-block { margin-top: 0; margin-bottom: 0; }
.editor-styles-wrapper :is(.speech-balloon, .sg-box__body) > .wp-block + .wp-block { margin-top: .8em; }
.editor-styles-wrapper .speech-balloon { min-width: 10em; }
.editor-styles-wrapper .sg-box { margin-top: 2.4em; }

@media (max-width: 599px) {
	.entry-content { font-size: 1rem; }
	.speech-wrap { gap: 14px; }
	.speech-person { width: 58px; }
	.speech-icon-image { width: 58px; height: 58px; }
	.sg-card__link { gap: 14px; padding: 22px 14px 14px; }
	.sg-card__thumb { width: 36%; }
	.sg-card__excerpt { display: none; }
	/* スマホでは表のはばが足りず、数字や見出しが途中で折り返すので、セルの余白と文字を少し小さくする */
	:is(.entry-content, .editor-styles-wrapper) table { font-size: .86rem; }
	:is(.entry-content, .editor-styles-wrapper) :is(th, td) { padding: .6em .5em; }
}