/* ============================================================
 * Sound Collective — Disciplines 詳細ページを Elementor で「コピーだけ編集可能」に
 * するためのブリッジCSS (第2弾: Music Production / DJ / Studio Engineering / Vocals /
 * Music Business / Instruments 共通)。
 *
 * 背景: sc-discipline-*.css のテキスト系クラス(.sc-mp-hero__title 等)は本来
 * 見出し/本文タグに直接付く前提で書かれている。Elementor のネイティブ
 * Heading/Text Editor/Button ウィジェットにこの独自クラスを「CSS Classes」として
 * 付けると、クラスは .elementor-element (ウィジェットの外側ラッパー) に付与され、
 * 実際のテキストは その内側の .elementor-widget-container > .elementor-heading-title
 * / <p> / .elementor-button に入る。そのため色/フォントサイズ等が一段ズレて
 * 効かなくなる。本ファイルはその内側要素へ inherit で橋渡しする。
 *
 * スコープ: すべて sc-<prefix>-* 配下のみ(プレフィックスは mp/dj/se/voc/mb/inst を
 * 明示列挙。`[class*=...]` 等の広域セレクタは意図せず他要素に一致し得るため使わない)。
 * .elementor-* をグローバルに変更しない。
 * 読み込み: functions/enqueues.php の scltv_enqueue_design_tokens() 配列に
 * 'sc-disciplines-elementor' を追加(他の sc-discipline-*.css と同じ仕組み)。
 * ============================================================ */

/* ------------------------------------------------------------
 * 見出し(Heading ウィジェット) — 外側の font-size/color/weight を内側へ継承
 * ------------------------------------------------------------ */
