/*
 * 【重要】このファイルのスライダー関連および一部セクション装飾CSSは、
 * キャッシュプラグインによる外部ファイル保持・遅延ロードの干渉を避けるため、
 * child-theme の functions.php 内の lab23c_slider_inline_css() 関数から
 * 直接HTMLにインライン出力されています。
 * このファイルを編集しても反映されませんので、修正は functions.php 側を行ってください。
 */
/*
 * トップの2枚の画像だけを対象にする。ブロックエディタで本文を更新しても他の画像には影響しない。
 *
 * JSでの表示切り替えは、一部のモバイル端末で実行タイミングやエラーの影響を受けて
 * スライダー化が失敗するケースがあったため廃止。CSSアニメーションのみで
 * クロスフェード表示させることで、JSが動かない環境でも必ず画像が交互に表示される。
 */
.home .wp-block-gallery.lab23c-front-page-slider,
.home .wp-block-gallery {
	display: grid !important;
	margin: 0 0 2.5rem !important;
	max-width: none !important;
	overflow: hidden !important;
	position: relative !important;
	width: 100% !important;
	padding: 0 !important;
	gap: 0 !important;
}

.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image,
.home .wp-block-gallery > .wp-block-image {
	grid-area: 1 / 1 !important;
	margin: 0 !important;
	opacity: 0;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
}

/* JS/アニメーション非対応でも1枚目だけは必ず見える状態にしておく（安全側のフォールバック） */
.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image:first-child,
.home .wp-block-gallery > .wp-block-image:first-child {
	opacity: 1;
}

.home .wp-block-gallery.lab23c-front-page-slider img,
.home .wp-block-gallery img {
	display: block !important;
	height: auto !important;
	max-height: 620px !important;
	object-fit: cover !important;
	width: 100% !important;
}

.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image,
.home .wp-block-gallery > .wp-block-image {
	animation: lab23c-crossfade 10s infinite !important;
}

.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image:nth-child(1),
.home .wp-block-gallery > .wp-block-image:nth-child(1) {
	animation-delay: 0s !important;
}

.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image:nth-child(2),
.home .wp-block-gallery > .wp-block-image:nth-child(2) {
	animation-delay: -5s !important;
}

@keyframes lab23c-crossfade {
	0%,
	42% {
		opacity: 1;
	}

	50%,
	92% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image,
	.home .wp-block-gallery > .wp-block-image {
		animation: none !important;
	}
}

/* 「参加するには？」直後の案内画像。モバイルでは読みやすさを優先して元の幅を保つ。 */
@media (min-width: 768px) {
	.home .p-entry-content .lab23c-participation-image {
		clear: both;
		margin-left: auto;
		margin-right: auto;
		max-width: 50%;
	}
}

/* 参照サイトの、軽く落ち着いた文字組みに合わせる。 */
body.wp-theme-lab23 {
	background: #f7f8f7;
	color: #303432;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	font-weight: 400;
}

.p-entry-content {
	font-size: 1rem;
	line-height: 1.9;
}

.p-entry-ttl,
.p-entry-content h2,
.p-entry-content h3,
.p-entry-content h4 {
	color: #303432;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.55;
}

.p-entry-ttl {
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: 600;
}

.p-entry-content h2 {
	border-left: 3px solid #5d8d72;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	padding-left: .65rem;
}

/* 線ではなく余白と淡い背景で、内容のまとまりを見せる。 */
.home .p-entry-content > hr.wp-block-separator {
	display: none;
}

.home .p-entry-content .lab23c-content-section {
	margin: 3.5rem -2rem;
	padding: 3rem 2rem;
}

.home .p-entry-content .lab23c-content-section--soft {
	background: #f0f5f0;
}

.home .p-entry-content .lab23c-content-section--white {
	background: #fff;
}

.home .p-entry-content .lab23c-content-section > :first-child {
	margin-top: 0;
}

.home .p-entry-content .lab23c-content-section > :last-child {
	margin-bottom: 0;
}

.lab23c-director-photo {
	float: left !important; /* 左上に配置 */
	margin: 0 2rem 1.25rem 0 !important; /* テキストとの間に右余白を追加 */
	max-width: 160px !important; /* モバイルと同じサイズに固定 */
	width: 160px !important;
}

.lab23c-director-photo img {
	border-radius: 50%;
	display: block;
	height: auto;
	width: 100%;
}

.p-entry-content h3 {
	font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important;
	font-weight: 500;
}

.p-entry-content pre.wp-block-preformatted {
	background: #f1f5f1;
	border-left: 3px solid #8eb69d;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.9;
	white-space: pre-wrap;
}

@media (max-width: 767px) {
	.home .p-entry-content .lab23c-content-section {
		margin: 2.5rem -1rem;
		padding: 2rem 1rem;
	}

	.lab23c-director-photo {
		float: none;
		margin: 0 auto 1.5rem;
		width: 160px;
	}
}

/* フッターは参照サイトと同じく、淡いグレーのメニュー帯と白い著作権帯で構成する。 */
.l-footer {
	background: #f2f2f2;
	color: #676a6a;
	margin-top: 4rem;
}

