/**
 * サイト全体の見た目調整（SWELLの上にかぶせる層）
 *
 *  1. トップの飾り（メインビジュアル・投稿スライダー）を畳んで、数字を最初に見せる
 *  2. ヘッダー／サイドバー／フッターをブランド色に寄せる
 *  3. 記事本文と一覧の余白を詰めて、情報密度を「毎日更新している人のサイト」に近づける
 *
 * 色はデータ表示側（fxswap.css）と同じ値を使う。
 * こちらは .fx-block の外にも効かせる必要があるため :root に置いている。
 */

:root {
	--fx-navy:      #2b3358;
	--fx-navy-deep: #1f2547;
	--fx-orange:    #f08a1e;
	--fx-orange-dp: #d9700c;
	--fx-cream:     #fdf7ea;
	--fx-cream-dp:  #f7ecd6;
	--fx-line:      #e2d9c6;
	--fx-muted:     #7b7264;
	--fx-round: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Meiryo", sans-serif;
}

/* ============================================================
 *  1. トップの飾りを畳む
 * ============================================================ */

/* SWELL初期のメインビジュアル（「さぁ、始めよう。」の写真）。
   カスタマイザー側でも「表示しない」に倒しているが、
   テーマ更新で設定が戻っても数字が押し下げられないようここでも止める。 */
.p-mainVisual,
.p-mainVisual__slide,
.p-mainVisual__textLayer {
	display: none !important;
}

/* 記事7本を横に流すだけのスライダー。
   同じ導線をサイドバーとトップ下部に置いたため役割が重複していた。 */
.home .p-postSlider {
	display: none !important;
}

/* 飾りが無くなったぶん、ヘッダー直下の空きを詰める */
.home .l-content {
	margin-top: 0;
	padding-top: 1.6em;
}

/* ============================================================
 *  2. ヘッダー
 * ============================================================ */

/* サイト名が「かつをのFXスワップ比較 / ラボ」と2行に折れて間延びしていた */
.c-headLogo,
.c-headLogo.-txt {
	font-family: var(--fx-round);
	font-size: 20px;
	line-height: 1.3;
	white-space: nowrap;
	letter-spacing: .01em;
	color: var(--fx-navy-deep);
}

.c-headLogo a { color: inherit; }

/* 上部の帯（キャッチコピー）をブランド色に */
.l-header__bar {
	background: var(--fx-navy) !important;
	color: #fff;
}

.l-header__bar .c-catchphrase,
.l-header__bar a { color: #fff !important; }

.l-header__bar .c-catchphrase {
	font-size: 12.5px;
	letter-spacing: .02em;
}

/* グローバルメニュー：現在地とホバーをオレンジで示す */
.c-gnav > li > a {
	font-family: var(--fx-round);
	font-size: 14.5px;
}

.c-gnav > li > a::after {
	background: var(--fx-orange) !important;
}

.c-gnav > li.current-menu-item > a,
.c-gnav > li.current_page_item > a {
	color: var(--fx-orange-dp) !important;
}

/* ============================================================
 *  2.5 見出し（サイト共通）
 *
 *  データページ・記事・/guide/ で見出しの見た目が割れていた。
 *  データ側だけ fxswap.css で色帯にしていたが、あちらは
 *  ショートコードを出したページでしか読み込まれないため、
 *  記事ではSWELL既定の見出しが出てしまい別サイトのように見えた。
 *  全ページで読む chrome.css に一本化する。
 * ============================================================ */

.post_content h2 {
	position: relative;
	margin: 2.2em 0 .9em;
	padding: .5em .8em .5em 1em;
	background: var(--fx-navy);
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-family: var(--fx-round);
	font-size: 1.18em;
	font-weight: 700;
	line-height: 1.5;
}

/* SWELLが既定の見出し装飾に使う擬似要素を無効化してから、こちらのアクセントを置く */
.post_content h2::after {
	content: none;
	display: none;
}

.post_content h2::before {
	content: "";
	position: absolute;
	left: .38em;
	top: .8em;
	bottom: .8em;
	width: 4px;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 2px;
	background: var(--fx-orange);
}

.post_content h3 {
	position: relative;
	margin: 1.8em 0 .7em;
	padding: 0 0 .3em .55em;
	background: none;
	border: 0;
	border-bottom: 2px solid var(--fx-line);
	border-left: 5px solid var(--fx-orange);
	border-radius: 0;
	color: var(--fx-navy-deep);
	font-family: var(--fx-round);
	font-size: 1.06em;
	font-weight: 700;
}

.post_content h3::before,
.post_content h3::after {
	content: none;
	display: none;
}

/* カード内の見出しは帯にしない */
.fx-card h2,
.fx-card h3,
.fx-hero h2 {
	margin: 0 0 .15em;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--fx-navy-deep);
	font-size: 1.03em;
	line-height: 1.45;
}