.sc-mp-hero__title .elementor-heading-title,
.sc-mp-desc__title .elementor-heading-title,
.sc-mp-facility__title .elementor-heading-title,
.sc-mp-contact__title .elementor-heading-title,
.sc-dj-hero__title .elementor-heading-title,
.sc-dj-desc__title .elementor-heading-title,
.sc-dj-facility__title .elementor-heading-title,
.sc-dj-contact__title .elementor-heading-title,
.sc-se-hero__title .elementor-heading-title,
.sc-se-desc__title .elementor-heading-title,
.sc-se-facility__title .elementor-heading-title,
.sc-se-contact__title .elementor-heading-title,
.sc-voc-hero__title .elementor-heading-title,
.sc-voc-desc__title .elementor-heading-title,
.sc-voc-facility__title .elementor-heading-title,
.sc-voc-contact__title .elementor-heading-title,
.sc-mb-hero__title .elementor-heading-title,
.sc-mb-desc__title .elementor-heading-title,
.sc-mb-facility__title .elementor-heading-title,
.sc-mb-contact__title .elementor-heading-title,
.sc-inst-hero__title .elementor-heading-title,
.sc-inst-desc__title .elementor-heading-title,
.sc-inst-facility__title .elementor-heading-title,
.sc-inst-contact__title .elementor-heading-title,
.sc-disc-hero__title .elementor-heading-title,
.sc-disc-sec__title .elementor-heading-title,
.sc-disc-facility__title .elementor-heading-title,
.sc-disc-cta__title .elementor-heading-title {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

/* ------------------------------------------------------------
 * 本文(Text Editor ウィジェット) — 同様に内側へ継承
 * ------------------------------------------------------------ */
.sc-mp-hero__sub .elementor-widget-container,
.sc-mp-desc__text .elementor-widget-container,
.sc-mp-facility__text .elementor-widget-container p,
.sc-dj-hero__sub .elementor-widget-container,
.sc-dj-desc__text .elementor-widget-container,
.sc-dj-facility__text .elementor-widget-container p,
.sc-se-hero__sub .elementor-widget-container,
.sc-se-desc__text .elementor-widget-container,
.sc-se-facility__text .elementor-widget-container p,
.sc-voc-hero__sub .elementor-widget-container,
.sc-voc-desc__text .elementor-widget-container,
.sc-voc-facility__text .elementor-widget-container p,
.sc-mb-hero__sub .elementor-widget-container,
.sc-mb-desc__text .elementor-widget-container,
.sc-mb-facility__text .elementor-widget-container p,
.sc-inst-hero__sub .elementor-widget-container,
.sc-inst-desc__text .elementor-widget-container,
.sc-inst-facility__text .elementor-widget-container p,
.sc-disc-hero__sub .elementor-widget-container,
.sc-disc-sec__desc .elementor-widget-container,
.sc-disc-facility__text .elementor-widget-container p {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}
/* Text Editor ウィジェット自体が <p> を出すため、そのタグにも直接効かせる */
.sc-mp-hero__sub .elementor-widget-container p,
.sc-mp-desc__text .elementor-widget-container p,
.sc-dj-hero__sub .elementor-widget-container p,
.sc-dj-desc__text .elementor-widget-container p,
.sc-se-hero__sub .elementor-widget-container p,
.sc-se-desc__text .elementor-widget-container p,
.sc-voc-hero__sub .elementor-widget-container p,
.sc-voc-desc__text .elementor-widget-container p,
.sc-mb-hero__sub .elementor-widget-container p,
.sc-mb-desc__text .elementor-widget-container p,
.sc-inst-hero__sub .elementor-widget-container p,
.sc-inst-desc__text .elementor-widget-container p,
.sc-disc-hero__sub .elementor-widget-container p,
.sc-disc-sec__desc .elementor-widget-container p {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

/* ------------------------------------------------------------
 * ボタン(Button ウィジェット) — Elementor 既定の背景/パディングを無効化し、
 * 元の .sc-<prefix>-learnmore / .sc-<prefix>-btn の見た目を .elementor-button に適用する。
 * ------------------------------------------------------------ */
.sc-mp-learnmore .elementor-widget-container,
.sc-dj-learnmore .elementor-widget-container,
.sc-se-learnmore .elementor-widget-container,
.sc-voc-learnmore .elementor-widget-container,
.sc-mb-learnmore .elementor-widget-container,
.sc-inst-learnmore .elementor-widget-container { display: flex; }
.sc-mp-learnmore .elementor-button-wrapper,
.sc-dj-learnmore .elementor-button-wrapper,
.sc-se-learnmore .elementor-button-wrapper,
.sc-voc-learnmore .elementor-button-wrapper,
.sc-mb-learnmore .elementor-button-wrapper,
.sc-inst-learnmore .elementor-button-wrapper { display: flex; }
.sc-mp-learnmore .elementor-button,
.sc-dj-learnmore .elementor-button,
.sc-se-learnmore .elementor-button,
.sc-voc-learnmore .elementor-button,
.sc-mb-learnmore .elementor-button,
.sc-inst-learnmore .elementor-button {
	display: inline-flex; align-items: center; gap: 4px; width: max-content;
	min-height: 0; margin: 0;
	padding: 8px 0 !important; border: none !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important;
	font-size: 12px; font-weight: var(--sc-fw-medium);
	color: var(--sc-fg); text-decoration: underline;
}
.sc-mp-learnmore .elementor-button:hover, .sc-mp-learnmore .elementor-button:focus,
.sc-dj-learnmore .elementor-button:hover, .sc-dj-learnmore .elementor-button:focus,
.sc-se-learnmore .elementor-button:hover, .sc-se-learnmore .elementor-button:focus,
.sc-voc-learnmore .elementor-button:hover, .sc-voc-learnmore .elementor-button:focus,
.sc-mb-learnmore .elementor-button:hover, .sc-mb-learnmore .elementor-button:focus,
.sc-inst-learnmore .elementor-button:hover, .sc-inst-learnmore .elementor-button:focus {
	background: transparent !important; color: var(--sc-fg);
}
.sc-mp-learnmore .elementor-button-content-wrapper,
.sc-dj-learnmore .elementor-button-content-wrapper,
.sc-se-learnmore .elementor-button-content-wrapper,
.sc-voc-learnmore .elementor-button-content-wrapper,
.sc-mb-learnmore .elementor-button-content-wrapper,
.sc-inst-learnmore .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 4px; }
.sc-mp-learnmore .elementor-button-icon, .sc-mp-learnmore .elementor-button-icon i,
.sc-dj-learnmore .elementor-button-icon, .sc-dj-learnmore .elementor-button-icon i,
.sc-se-learnmore .elementor-button-icon, .sc-se-learnmore .elementor-button-icon i,
.sc-voc-learnmore .elementor-button-icon, .sc-voc-learnmore .elementor-button-icon i,
.sc-mb-learnmore .elementor-button-icon, .sc-mb-learnmore .elementor-button-icon i,
.sc-inst-learnmore .elementor-button-icon, .sc-inst-learnmore .elementor-button-icon i { font-size: 12px; margin: 0; }

.sc-mp-btn .elementor-widget-container,
.sc-dj-btn .elementor-widget-container,
.sc-se-btn .elementor-widget-container,
.sc-voc-btn .elementor-widget-container,
.sc-mb-btn .elementor-widget-container,
.sc-inst-btn .elementor-widget-container { display: flex; }
.sc-mp-btn .elementor-button-wrapper,
.sc-dj-btn .elementor-button-wrapper,
.sc-se-btn .elementor-button-wrapper,
.sc-voc-btn .elementor-button-wrapper,
.sc-mb-btn .elementor-button-wrapper,
.sc-inst-btn .elementor-button-wrapper { display: flex; }
.sc-mp-btn .elementor-button,
.sc-dj-btn .elementor-button,
.sc-se-btn .elementor-button,
.sc-voc-btn .elementor-button,
.sc-mb-btn .elementor-button,
.sc-inst-btn .elementor-button {
	/* #98(2026-07-21): Hub Explore を .sc-btn の M トークンに寸法整合(min-height36 / padding 7px 20px /
	 * font14 / line-height1.4 / radius pill)。outline 配色・hover(白10%)は現状維持=既にトークン準拠。 */
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	min-height: 36px; padding: 7px 20px !important; width: max-content; margin: 0;
	border-radius: var(--sc-radius-pill) !important; text-decoration: none; cursor: pointer;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: var(--sc-lh);
	background: transparent !important; box-shadow: none !important;
}
.sc-mp-btn.sc-mp-btn--outline .elementor-button,
.sc-dj-btn.sc-dj-btn--outline .elementor-button,
.sc-se-btn.sc-se-btn--outline .elementor-button,
.sc-voc-btn.sc-voc-btn--outline .elementor-button,
.sc-mb-btn.sc-mb-btn--outline .elementor-button,
.sc-inst-btn.sc-inst-btn--outline .elementor-button {
	border: 1px solid var(--sc-border-invert) !important; color: var(--sc-fg);
}
.sc-mp-btn.sc-mp-btn--outline .elementor-button:hover, .sc-mp-btn.sc-mp-btn--outline .elementor-button:focus,
.sc-dj-btn.sc-dj-btn--outline .elementor-button:hover, .sc-dj-btn.sc-dj-btn--outline .elementor-button:focus,
.sc-se-btn.sc-se-btn--outline .elementor-button:hover, .sc-se-btn.sc-se-btn--outline .elementor-button:focus,
.sc-voc-btn.sc-voc-btn--outline .elementor-button:hover, .sc-voc-btn.sc-voc-btn--outline .elementor-button:focus,
.sc-mb-btn.sc-mb-btn--outline .elementor-button:hover, .sc-mb-btn.sc-mb-btn--outline .elementor-button:focus,
.sc-inst-btn.sc-inst-btn--outline .elementor-button:hover, .sc-inst-btn.sc-inst-btn--outline .elementor-button:focus {
	background: var(--sc-bg-hover-strong) !important; color: var(--sc-fg);
}
.sc-mp-btn .elementor-button-content-wrapper,
.sc-dj-btn .elementor-button-content-wrapper,
.sc-se-btn .elementor-button-content-wrapper,
.sc-voc-btn .elementor-button-content-wrapper,
.sc-mb-btn .elementor-button-content-wrapper,
.sc-inst-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sc-mp-btn .elementor-button-icon, .sc-mp-btn .elementor-button-icon i,
.sc-dj-btn .elementor-button-icon, .sc-dj-btn .elementor-button-icon i,
.sc-se-btn .elementor-button-icon, .sc-se-btn .elementor-button-icon i,
.sc-voc-btn .elementor-button-icon, .sc-voc-btn .elementor-button-icon i,
.sc-mb-btn .elementor-button-icon, .sc-mb-btn .elementor-button-icon i,
.sc-inst-btn .elementor-button-icon, .sc-inst-btn .elementor-button-icon i { font-size: 14px; margin: 0; }

/* 元の .sc-<prefix>-btn / .sc-<prefix>-btn--outline / .sc-<prefix>-learnmore は Elementor の
 * ラッパー(.elementor-element)にも付くため、枠線・背景・余白・角丸が内側の .elementor-button と
 * 二重に描画される(Explore ボタンの枠線が二重になる原因)。ラッパー側の箱スタイルを打ち消し、
 * 見た目は内側 .elementor-button だけが持つようにする。 */
.elementor-element.sc-mp-btn, .elementor-element.sc-mp-learnmore,
.elementor-element.sc-dj-btn, .elementor-element.sc-dj-learnmore,
.elementor-element.sc-se-btn, .elementor-element.sc-se-learnmore,
.elementor-element.sc-voc-btn, .elementor-element.sc-voc-learnmore,
.elementor-element.sc-mb-btn, .elementor-element.sc-mb-learnmore,
.elementor-element.sc-inst-btn, .elementor-element.sc-inst-learnmore {
	border: none !important; background: transparent !important;
	padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
}
.elementor-element.sc-mp-btn--outline:hover,
.elementor-element.sc-dj-btn--outline:hover,
.elementor-element.sc-se-btn--outline:hover,
.elementor-element.sc-voc-btn--outline:hover,
.elementor-element.sc-mb-btn--outline:hover,
.elementor-element.sc-inst-btn--outline:hover { background: transparent !important; }

/* ------------------------------------------------------------
 * セクション背景写真(hero / facility)。
 * モノリスは .sc-mp-hero__bg / .sc-mp-facility__bg という絶対配置 <div> を使うが、
 * Elementor 版ではそれをショートコードウィジェットで包むと、Elementor が挟む
 * ラッパー(.elementor-widget / .elementor-widget-container / .elementor-shortcode)が
 * 絶対要素の包含ブロックになり幅が 0 に潰れて背景が消える。
 * → ウィジェットで描かず、セクションコンテナ(.elementor-element.sc-mp-hero /
 *   .sc-mp-facility は position:relative)の ::before として CSS から直接描画する。
 *   画像はテーマ同梱(assets/images/)を相対パス参照 = 環境非依存(添付IDに依存しない)。
 *   セレクタは .elementor-element.* に限定し、モノリス(素の div)側とは二重描画しない。
 * ------------------------------------------------------------ */
.elementor-element.sc-mp-hero::before,
.elementor-element.sc-dj-hero::before,
.elementor-element.sc-se-hero::before,
.elementor-element.sc-voc-hero::before,
.elementor-element.sc-mb-hero::before,
.elementor-element.sc-inst-hero::before {
	content: ""; position: absolute; inset: -40px 0; z-index: 0; pointer-events: none;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	filter: blur(4px); mix-blend-mode: lighten; opacity: .3;
}
/* GitHub #104: ヒーロー背景写真は discipline 毎に変える(従来は全 6 ページが home hero =
 * sc-hero-bg.png を使い回していた)。トップ「What Do You Want To Learn」の Explore カード
 * (sc-components.php)で各 discipline に使われている写真と同一のテーマ同梱画像を参照する:
 *   MP=cat-mp.png(629551) / DJ=cat-dj.png(629552) / SE=cat-studio.png(629553) /
 *   Vocals=cat-vocals.png(629554) / MB=cat-business.png(629555) / Instruments=cat-instruments.png(629556)。
 * 相対パス参照のため環境非依存(添付ID解決に依存しない)。All(sc-disc-hero)と home は対象外。 */
.elementor-element.sc-mp-hero::before   { background-image: url("../images/cat-mp.png"); }
.elementor-element.sc-dj-hero::before   { background-image: url("../images/cat-dj.png"); }
.elementor-element.sc-se-hero::before   { background-image: url("../images/cat-studio.png"); }
.elementor-element.sc-voc-hero::before  { background-image: url("../images/cat-vocals.png"); }
.elementor-element.sc-mb-hero::before   { background-image: url("../images/cat-business.png"); }
.elementor-element.sc-inst-hero::before { background-image: url("../images/cat-instruments.png"); }
.elementor-element.sc-mp-facility::before,
.elementor-element.sc-dj-facility::before,
.elementor-element.sc-se-facility::before,
.elementor-element.sc-voc-facility::before,
.elementor-element.sc-mb-facility::before,
.elementor-element.sc-inst-facility::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: left center/cover no-repeat url("../images/sc-facility-bg.png");
	opacity: .18; mix-blend-mode: hard-light;
	-webkit-mask-image: linear-gradient(to right, #000 40%, transparent 85%);
	        mask-image: linear-gradient(to right, #000 40%, transparent 85%);
}

/* ------------------------------------------------------------
 * コンテナのフレックス指定を強制(Elementor のインライン per-element CSS は
 * `.elementor-element.elementor-element-xxxxxxx` という複合クラスで詳細度が
 * 高いため、素の `.sc-mp-desc{...}` 等よりも先に評価され得る。!important と
 * 具体的なプロパティ限定でここだけ上書きする。基本値は STEP3 のビルドスクリプト
 * 側でも Elementor のネイティブ設定(flex_direction 等)として二重に設定済み。
 * ------------------------------------------------------------ */
.elementor-element.sc-mp-hero__inner,
.elementor-element.sc-dj-hero__inner,
.elementor-element.sc-se-hero__inner,
.elementor-element.sc-voc-hero__inner,
.elementor-element.sc-mb-hero__inner,
.elementor-element.sc-inst-hero__inner {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important;
}
.elementor-element.sc-mp-desc,
.elementor-element.sc-dj-desc,
.elementor-element.sc-se-desc,
.elementor-element.sc-voc-desc,
.elementor-element.sc-mb-desc,
.elementor-element.sc-inst-desc {
	display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; padding: 0 !important;
}
.elementor-element.sc-mp-desc__main,
.elementor-element.sc-dj-desc__main,
.elementor-element.sc-se-desc__main,
.elementor-element.sc-voc-desc__main,
.elementor-element.sc-mb-desc__main,
.elementor-element.sc-inst-desc__main {
	display: flex !important; flex-direction: column !important; gap: 24px !important; padding: 0 !important;
}
.elementor-element.sc-mp-desc__info,
.elementor-element.sc-dj-desc__info,
.elementor-element.sc-se-desc__info,
.elementor-element.sc-voc-desc__info,
.elementor-element.sc-mb-desc__info,
.elementor-element.sc-inst-desc__info {
	display: flex !important; flex-direction: column !important; gap: 4px !important;
}
.elementor-element.sc-mp-facility__inner,
.elementor-element.sc-dj-facility__inner,
.elementor-element.sc-se-facility__inner,
.elementor-element.sc-voc-facility__inner,
.elementor-element.sc-mb-facility__inner,
.elementor-element.sc-inst-facility__inner {
	display: flex !important; align-items: flex-start !important; gap: 24px !important;
}
.elementor-element.sc-mp-facility__text,
.elementor-element.sc-dj-facility__text,
.elementor-element.sc-se-facility__text,
.elementor-element.sc-voc-facility__text,
.elementor-element.sc-mb-facility__text,
.elementor-element.sc-inst-facility__text {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
}

/* ------------------------------------------------------------
 * GitHub #102: Elementor コンテナの既定水平 padding 10px の一括除去。
 * 左右余白は外側の .sc-{p}-sec / .sc-disc-sec 系(PC 80px / SP 16px)が担う設計だが、
 * 内側のテキスト列・hero・contact 等のコンテナに Elementor 既定の 10px が残り、
 * 見出し/本文が PC 90px・SP 26px と +10px ずれていた(#101 で All の外側は対処済み。
 * これはその内側版・全ページ横断)。水平のみ 0 化し、縦のリズムには触れない。
 * ------------------------------------------------------------ */
.elementor-element.sc-mp-hero__inner, .elementor-element.sc-dj-hero__inner,
.elementor-element.sc-se-hero__inner, .elementor-element.sc-voc-hero__inner,
.elementor-element.sc-mb-hero__inner, .elementor-element.sc-inst-hero__inner,
.elementor-element.sc-mp-desc__info, .elementor-element.sc-dj-desc__info,
.elementor-element.sc-se-desc__info, .elementor-element.sc-voc-desc__info,
.elementor-element.sc-mb-desc__info, .elementor-element.sc-inst-desc__info,
.elementor-element.sc-mp-contact__inner, .elementor-element.sc-dj-contact__inner,
.elementor-element.sc-se-contact__inner, .elementor-element.sc-voc-contact__inner,
.elementor-element.sc-mb-contact__inner, .elementor-element.sc-inst-contact__inner,
.elementor-element.sc-mp-facility__text, .elementor-element.sc-dj-facility__text,
.elementor-element.sc-se-facility__text, .elementor-element.sc-voc-facility__text,
.elementor-element.sc-mb-facility__text, .elementor-element.sc-inst-facility__text,
.elementor-element.sc-disc-hero__inner,
.elementor-element.sc-disc-cta {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* #120 コメント対応(2026-07-21): All の .sc-disc-sec__head は Elementor 既定 padding が
 * 残っていた(詳細ページの -desc 系は #120 で 0 化済み)。同様に全辺 0 に固定する。 */
.elementor-element.sc-disc-sec__head {
	padding: 0 !important;
}
/* 共有 Facility テンプレ(sc-facility__text)は PC の位置決めをテンプレ側の __inner
 * 固定 padding が担っており(コンポーネント化ズレは別issueの領域)、PC には触れず
 * SP のみ #102 の 16px 統一に合わせて既定 10px を除去する。 */
@media (max-width: 1024px) {
	.elementor-element.sc-facility__text {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* SP (<=1024px): 元の sc-discipline-*.css と同じブレークポイントで縦積みへ切り替える
 * (flex_direction_tablet/mobile はビルドスクリプト側で設定済みだが、ここでも保険として明示)。 */
@media (max-width: 1024px) {
	.elementor-element.sc-mp-desc,
	.elementor-element.sc-dj-desc,
	.elementor-element.sc-se-desc,
	.elementor-element.sc-voc-desc,
	.elementor-element.sc-mb-desc,
	.elementor-element.sc-inst-desc {
		flex-direction: column !important; align-items: stretch !important; gap: 16px !important;
	}
	.elementor-element.sc-mp-facility__inner,
	.elementor-element.sc-dj-facility__inner,
	.elementor-element.sc-se-facility__inner,
	.elementor-element.sc-voc-facility__inner,
	.elementor-element.sc-mb-facility__inner,
	.elementor-element.sc-inst-facility__inner {
		flex-direction: column !important;
	}
}

/* ------------------------------------------------------------
 * Elementor コンテナは既定で min-width:0 でない子を持つことがあり、テキストの
 * 折り返しが崩れる場合がある対策(必要に応じてピンポイントで緩和)。
 * ------------------------------------------------------------ */
.sc-mp-desc__info.elementor-element, .sc-mp-facility__text.elementor-element,
.sc-dj-desc__info.elementor-element, .sc-dj-facility__text.elementor-element,
.sc-se-desc__info.elementor-element, .sc-se-facility__text.elementor-element,
.sc-voc-desc__info.elementor-element, .sc-voc-facility__text.elementor-element,
.sc-mb-desc__info.elementor-element, .sc-mb-facility__text.elementor-element,
.sc-inst-desc__info.elementor-element, .sc-inst-facility__text.elementor-element { min-width: 0; }

/* ============================================================
 * 第3弾: Disciplines 一覧ページ (/disciplines/, prefix sc-disc-) 専用ブリッジ。
 * 上のセクションは Discipline 詳細5ページ(mp/dj/se/voc/mb/inst)専用のため、
 * 一覧ページの見出し/本文クラス(sc-disc-hero__title 等)は上の各セレクタ群にも
 * 追加済みだが、一覧ページ固有の背景変数・コンテナflex・grid・Explore ボタンは
 * ここにまとめる。
 * ============================================================ */

/* ------------------------------------------------------------
 * 背景(hero / facility)。モノリスは <section style="--sc-disc-hero-bg:url(...)">
 * のようにインラインで CSS変数を設定するが、Elementor 版はコンテナに直接 style
 * 属性を持たせられないため、ここで変数そのものを固定値として設定する。
 * 実際の描画は sc-disciplines.css の `.sc-disc-hero::before` /
 * `.sc-disc-facility::before` が担う(background-image:var(...))。
 * 画像はテーマ同梱(assets/images/)を相対パス参照 = 環境非依存(添付IDに依存しない)。
 * ------------------------------------------------------------ */
.elementor-element.sc-disc-hero {
	--sc-disc-hero-bg: url("../images/disc-hero-bg.png");
}
.elementor-element.sc-disc-facility {
	--sc-disc-fac-bg: url("../images/sc-facility-bg.png");
}

/* ------------------------------------------------------------
 * コンテナのフレックス指定を強制(Elementor のインライン per-element CSS が
 * 素の `.sc-disc-*{...}` より詳細度が高いため、!important で上書きする)。
 * 基本値はビルドスクリプト側でもネイティブ設定として二重に設定済み。
 * ------------------------------------------------------------ */
.elementor-element.sc-disc-hero__inner {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important;
}
.elementor-element.sc-disc-sec__inner {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important;
}
.elementor-element.sc-disc-facility__inner {
	display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 24px !important; /* 2カラム(courseのみ1カラム) */
}
.elementor-element.sc-disc-facility__text {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
}
.elementor-element.sc-disc-cta__inner {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important;
}

@media (max-width: 1024px) {
	.elementor-element.sc-disc-facility__inner { flex-direction: column !important; }
}

/* ------------------------------------------------------------
 * Section head (.sc-disc-sec__head) — Figma の CSS Grid レイアウト
 * (title/desc/btn 列 + stats 列)。sc-disciplines.css の素の
 * `.sc-disc-sec__head{display:grid;...}` は Elementor コンテナ既定の
 * display:flex インラインCSSに詳細度で負けるため、ここで grid を強制する。
 * 各グリッドアイテム(title/desc/stats/btn)は .sc-disc-sec__title /
 * .sc-disc-sec__desc / .sc-disc-stats-cell / .sc-disc-explore の
 * grid-area 指定(sc-disciplines.css / 下記)で配置される。
 * ------------------------------------------------------------ */
.elementor-element.sc-disc-sec__head {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	grid-template-areas: "title stats" "desc stats" "btn stats" !important;
	column-gap: 24px !important; row-gap: 24px !important; align-items: start !important;
}
@media (max-width: 1024px) {
	.elementor-element.sc-disc-sec__head {
		grid-template-columns: 1fr !important;
		grid-template-areas: "title" "desc" "stats" "btn" !important;
		row-gap: 16px !important;
	}
}

/* Stats ショートコードウィジェットのラッパー(.elementor-element)を grid の
 * "stats" セルに配置するためだけのヘルパクラス。実際の見た目(背景/パディング等)は
 * ショートコードが描画する内側の `.sc-disc-ptype` div 自身が sc-disciplines.css の
 * 素のルール(#99 共通クラス)でそのまま担う(二重適用回避のため、ここでは grid-area のみ)。 */
.elementor-element.sc-disc-stats-cell { grid-area: stats; }

/* ------------------------------------------------------------
 * Explore ボタン(Button ウィジェット)。sc-disciplines.css の素の
 * `.sc-disc-explore{grid-area:btn; border; padding; background; ...}` は
 * ウィジェットのラッパー(.elementor-element)に付くため、grid-area はそのまま
 * 活かしつつ、箱の見た目(border/padding/background/border-radius)は内側の
 * 実要素 `.elementor-button` へ付け替える(mp/dj 等の学習済みパターンと同じ)。
 * ------------------------------------------------------------ */
.elementor-element.sc-disc-explore {
	border: none !important; background: transparent !important;
	padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
}
.sc-disc-explore .elementor-widget-container { display: flex; }
.sc-disc-explore .elementor-button-wrapper { display: flex; }
.sc-disc-explore .elementor-button {
	/* #98(2026-07-21): All Explore を .sc-btn の M トークンに寸法整合(min-height36 / padding 7px 20px /
	 * font14 / line-height1.4 / radius pill)。outline 配色は現状維持。hover は白10%(トークン)に統一。 */
	display: inline-flex; align-items: center; justify-content: center; gap: 2px;
	min-height: 36px; width: max-content; margin: 0;
	padding: 7px 20px !important; border: 1px solid var(--sc-border-invert) !important;
	border-radius: 32px !important; background: rgba(255, 255, 255, .06) !important; box-shadow: none !important;
	color: var(--sc-fg); font-family: var(--sc-font); font-weight: var(--sc-fw-bold); font-size: 14px; line-height: var(--sc-lh);
	text-decoration: none;
}
.sc-disc-explore .elementor-button:hover, .sc-disc-explore .elementor-button:focus {
	background: rgba(255, 255, 255, .10) !important; color: var(--sc-fg);
}
.sc-disc-explore .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.sc-disc-explore .elementor-button-icon, .sc-disc-explore .elementor-button-icon i { font-size: 20px; margin: 0; }

/* ------------------------------------------------------------
 * ワイド表示(コンテンツ max-width 超, 例:1700px)での中央寄せ崩れ対策。
 * 元CSSは各ラッパーを `max-width + margin-inline:auto` で中央寄せするが、
 * Elementor コンテナは margin を 0 にするため左寄せになる。auto マージンを復元する。
 * (flex アイテムの auto マージンはクロス軸の余白を吸収して中央寄せする)
 * ------------------------------------------------------------ */
.elementor-element.sc-mp-sec, .elementor-element.sc-dj-sec, .elementor-element.sc-se-sec,
.elementor-element.sc-voc-sec, .elementor-element.sc-mb-sec, .elementor-element.sc-inst-sec,
.elementor-element.sc-mp-facility__inner, .elementor-element.sc-dj-facility__inner,
.elementor-element.sc-se-facility__inner, .elementor-element.sc-voc-facility__inner,
.elementor-element.sc-mb-facility__inner, .elementor-element.sc-inst-facility__inner,
.elementor-element.sc-mp-contact__inner, .elementor-element.sc-dj-contact__inner,
.elementor-element.sc-se-contact__inner, .elementor-element.sc-voc-contact__inner,
.elementor-element.sc-mb-contact__inner, .elementor-element.sc-inst-contact__inner,
.elementor-element.sc-disc-sec__inner, .elementor-element.sc-disc-facility__inner,
.elementor-element.sc-disc-cta__inner {
	margin-left: auto !important;
	margin-right: auto !important;
}