/* ====================================================================================
   Page Component Styles
==================================================================================== */

/* ---- life/voices.html ---- */
	.voice-card {
		background: #fff;
		border-radius: 10px;
		padding: 32px;
		margin-bottom: 32px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		position: relative;
	}

	.voice-card::before {
		content: '\201C';
		font-size: 60px;
		color: #3e756d;
		opacity: 0.25;
		position: absolute;
		top: 16px;
		left: 20px;
		line-height: 1;
		font-family: serif;
	}

	.voice-header {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 20px;
	}

	.voice-icon {
		width: 60px;
		height: 60px;
		background: #e8f4f2;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.voice-icon span {
		font-size: 26px;
	}

.voice-meta h3 {
	text-align: left !important;
	font-size: 18px !important;
	font-weight: 500;
	margin-bottom: 4px !important;
	}

	.voice-meta p {
		font-size: 13px;
		color: #3e756d;
	}

	.voice-text {
		font-size: 15px;
		line-height: 1.9;
		color: #555;
		padding-left: 4px;
	}

	.voice-result {
		margin-top: 16px;
		padding: 12px 16px;
		background: #f0f8f7;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		color: #37796d;
	}

/* ---- life/schedule.html ---- */
	.schedule-table {
		width: 100%;
		border-collapse: collapse;
	}

	.schedule-table th {
		background: var(--color-cta-teal-dark);
		color: #fff;
		padding: 12px 16px;
		text-align: center;
		font-weight: 500;
	}

	.schedule-table td {
		padding: 14px 16px;
		border-bottom: 1px solid #ddd;
		vertical-align: top;
	}

	.schedule-table tr:nth-child(even) td {
		background: #f9f9f9;
	}

	.schedule-table .month {
		font-weight: 600;
		color: #3e756d;
		white-space: nowrap;
	}

	@media screen and (max-width: 768px) {
		.schedule-table {
			display: block;
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
		}

		.schedule-table thead {
			display: none;
		}

		.schedule-table tbody,
		.schedule-table tr,
		.schedule-table th,
		.schedule-table td {
			display: block;
			width: 100%;
		}

		.schedule-table tr {
			margin-bottom: 12px;
			border: 1px solid #d9e8e5;
			border-radius: 8px;
			background: #fff;
			overflow: hidden;
		}

		.schedule-table td {
			padding: 12px 14px;
			border-bottom: 0;
			font-size: clamp(14px, 3.6vw, 15px);
			line-height: 1.7;
			letter-spacing: 0.02em;
			white-space: normal;
			overflow-wrap: anywhere;
		}

		.schedule-table .month {
			background: #f0f8f7;
			color: #3e756d;
			font-weight: 700;
		}
	}

	.tag {
		display: inline-block;
		padding: 2px 10px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 500;
		margin-right: 4px;
		margin-bottom: 4px;
	}

	.tag-exam {
		background: #fdeee9;
		color: #b03a2e;
	}

	.tag-event {
		background: #e8f4f2;
		color: #37796d;
	}

	.tag-school {
		background: #f0eeff;
		color: #5a4a9e;
	}

/* ---- life/daily.html ---- */
	.timeline {
		position: relative;
	}

	.timeline::before {
		content: '';
		position: absolute;
		left: 60px;
		top: 0;
		bottom: 0;
		width: 2px;
		background: #ddd;
	}

	.tl-item {
		display: flex;
		gap: 0;
		margin-bottom: 32px;
		position: relative;
	}

	.tl-time {
		width: 60px;
		flex-shrink: 0;
		padding-top: 6px;
		font-size: 13px;
		color: #6f6f6f;
		font-weight: 500;
		text-align: right;
		padding-right: 16px;
	}

	.tl-dot {
		width: 16px;
		height: 16px;
		background: #87c1b9;
		border-radius: 50%;
		flex-shrink: 0;
		margin-top: 8px;
		position: relative;
		z-index: 1;
	}

	.tl-body {
		padding-left: 20px;
		padding-top: 2px;
	}

.tl-body h3 {
	text-align: left !important;
	font-size: 18px !important;
	font-weight: 500;
	margin-bottom: 4px !important;
	}

	.tl-body p {
		font-size: 14px;
		color: #666;
		line-height: 1.7;
	}

