/* ============================================
   FLAGSHIP
   教室一覧ページ
   page-classroom.css
============================================ */


/* ============================================
   基本設定
============================================ */

.fs-classroom-list,
.fs-classroom-list *,
.fs-classroom-list *::before,
.fs-classroom-list *::after {
	box-sizing: border-box;
}

.fs-classroom-list {
	display: block;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	background-color: #ffffff;

	color: #222222;
}


/* ============================================
   SWELL
   教室一覧ページ 上部余白解除
============================================ */

html body #content.l-content,
html body #content.l-content.l-container,
html body .l-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

html body #content.l-content > *:first-child,
html body #main_content.fs-classroom-list,
html body .fs-classroom-list {
	margin-top: 0 !important;
	padding-top: 0 !important;
}



/* ============================================
   SWELL
   標準ページタイトルを非表示
============================================ */

body.page-template-page-classrooms
.c-pageTitle,

body.page-template-page-classrooms
.p-pageTitle,

body.page-template-page-classrooms
.c-postTitle,

body.page-template-page-classrooms
.l-mainContent__header {
	display: none !important;
}








/* ============================================
   教室一覧 PAGE VISUAL
   文章表示だけ専用調整
   PC：指定位置で2行
   SP：自然改行
============================================ */

@media (min-width: 768px) {

	.fs-classroom-list .page-visual__content {
		max-width: 950px;
	}

	.fs-classroom-list .page-visual__description {
		white-space: nowrap;
	}

	.fs-classroom-list .page-visual__description .page-visual__br-pc {
		display: block;
	}

}

@media (max-width: 767px) {

	.fs-classroom-list .page-visual__content {
		max-width: none;
	}

	.fs-classroom-list .page-visual__description {
		white-space: normal;
	}

	.fs-classroom-list .page-visual__description .page-visual__br-pc {
		display: none;
	}

}


/* ============================================
   BREADCRUMB
============================================ */

.fs-classroom-breadcrumb {
	position: relative;
	z-index: 20;

	width: 100vw;

	margin:
		-27px
		0
		0;

	margin-left:
		calc(50% - 50vw);

	padding: 0;
}


/* ============================================
   BREADCRUMB INNER
============================================ */

.fs-classroom-breadcrumb__inner {
	display: flex;
	align-items: center;

	width: fit-content;

	height: 54px;
	min-height: 54px;

	margin: 0;

	padding:
		0
		50px;

	background-color: #ff1200;

	color: #ffffff;

	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;

	white-space: nowrap;
}


/* ============================================
   BREADCRUMB LINK
============================================ */

.fs-classroom-breadcrumb__link {
	color: #ffffff;

	text-decoration: none;
}

.fs-classroom-breadcrumb__link:hover,
.fs-classroom-breadcrumb__link:focus-visible {
	color: #ffffff;

	opacity: 0.8;

	text-decoration: none;
}


/* ============================================
   BREADCRUMB SEPARATOR
============================================ */

.fs-classroom-breadcrumb__separator {
	margin:
		0
		8px;

	color: #ffffff;
}


/* ============================================
   BREADCRUMB CURRENT
============================================ */

.fs-classroom-breadcrumb__current {
	color: #ffffff;
}


/* ============================================
   教室一覧セクション
============================================ */

.fs-classroom-section {
	position: relative;

	width: 100vw;

	margin:
		0
		0
		0
		calc(50% - 50vw);

	padding:
		78px
		0
		108px;

	background-color: #ffffff;
}


/* ============================================
   INNER
============================================ */

.fs-classroom-section__inner {
	width: 100%;
	max-width: 1140px;

	margin:
		0
		auto;

	padding:
		0
		20px;
}


/* ============================================
   GRID
============================================ */

.fs-classroom-grid {
	display: flex;
	flex-direction: column;

	gap: 30px;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ============================================
   CARD
============================================ */

.fs-classroom-card {
	width: 100%;

	margin: 0;
	padding: 0;

	background-color: #ffffff;

	box-shadow:
		0
		2px
		16px
		rgba(0, 0, 0, 0.08);
}


/* ============================================
   CARD INNER
============================================ */

.fs-classroom-card__inner {
	width: 100%;

	margin: 0;

	padding:
		40px
		48px
		44px;
}


/* ============================================
   CARD TITLE
============================================ */

.fs-classroom-card__title {
	position: relative;

	margin:
		0
		0
		18px;

	padding:
		0
		0
		0
		16px;

	color: #222222;

	font-size: 24px;
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: 0.04em;
}

.fs-classroom-card__title::before {
	position: absolute;

	top: 0.08em;
	bottom: 0.08em;
	left: 0;

	width: 3px;

	content: "";

	background-color: #ff1200;
}


/* ============================================
   ADDRESS
============================================ */

.fs-classroom-card__address {
	margin:
		0
		0
		4px;

	padding: 0;

	color: #333333;

	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.025em;
}


/* ============================================
   TEL
============================================ */

.fs-classroom-card__tel {
	margin: 0;
	padding: 0;

	color: #333333;

	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.025em;
}

.fs-classroom-card__tel-label {
	margin-right: 5px;
}

.fs-classroom-card__tel a {
	color: #333333;

	text-decoration: none;
}

.fs-classroom-card__tel a:hover,
.fs-classroom-card__tel a:focus-visible {
	color: #ff1200;

	text-decoration: none;
}


/* ============================================
   BUTTON WRAP
============================================ */

.fs-classroom-card__button-wrap {
	margin:
		22px
		0
		0;

	padding: 0;
}


/* ============================================
   BUTTON
============================================ */

.fs-classroom-card__button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 300px;
	min-height: 46px;

	margin: 0;

	padding:
		8px
		18px;

	border:
		1px
		solid
		#ff1200;

	border-radius: 999px;

	background-color: #ff1200;

	color: #ffffff;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;

	text-align: center;
	text-decoration: none;

	transition:
		opacity 0.2s ease;
}

