/***** グループブロック＋カバーブロック＋固定コンテンツでのスライダー表示 *****/
/*** スライダー全体の高さやレイアウト調整（フロントエンド用） ***/
/*** ==========================================
  1. フロントエンド用：基本レイアウト
========================================== ***/
.hero-wrapper {
	position: relative;
	width: 100%;
	height: 600px; /* スライダー全体の高さ */
}

/* 背景スライダーを最背面に配置する */
.hero-wrapper .js-swiper-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	z-index: 1;
}

/* カバーブロックの最小高さを親に合わせる */
.hero-wrapper .swiper-slide .wp-block-cover {
	height: 100% !important;
	min-height: 600px !important;
	width: 100%;
	object-fit: cover;
	object-position: center center;
}

/* 固定したいコンテンツ（縦方向の中央配置 ＆ 横幅100%） */
.hero-wrapper .wp-block-group.fixed-content {
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	transform: translate(0%, -50%) !important;
	width: 100% !important;
	z-index: 10 !important;
	pointer-events: none !important; /* マウス操作が後ろのスライドに抜けるようにする */
}

/* 固定コンテンツ内のリンクやボタンはクリックできるように戻す */
.hero-wrapper .wp-block-group.fixed-content a,
.hero-wrapper .wp-block-group.fixed-content button {
	pointer-events: auto !important;
}


/*** ==========================================
  2. エディター画面用：デフォルト（スタイル未選択時）
  ※ 独立した縦並びにして編集しやすくする
========================================== ***/
.editor-styles-wrapper .hero-wrapper {
	height: auto !important;
}

.editor-styles-wrapper .hero-wrapper .wp-block-group.fixed-content,
.editor-styles-wrapper .hero-wrapper .js-swiper-slider {
	position: static !important;
	transform: none !important;
	pointer-events: auto !important;
	height: auto !important;
}

.editor-styles-wrapper .hero-wrapper .swiper-slide .wp-block-cover {
	min-height: 300px !important;
}


/*** ==========================================
  3. モバイル表示時の高さ調整
========================================== ***/
body.is-mobile .hero-wrapper,
body.is-mobile .hero-wrapper .js-swiper-slider,
body.is-mobile .hero-wrapper .my-cover-slider-main,
body.is-mobile .hero-wrapper .wp-block-cover {
	height: 300px !important;
	min-height: 300px !important;
}


/*** ==========================================
  4. グループスタイル「スライド縮小」選択時のエディター内挙動
  ※ 選択時のみ、エディター内でもプレビュー用として重ね合わせを再現
========================================== ***/
.editor-styles-wrapper .hero-wrapper.is-style-slide-collapse {
	position: relative !important;
	height: 500px !important;
	overflow: hidden !important;
}

.editor-styles-wrapper .hero-wrapper.is-style-slide-collapse .js-swiper-slider {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
}

.editor-styles-wrapper .hero-wrapper.is-style-slide-collapse .wp-block-group.fixed-content {
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	transform: translate(0%, -50%) !important;
	width: 100% !important;
	z-index: 10 !important;
	pointer-events: none !important;
}

.editor-styles-wrapper .hero-wrapper.is-style-slide-collapse .swiper-slide .wp-block-cover {
	min-height: 500px !important;
}

/* 2枚目以降のスライドを非表示にして1枚にまとめる */
.hero-wrapper.is-style-slide-collapse .js-swiper-slider > *:not(:first-child) {
	display: none !important;
}