@charset "UTF-8";
/*
Theme Name: RACE DAY JAPAN child
Template: swell
Description: RACE DAY JAPAN（ハイロックス完走ガイド）用の SWELL 子テーマ
Version: 1.0.0
*/

/* =========================================================
   デザイントークン
   HYROXのブランドカラー（黒×黄）は商標上あえて踏襲しない。
   独自の配色（チャコール×オレンジ）で非公式メディアであることを視覚的にも分ける。
   ========================================================= */
:root {
	--hx-ink:      #16191d;  /* 本文・見出し */
	--hx-ink-sub:  #5a636d;  /* 注釈 */
	--hx-accent:   #e2551f;  /* アクセント（CTA・強調） */
	--hx-accent-d: #b93f12;  /* アクセント濃（hover） */
	--hx-line:     #dfe3e8;  /* 罫線 */
	--hx-bg-sub:   #f4f6f8;  /* 面の背景 */
	--hx-warn-bg:  #fff6ed;  /* 注意ブロック背景 */
	--hx-warn-br:  #f0a875;  /* 注意ブロック罫 */
}

body,
.post_content {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	color: var(--hx-ink);
}

/* =========================================================
   見出し
   SWELLの既定h2はアクセント色の塗り帯。中にアクセント色の文字を置くと
   同色で消えるため、装飾ごと打ち消して自前の設計に差し替える。
   .post_content h2 は詳細度(0,1,1)あるので、要素セレクタ込みで書かないと負ける。
   ========================================================= */
.post_content h2 {
	background: none;
	color: var(--hx-ink);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.45;
	margin: 3em 0 1em;
	padding: 0 0 .5em;
	border: none;
	border-bottom: 3px solid var(--hx-accent);
}
.post_content h2::before,
.post_content h2::after { content: none; }

.post_content h3 {
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 2.4em 0 .8em;
	padding-left: .6em;
	border: none;
	border-left: 4px solid var(--hx-accent);
}
.post_content h3::before,
.post_content h3::after { content: none; }

.post_content h4 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 2em 0 .6em;
	border: none;
}

/* =========================================================
   本文
   スマホで読む前提。行間を広めに取る。
   ========================================================= */
.post_content p {
	line-height: 1.95;
	margin: 0 0 1.5em;
}
.post_content a {
	color: var(--hx-accent-d);
	text-underline-offset: .2em;
}
.post_content a:hover { color: var(--hx-accent); }

.post_content ul,
.post_content ol { margin: 0 0 1.8em; line-height: 1.9; }
.post_content li { margin-bottom: .5em; }

/* =========================================================
   表
   種目の重量表・タイム表が主役。スマホでは横スクロールさせる。
   ========================================================= */
.post_content .wp-block-table { margin: 2em 0; }
.post_content .wp-block-table table {
	font-size: .94rem;
	border-collapse: collapse;
	width: 100%;
}
.post_content .wp-block-table th,
.post_content .wp-block-table td {
	padding: .7em .8em;
	border: 1px solid var(--hx-line);
	text-align: left;
	vertical-align: top;
}
.post_content .wp-block-table th {
	background: var(--hx-ink);
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}
.post_content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--hx-bg-sub);
}
@media (max-width: 599px) {
	.post_content .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.post_content .wp-block-table table { min-width: 34rem; }
}

/* =========================================================
   引用（注意書き・画像プレースホルダに使っている）
   ========================================================= */
.post_content .wp-block-quote {
	background: var(--hx-warn-bg);
	border: none;
	border-left: 4px solid var(--hx-warn-br);
	border-radius: 0 4px 4px 0;
	margin: 2em 0;
	padding: 1.2em 1.3em;
	font-style: normal;
}
.post_content .wp-block-quote p { margin-bottom: .6em; font-size: .95rem; }
.post_content .wp-block-quote p:last-child { margin-bottom: 0; }
.post_content .wp-block-quote::before { content: none; }

/* =========================================================
   図解（content/figures/*.svg を本文にインライン展開したもの）
   SVGなので拡大しても文字が潰れない。幅は本文に合わせて伸縮させる。
   ========================================================= */