.fs-classroom-card__button:hover,
.fs-classroom-card__button:focus-visible {
	color: #ffffff;

	opacity: 0.8;

	text-decoration: none;
}


/* ============================================
   NOTE
============================================ */

.fs-classroom-section__note {
	margin:
		34px
		0
		0;

	padding: 0;

	color: #777777;

	font-size: 10px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.02em;
}


/* ============================================
   PAGINATION
============================================ */

.fs-classroom-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	width: 100%;

	margin:
		34px
		0
		0;

	padding:
		32px
		0
		0;

	border-top:
		1px
		solid
		#dddddd;
}


/* ============================================
   PAGINATION ITEM
============================================ */

.fs-classroom-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	margin:
		0
		4px;

	padding: 0;

	border:
		1px
		solid
		#ff1200;

	background-color: #ffffff;

	color: #ff1200;

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;
}


/* ============================================
   CURRENT
============================================ */

.fs-classroom-pagination
.page-numbers.current {
	background-color: #ff1200;

	color: #ffffff;
}


/* ============================================
   HOVER
============================================ */

.fs-classroom-pagination
a.page-numbers:hover,
.fs-classroom-pagination
a.page-numbers:focus-visible {
	background-color: #ff1200;

	color: #ffffff;

	text-decoration: none;
}


/* ============================================
   DOTS
============================================ */

.fs-classroom-pagination
.page-numbers.dots {
	border-color: transparent;

	background-color: transparent;

	color: #ff1200;
}


/* ============================================
   EMPTY
============================================ */

.fs-classroom-empty {
	width: 100%;

	margin:
		0
		auto;

	padding:
		40px
		20px;

	border-top:
		1px
		solid
		#eeeeee;

	border-bottom:
		1px
		solid
		#eeeeee;

	text-align: center;
}

.fs-classroom-empty p {
	margin: 0;
	padding: 0;

	color: #555555;

	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
}


/* ============================================
   1000px以下
============================================ */

@media (max-width: 1000px) {

	.fs-classroom-section__inner {
		max-width: 1140px;
	}

}


/* ============================================
   SMARTPHONE
============================================ */

@media (max-width: 767px) {


	/* ========================================
	   SWELL
	======================================== */

	html body #content,
	html body #content.l-content,
	html body #content.l-container,
	html body .l-content {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}




	/* ========================================
	   BREADCRUMB
	======================================== */

	.fs-classroom-breadcrumb {
		margin-top: -25px;
	}


	/* ========================================
	   BREADCRUMB INNER
	======================================== */

	.fs-classroom-breadcrumb__inner {
		height: 50px;
		min-height: 50px;

		padding:
			0
			32px
			0
			20px;

		font-size: 12px;
	}


	/* ========================================
	   BREADCRUMB SEPARATOR
	======================================== */

	.fs-classroom-breadcrumb__separator {
		margin:
			0
			5px;
	}


	/* ========================================
	   SECTION
	======================================== */

	.fs-classroom-section {
		padding:
			58px
			0
			76px;
	}


	/* ========================================
	   INNER
	======================================== */

	.fs-classroom-section__inner {
		max-width: none;

		padding:
			0
			20px;
	}


	/* ========================================
	   GRID
	======================================== */

	.fs-classroom-grid {
		gap: 20px;
	}


	/* ========================================
	   CARD
	======================================== */

	.fs-classroom-card__inner {
		padding:
			30px
			20px
			26px;
	}


	/* ========================================
	   TITLE
	======================================== */

	.fs-classroom-card__title {
		margin-bottom: 18px;

		padding-left: 14px;

		font-size: 20px;
		font-weight: 800;
		line-height: 1.45;
	}


	/* ========================================
	   ADDRESS
	======================================== */

	.fs-classroom-card__address {
		font-size: 17px;
		font-weight: 600;
		line-height: 1.75;
	}


	/* ========================================
	   TEL
	======================================== */

	.fs-classroom-card__tel {
		font-size: 17px;
		font-weight: 600;
		line-height: 1.75;
	}


	/* ========================================
	   BUTTON
	======================================== */

	.fs-classroom-card__button-wrap {
		margin-top: 20px;
	}

	.fs-classroom-card__button {
		width: 100%;

		min-height: 48px;

		padding:
			10px
			14px;

		font-size: 17px;
		font-weight: 700;
	}


	/* ========================================
	   NOTE
	======================================== */

	.fs-classroom-section__note {
		margin-top: 24px;

		font-size: 9px;
		line-height: 1.7;
	}


	/* ========================================
	   PAGINATION
	======================================== */

	.fs-classroom-pagination {
		margin-top: 30px;

		padding-top: 28px;
	}

	.fs-classroom-pagination
	.page-numbers {
		width: 34px;
		height: 34px;

		margin:
			0
			3px;

		font-size: 12px;
	}


	/* ========================================
	   EMPTY
	======================================== */

	.fs-classroom-empty {
		padding:
			34px
			10px;
	}

	.fs-classroom-empty p {
		font-size: 14px;
	}

}


/* ============================================
   375px以下
============================================ */

@media (max-width: 375px) {

	.fs-classroom-section__inner {
		padding:
			0
			20px;
	}

	.fs-classroom-card__inner {
		padding:
			28px
			18px
			24px;
	}

	.fs-classroom-card__title {
		font-size: 20px;
	}

	.fs-classroom-pagination
	.page-numbers {
		width: 32px;
		height: 32px;
	}

}