/* 色定義 */
:root {
--color-main: #141B4D;
--color-accent: #AF272F;
--color-bg: #e8e8ed;
--color-bg-pickup: #e8e8ed;
--color-text-low: #222;
--color-text-high: #fff;
--color-btn: #141B4D;
--color-btn-text: #fff;
}

/*
ブログ設定の「カラー設定」をカスタムプロパティとして指定しています。
必要に応じ、適宜変更してください。
↓カラー設定の名称→カスタムプロパティ名↓
メイン→　--color-main
アクセント→　--color-accent
ボックス背景→　--color-bg
ピックアップ背景→　--color-bg-pickup
テキスト（基本）→　--color-text-low
テキスト（反転）→　--color-text-high
ボタン→　--color-btn
ボタンテキスト→　--color-btn-text
*/

/* 全体共通 */
body {
	color: var(--color-text-low);
	background-color: #fff;
}

/* メインタイトル下線 */
.service-title {
	border-image: linear-gradient(to right, var(--color-main), 70%, var(--color-accent)) 1;
}

/* 著者情報背景（1カラム時） */
.usecase {
	background-color: var(--color-bg);
}
/* 著者情報、一覧カード背景 */
.usecase .usecase-card .usecase-card-link {
	background-color: #fff;
}
/* 著者情報タイトル背景 */
.usecase .usecase-card .usecase-card-headline {
	color: var(--color-text-high);
	background: -webkit-gradient(linear, left top, right top, from(var(--color-main)), to(var(--color-accent)));
	background: linear-gradient(to right, var(--color-main), 70%, var(--color-accent))
}

/* 本文エリア背景 */
.feature {
	background-color: #fff;
}

/* CTAエリア背景 */
.contact {
	background: var(--color-bg);
}
/* CTAエリアテキスト */
.contact .contact-message {
	color: var(--color-main);
}
/* CTAエリアボタン */
.btn-inquiry {
	background-color: var(--color-btn);
	color: var(--color-btn-text);
}

/* ピックアップエリア背景 */
.col-sub .subcontents-inner {
	background-color: var(--color-bg-pickup);
}
/* カテゴリタグ */
.entry-category span {
	background-color: var(--color-main);
	color: var(--color-text-high);
}

/* 2column調整用 */
.col-2 .usecase {
	background-color: #fff;
}
.col-2 .usecase .usecase-card .usecase-card-link {
	background-color: var(--color-bg);
}

/* ヘッダー表示調整用 */
#header.show {
	background: rgba(255,255,255,0.95);
	box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
#header.show .header_logo .logo_bk {
	opacity: 1;
}
#header.show .header_logo .logo_wh {
	display: none;
}
#header.show .header_navi .navi_list li a {
	color: #000;
}