$xs-max: 575.98px;
$sm-max: 767.98px;
$md-max: 991.98px;
$lg-max: 1199.98px;
$xl-max: 1399.98px;

$sm-min: 576px;
$md-min: 768px;
$lg-min: 992px;
$xl-min: 1200px;
$xxl-min: 1400px;

$containter-padding:15px;

:root {
    --vk-color-text-body : #333333;
    --vk-color-text-link : #666666;
    --vk-color-text-link-hover : #1e73be;
    --vk-color-text-header : #444444;
    --vk-color-text-meta : #666666;/* 一旦非推奨 */
    --vk-color-text-light : #666666;
    --vk-color-border : rgba(0,0,0,0.2);
    --vk-color-border-hr : rgba(0,0,0,0.06);
    --vk-color-border-image : #e5e5e5;
    --vk-color-border-form : rgba(0,0,0,0.2);
    --vk-color-primary : #c00;
    --vk-color-primary-dark : #b00;
    --vk-color-primary-vivid : #d00;
    --vk-color-accent-bg : rgba( 0,0,0,0.02 );
    --vk-color-header-bg : #fff;
    --vk-color-footer-bg : #f5f5f5;

	/**
	* @since 15.9
	* --vk-width-container : 100% -> 100svw;
	* theme.json 有効時にコンテナサイズが
	* calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 ) で指定されるため
	* ブロックに対する max-width が 100% - 30px になってしまうので、グループブロックなどインナー要素で左右に余分にスペースができてしまうため
	*/
    --vk-width-container : 100svw;

    --vk-width-container-padding : 15px;

    --vk-width-container-body : calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );

	/**
	* @since 15.26
	* --vk-width-full : 編集画面は全幅が 100svw ではないため、変更できるように --vk-width-full を使用する
	*/
	--vk-width-full : 100svw;

	--vk-width-wide : calc( var(--vk-width-container-body) + ( var(--vk-width-full) - var( --vk-width-container-body) ) / 2 );

	--vk-width-col-2-main : 66.6%;
    // サイドバーがjsでfixedにすると、ストレートな幅指定だと基準がウィンドウになってしまうため、コンテナ基準にしている
	--vk-width-col-2-sub: calc( var(--vk-width-container) * 0.27 );

    --vk-margin-meta : 0.5rem;
    --vk-margin-headding-bottom : 1em;
    --vk-margin-element-bottom : 1.5rem;
    --vk-margin-block-bottom : 2rem;
    --vk-margin-section-bottom : 3rem;


    --vk-size-text: 16px;
    --vk-size-text-meta: 0.75rem;
    --vk-size-text-lg: 1.5rem;
    --vk-size-text-sm: 0.875rem;
    --vk-size-text-xs: 0.75rem;

    --vk-size-radius: 4px;
    --vk-size-radius-sm: calc( var( --vk-size-radius ) * 0.5 );
    --vk-size-radius-lg: calc( var( --vk-size-radius ) * 1.5 );
    --vk-line-height: 1.7em;
    --vk-line-height-low: 1.4em;
}
@media (min-width: $sm-min) {
    :root{
        --vk-width-container : 540px;
    }
}
@media (min-width: $md-min) {
    :root{
        --vk-width-container : 720px;
    }
}
@media (min-width: $lg-min) {
    :root{
        --vk-width-container : 960px;
    }
}
@media (min-width: $xl-min) {
    :root{
        --vk-width-container : 1140px;
    }
}



:root{
    --vk-size-admin-bar : 46px;
	--wp--preset--font-family--system-font: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
@media (min-width: 783px) {
    :root{
        --vk-size-admin-bar : 32px;
    }
}