:root {
	--primary-color:              #007F85;
	--primary-variant-color:      #3700B3;
	--secondary-color:            #B4C540;
	--secondary-variant-color:    #018786;

	--text-black-color:           #4c4c4c; /* 薄いまたは明るい背景にテキストを表示するときの黒色です（ライトモードを基準としています） */
	--text-white-color:           #f2f2f2; /* 濃いまたは暗い背景にテキストを表示するときの白色です（ライトモードを基準としています） */

	--main-text-color:            var(--text-black-color);
	--main-background-color:      #fdfdfd;
	--header-text-color:          var(--text-white-color);
	--header-background-color:    var(--primary-color);
	--footer-text-color:          var(--text-black-color);
	--footer-background-color:    #f2f2f2;

	/* ボーダー、水平線 */
	--border-color:               #cccccc;

	--list-marker-color:          #287DCF;

	/* リンク */
	--text-link-color:            #01509d;
	--text-link-visited-color:    #01509d;
	--text-link-hover-color:      #ef4e00;

	/* 画像 */
	--img-border-width:           1px;
	--img-border-color:           #808080;

	/* コード（インライン） */
	--code-color:                 #c7254e;
	--code-background-color:      rgba(128, 0, 32, 0.05);

	/* テーブル */
	--table-text-color:           var(--text-black-color);
	--table-background-color:     transparent;
	--table-background-color-odd: rgba(0,0,0,0.02);
	--table-border-color:         var(--border-color);

	/* 引用 */
	--blockquote-font-family:     var(--font-family-sans-serif-italic);
	--blockquote-color:           #e8e8e8;

	/* ボタン */
	--button-text-color:             var(--text-white-color);
	--button-background-color:       #287DCF;
	--button-icon-background-color:  #fefefe;

	/* 付箋 */
	--dl-note-color:                 var(--text-black-color);
	--dl-note-background-color:      hsl(0, 0%, 96%);
	--dl-note-border-color:          hsl(300, 48%, 32%);
	--dl-note-dt-color:              var(--text-white-color);
	--dl-note-dt-background-color:   hsl(300, 48%, 32%);
	--dl-tip-color:                  #006D10;
	--dl-tip-background-color:       hsl(153, 99%, 96%);
	--dl-tip-border-color:           hsl(153, 99%, 29%);
	--dl-tip-dt-color:               var(--text-white-color);
	--dl-tip-dt-background-color:    hsl(153, 99%, 29%);
	--dl-info-color:                 #003B73;
	--dl-info-background-color:      hsl(210, 99%, 96%);
	--dl-info-border-color:          hsl(210, 99%, 31%);
	--dl-info-dt-color:              var(--text-white-color);
	--dl-info-dt-background-color:   hsl(210, 99%, 31%);
	--dl-warning-color:              #B46D01;
	--dl-warning-background-color:   hsl(36, 98%, 96%);
	--dl-warning-border-color:       hsl(36, 98%, 51%);
	--dl-warning-dt-color:           var(--text-white-color);
	--dl-warning-dt-background-color:hsl(36, 98%, 51%);
	--dl-caution-color:              #A60026;
	--dl-caution-background-color:   hsl(344, 100%, 96%);
	--dl-caution-border-color:       hsl(344, 100%, 45%);
	--dl-caution-dt-color:           var(--text-white-color);
	--dl-caution-dt-background-color:hsl(344, 100%, 45%);
	--dl-primary-color:                        var(--text-black-color);
	--dl-primary-background-color:             hsl(0, 0%, 96%);
	--dl-primary-border-color:                 var(--primary-color);
	--dl-primary-dt-color:                     var(--text-white-color);
	--dl-primary-dt-background-color:          var(--primary-color);
	--dl-primary-variant-color:                var(--text-black-color);
	--dl-primary-variant-background-color:     hsl(0, 0%, 96%);
	--dl-primary-variant-border-color:         var(--primary-variant-color);
	--dl-primary-variant-dt-color:             var(--text-white-color);
	--dl-primary-variant-dt-background-color:  var(--primary-variant-color);
	--dl-secondary-color:                      var(--text-black-color);
	--dl-secondary-background-color:           hsl(0, 0%, 96%);
	--dl-secondary-border-color:               var(--secondary-color);
	--dl-secondary-dt-color:                   var(--text-white-color);
	--dl-secondary-dt-background-color:        var(--secondary-color);
	--dl-secondary-variant-color:              var(--text-black-color);
	--dl-secondary-variant-background-color:   hsl(0, 0%, 96%);
	--dl-secondary-variant-border-color:       var(--secondary-variant-color);
	--dl-secondary-variant-dt-color:           var(--text-white-color);
	--dl-secondary-variant-dt-background-color:var(--secondary-variant-color);

	/* ナビゲーション・メニュー */
	--nav-background-color:             #ccc;
	--nav-link-color:                   var(--text-link-color);
	--nav-link-background-color:        #f2f2f2;
	--nav-link-visited-color:           var(--text-link-visited-color);
	--nav-link-visited-background-color:#f2f2f2;
	--nav-link-hover-color:             var(--text-link-hover-color);
	--nav-link-hover-background-color:  #e8e8e8;
	--nav-link-active-color:            #ffffff;
	--nav-link-active-background-color: var(--text-link-hover-color);

	/* カード */
	--card-text-color:                  var(--main-text-color);
	--card-background-color:            var(--main-background-color);

	/* 検索 */
	--search-box-color:            var(--main-text-color);
	--search-box-background-color: var(--main-background-color);
	--search-result-divider-color: var(--border-color);
	--search-result-url-color:     #006621;
	--search-result-highlight-color: var(--code-color);
	--search-result-highlight-background-color: var(--code-background-color);

	/* ツリー */
	--tree-line-width: 0.125em; /* 2px */
	--tree-line-color: #ccc;

	/* キーボード・ボタン kbd */
	--kbd-color: #d0d0d0;
	--kbd-background-color: #202020;
	--kbd-border-color: #000000;

	/* メニューバーアイテム samp.button */
	--menu-bar-item-color: #202020;
	--menu-bar-item-background-color: #e0e0e0;
	--menu-bar-item-border-color: #606060;

	/* ブログ */
	--blog-index-card-background-color: #ffffff;
	--blog-index-card-color: var(--text-black-color);
	--blog-index-card-category-background-color: var(--primary-color);
	--blog-index-card-category-color: var(--text-white-color);
	--blog-index-card-date-color: #808080;

	--blog-pager-button-background-color: #ffffff;
	--blog-pager-button-color: #aaaaaa;
	--blog-pager-button-current-background-color: var(--primary-color);
	--blog-pager-button-current-color: var(--text-white-color);
	--blog-pager-button-hover-background-color: color-mix(in srgb, var(--blog-pager-button-current-background-color), white);
	--blog-pager-button-hover-color: var(--blog-pager-button-current-color);
	--blog-pager-arrow-color: #aaaaaa;
	--blog-pager-arrow-hover-color: #287DCF;

	--blog-post-header-category-background-color: var(--primary-color);
	--blog-post-header-category-color: var(--text-white-color);
	--blog-post-header-category-hover-background-color: color-mix(in srgb, var(--blog-post-header-category-background-color), white 25%);
	--blog-post-header-category-hover-color: var(--text-white-color);
	--blog-post-header-title-color: var(--text-black-color);
	--blog-post-pager-button-background-color: #39739d;
	--blog-post-pager-button-color: var(--text-white-color);
	--blog-post-pager-button-hover-background-color: #ef4e00;
	--blog-post-pager-button-hover-color: var(--text-white-color);

	--blog-post-related-date-color: #808080;
}
