/* @DX のヘッダー・注目キーワードの帯・フッターの配色（THE THOR の黒を上書きする）
   classfox.co.jp の深緑（#001a15・#002d26）からブランドのティール（#004d40・#00695c）へ流れるグラデーションに、
   ミント（#5eead4）の淡い光と、ミント→シアンの細い線を重ねて「AIで進化する」印象を出す。
   「設定 > @DX 導線」の「ヘッダー・フッターを DX・AX の配色にする」を外すと、元の黒に戻る。 */

:root {
	--atdx-ink-deepest: #000f0c;
	--atdx-ink-deeper: #001a15;
	--atdx-ink-deep: #002d26;
	--atdx-teal: #004d40;
	--atdx-teal-light: #00695c;
	--atdx-mint: #5eead4;
	--atdx-cyan: #38bdf8;
	--atdx-accent-line: linear-gradient(90deg, rgba(94, 234, 212, 0) 0%, #5eead4 25%, #38bdf8 60%, rgba(56, 189, 248, 0) 100%);
}

/* ヘッダー（スクロールしたときに上に付く複製も同じ） */
.l-header,
.t-headerColor .l-header {
	background:
		radial-gradient(640px 180px at 88% -40%, rgba(94, 234, 212, 0.28), rgba(94, 234, 212, 0) 70%),
		radial-gradient(420px 140px at 8% 140%, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0) 70%),
		linear-gradient(100deg, var(--atdx-ink-deeper) 0%, var(--atdx-ink-deep) 38%, var(--atdx-teal) 74%, var(--atdx-teal-light) 100%) !important;
}

.l-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--atdx-accent-line);
	pointer-events: none;
}

/* グローバルメニューの右端のぼかし（もとは黒） */
.t-headerColor .globalNavi::before {
	background: linear-gradient(to right, rgba(0, 105, 92, 0), var(--atdx-teal-light)) !important;
}

.globalNavi .menu-item > a:hover {
	color: var(--atdx-mint);
}

/* 注目キーワードの帯 */
.searchHead {
	background: linear-gradient(90deg, var(--atdx-ink-deepest) 0%, var(--atdx-ink-deeper) 55%, var(--atdx-ink-deep) 100%) !important;
}

.searchHead .searchHead__title {
	background: rgba(94, 234, 212, 0.14) !important;
	color: var(--atdx-mint) !important;
	box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.45);
}

.searchHead .searchHead__keywordItem a {
	color: rgba(255, 255, 255, 0.88);
}

.searchHead .searchHead__keywordItem a:hover {
	color: var(--atdx-mint);
}

/* フッター */
.bottomFooter {
	position: relative;
	background:
		radial-gradient(720px 220px at 12% 120%, rgba(94, 234, 212, 0.18), rgba(94, 234, 212, 0) 70%),
		radial-gradient(520px 180px at 92% -20%, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0) 70%),
		linear-gradient(160deg, var(--atdx-ink-deep) 0%, var(--atdx-ink-deeper) 55%, var(--atdx-ink-deepest) 100%) !important;
}

.bottomFooter::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--atdx-accent-line);
	pointer-events: none;
}

.bottomFooter .bottomFooter__list a {
	color: rgba(255, 255, 255, 0.9);
}

.bottomFooter .bottomFooter__list a:hover {
	color: var(--atdx-mint);
}

.bottomFooter .bottomFooter__copyright {
	color: rgba(255, 255, 255, 0.62);
}

/* サイドバーのウィジェットの見出し（もとは黒）：ヘッダーと同じ深緑→ティールのグラデーション */
.widget-side .heading.heading-widget,
.widget-side .heading.heading-widgetsimple,
.widget-side .heading.heading-widgetsimplewide,
.widget-side .heading.heading-widgetwide {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(260px 80px at 100% -20%, rgba(94, 234, 212, 0.26), rgba(94, 234, 212, 0) 70%),
		linear-gradient(100deg, var(--atdx-ink-deeper) 0%, var(--atdx-ink-deep) 45%, var(--atdx-teal) 85%, var(--atdx-teal-light) 100%) !important;
	color: #fff !important;
}

.widget-side .heading.heading-widgetbottom::before,
.widget-side .heading.heading-widgetborder,
.widget-side .heading.heading-widgetborder::before,
.widget-side .heading.heading-widgetborder::after {
	border-color: var(--atdx-teal) !important;
}

/* サイドバーのカテゴリー一覧・メニュー（もとは灰色）：深緑の行、ミントの印、ホバーでティール */
.widget.widget_categories ul,
.widget.widget_nav_menu ul.menu {
	border-color: rgba(0, 45, 38, 0.2) !important;
}

.widget.widget_categories ul li,
.widget.widget_nav_menu ul.menu li {
	border-color: #0b4a40 !important;
}

.widget.widget_categories ul li a,
.widget.widget_nav_menu ul.menu li a {
	background: var(--atdx-ink-deep) !important;
	color: #fff !important;
	transition: background-color 0.15s ease;
}

.widget.widget_categories ul li a::before,
.widget.widget_nav_menu ul.menu li a::before {
	color: var(--atdx-mint) !important;
}

.widget.widget_categories ul li a:hover,
.widget.widget_categories ul .current-menu-item > a,
.widget.widget_nav_menu ul.menu li a:hover,
.widget.widget_nav_menu ul.menu .current-menu-item > a {
	background: var(--atdx-teal) !important;
	color: #fff !important;
}

.atdx-catwidget .atdx-catwidget__sub {
	color: var(--atdx-teal);
}

@media (prefers-reduced-motion: reduce) {
	.widget.widget_categories ul li a,
	.widget.widget_nav_menu ul.menu li a {
		transition: none;
	}
}