.fx-card h2::before,
.fx-card h3::before { content: none; }

/* ============================================================
 *  3. 先頭の名乗り（[fxswap_hero]）
 * ============================================================ */

.fx-hero {
	display: flex;
	align-items: center;
	gap: 1.2em;
	margin: 0 0 1.4em;
	padding: 1.15em 1.3em;
	background: linear-gradient(100deg, var(--fx-navy) 0%, var(--fx-navy-deep) 100%);
	border-radius: 12px;
	color: #fff;
}

.fx-hero__main { flex: 1 1 auto; min-width: 0; }

.fx-hero__title {
	margin: 0;
	font-family: var(--fx-round);
	font-size: 1.32em;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
}

.fx-hero__title em {
	font-style: normal;
	color: #ffc07a;
	border-bottom: 3px solid var(--fx-orange);
	padding-bottom: .05em;
}

.fx-hero__lead {
	margin: .55em 0 0;
	font-size: .87em;
	line-height: 1.75;
	color: #ccd2e6;
}

.fx-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: .9em 0 0;
	padding: 0;
	list-style: none;
}

.fx-hero__facts li {
	display: flex;
	align-items: baseline;
	gap: .35em;
	margin: 0;
	padding: .28em .8em;
	background: rgba(255, 255, 255, .1);
	border-radius: 999px;
	font-size: .8em;
	line-height: 1.4;
}

.fx-hero__facts strong {
	font-size: 1.35em;
	font-weight: 700;
	color: #ffc07a;
	font-variant-numeric: tabular-nums;
}

.fx-hero__icon {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fx-cream);
	border: 3px solid rgba(255, 255, 255, .35);
}

.fx-hero__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
 *  4. トップ下部の記事導線をカードにする
 * ============================================================ */

/* SWELLが .post_content ul に付ける字下げより後勝ちにするため、
   セレクタをこちらのほうを詳しくしてある */
.post_content ul.fx-readnext,
.fx-readnext {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: .7em;
	margin: 0 0 1.2em;
	padding-left: 0;
	list-style: none;
}

.post_content ul.fx-readnext li,
.fx-readnext li {
	margin: 0;
	padding-left: 0;
}

.post_content ul.fx-readnext li::before { content: none; }

.fx-readnext a {
	display: block;
	height: 100%;
	padding: .8em 1em;
	background: #fff;
	border: 1px solid var(--fx-line);
	border-left: 5px solid var(--fx-orange);
	border-radius: 8px;
	color: var(--fx-navy-deep);
	text-decoration: none;
	transition: background .12s, transform .12s;
}

.fx-readnext a:hover {
	background: var(--fx-cream);
	transform: translateY(-1px);
	color: var(--fx-navy-deep);
}

.fx-readnext b {
	display: block;
	font-family: var(--fx-round);
	font-size: .98em;
	font-weight: 700;
	line-height: 1.55;
}

.fx-readnext span {
	display: block;
	margin: .3em 0 0;
	font-size: .82em;
	line-height: 1.7;
	color: var(--fx-muted);
}

/* ============================================================
 *  5. サイドバー
 * ============================================================ */

/* 自作ウィジェットが自前で枠を持っているので、テーマ側の余白は消す */
.l-sidebar .c-widget { margin-bottom: 0; }
.l-sidebar .c-widget + .c-widget { margin-top: 0; }
.l-sidebar { font-size: 14px; }

/* ============================================================
 *  6. 記事・一覧の密度
 * ============================================================ */

.p-articleThumb,
.l-articleBottom { margin-top: 1.6em; }

/* 記事一覧（/guide/）のカードを詰める */
.p-postList__title {
	font-family: var(--fx-round);
	line-height: 1.55;
}

/* フッターメニューをブランド色に寄せる */
.l-footer { background: var(--fx-cream); }
.l-footer a { color: var(--fx-navy-deep); }
.l-footer a:hover { color: var(--fx-orange-dp); }

/* ============================================================
 *  7. モバイル
 * ============================================================ */

@media (max-width: 782px) {

	.fx-hero {
		gap: .9em;
		padding: 1em 1.05em;
	}

	.fx-hero__title { font-size: 1.12em; }
	.fx-hero__lead { font-size: .84em; }

	.fx-hero__icon {
		flex-basis: 60px;
		width: 60px;
		height: 60px;
		border-width: 2px;
	}

	.c-headLogo,
	.c-headLogo.-txt { font-size: 16px; }
}