@charset "UTF-8";

/* ==========================================================================
   siteorigin-compat.css — SiteOrigin のまま書かれた本文用

   本文を SiteOrigin Page Builder で編集し続ける運用のためのCSS。

   現行サイトのカスタマイザー「追加CSS」は、カードの見た目（白背景・角丸・影・
   padding 70px）と見出しの下線を、次の書き出しで指定していた。

     .elementor-widget-theme-post-content .panel-layout .panel-grid-cell { ... }

   このラッパーを出力しているのは Elementor なので、Elementor を止めると
   33箇所の指定がまとめて効かなくなり、本文だけ素の状態になる。
   さらにカスタマイザーの追加CSSはテーマごとの設定なので、テーマを入れ替えた
   時点でそもそも出力されない（custom_css 投稿のスラッグが旧テーマ名のため）。

   そこで、前置きを `.entry-body` に差し替えたものをテーマ側で持つ。
   これで Elementor を止めても、SiteOrigin のマークアップのまま見た目が保たれる。

   ※ 元CSSの並び順をそのまま維持している。`padding: 34px 28px` を後段の
     `padding: 70px !important` が上書きする、といった打ち消し合いがあるため、
     並べ替えると結果が変わる。

   ※ 本文を静的HTML化した投稿（.scjc-* を持つもの）には content-blocks.css が
     当たる。両者はセレクタが重ならないので併存できる。
   ========================================================================== */

/* 元CSSの先頭にある ` p { margin-block-end: 0 !important }` は移していない。
   pages.css の `.entry-body p { margin: 0 }` で同じ結果になるうえ、
   !important を持ち込むと理事長所信の段落余白（.single-message の 1em）を
   潰してしまうため。 */

/* --------------------------------------------------------------------------
   セクション見出し（h3）と下線
   セル内の先頭ウィジェットが「エディタ」で、その直下の h3 だけが対象。
   -------------------------------------------------------------------------- */

.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3 {
	font-family: "M PLUS 1", sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #333;
	text-align: center;
	margin: 0;
	position: relative;
	padding-bottom: 18px;
}

.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3::after {
	content: "";
	display: block;
	width: 180px;
	height: 2px;
	background: #0097D7;
	margin: 14px auto 0;
}

@media (max-width: 767px) {
	.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3 {
		font-size: 17px;
		padding-bottom: 16px;
	}

	.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3::after {
		width: 140px;
		margin-top: 12px;
	}
}

/* --------------------------------------------------------------------------
   セル＝カード
   影が切れないよう overflow を開けたうえで、白いカードにする。
   -------------------------------------------------------------------------- */

.entry-body .panel-grid {
	overflow: visible !important;
}

.entry-body .panel-grid-cell {
	overflow: visible !important;
	background: #fff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08) !important;
	padding: 34px 28px;
	margin: 18px 0;
}

@media (max-width: 767px) {
	.entry-body .panel-grid-cell {
		padding: 22px 16px;
	}
}

/* --------------------------------------------------------------------------
   下線を h3 の寄せに追従させる（絶対配置に置き換える）
   -------------------------------------------------------------------------- */

.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 180px;
	height: 2px;
	background: #0097D7;
	left: 50%;
	transform: translateX(-50%);
}

.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3[style*="text-align:left"]::after,
.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3[style*="text-align: left"]::after {
	left: 0;
	transform: none;
}

.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3[style*="text-align:right"]::after,
.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3[style*="text-align: right"]::after {
	left: auto;
	right: 0;
	transform: none;
}

@media (max-width: 767px) {
	.entry-body .panel-grid-cell > .so-panel:first-child .siteorigin-widget-tinymce > h3::after {
		width: 140px;
	}
}

/* --------------------------------------------------------------------------
   複数カラム行
   カード化するのは h3 を含むセルだけ。画像ギャラリー等は素のまま。
   -------------------------------------------------------------------------- */

.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) img,
.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) figure {
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}

@media (max-width: 767px) {
	.entry-body .panel-grid-cell:has(.siteorigin-widget-tinymce > h3) {
		padding: 10px !important;
	}

	.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell {
		padding: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   セクション内の h2 / p
   -------------------------------------------------------------------------- */

.entry-body .panel-grid-cell:has(.siteorigin-widget-tinymce > h3) h2 {
	font-family: "M PLUS 1", sans-serif;
	font-size: 26px;
	font-weight: 500;
	color: #333333;
}

.entry-body .panel-grid-cell:has(.siteorigin-widget-tinymce > h3) p {
	font-family: "M PLUS 1", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
}

@media (max-width: 767px) {
	.entry-body .panel-grid-cell:has(.siteorigin-widget-tinymce > h3) h2 {
		font-size: 20px;
	}

	.entry-body .panel-grid-cell:has(.siteorigin-widget-tinymce > h3) p {
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
   複数カラム行のカード化（ここが最終的な指定）
   -------------------------------------------------------------------------- */

.entry-body .panel-grid,
.entry-body .panel-grid-cell {
	overflow: visible !important;
}

.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell:has(.siteorigin-widget-tinymce > h3) {
	background: #fff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08) !important;
	padding: 18px 16px !important;
}

.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell:not(:has(.siteorigin-widget-tinymce > h3)) {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

@media (max-width: 767px) {
	.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell:has(.siteorigin-widget-tinymce > h3) {
		padding: 10px !important;
	}
}

/* --------------------------------------------------------------------------
   カードの内側の余白（PC 70px / SP 20px）
   前段の 34px 28px / 22px 16px を上書きする指定。順序が入れ替わると結果が変わる。
   -------------------------------------------------------------------------- */

.entry-body .panel-grid-cell {
	padding: 70px !important;
}

@media (max-width: 767px) {
	.entry-body .panel-grid-cell {
		padding: 20px !important;
	}

	/* 縦積みになったときのセル同士の余白 */
	.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell {
		margin-top: 30px !important;
	}

	.entry-body .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell:first-child {
		margin-top: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   画像

   現行の画像ウィジェットは <a><img></a> がインラインのまま置かれていて、
   ベースラインの下に約7pxの余白ができる。画像行の高さはその分を含んだ値なので、
   base.css の `img { display: block }` を打ち消して現行と揃える。
   一方 .sow-image-container は SiteOrigin 側が flex でブロック化しているので
   余白は出ない。そちらは block のままにする。
   -------------------------------------------------------------------------- */

.entry-body .so-panel img {
	display: inline;
}

.entry-body .sow-image-container img {
	display: block;
	max-width: 100%;
	height: auto;
}