@charset "UTF-8";

:root {

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

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

	// コンテンツエリアの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-padding--container: 48px;

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

	@include mobile {
		--ark-font_size: 3.8vw;
	}

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

	// カラー変数 (設定には紐づいていないもの)
	--ark-color--border: rgba(200, 200, 200, .5);
	--ark-color--gray: rgba(200, 200, 200, .15);
	--ark-color--border--table: #ededed;
	--ark-color--gray--hover: rgba(150, 150, 150, .05);

	// 薄いカラーで表示する部分の opacity
	--ark-opacity--thin: .75;

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

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

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

	--ark-100vh: 100vh;

	@supports (height: 100svh) {
		--ark-100vh: 100svh;
	}
}

html {
	font-size: var(--ark-font_size);
	letter-spacing: .025em;
}
// --ark-adminbar_heightで変わるものはbodyで指定ｐ
body {
	// 固定コンテンツを考慮したオフセット値 old: --ark-offset_y
	--ark-offset--y: calc(var(--ark-adminbar_height) + var(--ark-header_height--fixed));

	// 全高コンテンツ用
	--ark-height--full: calc(var(--ark-100vh, 100vh) - var(--ark-offset--y));
}

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);
	}
}


// ヘッダーオーバーレイの時、最初のコンテンツは値を固定
.l-header[data-overlay="1"] + .l-content .l-main__body > .c-postContent > :first-child {
	--ark-height--full: calc(var(--ark-100vh, 100vh) - var(--ark-adminbar_height));
}

// ヘッダーオーバーレイじゃない時、最初のコンテンツは値を固定
.l-header:not([data-overlay]) + .l-content .l-main__body > .c-postContent > :first-child {
	--ark-height--full: calc(var(--ark-100vh, 100vh) - var(--ark-adminbar_height) - var(--ark-header_height));
}


// 途中で名前変更したものの後方互換
body {
	--ark-color_main: var(--ark-color--main);
	--ark-color_text: var(--ark-color--text);
	--ark-color_link: var(--ark-color--link);
	--ark-color_bg: var(--ark-color--bg);
	--ark-color_gray: var(--ark-color--gray);
	--ark-hover_gray: var(--ark-color--gray--hover);
	--ark-color_border: var(--ark-color--border);
	--ark-color_table_border: var(--ark-color--border--table);

	--ark-font_size--mobile: 3.8vw;
	--ark-pad--container: var(--ark-padding--container);
	--ark-nav-padding: var(--ark-padding--nav);
	--ark-offset_y: var(--ark-offset--y);
	--ark-container_width: var(--ark-width--container);
	--ark-article_width: var(--ark-width--article);
	--ark-slim_width: var(--ark-width--article--slim);

	// テーマ本体内だけでしか使われていないもの
	// --ark-logo_size_pc →　--ark-logo_size--pc
	// --ark-logo_size_sp →　--ark-logo_size--sp
}