/* Trinity サイト改修（2026-09）
 * 既存テーマ（Lightning + VK Blocks）と本番「当塾について」のトンマナに合わせる。色はテーマの設定値を使う。
 * 大きなデザイン刷新は別途行う前提。ここは並び替え・移動に伴う見た目の調整だけ。
 */

/* ---------- 英語・プログラミングLPへの常設導線（ヘッダー直下。スクロールしても上部に残る） ---------- */
/* テーマが body に overflow を指定しているため sticky は使えない。固定するかどうかと位置は site.js が実際の位置で決める
   （.is-fixed と top）。元の位置は slot が同じ高さを保つ（ページの中身がずれない）。JSが無ければ通常の位置に出るだけ */
.trinity-lpbar-slot { min-height: 61px; }
.trinity-lpbar {
	z-index: 998;
	background: var(--vk-color-custom-4, #eef6ee);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.trinity-lpbar.is-fixed { position: fixed; left: 0; right: 0; }
.trinity-lpbar__inner {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding-top: 8px;
	padding-bottom: 8px;
}
.trinity-lpbar__btn {
	flex: 0 1 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 16px;
	border-radius: 999px;
	color: #fff !important;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
	transition: filter .15s ease;
}
.trinity-lpbar__btn::after {
	content: "";
	flex: none;
	width: .5em;
	height: .5em;
	margin-left: .6em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.trinity-lpbar__btn--eiken { background: #e5004f; }        /* 英検のバナーの赤系 */
.trinity-lpbar__btn--programming { background: var(--vk-color-primary-dark, #059f44); }
.trinity-lpbar__btn:hover,
.trinity-lpbar__btn:focus-visible { filter: brightness(1.08); }
.trinity-lpbar__btn:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
@media (max-width: 575.98px) {
	.trinity-lpbar-slot { min-height: 57px; }
	.trinity-lpbar__inner { gap: 6px; padding: 6px 6px; }
	.trinity-lpbar__btn { flex: 1 1 50%; min-height: 44px; padding: 4px 8px; font-size: .78rem; }
	.trinity-lpbar__btn::after { display: none; }
}

/* ---------- FV：月のキャンペーン見出し（本番の画像の帯と同じ大きさ：画像幅の約61%。月は管理画面で書き換える） ---------- */
.trinity-campaign-label {
	display: block;
	width: 61.1%;
	max-width: 678px;
	margin: 0 auto -1px !important;
	padding: .42em 0;
	background: #289528;
	color: #fff;
	font-weight: 700;
	font-size: clamp(12px, 2.75vw, 40px);
	letter-spacing: .06em;
	line-height: 1.4;
	text-align: center;
	outline: 2px dashed rgba(255, 255, 255, .85);
	outline-offset: -6px;
}

/* ---------- 本番「当塾について」の見出しブロック（グレーの帯＋英字）を詰めて使う ---------- */
.trinity-sec-head.wp-block-cover { min-height: 0 !important; padding-top: 0; padding-bottom: 0; }
.trinity-sec-head .vk_spacer:first-child > div { height: 40px !important; margin-top: 0 !important; }
.trinity-sec-head .vk_spacer:not(:first-child) > div { height: 8px !important; margin-top: 0 !important; }
.trinity-sec-head .vk_heading_title { margin-bottom: .6rem !important; }
.trinity-sec-head p:empty { display: none; }
@media (max-width: 767.98px) {
	.trinity-sec-head .vk_spacer:first-child > div { height: 28px !important; }
}
/* 強みの区画は見出しの帯と同じグレーで続ける */
.trinity-strength-outer,
.trinity-strength-outer > .vk_outer-background-area { background-color: #f6f6f6 !important; } /* VK の区画は背景を内側の要素で描く */

/* 移してきた［正しい教材］×［良い講師］（スマホで余白と文字を詰める） */
@media (max-width: 767.98px) {
	.trinity-strength-detail { padding: 1.25rem .75rem !important; }
	.trinity-strength-detail h2,
	.trinity-strength-detail h3,
	.trinity-strength-detail h4 { font-size: 1.1rem !important; line-height: 1.5; }
	.trinity-strength-detail .vk_outer { padding-left: .75rem !important; padding-right: .75rem !important; }
	.trinity-strength-detail p,
	.trinity-strength-detail li { font-size: .92rem; }
}

/* ---------- 合格実績：写真の横に名前・合格実績・本文。4件の高さをそろえる ---------- */
.trinity-voice-grid.wp-block-columns { gap: 20px; margin-bottom: 20px; }
.trinity-voice-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 18px 20px;
}
.trinity-voice-grid .vk_spacer { display: none; } /* 元のスライドの下余白 */
.trinity-voice-grid .wp-block-group { padding: 0 !important; margin: 0 0 10px; }
.trinity-voice-grid .wp-block-group .wp-block-columns {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 16px;
	margin: 0;
}
.trinity-voice-grid .wp-block-group .wp-block-columns > .wp-block-column:first-child { flex: 0 0 96px !important; }
.trinity-voice-grid .wp-block-group .wp-block-columns > .wp-block-column:last-child { flex: 1 1 auto !important; min-width: 0; }
.trinity-voice-grid figure { margin: 0; }
.trinity-voice-grid img { width: 96px; height: 96px; object-fit: cover; }
.trinity-voice-grid .trinity-voice-name { margin: 0 0 .5em !important; text-align: left !important; font-size: .85rem; line-height: 1.5; color: #444; }
/* 合格実績を主役に：赤文字（元の <mark>）を見出しとして大きく・太く。名前は一段小さく。文章はそのまま */
.trinity-voice-grid .trinity-voice-name mark,
.trinity-voice-dialog__name mark {
	display: block;
	margin-bottom: 4px;
	padding: 0;
	font-size: 1.32rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .01em;
}
.trinity-voice-grid .trinity-voice-name mark + br,
.trinity-voice-dialog__name mark + br { display: none; }
.trinity-voice-grid p { font-size: .9rem; line-height: 1.75; margin-bottom: .6em; }
/* 体験談の折りたたみ（site.js が付ける。JSが無ければ全文）。カードは閉じた状態で固定し、全文はモーダルで読む */
.trinity-voice-grid > .is-clamped .trinity-voice-text { position: relative; height: 13em; overflow: hidden; }
.trinity-voice-grid > .is-clamped .trinity-voice-text::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3em;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
.trinity-voice-grid > .is-clamped.no-more .trinity-voice-text::after { display: none; }
.trinity-voice-more {
	display: block;
	margin: auto auto 0;
	padding: .4em 1.6em;
	border: 1px solid var(--vk-color-primary-dark, #059f44);
	border-radius: 999px;
	background: #fff;
	color: var(--vk-color-primary-dark, #059f44);
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
}
.trinity-voice-more:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
@media (max-width: 781.98px) {
	.trinity-voice-grid.wp-block-columns { gap: 12px; margin-bottom: 12px; }
}
@media (max-width: 575.98px) {
	.trinity-voice-grid > .wp-block-column { padding: 14px; }
	.trinity-voice-grid .wp-block-group .wp-block-columns { gap: 12px; }
	.trinity-voice-grid .wp-block-group .wp-block-columns > .wp-block-column:first-child { flex-basis: 64px !important; }
	.trinity-voice-grid img { width: 64px; height: 64px; }
	.trinity-voice-grid .trinity-voice-name mark,
	.trinity-voice-dialog__name mark { font-size: 1.3rem; }
	.trinity-voice-grid .trinity-voice-name { font-size: .92rem; }
	.trinity-voice-grid > .is-clamped .trinity-voice-text { height: 11em; }
}

/* ---------- 塾頭のあいさつ：左 あいさつ文＋TPS図（1つの流れ）／右 写真＋プロフィール（1つのまとまり） ----------
   PC 約63:37。文章・写真・図は変えない。カード風の枠や影は付けない */
@media (min-width: 782px) {
	.trinity-greet .wp-block-columns { flex-direction: row-reverse; align-items: flex-start !important; gap: 36px; }
	.trinity-greet .wp-block-columns > .wp-block-column:first-child { flex: 0 0 33% !important; }   /* 写真＋プロフィール（約65:35） */
	.trinity-greet { padding-left: 0 !important; padding-right: 0 !important; } /* 左右の内側余白（64px）を外し、他の区画と同じ 1110px 幅に（文章の行を長くして縦を詰める） */
	.trinity-greet .wp-block-columns > .wp-block-column:last-child { flex: 1 1 auto !important; min-width: 0; } /* あいさつ文 */
}
.trinity-greet .wp-block-columns > .wp-block-column { align-self: flex-start !important; } /* 上端をそろえる */
.trinity-greet .wp-block-image img { height: auto; }
/* あいさつ文：段落・図・最後の段落を同じ間隔で続ける */
.trinity-greet .wp-block-column:last-child p { margin: 0 0 1.1em !important; line-height: 1.95; }
.trinity-greet .wp-block-column:last-child p:last-child { margin-bottom: 0 !important; }
.trinity-greet .wp-block-column:last-child .wp-block-image { max-width: min(60%, 390px); margin: 4px auto 1.1em 0 !important; } /* TPS図は補助：最大390px。文章の流れに沿って左寄せ */
.trinity-greet .wp-block-column:last-child .wp-block-image img { width: 100%; }
/* 写真＋プロフィール：写真と名前の距離を詰めて1つのまとまりに */
.trinity-greet .wp-block-column:first-child .wp-block-image { margin: 0 0 14px !important; }
.trinity-greet .wp-block-column:first-child h2,
.trinity-greet .wp-block-column:first-child h3,
.trinity-greet .wp-block-column:first-child h4 { margin: 0 0 6px !important; padding: 0 !important; line-height: 1.35; }
.trinity-greet .wp-block-column:first-child p { margin: 0 !important; font-size: .88rem; line-height: 1.8; color: #444; }
/* 見出しから本文・本文から次のセクションまでを詰める */
.trinity-greet { padding-top: 0 !important; padding-bottom: 8px !important; }
.trinity-greet .wp-block-columns { margin-bottom: 0 !important; }
@media (max-width: 781.98px) {
	.trinity-greet { padding-top: 0 !important; padding-bottom: 8px !important; }
	.trinity-greet .wp-block-columns { gap: 20px; }
	.trinity-greet .wp-block-column:first-child .wp-block-image { max-width: 280px; margin: 0 auto 10px !important; } /* 写真は大きくしすぎない */
	.trinity-greet .wp-block-column:last-child .wp-block-image { max-width: min(88%, 320px); margin: 4px auto 1.1em !important; } /* TPS図に最大幅 */
}

/* ---------- 教室カード（各教室のご案内）：写真＋濃い緑の帯（教室名・丸い矢印）。PC 3列／タブレット 2列／スマホ 1列 ----------
   市町村名の縦書きの緑ラベルは外観写真の右上に入っている（写真そのもの）。カード全体がリンク（VK のグリッドのリンク） */
.trinity-classroom-cards { row-gap: 24px; }
.trinity-classroom-cards .vk_gridColumn_item { display: flex; margin-bottom: 24px; }
@media (min-width: 992px) {
	.trinity-classroom-cards .vk_gridColumn_item { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
	.trinity-classroom-cards .vk_gridColumn_item { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 575.98px) {
	.trinity-classroom-cards .vk_gridColumn_item { flex: 0 0 100%; max-width: 100%; margin-bottom: 16px; }
}
.trinity-classroom-cards .vk_gridColumn_item_inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
	transition: box-shadow .2s ease, transform .2s ease;
}
.trinity-classroom-cards .vk_gridColumn_item_inner:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transform: translateY(-2px); }
.trinity-classroom-cards .vk_gridColumn_item_inner:hover img { opacity: 1 !important; } /* 元の一覧の「画像を薄くする」を打ち消す */
.trinity-classroom-cards .vk_gridColumn_item_link { z-index: 3; }
.trinity-classroom-cards .vk_gridColumn_item_link:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
	.trinity-classroom-cards .vk_gridColumn_item_inner { transition: none; }
	.trinity-classroom-cards .vk_gridColumn_item_inner:hover { transform: none; }
}
.trinity-classroom-cards .wp-block-image { margin: 0; }
.trinity-classroom-cards .wp-block-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* 濃い緑の帯（教室名は白、右に丸い矢印） */
.trinity-classroom-cards .wp-block-vk-blocks-heading { margin: 0 !important; padding: 0; background: var(--vk-color-custom-1, #027733); }
.trinity-classroom-cards .vk_heading { margin: 0; }
.trinity-classroom-cards .vk_heading_title {
	position: relative;
	margin: 0 !important;
	padding: 14px 56px 14px 18px !important;
	border: 0 !important;
	background: none !important;
	color: #fff !important;
	font-size: 1.1rem !important;
	font-weight: 700;
	line-height: 1.4;
	text-align: left !important;
}
.trinity-classroom-cards .vk_heading_title::before { display: none !important; }
.trinity-classroom-cards .vk_heading_title i { display: none; } /* 元の一覧の ▶ */
/* 見出しの書式（標準／装飾なし）が教室ごとに混ざっており、テーマ側が ::after を打ち消す書式があるため強めに指定する */
.trinity-classroom-cards .vk_heading .vk_heading_title::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: auto !important;
	right: 16px !important;
	bottom: auto !important;
	width: 30px !important;
	height: 30px !important;
	margin: -15px 0 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23027733' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat !important;
}
.trinity-card-more { display: none !important; } /* 矢印の帯があるので「詳細を見る」の文字は出さない（ブロックは保持） */
.trinity-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	margin: 0 !important;
	padding: .3em .8em;
	border-radius: 6px;
	background: #e5004f;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.4;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	pointer-events: none;
}
@media (max-width: 575.98px) {
	.trinity-classroom-cards .vk_heading_title { font-size: 1.05rem !important; padding: 13px 54px 13px 16px !important; }
}

/* ---------- 合格実績のモーダル（写真・名前などの段落・全文を、誰を開いても同じ位置に） ---------- */
html.trinity-modal-open { overflow: hidden; }
.trinity-voice-dialog {
	width: calc(100% - 32px);
	max-width: 720px;
	max-height: 86vh;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: var(--vk-color-text-body, #222);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	overflow: hidden;
}
.trinity-voice-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.trinity-voice-dialog__inner { position: relative; display: flex; flex-direction: column; max-height: 86vh; }
.trinity-voice-dialog__head {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 20px;
	align-items: start; /* 名前の開始位置を全員同じにする（属性の行の有無で動かない） */
	padding: 28px 56px 20px 28px;
	border-bottom: 1px solid #e5e5e5;
}
.trinity-voice-dialog__photo img { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.trinity-voice-dialog__name { padding-top: 14px; font-size: .95rem; line-height: 1.6; text-align: left; color: #444; }
.trinity-voice-dialog__body { padding: 20px 28px 8px; overflow-y: auto; overscroll-behavior: contain; }
.trinity-voice-dialog__body p { margin: 0 0 1em; font-size: .95rem; line-height: 1.9; text-align: left !important; }
.trinity-voice-dialog__foot { padding: 12px 28px 22px; text-align: center; border-top: 1px solid #f0f0f0; }
.trinity-voice-dialog__close,
.trinity-voice-dialog__x {
	border: 1px solid var(--vk-color-primary-dark, #059f44);
	background: #fff;
	color: var(--vk-color-primary-dark, #059f44);
	font-weight: 700;
	cursor: pointer;
}
.trinity-voice-dialog__close { padding: .5em 2.4em; border-radius: 999px; font-size: .9rem; }
.trinity-voice-dialog__x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 1.3rem;
	line-height: 1;
}
.trinity-voice-dialog__close:focus-visible,
.trinity-voice-dialog__x:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
@media (max-width: 575.98px) {
	.trinity-voice-dialog { width: calc(100% - 24px); max-height: 88vh; }
	.trinity-voice-dialog__inner { max-height: 88vh; }
	.trinity-voice-dialog__head { grid-template-columns: 72px 1fr; gap: 14px; padding: 20px 52px 16px 18px; }
	.trinity-voice-dialog__photo img { width: 72px; height: 72px; }
	.trinity-voice-dialog__name { padding-top: 6px; font-size: .92rem; }
	.trinity-voice-dialog__body { padding: 16px 18px 4px; }
	.trinity-voice-dialog__foot { padding: 10px 18px 16px; }
}

/* ---------- 保護者様との連携（トップ）：1つの白いボックスを縦線で3分割。番号は小さく補助的に ----------
   中身（見出し・説明文）は元のまま。CSS のグリッドで並べるだけ */
.trinity-coop > .wp-block-group__inner-container,
.trinity-coop.is-layout-flow:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 0;
}
.trinity-coop .vk_spacer { display: none; }
.trinity-coop h3 { grid-row: 1; margin: 0 !important; padding: 4px 28px 10px; border: 0 !important; background: none !important; font-size: 1.15rem; line-height: 1.5; }
.trinity-coop h3::after { display: none !important; } /* テーマの見出しの下線 */
.trinity-coop p { grid-row: 2; margin: 0 !important; padding: 0 28px 6px; font-size: .95rem; line-height: 1.85; }
.trinity-coop h3:nth-of-type(1), .trinity-coop p:nth-of-type(1) { grid-column: 1; }
.trinity-coop h3:nth-of-type(2), .trinity-coop p:nth-of-type(2) { grid-column: 2; border-left: 1px solid #e3e3e3 !important; }
.trinity-coop h3:nth-of-type(3), .trinity-coop p:nth-of-type(3) { grid-column: 3; border-left: 1px solid #e3e3e3 !important; }
/* 小さな番号と細い線（青・オレンジ・緑をアクセントに） */
.trinity-coop h3::before {
	display: block;
	width: 2.2em;
	margin-bottom: 8px;
	padding-bottom: 4px;
	border-bottom: 2px solid currentColor;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
}
.trinity-coop h3:nth-of-type(1)::before { content: "01"; color: #3a78c9; }
.trinity-coop h3:nth-of-type(2)::before { content: "02"; color: #e8892b; }
.trinity-coop h3:nth-of-type(3)::before { content: "03"; color: #059f44; }
@media (max-width: 767.98px) {
	.trinity-coop > .wp-block-group__inner-container,
	.trinity-coop.is-layout-flow:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: minmax(0, 1fr); }
	.trinity-coop h3, .trinity-coop p { grid-column: 1 !important; padding-left: 4px; padding-right: 4px; }
	.trinity-coop h3:nth-of-type(n), .trinity-coop p:nth-of-type(n) { border-left: 0 !important; } /* PC の縦線を外す（同じ強さで上書き） */
	.trinity-coop h3:nth-of-type(1) { grid-row: 1; }
	.trinity-coop p:nth-of-type(1) { grid-row: 2; }
	.trinity-coop h3:nth-of-type(2) { grid-row: 3; }
	.trinity-coop p:nth-of-type(2) { grid-row: 4; }
	.trinity-coop h3:nth-of-type(3) { grid-row: 5; }
	.trinity-coop p:nth-of-type(3) { grid-row: 6; }
	.trinity-coop h3:nth-of-type(2), .trinity-coop h3:nth-of-type(3) { margin-top: 18px !important; padding-top: 20px; border-top: 1px solid #e3e3e3 !important; }
}

/* ---------- 当塾の概要（各教室のご案内）：白背景・細い罫線・項目名と内容の2カラム。緑はアクセントだけ ---------- */
.trinity-info-table { margin: 0; }
.trinity-info-table table { width: 100%; border-collapse: collapse; border: 0 !important; border-top: 2px solid var(--vk-color-custom-1, #027733) !important; background: #fff; }
.trinity-info-table tr { border: 0 !important; border-bottom: 1px solid #e3e3e3 !important; }
.trinity-info-table td {
	padding: 16px 18px !important;
	border: 0 !important;
	background: none !important;
	vertical-align: top;
	font-size: .98rem;
	line-height: 1.85;
}
.trinity-info-table td:first-child {
	width: 8.5em;
	padding-right: 8px !important;
	color: var(--vk-color-custom-1, #027733);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
}
@media (max-width: 575.98px) {
	.trinity-info-table td { padding: 12px 10px !important; font-size: .9rem; line-height: 1.75; }
	.trinity-info-table td:first-child { width: 5em; padding-right: 4px !important; font-size: .78rem; letter-spacing: 0; white-space: nowrap; }
}

/* ---------- 見出しの帯の変化形 ----------
   --overlap：下の白い枠を少し重ねる（本番「当塾について」と同じ見せ方を、帯を低くして使う）
   --white  ：帯を白にして、下の本文と1つのセクションとしてつなげる（塾頭のあいさつ） */
.trinity-sec-head--overlap .vk_spacer:not(:first-child) > div { height: 76px !important; }
.trinity-coop { padding-top: 24px !important; padding-bottom: 24px !important; }
.trinity-sec-head--white .wp-block-cover__background { background-color: #fff !important; }
.trinity-sec-head--white .vk_spacer:first-child > div { height: 8px !important; } /* 直前の余白ブロックと重ならないように */
.trinity-coop.vk-block-top-over-md,
.trinity-about { margin-top: -56px !important; position: relative; z-index: 1; }
@media (max-width: 767.98px) {
	.trinity-sec-head--overlap .vk_spacer:not(:first-child) > div { height: 64px !important; }
	.trinity-coop.vk-block-top-over-md,
	.trinity-about { margin-top: -44px !important; }
}
/* 保護者様との連携：白い枠を3項目がまとまる幅に */
.trinity-coop { max-width: 960px; margin-left: auto !important; margin-right: auto !important; }

/* ---------- 当塾の概要（各教室のご案内）：左 ABOUT US＋説明文／中央 写真／右 基本情報＋各校舎の住所 ---------- */
.trinity-about {
	max-width: 1110px;
	margin-left: auto !important;
	margin-right: auto !important;
	background: #fff;
	border: 1px solid #e3ebe4;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
	overflow: hidden;
}
.trinity-about > .wp-block-group__inner-container,
.trinity-about.is-layout-flow:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: 25% 35% 40%;
	align-items: stretch;
}
.trinity-about__intro {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 !important;
	padding: 40px 48px 40px 36px !important;
	background: var(--vk-color-custom-4, #eef6ee);
	overflow: hidden;
}
/* 淡い緑の抽象的な面（アイコンではない、ごく薄い面） */
.trinity-about__intro::before,
.trinity-about__intro::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	background: rgba(2, 119, 51, .03);
}
.trinity-about__intro::before { width: 260px; height: 260px; top: -120px; left: -100px; }
.trinity-about__intro::after { width: 200px; height: 200px; bottom: -110px; right: -40px; }
.trinity-about__intro > .wp-block-group__inner-container { position: relative; }
.trinity-about__label {
	margin: 0 0 20px !important;
	color: #111;
	font-size: clamp(1.6rem, 1.9vw, 2.05rem);
	font-weight: 800;
	letter-spacing: .04em;
	white-space: nowrap;
	line-height: 1.1;
}
.trinity-about__label::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 14px; background: var(--vk-color-custom-1, #027733); }
.trinity-about__lead { margin: 0 !important; font-size: .95rem; line-height: 1.95; }
/* 写真：左端を斜めに切り替える */
.trinity-about .trinity-about__photo.wp-block-image { position: relative; z-index: 1; width: calc(100% + 48px); max-width: none; margin: 0 0 0 -48px !important; height: 100%; } /* 左へずらした分だけ広げ、右側との間に空きを作らない */
.trinity-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: 58% 50%; /* 看板（TRINITY）が入る位置 */
	clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%);
}
.trinity-about__info { margin: 0 !important; padding: 24px 32px 22px 36px !important; }
.trinity-about__table, .trinity-about__addr { margin: 0 !important; }
.trinity-about__table table, .trinity-about__addr table { width: 100%; border: 0 !important; border-collapse: collapse; }
.trinity-about__table tr, .trinity-about__addr tr { border: 0 !important; border-bottom: 1px solid #e6e6e6 !important; }
.trinity-about__table tr:first-child { border-top: 1px solid #e6e6e6 !important; }
.trinity-about__table td, .trinity-about__addr td { border: 0 !important; background: none !important; vertical-align: top; }
.trinity-about__table td { padding: 8px 12px !important; font-size: .92rem; line-height: 1.65; }
.trinity-about__table td:first-child {
	width: 6.5em;
	border-right: 1px solid #e6e6e6 !important;
	color: var(--vk-color-custom-1, #027733);
	font-size: .85rem;
	font-weight: 700;
	white-space: nowrap;
}
.trinity-about__subhead {
	margin: 16px 0 2px !important;
	padding: 7px 12px !important;
	border: 0 !important;
	border-radius: 4px;
	background: var(--vk-color-custom-4, #eef6ee) !important;
	color: var(--vk-color-custom-1, #027733) !important;
	font-size: .95rem !important;
	font-weight: 700;
	line-height: 1.4;
}
.trinity-about__subhead::before, .trinity-about__subhead::after { display: none !important; }
.trinity-about__addr table { table-layout: fixed; }
.trinity-about__addr td { padding: 6px 8px !important; font-size: .82rem; line-height: 1.55; }
.trinity-about__addr td:nth-child(1) { width: 11.4em; word-break: keep-all; overflow-wrap: anywhere; } /* 校舎名。語の途中では折り返さず、（10月OPEN予定）だけ2行目に */
.trinity-about__addr td:nth-child(2) { width: 6.1em; white-space: nowrap; }
/* PC：本文の幅から外に出し、最大 1280px の横長ブロックに（画面の左右に 24px 以上の余白を残す）。
   3分割は 1200px 以上。それより狭いと右側が窮屈になり住所が何行にも折り返すため、縦積みにする */
@media (min-width: 1200px) {
	.trinity-about {
		width: min(1280px, calc(100vw - 48px));
		max-width: none;
		margin-left: calc(50% - min(640px, 50vw - 24px)) !important;
		margin-right: 0 !important;
	}
}
@media (max-width: 1199.98px) {
	.trinity-about > .wp-block-group__inner-container,
	.trinity-about.is-layout-flow:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: minmax(0, 1fr); }
	.trinity-about__intro { padding: 32px 24px !important; }
	.trinity-about .trinity-about__photo.wp-block-image { width: auto; max-width: 100%; margin: 0 !important; height: auto; }
	.trinity-about .trinity-about__photo.wp-block-image img { height: 320px !important; min-height: 0 !important; clip-path: none; } /* テーマの .wp-block-image img{height:auto!important} より強く */
	.trinity-about__info { padding: 20px 16px !important; }
}
@media (max-width: 575.98px) {
	.trinity-about__label { font-size: 2rem; }
	.trinity-about__lead { font-size: .93rem; line-height: 1.9; }
	.trinity-about .trinity-about__photo.wp-block-image img { height: 220px !important; }
	.trinity-about__table td:first-child { width: 5.2em; font-size: .8rem; }
	/* 住所はスマホでは「校舎名」の下に「〒・住所」 */
	.trinity-about__addr table { table-layout: auto; }
	.trinity-about__addr tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding: 6px 0; }
	.trinity-about__addr td { width: auto !important; padding: 0 4px !important; }
	.trinity-about__addr td:nth-child(1) { grid-column: 1 / -1; font-weight: 700; }
}

/* ---------- 保護者様との連携（B案ベース）：左 見出し＋導入文／右 ロゴ・見出し・説明文を縦に3項目 ----------
   色は白・淡い緑・深い緑・濃いグレーだけ。ロゴは補助要素として小さく */
.trinity-coop2 { padding: 40px 16px 48px; background: #f6f6f6; }
.trinity-coop2__inner {
	max-width: 1110px;
	margin: 0 auto !important;
	background: #fff;
	border: 1px solid #e3ebe4;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
	overflow: hidden;
}
.trinity-coop2__inner > .wp-block-group__inner-container,
.trinity-coop2__inner.is-layout-flow:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: 29% 71%;
}
.trinity-coop2__intro {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 !important;
	padding: 40px 44px 40px 32px !important;
	background: var(--vk-color-custom-4, #eef6ee);
	clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); /* 右端を斜めに切り替える */
	overflow: hidden;
}
.trinity-coop2__intro > .wp-block-group__inner-container,
.trinity-coop2__list > .wp-block-group__inner-container { width: 100%; max-width: none !important; margin: 0 !important; } /* テーマの「中央寄せ・最大幅」を外す */
.trinity-coop2__intro::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 240px;
	height: 240px;
	right: -60px;
	bottom: -120px;
	border-radius: 50%;
	background: rgba(2, 119, 51, .04);
}
.trinity-coop2__heading {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: #222 !important;
	font-size: clamp(1.45rem, 2vw, 1.8rem) !important;
	font-weight: 800;
	line-height: 1.35;
	text-align: left !important;
}
.trinity-coop2__heading::before, .trinity-coop2__heading::after { display: none !important; }
.trinity-coop2__en {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 22px !important;
	color: #333;
	font-size: .82rem;
	letter-spacing: .14em;
}
.trinity-coop2__en::before { content: ""; width: 32px; height: 2px; background: var(--vk-color-custom-1, #027733); }
.trinity-coop2__lead { margin: 0 !important; font-size: .95rem; line-height: 1.95; color: #333; }
.trinity-coop2__list { margin: 0 !important; padding: 8px 36px !important; }
.trinity-coop2__item > .wp-block-group__inner-container,
.trinity-coop2__item.is-layout-flow:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: 72px 11em minmax(0, 1fr);
	column-gap: 24px;
	align-items: start; /* ロゴ・見出し・説明文の上端を3項目でそろえる */
}
.trinity-coop2__item { margin: 0 !important; padding: 20px 0 !important; border-bottom: 1px solid #e6e6e6; }
.trinity-coop2__item:last-child { border-bottom: 0; }
.trinity-coop2__logo { margin: 0 !important; }
.trinity-coop2__logo img { display: block; width: 72px !important; height: 72px !important; object-fit: contain; }
/* オプティカル調整：CSSの箱（72px の列・中心）は3つとも同じまま、絵柄の見た目の大きさだけをそろえる。
   1つ目は横長で細く小さく見えるため拡大、3つ目は線が多く大きく見えるため縮小。中心を基準に拡大・縮小するので、列の幅と見出しの位置は動かない */
.trinity-coop2__logo img { transform-origin: 50% 50%; }
.trinity-coop2__item:nth-child(1) .trinity-coop2__logo img { transform: scale(1.18); }
.trinity-coop2__item:nth-child(2) .trinity-coop2__logo img { transform: none; }
.trinity-coop2__item:nth-child(3) .trinity-coop2__logo img { transform: scale(.92); }
/* 各項目の高さは文章量で決める（ロゴの箱が行の高さを押し上げない）。ロゴの箱は絵柄が見えている高さ分だけにし、
   画像は上端をそろえたまま箱の外へ少しはみ出してよい（透明の余白部分）。開始位置は変わらない */
@media (min-width: 576px) {
	.trinity-coop2__logo { height: 56px; }
	.trinity-coop2__list { align-self: center; } /* 左側より低いときは余りを上下に分ける（下だけ空かない） */
	.trinity-coop2__item { padding: 20px 0 18px !important; }
}
.trinity-coop2__title {
	margin: 0 !important;
	padding: 0 0 8px !important;
	border: 0 !important;
	background: none !important;
	color: #222 !important;
	font-size: 1.05rem !important;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
}
.trinity-coop2__title::before { display: none !important; }
.trinity-coop2__title::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 28px !important;
	height: 2px !important;
	border: 0 !important;
	background: var(--vk-color-custom-1, #027733) !important;
}
.trinity-coop2__item p { margin: 0 !important; font-size: .92rem; line-height: 1.85; color: #333; }
.trinity-coop2__item h3, .trinity-coop2__item p { padding-top: 4px !important; }
@media (max-width: 1199.98px) { /* テーマの本文幅が930px以下になると右側が窮屈になり説明文が6行になるため、縦積みにする（当塾の概要と同じ境目） */
	.trinity-coop2__inner > .wp-block-group__inner-container,
	.trinity-coop2__inner.is-layout-flow:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: minmax(0, 1fr); }
	.trinity-coop2__intro { padding: 32px 24px !important; clip-path: none; }
	.trinity-coop2__list { padding: 4px 20px !important; }
}
@media (max-width: 575.98px) {
	.trinity-coop2 { padding: 28px 12px 36px; }
	.trinity-coop2__intro { padding: 26px 20px !important; }
	.trinity-coop2__list { padding: 4px 16px !important; }
	/* スマホ：ロゴと見出しを横に、その下に説明文 */
	.trinity-coop2__item > .wp-block-group__inner-container,
	.trinity-coop2__item.is-layout-flow:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; }
	.trinity-coop2__logo img { width: 56px !important; height: 56px !important; }
	.trinity-coop2__item p { grid-column: 1 / -1; font-size: .92rem; }
	.trinity-coop2__item { padding: 18px 0 !important; }
}

/* ---------- トリニティの強み：特徴 → こんな方に → 結論 の緑枠（ブロック固有のクラスで指定。本文は変えない） ----------
   3つの塊を、中央に置いた1つの読みやすい幅（最大680px）の中で同じ左端にそろえ、強弱は文字の大きさ・太さで付ける */
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 .vk_outer_container > * { max-width: 680px; margin-left: auto !important; margin-right: auto !important; }
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 ul { padding-left: 1.3em; margin-top: 8px !important; margin-bottom: 0 !important; }
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 li { margin: 0 0 .35em; line-height: 1.6; font-weight: 700; }
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 li::marker { color: var(--vk-color-primary-dark, #059f44); }
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 li .vk_inline-font-size { font-size: 1.15rem !important; }
/* こんな方に：箇条書きの文字と同じ左端から、一段小さく */
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 p.has-text-align-center {
	text-align: left !important;
	margin-top: 18px !important;
	margin-bottom: 0 !important;
	padding-left: 1.3em;
	color: #444;
	font-size: 1rem !important;
	line-height: 1.85;
}
/* 結論：細い線で区切り、いちばん強く */
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 h4.wp-block-heading {
	text-align: left !important;
	margin-top: 20px !important;
	margin-bottom: 0 !important;
	padding: 16px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid #dfe9e0 !important;
	background: none !important;
	color: #222;
	font-size: 1.35rem !important;
	line-height: 1.55;
}
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 h4.wp-block-heading::before,
.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 h4.wp-block-heading::after { display: none !important; }
@media (max-width: 575.98px) {
	.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 .vk_outer_container { padding-left: 16px !important; padding-right: 16px !important; }
	.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 li .vk_inline-font-size { font-size: 16px !important; }
	.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 p.has-text-align-center { font-size: 15px !important; line-height: 1.75; margin-top: 14px !important; }
	.vkb-outer-dfc8f7f0-b3fa-473d-8fa3-d51257316647 h4.wp-block-heading { font-size: 18px !important; margin-top: 16px !important; padding-top: 12px !important; }
}

/* ---------- 余白：大きな余白ブロック（trinity-gap）を本番くらいの密度に詰める ---------- */
.trinity-gap > div { height: 48px !important; margin-top: 0 !important; }
@media (max-width: 991.98px) { .trinity-gap > div { height: 40px !important; } }
@media (max-width: 575.98px) { .trinity-gap > div { height: 32px !important; } }