/** 日本で学ぶドバイセミナー LP（/japan-dubai-seminar/）
 *
 * Beyond LP の流体スケーリング手法を踏襲:
 *  - SP は固定 px（モバイルファースト）
 *  - PC は @media (min-width: 960px) 内で --display-ratio (= 100vw / 1280) を使い、
 *    Figma 設計値（1280 想定）の N を calc(N * var(--display-ratio)) で書く
 *  - これにより 1280 では 1:1、1440 では 12.5% 拡大、960 では 25% 縮小と画面幅に応じて滑らかにスケール
 */

.jds-page {
	background-color: #0C1314;
	color: #f4f4f4;
	position: relative;
	/* overflow-x: hidden だと CSS 仕様で overflow-y も auto になり縦スクロールが二重化する。
	 * overflow-x: clip にすると Y 軸は visible のままで、横はみ出しだけクリップ可能。 */
	overflow-x: clip;

	.footer_cta_contact,
	.footer_cta,
	.fab_cta {
		display: none;
	}

	a {
		color: inherit;
		text-decoration: none;
		transition: opacity .2s ease-out;
	}

	a:hover {
		opacity: 0.7;
	}

	img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	.util-spOnly {
		@media (min-width: 960px) {
			display: none !important;
		}
	}

	.util-pcOnly {
		@media not all and (min-width: 960px) {
			display: none !important;
		}
	}

	@media (min-width: 960px) {
		--display-ratio: 100vw / 1280;
	}
}

/* ----------------------------------------------------------------
 * 共通: セクション見出し（小ラベル + ●ドット + 大きな英字）
 * ---------------------------------------------------------------- */
.jds-page [class$="__lead"] {
	position: relative;
	padding-left: 16px;
	font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .07em;
	line-height: 1.213;
	margin: 0 0 22px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 3px;
		width: 10px;
		height: 10px;
		background: #FF6C18;
		border-radius: 50%;
	}

	@media (min-width: 960px) {
		padding-left: calc(20 * var(--display-ratio));
		font-size: calc(19.1 * var(--display-ratio));
		letter-spacing: .07em;

		&::before {
			top: calc(8 * var(--display-ratio));
			width: calc(12 * var(--display-ratio));
			height: calc(12 * var(--display-ratio));
		}
	}
}

.jds-page [class$="__headingLogo"] {
	display: block;
	height: auto;
	max-height: 56px;
	margin-top: 22px;

	@media (min-width: 960px) {
		max-height: none;
		width: auto;
		height: calc(78 * var(--display-ratio));
		margin-top: calc(15 * var(--display-ratio));
	}
}

/* ----------------------------------------------------------------
 * FV
 * ---------------------------------------------------------------- */
