/* =========================================================
 * SocioLabo Forum - style.css
 *  - モバイル優先
 *  - 日本語向け読みやすいレイアウト
 *  - body.dark-theme を付けるとダークモード
 * ======================================================= */

/* ------------------------------
   ベースの色・フォント (ライトモード)
   ------------------------------ */
:root {
	--color-bg: #f5f5f8;
	--color-bg-elevated: #ffffff;
	--color-bg-soft: #edeff5;
	--color-border-subtle: #dde1ee;
	
	--color-text-main: #1f2430;
	--color-text-sub: #5a6276;
	--color-text-muted: #8b91a3;
	
	--color-accent: #2563eb;
	--color-accent-soft: rgba(37, 99, 235, 0.08);
	
	--color-status-closed: #e11d48;
	--color-danger: #e11d48;
	
	--color-note: #6b7280;
	
	--shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.12);
	--radius-lg: 18px;
	--radius-md: 12px;
	--radius-sm: 8px;
	
	--transition-fast: 0.16s ease-out;
	--transition-normal: 0.22s ease-out;
}

/* ------------------------------
   ダークモード (body.dark-theme)
   ------------------------------ */
body.dark-theme {
	--color-bg: #020617;
	--color-bg-elevated: #020617;
	--color-bg-soft: #020617;
	--color-border-subtle: #1f2937;
	
	--color-text-main: #f9fafb;
	--color-text-sub: #e5e7eb;
	--color-text-muted: #9ca3af;
	
	--color-accent: #60a5fa;
	--color-accent-soft: rgba(96, 165, 250, 0.18);
	
	--color-status-closed: #fb7185;
	--color-danger: #f97373;
	
	--shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.5);
}

/* ダークモード時のユーザー情報ダイアログの見やすさ調整 */
body.dark-theme #user-info-dialog {
	background: var(--color-bg-elevated);  /* 濃い背景 */
	color: var(--color-text-main);         /* メイン文字色（ほぼ白） */
}

body.dark-theme #user-info-dialog h1 {
	color: var(--color-text-main);
}

body.dark-theme #user-info-dialog .note,
body.dark-theme #user-info-dialog .i-tag {
	color: var(--color-text-sub);          /* 少しだけ落とした明るいグレー */
}

/* ------------------------------
   全体レイアウト
   ------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: radial-gradient(circle at top, rgba(148, 163, 184, 0.24), transparent 55%),
		var(--color-bg);
	color: var(--color-text-main);
	font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
		"Helvetica Neue", "Yu Gothic", "Meiryo", sans-serif;
	line-height: 1.6;
}

/* iOS / Android スクロール感 */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* レイアウトコンテナ */
.layout {
	min-height: 100vh;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 12px 16px;
	display: flex;
	flex-direction: column;
}

/* ------------------------------
   ヘッダー / フッター
   ------------------------------ */
header {
	padding: 16px 8px 10px;
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(12px);
	background: linear-gradient(to bottom,
		rgba(248, 250, 252, 0.94),
		rgba(248, 250, 252, 0.85),
		transparent);
}

body.dark-theme header {
	background: linear-gradient(to bottom,
		rgba(15, 23, 42, 0.96),
		rgba(15, 23, 42, 0.88),
		transparent);
}

header h1 {
	margin: 4px 0 0;
	font-family: "Outfit", "Noto Sans JP", system-ui, sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
}

input:required:invalid,
select:required:invalid,
textarea:required:invalid {
	border-color: var(--color-danger);
	/* background: #fff0f0;  ちょっと薄く色をつけるなら */
}

/* ログイン/ログアウト部分 */
.right {
	text-align: right;
}

#header p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

#header a {
	color: var(--color-accent);
	text-decoration: none;
	font-weight: 500;
}

#header a:hover {
	text-decoration: underline;
}

