/* Hero Slide */

/* -------------------------------------------------------------
 * 基本（776px以下＝トップページのヒーローと投稿一覧の間に配置）
 * ----------------------------------------------------------- */
.hsld {
	box-sizing: border-box;
	/* 画面幅の 50%（設定値）を維持して左右中央に置く */
	width: var(--hsld-sp-w, 50vw);
	max-width: calc(100% - 16px);
	margin-block: 32px;
	margin-inline: auto;
	padding: 0;
}
.hsld--auto:not(.is-placed) { visibility: hidden; }
.hsld *, .hsld *::before, .hsld *::after { box-sizing: border-box; }

/* タイトル・画像・テキストをまとめる枠 */
.hsld__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: var(--hsld-bg, rgba(255, 255, 255, .64));
	border: 0;
	box-shadow: none;
}

/* タイトル：明朝体（h タグは使わずテーマの見出しデザインを受けない） */
.hsld__title {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "MS PMincho", serif;
	font-weight: 600;
	font-size: clamp(.95rem, 3.2vw, 1.3rem);
	letter-spacing: .06em;
	line-height: 1.5;
	text-align: center;
	color: inherit;
	background: none;
	border: 0;
}

/* 画像エリア：スライドを重ねて配置 */
.hsld__stage {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	/* 高さは画像に合わせる（余分な隙間を作らない）。
	   画像側に高さの上限があるため、はみ出すことはない。 */
	grid-template-rows: minmax(0, auto);
	width: 100%;
	height: auto;
	min-height: 0;
}
.hsld__slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;    /* 上下中央 */
	justify-content: center; /* 左右中央 */
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
}
.hsld__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease, visibility 0s;
}

/* 画像：縦横比は常に元のまま、枠内に収める */
.hsld__img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: var(--hsld-sp-h, 40vh) !important; /* 画面高さに対する上限 */
	object-fit: contain;
	margin: 0 auto;
	border: 0;
	box-shadow: none;
}

/* 画像の下のテキスト：すべて重ねて一番高いものに高さを固定 */
.hsld__caps {
	flex: 0 0 auto;
	display: grid;
	width: 100%;
}
.hsld__caption {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "MS PMincho", serif;
	font-size: clamp(.7rem, 2.4vw, .95rem);
	letter-spacing: .04em;
	line-height: 1.6;
	text-align: center;
	color: inherit;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
}
.hsld__caption.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease, visibility 0s;
}

/* -------------------------------------------------------------
 * 777px以上：指定要素（初期値 .swiper-slide.item-1）の中に配置
 * ----------------------------------------------------------- */
@media (min-width: 777px) {
	.hsld {
		position: absolute; /* スクロール追従なし */
		top: var(--hsld-pc-top, 15vh);
		right: var(--hsld-pc-right, 2vw);
		left: auto;
		z-index: var(--hsld-z, 5);
		width: var(--hsld-pc-w, 33vw);
		max-width: calc(100% - 32px);
		margin: 0;
		padding: 0;
	}
	.hsld--fixed { position: fixed; } /* 設定で追従をオンにした場合 */
	.hsld--auto:not(.is-placed) { visibility: visible; }

	/* -----------------------------------------------------------
	 * 収め先の要素の中に入った場合
	 * 要素全体を覆うレイヤーにして、その中で枠を上下中央・右寄せに置く
	 * --------------------------------------------------------- */
	.hsld--boxed {
		position: absolute;
		inset: 0;
		top: 0;
		right: 0;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		display: flex;
		align-items: center;       /* 枠を上下中央に */
		justify-content: flex-end; /* 右寄せ */
		padding: 0 var(--hsld-pc-right-pct, 2%) 0 0;
		transform: none;
		overflow: visible;
		pointer-events: none;      /* 下のスライド操作を邪魔しない */
	}
	/* 縦位置を「上からの位置を指定」にした場合 */
	.hsld--boxed:not(.hsld--vcenter) {
		align-items: flex-start;
		padding-top: var(--hsld-pc-top-pct, 15%);
	}

	/* 枠：収める要素に対して 幅=1/3 / 高さ=70% */
	.hsld--boxed .hsld__inner {
		width: var(--hsld-pc-w-pct, 33%);
		height: var(--hsld-pc-h-pct, 70%);
		max-width: 100%;
		max-height: 100%;
		min-height: 0;
		padding: 16px;
		gap: 12px;
		overflow: hidden;
	}

	/* 画像エリア：タイトル・テキストの残り全部を使い、その中央に画像を置く
	   flex-basis を 0 にして、高さを枠側から確定させる（画像がはみ出さない） */
	.hsld--boxed .hsld__stage {
		flex: 1 1 0%;
		grid-template-rows: minmax(0, 1fr);
		min-height: 0;
		max-height: none;
		height: auto;
		overflow: hidden;
	}
	/* 枠の高さが決まっているので、画像は画像エリアいっぱいを上限にする */
	.hsld--boxed .hsld__img { max-height: 100% !important; }

	.hsld__title { font-size: clamp(1.05rem, 1.5vw, 1.7rem); letter-spacing: .08em; }
	.hsld__caption { font-size: clamp(.75rem, .95vw, 1rem); }
}

@media (prefers-reduced-motion: reduce) {
	.hsld__slide, .hsld__caption { transition: none; }
}