@charset "UTF-8";

/*!
 * C&C — Keni80 Child / accent color layer
 * cos_store#31
 *
 * ------------------------------------------------------------------
 * このファイルだけが最後に読まれる
 * ------------------------------------------------------------------
 * 実測のロード順（keni/common/keni-setup.php:255-280）:
 *
 *   1. keni80-child/style.css
 *   2. keni80_.../base.css
 *   3. keni80_.../advanced.css
 *   4. keni80-child/base.css
 *   5. keni80-child/advanced.css
 *   6. keni80_.../default-style.css   ← ティール #05a5ab / #00858a の出所
 *   7. keni80-child/default-style.css ← このファイル
 *
 * つまり 6 が持つセレクタは 4/5 では上書きできない。
 * 親 default-style.css のセレクタ一覧を 1:1 でなぞり、
 * ブランドトークン（base.css の :root）に貼り替えるのがこのファイルの役割。
 * !important は使わない。順序だけで勝つ。
 *
 * ------------------------------------------------------------------
 * 前提条件（重要）
 * ------------------------------------------------------------------
 * 6 と 7 は keni_get_customize_color_css() が空のときだけ enqueue される。
 * 賢威の「サイトカラー設定」で色を設定すると 6/7 の両方が読み込まれなくなり、
 * インラインの keni_customized_css が斜めストライプごと復活する。
 * → 賢威のサイトカラー設定は空のままにしておくこと。
 */


/*
# =================================================================
# 1. テーマの基本色（.color01 - .color06）
# =================================================================
*/

.color01 { color: var(--cc-brand-700); }
.color02 { color: var(--cc-brand-600); }
.color03 { color: var(--cc-brand-300); }
.color04 { color: var(--cc-brand-100); }
.color05 { color: var(--cc-brand-50); }
.color06 { color: var(--cc-brand-100); }

q {
	background: var(--cc-tint);
}