.post_content .p-fig {
	margin: 2.4em 0;
	padding: 1.4em 1.2em 1.1em;
	background: #fff;
	border: 1px solid var(--hx-line);
	border-radius: 8px;
}
.post_content .p-fig svg {
	display: block;
	width: 100%;
	height: auto;
}
.post_content .p-fig figcaption {
	margin-top: .9em;
	padding-top: .8em;
	border-top: 1px solid var(--hx-line);
	color: var(--hx-ink-sub);
	font-size: .84rem;
	line-height: 1.7;
	text-align: left;
}

/* =========================================================
   YouTube埋め込み（{{YT:}}）
   16:9 を aspect-ratio で保つ。iframe は遅延読み込み。
   ========================================================= */
.post_content .p-video {
	margin: 2.4em 0;
}
.post_content .p-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--hx-bg-sub);
	border-radius: 8px;
	overflow: hidden;
}
.post_content .p-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.post_content .p-video figcaption {
	margin-top: .7em;
	color: var(--hx-ink-sub);
	font-size: .84rem;
	line-height: 1.7;
	text-align: left;
}

/* =========================================================
   Amazonリンク（[名前](amazon:検索語)）
   広告リンクだと一目で分かるよう、行末に小さく「Amazon」を添える。
   ========================================================= */
.post_content a.p-amazonLink::after {
	content: "Amazon";
	display: inline-block;
	margin-left: .4em;
	padding: .05em .45em;
	border: 1px solid #f0a875;
	border-radius: 3px;
	background: #fff6ed;
	color: #8a4b12;
	font-size: .72em;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: .12em;
	text-decoration: none;
}

/* =========================================================
   黄色マーカー
   SWELLの .mark_yellow を使う。色変数が未設定でも効くよう既定色を持たせる。
   ========================================================= */
:root { --color_mark_yellow: #fff06e; }
.post_content .mark_yellow strong { font-weight: 700; }

/* =========================================================
   更新日バッジ（functions.php が本文先頭に差し込む）
   日程・料金を扱うサイトなので「いつ時点か」を常に見せる。
   ========================================================= */
.post_content .p-updated {
	display: inline-block;
	margin: 0 0 1.8em;
	padding: .3em .8em;
	background: var(--hx-bg-sub);
	border-radius: 999px;
	color: var(--hx-ink-sub);
	font-size: .82rem;
	font-weight: 500;
}

/* =========================================================
   区切り線
   ========================================================= */
.post_content .wp-block-separator {
	max-width: 100%;
	margin: 3em auto;
	border: none;
	border-top: 1px solid var(--hx-line);
}

/* =========================================================
   トップの非公式表示
   サイト名が「RACE DAY JAPAN」で主催者サイトと誤認されうるため、
   本文中の注記より一段強く、独立したブロックとして見せる。
   ========================================================= */
.post_content p.p-unofficial {
	background: var(--hx-warn-bg);
	border: 1px solid var(--hx-warn-br);
	border-radius: 6px;
	padding: 1em 1.2em;
	font-size: .92rem;
	line-height: 1.85;
}
.post_content p.p-unofficial strong { color: var(--hx-accent-d); }

/* =========================================================
   全ページ共通のフッター注記（非公式であることの明示）
   ========================================================= */
.p-siteNotice {
	background: var(--hx-ink);
	color: #b9c1ca;
	padding: 1.6em 1.2em;
}
.p-siteNotice p {
	max-width: 46rem;
	margin: 0 auto;
	font-size: .78rem;
	line-height: 1.85;
}

/* =========================================================
   一覧（アーカイブ）
   ========================================================= */
.p-postList__title { font-weight: 700; line-height: 1.5; }
.p-postList__excerpt { color: var(--hx-ink-sub); }

/* =========================================================
   アクセシビリティ: コントラストを確保する
   SWELL既定の薄いグレーは基準を割るので置き換える。
   ========================================================= */
.c-postTimes,
.p-postList__meta,
.c-metaText { color: var(--hx-ink-sub); }