@charset "UTF-8";

/* ==========================================================================
   content-blocks.css — 本文中のレイアウトブロック

   出所: カスタマイザーの「追加CSS」（8,604字）。
   現行は SiteOrigin と Elementor のDOMに依存したセレクタで書かれていた:

     .elementor-widget-theme-post-content .panel-layout .panel-grid-cell
       > .so-panel:first-child .siteorigin-widget-tinymce > h3

   Phase 4 で本文を静的HTML化するにあたり、同じ見た目を
   自前のクラスで再現する。

   対応関係
     .elementor-widget-theme-post-content .panel-layout   →  .entry-body
     .panel-grid                                          →  .scjc-grid
     .panel-grid:has(> cell + cell)（複数カラム行）        →  .scjc-grid--N
     .panel-grid-cell                                     →  .scjc-cell
     .so-panel（ウィジェット枠）                          →  .scjc-block
     .so-panel.widget_sow-editor（エディタウィジェット）  →  .scjc-block--editor
     .sow-image-container（画像ウィジェット）             →  .scjc-media
     .so-panel:first-child .siteorigin-widget-tinymce>h3  →  .scjc-cell > .scjc-block--editor:first-child > h3
     :has(.siteorigin-widget-tinymce > h3)                →  :has(.scjc-block--editor > h3)

   ※ 元CSSは複数カラム判定に :has() を使っていたが、変換時に列数を
     クラス（scjc-grid--N）として持たせたので :has() は不要になった。
   ========================================================================== */

/* --------------------------------------------------------------------------
   セル＝カード（1カラム行）
   本番: 背景白 / 角丸6px / 影 / padding 70px / margin 18px 0
   -------------------------------------------------------------------------- */

.entry-body .scjc-grid,
.entry-body .scjc-cell {
	overflow: visible;
}

/* 本番の .panel-grid は 1カラムでも flex。
   flex アイテムの margin は相殺しないので、カード同士の間隔は
   18px + 18px = 36px になる（block のままだと 18px に潰れる）。 */
.entry-body .scjc-grid {
	display: flex;
}

.entry-body .scjc-grid > .scjc-cell {
	flex: 1 1 auto;
	min-width: 0;
}

.entry-body .scjc-cell {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
	padding: 70px;
	margin: 18px 0;
}

/* --------------------------------------------------------------------------
   ウィジェット枠＝カード内の縦リズム

   本番では SiteOrigin のウィジェット枠 .so-panel が margin-bottom:30px を持ち、
   セル内の最後の枠だけ .panel-last-child で 0 になる。
   段落ひとつずつではなく「枠ごと」に30px空くのがポイント。
   -------------------------------------------------------------------------- */

.entry-body .scjc-block {
	margin-bottom: 30px;
}

.entry-body .scjc-block:last-child {
	margin-bottom: 0;
}

/* 本番のウィジェット枠には clearfix（::before / ::after）が入っていて、
   中の見出しの下マージンが枠の外に抜けない＝枠の高さに含まれる。
   これが無いとマージン相殺で見出しごとに 16px ずつ詰まる。 */
.entry-body .scjc-block::before {
	content: "";
	display: block;
}

.entry-body .scjc-block::after {
	content: "";
	display: table;
	clear: both;
}

/* --------------------------------------------------------------------------
   複数カラム行
   h3を含むセルだけカード化し、それ以外（画像ギャラリー等）は素のまま
   -------------------------------------------------------------------------- */

/* 本番の列間は30px（4列で 173.25px × 4 + 30px × 3 = 783px）。
   本番の複数カラム行は align-items:flex-start で、セルの高さは
   中身なりに決まる（隣の列に引き伸ばされない）。 */
.entry-body .scjc-grid--2,
.entry-body .scjc-grid--3,
.entry-body .scjc-grid--4 {
	display: grid;
	gap: 30px;
	align-items: start;
}

