/* ==================================================================
 * ヘッダー
 *
 * トップはヒーロー画像に重なる透過ヘッダー（従来どおり）。
 * スクロールすると濃紺のガラス面に切り替わって追従する。
 * 下層ページはヒーローが無いので、最初からガラス面で表示する。
 *
 * 配色は暗い背景に対してコントラスト比 7:1 以上（WCAG AAA）を確保している。
 *   文字 #c8d6e0 / 背景 #0e2231 → 10.8:1
 *   強調 #5ecfdf / 背景 #0e2231 →  8.9:1
 *   CTA  #08313a / 背景 #5ecfdf →  7.6:1
 * ============================================================== */

:root {
	--aiy-hd-bg: rgba(14, 34, 49, 0.94);
	--aiy-hd-line: rgba(255, 255, 255, 0.14);
	--aiy-hd-text: #c8d6e0;
	--aiy-hd-strong: #ffffff;
	--aiy-hd-accent: #5ecfdf;
	--aiy-hd-hover: rgba(255, 255, 255, 0.13);
	--aiy-hd-current: rgba(94, 207, 223, 0.12);
	--aiy-hd-current-text: #8fe3ef;
}

/* ---------- 位置 ---------- */

/* 下層ページ：最初から追従。position:sticky なので本文がずれない */
body:not(.ast-theme-transparent-header) #masthead {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* トップ：ヒーローに重なったまま。スクロールしたら固定に切り替える */
.ast-theme-transparent-header.aiy-stuck #masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	animation: aiy-hd-drop 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes aiy-hd-drop {
	from {
		transform: translateY(-100%);
	}
}

/* ---------- ガラス面 ---------- */

body:not(.ast-theme-transparent-header) #masthead,
.aiy-stuck #masthead {
	background: var(--aiy-hd-bg);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: inset 0 -1px 0 var(--aiy-hd-line);
}

#masthead .ast-primary-header-bar,
#masthead .main-header-bar {
	background: transparent !important;
	transition: min-height 0.25s ease, padding 0.25s ease;
}

/*
 * 追従中は高さを詰める（104px → 58px）。
 *
 * テーマは高さを何段にも分けて決めている（バーの上下パディング 1em、
 * 行ラッパーの min-height 70px、各セクションの stretch）。どれか一つでも
 * 残ると縮まないため、関わる要素すべてに明示する。
 * バーのパディングが 1em なのは本文の文字サイズ（17px）に連動するので、
 * 本文サイズを変えるとヘッダーの高さも動く点に注意。
 */
.aiy-stuck #masthead .ast-primary-header-bar {
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/*
 * 高さを持たせるのは、中身を上下中央に置ける要素だけにする。
 * .ast-main-header-bar-alignment と .main-header-bar-navigation は
 * display:block なので、ここに高さを与えるとメニューが箱の上端に貼りつき、
 * ロゴ・検索・CTAだけが中央に残って段違いになる。
 */
.aiy-stuck #masthead .site-primary-header-wrap,
.aiy-stuck #masthead .ast-builder-grid-row,
.aiy-stuck #masthead .site-header-primary-section-left,
.aiy-stuck #masthead .site-header-primary-section-right {
	min-height: 58px !important;
	height: auto !important;
	align-items: center !important;
}

/* 内側は中身なりの高さにして、親の中央揃えに任せる */
.aiy-stuck #masthead .ast-builder-menu-1,
.aiy-stuck #masthead .ast-main-header-bar-alignment,
.aiy-stuck #masthead .main-header-bar-navigation,
.aiy-stuck #masthead .main-header-menu {
	min-height: 0 !important;
	height: auto !important;
}

.aiy-stuck #masthead .site-primary-header-wrap {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

#masthead .custom-logo {
	transition: max-width 0.25s ease;
}

/* 詰まったバーに合わせてロゴも小さくする */
.aiy-stuck #masthead .custom-logo {
	max-width: 148px;
}

/* 追従中はボタン類も一段小さく */
.aiy-stuck #ast-desktop-header .ast-custom-button {
	padding: 9px 18px;
	font-size: 13.5px;
}

