/* ── トランジション変数 ─────────────────────────── */
:root {
	--duration-base: 0.3s;
	--duration-fast: 0.15s;
	--duration-slow: 0.6s;
	--ease-base: ease;
}

/* ── グラデーションアニメーション（左右にゆっくり往復）────
   background-size を拡大し background-position を往復させることで
   linear-gradient の色をゆっくり流す。テキスト（background-clip:text）と
   背景ボックス両方で同じ keyframes を共有。全ページ常時読み込みの
   style.css に定義するため、条件付き読み込みの block CSS からも参照可能。 */
@keyframes kw-gradient-shift {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* ── グラデーションボタン ──────────────────────── */
.kw-btn-gradient .wp-block-button__link {
	background: linear-gradient(135deg,
			var(--wp--preset--color--primary-500) 0%,
			var(--wp--preset--color--primary-800) 100%);
	background-size: 200% 100%;
	animation: kw-gradient-shift 6s ease-in-out infinite;
	color: var(--wp--preset--color--white);
	border: none;
	font-size: var(--wp--preset--font-size--font-18);
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 16px 48px;
	box-shadow: 0 0 16px rgba(73, 185, 208, 0.30);
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.kw-btn-gradient .wp-block-button__link:hover {
	opacity: 0.88;
	color: var(--wp--preset--color--white);
	box-shadow: 0 0 24px rgba(73, 185, 208, 0.45);
}

/* ── グラデーションテキスト（明るい背景用）──────── */
.kw-text-gradient {
	background: linear-gradient(135deg,
			var(--wp--preset--color--primary-500) 0%,
			var(--wp--preset--color--primary-800) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent !important;
	background-clip: text;
	animation: kw-gradient-shift 8s ease-in-out infinite;
}

/* ── グラデーションテキスト（暗い背景/Services用）─ */
.kw-text-gradient-light {
	background: linear-gradient(135deg,
			var(--wp--preset--color--neutral-50) 0%,
			var(--wp--preset--color--primary-400) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent !important;
	background-clip: text;
	animation: kw-gradient-shift 8s ease-in-out infinite;
}

/* ── Services セクション背景グラデーション ────── */
/* CTA ボックスと同じティール（primary-500 → 800）に統一。
   元の primary-400 起点は明るすぎたため深めに変更。 */
.kw-section-services {
	margin: 0;
	background: linear-gradient(135deg,
			var(--wp--preset--color--primary-500) 0%,
			var(--wp--preset--color--primary-800) 100%);
	background-size: 200% 100%;
	animation: kw-gradient-shift 11s ease-in-out infinite;
}

/* ── CTA ボックス（980px 中央寄せ）────────────── */
.kw-cta-box {
	background: linear-gradient(135deg,
			var(--wp--preset--color--primary-500) 0%,
			var(--wp--preset--color--primary-800) 100%);
	background-size: 200% 100%;
	animation: kw-gradient-shift 10s ease-in-out infinite;
	border-radius: var(--wp--preset--border-radius--radius-2-xl);
	max-width: 980px;
	margin-inline: auto;
}

/* ── ホワイトボタン（CTA / Services 上）────────── */
.kw-btn-white .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-700);
	font-size: var(--wp--preset--font-size--font-18);
	font-weight: 700;
	padding: 16px 48px;
	transition: background 0.2s ease, color 0.2s ease;
}

.kw-btn-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-100);
}


/* ── サイトヘッダー sticky 補助 ─────────────── */
.site-header {
	backdrop-filter: blur(4px);
}

/* ── Heading-Section EN（英大文字）────────────── */
:root .kw-heading-section-en {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-weight: 200;
	font-size: var(--wp--preset--font-size--font-80);
	line-height: 1;
	letter-spacing: -0.02em;
	padding-bottom: 0.2em;
}

/* ── Heading Hero（H1 特大）────────────────── */
:root .kw-hero-heading {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-weight: 200;
	font-size: var(--wp--preset--font-size--font-120);
	line-height: 1;
	letter-spacing: -0.00em;
	margin-bottom: var(--wp--preset--spacing--size-12);


}

:root .kw-hero-subtext {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--font-24);
	font-feature-settings: "palt";
	line-height: 1.6;
	letter-spacing: 0.08em;
	margin-bottom: var(--wp--preset--spacing--size-32);

}

.kw-hero-image-placeholder {
	aspect-ratio: 1;
	border-radius: 9999px;
	background: linear-gradient(to bottom, #4edbe5 0%, #49b9d0 44%, #1f8093 100%);
	min-height: 300px;
}



/* ── JA ラベル（セクション上部の日本語小見出し）── */
.kw-label-ja {
	position: static;
	font-size: var(--wp--preset--font-size--font-20);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--base-text);
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}


