/* ============================================================
   LIQUID PRESS ポップカラー化スタイル
   ポップ・カラフル × 青/水色系 × ホバーアニメーションあり

   ★色や文字の太さは、管理画面の「設定」→「ポップスタイル設定」から
     変更できます。下の値はその設定が無い場合の初期値（フォールバック）です★
   ============================================================ */
:root {
	--lpps-deep:  #0B4F8A; /* 深い青（フッターのベース） */
	--lpps-blue:  #1E88E5; /* メインの青 */
	--lpps-sky:   #4FC3F7; /* 明るい水色 */
	--lpps-aqua:  #66E0D4; /* アクアグリーン（泡・ホバーの光） */
	--lpps-sun:   #FFD166; /* 差し色の黄色（現在地・アクセント） */
	--lpps-ink:   #0B2A4A; /* 濃い文字色 */
	--lpps-cloud: #FFFFFF; /* フッター上の文字色（くっきり見えるよう白） */
	--lpps-text-weight: 600; /* フッター本文の太さ（薄く見えないよう少し太め） */
}

/* ポップで丸みのある書体（見出し・ボタンのみに使用） */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800&display=swap');

/* ============================================================
   1. フッター全体
   ※ "footer" 自体に当てているので、リキッドプレスのほとんどの
     構成（ブロックテーマ／クラシックテーマ）でヒットします。
   ============================================================ */
footer,
footer.wp-block-template-part,
#colophon,
.site-footer {
	position: relative;
	overflow: hidden;
	color: var(--lpps-cloud) !important;
	font-weight: var(--lpps-text-weight) !important;
	opacity: 1 !important;
	padding-top: 70px !important;
	background-color: var(--lpps-deep) !important;
	background-image:
		radial-gradient(circle at 8%  78%, rgba(102,224,212,.55) 0%, transparent 9%),
		radial-gradient(circle at 86% 22%, rgba(255,209,102,.45) 0%, transparent 7%),
		radial-gradient(circle at 62% 88%, rgba(255,255,255,.30) 0%, transparent 6%),
		radial-gradient(circle at 30% 15%, rgba(102,224,212,.30) 0%, transparent 8%),
		linear-gradient(135deg, var(--lpps-deep) 0%, var(--lpps-blue) 55%, var(--lpps-sky) 100%);
	background-size: 140% 140%;
	background-repeat: no-repeat;
	animation: lpps-float-bg 16s ease-in-out infinite alternate;
}

/* フッター上部の波形の帯（フッター内側の上端に配置） */
footer::before,
footer.wp-block-template-part::before,
#colophon::before,
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 56px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C300,100 900,0 1200,55 L1200,0 L0,0 Z' fill='%2366E0D4' fill-opacity='0.45'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 0;
}

/* フッター内側のコンテンツを波・泡より前面に */
footer > *,
footer.wp-block-template-part > *,
#colophon > *,
.site-footer > * {
	position: relative;
	z-index: 1;
}

/* フッター内のテキストが薄く・弱く見えないよう、不透明度と太さを保証
   （ナビゲーションのボタンとクリック演出用の要素は対象外） */
footer :not(.wp-block-navigation-item__content):not(.lpps-ripple),
footer.wp-block-template-part :not(.wp-block-navigation-item__content):not(.lpps-ripple),
#colophon :not(.wp-block-navigation-item__content):not(.lpps-ripple),
.site-footer :not(.wp-block-navigation-item__content):not(.lpps-ripple) {
	opacity: 1 !important;
}

footer p, footer li, footer span, footer div, footer td, footer th, footer blockquote, footer figcaption,
footer.wp-block-template-part p, footer.wp-block-template-part li, footer.wp-block-template-part span, footer.wp-block-template-part div,
#colophon p, #colophon li, #colophon span, #colophon div,
.site-footer p, .site-footer li, .site-footer span, .site-footer div {
	color: var(--lpps-cloud) !important;
	font-weight: var(--lpps-text-weight) !important;
}

/* フッター内の見出し（ウィジェットタイトルなど） */
footer h1, footer h2, footer h3, footer h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
#colophon h1, #colophon h2, #colophon h3, #colophon h4 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 800;
	color: var(--lpps-cloud) !important;
	letter-spacing: .03em;
}
footer h1::before, footer h2::before, footer h3::before, footer h4::before,
.site-footer h1::before, .site-footer h2::before, .site-footer h3::before, .site-footer h4::before,
#colophon h1::before, #colophon h2::before, #colophon h3::before, #colophon h4::before {
	content: "●";
	color: var(--lpps-sun);
	font-size: .6em;
	margin-right: 8px;
	vertical-align: middle;
}