a:hover,
a:active,
a:focus {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 2. 斜めストライプの退役
# ---------------------------------------------------------------
# linear-gradient(-45deg, #fff 25%, #05a5ab 25% ...) を 4px タイルで
# 敷く装飾。ヘッダー・h1・アーカイブタイトル・item-box02・contact-box・
# cast-box_sub_title・voice_styl03 で使われている。
# サイトの年代を最も強く感じさせる要素なので全て外す。
# =================================================================
*/

.keni-header_wrap,
.archive_title,
.item-box02,
.contact-box,
.widget .cast-box_sub .cast-box_sub_title,
.voice_styl03,
.box_style01,
.cast-box {
	background-image: none;
}

.keni-header_wrap {
	background-color: var(--cc-surface);
}

.archive_title {
	background-color: transparent;
}


/*
# =================================================================
# 3. ヘッダー / パンくず
# =================================================================
*/

.keni-header_cont .header-mail .btn_header {
	color: var(--cc-accent-ink);
}

.site-title > a span {
	color: var(--cc-accent-ink);
}

.keni-breadcrumb-list li a:hover,
.keni-breadcrumb-list li a:active,
.keni-breadcrumb-list li a:focus {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 4. 見出しのリンク色
# =================================================================
*/

.keni-section h1 a:hover,
.keni-section h1 a:active,
.keni-section h1 a:focus,
.keni-section h3 a:hover,
.keni-section h3 a:active,
.keni-section h3 a:focus,
.keni-section h4 a:hover,
.keni-section h4 a:active,
.keni-section h4 a:focus,
.keni-section h5 a:hover,
.keni-section h5 a:active,
.keni-section h5 a:focus,
.keni-section h6 a:hover,
.keni-section h6 a:active,
.keni-section h6 a:focus {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 5. サブコンテンツの見出し
# ---------------------------------------------------------------
# 親は background: #333。ブランドと無関係な黒なので外す。
# 実際の見た目（罫線 + アクセントバー）は advanced.css 側。
# =================================================================
*/

.keni-section .sub-section_title {
	background: transparent;
	color: var(--cc-ink);
}


/*
# =================================================================
# 6. ボタン
# =================================================================
*/

.btn_style01 {
	border-color: var(--cc-line-2);
	background-color: transparent;
	color: var(--cc-accent-ink);
}

.btn_style02 {
	border-color: var(--cc-line-2);
	background-color: var(--cc-tint);
	color: var(--cc-accent-ink);
}

.btn_style03 {
	background: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

.entry-list .entry_title a:hover,
.entry-list .entry_title a:active,
.entry-list .entry_title a:focus {
	color: var(--cc-accent-ink);
}

.ently_read-more .btn {
	border-color: var(--cc-line-2);
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 7. 記事内パーツ
# =================================================================
*/

.profile-box {
	background-color: var(--cc-tint);
}

.advance-billing-box_next-title {
	color: var(--cc-accent-ink);
}

/* ステップチャート — 濃度で段階を示す */
.step-chart li:nth-child(2) {
	background-color: var(--cc-brand-100);
}

.step-chart_style01 li:nth-child(2)::after,
.step-chart_style02 li:nth-child(2)::after {
	border-top-color: var(--cc-brand-100);
}

.step-chart li:nth-child(3) {
	background-color: var(--cc-brand-300);
}

.step-chart_style01 li:nth-child(3)::after,
.step-chart_style02 li:nth-child(3)::after {
	border-top-color: var(--cc-brand-300);
}

.step-chart li:nth-child(4) {
	background-color: var(--cc-brand-600);
}

.step-chart_style01 li:nth-child(4)::after,
.step-chart_style02 li:nth-child(4)::after {
	border-top-color: var(--cc-brand-600);
}

/* 目次 */
.toc-area_inner .toc-area_list > li::before {
	background: var(--cc-accent-fill);
}

.toc_title {
	color: var(--cc-ink);
}

/* リスト / 定義リスト / アコーディオン */
.list_style02 li::before {
	background: var(--cc-accent);
}

.dl_style02 dt {
	background: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

.dl_style02 dd {
	background: var(--cc-tint);
	color: var(--cc-ink);
}

.accordion-list dt {
	background: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

/* レビュー / 商品ボックス */
.ranking-list .review_desc_title {
	color: var(--cc-accent-ink);
}

.review_desc {
	background-color: var(--cc-tint);
}

.item-box .item-box_title {
	color: var(--cc-accent-ink);
}

.item-box02 .item-box_inner {
	background-color: var(--cc-tint);
}

.item-box02 .item-box_title,
.item-box03 .item-box_title {
	background-color: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

.box_style01 .box_inner,
.box_style03,
.box_style06 {
	background-color: var(--cc-tint);
	color: var(--cc-ink);
}

/* 話者 / 吹き出し / 声 */
.cast-box .cast_name,
.cast-box_sub .cast_name {
	color: var(--cc-accent-ink);
}

.voice_styl02 {
	background-color: var(--cc-tint);
}

.voice_styl03 {
	background-color: var(--cc-tint);
}

.voice-box .voice_title {
	color: var(--cc-accent-ink);
}

.chat_style02 .bubble {
	background-color: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

.chat_style02 .bubble .bubble_in {
	border-color: var(--cc-accent-fill);
}

.related-entry-list .related-entry_title a:hover,
.related-entry-list .related-entry_title a:active,
.related-entry-list .related-entry_title a:focus {
	color: var(--cc-accent-ink);
}

.interval01 span,
.interval02 span {
	background-color: var(--cc-accent);
}

.commentary-box .commentary-box_title {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 8. ページャ
# =================================================================
*/

.page-nav .current,
.page-nav li a:hover,
.page-nav li a:active,
.page-nav li a:focus {
	background: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

.page-nav .page-nav_prev a:hover::before,
.page-nav .page-nav_prev a:active::before,
.page-nav .page-nav_prev a:focus::before,
.page-nav .page-nav_next a:hover::after,
.page-nav .page-nav_next a:active::after,
.page-nav .page-nav_next a:focus::after {
	color: var(--cc-on-accent);
}


/*
# =================================================================
# 9. カレンダー / フォーム / お問い合わせ
# =================================================================
*/

.calendar tfoot td a:hover,
.calendar tfoot td a:active,
.calendar tfoot td a:focus {
	color: var(--cc-accent-ink);
}

.form-mailmaga .form-mailmaga_title,
.form-login .form-login_title,
.form-login-item .form-login_title {
	color: var(--cc-accent-ink);
}

.contact-box {
	background-color: var(--cc-tint);
	border-radius: var(--cc-r-panel);
	overflow: hidden;
}

.contact-box_inner {
	background-color: var(--cc-tint);
}

.contact-box .contact-box-title {
	background-color: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

.contact-box_tel {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 10. タグクラウド / ウィジェットのリンク
# =================================================================
*/

.tagcloud a::before {
	color: var(--cc-accent);
}

.widget_recent_entries ul li a:hover,
.widget_recent_entries ul li a:active,
.widget_recent_entries ul li a:focus,
.widget_archive > ul li a:hover,
.widget_archive > ul li a:active,
.widget_archive > ul li a:focus,
.widget_categories > ul li a:hover,
.widget_categories > ul li a:active,
.widget_categories > ul li a:focus,
.widget_nav_menu .keni-section ul li a:hover,
.widget_nav_menu .keni-section ul li a:active,
.widget_nav_menu .keni-section ul li a:focus,
.widget_recent_entries_img .list_widget_recent_entries_img
	.widget_recent_entries_img_entry_title a:hover,
.widget_recent_entries_img .list_widget_recent_entries_img
	.widget_recent_entries_img_entry_title a:active,
.widget_recent_entries_img .list_widget_recent_entries_img
	.widget_recent_entries_img_entry_title a:focus,
.keni-link-card_title a:hover,
.keni-link-card_title a:active,
.keni-link-card_title a:focus {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 11. デスクトップ
# =================================================================
*/

@media (min-width: 768px) {

	.step-chart_style02 li:nth-child(2)::after {
		border-left-color: var(--cc-brand-100);
	}

	.step-chart_style02 li:nth-child(3)::after {
		border-left-color: var(--cc-brand-300);
	}

	.step-chart_style02 li:nth-child(4)::after {
		border-left-color: var(--cc-brand-600);
	}

	.col1 .contact-box_tel {
		color: var(--cc-accent-ink);
	}
}

@media (min-width: 920px) {

	.contact-box_tel {
		color: var(--cc-accent-ink);
	}
}