/* フッター */
footer {
	margin-top: auto;
	padding-top: 18px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

footer .note {
	margin: 4px 0 0;
}

/* フッターのリンク群 */
footer a {
	color: var(--color-accent);
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

/* 共通: ヘッダー／フッターを横並び＋中央揃え */
header,
footer {
	display: flex;
	flex-direction: row-reverse; /* DOM順を逆に見せる: 左にタイトル, 右にメニュー */
	align-items: center;         /* 縦方向のセンタリング → 高さが揃う */
	justify-content: space-between;
	gap: 0.5rem;
}

/* マージンを揃えて、余計なズレをなくす */
header h1,
footer p {
	margin: 0;
}

/* 右側メニューは右寄せ。header/footer内では margin-left:auto を無効化 */
header .right,
footer .right {
	margin-left: 0;      /* 以前 .right に margin-left:auto を付けていた場合の上書き */
	text-align: right;
}

/* ヘッダー右上: ダークモード / デバッグモード の間に | を表示 */
header .right a + a::before {
	content: "|";
	display: inline-block;
	margin: 0 0.5rem 0 0.5rem;  /* 左右の余白はお好みで */
	color: var(--color-text-muted);
}

/* ヘッダ右側: 「ようこそ: メール」 と 最初のリンクの間に | */
#header-logout-p span + a::before {
	content: "|";
	display: inline-block;
	margin: 0 0.5rem 0 0.5rem;
	color: var(--color-text-muted);
}

/* ヘッダ右側: ユーザー情報 と ログアウト の間にも | */
#header-logout-p a + a::before {
	content: "|";
	display: inline-block;
	margin: 0 0.5rem 0 0.5rem;
	color: var(--color-text-muted);
}

/* フッター右側: ユーザー情報 と ログアウト の間にも | */
#footer-links a + a::before {
	content: "|";
	display: inline-block;
	margin: 0 0.5rem 0 0.5rem;
	color: var(--color-text-muted);	
}

/* ------------------------------
   メインパネル
   ------------------------------ */
main {
	padding: 8px 0 24px;
}

.panel {
	width: 100%;
}

/* 1カラム前提の row */
.row {
	display: block;
}

/* カード共通 */
.container {
	max-width: 720px;
	margin: 12px auto;
	padding: 16px 18px;
	background: var(--color-bg-elevated);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	border: 1px solid rgba(148, 163, 184, 0.2);
}

/* 情報パネル */
.info-panel h1 {
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 1.2rem;
}

.info-panel h2 {
	margin: 18px 0 6px;
	font-size: 1rem;
}

.info-banner {
	max-width: 720px;
	/* 以前: margin: 10px auto 6px; */
	margin: 8px auto 2px;      /* 上・下とも少しだけ詰める */
	padding: 8px 14px;         /* 高さも軽く詰める */
	border-radius: var(--radius-md);
	background: #fef3c7;
	border: 1px solid #fbbf24;
	font-size: 0.9rem;
}

/* バナー内の段落は、下マージンをなくして余白を抑える */
.info-banner p {
	margin: 4px 0 0;           /* 上だけ少し空けて、下は0 */
}

/* バナー内の文字色を固定して、ダークモードでも見やすく */
.info-banner {
	/* 上の margin / padding / background / border に続けて… */
	color: #78350f; /* 濃いめの茶色で可読性確保 */
}

.info-banner .note {
	color: #92400e; /* 説明文は少しだけトーンを落とす */
}

/* ダークモードでも同じ配色を維持したいので、変数ではなく固定色で上書き */
body.dark-theme .info-banner {
	background: #fef3c7;
	border-color: #fbbf24;
	color: #78350f;
}

body.dark-theme .info-banner .note {
	color: #92400e;
}

/* セッションバーとの間隔も少しだけ詰める */
.session-state {
	max-width: 720px;
	/* 以前: margin: 10px auto 12px; */
	margin: 6px auto 12px;     /* 上側の余白を少し減らす */
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.session-state-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor; /* ラベル色と揃える */
}

.session-state-label {
	font-weight: 600;
}

.session-state-desc {
	opacity: 0.9;  /* ほんの少しだけ弱める */
}

/* 状態ごとの色分け */
.session-state--guest {
	background: #e5e7eb;
	color: #374151;
}

.session-state--verified {
	background: #dbeafe;
	color: #1d4ed8;
}

.session-state--profile {
	background: #dcfce7;
	color: #166534;
}

.session-state--admin {
	background: #f3e8ff;
	color: #6b21a8;
}

#page-title-bar {
	max-width: 720px;
	margin: 12px auto 8px;
	padding: 4px 4px 10px;
	background: transparent; /* カードではなく帯 */
	border-radius: 0;
	box-shadow: none;
	border: none;
	border-bottom: 1px solid var(--color-border-subtle);
}

