/* ============================================================
 * Sound Collective — Disciplines 詳細ページ (DJ) 専用CSS
 * Figma "/all-classes" (DJ)  PC: 1914:42868 / SP: 1134:9533
 * デザイントークンは sc-design-tokens.css の :root を利用。
 * アクセントは --sc-brand-dj (#ff9d17)。クラスは sc-dj-* で衝突回避。
 * ============================================================ */

.sc-dj {
	--sc-dj-accent: var(--sc-brand-dj);
	--sc-dj-ink: #0b0d27;            /* foreground-invert : アクセント上の濃色文字 */
	--sc-dj-margin: 80px;            /* PC ページ左右マージン (1440→内容1280) */
	--sc-dj-card-bg: var(--sc-bg-bright);
	--sc-dj-card-border: #6a6a6a;
	background: var(--sc-bg);
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	line-height: var(--sc-lh);
}
.sc-dj *, .sc-dj *::before, .sc-dj *::after { box-sizing: border-box; }
.sc-dj h1, .sc-dj h2, .sc-dj h3, .sc-dj p, .sc-dj dl, .sc-dj dd { margin: 0; }
.sc-dj img { max-width: 100%; display: block; }

/* ===== 汎用ボタン (Button_square: outline) ===== */
.sc-dj-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	min-height: 36px; padding: 7px 12px; width: max-content;
	border-radius: var(--sc-radius-pill); text-decoration: none; cursor: pointer;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-dj-btn--outline { border: 1px solid var(--sc-border-invert); color: var(--sc-fg); background: transparent; }
.sc-dj-btn--outline:hover { background: var(--sc-bg-hover-strong); color: var(--sc-primary); }
.sc-dj-btn i { font-size: 14px; }

/* ============================== Title Area ============================== */
.sc-dj-hero {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 320px; padding: 48px 16px;
}
.sc-dj-hero__bg {
	position: absolute; inset: -40px 0; z-index: 0;
	background: center/cover no-repeat;
	filter: blur(4px); mix-blend-mode: lighten; opacity: .3; pointer-events: none;
}
.sc-dj-hero__inner {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
	max-width: 1280px; width: 100%;
}
.sc-dj-hero__title { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-white); }
.sc-dj-hero__sub { font-size: 18px; font-weight: var(--sc-fw-medium); color: var(--sc-white); }
.sc-dj-hero__tags { display: flex; gap: 5px; }

/* Chip (hero tag) */
.sc-dj-chip {
	display: inline-flex; align-items: center;
	background: var(--sc-bg-hover-strong); border-radius: 54px; padding: 2px 4px;
	overflow: hidden;
}
.sc-dj-chip i { width: 16px; font-size: 12px; text-align: center; color: var(--sc-fg); }
.sc-dj-chip span { padding: 0 4px; font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); white-space: nowrap; }

/* ============================== Filter / Sort ============================== */
.sc-dj-controls { display: flex; flex-direction: column; }
.sc-dj-filterbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
	padding: 16px var(--sc-dj-margin) 0;
}
.sc-dj-fchip {
	display: inline-flex; align-items: center; justify-content: center;
	height: 36px; padding: 8px 6px; border: none; border-radius: 54px; cursor: pointer;
	background: var(--sc-bg-hover-strong); color: var(--sc-fg);
	font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.4;
}
.sc-dj-fchip span { padding: 0 4px; white-space: nowrap; }
.sc-dj-fchip:hover { background: rgba(255,255,255,.16); }
.sc-dj-fchip.is-active { background: var(--sc-dj-accent); color: var(--sc-dj-ink); }
.sc-dj-fchip.is-active span { font-size: 12px; }