/* ---- life/facilities.html ---- */
	.facility-block {
		display: flex;
		gap: 50px;
		align-items: flex-start;
		margin-bottom: 70px;
	}

	.facility-block.reverse {
		flex-direction: row-reverse;
	}

	.facility-img {
		width: 45%;
		flex-shrink: 0;
	}

	.facility-img .img-placeholder {
		background: #e8f4f2;
		border-radius: 10px;
		aspect-ratio: 4/3;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #3e756d;
	}

	.facility-photo {
		width: 100%;
		display: block;
		border-radius: 10px;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.facility-img .img-placeholder span {
		font-size: 48px;
		margin-bottom: 8px;
	}

	.facility-img .img-placeholder p {
		font-size: 14px;
		font-weight: 500;
	}

.facility-text h3 {
	text-align: left !important;
	font-size: 18px !important;
	font-weight: 500;
	margin-bottom: 15px !important;
		padding-bottom: 12px;
		border-bottom: 2px solid #87c1b9;
	}

	.facility-text p {
		font-size: 15px;
		line-height: 1.9;
		color: #555;
		margin-bottom: 15px;
	}

	.facility-text ul {
		padding-left: 1.5em;
		font-size: 14px;
		line-height: 2.2;
		color: #666;
	}

	@media(max-width:768px) {

		.facility-block,
		.facility-block.reverse {
			flex-direction: column;
		}

		.facility-img {
			width: 100%;
		}
	}

/* ---- courses/honka.html ---- */
	/* フローチャート */
	.flow-chart {
		margin: 0 auto 30px;
		margin: 0 auto;
	}

	.flow-year {
		text-align: center;
		font-family: 'Zen Maru Gothic', sans-serif;
		font-size: 13px;
		color: #6f6f6f;
		margin-bottom: 8px;
		letter-spacing: 0.05em;
	}

	.flow-box {
		background: #fff;
		border: 2px solid #5aab9e;
		border-radius: 10px;
		padding: 20px 24px;
		text-align: center;
		position: relative;
	}

	.flow-box h3 {
		font-family: 'Zen Maru Gothic', sans-serif;
		font-size: 19px !important;
		color: #37796d;
		margin-bottom: 6px !important;
	}

	.flow-box h3 a {
		color: inherit;
		text-decoration: none;
	}

	.flow-box h3 a:hover {
		text-decoration: underline;
	}

	.flow-box p {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	.flow-arrow {
		text-align: center;
		padding: 12px 0;
		color: #37796d;
		font-size: 28px;
		line-height: 1;
	}

	.flow-branch {
		display: flex;
		gap: 16px;
		justify-content: center;
	}

	.flow-branch .flow-box {
		flex: 1;
		min-width: 0;
	}

	/* 分岐矢印 */
	.flow-branch-arrow {
		position: relative;
		height: 50px;
		margin: 0 auto;
		margin: 0 auto 30px;
	}

	.flow-branch-arrow::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: 20px;
		background: #5aab9e;
	}

	.flow-branch-arrow::after {
		content: '';
		position: absolute;
		top: 20px;
		left: calc(50% / 3 + 16.67%);
		right: calc(50% / 3 + 16.67%);
		height: 2px;
		background: #5aab9e;
	}

	.flow-branch-lines {
		position: relative;
		height: 30px;
		margin: 0 auto 30px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		gap: 16px;
	}

	.flow-branch-lines .branch-line {
		flex: 1;
		position: relative;
	}

	.flow-branch-lines .branch-line::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: 100%;
		background: #5aab9e;
	}

	.flow-branch-lines .branch-line::after {
		content: '';
		display: none;
	}

	/* 分岐コネクタ */
	.flow-connector {
		position: relative;
		height: 40px;
		margin: 0 auto 30px;
		margin: 0 auto;
	}

	.flow-connector .vert-line {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: 18px;
		background: #5aab9e;
	}

	.flow-connector .horiz-line {
		position: absolute;
		top: 18px;
		height: 2px;
		background: #5aab9e;
	}

	.flow-connector .drop-1,
	.flow-connector .drop-2,
	.flow-connector .drop-3 {
		position: absolute;
		top: 18px;
		width: 2px;
		height: 22px;
		background: #5aab9e;
	}

	.flow-connector .drop-1::after,
	.flow-connector .drop-2::after,
	.flow-connector .drop-3::after {
		content: '';
		display: none;
	}

	@media (max-width: 768px) {
		.flow-branch {
			flex-direction: column;
			gap: 0;
		}

		.flow-branch .flow-box {
			border-radius: 10px;
		}

		.flow-connector {
			display: none;
		}

		.flow-branch-mobile-arrows {
			display: block;
		}

		.flow-branch .flow-box+.flow-box {
			margin-top: 0;
		}

		.mobile-arrow {
			text-align: center;
			padding: 8px 0;
			color: #37796d;
			font-size: 24px;
			line-height: 1;
		}
	}

	@media (min-width: 769px) {
		.mobile-arrow {
			display: none;
		}
	}