/* ── テキストユーティリティ ────────────────── */
.kw-text-xs {
	font-size: 0.6875rem;
}

/* 11px */
.kw-text-xxs {
	font-size: 0.75rem;
}

/* 12px */

/* ── スタイルガイド用レイアウト ──────────────── */
.kw-sg-preview-dark {
	background: var(--wp--preset--color--primary-900);
	border-radius: var(--wp--preset--border-radius--radius-xl);
	padding: var(--wp--preset--spacing--size-32);
}

/* ── About 画像プレースホルダー ─────────────── */
.kw-about-image {
	aspect-ratio: 1;
	border-radius: 9999px;
	background: linear-gradient(to bottom, #4edbe5 0%, #49b9d0 44%, #1f8093 100%);
}





/* ── ここから追加 ─────────────── */

/* ── スムーズスクロール ─────────────── */

:root {
	scroll-behavior: smooth;
	scroll-padding-top: 150px;
	/* 固定ヘッダーの高さ */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		scroll-behavior: auto;
		scroll-padding-top: 150px;
	}
}

/* ── ノイズ背景 ─────────────── */

/*ノイズ背景*/
.bg-noise-filter {
	position: relative;
	isolation: isolate;
	/* 新しいスタッキングコンテキストを作成 */
}

/* 疑似要素でテクスチャレイヤーを追加 */
.bg-noise-filter::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('/wp-content/themes/kawasemi-design/assets/css/filter-noise-01.png');
	background-size: auto;
	/* または cover、contain、auto など */
	background-repeat: repeat;
	mix-blend-mode: color-dodge;
	/* 必要に応じて調整 */
	pointer-events: none;
	/* クリックイベントを透過 */
	z-index: 0;
	/* 背景レイヤーとして配置 */
	opacity: .9;
	/* 透明度調整 */
}

/* 子要素のスタッキングを確保 */
.bg-noise-filter>* {
	position: relative;
	z-index: 1;
	/* 疑似要素より前面に */
}

/* ── 斜め線 飾り ─────────────── */

/* 装飾的な斜め線 ホワイト*/
.decoration-line::before,
.decoration-line::after {
	content: '';
	position: absolute;
	width: 130px;
	aspect-ratio: 1 / 3;
	background-image: url('/wp-content/uploads/parts-bg_WR.svg');
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	opacity: .25;
}

.decoration-line::before {
	right: 0px;
	top: -5%;
	transform: rotate(0deg);
}

.decoration-line::after {
	left: 0px;
	bottom: -5%;
	transform: rotate(180deg);
}

/* 装飾的な斜め線 グレー*/
.decoration-line-gray::before,
.decoration-line-gray::after {
	content: '';
	position: absolute;
	width: 130px;
	aspect-ratio: 1 / 3;
	background-image: url('/wp-content/uploads/parts-bg_GR.svg');
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	opacity: .8;
}

.decoration-line-gray::before {
	right: 0px;
	top: 5%;
	transform: rotate(0deg);
}

.decoration-line-gray::after {
	left: 0px;
	bottom: 5%;
	transform: rotate(180deg);
}

/* 子要素のスタッキングを確保 */
.decoration-line>*,
.decoration-line-gray>* {
	position: relative;
	z-index: 1;
	/* 疑似要素より前面に */
}

/* ── QueryLoopスライダー ─────────────── */

.wp-block-query.is-slider.has-navigation-top-right {
	--circle-icon-size: var(--wp--preset--font-size--font-16);
	--circle-icon-color-hover: var(--wp--preset--color--white);
	padding-top: calc(4 * var(--circle-icon-size));
	/* ナビゲーション分のスペース */
}

/* ナビゲーションラッパー */
.qls-navigation-top-right {
	position: absolute;
	inset: calc(var(--circle-icon-size) + .25rem) 0 auto;
	z-index: 10;
	margin: auto;
	max-width: min(calc(1120px + 1.5rem), 95vw);
	display: flex;
	justify-content: flex-end;
	gap: var(--circle-icon-size);
}

/* 右上配置のナビボタン */
.wp-block-query.is-slider.has-navigation-top-right .qls-nav-btn {
	/* トランジション */
	transition: all var(--duration-base) var(--ease-base);
}

.wp-block-query.is-slider.has-navigation-top-right .qls-nav-btn.swiper-button-prev,
.wp-block-query.is-slider.has-navigation-top-right .qls-nav-btn.swiper-button-next {
	--swiper-navigation-size: calc(2 * var(--circle-icon-size)) !important;
	--swiper-navigation-color: var(--wp--preset--color--text-primary);
	box-shadow: none;

	/* サイズと形状 */
	font-size: var(--circle-icon-size);
	width: calc(2.5 * var(--circle-icon-size));
	aspect-ratio: 1/1;
	height: auto;
	border-radius: 9999px;
	border-style: solid;
	border-width: calc(var(--circle-icon-size) / 9);
	border-color: var(--wp--preset--color--text-primary);
	color: var(--wp--preset--color--text-primary);
	background-color: var(--wp--preset--color--white);
	position: initial;
}

