/* そよふく ブロックスタイル
 * 旧 Shortcodes Ultimate（固定ページ193）の見た目を、ブロックエディタの「スタイル」で再現。
 * 色を変えたいときは :root の変数だけ変えればOK。
 * フロント（全ページ）とブロックエディタの両方で読み込まれます。 */

:root {
	--soyo-voice-box:   #ebaa12; /* 口コミボックス */
	--soyo-feature-box: #bd6856; /* 特徴ボックス */
	--soyo-plain-box:   #d9cfc1; /* シンプル枠 */
	--soyo-red:         #ac4337; /* 続きを読む */
	--soyo-orange:      #ff6c00; /* 他の口コミを見る */
	--soyo-blue:        #4169e1; /* 口コミを投稿する */
	--soyo-qa:          #ec8f43; /* 詳しく知る */
	--soyo-brown:       #62300b; /* 訪問エリア */
	--soyo-accent:      #bc611e; /* 見出しアイコン */
	--soyo-btn-icon:    #f5f4d3;
}/* ---------- 自由編集エリア全体 ---------- */
.soyo-free-area { margin: 0 0 40px; }.soyo-free-area::after { content: ""; display: table; clear: both; }.soyo-free-area .wp-block-columns { gap: 20px; margin-bottom: 20px; }.soyo-free-area .wp-block-buttons { gap: 10px; }/* ---------- 見出し ---------- */
/* 中央・左右に線 */
.wp-block-heading.is-style-soyo-heading {
	display: flex; align-items: center; gap: 1em;
	margin-top: 0; margin-bottom: 24px; text-align: center;
	font-size: 20px; line-height: 1.5; font-weight: bold;
	border: none; background: none; padding: 0;
}.wp-block-heading.is-style-soyo-heading::before,
.wp-block-heading.is-style-soyo-heading::after {
	content: ""; flex: 1 1 0; border-top: 1px solid #ccc;
}/* 手のアイコン付き */
.wp-block-heading.is-style-soyo-service-title {
	margin-top: 0; margin-bottom: 20px; font-size: 20px; line-height: 1.5; font-weight: bold;
	border: none; background: none; padding: 0;
}.wp-block-heading.is-style-soyo-service-title::before {
	content: "\f0a4"; font-family: FontAwesome; font-weight: normal;
	color: var(--soyo-accent); font-size: 1.3em; margin-right: .4em; vertical-align: -2px;
}/* チェックアイコン付き */
.wp-block-heading.is-style-soyo-check {
	margin-top: 0; margin-bottom: 8px; font-size: 1.1em; font-weight: bold;
	border: none; background: none; padding: 0;
}.wp-block-heading.is-style-soyo-check::before {
	content: "\f00c"; font-family: FontAwesome; font-weight: normal;
	color: var(--soyo-qa); margin-right: .4em;
}/* ---------- ボックス（グループ） ---------- */
.wp-block-group.is-style-soyo-box-voice,
.wp-block-group.is-style-soyo-box-feature,
.wp-block-group.is-style-soyo-box-plain {
	--box: var(--soyo-plain-box);
	display: flex; flex-direction: column;
	height: 100%; box-sizing: border-box;
	margin-top: 0; margin-bottom: 0; padding: 0 14px 14px;
	border: 2px solid var(--box); border-radius: 4px; background: #fff;
	line-height: 1.8;
}.wp-block-group.is-style-soyo-box-voice { --box: var(--soyo-voice-box); }.wp-block-group.is-style-soyo-box-feature { --box: var(--soyo-feature-box); display: block; }.wp-block-group.is-style-soyo-box-plain { padding-top: 14px; }/* ボックスの1つ目の見出し＝タイトルバー */
.is-style-soyo-box-voice > .wp-block-heading:first-child,
.is-style-soyo-box-feature > .wp-block-heading:first-child,
.is-style-soyo-box-feature > .wp-block-group__inner-container > .wp-block-heading:first-child ,
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-heading:first-child{
	margin: 0 -14px 14px !important; padding: 8px 14px;
	background: var(--box); color: #fff; border: none;
	font-size: 1.05em; line-height: 1.4; font-weight: bold;
}.is-style-soyo-box-voice > .wp-block-heading:first-child,
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-heading:first-child {
	color: #000;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--box) 65%, #fff), var(--box));
}.is-style-soyo-box-voice > p,
.is-style-soyo-box-voice > .wp-block-group__inner-container > p,
.is-style-soyo-box-feature > p,
.is-style-soyo-box-feature > .wp-block-group__inner-container > p { margin: 0 0 12px; }/* 口コミ：ボタンを下にそろえる */
.is-style-soyo-box-voice > .wp-block-buttons ,
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-buttons{ margin-top: auto; }.is-style-soyo-box-feature::after { content: ""; display: table; clear: both; }/* ---------- ボタン ---------- */
.wp-block-button[class*="is-style-soyo-"] .wp-block-button__link {
	display: block; padding: 8px 24px; border: none; border-radius: 999px;
	color: #fff; text-decoration: none; text-align: center;
	font-weight: bold; line-height: 1.5; transition: opacity .2s;
}.wp-block-button[class*="is-style-soyo-"] .wp-block-button__link:hover { opacity: .85; color: #fff; }.wp-block-button[class*="is-style-soyo-"] .wp-block-button__link::before {
	font-family: FontAwesome; font-weight: normal; color: var(--soyo-btn-icon); margin-right: .4em;
}.wp-block-button.is-style-soyo-red .wp-block-button__link { background: var(--soyo-red); }.wp-block-button.is-style-soyo-red .wp-block-button__link::before { content: "\f0a9"; }/* arrow-circle-right */
.wp-block-button.is-style-soyo-orange .wp-block-button__link { background: var(--soyo-orange); padding: 14px 24px; font-size: 1.15em; }.wp-block-button.is-style-soyo-orange .wp-block-button__link::before { content: "\f075"; }/* comment */
.wp-block-button.is-style-soyo-blue .wp-block-button__link { background: var(--soyo-blue); padding: 14px 24px; font-size: 1.15em; }.wp-block-button.is-style-soyo-blue .wp-block-button__link::before { content: "\f0e5"; }/* comment-o */
.wp-block-button.is-style-soyo-qa .wp-block-button__link { background: var(--soyo-qa); padding: 8px 36px; }.wp-block-button.is-style-soyo-brown .wp-block-button__link { background: var(--soyo-brown); padding: 18px 24px; font-size: 1.4em; border-radius: 5px; }.wp-block-button.is-style-soyo-brown .wp-block-button__link::before { content: "\f0d1"; }/* truck */