/* タイトル文字 */
#page-title-text {
	position: relative;
	padding-left: 0.6rem;
}

#page-title-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2rem;
	bottom: 0.2rem;
	width: 3px;
	border-radius: 999px;
	background: var(--color-accent);
}

/* サブタイトル */
#page-title-sub {
	margin: 2px 0 0;
	font-size: 0.8rem;          /* note よりほんの少し小さめ or 同程度 */
	color: var(--color-text-muted);
}

/* ------------------------------
   テキスト共通
   ------------------------------ */
h1, h2, h3 {
	font-family: "Outfit", "Noto Sans JP", system-ui, sans-serif;
	line-height: 1.35;
}

h1 {
	font-size: 1.2rem;
}

h2 {
	font-size: 1.05rem;
}

p {
	margin: 0 0 0.7em;
}

a {
	color: var(--color-accent);
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration: underline;
}

/* 小さめの注釈テキスト */
/* 補足説明テキスト */
.note {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.note-small {
	font-size: 0.75rem;
}

/* エラーメッセージなど */
.red {
	color: var(--color-danger);
}

/* ステータス表示 (終了しました) */
.status {
	font-size: 0.9rem;
	color: var(--color-status-closed);
	font-weight: 600;
}

/* ------------------------------
   イベント情報部分
   ------------------------------ */
#event-info-section {
	margin-top: 8px;
}

#event-series {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

#event-title {
	font-size: 1.15rem;
	font-weight: 700;
}

#event-about {
	margin-top: 6px;
}

#event-datetime {
	margin-top: 4px;
	font-size: 0.9rem;
	color: var(--color-text-sub);
}

#event-slide-info a {
	font-weight: 500;
}

/* ------------------------------
   トピックスリスト
   ------------------------------ */
#topics-body-panel ul {
	list-style: none;
	padding-left: 0;
	margin: 4px 0 0;
}

/* 各イベント行を横並びで整形 */
#topics-body-panel li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	padding: 8px 10px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-subtle);
	background: radial-gradient(circle at top left,
		var(--color-accent-soft),
		transparent 70%);
	margin-bottom: 6px;
}

/* トピック一覧（参加予定 / 最新 / 過去）のリスト全体 */
#related-topics-list,
#hot-topics-list,
#cold-topics-list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

/* 各イベント行 */
#related-topics-list li,
#hot-topics-list li,
#cold-topics-list li {
	padding: 0.6rem 0.25rem;
	border-bottom: 1px solid var(--color-border-subtle);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.4rem;
}

.ev-item-date {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-right: 0.5rem;
}

.ev-item-series {
	font-size: 0.78rem;
	color: var(--color-text-muted);
	margin-right: 0.25rem;
}

.ev-item-misc {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.notify-empty {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	font-style: italic;
}

/* 同意事項ブロック：上に少し余白をあける */
.ev-tiny {
	margin-top: 1.4rem;              /* ← ここでフォーム本体との間にスペースを確保 */
}

/* 同意事項の行を小さめ＆控えめに */
.ev-tiny p {
	margin: 0;
	font-size: 0.75rem;              /* 少し小さめの文字 */
	color: var(--color-text-muted);  /* var(--sl-...) → var(--color-...) に修正済み前提 */
}


/* ------------------------------
   フォーム周り (describe / welcome 共通)
   ------------------------------ */
/* request / feedback 見出しまわりの余白を少し広げる */
#jr-form-block-p > h1,
#fb-form-block-p > h1,
#wc-jr-head > h1,
#wc-fb-head > h1 {
	margin-top: 1.4rem;   /* 上にゆったり目の余白 */
	margin-bottom: 0.6rem; /* 下は少しだけ余白 */
}

#event-view-feedback-note {
	margin-top: 12px;
}

form {
	margin-top: 4px;
}

/* 1問ごとのブロック */
.q-item {
	margin: 10px 0 12px;
}

/* ラベル */
/* 変更前
.q-text-input-tag {
	font-size: 0.9rem;
	font-weight: 500;
	}
	*/

/* 変更後：welcome-label も同じ見た目にする */
.q-text-input-tag,
.welcome-label {
	font-size: 0.9rem;
	font-weight: 500;
	display: inline-block;
	margin-bottom: 4px;
}