.wp-block-query.is-slider.has-navigation-top-right .qls-nav-btn.swiper-button-prev:hover,
.wp-block-query.is-slider.has-navigation-top-right .qls-nav-btn.swiper-button-next:hover {
	background-color: var(--wp--preset--color--text-primary);
	color: var(--circle-icon-color-hover);
}

.wp-block-query.is-slider.has-navigation-top-right .qls-nav-btn.swiper-button-prev:focus,
.wp-block-query.is-slider.has-navigation-top-right .qls-nav-btn.swiper-button-next:focus {
	outline: initial;
	outline-offset: 0;
}

/*
@media (1180px < width) {
	.wp-block-query.is-slider.has-navigation-top-right {
		margin-left: -1.5rem !important;
	}
}

@media (1024px < width) {
	.wp-block-query.is-slider.has-navigation-top-right {
		padding-left: 1.5rem;
	}
}

.wp-block-post:has(.is-style-card):hover {
	box-shadow: var(--shadow-lg);
}

.heading-top {
	margin-bottom: calc(var(--wp--preset--spacing--size-48) * -1) !important;
}

	*/

/* ==========================================================================
   プラグイン調整
   ========================================================================== */

/* スライダー調整 */

.wp-block-query.is-slider.is-centered.kw-query-works {
	overflow: visible;
}

.wp-block-query.is-slider.kw-query-works .swiper-slide:not(.swiper-slide-active) {
	transform: scale(0.88);
}

.wp-block-query.is-slider.kw-query-works .swiper-slide {
	transition: transform var(--duration-slow) var(--ease-base);
}

#section-works .kw-section-heading {
	margin-bottom: calc(var(--wp--preset--spacing--size-48) * -1);
}

/*移動距離調整*/
html:not(.no-js) [data-aos=fade-up] {
	transform: translate3d(0, var(--wp--preset--spacing--size-24), 0);
}

html:not(.no-js) [data-aos=fade-right] {
	transform: translate3d(-32px, 0, 0);
}


/* font-awesome ブロック ホバーアクション */
.wp-font-awesome-icon {
	overflow: clip;
}

a:has(.wp-font-awesome-icon) .svg-inline--fa.fa-arrow-right {
	filter: drop-shadow(-2em 0em 0em currentColor);
	transform: translateX(0em);
	transition: unset;
}

a:has(.wp-font-awesome-icon):hover .svg-inline--fa.fa-arrow-right {
	transform: translateX(2em);
	transition: transform var(--duration-slow) var(--ease-base);
}

a:has(.wp-font-awesome-icon) .svg-inline--fa.fa-arrow-down {
	filter: drop-shadow(0em -2em 0em currentColor);
	transform: translateY(0em);
	transition: unset;
}

a:has(.wp-font-awesome-icon):hover .svg-inline--fa.fa-arrow-down {
	transform: translateY(2em);
	transition: transform var(--duration-slow) var(--ease-base);
}

/* 丸囲みの場合 */
a:has(.kw-icon-circle) .svg-inline--fa.fa-arrow-right {
	filter: drop-shadow(2em 0em 0em currentColor);
	transform: translateX(-2em);
	transition: unset;
}

a:has(.kw-icon-circle):hover .svg-inline--fa.fa-arrow-right {
	transform: translateX(0em);
	transition: transform var(--duration-slow) var(--ease-base);
}

a:has(.wp-font-awesome-icon.kw-icon-circle) .svg-inline--fa.fa-arrow-down {
	filter: drop-shadow(0em 2em 0em currentColor);
	transform: translateY(-2em);
	transition: unset;
}

a:has(.wp-font-awesome-icon.kw-icon-circle):hover .svg-inline--fa.fa-arrow-down {
	transform: translateY(0em);
	transition: transform var(--duration-slow) var(--ease-base);
}



.wp-block-geometric-animation-cover {
	margin: 0;
}


/* ── アクセシビリティ：視差効果を減らす設定ではグラデーション
   アニメーションを停止する（可読性・酔い防止）───────────── */
@media (prefers-reduced-motion: reduce) {
	.kw-text-gradient,
	.kw-text-gradient-light,
	.kw-section-services,
	.kw-cta-box,
	.kw-btn-gradient .wp-block-button__link {
		animation: none;
	}
}