/**
 * NOYA DESIGN STUDIO
 * スマホ画面下部に常時追従する固定CTAバー v1.1.0
 *
 * [CVR改善 P0-2]
 * 「モバイルのファーストビューに申し込み導線がない」を解消する
 * 施策の後半部分。前半(価格直下の一次CTA)はHERO/hero.cssの
 * .nd-hero__cta が担当する。こちらはページ全体をスクロールした後も
 * 常に指1本でお問い合わせへ戻れるようにする、常時追従バー。
 *
 * PC/タブレットでは表示しない(既に右メニューから常時アクセス可能なため)。
 */

/* ==========================================================
   既定値：PC/タブレットでは非表示
========================================================== */

.nd-sticky-cta {
	display: none;
}


/* ==========================================================
   スマホ(767px以下)のみ表示
========================================================== */

@media (max-width: 767px) {

	.nd-sticky-cta {
		display: block;

		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;

		/*
		 * 背景を白系(#F7F7F4)にしたため、境界線もライムのままだと
		 * 背景色と近く見分けにくい。ページ本文との区切りをはっきり
		 * させるため黒に変更している。
		 */
		border-top: 2px solid #111315;
		background: #F7F7F4;

		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/*
	 * 右メニュー展開中は非表示にし、2つの固定UIが
	 * 同時に競合して見えることを避ける。
	 * hero.jsが `.nd-side-nav` へ付与する `is-open` を
	 * そのまま判定に使う(既存の body:has() 実績パターンを踏襲)。
	 */
	body:has(.nd-side-nav.is-open) .nd-sticky-cta {
		display: none;
	}

	.nd-sticky-cta__link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;

		width: 100%;
		min-height: 56px;
		padding: 14px 20px;

		color: #111315;
		text-decoration: none;

		font-family: "Barlow Condensed", sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.08em;

		-webkit-tap-highlight-color: transparent;
	}

	.nd-sticky-cta__arrow {
		display: grid;
		place-items: center;
		flex: none;
	}

	.nd-sticky-cta__arrow svg {
		display: block;
		width: 18px;
		height: 18px;

		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;

		transition: transform 200ms ease;
	}

	.nd-sticky-cta__link:active .nd-sticky-cta__arrow svg {
		transform: translateX(3px);
	}

	.nd-sticky-cta__link:focus-visible {
		outline: 2px solid #111315;
		outline-offset: -4px;
	}

	/*
	 * バー自身の高さぶん、全ページ共通フッターの末尾が
	 * 隠れてしまわないよう余白を追加する。
	 * IDセレクタでnoya-site-footer.css側の
	 * `.nd-site-footer { margin: 0 !important; }` (クラス指定)より
	 * 詳細度を上げ、確実にこの下マージンを効かせる。
	 */
	#noya-site-footer {
		margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
	}

}