.p-footer-nav-wrap {
	margin: 0 auto;
	max-width: 1180px;
	padding: 4.5rem 4%;
}

.p-footer-nav {
	background: transparent;
}

.p-footer-nav::before {
	color: #303432;
	content: "メニュー";
	display: block;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .12em;
	margin-bottom: 1.25rem;
	text-align: center;
}

.p-footer-nav-list {
	gap: .75rem 2rem;
}

.p-footer-nav-list .menu-item {
	font-size: .9rem;
}

.p-footer-nav-list .menu-item a {
	color: #676a6a;
	display: inline-block;
	padding: .25rem 0;
}

.footer__bottom,
.copyright {
	background: #fff;
	border-top: 1px solid #e1e1e1;
}

.copyright {
	color: #676a6a;
	padding: 2rem 1rem;
}

.copyright__text {
	font-size: .75rem;
	letter-spacing: .04em;
}

/* 最終セクションのブロックスペーサーと、テーマが付ける空のフッター罫線を除く。 */
.home .p-entry-content .wp-block-spacer,
.home .p-entry-footer {
	display: none;
}

@media (max-width: 767px) {
	.p-footer-nav-wrap {
		padding: 3rem 1rem;
	}

	.l-footer {
		margin-top: 2.5rem;
	}
}

/* ==========================================================================
   トップページの固定ページタイトル装飾（下線削除とリッチなデザイン）
   ========================================================================== */

/* 1. タイトル下の画面幅いっぱいの境界線（棒線）を削除し、余白を調整 */
.home .p-entry-header {
	border-bottom: none;
	padding-bottom: 1rem;
	text-align: center; /* タイトルエリア全体を中央揃えに */
}

/* 2. タイトルテキストをリッチに装飾 */
.home .p-entry-ttl {
	font-family: "Noto Serif JP", "BIZ UDMincho", serif; /* 上品な明朝体 */
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: #2b3a32; /* 落ち着いたダークグリーン系の黒 */
	position: relative;
	display: inline-block;
	padding-bottom: 1.5rem;
	margin-top: 1rem;
}

/* 3. タイトルの下部中央に短いアクセントラインを配置 */
.home .p-entry-ttl::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 2px;
	background: #5d8d72; /* テーマカラーのグリーン */
	border-radius: 2px;
}

/* ==========================================================================
   スライダー画像上のキャプションテキスト装飾（視認性と控えめな表現の両立）
   ========================================================================== */

/* スライド画像をテキストの配置基準にする */
.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image,
.home .wp-block-gallery > .wp-block-image {
	position: relative !important;
	z-index: 1; /* 重ね合わせコンテキストを作成 */
}

/* スライド内の画像を下のレイヤーにする */
.home .wp-block-gallery.lab23c-front-page-slider > .wp-block-image img,
.home .wp-block-gallery > .wp-block-image img {
	position: relative;
	z-index: 1;
}

/* キャプションテキストのコンテナ */
.lab23c-slider-caption {
	position: absolute;
	bottom: 8%; /* 下寄りに配置 */
	left: 6%; /* 左寄りに配置 */
	top: auto; /* 上位置リセット */
	transform: none; /* transformによるずれをリセット */
	z-index: 10; /* 画像より確実に手前に表示 */
	width: 88%;
	max-width: 580px;
	background: rgba(255, 255, 255, 0.5); /* 50%透過の白背景 */
	backdrop-filter: blur(6px); /* 背景をぼかして視認性を確保 */
	-webkit-backdrop-filter: blur(6px);
	padding: 1.5rem 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 少しシャドウを加えて輪郭を出す */
	border: 1px solid rgba(255, 255, 255, 0.3); /* 透過背景に合わせた明るい枠線 */
	text-align: left; /* 左揃え */
	pointer-events: none; /* 下の画像やスライダーボタンの操作を邪魔しない */
	box-sizing: border-box;
	animation: lab23c-fadeInLeftBottom 0.8s ease forwards;
}

/* キャプションテキストのスタイル */
.lab23c-slider-caption__text {
	margin: 0;
	font-family: "Noto Serif JP", "BIZ UDMincho", serif; /* 上品な明朝体 */
	font-size: clamp(0.95rem, 2vw, 1.2rem);
	line-height: 1.9;
	color: #1a241f; /* 文字色を少し濃くして読みやすさを向上 */
	font-weight: 500;
	letter-spacing: 0.05em;
	/* 薄い背景でも視認性を確保するための白いテキストシャドウ */
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.95);
}

/* 左下（下）からのフェードインアニメーション */
@keyframes lab23c-fadeInLeftBottom {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* モバイルデバイス向けの余白・背景調整（iOS Safariの表示不具合対策） */
@media (max-width: 767px) {
	.lab23c-slider-caption {
		padding: 1rem 1.25rem;
		left: 4%;
		bottom: 6%;
		width: 92%;
		background: rgba(255, 255, 255, 0.9) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

@media (max-width: 767px) {
	.home .p-entry-ttl {
		font-size: clamp(1.15rem, 5.5vw, 1.45rem);
		letter-spacing: 0.03em;
	}
}