/**
 * #page_header タブレット・モバイル
 * 親テーマ responsive.css（max-width: 1100px / 800px）を上書きする。
 * 1100px 以下も style.css の 1100px 超と同じ flex + padding-top: 60px 配置に揃える。
 * responsive.css より後に読み込むこと。
 */

@media screen and (max-width: 1100px) {
	body.hide_sidebar #page_header .design_header,
	#page_header .design_header {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 380px !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative !important;
		box-sizing: border-box !important;
	}

	#page_header .design_header .title_area.no_desc {
		position: relative !important;
		z-index: 1;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0.35em !important;
		flex: 1 1 auto !important;
		flex-shrink: 0 !important;
		width: 100% !important;
		margin: 0 auto !important;
		padding: 60px 0 0 !important;
		min-height: 0 !important;
		text-align: center !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	#page_header .design_header .title_area.no_desc .large_headline {
		flex: 0 0 auto !important;
		overflow: visible !important;
		text-align: center !important;
		width: 100% !important;
	}

	#page_header .design_header .title_area.no_desc h1.large_headline,
	#page_header .design_header .title_area.no_desc h1 {
		text-align: center !important;
		width: 100% !important;
		margin: 0 auto 5px !important;
	}

	#page_header .design_header .title_area.no_desc .jp-title {
		flex: 0 0 auto !important;
		text-align: center !important;
	}
}

/* モバイル: ハンバーガーメニュー */
@media screen and (max-width: 1100px) {
	#drawer_menu_button span {
		background-color: #1e73be !important;
	}

	/* 子階層: 親テーマ main_color 上書きを打ち消し、1階層目と同じ見た目に */
	#drawer_menu #mobile_menu li li a {
		background-color: transparent !important;
		padding-left: calc(20px + 1em);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	#drawer_menu #mobile_menu li li:last-of-type a {
		border-bottom: none;
	}

	#drawer_menu #mobile_menu li li.open > a {
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}
}

@media screen and (max-width: 800px) {
	body.hide_sidebar #page_header .design_header,
	#page_header .design_header {
		height: 270px !important;
	}
	body:not(.show_sidebar) #page_header.large_height {
		height: 270px !important;
		display: block !important;
		overflow: visible !important;
	}

	#page_header .design_header .title_area.no_desc {
		padding: 60px 20px 0 !important;
	}

	#page_header .design_header .title_area.no_desc h1.large_headline,
	#page_header .design_header .title_area.no_desc h1 {
		font-size: 24px !important;
		font-weight: 700;
		line-height: 1 !important;
		margin: 0 !important;
	}

	#page_header .design_header .title_area.no_desc .large_headline span {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		transform: none !important;
		opacity: 1 !important;
	}
}