@charset 'utf-8';
@use '../global' as *;


/* page-header
---------------------------------------------*/
.page-header {}

.page-header__content {
	display: flex;
	flex-direction: column;
}

.page-header__title.page-header__title--horizon {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	column-gap: .5rem;
}


// 中央配置
.page-header__content--center {
	&.page-header__content {
		text-align: center;
	}
}

// coverタイプ
.page-header--cover {
	--headings-color: #fff;
	--ap-color-text: #fff;
	--ap-color-text-subtle: #{rgba(#fff, .8)};
	&.page-header {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: var(--height);
		margin: 0;
		overflow: hidden;
		background-image: var(--bg-image-url);
		background-repeat: no-repeat;
		background-size: cover;
		&::after {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 100%;
			height: 100%;
			background-color: var(--overlay-color, rgba(#000, .5));
			content: "";
		}
	}

	// coverタイプ(コンテンツ)
	.page-header__content {
		position: relative;
		z-index: 1;
		width: min(100%, var(--container-width));
		padding: 10vmin 1rem;
		color: var(--ap-color-text);
	}
}