/* ==========================================================
   DSSJ 子テーマ スタイル（フロント・エディタ共通）
   トップページ用パターン（パターン → DSSJ）の見た目。
   フロントとブロックエディタの両方に読み込まれます。
   ========================================================== */

:root {
	--dssj-navy: var(--dssj-main, #315697); /* style.css の --dssj-main と同じ色 */
	--dssj-teal: #3a9e94;   /* ボタン（代表紹介・活動実績など） */
	--dssj-blue: #2d6cc0;   /* ボタン（事業内容など） */
	--dssj-pale: #f2f6fb;   /* セクション背景 */
}

/* ---------- セクション共通 ---------- */
.dssj-section {
	padding-top: 4em;
	padding-bottom: 4em;
}
.dssj-section--pale {
	background-color: var(--dssj-pale);
}

/* 見出し：日本語＋英字サブタイトル */
.dssj-ttl {
	margin-bottom: 2em !important;
	text-align: center;
}
.dssj-ttl__main {
	color: var(--dssj-navy);
	font-size: 1.6em;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 !important;
}
.dssj-ttl__sub {
	color: var(--dssj-teal);
	font-size: .85em;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: .4em 0 0 !important;
}

/* 理念のキャッチコピー */
.dssj-catch {
	color: var(--dssj-navy);
	font-size: 1.4em;
	font-style: italic;
	font-weight: 700;
	letter-spacing: .05em;
}

/* ---------- 画像ボタンのグリッド ---------- */
/* 列の幅と間隔を固定し、旧テーマのような位置ずれを防ぐ */
.dssj-grid.wp-block-columns {
	gap: 24px;
	margin-bottom: 24px;
}
.dssj-grid .wp-block-image {
	margin: 0;
}
.dssj-grid .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .25s ease, box-shadow .25s ease;
}
.dssj-grid .wp-block-image a:hover img,
.dssj-grid .wp-block-image a:focus-visible img {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(49, 86, 151, .2);
}

/* スマホ：3列 → 2列（SWELL標準の1列だと縦に長くなりすぎるため） */
@media (max-width: 599px) {
	.dssj-grid.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 12px;
		margin-bottom: 12px;
	}
	.dssj-grid.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 6px) !important;
		flex-grow: 0;
	}
}

/* ---------- 代表メッセージ ---------- */
.dssj-message__lead {
	color: var(--dssj-navy);
	font-size: 1.25em;
	font-weight: 700;
}
.dssj-message__sign {
	font-weight: 700;
}

/* ---------- style.css の本文見出しデザインを打ち消す ---------- */
/* style.css では本文の h2 に上下線・余白が付くため、パターンの見出しだけ元に戻す */
body .post_content h2.dssj-ttl__main {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 1.6em;
	letter-spacing: .08em;
}

/* 画像リンクにホバー時の背景色が付かないようにする */
.post_content .dssj-grid a:hover {
	background-color: transparent;
}