/**
 * ヘッダー上部の帯（PC・タブレットのみ表示）
 *
 * 帯はヘッダーパーツ（wp-custom-part-3）内の VK グリッド（2列・各50%）で、
 * 左：サイトのキャッチコピー／右：説明会・オンライン説明会・お問い合わせのリンク＋ LINE ボタン。
 * LINE ボタンを足すと右 50% に収まらず折り返すため、
 * 左は残り幅、右は中身の幅の横並びにして、上下中央で揃える。
 *
 * @package satooya-custom
 */

header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn > .row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
}

header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn > .row > .vk_gridColumn_item {
	width: auto;
	max-width: none;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}

header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn > .row > .vk_gridColumn_item:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn > .row > .vk_gridColumn_item:last-child {
	flex: 0 0 auto;
}

/* 右側のリンク：折り返さず、上下中央 */
header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn .wp-block-group.is-nowrap {
	align-items: center;
	gap: 12px;
}

header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn .vk_button {
	margin: 0;
}

header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn .vk_button_link {
	white-space: nowrap;
}

/* LINE ボタン：横長のコンパクトな形（2行目の案内も1行に収める） */
header .vk_button.satooya-line-btn .vk_button_link.btn {
	padding: 6px 14px;
	line-height: 1.4;
	white-space: nowrap;
}

.satooya-line-btn .vk_button_link_txt {
	font-size: 13px;
	font-weight: 700;
}

.satooya-line-btn .vk_button_link_subCaption {
	margin: 2px 0 0;
	font-size: 10px;
	line-height: 1.3;
}

/* 文字リンク型の3つ（説明会・オンライン説明会・お問い合わせ）は左右の内側余白をなくし、
   リンク同士の間隔（gap）で区切る。左のキャッチコピーを1行に収めるため */
header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn .vk_button_link-type-text {
	padding-left: 0;
	padding-right: 0;
}

/* キャッチコピーを1行に収める（1280px 幅で約 389px 必要） */
header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn .wp-block-site-tagline {
	font-size: 13px !important; /* WP のプリセット文字サイズ（has-small-font-size）が !important のため */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* 画面が狭いときは末尾を「…」で省略 */
}

/* 画面幅に応じたキャッチコピーの見せ方
   1280px 以上：1行／992〜1279px：2行に折り返して全文／991px 以下：隠してボタン類を優先 */
@media ( max-width: 1279px ) {
	header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn .wp-block-site-tagline {
		white-space: normal;
		overflow: visible;
	}
}

@media ( max-width: 991px ) {
	header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn > .row > .vk_gridColumn_item:first-child {
		display: none;
	}

	header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn > .row {
		justify-content: flex-end;
	}
}

/* LINE ボタンが帯の下の罫線に接するため、帯の上下に余白を取る */
header .vk_hidden-xs.vk_hidden-sm .vk_gridColumn {
	padding-top: 8px;
	padding-bottom: 14px; /* 帯にはもともと上に約6pxの余白があるため、下を多めにして上下 14px で揃える */
}

/* -------------------------------------------------- フッターのナビ（ナビゲーション ID 509）
 * 9項目を1行に並べると「プライバシーポリシー」だけが2行目に落ちるため、最初から2行に分ける。
 * 1行目：主な内容（里親制度について〜Q&A の5項目）／2行目：補足情報（資料箱〜プライバシーポリシー）
 * メニューの登録は変えず、幅100%の見えない要素を order で5項目目と6項目目の間に入れて改行する。
 * 対象は白文字・区切り線スタイルのナビ（トップ本文のフッター部分と、各ページの footer の両方）。
 */
@media ( min-width: 768px ) {
	.wp-block-navigation.has-white-color.is-style-nav--text-inline .wp-block-navigation__container {
		row-gap: 8px;
	}

	.wp-block-navigation.has-white-color.is-style-nav--text-inline .wp-block-navigation__container > li:nth-child( -n + 5 ) {
		order: 0;
	}

	.wp-block-navigation.has-white-color.is-style-nav--text-inline .wp-block-navigation__container::after {
		content: "";
		flex-basis: 100%;
		height: 0;
		order: 1;
	}

	.wp-block-navigation.has-white-color.is-style-nav--text-inline .wp-block-navigation__container > li:nth-child( n + 6 ) {
		order: 2;
	}
}

/* スクロールで出てくる要素（VK Blocks アニメーション「下から」）：
   VK の速度設定は「アニメーション時間と同じだけ待ってから」始まるため、画面に入ってから 1〜2 秒空白に見える。
   待ち時間をなくし、短めのフェードにする。 */
:root body .vk_animation-slide-up {
	transition: opacity 0.6s ease-out 0s, top 0.6s ease-out 0s;
}
@media (prefers-reduced-motion: reduce) {
	:root body .vk_animation-slide-up {
		transition: none;
	}
}