.entry-body .scjc-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.entry-body .scjc-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.entry-body .scjc-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.entry-body [class*="scjc-grid--"] > .scjc-cell {
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.entry-body [class*="scjc-grid--"] > .scjc-cell:has(.scjc-block--editor > h3) {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
	padding: 18px 16px;
}

.entry-body [class*="scjc-grid--"] img,
.entry-body [class*="scjc-grid--"] figure {
	box-shadow: none;
	border: 0;
	background: transparent;
}

/* --------------------------------------------------------------------------
   本文中の画像

   本番の画像ウィジェットは <a><img></a> がインラインのまま置かれていて、
   ベースラインの下に約7pxの余白ができる。画像行の高さ（137px）はその分を
   含んだ値なので、base.css の display:block を打ち消す。
   一方 .scjc-media（SiteOriginの画像ウィジェット）は flex でブロック化
   されているので余白は出ない。
   -------------------------------------------------------------------------- */

.entry-body .scjc-block img {
	display: inline;
}

.entry-body .scjc-media {
	display: flex;
}

.entry-body .scjc-media > a {
	display: block;
	max-width: 100%;
}

.entry-body .scjc-media img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   見出し h3 と下線
   本番: 22px/700 #333 中央 / 下に 180x2px の #0097D7 の線
   セル内の先頭ウィジェットの h3 だけが「セクション見出し」になる。
   -------------------------------------------------------------------------- */

.entry-body .scjc-cell > .scjc-block--editor:first-child > h3 {
	font-family: var(--scjc-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--scjc-text);
	text-align: center;
	margin: 0;
	position: relative;
	padding-bottom: 18px;
}

.entry-body .scjc-cell > .scjc-block--editor:first-child > h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 180px;
	height: 2px;
	background: var(--scjc-blue);
}

/* 本文側で寄せを指定している場合は線も追従させる */
.entry-body .scjc-cell > .scjc-block--editor:first-child > h3[style*="text-align:left"]::after,
.entry-body .scjc-cell > .scjc-block--editor:first-child > h3[style*="text-align: left"]::after {
	left: 0;
	transform: none;
}

.entry-body .scjc-cell > .scjc-block--editor:first-child > h3[style*="text-align:right"]::after,
.entry-body .scjc-cell > .scjc-block--editor:first-child > h3[style*="text-align: right"]::after {
	left: auto;
	right: 0;
	transform: none;
}

/* --------------------------------------------------------------------------
   セクション（h3のあるセル）内の h2 / p

   本文領域の既定フォントは Roboto だが、ここだけ M PLUS 1 に戻される。
   本番の追加CSSは .entry-content p / h2.wp-block-heading にも同種の指定が
   あるが、Elementor のテンプレートには .entry-content が出力されないため
   実際には効いていない。本文の既定タイポグラフィは実測値として
   pages.css にまとめてある。
   -------------------------------------------------------------------------- */

.entry-body .scjc-cell:has(.scjc-block--editor > h3) h2 {
	font-family: var(--scjc-font);
	font-size: 26px;
	font-weight: 500;
	color: var(--scjc-text);
}

.entry-body .scjc-cell:has(.scjc-block--editor > h3) p {
	font-family: var(--scjc-font);
	font-size: 16px;
	font-weight: 400;
	color: #000;
}

/* --------------------------------------------------------------------------
   モバイル（本番のカスタムCSSは 767px を境にしている）
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.entry-body .scjc-cell {
		padding: 20px;
	}

	.entry-body .scjc-cell:has(.scjc-block--editor > h3) {
		padding: 10px;
	}

	.entry-body .scjc-cell > .scjc-block--editor:first-child > h3 {
		font-size: 17px;
		padding-bottom: 16px;
	}

	.entry-body .scjc-cell > .scjc-block--editor:first-child > h3::after {
		width: 140px;
	}

	.entry-body .scjc-cell:has(.scjc-block--editor > h3) h2 {
		font-size: 20px;
	}

	.entry-body .scjc-cell:has(.scjc-block--editor > h3) p {
		font-size: 13px;
	}

	/* 複数カラムは縦積み。
	   セル同士の30pxは「h3を持つカード」だけに付く。
	   画像ギャラリーなど h3 の無いセルは、本番では
	   margin:0 !important の指定が勝っていて余白ゼロ（実測どおり）。 */
	.entry-body .scjc-grid--2,
	.entry-body .scjc-grid--3,
	.entry-body .scjc-grid--4 {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.entry-body [class*="scjc-grid--"] > .scjc-cell:has(.scjc-block--editor > h3) {
		margin-top: 30px;
	}

	/* 先頭セルは余白なし。:has() を含むセレクタに :first-child を足して
	   確実に上書きする（別セレクタにすると詳細度で負ける）。 */
	.entry-body [class*="scjc-grid--"] > .scjc-cell:has(.scjc-block--editor > h3):first-child {
		margin-top: 0;
	}

	.entry-body [class*="scjc-grid--"] > .scjc-cell:has(.scjc-block--editor > h3) {
		padding: 10px;
	}
}