/*////////////////////////////////////////////////////////////////////////////*/

/*! [components/title] title.css */

/*////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	変数

------------------------------------------------------------------------------*/

.page-header {
	--page-title-color: rgb(var(--color-text-h-rgb) / var(--color-text-h-a, 1));
}


/*------------------------------------------------------------------------------

	ページタイトルコンテナ

------------------------------------------------------------------------------*/


/*	親コンテナ
------------------------------------------------------------------------------*/

/* 通常はrelative、タイトル内容に沿った高さ */
.page-header {
	overflow: hidden;
	/**/
	position: relative;
	z-index: auto;
	left: auto;
	top: auto;
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	margin-top: calc(var(--announce-height, 0px) + var(--gnav-start-height, var(--gnav-height, 4em)));
	/**/
	text-align: center;
	line-height: 1.25;
	font-weight: bold;
	font-feature-settings: 'palt';
}

/* ナビバーを覆わせる */
.page-header.cover-header {
	margin-top: 0;
	padding-top: var(--gnav-height, 4em);
}

/* ヒローにしないタイトル */
.page-header.cover-header > .page-title-main {
	margin-top: var(--gnav-height, 4em);
}


/*	画面カバー
------------------------------------------------------------------------------*/

:root {
	--init-h: 100vh;
}

@supports (height: 100svh) {
	:root {
		--init-h: 100svh;
	}
}

.page-header.cover-screen {/* ちらつき防止 */
	height: var(--init-h);
}

.page-header.cover-screen:not(.cover-header) {
	height: calc(var(--init-h) - var(--gnav-height, 4em));
}

.customize-support .page-header.cover-screen {
	height: calc(var(--init-h) - var(--wp-adminbar-height, 0px));
}

.customize-support .page-header.cover-screen:not(.cover-header) {
	height: calc(var(--init-h) - var(--wp-adminbar-height, 0px) - var(--gnav-height, 4em));
}


/*	デザイン装飾
------------------------------------------------------------------------------*/

/* 白モード */
.page-header.white {
	--page-title-color: #FFF;
}

/* シャドウ */
.page-header.shadow {
	--page-title-filter: drop-shadow(0 0 3px rgb(0 0 0 / .5));
}


/*------------------------------------------------------------------------------

	ページタイトルテキストコンテナ

------------------------------------------------------------------------------*/


/*	親コンテナ
------------------------------------------------------------------------------*/

.page-header-text {
	--text-gap: var(--space_6_4, 6em);/* テキスト要素のギャップ */
	--title-min-height: 2em;/* タイトルの最小高さ */
	/**/
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	/**/
	position: relative;
	z-index: 2;
	padding-top: var(--space_6_4, 4em);
	padding-bottom: var(--space_6_4, 4em);
	padding-left: var(--space_6_2, 2em);
	padding-right: var(--space_6_2, 2em);
	text-align: center;
	text-wrap: balance;
	/**/
	transition: opacity 1s ease-out;
	opacity: 0;
}

.shadow .page-header-text {
	filter: var(--page-title-filter, none);
}

.page-header-text.show {
	opacity: 1;
}


/*	フィルター状態
------------------------------------------------------------------------------*/

.page-header.is-filtered .page-header-text {
	padding: 2em;
}

.page-header.is-filtered .page-title-en {
	display: none;
}

.page-header.is-filtered .page-title-main {
	margin: 0 auto;
	font-size: var(--font-size-h2);
}


/*	マージン削除
------------------------------------------------------------------------------*/

.page-header-text > *:first-child {
	margin-top: 0;
}

.page-header-text > *:last-child {
	margin-bottom: 0;
}


/*------------------------------------------------------------------------------

	ページタイトル文字

------------------------------------------------------------------------------*/


/*	共通
------------------------------------------------------------------------------*/

.page-title,
.page-title-lead {
	color: var(--page-title-color);
	fill: var(--page-title-color);
	/**/
	transition: filter .3s ease-out,
	            color .3s ease-out,
	            fill .3s ease-out;
}


/*	タイトルコンテナ
------------------------------------------------------------------------------*/

.page-title {
	position: relative;
	margin: auto;
	padding: 0;
	width: 100%;
}


/*	メインタイトル
------------------------------------------------------------------------------*/

.page-title-main,
.page-title-sub {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	color: inherit;
	fill: inherit;
	font-feature-settings: 'palt';
}


/*	メインタイトル
------------------------------------------------------------------------------*/

.page-title-main {
	position: relative;
	margin: 0 auto;
	font-size: var(--font-size-h1);
}

.page-title-main > .logo {
	margin-left: auto;
	margin-right: auto;
}


/*	サブタイトル（キャッチフレーズ。タイトルの下）
------------------------------------------------------------------------------*/

.page-title-sub {
	position: relative;
	margin: 0 auto;
	padding-top: 1em;/* JSのclientHeightで高さを取得するために、marginではなく、paddingでアキを指定しています */
	font-size: var(--font-size-h3);
}


/*------------------------------------------------------------------------------

	ページタイトル文字

------------------------------------------------------------------------------*/

.page-title-lead {
	padding-top: var(--text-gap);
	line-height: 1.5;
}

.page-title-lead > * {
	margin: 0;
}


/*------------------------------------------------------------------------------

	ページヘッダーナビゲーション

------------------------------------------------------------------------------*/

.has-header-nav {
	display: flex;
	flex-direction: column;
}

.page-title-nav {
	order: -1;
	/**/
	display: flex;
	/**/
	position: relative;
	z-index: 2;
	padding: 1em;
}

.page-title-nav .btn-group {
	--btn-border-width: 2px;
	/**/
	margin: 0;
}

/**/

.has-header-nav .reset-search-button svg {
	transform: scale(1.25);
}

/**/

.with-image > .page-title-nav {
	grid-row: 1;
	grid-column: 1 / -1;
}