/* ---------- 画像：アイコン（80px・左回り込み） ---------- */
.wp-block-image.is-style-soyo-icon,
.wp-block-image.is-style-soyo-icon.alignleft {
	float: left; margin: 4px 14px 8px 0 !important;
}.wp-block-image.is-style-soyo-icon img {
	width: 80px !important; height: 80px !important; object-fit: cover; border-radius: 0;
}/* ---------- リスト：「・」付き ---------- */
.wp-block-list.is-style-soyo-dot { list-style: none; margin: 8px 0 16px; padding: 0; }.wp-block-list.is-style-soyo-dot li { margin: 4px 0; padding: 0; background: none; }.wp-block-list.is-style-soyo-dot li::before { content: "・"; }/* ---------- カラム内の画像は幅いっぱい ---------- */
.soyo-free-area .wp-block-column > .wp-block-image:not(.is-style-soyo-icon) img { width: 100%; height: auto; }/* ---------- 新着一覧（[showwhatsnew]）まわりの余白 ---------- */
.soyo-free-area .wp-block-column > .wp-block-image { margin: 0 0 16px; }

/* ---------- スマホ ---------- */
@media (max-width: 781px) {.wp-block-group[class*="is-style-soyo-box"] { height: auto; }
}/* ---------- テーマ（Xeory）の見出しCSSに負けないための上書き ----------
 * トップの自由編集エリアは #recent_post_content（テーマのIDセレクタ）の中にあり、
 * テーマ側の h2/h3 指定が優先されてしまうため、見た目に関わる部分だけ !important で固定。 */