/* 入力欄 (テキスト) */
/* 変更前
.q-text-input-field,
.q-inputs,
textarea {
	width: 100%;
	max-width: 100%;
	font-size: 0.95rem;
	font-family: inherit;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-soft);
	color: var(--color-text-main);
	outline: none;
	transition: border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		background-color var(--transition-fast);
		}
		*/

/* 変更後：welcome-input も同じ箱に入れる */
.q-text-input-field,
.q-inputs,
textarea,
.welcome-input {
	width: 100%;
	max-width: 100%;
	font-size: 0.95rem;
	font-family: inherit;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-soft);
	color: var(--color-text-main);
	outline: none;
	transition: border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		background-color var(--transition-fast);
}

/* フォーカス時 */
/* 変更前
.q-text-input-field:focus,
.q-inputs:focus,
textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px var(--color-accent-soft);
	background: #ffffff1a;
	}
	*/

/* 変更後：welcome-input も同じフォーカスに */
.q-text-input-field:focus,
.q-inputs:focus,
textarea:focus,
.welcome-input:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px var(--color-accent-soft);
	background: #ffffff1a;
}

/* テキストエリア */
textarea {
	min-height: 90px;
	resize: vertical;
}

/* チェックボックス */
.q-checkbox-label {
	font-size: 0.9rem;
	color: var(--color-text-sub);
}

.q-checkbox-input {
	margin-right: 6px;
}

/* welcome ブロック全体 */
#welcome-part {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--color-border-subtle);
}

/* 文言とフィールドのまとまり */
#welcome-knock-p {
	margin-top: 4px;
}

/* 上の説明文 */
.welcome-note p {
	margin: 0 0 0.8em;
	font-size: 0.85rem;
	color: var(--color-text-sub);
}

/* フィールド全体のブロック感（q-item に合わせる） */
.welcome-field {
	margin-top: 6px;
}

/* 下の補足（すでに note-small が入っているので軽く調整） */
.welcome-help {
	margin-top: 4px;
}

/* ------------------------------
   ボタン
   ------------------------------ */
button {
	font-family: inherit;
	border: none;
	cursor: pointer;
	transition: transform 0.06s ease-out,
		box-shadow 0.12s ease-out,
		background-color 0.12s ease-out;
}

/* プライマリボタン */
.button-primary {
	padding: 7px 18px;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #2563eb, #4f46e5);
	box-shadow: 0 6px 15px rgba(37, 99, 235, 0.45);
}

.button-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.55);
}

.button-primary:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);
}

/* セカンダリボタン */
.button-secondary {
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	background: transparent;
	border: 1px solid var(--color-border-subtle);
	color: var(--color-text-sub);
}

.button-secondary:hover {
	background: rgba(148, 163, 184, 0.12);
}

.button-secondary:active {
	background: rgba(148, 163, 184, 0.2);
}

/* ボタン無効状態 */
button:disabled {
	opacity: 0.55;
	cursor: default;
	box-shadow: none;
}

/* ボタン配置 */
.ev-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 4px;
}

/* welcome 用の小さめボタン */
.small-btn {
	font-size: 0.85rem;
	padding: 6px 14px;
}

/* すでにあるが、念のため welcome 用としてもいい感じの余白に */
#welcome-knock-actions-p {
	margin-top: 1.6rem;  /* ちょっと詰めてもいいなら 1.4〜1.6rem あたり */
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 左寄せ用のフレックス配置 */
.put-left {
	display: flex;
	justify-content: flex-start; /* 左寄せ */
	align-items: center;
	gap: 12px;
}

/* 中央寄せ用（ダイアログなどは引き続きこちら） */
.put-center {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

/*
  フィードバック表示用
  */

/* フィードバック一覧ダイアログ本体 */
#view-feedback-dialog {
	max-width: min(90vw, 640px);
}

/* 一覧部分をスクロール可能にする */
.feedback-list {
	margin-top: 10px;
	max-height: 60vh;
	overflow-y: auto;
	padding-right: 4px; /* スクロールバー分の余白 */
}

/* NPS 表示 */
.feedback-nps {
	margin: 4px 0 10px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* 各フィードバックカード */
.feedback-item {
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-subtle);
	background: radial-gradient(
		circle at top left,
		var(--color-accent-soft),
		transparent 70%
		);
}

/* 本文 */
.feedback-item-text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* 状態メッセージ（0件 / 未投稿 / エラーなど） */
.feedback-message {
	margin: 10px 0;
	font-size: 0.85rem;
	text-align: center;
	color: var(--color-text-muted);
}

