/**
 * Frontend Styles
 * フロントエンド用のスタイル
 */

// アニメーション
.zenblocks-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;

	&.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

.zenblocks-slide-in {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;

	&.is-visible {
		opacity: 1;
		transform: translateX(0);
	}
}

.zenblocks-parallax {
	will-change: transform;
}

// インタラクション
.zenblocks-toggle-button {
	cursor: pointer;
	transition: all 0.3s ease;

	&.is-active {
		background-color: #0073aa;
		color: white;
	}
}

.zenblocks-tabs {

	.zenblocks-tab {
		cursor: pointer;
		padding: 10px 20px;
		border: 1px solid #ddd;
		background: #f5f5f5;
		transition: all 0.3s ease;

		&:hover {
			background: #e5e5e5;
		}

		&.is-active {
			background: white;
			border-bottom-color: transparent;
			font-weight: 600;
		}
	}

	.zenblocks-tab-panel {
		display: none;
		padding: 20px;
		border: 1px solid #ddd;
		border-top: none;

		&.is-active {
			display: block;
		}
	}
}

.zenblocks-accordion {
	border: 1px solid #ddd;
	margin-bottom: 10px;

	.zenblocks-accordion-header {
		cursor: pointer;
		padding: 15px;
		background: #f5f5f5;
		font-weight: 600;
		transition: background 0.3s ease;
		position: relative;

		&:hover {
			background: #e5e5e5;
		}

		&::after {
			content: "+";
			position: absolute;
			right: 15px;
			transition: transform 0.3s ease;
		}
	}

	.zenblocks-accordion-content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
		padding: 0 15px;
	}

	&.is-open {

		.zenblocks-accordion-header::after {
			content: "−";
		}

		.zenblocks-accordion-content {
			padding: 15px;
		}
	}
}

// 遅延読み込み
img[data-src],
iframe[data-src],
[data-bg-src] {

	&:not(.is-loaded) {
		background-color: #f0f0f0;
	}

	&.is-loaded {
		animation: fadeIn 0.3s ease-in;
	}
}

@keyframes fadeIn {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

// ユーティリティクラス
.zenblocks-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.zenblocks-section {
	padding: 60px 0;
}

.zenblocks-text-center {
	text-align: center;
}

.zenblocks-mb-small {
	margin-bottom: 10px;
}

.zenblocks-mb-medium {
	margin-bottom: 20px;
}

.zenblocks-mb-large {
	margin-bottom: 40px;
}