/* 色定義 */
:root {
--color-main: #17c5d2;
--color-accent: #ffb134;
--color-bg: #f4f8f8;
--color-bg-pickup: #f4f8f8;
--color-text-low: #222;
--color-text-high: #fff;
--color-btn: #ffb134;
--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-color: var(--color-accent);
}

/* 著者情報背景（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: var(--color-main);
}

/* 本文エリア背景 */
.feature {
	background-color: #fff
}

/* 本文のh1 */
.entry-content h1 {
	border-bottom: 3px solid #ffb134; /* 下線の色 */
	padding-bottom: 8px;            /* 文字と線の間隔 */
}

/* 本文のh2 */
.entry-content h2 {
	border-bottom: 3px solid #ffb134; /* 下線の色 */
	padding-bottom: 8px;            /* 文字と線の間隔 */
}

/* CTAエリア背景 */
.contact {
	background: var(--color-bg);
}
/* CTAエリアテキスト */
.contact .contact-message {
	color: var(--color-main);
}
/* CTAエリアボタン */
.btn-inquiry {
	background-color: var(--color-btn);
	color: #ffb134;
}

/* ピックアップエリア背景 */
.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);
}