/* =========================================================
   Como Japan Event Theme - Base styles
   現行サイト(comojapan-tokyo.com)のメインカラーである水色
   (#02AEDF)を基調に、淡いブルー系の背景を組み合わせています。
   旧ネイビー×ゴールドの配色から、現行サイトと同じ「水色1色を
   アクセントにする」配色へ統一しました(2026-09-16変更)。
   ========================================================= */

:root {
	--c-bg: #ffffff;
	--c-surface: #eaf6fb;
	--c-surface-alt: #d9ebf0;
	--c-border: #cbe3ec;
	--c-text: #222222;
	--c-text-muted: #6b6b6b;

	/* 見出し・タイトル用の濃色テキスト(現行サイトの本文色に合わせた黒に近いグレー) */
	--c-heading: #1a1a1a;

	/* 現行サイトのメインカラー(水色)。旧ネイビー(#16233f)から変更。
	   変数名はnavyのままだが、値は水色に統一している。 */
	--c-navy: #02aedf;
	--c-navy-2: #0293c2;
	--c-accent: #02aedf;
	--c-accent-dark: #0293c2;
	--c-line: #06c755;

	--c-status-ongoing-bg: #e6f4ea;
	--c-status-ongoing-fg: #1e7e34;
	--c-status-upcoming-bg: #e3f6fc;
	--c-status-upcoming-fg: #0284a8;
	--c-status-ended-bg: #f1f1f1;
	--c-status-ended-fg: #767676;

	--c-required-bg: #fdeceb;
	--c-required-fg: #c0392b;
	--c-optional-bg: #eef1f4;
	--c-optional-fg: #667085;

	--radius-s: 6px;
	--radius-m: 12px;
	--radius-l: 18px;
	--shadow-card: 0 2px 14px rgba(22, 35, 63, 0.08);
	--shadow-modal: 0 12px 40px rgba(22, 35, 63, 0.25);
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	line-height: 1.7;
	font-size: 15px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--c-accent);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.container {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 20px;
}

.site-main {
	padding-bottom: 64px;
}

.page-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--c-heading);
	margin: 28px 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--c-navy);
}

.page-breadcrumb {
	padding: 14px 20px;
	font-size: 12px;
	color: var(--c-text-muted);
	display: flex;
	gap: 8px;
	align-items: center;
}
.page-breadcrumb a {
	color: var(--c-text-muted);
}

.page-content__placeholder {
	color: var(--c-text-muted);
	background: var(--c-surface);
	border: 1px dashed var(--c-border);
	border-radius: var(--radius-m);
	padding: 24px;
}

/* ボタン共通 */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--c-navy);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.btn-primary:hover {
	background: var(--c-accent-dark);
	text-decoration: none;
}
.btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 必須/任意バッジ */
.badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
	padding: 2px 6px;
	margin-left: 6px;
	vertical-align: middle;
}
.badge--required {
	background: var(--c-required-bg);
	color: var(--c-required-fg);
}
.badge--optional {
	background: var(--c-optional-bg);
	color: var(--c-optional-fg);
}

/* ページトップボタン */
.page-top-btn {
	position: fixed;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: var(--c-accent);
	color: #fff;
	border-radius: var(--radius-s);
	padding: 8px 10px;
	font-size: 9px;
	font-weight: 700;
	z-index: 40;
	box-shadow: var(--shadow-card);
}
.page-top-btn:hover {
	text-decoration: none;
	background: var(--c-accent-dark);
}

/*
 * イベント詳細ページには右下に大きな固定申込みボタン(.booking-fab)があるため、
 * 画面幅にかかわらず、PAGE TOPボタンをその上に重ならない位置までずらす。
 * (body側の has-booking-fab クラスは single-event.php 表示時に付与される。
 *  inc/template-helpers.php の cje_add_body_classes を参照)
 */
body.has-booking-fab .page-top-btn {
	bottom: 128px;
}