/* 変数宣言 */
:root {
	/* テーマ */
	--theme_main					: #b4800b;
    --theme_sub						: #efeb7a;
    --theme_accent					: #5042e2;
    --theme_marking					: #67717a;
    --theme_translucent				: #6057812b;
    --theme_transparent				: #053d92ab;
    /* アロマティック */
    --black_0                       : #000;
	--black_1                       : #000d;
	--black_2                       : #0008;
	--black_3                       : #0004;
	--black_4                       : #0001;
    --grey_0                        : #222;
	--grey_1                        : #444;
	--grey_2                        : #999;
	--grey_3                        : #eee;
    --white_0                       : #fff;
    --white_1                       : #fffb;
    --white_2                       : #fff7;
	--white_3                       : #fff4;
	--white_4                       : #fff0;
    /* シリーズ */
    --red_0                         : #f01;
    --red_1                         : #f14;
    --red_2                         : #f39;
    --red_3                         : #f44;
    --red_4                         : #f69;
    --red_5                         : #f99;
    --red_6                         : #fcd;
    --red_7                         : #fdd;
    --blue_1                        : #02f;
	--blue_2                        : #27f;
    --blue_3                        : #68f;
    --yellow_1                      : #ff1;
    --yellow_2                      : #ff9;
    --yellow_3                      : #ffe;
	/* その他 */
    --update_1                      : #4b5;
    --update_2                      : #afc;
	--error_1                       : #d20;
    --error_2                       : #fee;
    --place_1                       : #cdd;
	/* セーフエリア余白 */
	--safe_width                    : calc(env(safe-area-inset-left) + env(safe-area-inset-right));
	/* グラデーション */
	--gradation_color_1             : linear-gradient(to right, #ff5ea0 0%, #ff8f92 51%, #ff4677 100%);
	--gradation_size_1              : 200% auto;
	--gradation_position_hover_1    : right center;
    --gradation_color_2             : linear-gradient(to bottom,var(--white_0) 50%,var(--white_1) 80%,var(--white_2) 100%);
	--gradation_color_3             : linear-gradient(to bottom, var(--theme_sub), var(--theme_translucent));
    --gradation_color_4             : linear-gradient(to right,var(--theme_main), var(--theme_sub), var(--theme_main));
    --gradation_color_5             : linear-gradient(to right,var(--theme_accent), var(--theme_marking), var(--theme_accent));
    --gradation_color_6             : linear-gradient(76deg,#e2e2e3 0%,#fff 20% 80%,#d5d5d5 100%);
    --gradation_color_7             : linear-gradient(to right, #fff0 10%, #fff 20%, #f2f1c3 90%);
    --gradation_color_8             : linear-gradient(170deg, #f99, #f66, #f99);
    --gradation_color_9             : linear-gradient(170deg, #ddd, #ccc, #ddd);
    --gradation_color_10            : linear-gradient(to bottom, #19ec38, #c4f9c3);
    --gradation_color_11            : linear-gradient(to bottom,var(--theme_main), var(--theme_translucent), var(--theme_main));
    --gradation_color_12            : linear-gradient(to bottom,var(--theme_sub), var(--theme_translucent), var(--theme_sub));
    --gradation_color_13            : radial-gradient(#fff, #ad9f7a 80%, #ad9f7a 90%);
	/* シャドウ */
	--shadow_1                      : 1px 2px 7px -1px var(--black_1);
	--shadow_hover_1                : 1px 2px 7px -1px #fff0;
    --shadow_2                      : 1px 2px 7px -1px var(--theme_transparent);
    --shadow_hover_2                : 1px 2px 7px -1px #fff0;
    --shadow_3                      : 1px 2px 7px -1px var(--theme_main);
    --shadow_4                      : 0px 3px 0px #07616b;
    --shadow_5                      : 0px 3px 0px #a40b00;
    --shadow_6                      : 1px 1px 3px var(--black_3);
    --text_shadow_1                 : 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, 1px 0px 1px #fff, 0px 1px 1px #fff, -1px 0px 1px #fff, 0px -1px 1px #fff;
    --text_shadow_2                 : 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, 1px 0px 1px #000, 0px 1px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000;
    --text_shadow_3                 : 2px 1px 1px #000d, -1px -1px 1px #fff3;
	/* フォントファミリー */
	--family_gothic_1				: Quicksand,游ゴシック体,"Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	--family_gothic_2				: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	--family_gothic_3				: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	--family_mincho_1				: "Times New Roman", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", メイリオ, Meiryo, serif;
	/* クランプ固定値 */
	--clamp_1						: (100vw - 481px) / (897 - 481);
	--clamp_2						: (100vw - 481px) / (1200 - 481);
	--clamp_3						: (100vw - 897px) / (1200 - 897);
	--clamp_4						: (100vw - 481px) / (1920 - 481);
	--clamp_5						: (100vw - 897px) / (1920 - 897);
	--clamp_6						: (100vw - 1200px) / (1920 - 1200);
}

/* 全体フォーマット */
body {
	font-family: var(--family_gothic_1);
}
h1, h2, h3, h4, h5, h6 {
	box-sizing: initial;
}
code {
	background-color: var(--black_4);
    border-radius: 3px;
    padding: 3px 8px;
    font-weight: 600;
}
img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
mark {
	background: inherit;
	color: inherit;
}
figcaption {
    margin: 0 !important;
    padding: 8px 0;
    font-size: 12px;
    color: #999;
	text-align: center;
}
/* 本体 */
.block-editor-writing-flow {
	max-width: 780px;
	margin: 0 auto;
}
/* ブロック共通 */
.wp-block {
	max-width: 840px;
	margin: 0 auto;
	word-break: break-all;
}
/* タイトル */
.editor-post-title {
    margin-top: 30px;

	.editor-post-title__input {
    font-size: 1.8rem;
}
}
/* コンテンツ */
.block-editor-block-list__layout {
	padding: 0 20px;

	/* 再利用ブロック */
	.reusable-block-edit-panel {
		width: calc(100% + 40px);
		position: relative;
		left: -20px;
	}
	.block-editor-block-list__block:not([contenteditable]):focus:after {
		width: calc(100% + 40px);
		left: -20px;
	}
}
/* プレースフォルダー */
.block-editor-rich-text__editable [data-rich-text-placeholder] {
	color: var(--place_1);
}
/* FontAwesome */
.fa-solid, .fa-regular, .fa-brands, .fa-classic, .fas, .far, .fab, .fa {
    width: auto;
}
:is(.fa-solid, .fa-regular, .fa-brands, .fa-classic) * {
	font-family: var(--family_gothic_1);
}

/* カラーモード */
p.has-background {padding: 0 1rem;}
.has-dark-red-background-color {background: #c22;}
.has-dark-red-color {color: #c22;}
.has-red-background-color {background: #f33;}
.has-red-color {color: #f33;}
.has-bright-red-background-color {background: #f66;}
.has-bright-red-color {color: #f66;}
.has-orange-background-color {background: #f60;}
.has-orange-color {color: #f60;}
.has-amber-background-color {background: #fb0;}
.has-amber-color {color: #fb0;}
.has-yellow-background-color {background: #ff0;}
.has-yellow-color {color: #ff0;}
.has-light-green-cyan-background-color {background: #8fc;}
.has-light-green-cyan-color {color: #8fc;}
.has-green-cyan-background-color {background: #0d9;}
.has-green-cyan-color {color: #0d9;}
.has-green-background-color {background: #096;}
.has-green-color {color: #096;}
.has-cyan-background-color {background: #0ff;}
.has-cyan-color {color: #0ff;}
.has-pale-cyan-blue-background-color {background: #8cf;}
.has-pale-cyan-blue-color {color: #8cf;}
.has-cyan-blue-background-color {background: #19f;}
.has-cyan-blue-color {color: #19f;}
.has-blue-background-color {background: #00d;}
.has-blue-color {color: #00d;}
.has-dark-blue-background-color {background: #118;}
.has-dark-blue-color {color: #118;}
.has-blue-purple-background-color {background: #99f;}
.has-blue-purple-color {color: #99f;}
.has-purple-background-color {background: #91f;}
.has-purple-color {color: #91f;}
.has-pale-purple-background-color {background: #dbe;}
.has-pale-purple-color {color: #dbe;}
.has-magenta-background-color {background: #f0f;}
.has-magenta-color {color: #f0f;}
.has-pink-background-color {background: #f9c;}
.has-pink-color {color: #f9c;}
.has-white-background-color {background: #fff;}
.has-white-color {color: #fff;}
.has-light-gray-background-color {background: #ddd;}
.has-light-gray-color {color: #ddd;}
.has-gray-background-color {background: #666;}
.has-gray-color {color: #666;}
.has-dark-gray-background-color {background: #333;}
.has-dark-gray-color {color: #333;}
.has-black-background-color {background: #000;}
.has-black-color {color: #000;}

/* 見出しブロック */
.post-header h1 {
	font-size: clamp(22px, var(--clamp_2) * (36 - 22) + 22px, 36px);
    letter-spacing: 0;
}
:is(h2, h3, h4, h5, h6) {
	.post-body & {
		margin: 2rem auto;
		font-size: 1.2rem;
		letter-spacing: 2px;
	}
	&.block-editor-rich-text__editable {
		margin-top: 30px;
	}
}

/* 段落ブロック */
p {
	.post-body &, &.block-editor-rich-text__editable {
		min-height: 28px;
		margin: 0 auto 30px;
		line-height: 1.8;
		text-align: justify;
	}
	&.block-editor-rich-text__editable {
		margin: 2rem auto;
	}
}

/* リンクブロック */
a {
	.post-body &, .block-editor-rich-text__editable & {
		color: var(--theme_main);
		text-decoration: none;
	}
	.has-text-color & {
		color: inherit;
	}
}

/* 画像ブロック */
.wp-block-image {
	.components-resizable-box__container {
		width: 100% !important;

		& img {
			width: auto;
		}
	}
	.aligncenter, .alignleft, .alignright, &.is-resized {
		display: flex;

		> figcaption {
			display: block;
			caption-side: unset;
		}
	}
	.aligncenter {
		justify-content: center;
	}
	.alignleft {
		justify-content: left;
	}
	.alignright {
		justify-content: right;
	}
}

/* リストブロック */
:is(ul, ol) {
	.post-body &, &.block-editor-block-list__layout, &.block-editor-block-list__layout & {
		margin: 1rem auto;
		padding-left: 20px;
	}

	.post-body &, &.block-editor-block-list__layout {
		& ul {
			list-style: circle;
		}
		& ol {
			list-style: decimal-leading-zero;
		}
		& li {
			margin: 8px 10px;
		}
	}
}
ul {
	.post-body &, &.block-editor-block-list__layout {
		list-style: disc;
	}
}
ol {
	.post-body &, &.block-editor-block-list__layout {
		list-style: decimal;
	}
}

/* 表ブロック */
.wp-block-table {
	margin: 1rem auto;
	border-radius: 3px;
	box-shadow: 0 2px 2px 0 #0001, 0 3px 1px -2px #0002, 0 1px 5px 0 #0003;
	
	:is(thead, tfoot) {
		border: none;
	}
	:is(:not(thead) > tr, figcaption) {
		border-top: 1px solid #0001;
	}
	& tbody tr {
		transition: all .4s ease;

		&:hover {
			background-color: var(--theme_transparent) !important;
		}
	}
	:is(th, td) {
		height: 3rem;
		padding: 12px 18px;
		border: none;
		color: var(--black_2);
		font-size: .8rem;
		line-height: 1.4;
		text-align: justify;
	}
	&.is-style-stripes {
		&, tr {
			border: none;
		}
	}
	& :is(&.is-style-stripes tbody, .has-background) tr:nth-child(odd) {
		background: #fff;
	}
}
.has-text-align-left {
	text-align: left !important;
}
.has-text-align-center {
	text-align: center !important;
}
.has-text-align-right {
	text-align: right !important;
}

/* 引用ブロック */
.wp-block-quote {
	width: 100%;
	margin: 1rem auto;
	padding: 10px 15px 10px 5rem;
	border: none;
	border-radius: 3px;
	background: var(--theme_transparent);
	line-height: 1.4;
	position: relative;

	&::before {
		content: "\f10e";
		color: var(--theme_transparent);
		font-family: "FontAwesome";
		font-size: 2rem;
		font-weight: bold;
		position: absolute;
		top: 50%;
		left: 20px;
		bottom: -23px;
		transform: translateY(-50%);
	}
	& p {
		line-height: 1.5;
		margin: 0;
		margin-bottom: 8px;

		:empty {
			display: none;
		}
	}
	& a:hover {
		color: var(--theme_marking);
	}
}
.wp-block-quote cite, .wp-block-quote__citation {
	margin:	0;
	color: var(--theme_accent);
	font-size: .8rem;
	display: block;
	font-style: italic;
}

/* ボタンブロック */
.wp-block-buttons .wp-block-button:last-child {
	margin-bottom: 30px;
}

/* 段落 */
.is-style-frame {
	padding: 10px 1rem !important;
	border: 2px solid #0002;
	border-radius: 3px;
}
.is-style-frame-slim {
	padding: 10px 1rem !important;
	border: 1px solid #0002;
	border-radius: 3px;
}
.is-style-frame-dashed {
	padding: 10px 1rem !important;
	border: 2px dashed #0002;
	border-radius: 3px;
}
.is-style-frame-double {
	padding: 10px 1rem !important;
	border: 3px double #0002;
	border-radius: 3px;
}
.is-style-point {
    padding: 1rem;
    background: #fff;
    border-top: solid 5px #f5a440;
    box-shadow: 0 2px 4px #0002;
}
.is-style-subtitle {
	margin-bottom: -8px !important;
    padding: 3px 10px;
    line-height: 1 !important;
    min-height: auto !important;
    font-size: .9rem !important;
    font-weight: 600;
}
/* リスト */
.is-style-ordered-blue {
	&, & ul, & ol {
		list-style: none !important;
		counter-reset: li;
	}
	& li {
		margin: 8px 1rem !important;
		position: relative;

		&::before {
			counter-increment: li;
			content: counter(li);
			position: absolute;
			top: 0;
			left: -2rem;
			width: 1.5rem;
			height: 1.5rem;
			border-radius: 50%;
			font-size: .8rem;
			background: #2196f37a;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
/* テーブル */
.wp-block-table {
	&.is-style-border-solid :is(th, td) {
		border-left: 1px solid #0001;
		border-right: 1px solid #0001;
	}
	&.is-style-head-caption {
		display: flex;
		flex-flow: column;

		& table {
			order: 1;
		}
		& figcaption {
			min-height: 4rem;
			padding: 10px 1rem;
			border: none;
			font-size: 24px;
			color: var(--white_1);
			text-align: justify;
			font-weight: 200;
			background-color: var(--theme_translucent);
			background-size: 150%;
			background-repeat: no-repeat;
			background-position: center bottom;
			display: flex;
			align-items: flex-end;
		}
	}
}

/* グループ */
.wp-block-group__inner-container {
	padding: 0;

	.img-grid > & {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
		gap: 15px;
	}
	.img-grid & {
		& p {
			margin: 10px auto;
		}
		& img {
			width: 100%;
			height: 100%;
		}
	}
}

/* ブロックスタイル */
.bg-pink {
	background: #ffdfef;
}
.bg-yellow {
	background: #ffffbc;
}
.bg-blue {
	background: #add6ff;
}
.bg-orange {
    background: #ffd2a5;
}
.marker-pink {
	background: linear-gradient(#fff0 60%, #ffdfef 0%);
}
.marker-yellow {
	background: linear-gradient(#fff0 60%, #ffffbc 0%);
}
.marker-blue {
	background: linear-gradient(#fff0 60%, #add6ff 0%);
}
.marker-orange {
    background: linear-gradient(#fff0 60%, #ffd2a5 0%);
}
.under-black {
	background: linear-gradient(#fff0 99%, #000 0%);
}

/* カスタムマージン */
.mt0 {
	margin-top: 0 !important;
}
.mt1 {
	margin-top: 1rem !important;
}
.mt2 {
	margin-top: 2rem !important;
}
.mt3 {
	margin-top: 3rem !important;
}
.mb0 {
	margin-bottom: 0 !important;
}
.mb1 {
	margin-bottom: 1rem !important;
}
.mb2 {
	margin-bottom: 2rem !important;
}
.mb3 {
	margin-bottom: 3rem !important;
}

/* カスタムラインハイト */
.lh0 {
	line-height: 1 !important;
}
.lh1 {
	line-height: 2 !important;
}
.lh2 {
	line-height: 2.5 !important;
}
.lh3 {
	line-height: 3.5 !important;
}

/* カスタムリスト */
:is(.list1, .list2) {
	margin-left: 1rem !important;
	padding-left: 1.1rem;
	position: relative;
	transition: all .4s ease;

	&::before {
		font-family: "FontAwesome";
		font-size: 16px;
		font-weight: 900;
		width: 1.2rem;
		color: inherit;
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		display: flex;
		align-items: center;
	}
}
.list1::before {
	content: "\f00c";
	font-size: 16px;
	color: #f00;
}
.list2::before {
	content: "\f111";
	font-size: 10px;
}

/* カスタムアンダーライン */
.ul {
	text-decoration: underline;
}
.pink-ul1 {
	background: linear-gradient(transparent 60%, #ffdfef 0%);
}
.yellow-ul1 {
	background: linear-gradient(transparent 60%, #ffffbc 0%);
}
.blue-ul1 {
	background: linear-gradient(transparent 60%, #add6ff 0%);
}
.black-ul0 {
	background: linear-gradient(transparent 99%, #000 0%);
}

/* ブロックスタイル（見出し） */
.is-style-headline, .is-style-top-headline, .is-style-side-headline {
	width: min(100%, 1200px);
	color: var(--black_0);
	font-size: clamp(18px, var(--clamp_2) * (22 - 18) + 18px, 22px);
    letter-spacing: clamp(1px, var(--clamp_2) * (2 - 1) + 2px, 2px);
}

/* ブロックスタイル（見出し）-regular- */
.is-style-headline {
	margin: 10px auto 30px;
	text-align: center;
    position: relative;

	&::after {
		content: attr(data-text);
		display: block;
		line-height: 1;
		font-size: clamp(12px, var(--clamp_2) * (16 - 12) + 12px, 16px);
		letter-spacing: 0;
	}
	& strong {
		font-weight: unset;
	}
}

/* ブロックスタイル（見出し）-side- */

/* ブロックスタイル（見出し）-top- */