@charset "UTF-8";

:root {

	// マージン量
	--ark-mt: 2rem;
	--ark-mt--s: 1rem;
	--ark-mt--h: 2.5em; // 見出しタグ用

	// フォントサイズ
	--ark-font_size: 16px;
	--ark-font_size--mobile: 3.8vw;

	// コンテンツエリアのline-height
	--ark-line_height: 1.8;

	// フォントファミリー
	--ark-font_family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;

	// l-containerのサイドのpadding量
	--ark-pad--container: 48px;

	@include sp {
		--ark-pad--container: 4vw;
	}

	// カラー変数 (設定には紐づいていないもの)
	--ark-color_border: rgba(200, 200, 200, .5);
	--ark-color_gray: rgba(200, 200, 200, .15);
	--ark-color_table_border: #ededed;

	//ヘッダー
	--ark-header_height: 0px; //実際の数値は JSでセット
	// --ark-header_body_height: 40px; //実際の数値は JSでセット

	// ドロワーメニューのカラー変数
	// --ark-color_drawer_bg:

	// ウィジェットなどのナビ・メニュー用変数
	--ark-nav-padding: .75rem .5rem; //rem: 子メニューになっても余白感変わらないように
	--ark-hover_gray: rgba(150, 150, 150, .05);

	// スクロールバーの横幅
	--ark-scrollbar_width: 0px;

	// 管理バーの高さ
	--ark-adminbar_height: 0px;

	// 固定コンテンツを考慮したオフセット値
	--ark-offset_y: 0px;
}

html {
	font-size: var(--ark-font_size);
	letter-spacing: .025em;

	@include mobile {
		font-size: var(--ark-font_size--mobile);
	}
}

body.admin-bar {
	--ark-adminbar_height: var(--wp-admin--admin-bar--height, 32px);

	@media screen and (max-width: 782px) {
		--ark-adminbar_height: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* stylelint-disable selector-id-pattern */
body:not(#_) {
	// wp5.9 から導入されたCSS変数を流用する
	@include set-wp-preset--fz;
}