.jds-Fv {
	position: relative;
	width: 100%;

	.jds-Fv__bg {
		display: block;
		width: 100%;
		height: auto;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	.jds-Fv__inner {
		position: absolute;
		z-index: 1;
		width: 100%;
		bottom: -27px;
		left: 0;
		padding-inline: 20px;
		text-align: center;
	}

	.jds-Fv__title {
		display: block;
		width: 323px;
		margin-bottom: 30px;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	.jds-Fv__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 310px;
		height: 48px;
		background: linear-gradient(266deg, #E05100 14%, #FF6C18 119%);
		color: #f4f4f4;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: .05em;
		border-radius: 5px;
	}

	@media (min-width: 960px) {
		.jds-Fv__bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		/* PC は左下グラデーション */
		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(112deg, rgba(12, 19, 20, 0.92) 0%, rgba(12, 19, 20, 0) 70%);
			z-index: 1;
		}

		/* PC 下端のフェードアウト */
		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: calc(631 * var(--display-ratio));
			height: calc(199 * var(--display-ratio));
			background: linear-gradient(to bottom, rgba(12, 19, 20, 0) 0%, #0C1314 100%);
			z-index: 1;
		}

		.jds-Fv__inner {
			position: relative;
			z-index: 2;
			padding: calc(139 * var(--display-ratio)) calc(100 * var(--display-ratio)) 0;
			text-align: left;
			bottom: auto;
			left: auto;
			height: calc(773 * var(--display-ratio));
		}

		.jds-Fv__title {
			width: calc(672 * var(--display-ratio));
			max-width: none;
			margin: 0 0 calc(40 * var(--display-ratio));
		}

		.jds-Fv__cta {
			width: calc(241 * var(--display-ratio));
			max-width: none;
			height: calc(48 * var(--display-ratio));
			padding: 0;
			border-radius: calc(5 * var(--display-ratio));
			font-size: calc(14 * var(--display-ratio));
		}
	}
}

/* ----------------------------------------------------------------
 * About
 * ---------------------------------------------------------------- */
.jds-About {
	padding: 56px 0 0;
	background: #0C1314;
	position: relative;
	/* z-index: 2; */

	.jds-About__inner {
		padding: 0 20px;
	}

	/* 見出しはテキストとして表示（about-title.svg は廃止） */
	.jds-About__heading {
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: 1.213;
		letter-spacing: .07em;
		color: #f4f4f4;
		margin: 0 0 24px;
	}

	/* メイン画像（見出し直後・本文前） */
	.jds-About__main {
		display: block;
		margin: 0 0 35px;

		img {
			width: 100%;
			height: auto;
		}
	}

	.jds-About__text {
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 12.73px;
		line-height: 2;
		letter-spacing: .1em;
		margin: 0 0 63px;
	}

	/* PC: 1 行 12 枚自動スクロール */
	.jds-About__imgList {
		display: flex;
		gap: 16px;
		margin-top: 40px;
		padding-inline: 24px;
		overflow-x: scroll;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.jds-About__imgList .jds-About__imgItem {
		flex-shrink: 0;
		width: 240px;
		height: 160px;
		object-fit: cover;
		border-radius: 6px;
	}

	/* SP: 4 + 4 の 2 行スクロール（上段 toRight / 下段 toLeft） */
	.jds-About__imgListSp {
		display: flex;
		gap: 19px;
		padding-inline: 20px;
		overflow-x: scroll;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	#jds-About__imgListSp--1 {
		margin-bottom: 22px;
	}

	.jds-About__imgListSp .jds-About__imgItem {
		flex-shrink: 0;
		width: auto;
		height: 156px;
	}

	@media (min-width: 960px) {
		padding: calc(58 * var(--display-ratio)) 0 0;

		.jds-About__inner {
			padding: 0 calc(100 * var(--display-ratio)) calc(95 * var(--display-ratio));
			display: flex;
			flex-direction: row-reverse;
			gap: calc(52 * var(--display-ratio));
		}

		.jds-About__heading {
			font-size: calc(20.88 * var(--display-ratio));
			line-height: 1.5;
			padding-left: calc(22 * var(--display-ratio));
			margin: 0 0 calc(40 * var(--display-ratio));

			&::before {
				top: calc(10 * var(--display-ratio));
				width: calc(10 * var(--display-ratio));
				height: calc(10 * var(--display-ratio));
			}
		}

		.jds-About__headingLogo {
			margin-bottom: calc(43 * var(--display-ratio));
		}

		.jds-About__main {
			margin: 0 0 calc(40 * var(--display-ratio));
			width: calc(455 * var(--display-ratio));
			flex-shrink: 0;
		}

		.jds-About__text {
			font-size: calc(12.7 * var(--display-ratio));
			line-height: 2;
			letter-spacing: .1em;
			max-width: calc(573 * var(--display-ratio));
			margin: 0;
		}

		.jds-About__imgList {
			gap: calc(34 * var(--display-ratio));
			padding-inline: calc(100 * var(--display-ratio));
			position: relative;
			z-index: 1;
		}

		.jds-About__imgList .jds-About__imgItem {
			width: auto;
			height: calc(284 * var(--display-ratio));
			border-radius: 0;
		}
	}
}

/* ----------------------------------------------------------------
 * Reserve（上下 2 回使う）
 * ---------------------------------------------------------------- */
.jds-Reserve {
	position: relative;
	padding: 53px 20px 0;
	background: #0C1314;
	/* 背景画像 (.jds-Reserve__bg) が大画面幅でセクション外（特にフッター側）にはみ出るのを防ぐ。
	 * overflow: clip は他軸への影響なくクリップできる（hidden だと他軸が auto になる仕様）。 */
	overflow: clip;

	&.jds-Reserve--last {
		padding: 75px 20px 54px;
	}

	.jds-Reserve__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		z-index: 0;
		pointer-events: none;
		/* 上下端を透過グラデで馴染ませる。
		 * overflow: clip でばっつり切れる代わりに、画像自体を上下に向けて薄くフェードアウトさせ、
		 * セクションの背景色 #0C1314 へ滑らかに繋ぐ。 */
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 88%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 88%, transparent 100%);
	}

	.jds-Reserve__inner {
		position: relative;
		z-index: 1;
	}

	.jds-Reserve__heading {
		margin-bottom: 32px;
	}

	.jds-Reserve__headingLogo {
		width: 144px;
	}

	.jds-Reserve__list {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 0;
		margin-bottom: 64px;
	}

	.jds-Reserve__item {
		background: transparent;
		border-radius: 5px;
		overflow: hidden;
	}

	.jds-Reserve__itemLink {
		display: block;
	}

	/* 画像を背面に敷き、右側に開催情報を載せるカード */
	.jds-Reserve__itemCard {
		position: relative;
		height: 153px;
		overflow: hidden;
		border-radius: 5px;
	}

	.jds-Reserve__itemImg {
		position: absolute;
		inset: 0;
		z-index: 0;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	/* 右側パネル: ダーク背景 + 情報 */
	.jds-Reserve__itemInfo {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 68%;
		padding: 14px 16px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		background: linear-gradient(to right, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.95) 30%);
		z-index: 1;
	}

	.jds-Reserve__itemDate {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		color: #f4f4f4;
		margin: 0;
		display: flex;
		align-items: baseline;
		gap: 2px;
		margin-bottom: 8px;
	}

	.jds-Reserve__itemDateMonth,
	.jds-Reserve__itemDateDay {
		font-size: 28px;
		letter-spacing: .05em;
		line-height: 1;
	}

	.jds-Reserve__itemDateUnit,
	.jds-Reserve__itemDateDow {
		font-size: 13px;
		margin-right: 2px;
	}

	.jds-Reserve__itemVenue {
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 13px;
		line-height: 1.3;
		letter-spacing: .07em;
		color: #f4f4f4;
		margin: 0;
		word-break: keep-all;
	}

	.jds-Reserve__itemParts {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.jds-Reserve__itemPart {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.jds-Reserve__itemPartLabel {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		height: 18px;
		padding: 0 8px;
		background: #fff;
		color: #1a1a1a;
		border-radius: 3px;
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 11px;
		letter-spacing: .07em;
	}

	.jds-Reserve__itemPartTime {
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: .07em;
		color: #f4f4f4;
	}

	/* 注: <a> 要素にして使うため、リンクの :visited / :focus / text-decoration を明示的に無効化 */
	.jds-Reserve__itemCta,
	.jds-Reserve__itemCta:link,
	.jds-Reserve__itemCta:visited,
	.jds-Reserve__itemCta:hover,
	.jds-Reserve__itemCta:active,
	.jds-Reserve__itemCta:focus {
		color: #f4f4f4;
		text-decoration: none;
	}

	.jds-Reserve__itemCta {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		background: linear-gradient(265deg, #E05100 14%, #FF6C18 119%);
		border-radius: 5px;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: .04em;
	}

	@media (min-width: 960px) {
		padding: calc(120 * var(--display-ratio)) calc(100 * var(--display-ratio)) 0;

		.jds-Reserve__bg {
			top: calc(-128 * var(--display-ratio));
		}
		
		.jds-Reserve__heading {
			margin-bottom: calc(98 * var(--display-ratio));
		}

		.jds-Reserve__headingLogo {
			width: auto;
		}

		.jds-Reserve__list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: calc(62 * var(--display-ratio)) calc(77 * var(--display-ratio));
		}

		/* 3 番目（Nagoya）は 2 行目中央に単独配置（1 col 幅相当に絞る） */
		.jds-Reserve__item:nth-of-type(3) {
			grid-column: 1 / -1;
			width: calc(50% - 10 * var(--display-ratio));
			justify-self: center;
		}

		/* Reserve#2 (last) も PC では同じ padding になるよう specificity を合わせる */
		&.jds-Reserve--last {
			padding: calc(150 * var(--display-ratio)) calc(100 * var(--display-ratio)) calc(100 * var(--display-ratio));
		}

		.jds-Reserve__itemCard {
			height: calc(207 * var(--display-ratio));
			border-radius: calc(5 * var(--display-ratio));
		}

		.jds-Reserve__itemInfo {
			width: 65%;
			padding: calc(20 * var(--display-ratio)) calc(24 * var(--display-ratio));
			gap: calc(8 * var(--display-ratio));
		}

		.jds-Reserve__itemDateMonth,
		.jds-Reserve__itemDateDay {
			font-size: calc(31.95 * var(--display-ratio));
		}

		.jds-Reserve__itemDateUnit,
		.jds-Reserve__itemDateDow {
			font-size: calc(14.6 * var(--display-ratio));
		}

		.jds-Reserve__itemVenue {
			font-size: calc(15 * var(--display-ratio));
			line-height: 1.3;
		}

		.jds-Reserve__itemPartLabel {
			min-width: calc(68 * var(--display-ratio));
			height: calc(26 * var(--display-ratio));
			padding: 0 calc(12 * var(--display-ratio));
			border-radius: calc(5 * var(--display-ratio));
			font-size: calc(13.5 * var(--display-ratio));
		}

		.jds-Reserve__itemPartTime {
			font-size: calc(15 * var(--display-ratio));
		}

		.jds-Reserve__itemCta {
			margin: calc(30 * var(--display-ratio)) auto 0;
			height: calc(49 * var(--display-ratio));
			width: calc(296 * var(--display-ratio));
			border-radius: calc(5 * var(--display-ratio));
			font-size: calc(14 * var(--display-ratio));
		}
	}
}

/* ----------------------------------------------------------------
 * Information（PC は 2 列レイアウト：左に見出し / 右に 5 項目）
 * ---------------------------------------------------------------- */
.jds-Info {
	position: relative;
	padding: 78px 20px 0;
	background: #0C1314;

	.jds-Info__bg {
		position: absolute;
		top: 53px;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 0;
		pointer-events: none;
	}

	.jds-Info__headingLogo {
		width: 203px;
	}

	.jds-Info__inner {
		position: relative;
		z-index: 1;
	}

	.jds-Info__heading {
		margin-bottom: 24px;
	}

	.jds-Info__list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.jds-Info__item {
		display: flex;
		gap: 14px;
		align-items: flex-start;
		padding: 22px 20px;
		margin-inline: -20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.jds-Info__itemNo {
		flex-shrink: 0;
		font-family: 'minerva-modern', serif;
		font-weight: 400;
		font-size: 22px;
		min-width: 36px;
	}

	.jds-Info__itemBody {
		flex: 1;
	}

	.jds-Info__itemTitle {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 1.4;
		color: #FF6C18;
		margin: 0 0 4px;
	}

	.jds-Info__itemDesc {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 13px;
		line-height: 1.4;
		margin: 0;
	}

	@media (min-width: 960px) {
		padding: calc(75 * var(--display-ratio)) calc(100 * var(--display-ratio)) calc(120 * var(--display-ratio));

		.jds-Info__inner {
			display: grid;
			grid-template-columns: calc(380 * var(--display-ratio)) 1fr;
			gap: calc(36 * var(--display-ratio));
			align-items: start;
		}

		.jds-Info__heading {
			margin-bottom: 0;
		}

		.jds-Info__headingLogo {
			width: auto;
		}

		.jds-Info__item {
			padding: calc(16 * var(--display-ratio)) 0;
			gap: calc(20 * var(--display-ratio));
		}

		.jds-Info__itemNo {
			font-family: 'minerva-modern', serif;
			font-weight: 400;
			font-size: calc(22.1 * var(--display-ratio));
			min-width: calc(56 * var(--display-ratio));
		}

		.jds-Info__itemTitle {
			font-size: calc(16.4 * var(--display-ratio));
		}

		.jds-Info__itemDesc {
			font-size: calc(16.4 * var(--display-ratio));
		}
	}
}

/* ----------------------------------------------------------------
 * JCME 会社紹介
 *  - SP: dark bg（周囲のセクションと連続）+ 白ロゴ + 白テキスト
 *  - PC: light bg + 黒ロゴ + 黒テキスト
 * ---------------------------------------------------------------- */
.jds-Jcme {
	/* SP デフォルト: 周囲と同じダークなページ背景に溶け込む */
	background: #0C1314;
	color: #f4f4f4;
	padding: 48px 20px 0;

	.jds-Jcme__inner {
		display: flex;
		flex-direction: column;
	}

	.jds-Jcme__info {
		display: flex;
		flex-direction: column;
	}

	.jds-Jcme__lead {
		margin-bottom: 54px;
	}

	/* picture 要素（PC: 黒 / SP: 白）を img と同じ幅で表示 */
	.jds-Jcme__logo {
		margin-inline: auto;
		display: block;
		width: 230px;
		height: auto;
		margin-bottom: 46px;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	.jds-Jcme__text {
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 12px;
		line-height: 1.94;
		text-align: center;
		letter-spacing: 0.1em;
		color: #f4f4f4;
		margin: 0 0 43px;
	}

	.jds-Jcme__list {
		list-style: none;
		display: flex;
		gap: 20px;
		padding: 0;
		margin: 0;
		overflow-x: scroll;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.jds-Jcme__item {
		flex-shrink: 0;
		width: 325px;
		height: auto;

		img {
			display: block;
			width: 100%;
			height: auto;
			object-fit: contain;
		}
	}

	@media (min-width: 960px) {
		/* PC: light bg + 黒テキストに戻す */
		background: #f4f4f4;
		color: #212121;
		padding: calc(120 * var(--display-ratio)) 0 calc(116 * var(--display-ratio)) calc(120 * var(--display-ratio));

		.jds-Jcme__inner {
			flex-direction: row;
			align-items: center;
			gap: calc(78 * var(--display-ratio));
		}

		.jds-Jcme__info {
			flex-shrink: 0;
			width: calc(380 * var(--display-ratio));
			gap: calc(20 * var(--display-ratio));
		}

		.jds-Jcme__logo {
			width: calc(263 * var(--display-ratio));
			height: auto;
			margin-inline: 0;
			margin-bottom: calc(24 * var(--display-ratio));
		}

		.jds-Jcme__text {
			font-size: calc(14 * var(--display-ratio));
			line-height: 2;
			letter-spacing: .07em;
			color: #212121;
			text-align: left;
			margin-bottom: 0;
		}

		/* PC: 外側 wrapper でボタンを overflow: hidden の外に逃がす
		 * min-width: 0 で flex 子要素を縮小可能にし、内部の swiper-wrapper の
		 * スライド合計幅で親が押し広げられて Swiper が lock してしまうのを防ぐ。
		 * 画像カルーセルは画面右端いっぱいまで表示するため、padding-right は付けない。 */
		.jds-Jcme__slider {
			position: relative;
			flex-grow: 1;
			min-width: 0;
		}

		/* Swiper コンテナはここで overflow: hidden を維持。
		 * min-width: 0 で flex/block 子要素として親幅以下に縮小できるようにする */
		.jds-Jcme__listWrapper--pc.swiper {
			min-width: 0;
			overflow: hidden;
		}

		/* CSS gap は無効化（Swiper の spaceBetween で間隔を制御） */
		.jds-Jcme__list {
			gap: 0;
			padding-right: 0;
			overflow: visible;
		}

		.jds-Jcme__item {
			width: calc(468 * var(--display-ratio));
			height: calc(284 * var(--display-ratio));
			border-radius: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				aspect-ratio: auto;
			}
		}

		/* prev / next ボタン（.jds-Jcme__slider 基準の絶対配置） */
		.jds-Jcme__prev.swiper-button-prev,
		.jds-Jcme__next.swiper-button-next {
			top: 50%;
			translate: 0 -50%;
			width: calc(19 * var(--display-ratio));
			height: calc(34 * var(--display-ratio));
			margin-top: 0;
			padding: 0;
			background: transparent;
			border: none;
			cursor: pointer;
			transition: opacity .2s ease-out;
			z-index: 2;
		}

		.jds-Jcme__prev.swiper-button-prev img,
		.jds-Jcme__next.swiper-button-next img {
			display: block;
			width: 100%;
			height: 100%;
		}

		/* prev は Swiper コンテナの外側（左）に配置 */
		.jds-Jcme__prev.swiper-button-prev {
			left: calc(-59 * var(--display-ratio));
		}

		/* next は画像にオーバーレイ表示（画面右端から少し内側） */
		.jds-Jcme__next.swiper-button-next {
			right: calc(20 * var(--display-ratio));
			rotate: 180deg;
		}

		/* Swiper デフォルトの「<」「>」テキスト矢印を消す */
		.jds-Jcme__prev.swiper-button-prev::after,
		.jds-Jcme__next.swiper-button-next::after {
			content: "";
		}

		/* 端まで来たボタンは半透明 + クリック無効（Swiper が自動で .swiper-button-disabled を付与） */
		.jds-Jcme__prev.swiper-button-disabled,
		.jds-Jcme__next.swiper-button-disabled {
			opacity: 0.3;
			cursor: default;
			pointer-events: none;
		}
	}
}

/* ----------------------------------------------------------------
 * Detail / 弊社の実績（PC/SP それぞれ単一画像で出力）
 *  - HTML+CSS でカードを組み立てる方式から、画像出力（detail-img-{pc,sp}.webp）に切替
 * ---------------------------------------------------------------- */
.jds-Detail {
	background: #0C1314;
	padding: 25px 20px 0;

	.jds-Detail__inner {
		max-width: 350px;
		margin: 0 auto;
	}

	.jds-Detail__img {
		display: block;
		width: 100%;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	@media (min-width: 960px) {
		padding: calc(58 * var(--display-ratio)) calc(100 * var(--display-ratio)) 0;

		.jds-Detail__heading {
			margin-bottom: calc(60 * var(--display-ratio));
		}

		.jds-Detail__inner {
			max-width: calc(869 * var(--display-ratio));
		}
	}
}

/* ----------------------------------------------------------------
 * Speaker
 * ---------------------------------------------------------------- */
.jds-Speaker {
	padding: 91px 20px 0;
	background: #0C1314;

	.jds-Speaker__heading {
		margin-bottom: 46px;
	}

	.jds-Speaker__headingLogo {
		width: 146px;
	}

	.jds-Speaker__card {
		display: flex;
		flex-direction: column;
		gap: 11px;
	}

	.jds-Speaker__imgWrap {
		position: relative;
		max-width: 181px;
		margin: 0 auto;
		aspect-ratio: 1 / 1;
	}

	.jds-Speaker__img {
		display: block;
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.jds-Speaker__body {
		text-align: center;
	}

	.jds-Speaker__role {
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: .07em;
		margin: 0;
	}

	.jds-Speaker__name {
		font-family: 'PA1 Gothic Std', 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: .07em;
		margin: 2px 0 0;
	}

	.jds-Speaker__bio p {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 13px;
		line-height: 1.85;
		letter-spacing: .07em;
		margin: 0 0 12px;
	}

	@media (min-width: 960px) {
		padding: calc(78 * var(--display-ratio)) calc(100 * var(--display-ratio)) 0;

		.jds-Speaker__heading {
			margin-bottom: calc(70 * var(--display-ratio));
		}

		.jds-Speaker__headingLogo {
			width: auto;
		}

		.jds-Speaker__card {
			max-width: calc(800 * var(--display-ratio));
			flex-direction: row;
			align-items: flex-start;
			gap: calc(78 * var(--display-ratio));
			margin-inline: auto;;
		}

		.jds-Speaker__imgWrap {
			max-width: none;
			width: calc(242 * var(--display-ratio));
			margin: 0;
			flex-shrink: 0;
		}

		.jds-Speaker__img {
			border-radius: calc(8 * var(--display-ratio));
		}

		.jds-Speaker__body {
			text-align: left;
		}

		.jds-Speaker__role {
			font-size: calc(19.1 * var(--display-ratio));
		}

		.jds-Speaker__name {
			font-size: calc(22.4 * var(--display-ratio));
			margin: calc(4 * var(--display-ratio)) 0 calc(11 * var(--display-ratio));
		}

		.jds-Speaker__bio p {
			font-size: calc(14 * var(--display-ratio));
			line-height: 2;
			margin: 0;
		}
	}
}

/* ----------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------- */
.jds-Faq {
	padding: 67px 20px 0;
	background: #0C1314;

	.jds-Faq__heading {
		margin-bottom: 30px;
	}

	.jds-Faq__headingLogo {
		width: 98px;
	}

	.jds-Faq__item {
		background: #f4f4f4;
		border-radius: 10px;
		overflow: hidden;
	}

	.jds-Faq__item + .jds-Faq__item {
		margin-top: 18px;
	}

	.jds-Faq__question {
		display: flex;
		align-items: center;
		gap: 13px;
		padding: 14px;
		cursor: pointer;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}

	.jds-Faq__qaBadge {
		display: block;
		width: 28px;
		height: 28px;
		flex-shrink: 0;
	}

	.jds-Faq__questionText {
		flex: 1;
		padding-right: 28px;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: .1em;
		color: #333;
	}

	.jds-Faq__arrow {
		display: block;
		width: 22px;
		height: 12px;
		flex-shrink: 0;
	}

	.jds-Faq__arrow--toClose {
		display: none;
	}

	.jds-Faq__item[open] .jds-Faq__arrow--toOpen {
		display: none;
	}

	.jds-Faq__item[open] .jds-Faq__arrow--toClose {
		display: block;
	}

	.jds-Faq__answer {
		overflow: hidden;
	}

	/* 質問と回答の間の点線（Beyond の psbd-Faq__answer::before パターン流用） */
	.jds-Faq__answer::before {
		content: "";
		display: block;
		height: 1px;
		width: calc(100% - 28px);
		margin-inline: 14px;
		background-image: linear-gradient(to right, #333 4px, transparent 4px);
		background-size: 8px 1px;
		background-repeat: repeat-x;
		background-position: left bottom;
	}

	.jds-Faq__answerInner {
		display: flex;
		align-items: flex-start;
		gap: 13px;
		padding: 14px;
	}

	.jds-Faq__answerText {
		flex: 1;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: .1em;
		color: #333;
	}

	@media (min-width: 960px) {
		padding: calc(140 * var(--display-ratio)) calc(100 * var(--display-ratio)) 0;

		.jds-Faq__heading {
			margin-bottom: calc(50 * var(--display-ratio));
		}

		.jds-Faq__inner {
			position: relative;
			z-index: 1;
		}

		.jds-Faq__item {
			border-radius: calc(10 * var(--display-ratio));
		}

		.jds-Faq__item + .jds-Faq__item {
			margin-top: calc(23 * var(--display-ratio));
		}

		.jds-Faq__question {
			padding: calc(18 * var(--display-ratio));
			gap: calc(14 * var(--display-ratio));
			transition: opacity .2s ease-out;
		}

		.jds-Faq__question:hover {
			opacity: .7;
		}

		.jds-Faq__qaBadge {
			width: calc(28 * var(--display-ratio));
			height: calc(28 * var(--display-ratio));
		}

		.jds-Faq__questionText {
			padding-right: calc(32 * var(--display-ratio));
			font-size: calc(14 * var(--display-ratio));
		}

		.jds-Faq__arrow {
			width: calc(25 * var(--display-ratio));
			height: calc(15 * var(--display-ratio));
		}

		.jds-Faq__answer::before {
			width: calc(100% - 36 * var(--display-ratio));
			margin-inline: calc(18 * var(--display-ratio));
			background-image: linear-gradient(to right, #333 calc(4 * var(--display-ratio)), transparent calc(4 * var(--display-ratio)));
			background-size: calc(8 * var(--display-ratio)) 1px;
		}

		.jds-Faq__answerInner {
			padding: calc(18 * var(--display-ratio));
			gap: calc(14 * var(--display-ratio));
		}

		.jds-Faq__answerText {
			font-size: calc(14 * var(--display-ratio));
			line-height: 1.6;
		}
	}
}