/* ============================== Section (Program/Course/Online/Workshop) ============================== */
.sc-dj-sec {
	position: relative; max-width: 1440px; margin-inline: auto;
	padding: 40px var(--sc-dj-margin);
}
.sc-dj-sec__icon {
	/* GitHub #29: PC top8・白・opacity10%(SP は @media 側で top32/right-24 に上書き) */
	/* #158: セクション左端で見切れる配置。content列-8px から更に88px左へ = margin-96(セクション基準 約-16px)。はみ出しは .sc-dj-sec の overflow-x:clip でクリップ */
	position: absolute; top: 8px; left: calc(var(--sc-dj-margin) - 96px); right: auto;
	width: 120px; height: 120px; color: #fff; opacity: .1; pointer-events: none; z-index: 0;
}
/* GitHub #158: Elementor 描画のハブ詳細ページでは、アイコンを内包するショートコード
 * ウィジェットのラッパー(.elementor-widget-shortcode = position:relative)がアイコンの
 * 包含ブロック(offsetParent)になり、top/left が .sc-dj-sec ではなくウィジェット基準で
 * 解決してアイコンが見出し付近へ落ち、埋もれて小さく見える(#101 と同型の containing-block 問題)。
 * ラッパーを position:static にして offsetParent から外すと、包含ブロックが position:relative の
 * .sc-dj-sec に戻り、top:8px/left:-8px がセクション左上基準で効く。子孫 :has() を使い、
 * e_optimized_markup の有無(dev=無効/local=有効)によるマークアップ差に依存させない。 */
.sc-dj-sec .elementor-widget-shortcode:has(.sc-dj-sec__icon) { position: static; }
/* #158: PC で左へ寄せたアイコン(left:margin-96=約-16px)の画面外部分をクリップし横スクロールを抑止。
 * PC 限定なのは SP がアイコン右上・右端はみ出し(#101/Figma)を意図表示するため(全ビューポート
 * でクリップすると SP のはみ出しが消え回帰)。overflow-x:clip なので overflow-y は visible のまま=
 * 縦方向のグロー(.sc-dj-sec--glow::before)は残る。 */
@media (min-width: 1025px) {
	.sc-dj-sec { overflow-x: clip; }
}
/* 大きめのアンビエントグロー (Figma Vector 3) */
.sc-dj-sec--glow::before {
	content: ""; position: absolute; left: 50%; top: 45%; transform: translateX(-50%);
	width: 120%; height: 420px; z-index: 0; pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(255,157,23,.10), transparent 70%);
	filter: blur(40px);
}