.aiy-stuck #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	padding: 7px 13px !important;
}

/*
 * 高さが縮まらない本当の原因はここ。テーマがメニューの li に
 * line-height:70px を当てており、行の高さがこれで決まっていた。
 *   .ast-desktop:not(:has(.ast-header-sticked)) ... .menu-item { line-height:70px }
 * Astra Pro のスティッキーヘッダー（.ast-header-sticked）がある前提の指定なので、
 * 自前で追従させているこのサイトでは効いたままになる。
 */
.aiy-stuck #ast-desktop-header .main-header-menu > .menu-item {
	min-height: 0 !important;
	line-height: 1.4 !important;
}

/* 暗い面では白版ロゴを使う（トップの初期表示は追加CSS側で切替済み） */
body:not(.ast-theme-transparent-header) #masthead .custom-logo,
.aiy-stuck #masthead .custom-logo {
	content: url("https://ai-yoyaku.jp/blog/wp-content/uploads/2026/08/logo-aiy-v2-light.png");
}

/* ---------- メニューをボタンにする ---------- */

/*
 * メニュー項目の縦位置。
 *
 * テーマは li に line-height:70px を当てて行の高さを作っている。その大きな
 * 行ボックスの中でリンク（インラインブロック）がベースライン基準に置かれるため、
 * ロゴ・検索・CTAが中央にあるのにメニューだけ上へ寄っていた（実測13px）。
 * li を flex にして中央に置き、行の高さは min-height で保つ。
 */
#ast-desktop-header .main-header-menu > .menu-item {
	display: flex;
	align-items: center;
	min-height: 70px;
	line-height: 1.4;
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	position: relative;
	overflow: hidden;
	height: auto;
	margin: 0 1px;
	padding: 9px 15px !important;
	border-radius: 999px;
	/* 400 だと画像の上で細く沈むため、太らせて少し大きくする */
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--aiy-hd-text) !important;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.14s ease;
}

/* 下から伸びるアンダーライン */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 5px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--aiy-hd-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover {
	background: var(--aiy-hd-hover);
	color: var(--aiy-hd-strong) !important;
	transform: translateY(-2px);
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link:active {
	transform: translateY(1px) scale(0.97);
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover::after,
#ast-desktop-header .main-header-menu > .current-menu-item > .menu-link::after,
#ast-desktop-header .main-header-menu > .current_page_item > .menu-link::after {
	transform: scaleX(1);
}

/* 現在地 */
#ast-desktop-header .main-header-menu > .current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu > .current_page_item > .menu-link {
	font-weight: 700;
	background: var(--aiy-hd-current);
	/* 淡く塗ったピルの上でも 7:1 を確保するため、下線より明るい色を使う */
	color: var(--aiy-hd-current-text) !important;
}

/* キーボード操作のときだけリングを出す */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:focus-visible {
	outline: 2px solid var(--aiy-hd-accent);
	outline-offset: 2px;
}

/* トップの初期表示はヒーロー画像の上に乗る。写真の明るい部分に重なっても
   読めるよう、透過状態のときだけ影を敷く */
.ast-theme-transparent-header:not(.aiy-stuck) #masthead .main-header-menu > .menu-item > .menu-link,
.ast-theme-transparent-header:not(.aiy-stuck) #masthead .astra-search-icon {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---------- 波紋 ---------- */

.aiy-ripple {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.28;
	transform: scale(0);
	animation: aiy-ripple 0.55s ease-out forwards;
	pointer-events: none;
}

@keyframes aiy-ripple {
	to {
		transform: scale(2.6);
		opacity: 0;
	}
}

/* ---------- 検索 ---------- */

#ast-desktop-header .ast-search-menu-icon .slide-search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	color: var(--aiy-hd-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}

#ast-desktop-header .ast-search-menu-icon .slide-search:hover,
#ast-desktop-header .ast-search-menu-icon .slide-search:focus-visible {
	background: var(--aiy-hd-hover);
	color: var(--aiy-hd-strong);
}

