@charset "UTF-8";

/* =================================
    共通
================================= */

.lower-title {
	display: none;

	&.environment {
		display: block;

		h1 {
			top: 160px;
			display: flex;
			flex-flow: column;
			gap: 14px;

			span {
				font-size: 23px;
				letter-spacing: .11em;
				line-height: 1.39;
			}
		}
	}
}
@media screen and (max-width: 900px) {
	.lower-title.environment h1 {
		top: 100px;
	}
}

@media screen and (max-width: 500px) {
	.lower-title.environment h1 {
		top: 90px;
		font-size: 28px;
		gap: 0;
	}
}

main {
	margin-top: 110px;

	section {
		border: 1px solid #0661B5;
		border-radius: 50px;
		padding: 70px 76px 60px;
		margin: 40px auto 0;
		width: 90%;
		max-width: 1184px;

		h2 {
			border-bottom: 1px solid #0661B5;
			color: #0661B5;
			font-size: 28px;
			letter-spacing: .06em;
			line-height: 1.14;
			padding-bottom: 24px;
		}

		p {
			color: #1F1F1F;
			font-weight: 500;
			font-size: 16px;
			line-height: 1.875;
			margin-top: 24px;
		}

		.img-scroll {
			margin-top: 30px;
		}

		&.program {
			padding: 70px 60px 64px 48px;

			.img-scroll {
				margin-top: 70px;
			}
		}
	}
}

.swipe-guide {
	display: none;
}

/* =================================
	tablet
================================= */
@media screen and (max-width: 1200px) {

	/* スワイプ案内 */
	.swipe-guide {
		display: flex;
		flex-flow: column;
		gap: 10px;
		color: #222;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: .08em;
	}

	.swipe-guide-dot {
		width: 8px;
		height: 8px;
		background: #222;
		border-radius: 50%;
		animation: swipeDot 1.4s ease-in-out infinite;
	}

	@keyframes swipeDot {

		0%,
		100% {
			transform: translateX(-5px);
			opacity: .4;
		}

		50% {
			transform: translateX(5px);
			opacity: 1;
		}
	}

	/* 画像スクロール */
	.img-scroll-wrap {
		width: 100%;
		margin-top: 30px;
	}

	.img-scroll {
		cursor: grab;
		margin-top: 10px !important;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		/* ブラウザ標準のスクロールバーを完全に非表示 */
		scrollbar-width: none;
		-ms-overflow-style: none;

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

		&.is-dragging {
			cursor: grabbing;
		}

		img {
			display: block;
			width: max-content;
			max-width: none;
			height: auto;
		}
	}

	/* カスタムスクロールバー */
	.custom-scrollbar {
		position: relative;
		background: #fff;
		border: 1px solid #A3A3A3;
		border-radius: 20px;
		box-sizing: border-box;
		cursor: pointer;
		width: 100%;
		max-width: 345px;
		height: 16px;
		margin: 35px auto 0;
	}

	/* スクロールバーのつまみ */
	.custom-scrollbar-thumb {
		position: absolute;
		top: 3px;
		left: 5px;
		height: 8px;
		width: 50px;
		background: #A3A3A3;
		border-radius: 20px;
		cursor: grab;
		box-sizing: border-box;
		user-select: none;
		touch-action: none;

		&:hover {
			background: #ccc;
		}

		&:active {
			cursor: grabbing;
			background: #ccc;
		}
	}
}

@media screen and (max-width: 1024px) {
	main {
		section {
			padding: 44px 40px 68px;

			&.program {
				padding: 44px 40px 45px;
			}
		}
	}
}

/* =================================
	sp
================================= */
@media screen and (max-width: 767px) {
	main {
		margin-top: 70px;

		section {
			border: none;
			padding: 0;

			&.program {
				padding: 0;
				margin-top: 125px;
			}
		}
	}
}