/* --- description block --- */
.sc-dj-desc {
	position: relative; z-index: 1;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.sc-dj-desc__main { display: flex; flex-direction: column; gap: 24px; max-width: 747px; flex: 1 1 auto; }
.sc-dj-desc--full .sc-dj-desc__main { max-width: none; }
.sc-dj-desc__info { display: flex; flex-direction: column; gap: 4px; }
.sc-dj-desc__title { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-dj-desc__text { font-size: 16px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary); }
.sc-dj-learnmore {
	display: inline-flex; align-items: center; gap: 4px; width: max-content;
	padding: 8px 0; font-size: 12px; font-weight: var(--sc-fw-medium);
	color: var(--sc-fg); text-decoration: underline;
}
.sc-dj-learnmore i { font-size: 12px; }

/* ============================== CardClass ============================== */
.sc-dj-cards { position: relative; z-index: 1; margin-top: 32px; }
.sc-dj-cards--pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sc-dj-cards--pair .sc-dj-card { width: 400px; max-width: 100%; }

.sc-dj-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--sc-dj-card-bg); border: 1px solid var(--sc-dj-card-border); border-radius: var(--sc-radius-card);
}
/* カード下部のブランドグロー (Figma Group 2) */
.sc-dj-card::after {
	content: ""; position: absolute; left: -25%; right: -25%; bottom: -50px; height: 130px; z-index: 0;
	background: radial-gradient(ellipse at center, rgba(255,157,23,.22), transparent 70%);
	filter: blur(22px); mix-blend-mode: lighten; pointer-events: none;
}
.sc-dj-card__thumb { width: 100%; aspect-ratio: 1920 / 1080; background: #4d4d4d center/cover no-repeat; }
.sc-dj-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.sc-dj-card__content { display: flex; flex-direction: column; gap: 16px; }
.sc-dj-card__info { display: flex; flex-direction: column; gap: 4px; }

.sc-dj-card__tags { display: flex; gap: 4px; }
.sc-dj-tag { display: inline-flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: var(--sc-fw-bold); line-height: 1.2; }
.sc-dj-tag--cat { background: var(--sc-dj-accent); color: var(--sc-dj-ink); }
.sc-dj-tag--level { background: var(--sc-bg-hover-strong); color: var(--sc-fg); }

.sc-dj-card__title {
	width: 100%; padding: 2px 4px;
	background: var(--sc-dj-accent); color: var(--sc-dj-ink);
	font-size: 24px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}

.sc-dj-card__stats { display: flex; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sc-border); }
.sc-dj-card__stat { flex: 1 0 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-dj-card__stat:nth-child(2) { text-align: center; }
.sc-dj-card__stat:nth-child(3) { text-align: right; }
.sc-dj-card__stat dt { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-dj-card__stat dd { font-size: 16px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }

.sc-dj-card__desc {
	font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sc-dj-card__price { display: flex; flex-direction: column; gap: 4px; }
.sc-dj-card__price b { font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-dj-card__price span { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }

.sc-dj-card__cta {
	display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 7px 24px;
	background: var(--sc-white); color: var(--sc-dj-ink); border-radius: var(--sc-radius-pill);
	font-size: 18px; font-weight: var(--sc-fw-bold); line-height: 1.4; text-decoration: none;
}
.sc-dj-card__cta:hover { color: var(--sc-primary); }

/* ============================== Carousel (Course/Online/Workshop) ============================== */
.sc-dj-carousel { position: relative; }
.sc-dj-carousel__track {
	display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.sc-dj-carousel__track::-webkit-scrollbar { display: none; }
.sc-dj-carousel__track > .sc-dj-card { flex: 0 0 314px; scroll-snap-align: center; } /* #110: 中央スナップ */
.sc-dj-carousel__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sc-dj-navbtn {
	display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 36px;
	border: none; border-radius: var(--sc-radius-pill); cursor: pointer;
	background: var(--sc-bg-hover-strong); color: var(--sc-fg); font-size: 14px;
}
.sc-dj-navbtn:hover { background: rgba(255,255,255,.16); color: var(--sc-primary); }

/* ============================== Frame 203 : Subscription banner ============================== */
.sc-dj-sub {
	position: relative; overflow: hidden; z-index: 1;
	display: flex; align-items: center; gap: 16px; margin: 32px auto 0; max-width: 876px; padding: 12px;
	background: var(--sc-dj-card-bg); border: 1px solid var(--sc-dj-card-border); border-radius: var(--sc-radius-card);
	text-decoration: none;
}
.sc-dj-sub::after {
	content: ""; position: absolute; left: -20%; bottom: -60px; width: 60%; height: 130px; z-index: 0;
	background: radial-gradient(ellipse at center, rgba(255,157,23,.22), transparent 70%);
	filter: blur(22px); mix-blend-mode: lighten; pointer-events: none;
}
.sc-dj-sub__main { position: relative; z-index: 1; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-dj-sub__chip { align-self: flex-start; background: var(--sc-bg-hover-strong); border-radius: 54px; padding: 2px 8px; font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }
.sc-dj-sub__title { font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.4; color: var(--sc-fg); }
.sc-dj-sub__meta { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-dj-sub__meta b { color: var(--sc-fg); font-weight: var(--sc-fw-bold); }
.sc-dj-sub__arrow { position: relative; z-index: 1; color: var(--sc-fg); }
.sc-dj-sub__arrow i { font-size: 24px; }

/* ============================== Facility banner ============================== */
.sc-dj-facility { position: relative; overflow: hidden; padding: 48px var(--sc-dj-margin); }
.sc-dj-facility__bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: left center/cover no-repeat; 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%);
}
.sc-dj-facility__inner {
	position: relative; z-index: 1; max-width: 1296px; margin-inline: auto;
	display: flex; align-items: flex-start; gap: 24px;
}
.sc-dj-facility__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-dj-facility__title { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-dj-facility__text p { font-size: 18px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg); }
.sc-dj-facility__shot { flex: 0 0 auto; width: 525px; height: 297px; object-fit: cover; border-radius: var(--sc-radius-card); }

/* ============================== Speak to our Team ============================== */
.sc-dj-contact { background: var(--sc-bg-bright); padding: 48px 16px; }
.sc-dj-contact__inner { max-width: 846px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
.sc-dj-contact__title { font-size: 32px; font-weight: var(--sc-fw-bold); line-height: 1.2; text-align: center; color: var(--sc-fg); }
.sc-dj-form { display: flex; flex-direction: column; gap: 8px; }
.sc-dj-form__fields { display: flex; flex-direction: column; gap: 12px; }
.sc-dj-field { display: flex; flex-direction: column; gap: 4px; }
.sc-dj-field label { font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }
.sc-dj-field input, .sc-dj-field textarea {
	width: 100%; min-height: 36px; padding: 8px 12px;
	background: var(--sc-bg-hover-strong); border: .5px solid var(--sc-border); border-radius: 8px;
	color: var(--sc-fg); font-family: var(--sc-font); font-size: 13px; line-height: 1.5;
}
.sc-dj-field textarea { resize: vertical; }
.sc-dj-field input::placeholder, .sc-dj-field textarea::placeholder { color: var(--sc-fg-secondary); }
.sc-dj-form__consent { font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.5; color: var(--sc-fg-secondary); }

/* reCAPTCHA プレースホルダー (Figma 302x76) */
.sc-dj-recaptcha {
	display: flex; align-items: center; gap: 12px; width: 302px; max-width: 100%; height: 76px; padding: 0 12px;
	background: var(--sc-white); border: 1px solid #d3d3d3; border-radius: 3px; box-shadow: 0 0 4px 1px rgba(0,0,0,.08);
}
.sc-dj-recaptcha__box { width: 28px; height: 28px; border: 2px solid #444746; border-radius: 2px; background: #fff; flex: 0 0 auto; }
.sc-dj-recaptcha__label { flex: 1 1 auto; font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-dj-ink); }
.sc-dj-recaptcha__brand { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #555; }
.sc-dj-recaptcha__brand i { font-size: 22px; color: #4285f4; }
.sc-dj-recaptcha__brand small { font-size: 10px; }

.sc-dj-contact__submit {
	width: 100%; min-height: 36px; padding: 7px 12px; border: none; border-radius: var(--sc-radius-pill); cursor: pointer;
	background: var(--sc-primary); color: var(--sc-white); font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-dj-contact__submit:hover { background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); }

/* ============================== 下部追従CTA (#123: Figma 2107:44633 / 2095:34034) ============================== */
/* 単一ピル「Speak to our Team」+chevron。PC=画面右下(右端8px)/ SP=画面下中央。
   連絡フォームが画面内に入ったら JS(IntersectionObserver)で --hide 退避。 */
.sc-dj-fixedcta {
	position: fixed; z-index: 100;
	right: 8px; left: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 36px; padding: 7px 24px;
	background: var(--sc-primary); color: var(--sc-white);
	border-radius: var(--sc-radius-pill); text-decoration: none; white-space: nowrap;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.sc-dj-fixedcta i { font-size: 20px; }
.sc-dj-fixedcta:hover { color: var(--sc-white); background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); }
.sc-dj-fixedcta--hide { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }

/* ============================================================
 * SP (Figma 1134:9533) — max-width:1024px
 * ============================================================ */
@media (max-width: 1024px) {
	/* 装飾グロー/見切れアイコンによる横スクロール抑止 */
	.sc-dj { --sc-dj-margin: 16px; overflow-x: clip; }

	/* 追従CTA: SP は画面下中央に固定(位置のみ上書き) */
	.sc-dj-fixedcta {
		left: 50%; right: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		transform: translateX(-50%); max-width: calc(100% - 32px);
	}
	.sc-dj-fixedcta--hide { transform: translateX(-50%) translateY(12px); }

	.sc-dj-hero { min-height: 240px; padding: 32px 16px; }
	.sc-dj-hero__title { font-size: 32px; }
	.sc-dj-hero__sub { font-size: 16px; }         /* Figma SP: Body/Base 16 */

	/* description は縦積み。順序を Figma SP に合わせる: 説明 → CardProductType → ボタン。
	   desc__main を display:contents 化し、内包する info/ボタンを desc 直下の flex 項目に昇格して order 指定 */
	.sc-dj-desc { flex-direction: column; align-items: stretch; gap: 16px; }
	.sc-dj-desc__main { display: contents; }
	.sc-dj-desc__info { order: 1; }
	.sc-dj-desc .sc-dj-btn { order: 3; }
	.sc-dj-desc__title { font-size: 32px; }

	/* GitHub #29: SP top32/left-8・80px */
	.sc-dj-sec__icon { width: 80px; height: 80px; right: -24px; left: auto; top: 32px; } /* #101: Figma SPは右上・右端8pxはみ出し */

	/* テキスト → カードの余白 (Figma SP: カルーセル 24 / ペア 16) */
	.sc-dj-cards { margin-top: 24px; }

	/* Program の 2枚は縦積み */
	.sc-dj-cards--pair { flex-direction: column; align-items: stretch; margin-top: 16px; }
	.sc-dj-cards--pair .sc-dj-card { width: 100%; }

	/* カルーセルカードは SP 幅 (Figma 308) */
	.sc-dj-carousel__track > .sc-dj-card { flex-basis: 308px; }
	/* #110 SP centered/peek: トラックをセクション左右padding(16px)の外=画面幅まで拡張し、
	 * 両端に (100vw-308)/2 の余白を確保。中央カードが左右均等余白でスナップ + 両隣が
	 * 画面端へ peek (Allページで実測: 余白42.5/peek29.5 @393)。gap は 13px。 */
	.sc-dj-carousel__track {
		width: calc(100% + 32px); margin-inline: -16px;
		padding-inline: calc((100vw - 308px) / 2); scroll-padding-inline: calc((100vw - 308px) / 2);
		gap: 13px;
	}

	/* prev/next は左右端に振り分け、カード中央高さにオーバーレイ (Figma SP) */
	.sc-dj-carousel__nav {
		position: absolute; inset: 0 0 8px; margin: 0;
		align-items: center; justify-content: space-between;
		pointer-events: none;
	}
	.sc-dj-navbtn { pointer-events: auto; }

	/* Subscription banner の上余白 (Figma SP: 24) */
	.sc-dj-sub { margin-top: 24px; }

	/* Facility は縦積み (Figma SP には無いが PHP 上存在するため踏襲) */
	.sc-dj-facility__inner { flex-direction: column; }
	.sc-dj-facility__title { font-size: 32px; }
	.sc-dj-facility__text p { font-size: 14px; }
	.sc-dj-facility__shot { width: 100%; height: auto; aspect-ratio: 525 / 297; }

	/* Speak to our Team (Figma SP: px23/py32・title32・入力/送信 48px・送信 18px) */
	.sc-dj-contact { padding: 32px 16px; } /* #102: SP 左右は 16px に統一(旧 23px は Figma 外の固定値) */
	.sc-dj-contact__title { font-size: 32px; }
	.sc-dj-field input, .sc-dj-field textarea { min-height: 48px; }
	.sc-dj-contact__submit { min-height: 48px; font-size: 18px; }
}

/* #110 fix: tablet(768–1024px) は centered/peek のブリード＋(100vw-308)/2 の過大 padding を
 * 打ち消し、PC と同じ通常スクロールカルーセルに戻す(左空白の解消)。中央+peek は ≤767px のみ。 */
@media (min-width: 768px) and (max-width: 1024px) {
	.sc-dj-carousel__track {
		width: auto; margin-inline: 0;
		padding-inline: 0; scroll-padding-inline: 0; gap: 16px;
	}
}

@media (max-width: 480px) {
	.sc-dj-carousel__track > .sc-dj-card { flex-basis: 82vw; }
	.sc-dj-carousel__track { padding-inline: 9vw; scroll-padding-inline: 9vw; } /* #110: card=82vw なので余白=(100-82)/2=9vw */
	.sc-dj-cards--pair .sc-dj-card { width: 100%; }
}

/* #65 subscription banner glow — テンプレは単一(SC Subscription Banner)、glow のみページ側で再現。
 * 参照ノード(shortcode ウィジェット)の .sc-dj-subwrap 経由で共通 .sc-sub-banner に、旧
 * .sc-dj-sub::after と同じ per-discipline アクセント glow を出す。既存 .sc-dj-sub 系は温存。 */
.sc-dj-subwrap .sc-sub-banner { position: relative; overflow: hidden; }
.sc-dj-subwrap .sc-sub-banner > * { position: relative; z-index: 1; }
.sc-dj-subwrap .sc-sub-banner::after {
	content: ""; position: absolute; left: -20%; bottom: -60px; width: 60%; height: 130px; z-index: 0;
	background: radial-gradient(ellipse at center, rgba(255,157,23,.22), transparent 70%);
	filter: blur(22px); mix-blend-mode: lighten; pointer-events: none;
}