/* テーマは form 側に白い枠を敷いている。暗い面では箱だけが白く浮くので消す */
#masthead .ast-search-menu-icon .search-form,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-form {
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px;
}

/* 検索の送信ボタン（虫めがね）も暗い面に合わせる */
#masthead .ast-search-menu-icon .search-submit,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-submit {
	background: transparent !important;
	color: var(--aiy-hd-text) !important;
}

/* 開いた検索欄はメニューの上にスライドしてくるので、下の項目が透けないよう
   不透明な面を敷く */
#ast-desktop-header .ast-search-menu-icon.ast-dropdown-active .search-form {
	background: rgba(14, 34, 49, 0.98) !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
	border-radius: 999px;
}

#ast-desktop-header .ast-dropdown-active .search-field {
	background: transparent !important;
	border-color: transparent !important;
}

/* オフキャンバスの検索欄はヘッダーの外にあるので、両方を指定する。
   テーマ既定の #757575 は暗い面に対して 3.2:1 しかなく読めない */
#masthead .ast-search-menu-icon .search-field,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-field {
	color: var(--aiy-hd-strong) !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 15px;
}

#masthead .ast-search-menu-icon .search-field::placeholder,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-field::placeholder {
	color: rgba(255, 255, 255, 0.62) !important;
}

#masthead .ast-search-menu-icon .search-field:focus,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-field:focus {
	outline: 2px solid var(--aiy-hd-accent);
	outline-offset: 1px;
}

/* テーマのアイコンフォントがフロントで読み込まれず豆腐になるため、
   虫めがねは背景画像で描く */
#masthead .astra-search-icon::before {
	content: none !important;
}

#masthead .astra-search-icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8d6e0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

/* ---------- 検索結果ページの再検索フォーム ---------- */

.aiy-search-again {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin: 0 0 34px;
}

.aiy-search-again input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 16px;
	border: 1px solid #d7e0e6;
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	color: #14303d;
}

.aiy-search-again input[type="search"]:focus {
	outline: 2px solid #1a6c7a;
	outline-offset: 1px;
}

.aiy-search-again button {
	flex: 0 0 auto;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background: #1a6c7a;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.14s ease;
}

.aiy-search-again button:hover {
	background: #14555f;
	transform: translateY(-1px);
}

.aiy-search-again button:active {
	transform: translateY(1px) scale(0.98);
}

/* ---------- CTAボタン ---------- */

#ast-desktop-header .ast-custom-button {
	position: relative;
	overflow: hidden;
	border-radius: 999px;
	padding: 11px 22px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

#ast-desktop-header .ast-custom-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(94, 207, 223, 0.34);
}

#ast-desktop-header .ast-custom-button:active {
	transform: translateY(1px) scale(0.98);
}

/* ---------- ハンバーガー ---------- */

#masthead .menu-toggle,
#masthead .ast-mobile-menu-trigger-minimal {
	border-radius: 999px !important;
	background: var(--aiy-hd-hover) !important;
	transition: background-color 0.2s ease, transform 0.14s ease;
}

#masthead .menu-toggle:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

#masthead .menu-toggle:active {
	transform: scale(0.94);
}

#masthead .menu-toggle .ast-mobile-svg {
	fill: var(--aiy-hd-strong);
}

/* ---------- オフキャンバスのメニュー ---------- */

.ast-mobile-popup-drawer .main-header-menu .menu-link {
	font-size: 16px;
	font-weight: 700;
}

/* ---------- 読了バー ---------- */

.aiy-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--aiy-hd-accent);
	transition: width 0.1s linear;
	z-index: 2;
}

/* ---------- ページ遷移 ---------- */

/*
 * 同一サイト内の遷移をクロスフェードにする。
 * WordPress の Speculation Rules による先読みが既に効いているので、
 * 体感はアプリに近くなる。非対応ブラウザは従来どおりの遷移になる。
 */
@view-transition {
	navigation: auto;
}

#masthead {
	view-transition-name: aiy-header;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	#masthead,
	#masthead * {
		transition: none !important;
		animation: none !important;
	}
}