@charset "utf-8";
/**
 * サービスページ共通基盤（foundation.css）
 *
 * 概要: 全サービスページで共有するCSS変数と基本設定
 * 仕様: セマンティック変数を定義し、pages/*.css で bodyクラススコープにより上書き
 *       共通コンポーネント（faq, form, voice）はこの変数を参照する
 * 制限: ページ固有の変数（--gradientsbg-left 等）はここでは定義しない → pages/*.css で直接定義
 */

:root {
	/* ============================================================
	   FAQ（question-sec）テーマ
	   ============================================================ */
	--faq-bg-gradient-color: var(--green-color-primary);
	--faq-border-color: var(--yellow-color-second);
	--faq-label-bg: var(--yellow-color-second);
	--faq-label-color: var(--text-color);
	--faq-scrollbar-color: var(--yellow-color-primary);
	--faq-hover-shadow-color: var(--yellow-color-second);
	--faq-arrow-color: #444;

	/* ============================================================
	   お客様の声（voice-sec）テーマ
	   ============================================================ */
	--voice-card-bg: #fff;
	--voice-body-bg: #fff;
	--voice-title-color: var(--text-color);
	--voice-company-color: rgba(var(--text-color-rgb), .8);

	/* ============================================================
	   共通レイアウト
	   ============================================================ */
	--service-scroll-margin-top: 76px;
}


/* === 共通基本設定 === */
html { scroll-behavior: smooth; }

#strong, #about, #price, #case, #voice, #reason,
#flow, #merit, #blog, #question, #form {
	scroll-margin-top: var(--service-scroll-margin-top);
}

.siteheader[data-active=false] { opacity: 0; visibility: hidden; }
.siteheader[data-active=true] {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--base-duration) var(--base-easing),
	            visibility var(--base-duration) var(--base-easing);
}

@media (max-width: 767px) {
	#strong, #about, #price, #case, #voice, #reason,
	#flow, #merit, #blog, #question, #form {
		scroll-margin-top: 56px;
	}
}