@charset "UTF-8";

/*
 * Chapix の色とロゴ。
 *
 * 出典は画面設計のワイヤーフレーム（設計書/画面設計/*.html）の :root。
 * 変数名もそちらに合わせてある。ワイヤーフレームの CSS をほぼそのまま
 * 移植できるようにするためなので、独自の名前に置き換えないこと。
 *
 * 画面のレイアウトはここに書かない。各画面を実装するときに、対応する
 * ワイヤーフレームから移植する。
 *
 * ロゴの意匠は「アークC」。C の弧が Chapter、交差する X が Transformation と
 * 「メンバーとビジターが出会う点」を表す。2本の線を同じ太さにするのは
 * どちらが主役でもない対等な出会いを示すためで、太さを変えないこと。
 */

:root {
	/* ===== ブランド ===== */
	/* 主色。紺＝変革（DX 文脈） */
	--navy: #0C447C;
	/* サイドバーなど、面で敷く濃紺。主ボタンの hover にも使う */
	--navy-d: #08325C;
	/* 補助。選択中の項目、フォーカスリング */
	--navy-l: #378ADD;
	/* 差し色。琥珀＝ゲストを迎える灯り */
	--amber: #EF9F27;
	/* 琥珀ボタンの hover */
	--amber-d: #DE9018;
	/* 琥珀の上に載せる文字。琥珀に白文字はコントラストが足りない */
	--amber-ink: #412402;
	/* 琥珀の淡色。注意書きの地 */
	--amber-bg: #FDF2DF;

	/* ===== 文字と面 ===== */
	--ink: #2C2C2A;
	--card: #fff;
	/* 淡い青。選択中の行やタブの地 */
	--tint: #EAF1F9;

	/* ===== 状態 ===== */
	/*
	 * 警告・必須バッジ。ワイヤーフレーム全画面がこの赤を使っている。
	 * ロゴの「赤系を使わない」はブランドの配色に対する指定であって、
	 * UI の警告色までは含まない。
	 */
	--warn: #B3261E;
	--warn-bg: #FCEEEC;
	--ok: #1D7A4F;
	--ok-bg: #E9F4EE;

	/* ===== 既定は管理画面（M-xx / H-xx） ===== */
	--mute: #6E7681;
	--line: #E4E8EE;
	--bg: #F5F7FA;

	/*
	 * 管理画面の中にビジター由来の情報を出すときの地色。
	 * 公開画面と同じベージュにして、扱いが違うことを示す（H-05 で使用）
	 */
	--cream: #F1EFE8;
	--cream-line: #DCD9CE;

	/* ===== レイアウト ===== */
	/* サイドバーの幅 */
	--sb: 224px;

	/* ===== フォント ===== */
	--font-base: "Zen Kaku Gothic New", system-ui, "Hiragino Kaku Gothic ProN",
		"Yu Gothic UI", Meiryo, sans-serif;
	/* 数字とワードマーク。等幅数字にして桁を揃える */
	--font-num: "Jost", "Century Gothic", Futura, "Avenir Next", sans-serif;
}

/*
 * 公開画面（V-xx）。ビジターが見る画面はベージュ地にする。
 * body に付けて使う。
 *
 * 管理画面より文字を大きく、行間を広く、角丸を大きく取る。
 * 利用者が 40〜60代の経営者・個人事業主で、スマートフォンからの
 * 申込が中心になるため。
 */
.public {
	--mute: #6B6A66;
	--line: #DCD9CE;
	--bg: #F1EFE8;
}

/* 数字は桁を揃える。金額・人数の一覧で行がずれないように */
.num {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
}

/* ===== ロゴのロックアップ ===== */

.chapix-logo {
	display: flex;
	align-items: center;
	gap: 16px;
}

.chapix-logo__mark {
	width: 56px;
	height: 56px;
	flex: none;
}

.chapix-logo__divider {
	width: 1px;
	align-self: stretch;
	margin: 4px 0;
	background: rgba(44, 44, 42, .2);
}

.chapix-logo__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* 小文字で組む。大文字にしないこと */
.chapix-logo__word {
	font-family: var(--font-num);
	font-size: 38px;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--navy);
	text-transform: lowercase;
}

/* x だけ琥珀。ここが名前の由来（Chapter + Transformation）を示す */
.chapix-logo__x {
	color: var(--amber);
}

.chapix-logo__kana {
	font-family: var(--font-base);
	font-size: 13px;
	letter-spacing: .3em;
	line-height: 1;
	color: var(--ink);
	/* letter-spacing は最後の字の後ろにも入る。その分を戻して中央に見せる */
	margin-right: -.3em;
}

/* 縦組み。狭い画面や、上下に余白の取れる画面で使う */
.chapix-logo--stacked {
	flex-direction: column;
	gap: 16px;
}

.chapix-logo--stacked .chapix-logo__divider {
	display: none;
}

.chapix-logo--stacked .chapix-logo__text {
	align-items: center;
}

/* 濃色の背景に置く場合。マークは logo-symbol-light.svg に差し替えること */
.chapix-logo--light .chapix-logo__word,
.chapix-logo--light .chapix-logo__kana {
	color: #fff;
}

.chapix-logo--light .chapix-logo__x {
	color: var(--amber);
}

.chapix-logo--light .chapix-logo__divider {
	background: rgba(255, 255, 255, .25);
}