/* 0件・コメントなし */
.feedback-message--empty {
	font-style: italic;
}

/* ローディング */
.feedback-message--loading {
	font-style: italic;
	opacity: 0.85;
}

/* エラー */
.feedback-message--error {
	color: var(--color-danger);
}

/* 通常のお知らせ（未投稿など） */
.feedback-message--note {
	/* デフォルト色そのままで OK */
}

/* ------------------------------
   メッセージダイアログ / ユーザー情報ダイアログ
   ------------------------------ */
dialog {
	border: none;
	padding: 0;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	max-width: min(90vw, 520px);
	background: var(--color-bg-elevated);
}

/* 共通 container をダイアログにも適用 */
dialog.container {
	margin: auto;
}

/* ダイアログの中のレイアウト */
#message-dialog > div:first-child {
	margin-bottom: 12px;
}

/* メッセージダイアログ本体 */
#message-dialog {
	background: var(--color-bg-elevated);
	color: var(--color-text-main);
	border: 1px solid var(--color-border-subtle);
	box-shadow: var(--shadow-soft);
}

/* ダイアログのタイトル＆本文が readable になるように */
#message-dialog h1 {
	margin-top: 0;
	font-size: 1.1rem;
}

#message-area {
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ダイアログの背後のオーバーレイ */
#message-dialog::backdrop {
	background: rgba(15, 23, 42, 0.35); /* うっすら暗く */
}

/* backdrop */
dialog::backdrop {
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(4px);
}

/* スピナー */
.spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid var(--color-border-subtle);
	border-top-color: var(--color-accent);
	margin: 10px auto;
	animation: spin 0.85s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ユーザー情報のラベル */
.i-tag {
	display: inline-block;
	min-width: 7em;
	font-size: 0.9rem;
	color: var(--color-text-sub);
}

/* ------------------------------
   デバッグエリア
   ------------------------------ */
.hidden-note {
	margin-top: 12px;
}

.debug-note {
	font-size: 0.8rem;
	background: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	border: 1px dashed var(--color-border-subtle);
	padding: 12px;
	max-height: 260px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
	
	overflow-y: auto;
}

.debug-note h2 {
	margin-top: 0;
	margin-bottom: 6px;
	font-size: 0.9rem;
}

.debug-note ul {
	padding-left: 16px;
	margin: 4px 0 10px;
}

/*
 * 管理者用
 */

.admin-badge {
	margin-left: 0.4rem;
	padding: 0 0.4rem;
	font-size: 0.7rem;
	border-radius: 999px;
	background: #f97316;
	color: #fff;
}

.button-admin {
	border-color: #6b21a8;
	color: #6b21a8;
	background: rgba(107, 33, 168, 0.06);
	font-weight: 600;
}

.text-admin {
	color: #6b21a8;
	background: rgba(107, 33, 168, 0.06);
	font-weight: 300;	
}

/* 小さな「管理者」バッジ */
.admin-chip {
	margin-left: 0.4rem;
	padding: 0 0.5rem;
	font-size: 0.7rem;
	border-radius: 999px;
	background: #6b21a8;
	color: #fff;
}

body.dark-theme .button-admin {
	border-color: #a855f7;
	color: #e9d5ff;
	background: rgba(147, 51, 234, 0.22);
}

/* ------------------------------
   汎用ユーティリティ
   ------------------------------ */

/* .hide で表示/非表示を切り替え */
.hide {
	display: none !important;
}

/* スマホ〜タブレット向け余白調整 */
@media (max-width: 599px) {
	.layout {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.container {
		padding: 14px 14px;
		border-radius: 14px;
	}
	
	#event-title {
		font-size: 1.05rem;
	}
	
	.ev-item-date {
		flex-basis: 100%;
	}
	
	.ev-item-title {
		flex-basis: 100%;
	}
	
	.ev-item-misc,
	.ev-item-notes {
		font-size: 0.8rem;
	}
	
	.ev-actions.put-center {
		justify-content: center;
	}
}

/* タブレット以上で少し余裕を持たせる */
@media (min-width: 900px) {
	header {
		padding-top: 18px;
	}
	
	.container {
		padding: 20px 22px;
	}
	
	#topics-body-panel {
		padding-top: 20px;
	}
}