/* フッター内のテキストリンク（ウィジェット内など） */
footer a:not(.wp-block-navigation-item__content),
.site-footer a:not(.wp-block-navigation-item__content),
#colophon a:not(.wp-block-navigation-item__content) {
	color: var(--lpps-cloud) !important;
	font-weight: var(--lpps-text-weight) !important;
	text-decoration: none;
	position: relative;
	transition: color .25s ease;
}
footer a:not(.wp-block-navigation-item__content)::after,
.site-footer a:not(.wp-block-navigation-item__content)::after,
#colophon a:not(.wp-block-navigation-item__content)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 2px;
	background: var(--lpps-aqua);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
footer a:not(.wp-block-navigation-item__content):hover,
.site-footer a:not(.wp-block-navigation-item__content):hover,
#colophon a:not(.wp-block-navigation-item__content):hover {
	color: var(--lpps-sun) !important;
}
footer a:not(.wp-block-navigation-item__content):hover::after,
.site-footer a:not(.wp-block-navigation-item__content):hover::after,
#colophon a:not(.wp-block-navigation-item__content):hover::after {
	transform: scaleX(1);
}

/* コピーライト表記（薄くしすぎず、文字サイズだけ少し小さく） */
footer .wp-block-template-part + p,
.site-footer .copyright,
#colophon .copyright,
footer small {
	opacity: 1 !important;
	font-size: .9em;
	color: var(--lpps-cloud) !important;
	font-weight: var(--lpps-text-weight) !important;
}

/* ============================================================
   2. グローバルメニュー（PC）をポップなボタンに
   ※ いろいろなテーマ構成に対応するため、複数のセレクタを併記しています。
     反映されない場合は検証ツールでメニューの実クラス名を確認し、追記してください。
   ============================================================ */
.wp-block-navigation-item__content,
.main-navigation a,
#site-navigation a,
nav.navbar a,
.menu > li > a,
.nav-menu > li > a {
	font-family: 'M PLUS Rounded 1c', sans-serif !important;
	font-weight: 800 !important;
	display: inline-block;
	margin: 4px 6px;
	padding: 10px 24px !important;
	border-radius: 999px !important;
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0,0,0,.35);
	background: linear-gradient(135deg, var(--lpps-deep), var(--lpps-blue)) !important;
	box-shadow: 0 6px 16px rgba(0,0,0,.35);
	position: relative;
	overflow: hidden;
	letter-spacing: .02em;
	opacity: 1 !important;
	transition:
		transform .35s cubic-bezier(.34,1.56,.64,1),
		box-shadow .35s ease,
		background .35s ease;
}

/* ホバー時：ふわっと浮き上がる + 弾むような拡大 + 光るシャドウ */
.wp-block-navigation-item__content:hover,
.main-navigation a:hover,
#site-navigation a:hover,
nav.navbar a:hover,
.menu > li > a:hover,
.nav-menu > li > a:hover {
	transform: translateY(-4px) scale(1.07);
	box-shadow: 0 10px 22px rgba(102,224,212,.55);
	background: linear-gradient(135deg, var(--lpps-aqua), var(--lpps-sky)) !important;
	color: var(--lpps-ink) !important;
}

/* クリック時：軽く沈む */
.wp-block-navigation-item__content:active,
.main-navigation a:active,
#site-navigation a:active,
nav.navbar a:active,
.menu > li > a:active,
.nav-menu > li > a:active {
	transform: translateY(-1px) scale(.97);
}

/* 現在表示中のページのボタンは黄色でポップに目立たせる */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.main-navigation li.current-menu-item > a,
#site-navigation li.current-menu-item > a,
.menu > li.current-menu-item > a,
.nav-menu > li.current-menu-item > a {
	background: linear-gradient(135deg, var(--lpps-sun), #ffe29a) !important;
	color: var(--lpps-ink) !important;
	box-shadow: 0 4px 14px rgba(255,209,102,.5);
}

/* キーボード操作時にも分かりやすいフォーカス枠 */
.wp-block-navigation-item__content:focus-visible,
.main-navigation a:focus-visible,
#site-navigation a:focus-visible,
.menu > li > a:focus-visible {
	outline: 3px solid var(--lpps-sun);
	outline-offset: 2px;
}

/* クリック時のポップ（波紋）演出用エレメント（JSで生成） */
.lpps-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.65);
	transform: scale(0);
	pointer-events: none;
	animation: lpps-ripple-anim .6s ease-out forwards;
}

/* スマホ用ハンバーガーボタンも色味を合わせる */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	background: linear-gradient(135deg, var(--lpps-deep), var(--lpps-blue)) !important;
	border-radius: 999px !important;
	color: #fff !important;
	opacity: 1 !important;
	box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* ============================================================
   3. アニメーション定義
   ============================================================ */
@keyframes lpps-float-bg {
	0%   { background-position: 0% 0%; }
	100% { background-position: 8% 6%; }
}

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

/* 動きを少なくしたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
	footer,
	footer.wp-block-template-part,
	#colophon,
	.site-footer {
		animation: none !important;
	}
	.wp-block-navigation-item__content,
	.main-navigation a,
	#site-navigation a,
	.menu > li > a,
	.nav-menu > li > a {
		transition: none !important;
	}
}