/* ==================================== */
/* 1. スライドショー */
/* ==================================== */
.slideshow {
	position: relative;
	margin: 0 auto;
	max-width: 1920px;
	padding: 0 20px;
	aspect-ratio: 3 / 1;
	overflow: hidden;
}

.slide-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.slide-image.active {
	opacity: 1;
}

.slide-nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 10px 0;
}

.slide-btn {
	width: 80px;
	height: 8px;
	background-color: #ddd;
	border: none;
	padding: 0;
	cursor: pointer;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.slide-btn.active {
	background-color: #ccc;
}

.slide-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #007bff;
}

.slide-btn.active::after {
	animation: progress 5s linear forwards;
}

@keyframes progress {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

/* ==================================== */
/* 2. 共通要素 */
/* ==================================== */
section {
	padding: 0px 20px 50px;
}

main {
	padding: 50px 0px 50px;
}

/* ==================================== */
/* 3. セクション1: h1と本文、縦書き */
/* ==================================== */
.two-columns {
	display: flex;
	gap: 30px;
	margin-top: 20px;
	align-items: stretch;
}
.two-columns > div {
	flex: 1;
}

.column-left h1 {
	font-size: 1.4em;
}

.column-left p {
	font-size: 1.3em;
	line-height: 1.8;
}

.column-left img {
	display: block;
}

.column-right {
	display: block;
	text-align: center;
}

.vertical-text {
	writing-mode: vertical-rl;
	color: #1a1a1a;
	text-align: left;
	font-size: 3em;
	line-height: 1.8;
	letter-spacing: 5px;
	font-weight: bold;
	font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', 'serif';
	display: inline-block;
}


/* ==================================== */
/* 4. サービス特徴セクション */
/* ==================================== */

.column-item-link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s, box-shadow 0.3s;
}

.service-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 0;
	text-align: center;
	background-color: #f4f4f4;
	padding: 50px 20px;
	border-radius: 10px;
}

.column-item {
	padding: 15px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	margin: 0;
}

.column-item-link:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.column-item h3 {
	font-weight: bold;
	font-size: 1.1em;
	color: #333;
	margin-bottom: 5px;
	margin-top: 0;
}

.column-item p {
	font-size: 0.9em;
	color: #666;
	margin-left: 0;
	margin: 0;
}

.column-item h3 img {
	width: 150px;
	height: auto;
	max-width: 100%;
	margin: 0 auto 10px;
	display: block;
}

main section:nth-of-type(2) {
	text-align: center;
}


/* ==================================== */
/* 5. 特集セクション */
/* ==================================== */
.two-columns-alt {
	display: flex;
	gap: 30px;
	margin-top: 20px;
	align-items: stretch;
}
.two-columns-alt > div {
	flex: 1;
}

.column-left-alt {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.vertical-heading {
	writing-mode: vertical-rl;
	font-size: 8em;
	color: #1a1a1a;
	font-weight: 800;
	line-height: 1.2;
	font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', 'serif';
}

.column-right-alt > div {
	display: block;
	border: 2px solid #eee;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 10px;
}

.column-right-alt h3 {
	margin-bottom: 5px;
	margin-top: 0;
	font-size: 1.2em;
}

.column-right-alt p {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1em;
}

.column-right-alt img {
	margin-top: 0;
	width: 100%;
	height: auto;
	display: block;
}


/* ==================================== */
/* 6. お知らせセクション */
/* ==================================== */
.two-columns-alt-2 {
	display: flex;
	gap: 30px;
	margin-top: 20px;
	align-items: stretch;
}
.two-columns-alt-2 > div {
	flex: 1;
}


/* ==================================== */
/* 7. 動く背景アニメーション (六角形) */
/* ==================================== */

.hexagon-background-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
	background-color: #ffffff;
}

.hexagon-wrapper {
	position: absolute;
	bottom: -100px;
	opacity: 0;
	pointer-events: none;
	transform-origin: center center;
}

.hexagon {
	width: 80px;
	height: 46.19px;
	background-color: #00665e;
	position: relative;
}

.hexagon::before,
.hexagon::after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
}

.hexagon::before {
	bottom: 100%;
	border-bottom: 23.095px solid #00665e;
}

.hexagon::after {
	top: 100%;
	border-top: 23.095px solid #00665e;
}


/* ==================================== */
/* 8. モバイル対応 (トップページ特有) */
/* ==================================== */
@media (max-width: 768px) {
	/* スライドショーの左右のパディングを維持します */
	.slideshow {
		padding: 0 20px;
	}

	/* セクション1 */
	.column-left {
		order: 2;
	}
	.column-right {
		order: 1;
		height: auto;
		display: block;
		text-align: center;
		min-height: auto;
	}

	.column-left h1 {
		font-size: 1.2em;
	}

	.column-left p {
		font-size: 1.0em;
	}

	.vertical-text {
		writing-mode: initial;
		font-size: 1.8em;
		color: #333;
		text-align: center;
		width: 100%;
		min-height: initial;
		display: block;
		padding: 10px 0;
	}

	/* サービス特徴（モバイル時：2カラム） */
	.service-features {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		padding: 30px 10px;
	}

	/* カード全体を覆うリンク要素 */
	.column-item-link {
		width: 100%;
	}

	.column-item h3 img {
		width: 100px;
		margin: 0 auto 5px;
	}
	.column-item h3 {
		font-size: 1em;
	}
	.column-item p {
		font-size: 0.8em;
	}

	/* 特集セクションの縦書きを横書きに */
	.column-left-alt {
		flex: none;
		height: auto;
		justify-content: center;
		align-items: center;
	}
	.vertical-heading {
		writing-mode: initial;
		font-size: 6em;
		text-align: center;
		width: 100%;
	}
	.column-right-alt {
		flex-direction: column;
		gap: 15px;
	}
}