.wp-block-heading.is-style-soyo-heading,
.wp-block-heading.is-style-soyo-service-title {
	font-size: 20px !important; font-weight: bold !important; line-height: 1.5 !important;
	border: none !important; background: none !important; padding: 0 !important;
}.wp-block-heading.is-style-soyo-check {
	font-size: 1.1em !important; font-weight: bold !important;
	border: none !important; background: none !important; padding: 0 !important;
}.is-style-soyo-box-voice > .wp-block-heading:first-child,
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-heading:first-child,
.is-style-soyo-box-feature > .wp-block-heading:first-child,
.is-style-soyo-box-feature > .wp-block-group__inner-container > .wp-block-heading:first-child {
	font-size: 1.05em !important; font-weight: bold !important; line-height: 1.4 !important;
	padding: 8px 14px !important; border: none !important; text-align: left !important;
}.is-style-soyo-box-feature > .wp-block-heading:first-child,
.is-style-soyo-box-feature > .wp-block-group__inner-container > .wp-block-heading:first-child { color: #fff !important; background: var(--box) !important; }.is-style-soyo-box-voice > .wp-block-heading:first-child,
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-heading:first-child {
	color: #000 !important;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--box) 65%, #fff), var(--box)) !important;
}.is-style-soyo-box-voice > .wp-block-heading:first-child::before,
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-heading:first-child::before,
.is-style-soyo-box-feature > .wp-block-heading:first-child::before,
.is-style-soyo-box-feature > .wp-block-group__inner-container > .wp-block-heading:first-child::before,
.is-style-soyo-box-voice > .wp-block-heading:first-child::after,
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-heading:first-child::after,
.is-style-soyo-box-feature > .wp-block-heading:first-child::after,
.is-style-soyo-box-feature > .wp-block-group__inner-container > .wp-block-heading:first-child::after { content: none !important; display: none !important; }/* ---------- 訪問エリアの料金区分（エリア枠） ---------- */
:root {
	--soyo-area-pink:      #e3879b; --soyo-area-pink-bg:   #fff4f6;
	--soyo-area-green:     #5fa86f; --soyo-area-green-bg:  #f2f9f3;
	--soyo-area-yellow:    #e2b021; --soyo-area-yellow-bg: #fffaea;
}.wp-block-group.is-style-soyo-area-pink,
.wp-block-group.is-style-soyo-area-green,
.wp-block-group.is-style-soyo-area-yellow {
	--box: var(--soyo-area-pink); --box-bg: var(--soyo-area-pink-bg); --box-title: #fff;
	box-sizing: border-box; margin-top: 0 !important; margin-bottom: 16px !important; padding: 0 16px 6px;
	border: 2px solid var(--box); border-radius: 6px; background: var(--box-bg);
	line-height: 1.9;
}.wp-block-group.is-style-soyo-area-green { --box: var(--soyo-area-green);  --box-bg: var(--soyo-area-green-bg); }.wp-block-group.is-style-soyo-area-yellow { --box: var(--soyo-area-yellow); --box-bg: var(--soyo-area-yellow-bg); --box-title: #4a3800; }/* 1つ目の見出し＝色付きのタイトルバー */
[class*="is-style-soyo-area-"] > .wp-block-heading:first-child ,
[class*="is-style-soyo-area-"] > .wp-block-group__inner-container > .wp-block-heading:first-child{
	margin: 0 -16px 12px !important; padding: 8px 16px !important;
	background: var(--box) !important; color: var(--box-title) !important;
	border: none !important; border-radius: 3px 3px 0 0;
	font-size: 1.1em !important; font-weight: bold !important; line-height: 1.4 !important; text-align: left !important;
}[class*="is-style-soyo-area-"] > .wp-block-heading:first-child::before,
[class*="is-style-soyo-area-"] > .wp-block-group__inner-container > .wp-block-heading:first-child::before,
[class*="is-style-soyo-area-"] > .wp-block-heading:first-child::after,
[class*="is-style-soyo-area-"] > .wp-block-group__inner-container > .wp-block-heading:first-child::after { content: none !important; display: none !important; }[class*="is-style-soyo-area-"] > p,
[class*="is-style-soyo-area-"] > .wp-block-group__inner-container > p { margin: 0 0 10px; }[class*="is-style-soyo-area-"] a { font-weight: bold; }/* 訪問エリアボタンと枠のあいだの余白 */
.wp-block-button.is-style-soyo-brown { margin-bottom: 20px; }

/* ---------- クラシックテーマ対応 ----------
 * Xeory などでは、グループの中身が .wp-block-group__inner-container で包まれるので、
 * 包みの中でもボックスの並び（ボタンを下に揃える等）が効くようにする */
.wp-block-group[class*="is-style-soyo-"] > .wp-block-group__inner-container { margin: 0; padding: 0; }
.wp-block-group.is-style-soyo-box-voice > .wp-block-group__inner-container {
	display: flex; flex-direction: column; flex: 1 1 auto;
}
.is-style-soyo-box-voice > .wp-block-group__inner-container > .wp-block-buttons { margin-top: auto; }
.is-style-soyo-box-feature > .wp-block-group__inner-container::after { content: ""; display: table; clear: both; }
/* 特徴の見出しは左寄せ（テーマの中央寄せを打ち消す） */
.wp-block-heading.is-style-soyo-service-title { text-align: left !important; }