@charset "UTF-8";

/* =====================================================================
 * 塚の台町内会 独自スタイル
 * ショートコード出力(.tsukanodai-wrap 配下)と役員ポータル(.site-header等)
 * の両方に適用される。Cocoon側のグローバルCSSと衝突しないよう、
 * クラス名は全て固有のプレフィックス相当(card/btn/field等は.tsukanodai-wrap
 * または officer 系コンテナの内側でのみ使われる想定)。
 * ===================================================================== */

:root {
	--tsk-ink: #1c2420;
	--tsk-ink-muted: #66716b;
	--tsk-ink-faint: #98a19c;
	--tsk-line: #e2e6e2;
	--tsk-line-strong: #ccd2cc;
	--tsk-surface: #ffffff;
	--tsk-surface-sunken: #f3f5f2;
	--tsk-bg: #f7f8f6;
	--tsk-accent: #2f7d63;
	--tsk-accent-strong: #1f5c48;
	--tsk-accent-soft: #e5f2ec;
	--tsk-accent-softer: #f1f8f4;
	--tsk-warn: #c17a3a;
	--tsk-warn-soft: #fbf0e4;
	--tsk-crit: #b3453f;
	--tsk-crit-soft: #fbeceb;
	--tsk-ok: #2f7d63;
	--tsk-ok-soft: #e5f2ec;
	/* 余白の基準(4pxの倍数。8ptグリッド)。新しい余白は、なるべくこの段階から選ぶ */
	--tsk-sp-1: 4px;
	--tsk-sp-2: 8px;
	--tsk-sp-3: 12px;
	--tsk-sp-4: 16px;
	--tsk-sp-5: 24px;
	--tsk-sp-6: 32px;
	--tsk-radius-sm: 8px;
	--tsk-radius: 14px;
	--tsk-radius-lg: 18px;
	--tsk-shadow-sm: 0 1px 2px rgba(20, 30, 25, .05);
	--tsk-shadow: 0 2px 6px rgba(20, 30, 25, .06), 0 12px 28px -16px rgba(20, 30, 25, .18);
	--tsk-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
}

.tsukanodai-wrap,
.officer-shell {
	font-family: var(--tsk-font);
	color: var(--tsk-ink);
	line-height: 1.85;
	font-size: 15.5px;
	-webkit-font-smoothing: antialiased;
}

.tsukanodai-wrap * ,
.officer-shell * {
	box-sizing: border-box;
}

/* <button>は<a>と違い、書体・余白をページから引き継がず、ブラウザ標準の見た目
   (特にiOS Safariは、角丸の「ボタンらしい」見た目を独自に足してくる)になる。
   そのため、同じ .msg-mini でも <a class="msg-mini">編集</a> と
   <button class="msg-mini msg-mini--danger">削除</button> の大きさが揃わない
   不具合が起きていた。個別のボタンクラスごとに直すのではなく、ここでボタン
   全体に「ページの書体を引き継ぐ・標準の見た目を消す」を当てておく
   (font-size/line-heightなど、大きさに関わる指定は各クラス側が個別に持つので、
   ここでは上書きしない)。 */
.tsukanodai-wrap button,
.officer-shell button {
	font-family: inherit;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* :not(.btn):not(.btn--hall-cta):not(.msg-mini) … ボタン風リンク(<a class="btn">等)
   には、このリンク用の色・下線ルールを当てない。当ててしまうと、ボタン自体の
   :hover(背景を緑に塗る)と衝突し、ホバー時に文字が薄い緑+下線という
   読みにくい見た目になってしまう(実際に発生した不具合)。.msg-miniも同様に、
   このルールの方がクラス数が多く詳細度で勝ってしまい、白文字のはずが緑文字に
   なってしまっていたため除外した。 */
.tsukanodai-wrap a:not(.btn):not(.btn--hall-cta):not(.msg-mini),
.officer-shell a:not(.btn):not(.btn--hall-cta):not(.msg-mini) {
	color: var(--tsk-accent-strong);
	text-decoration: none;
	transition: color .15s ease, text-decoration .15s ease;
}
.tsukanodai-wrap a:hover:not(.btn):not(.btn--hall-cta):not(.msg-mini),
.officer-shell a:hover:not(.btn):not(.btn--hall-cta):not(.msg-mini) {
	color: var(--tsk-accent);
	text-decoration: none;
}
/* ホバー時に下線は出さない(色の変化だけで示す)。Cocoon側の下線ルールにも負けないよう全リンクに当てる */
.tsukanodai-wrap a:hover,
.officer-shell a:hover {
	text-decoration: none;
}

.tsukanodai-wrap h1,
.officer-shell h1 {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: .01em;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--tsk-line);
	color: var(--tsk-ink);
}
.tsukanodai-wrap h2,
.officer-shell h2 { font-size: 19px; font-weight: 700; line-height: 1.5; }
.tsukanodai-wrap h3,
.officer-shell h3 { font-size: 16px; font-weight: 700; line-height: 1.5; }

/* ---- ショートコード共通ラッパー ----
   Cocoon側の「カラムなし」レイアウトで本文が画面幅いっぱいに広がるため、
   各ショートコード出力を中央寄せ+左右余白のブロックで囲んで読みやすくする。 */
.tsukanodai-wrap {
	max-width: 720px;
	margin: 0 auto 28px;
	padding: 0 24px;
}
@media (max-width: 600px) {
	.tsukanodai-wrap { padding: 0 16px; margin-bottom: 20px; }
}

/* ---- カード ---- */
.card {
	background: var(--tsk-surface);
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius);
	box-shadow: var(--tsk-shadow);
	padding: 24px;
	margin-bottom: 20px;
}

.card-title {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--tsk-accent-strong);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.card-title::before {
	content: "";
	display: none;
}
.card-title i {
	font-size: 16px;
	width: 18px;
	text-align: center;
	flex-shrink: 0;
	color: var(--tsk-accent);
}

/* 2列(幅が足りなければ1列)。各列は最低320px。以前の「2fr 1fr」は、右列の中身が1frより広くなって
   はみ出す原因になっていた。縦の間隔は、カード自身の margin-bottom に任せる。 */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: 24px; align-items: start; }

/* ---- ごみ表示 ---- */
.garbage-today {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 500px) { .garbage-today { grid-template-columns: 1fr; } }
.garbage-today__day {
	background: var(--tsk-accent-softer);
	border: 1px solid var(--tsk-accent-soft);
	border-radius: var(--tsk-radius-sm);
	padding: 18px 14px;
	text-align: center;
}
.garbage-today__label {
	font-size: 12.5px;
	color: var(--tsk-accent-strong);
	font-weight: 800;
	letter-spacing: .03em;
	margin: 0 0 10px;
}
.garbage-today__types { font-size: 18px; font-weight: 800; margin: 0; color: var(--tsk-ink); }
.garbage-today__none { color: var(--tsk-ink-faint); font-size: 14px; margin: 0; }

.garbage-rule-image {
	max-width: 100%;
	display: block;
	border-radius: var(--tsk-radius-sm);
	border: 1px solid var(--tsk-line);
	cursor: zoom-in;
	transition: opacity .15s ease;
}
.garbage-rule-image:hover { opacity: .88; }

/* ---- カウントダウン ---- */
.milestone {
	text-align: center;
	background: linear-gradient(155deg, var(--tsk-accent-strong), #16382c);
	color: #fff;
	padding: 32px 24px;
	border-radius: var(--tsk-radius);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.milestone__label { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.milestone__date {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
	letter-spacing: -.01em;
}
.milestone__date strong { font-size: 26px; display: block; margin: 8px 0; }
.milestone__countdown {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: 13px;
}
.milestone__countdown-label { margin: 0 0 4px; font-size: 12px; opacity: .8; }
.milestone__countdown-value {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}
.milestone__countdown-hours {
	font-size: 14px;
	opacity: .9;
	display: block;
	margin-top: 2px;
}

/* ---- お知らせ一覧 ---- */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li {
	padding: 16px 0;
	border-bottom: 1px solid var(--tsk-line);
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
}
.notice-list li:last-child { border-bottom: none; padding-bottom: 4px; }
.notice-list li:first-child { padding-top: 2px; }
.notice-badge {
	font-size: 11px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--tsk-accent-soft);
	color: var(--tsk-accent-strong);
	white-space: nowrap;
}
.notice-date { font-size: 12.5px; color: var(--tsk-ink-faint); font-variant-numeric: tabular-nums; }
.notice-title { color: var(--tsk-ink); text-decoration: none; font-weight: 700; }
.notice-title:hover { color: var(--tsk-accent-strong); text-decoration: none; }

/* ---- 過去記事一覧([tsukanodai_notice_list])
   スクロール中でも記事同士の境目がひと目でわかるよう、.card を流用せず
   専用のタイムライン風レイアウトにする(左に縦のガイド線+日付ドットを通し、
   カード間の余白を広めに取ることで区切りを強調する)。 ---- */
.notice-feed {
	position: relative;
	margin: 0;
	padding: 0;
}
.notice-feed::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 7px;
	width: 2px;
	background: var(--tsk-line);
}
.notice-feed-item {
	position: relative;
	background: var(--tsk-surface);
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius);
	box-shadow: var(--tsk-shadow);
	padding: 22px 22px 22px 30px;
	margin: 0 0 34px 30px;
}
.notice-feed-item:last-child { margin-bottom: 0; }
.notice-feed-item::before {
	/* タイムラインの日付ドット */
	content: "";
	position: absolute;
	top: 27px;
	left: -37px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tsk-accent);
	border: 3px solid var(--tsk-bg);
	box-shadow: 0 0 0 1px var(--tsk-accent);
}
.notice-feed-item__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.notice-feed-item__title {
	margin: 10px 0 6px;
	font-size: 18px;
}
.notice-feed-item__body {
	color: var(--tsk-ink-muted);
	line-height: 1.8;
	padding-top: 12px;
	border-top: 1px dashed var(--tsk-line);
}
.notice-feed-item__author {
	font-size: 12.5px;
	color: var(--tsk-ink-muted);
	margin: 10px 0 0;
}
@media (max-width: 480px) {
	.notice-feed::before { left: 5px; }
	.notice-feed-item { margin-left: 22px; padding-left: 20px; }
	.notice-feed-item::before { left: -29px; width: 12px; height: 12px; top: 24px; }
}

/* ---- ボット対策(ハニーポット) ----
   display:none は一部のボットに無視されるため、画面外へ飛ばして隠す方式にする。
   人間には見えず、フォーカスも当たらない(tabindex="-1"と併用)。 */
.tsukanodai-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- フォーム ---- */
form.stack { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; color: var(--tsk-ink); }
.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--tsk-line-strong);
	border-radius: var(--tsk-radius-sm);
	font-size: 15px;
	font-family: inherit;
	background: var(--tsk-surface);
	color: var(--tsk-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* 日付・時間・月の入力欄。iPhone(Safari)は、これらの欄を独自の最小幅で描画して、
   指定した幅(枠の幅)に収めず、親の枠からはみ出すことがある。
   ・appearance:none で、OS標準の見た目(と独自の最小幅)をやめ、他の入力欄と同じ扱いにする
   ・min-width:0 / max-width:100% で、親の幅を超えないようにする
   ・appearance:none にすると、iOSでは欄の高さが潰れるため、min-height を持たせる */
.field input[type="date"],
.field input[type="time"],
.field input[type="month"],
.field input[type="week"],
.field input[type="datetime-local"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 46px;
	margin: 0;
	line-height: 1.4;
	text-align: left;
}
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value,
.field input[type="month"]::-webkit-date-and-time-value,
.field input[type="week"]::-webkit-date-and-time-value,
.field input[type="datetime-local"]::-webkit-date-and-time-value {
	min-height: 1.4em;
	margin: 0;
	text-align: left;
}
.field { min-width: 0; }

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--tsk-accent);
	box-shadow: 0 0 0 4px var(--tsk-accent-soft), 0 0 0 1px var(--tsk-accent);
	background: rgba(45, 123, 99, .02);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-row > .field { min-width: 0; }
@media (max-width: 500px) { .field-row { grid-template-columns: 1fr; } }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 10px; }
.checkbox-row:last-child { margin-bottom: 0; }
.checkbox-row input { margin-top: 4px; accent-color: var(--tsk-accent); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: var(--tsk-radius-sm);
	border: 1px solid transparent;
	background: var(--tsk-accent);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: .02em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	box-shadow: 0 4px 12px -4px rgba(31, 92, 72, .5);
	transition: background .15s ease, transform .12s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
}
.btn:hover {
	background: var(--tsk-accent-strong);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -4px rgba(31, 92, 72, .65);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--tsk-accent) 40%, transparent); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* サイズ違いは幅・高さだけで表す(色・角丸・文字の太さは共通) */
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }
.btn.secondary {
	background: var(--tsk-surface-sunken);
	color: var(--tsk-ink);
	box-shadow: 0 2px 6px -2px rgba(20, 30, 25, .08);
	border: 1px solid var(--tsk-line-strong);
}
.btn.secondary:hover {
	background: var(--tsk-line);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -4px rgba(20, 30, 25, .15);
}
.btn--hall-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--tsk-radius-sm);
	border: 2px solid var(--tsk-accent-strong);
	background: #fff;
	color: var(--tsk-accent-strong);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(31, 92, 72, .2);
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
}
.btn--hall-cta:hover {
	background: var(--tsk-accent-strong);
	color: #fff;
	border-color: var(--tsk-accent-strong);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(31, 92, 72, .3);
}
.btn--hall-cta:active {
	transform: translateY(0);
}

.alert { padding: 14px 18px; border-radius: var(--tsk-radius-sm); font-size: 14px; margin-bottom: 18px; line-height: 1.6; }
.alert.success { background: var(--tsk-ok-soft); color: var(--tsk-ok); }
.alert.error { background: var(--tsk-crit-soft); color: var(--tsk-crit); }
.alert.warn { background: var(--tsk-warn-soft); color: var(--tsk-warn); }

/* ---- テーブル ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
table th, table td { padding: 12px 14px; border-bottom: 1px solid var(--tsk-line); text-align: left; }
table th { background: var(--tsk-surface-sunken); font-size: 12px; font-weight: 700; color: var(--tsk-ink-muted); letter-spacing: .02em; }
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: var(--tsk-accent-softer); }
/* Cocoonの table:not(.has-border-color) :where(th, td) { border: 1px solid ... } が、
   自前デザインの表(役員名簿・常会スケジュール・清掃当番)のセル1つ1つに枠線を足して
   きてしまい、カードの中に余計な線が入って見える不具合があった。親テーマ側に確実に
   勝つよう明示的に打ち消し、行の区切りはborder-bottomだけにする。 */
.table-stack td, .table-stack th,
.ev-table td, .ev-table th,
.roster-table td, .roster-table th { border: none !important; border-bottom: 1px solid var(--tsk-line) !important; }
.table-stack tr:last-child td, .ev-table tr:last-child td, .roster-table tr:last-child td { border-bottom: none !important; }

/* ---- 表の部品 ---- */
table th.nowrap, table td.nowrap { white-space: nowrap; }

/* 編集・削除の操作列(常会スケジュール・清掃当番の一覧)。連絡掲示板等の
   .msg-mini/.msg-mini--danger と同じ色・形に揃えている */
.row-actions { white-space: nowrap; }
.row-actions form { display: inline; margin-left: 6px; }

/* 種別のバッジ(役員掲示板のカテゴリのバッジと同じ形) */
.ev-type {
	display: inline-block; padding: 2px 10px; border-radius: 999px;
	background: var(--tsk-accent-soft); color: var(--tsk-accent-strong);
	font-size: 12px; font-weight: 800; line-height: 1.7; white-space: nowrap;
}
.ev-type--event { background: hsl(215 55% 92%); color: hsl(215 50% 32%); }
.ev-type--clean { background: var(--tsk-warn-soft); color: var(--tsk-warn); }

/* 日付タイル(カレンダーの1枚のように見せる)。PC幅の表では出さず、通常の日付表記を使う */
.ev-date { display: none; }

/* ---- スマホ幅(700px以下。役員ポータルが1カラムに切り替わる幅と同じ) ---- */
@media (max-width: 700px) {
	/* 通常の表(役員一覧・ごみカレンダー): セルの左右の余白を詰めて、内容が縦に割れにくくする */
	table th, table td { padding: var(--tsk-sp-3) var(--tsk-sp-2); }
	.roster-table th:last-child, .roster-table td:last-child { white-space: nowrap; }

	/* .table-stack: 表を横スクロールさせず、1行を1枚の「項目」として縦に積む。
	   使い方: <table class="table-stack"> にして、<td data-label="項目名"> を付ける。
	   <tr> ごとに、薄い地色の面(角丸)になる。 */
	.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.table-stack, .table-stack tbody { display: block; width: 100%; }
	.table-stack tbody { display: grid; gap: var(--tsk-sp-3); }
	.table-stack tr {
		display: block; padding: var(--tsk-sp-4);
		background: var(--tsk-surface-sunken); border-radius: var(--tsk-radius);
	}
	.table-stack tr:hover td { background: none; }
	.table-stack td { display: flex; gap: var(--tsk-sp-3); padding: 2px 0; border: none !important; overflow-wrap: anywhere; }
	.table-stack td[data-label]::before {
		content: attr(data-label); flex: 0 0 4.4em;
		font-size: 12px; font-weight: 700; color: var(--tsk-ink-muted); padding-top: .2em;
	}
	.table-stack td[colspan] { justify-content: center; color: var(--tsk-ink-muted); padding: var(--tsk-sp-2) 0; }

	/* 操作(編集・削除): 横いっぱいを半分ずつ。指で押しやすい高さ(48px)にする。
	   色は連絡掲示板等の .msg-mini(塗り緑・白文字)/.msg-mini--danger(塗り赤・白文字)と揃える */
	.table-stack .row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tsk-sp-2); margin-top: var(--tsk-sp-3); padding: 0; }
	.table-stack .row-actions form { display: block; margin: 0; }
	.table-stack .row-actions a.msg-mini {
		all: unset;
		box-sizing: border-box;
		display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 var(--tsk-sp-3);
		border-radius: var(--tsk-radius-sm);
		font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.4;
		text-decoration: none; cursor: pointer;
		background: var(--tsk-accent); border: 1px solid var(--tsk-accent); color: #fff;
		transition: background .12s ease;
	}
	.table-stack .row-actions a.msg-mini--danger { background: var(--tsk-crit); border-color: var(--tsk-crit); }
	.table-stack .row-actions a.msg-mini:active { background: var(--tsk-accent-strong); }
	.table-stack .row-actions a.msg-mini--danger:active { background: color-mix(in srgb, var(--tsk-crit) 85%, black); }

	/* .ev-table: 予定・当番の一覧。左に日付タイル、右に種別・件名・時間・場所 */
	.ev-table tr {
		display: grid; grid-template-columns: 56px minmax(0, 1fr);
		column-gap: var(--tsk-sp-4); row-gap: var(--tsk-sp-1); align-items: start;
	}
	.ev-table td { display: block; padding: 0; border: none !important; }
	.ev-table .ev-cell-date  { grid-column: 1; grid-row: 1 / span 4; }
	.ev-table .ev-cell-type  { grid-column: 2; grid-row: 1; }
	.ev-table .ev-cell-title { grid-column: 2; grid-row: 2; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--tsk-ink); margin-bottom: var(--tsk-sp-1); }
	.ev-table .ev-cell-time,
	.ev-table .ev-cell-place { grid-column: 2; display: flex; gap: var(--tsk-sp-2); align-items: baseline; font-size: 13.5px; line-height: 1.6; color: var(--tsk-ink-muted); }
	.ev-table .ev-cell-time  { grid-row: 3; }
	.ev-table .ev-cell-place { grid-row: 4; }
	.ev-table td[data-label]::before { display: none; }   /* 項目名は出さない(バッジ・アイコン・並びで分かる) */
	.ev-table td.ev-cell-time[data-label]::before,
	.ev-table td.ev-cell-place[data-label]::before {
		display: inline-block; flex: 0 0 1.1em; width: auto; padding: 0; text-align: center;
		font-family: "Font Awesome 6 Free"; font-size: 12px; font-weight: 900; color: var(--tsk-ink-faint);
	}
	.ev-table td.ev-cell-time[data-label]::before  { content: "\f017"; font-weight: 400; }
	.ev-table td.ev-cell-place[data-label]::before { content: "\f3c5"; }
	.ev-table .row-actions { grid-column: 1 / -1; grid-row: 5; }
	.ev-table td[colspan] { grid-column: 1 / -1; }

	.ev-cell-date .ev-date__full { display: none; }
	.ev-date {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		width: 56px; padding: 6px 0 7px; line-height: 1.2;
		background: var(--tsk-surface); border: 1px solid var(--tsk-line-strong); border-radius: 12px; box-shadow: var(--tsk-shadow-sm);
	}
	.ev-date b { font-style: normal; font-weight: 800; }
	.ev-date__top { font-size: 11.5px; letter-spacing: .04em; color: var(--tsk-accent-strong); }
	.ev-date__day { font-size: 24px; line-height: 1.15; color: var(--tsk-ink); font-variant-numeric: tabular-nums; }
	.ev-date__sub { font-size: 11.5px; color: var(--tsk-ink-muted); }

	/* 清掃当番: 日付タイル(年月) + 当番の組 */
	.ev-table--duty .ev-cell-year { display: none; }
	.ev-table--duty .ev-cell-date  { grid-row: 1; }
	.ev-table--duty .ev-cell-title { grid-row: 1; align-self: center; margin: 0; font-size: 22px; font-weight: 800; }
	.ev-table--duty .ev-cell-title::after { content: "当番"; margin-left: var(--tsk-sp-2); font-size: 13px; font-weight: 700; color: var(--tsk-ink-muted); }
	.ev-table--duty .row-actions { grid-row: 2; }
}

/* ---- モーダル(ごみルール画像拡大) ---- */
.img-modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 16, 12, .82);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 999;
}
.img-modal.is-open { display: flex; }
.img-modal img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.img-modal__close {
	position: absolute;
	top: 20px;
	right: 24px;
	color: #fff;
	font-size: 32px;
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1;
	opacity: .85;
}
.img-modal__close:hover { opacity: 1; }

/* ---- ごみ収集カレンダー(リッチな縦方向表) ---- */
.garbage-calendar-card { max-width: 760px; }
.garbage-calendar__header { margin-bottom: var(--tsk-sp-5); padding-bottom: var(--tsk-sp-4); border-bottom: 2px solid var(--tsk-accent-soft); }
.garbage-calendar__title { margin: 0 0 var(--tsk-sp-3); font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--tsk-ink); }
.garbage-calendar__legend { display: flex; flex-wrap: wrap; gap: var(--tsk-sp-4); margin: var(--tsk-sp-4) 0; font-size: 13px; }
.garbage-legend__item { display: flex; align-items: center; gap: 6px; color: var(--tsk-ink-muted); }
.garbage-legend__item i { font-size: 12px; }

.garbage-schedule { width: 100%; border-collapse: collapse; }
.garbage-schedule thead th {
	padding: 12px var(--tsk-sp-3);
	text-align: left;
	font-weight: 700;
	font-size: 13px;
	color: var(--tsk-ink-muted);
	border-bottom: 2px solid var(--tsk-line-strong);
	background: var(--tsk-surface-soft);
}
.garbage-schedule thead th:first-child { width: 60px; text-align: center; }
.garbage-schedule thead th:nth-child(2) { width: 50px; text-align: center; }
.garbage-schedule__row { border-bottom: 1px solid var(--tsk-line); }
.garbage-schedule__row--empty { color: var(--tsk-ink-muted); }
/* 親テーマ(Cocoon)の偶数行・奇数行の背景に負けないよう、セル側に背景を指定する */
table.garbage-schedule tbody tr > td { background: transparent; }
table.garbage-schedule tbody tr.garbage-schedule__row--saturday > td { background: rgba(59, 130, 246, .10); }
table.garbage-schedule tbody tr.garbage-schedule__row--sunday > td { background: rgba(239, 68, 68, .10); }
table.garbage-schedule tbody tr.garbage-schedule__row--today > td { border-top: 3px solid var(--tsk-accent); border-bottom: 3px solid var(--tsk-accent); font-weight: 700; }
table.garbage-schedule tbody tr.garbage-schedule__row--today > td:first-child { border-left: 3px solid var(--tsk-accent); }
table.garbage-schedule tbody tr.garbage-schedule__row--today > td:last-child { border-right: 3px solid var(--tsk-accent); }
.garbage-schedule__today-mark { display: block; margin: 2px auto 0; padding: 1px 6px; width: fit-content; border-radius: 999px; background: var(--tsk-accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.5; }

.garbage-schedule__date {
	padding: 12px var(--tsk-sp-3);
	text-align: center;
	font-weight: 700;
	font-size: 1.1rem;
}
.garbage-schedule__weekday {
	padding: 12px var(--tsk-sp-3);
	text-align: center;
	font-weight: 600;
	font-size: 13px;
}
.garbage-schedule__types { padding: 12px var(--tsk-sp-3); vertical-align: middle; }
.garbage-schedule__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.garbage-type-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--tsk-radius-sm); background: var(--garbage-color, var(--tsk-accent-soft)); color: #fff; text-align: center; line-height: 1.2; box-shadow: 0 2px 4px rgba(0,0,0,.1); white-space: nowrap; }
.garbage-schedule__empty-text { font-size: 14px; color: var(--tsk-ink-faint); }

@media (max-width: 640px) {
	.garbage-schedule { font-size: 14px; }
	.garbage-schedule thead th { padding: 10px 8px; font-size: 12px; }
	.garbage-schedule__date,
	.garbage-schedule__weekday,
	.garbage-schedule__types { padding: 10px 8px; }
	.garbage-schedule__date { font-size: 1rem; }
	.garbage-schedule__weekday { font-size: 12px; }
	.garbage-type-badge { font-size: 11px; padding: 4px 8px; }
	.garbage-schedule__badges { gap: 6px; }
}


/* =====================================================================
 * 役員ポータル(officer/ 配下)専用のヘッダー・ナビ
 * inc/layout_header.php / layout_footer.php から出力される。
 * ===================================================================== */

.site-header {
	background: var(--tsk-surface);
	border-bottom: 1px solid var(--tsk-line);
	font-family: var(--tsk-font);
}
.site-header__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 18px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.site-header__logo {
	font-size: 20px;
	font-weight: 800;
	color: var(--tsk-ink);
	text-decoration: none;
	letter-spacing: -.01em;
}
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-nav a { color: var(--tsk-ink-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.site-nav a:hover { color: var(--tsk-accent-strong); }

.site-main {
	max-width: 720px;
	margin: 36px auto;
	padding: 0 24px;
	font-family: var(--tsk-font);
	color: var(--tsk-ink);
	line-height: 1.85;
}
@media (max-width: 600px) { .site-main { padding: 0 16px; margin: 24px auto; } }

.site-footer {
	text-align: center;
	color: var(--tsk-ink-faint);
	font-size: 13px;
	padding: 36px 20px;
	font-family: var(--tsk-font);
}

/* ---- 役員ポータル ---- */
/* これまではCocoon本体のページラッパーが左右の余白を持っていたため、
   .officer-shell自体には余白の指定がなかった。Cocoon経由の表示をやめた
   ことで、この余白を自前で持つ必要がある(無いと画面端まで文字が
   びっしり付いてしまう)。 */
.officer-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1180px; margin: 0 auto; padding: var(--tsk-sp-6) var(--tsk-sp-5); }
@media (max-width: 700px) { .officer-shell { grid-template-columns: minmax(0, 1fr); } }
.officer-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--tsk-surface);
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius);
	padding: 10px;
	box-shadow: var(--tsk-shadow-sm);
	position: sticky;
	top: 20px;
}
@media (max-width: 700px) {
	/* 1カラムに崩れるスマホでは sticky を解除する。
	   sticky のままだとナビが画面上部に張り付き、スクロールした
	   コンテンツ(入力欄など)の上に覆いかぶさって隠れてしまうため。 */
	.officer-nav {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}
}
.officer-nav a {
	padding: 11px 14px;
	border-radius: var(--tsk-radius-sm);
	color: var(--tsk-ink-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: background .12s ease, color .12s ease, transform .1s ease;
}
.officer-nav a:hover {
	background: var(--tsk-accent-softer);
	color: var(--tsk-accent-strong);
	text-decoration: none;
	transform: translateX(4px);
}
.officer-nav a.is-active {
	background: var(--tsk-accent-soft);
	color: var(--tsk-accent-strong);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(31, 92, 72, .3);
}
/* スマホ用の開閉ボタン(JSが挿入する。PC幅では使わない) */
.officer-nav__toggle { display: none; }

/* ---- 役員ポータル: スマホ幅の仕上げ(700px以下。PC幅・公開ページには影響しない) ----
   基準: 余白は8ptグリッド(--tsk-sp-*)、押す場所は高さ48px以上・隣と8px以上あける、
   入力欄は16px以上(iPhoneは16px未満の入力欄に触れると、画面が勝手に拡大されるため) */
.form-actions { display: flex; gap: 10px; }
@media (max-width: 700px) {
	.officer-shell { gap: var(--tsk-sp-4); padding: var(--tsk-sp-4); }

	/* メニュー: 縦に積まず、押しやすい丸いチップを折り返して並べる(縦幅を約半分に) */
	.officer-nav { gap: var(--tsk-sp-2); padding: var(--tsk-sp-3); }
	.officer-nav a {
		display: inline-flex; align-items: center; gap: 6px;
		min-height: 40px; padding: 0 12px;
		background: var(--tsk-surface-sunken); border-radius: 999px;
		font-size: 13px;
	}
	.officer-nav a:hover { transform: none; }
	.officer-nav a.is-active { background: var(--tsk-accent-soft); box-shadow: inset 0 0 0 1.5px var(--tsk-accent); }

	/* メニュー: JSが使えるときは、現在のページ名+開閉ボタンの1行に畳み、
	   タップで縦一列のリストを開く(項目が何個でも見た目が散らからない)。
	   JSが無い場合は、上のチップ表示のまま全項目が見える */
	.js .officer-nav { gap: 2px; padding: 4px; }
	.js .officer-nav__toggle {
		display: flex; align-items: center; gap: var(--tsk-sp-3);
		width: 100%; min-height: 52px; margin: 0; padding: 0 var(--tsk-sp-3);
		border: 1px solid var(--tsk-accent); border-radius: var(--tsk-radius-sm);
		background: var(--tsk-accent-softer);
		font: inherit; font-size: 15px; font-weight: 800; color: var(--tsk-accent-strong); cursor: pointer;
	}
	.js .officer-nav__label { display: inline-flex; align-items: center; gap: 10px; }
	.js .officer-nav__label i { font-size: 16px; }
	.js .officer-nav__current { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--tsk-ink-muted); text-align: right; }
	.js .officer-nav__toggle > i { font-size: 13px; transition: transform .15s ease; }
	.js .officer-nav.is-open .officer-nav__toggle > i { transform: rotate(180deg); }
	.js .officer-nav:not(.is-open) a { display: none; }
	.js .officer-nav.is-open { padding-bottom: var(--tsk-sp-2); }
	.js .officer-nav.is-open a {
		display: flex; width: 100%; min-height: 46px; padding: 0 var(--tsk-sp-3);
		border-radius: var(--tsk-radius-sm); background: transparent; font-size: 14.5px;
	}
	.js .officer-nav.is-open a.is-active { background: var(--tsk-accent-soft); box-shadow: none; }
	.js .officer-nav.is-open .officer-nav__toggle { margin-bottom: var(--tsk-sp-1); }

	.officer-shell h1 { font-size: 22px; margin-bottom: var(--tsk-sp-4); padding-bottom: var(--tsk-sp-3); }

	/* カード: 内側の余白を24→16px、カード同士の間隔も16pxに(画面の端との余白と揃える) */
	.officer-shell .card { padding: var(--tsk-sp-4); margin-bottom: var(--tsk-sp-4); }
	.officer-shell .card-title { margin-bottom: var(--tsk-sp-3); }
	.officer-shell form.stack > .card-title { margin-bottom: 0; }

	/* フォーム */
	form.stack { gap: var(--tsk-sp-4); max-width: none; }
	.officer-shell .field label { margin-bottom: 6px; }
	.officer-shell .field input:not([type="checkbox"]):not([type="radio"]),
	.officer-shell .field select,
	.officer-shell .field textarea { min-height: 48px; padding: var(--tsk-sp-3) var(--tsk-sp-3); font-size: 16px; }
	.officer-shell .field textarea { min-height: 120px; }
	.officer-shell .field-row { gap: var(--tsk-sp-4); }

	/* ボタン: フォーム直下の主ボタンは横いっぱい。並んだボタンは半分ずつ */
	.officer-shell form .btn:not(.btn--sm) { width: 100%; }
	.officer-shell .table-stack .btn { width: auto; }
	.officer-shell .form-actions { gap: var(--tsk-sp-2); }
	.officer-shell .form-actions .btn { flex: 1; min-height: 48px; }
}

.qr-box { text-align: center; padding: 24px; background: var(--tsk-surface-sunken); border-radius: var(--tsk-radius); }
.qr-box img { max-width: 240px; border-radius: var(--tsk-radius-sm); }
.qr-box code { display: block; margin-top: 14px; font-size: 12px; word-break: break-all; color: var(--tsk-ink-muted); }

/* ---- ヒーローエリア(トップページ用) ---- */
.hero {
	background: linear-gradient(135deg, var(--tsk-accent-strong) 0%, var(--tsk-accent) 100%);
	color: #fff;
	padding: 48px 24px;
	margin: 0 0 40px;
	text-align: center;
}
.hero__inner {
	max-width: 720px;
	margin: 0 auto;
}
.hero__title {
	margin: 0 0 16px;
	font-size: 36px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.02em;
	border: none;
	padding: 0;
}
.hero__subtitle {
	display: block;
	font-size: 48px;
	margin-top: 4px;
}
.hero__desc {
	font-size: 15.5px;
	line-height: 1.8;
	margin: 20px 0 32px;
	opacity: .95;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}
.hero__features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 28px;
}
@media (max-width: 600px) {
	.hero { padding: 36px 20px; }
	.hero__title { font-size: 28px; }
	.hero__subtitle { font-size: 36px; }
	.hero__features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.hero__feature {
	background: rgba(255, 255, 255, .12);
	border-radius: var(--tsk-radius-sm);
	padding: 16px 12px;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .2);
	transition: transform .15s ease, background .15s ease;
}
.hero__feature:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .18);
}
.hero__feature-icon {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 8px;
}
.hero__feature-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}
.hero__feature-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
html { scroll-behavior: smooth; }
#section-garbage, #section-notice, #section-meeting, #section-hall { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---- ラジオボタン ---- */
.radio-row { display: flex; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 10px; }
.radio-row:last-child { margin-bottom: 0; }
.radio-row input { margin: 0; accent-color: var(--tsk-accent); }

/* ---- 清掃当番グリッド(年度分) ---- */
.cleaning-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 16px;
}
@media (max-width: 500px) {
	.cleaning-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.cleaning-month {
	background: var(--tsk-surface-sunken);
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius-sm);
	padding: 14px 12px;
	text-align: center;
}
.cleaning-month__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--tsk-accent-strong);
	margin: 0 0 6px;
}
.cleaning-month__group {
	font-size: 13px;
	color: var(--tsk-ink);
	margin: 0;
	word-break: break-word;
}
/* 過ぎた月: グレーアウトして「終わったこと」がひと目でわかるようにする */
.cleaning-month.is-past {
	background: transparent;
	border-style: dashed;
	opacity: .5;
	filter: grayscale(45%);
}
.cleaning-month.is-past .cleaning-month__label { color: var(--tsk-ink-faint); }
/* 今月: アクセントカラーで強調 */
.cleaning-month.is-current {
	background: var(--tsk-accent-softer);
	border-color: var(--tsk-accent);
	box-shadow: 0 0 0 1px var(--tsk-accent) inset;
}
.cleaning-month__now {
	display: inline-block;
	margin-left: 6px;
	font-size: 10px;
	font-weight: 800;
	color: #fff;
	background: var(--tsk-accent);
	border-radius: 999px;
	padding: 1px 7px;
	vertical-align: middle;
	letter-spacing: .02em;
}

/* ---- 集会所利用カード ---- */
.hall-cta {
	background: linear-gradient(135deg, var(--tsk-accent-soft) 0%, var(--tsk-accent-softer) 100%);
	border: 1px solid var(--tsk-accent-soft);
	padding: 28px 24px;
	border-radius: var(--tsk-radius);
	text-align: center;
}
.hall-cta__icon {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 12px;
	color: var(--tsk-accent-strong);
}
.hall-cta__title {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 10px;
	color: var(--tsk-accent-strong);
}
.hall-cta__desc {
	font-size: 14px;
	color: var(--tsk-ink);
	margin: 0 0 18px;
	line-height: 1.7;
}

/* ---- 集会所利用申請フォーム（リッチデザイン） ---- */
.hall-apply-header {
	background: linear-gradient(135deg, var(--tsk-accent-soft) 0%, var(--tsk-accent-softer) 100%);
	border: 1px solid var(--tsk-accent-soft);
	border-radius: var(--tsk-radius);
	padding: 28px 24px;
	margin-bottom: 28px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.hall-apply-header__icon {
	font-size: 48px;
	line-height: 1;
	color: var(--tsk-accent-strong);
	flex-shrink: 0;
}
.hall-apply-header__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--tsk-accent-strong);
}
.hall-apply-header__desc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--tsk-ink);
	margin: 0;
}

.hall-apply-form { max-width: 680px; }

.form-section {
	background: var(--tsk-surface);
	border: 2px solid var(--tsk-line);
	border-radius: var(--tsk-radius);
	padding: 24px;
	margin-bottom: 24px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.form-section:hover {
	border-color: var(--tsk-accent-soft);
	box-shadow: 0 0 0 3px var(--tsk-accent-softer);
}
.form-section--confirm {
	background: linear-gradient(135deg, var(--tsk-accent-softer) 0%, #fff 100%);
	border-color: var(--tsk-accent-soft);
}

.form-section__title {
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--tsk-accent);
	color: var(--tsk-accent-strong);
	display: flex;
	align-items: center;
	gap: 10px;
}
.form-section__title i {
	font-size: 18px;
}
.form-section__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tsk-accent);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
}

.field__required {
	color: var(--tsk-crit);
	font-weight: 700;
	margin-left: 2px;
}

.confirm-box {
	background: var(--tsk-surface-sunken);
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius-sm);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.confirm-box .checkbox-row:last-child {
	margin-bottom: 0;
}

.form-footer {
	text-align: center;
	margin-top: 32px;
}
.btn--large {
	min-width: 240px;
	padding: 12px 40px;
}
@media (max-width: 700px) {
	.btn--large { width: 100%; min-width: 0; }
}
.form-footer__note {
	font-size: 13px;
	color: var(--tsk-ink-muted);
	margin-top: 16px;
	line-height: 1.6;
}

/* ---- 申請成功メッセージ ---- */
.hall-apply-success {
	background: linear-gradient(135deg, var(--tsk-ok-soft) 0%, rgba(229, 242, 236, .5) 100%);
	border: 2px solid var(--tsk-ok);
	border-radius: var(--tsk-radius-lg);
	padding: 48px 32px;
	text-align: center;
	max-width: 680px;
}
.hall-apply-success__icon {
	font-size: 64px;
	line-height: 1;
	color: var(--tsk-ok);
	margin-bottom: 16px;
	animation: bounce-in .6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes bounce-in {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
.hall-apply-success__title {
	font-size: 28px;
	font-weight: 900;
	margin: 0 0 12px;
	color: var(--tsk-ok);
}
.hall-apply-success__message {
	font-size: 15px;
	line-height: 1.8;
	color: var(--tsk-ink);
	margin: 0 0 24px;
}
.hall-apply-success__message strong {
	color: var(--tsk-ok);
	font-weight: 800;
}
.hall-apply-success__details {
	background: rgba(255, 255, 255, .8);
	border-radius: var(--tsk-radius-sm);
	padding: 16px;
	margin-top: 20px;
	border: 1px solid var(--tsk-ok-soft);
}
.hall-apply-success__details p {
	margin: 6px 0;
	font-size: 14px;
	color: var(--tsk-ink);
}
.hall-apply-success__details p:first-child {
	margin-top: 0;
}
.hall-apply-success__details p:last-child {
	margin-bottom: 0;
}
.hall-apply-success__details strong {
	color: var(--tsk-accent-strong);
}

/* ---- お問い合わせフォーム（リッチデザイン） ---- */
.contact-form-header {
	background: linear-gradient(135deg, var(--tsk-accent-soft) 0%, var(--tsk-accent-softer) 100%);
	border: 1px solid var(--tsk-accent-soft);
	border-radius: var(--tsk-radius);
	padding: 28px 24px;
	margin-bottom: 28px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.contact-form-header__icon {
	font-size: 44px;
	line-height: 1;
	color: var(--tsk-accent-strong);
	flex-shrink: 0;
}
.contact-form-header__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--tsk-accent-strong);
}
.contact-form-header__desc {
	font-size: 14px;
	line-height: 1.8;
	color: var(--tsk-ink);
	margin: 0;
}

.contact-form { max-width: 680px; }

.contact-form-notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--tsk-surface-sunken);
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius-sm);
	padding: 14px 16px;
	margin-bottom: 8px;
}
.contact-form-notice i {
	color: var(--tsk-warn);
	font-size: 16px;
	margin-top: 2px;
	flex-shrink: 0;
}
.contact-form-notice p {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--tsk-ink-muted);
	margin: 0;
}

/* ---- 送信成功メッセージ ---- */
.contact-form-success {
	background: linear-gradient(135deg, var(--tsk-ok-soft) 0%, rgba(229, 242, 236, .5) 100%);
	border: 2px solid var(--tsk-ok);
	border-radius: var(--tsk-radius-lg);
	padding: 48px 32px;
	text-align: center;
	max-width: 680px;
}
.contact-form-success__icon {
	font-size: 64px;
	line-height: 1;
	color: var(--tsk-ok);
	margin-bottom: 16px;
	animation: bounce-in .6s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-form-success__title {
	font-size: 28px;
	font-weight: 900;
	margin: 0 0 12px;
	color: var(--tsk-ok);
}
.contact-form-success__message {
	font-size: 15px;
	line-height: 1.8;
	color: var(--tsk-ink);
	margin: 0 0 24px;
}
.contact-form-success__message strong {
	color: var(--tsk-ok);
	font-weight: 800;
}
.contact-form-success__details {
	background: rgba(255, 255, 255, .8);
	border-radius: var(--tsk-radius-sm);
	padding: 16px;
	margin-top: 20px;
	border: 1px solid var(--tsk-ok-soft);
}
.contact-form-success__details p {
	margin: 6px 0;
	font-size: 14px;
	color: var(--tsk-ink);
}
.contact-form-success__details p:first-child {
	margin-top: 0;
}
.contact-form-success__details p:last-child {
	margin-bottom: 0;
}
.contact-form-success__details strong {
	color: var(--tsk-accent-strong);
}

/* ---- 役員ログインページ ---- */
.login-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--tsk-sp-4);
	font-family: var(--tsk-font);
}
@media (max-width: 600px) {
	.login-page { padding: 32px 24px; }
}
/* Cocoon本体のヘッダーを経由しなくなり、サイトのメニュー等が一切
   表示されなくなったため、トップページへ戻る導線をこのページ自体に持つ */
.login-page__back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tsk-ink-muted);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.login-page__back:hover { color: var(--tsk-accent-strong); }
.login-card {
	background: var(--tsk-surface);
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius-lg);
	box-shadow: var(--tsk-shadow);
	padding: 40px 36px;
	width: 100%;
	max-width: 420px;
	text-align: center;
}
@media (max-width: 500px) {
	.login-card { padding: 32px 24px; }
}
.login-card__icon {
	font-size: 44px;
	line-height: 1;
	color: var(--tsk-accent);
	margin-bottom: 12px;
}
.login-card__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--tsk-ink);
	border: none;
	padding: 0;
}
.login-card__desc {
	font-size: 13.5px;
	color: var(--tsk-ink-muted);
	line-height: 1.7;
	margin: 0 0 24px;
}
.login-card .stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: left;
}
.login-card .alert {
	text-align: left;
	margin-bottom: 8px;
}
.login-card__note {
	font-size: 12.5px;
	color: var(--tsk-ink-muted);
	line-height: 1.7;
	margin: 20px 0 0;
}

/* ---- スマホ下部固定ナビ「メニュー」タップ時のドロワー ----
   Cocoon標準の #navi-menu-content / .menu-drawer をサイトのデザイン
   トーンに合わせてリッチ化する。単色べた塗り+白文字だけの状態から、
   グラデーション背景・アイコン・ホバー/タップ演出・階層の視覚化を追加。 */
#navi-menu-content {
	background: linear-gradient(165deg, var(--tsk-accent-strong) 0%, var(--tsk-accent) 100%) !important;
	font-family: var(--tsk-font);
	padding-top: 24px !important;
}
.navi-menu-close-button {
	background: rgba(255, 255, 255, .15) !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	line-height: 36px !important;
	padding: 0 !important;
	margin: 0 14px 12px auto !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, transform .15s ease;
}
.navi-menu-close-button .fa,
.navi-menu-close-button .fa-close {
	font-size: 16px !important;
	line-height: 1 !important;
	color: #fff;
}
.navi-menu-close-button:hover {
	background: rgba(255, 255, 255, .28) !important;
	transform: rotate(90deg);
}
.menu-drawer {
	padding: 8px 14px !important;
}
.menu-drawer > li.menu-item {
	margin-bottom: 6px;
	border-bottom: none !important;
}
.menu-drawer > li.menu-item > a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 14px 16px !important;
	border-radius: var(--tsk-radius-sm);
	background: rgba(255, 255, 255, .08);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	transition: background .15s ease, transform .12s ease, padding-left .15s ease;
	position: relative;
}
.menu-drawer > li.menu-item > a::before {
	content: '\f105'; /* fa-chevron-right */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 12px;
	opacity: .6;
	order: 2;
	margin-left: auto;
}
.menu-drawer > li.menu-item > a:hover,
.menu-drawer > li.menu-item > a:active {
	background: rgba(255, 255, 255, .18);
	padding-left: 20px !important;
}
.menu-drawer .sub-menu {
	margin: 6px 0 10px 12px !important;
	padding-left: 12px !important;
	border-left: 2px solid rgba(255, 255, 255, .25);
}
.menu-drawer .sub-menu li.menu-item {
	margin-bottom: 4px;
}
.menu-drawer .sub-menu li.menu-item a {
	display: block !important;
	padding: 10px 14px !important;
	border-radius: var(--tsk-radius-sm);
	color: rgba(255, 255, 255, .88) !important;
	font-size: 13.5px;
	font-weight: 600;
	background: transparent;
	transition: background .15s ease, color .15s ease;
}
.menu-drawer .sub-menu li.menu-item a:hover,
.menu-drawer .sub-menu li.menu-item a:active {
	background: rgba(255, 255, 255, .12);
	color: #fff !important;
}

/* =====================================================================
 * 引っ張って更新(スタンドアローンモード専用)
 * assets/js/pull-to-refresh.js が document.body に translateY を適用し、
 * その分だけ上部にこのインジケーターが露出する。
 * ===================================================================== */
html.tsukanodai-standalone,
html.tsukanodai-standalone body {
	overscroll-behavior-y: contain; /* OS標準のバウンスと二重に動くのを防ぐ */
}
.tsukanodai-ptr {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 90px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 14px;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
	transform: translateY(-90px);
	will-change: transform;
}
.tsukanodai-ptr__icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--tsk-surface);
	box-shadow: var(--tsk-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsk-accent);
	font-size: 15px;
	transition: transform .1s linear, color .15s ease;
}
.tsukanodai-ptr.is-ready .tsukanodai-ptr__icon {
	color: #fff;
	background: var(--tsk-accent);
}
.tsukanodai-ptr.is-loading .tsukanodai-ptr__icon i {
	animation: tsukanodai-ptr-spin .7s linear infinite;
}
.tsukanodai-ptr.tsukanodai-ptr-animate {
	transition: transform .28s cubic-bezier(.25, .8, .25, 1), opacity .28s ease;
}
body.tsukanodai-ptr-animate {
	transition: transform .28s cubic-bezier(.25, .8, .25, 1);
}
@keyframes tsukanodai-ptr-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.tsukanodai-ptr,
	.tsukanodai-ptr__icon,
	body { transition: none !important; }
}

/* =====================================================================
 * 役員管理(officer/users.php)の折りたたみ行
 * <details>/<summary>を使い、JS無しでクリック展開できるようにしている。
 * 役員数が増えても「役職・名前」だけの一覧としてスキャンしやすくする。
 * ===================================================================== */
.officer-row {
	padding: 0;
	overflow: hidden;
}
.officer-row__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.officer-row__summary::-webkit-details-marker {
	display: none;
}
.officer-row__summary:hover {
	background: var(--tsk-surface-sunken);
}
.officer-row__select {
	display: inline-flex;
	align-items: center;
	width: 18px;
	flex-shrink: 0;
}
.officer-row__position {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--tsk-accent-soft);
	color: var(--tsk-accent-strong);
	white-space: nowrap;
}
.officer-row__name {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.officer-row__self {
	font-weight: 400;
	color: var(--tsk-ink-muted);
	margin-left: 4px;
}
.officer-row__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex-shrink: 0;
}
.officer-row__role {
	flex-shrink: 0;
	font-size: 12.5px;
	color: var(--tsk-ink-muted);
	white-space: nowrap;
}
.officer-row__chevron {
	flex-shrink: 0;
	color: var(--tsk-ink-faint);
	transition: transform .15s ease;
}
.officer-row[open] .officer-row__chevron {
	transform: rotate(180deg);
}
.officer-row__detail {
	padding: 4px 20px 20px;
	border-top: 1px solid var(--tsk-line);
}
@media (max-width: 560px) {
	/* flex-wrapは「入りきらなければ折り返す」かどうかが要素の幅によって
	   不安定だったため(名前(flex:1)は幅を0扱いで計算されるため、兼務で
	   役職バッジが長くなると折り返されずに名前だけが潰れることがあった)、
	   1行目(選択・名前・開閉矢印)と、2行目(役職バッジ)、3行目(その他の
	   バッジ)を、必ずこの通りに配置するグリッドに変える。 */
	.officer-row__summary {
		display: grid;
		grid-template-columns: 18px 1fr auto;
		grid-template-areas:
			"select   name     chevron"
			".        position position"
			".        badges   badges";
		column-gap: 12px;
		row-gap: 4px;
	}
	.officer-row__select { grid-area: select; }
	.officer-row__name { grid-area: name; }
	.officer-row__chevron { grid-area: chevron; }
	.officer-row__position {
		grid-area: position;
		justify-self: start;
		max-width: 100%;
		white-space: normal;
	}
	.officer-row__badges {
		grid-area: badges;
		/* バッジ同士は、幅が余っていれば横に並べる(短いもの同士は1行に2つ)。
		   1つのバッジの文字が長くて入りきらない場合は、画面外にはみ出す前に
		   バッジの中で折り返す(white-space: normal)。 */
		row-gap: 4px;
	}
	.officer-row__badges .officer-row__role {
		white-space: normal;
		flex: 0 1 auto;
		min-width: 0;
	}
}


/* ===== 役員間の個別メッセージ(officer/messages.php, message.php) ===== */
.msg-badge {
	display: inline-block;
	min-width: 20px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--tsk-crit);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
.msg-tag {
	display: inline-block;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--tsk-warn-soft);
	color: var(--tsk-warn);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
}
.msg-mini {
	/* iOS Safariは<button>に、appearance:noneやbox-shadow:noneだけでは
	   完全に消えない既定の余白・枠が残ることがあり、<a>版とサイズが揃わない
	   原因になっていた。all: unset でブラウザ標準の見た目を丸ごと消してから、
	   必要なスタイルだけをこの下で指定し直す(<a><button>を完全に同じ土台にする)。 */
	all: unset;
	box-sizing: border-box;
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--tsk-accent);
	border-radius: var(--tsk-radius-sm);
	background: var(--tsk-accent);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	/* <a>は周囲(line-height:1.85)を引き継ぐが、<button>は引き継がないため、
	   ここで明示しないと編集(<a>)と削除(<button>)の高さがズレる */
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}
.msg-mini:hover { background: var(--tsk-accent-strong); border-color: var(--tsk-accent-strong); }
.msg-recipients {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px 12px;
}
.msg-recipient {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
}
.msg-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 12px;
}
.officer-shell .msg-filter a {
	padding: 4px 14px;
	border: 1px solid var(--tsk-line-strong);
	border-radius: 999px;
	font-size: 13px;
	color: var(--tsk-ink-muted);
}
.officer-shell .msg-filter a.is-active {
	background: var(--tsk-accent-soft);
	border-color: var(--tsk-accent);
	color: var(--tsk-accent-strong);
}
.officer-shell a.msg-thread {
	display: block;
	color: var(--tsk-ink);
	text-decoration: none;
}
.officer-shell a.msg-thread:hover { text-decoration: none; background: var(--tsk-accent-softer); }
.msg-thread.is-unread { border-color: var(--tsk-accent); }
.msg-thread__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msg-thread__meta { margin-top: 4px; font-size: 12.5px; color: var(--tsk-ink-muted); }
.msg-bubble.is-mine { background: var(--tsk-accent-softer); border-color: var(--tsk-accent-soft); }
.msg-bubble__head { font-size: 13px; color: var(--tsk-ink-muted); }
.msg-bubble__head strong { color: var(--tsk-ink); margin-right: 4px; }
.msg-bubble__time { margin-left: 8px; font-size: 12px; color: var(--tsk-ink-faint); }
.msg-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.msg-images img {
	display: block;
	max-width: 100%;
	max-height: 320px;
	border-radius: var(--tsk-radius-sm);
	border: 1px solid var(--tsk-line);
}
.officer-shell a.msg-pdf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--tsk-line-strong);
	border-radius: var(--tsk-radius-sm);
	background: var(--tsk-surface);
}

/* =====================================================================
 * 役員ポータル共通UI(アバター・検索・チップ・ピッカー・ダッシュボード)
 * ===================================================================== */
.officer-shell [hidden] { display: none !important; }

.avatar {
	--h: 150;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: hsl(var(--h) 45% 88%);
	color: hsl(var(--h) 45% 26%);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar--lg { width: 48px; height: 48px; font-size: 20px; }

.searchbox {
	position: relative;
	flex: 1 1 220px;
	min-width: 0;
}
.searchbox i {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tsk-ink-faint);
	font-size: 13px;
	pointer-events: none;
}
.searchbox input {
	width: 100%;
	padding: 10px 14px 10px 36px;
	border: 1px solid var(--tsk-line-strong);
	border-radius: 999px;
	background: var(--tsk-surface);
	font-size: 14px;
}
.searchbox input:focus { outline: 2px solid var(--tsk-accent); outline-offset: 1px; border-color: var(--tsk-accent); }

.chip-group, .picker__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
	padding: 6px 14px;
	border: 1px solid var(--tsk-line-strong);
	border-radius: 999px;
	background: var(--tsk-surface);
	color: var(--tsk-ink-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip-btn:hover { background: var(--tsk-accent-softer); border-color: var(--tsk-accent); color: var(--tsk-accent-strong); }
.chip-btn.is-active { background: var(--tsk-accent); border-color: var(--tsk-accent); color: #fff; }
.chip-btn--plain { border-style: dashed; }

.toolbar { display: flex; flex-direction: column; gap: 12px; }
.toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.toolbar__row--bulk { padding-top: 12px; border-top: 1px solid var(--tsk-line); }
.toolbar__count { font-size: 13px; color: var(--tsk-ink-muted); white-space: nowrap; }
.toolbar__row--bulk .toolbar__count { margin-left: auto; }
.toolbar__check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 0; cursor: pointer; }
.toolbar button:disabled { opacity: .45; cursor: not-allowed; }

/* 役員管理の行 */
/* .card-title は英字を大文字にする指定があるため、メールアドレスだけ打ち消す */
.officer-email { margin-left: 4px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tsk-ink-muted); }
.officer-row__sub { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--tsk-ink-muted); }
.officer-row__role.is-admin { color: var(--tsk-accent-strong); font-weight: 700; }
.officer-row__role.is-warning { color: var(--tsk-warn); font-weight: 600; }
.empty-state { text-align: center; color: var(--tsk-ink-muted); padding: 32px 20px; }
.empty-state i { font-size: 28px; color: var(--tsk-ink-faint); margin-bottom: 8px; }

/* 宛先ピッカー(.field label / .field input の汎用ルールに負けないよう .picker を頭に付けている) */
.picker {
	border: 1px solid var(--tsk-line-strong);
	border-radius: var(--tsk-radius);
	background: var(--tsk-surface);
	overflow: hidden;
	box-shadow: 0 2px 12px -6px rgba(20, 30, 25, .18);
}
/* 選んだ人の名前を積み上げるチップ表示は廃止し、件数だけを示す
   1行のステータス表示にした(誰を選んだかは一覧側のチェックマークで
   わかるため、ここでの重複表示は不要という判断) */
.picker__selected {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: var(--tsk-accent-softer);
	border-bottom: 1px solid var(--tsk-line);
}
.picker__count {
	font-size: 13px;
	font-weight: 700;
	color: var(--tsk-ink-muted);
}
.picker__toolbar { padding: 10px 14px; border-bottom: 1px solid var(--tsk-line); }
.picker__unreachable {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 12px 14px; border-top: 1px solid var(--tsk-line);
	background: var(--tsk-surface-sunken); color: var(--tsk-ink-muted);
	font-size: 12.5px; line-height: 1.6;
}
.picker__unreachable > i { margin-top: 3px; color: var(--tsk-warn); }
.picker__unreachable strong { display: block; color: var(--tsk-ink); font-size: 12.5px; }
/* 画面の高さに対する占有率を上げ、スクロールなしで見える人数を増やす
   (固定px指定だと、縦に長いスマホ画面でも一部しか使えていなかった) */
.picker__list { max-height: min(60vh, 520px); overflow-y: auto; overflow-x: hidden; padding: 4px 8px 8px; }
.picker__group-title {
	margin: 12px 8px 4px;
	padding-left: 9px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--tsk-accent-strong);
	border-left: 3px solid var(--tsk-accent-soft);
}
.picker .picker__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 2px;
	padding: 7px 10px;
	border-radius: var(--tsk-radius-sm);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	box-shadow: inset 3px 0 0 transparent;
	transition: background .12s ease, box-shadow .12s ease;
}
.picker .picker__item:hover { background: var(--tsk-surface-sunken); }
.picker .picker__item.is-selected { background: var(--tsk-accent-soft); box-shadow: inset 3px 0 0 var(--tsk-accent); }
/* チェックボックスは、ブラウザ標準の見た目を消して丸いチェックマーク風にする
   (以前は .picker__who に常時アウトラインが出てしまうバグがあり、リストが
   全体的に緑い枠だらけでうるさく見えていた。チェック自体をここで表現し、
   :focus-visible の時だけ輪郭を出す形に整理した) */
.picker .picker__item input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	/* 他の汎用ルール(.field input の min-height 等)に丸ごと上書きされて
	   縦長の楕円になってしまわないよう、min/max も含めて明示する */
	width: 21px;
	height: 21px;
	min-width: 21px;
	min-height: 21px;
	max-width: 21px;
	max-height: 21px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--tsk-line-strong);
	border-radius: 999px;
	background: var(--tsk-surface);
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.picker .picker__item input[type=checkbox]::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 10px;
	color: #fff;
	transform: scale(0);
	transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.picker .picker__item input[type=checkbox]:checked {
	background: var(--tsk-accent);
	border-color: var(--tsk-accent);
}
.picker .picker__item input[type=checkbox]:checked::before { transform: scale(1); }
.picker .picker__item input[type=checkbox]:focus-visible {
	outline: 2px solid var(--tsk-accent);
	outline-offset: 2px;
}
.picker__who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; line-height: 1.4; }
.picker__name { font-weight: 700; font-size: 14px; white-space: nowrap; }
.picker__pos { font-size: 12.5px; color: var(--tsk-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ダッシュボード */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 8px; }
.stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 20px;
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius);
	background: var(--tsk-surface);
	box-shadow: var(--tsk-shadow-sm);
}
.officer-shell a.stat-card { color: var(--tsk-ink); text-decoration: none; }
.officer-shell a.stat-card:hover { text-decoration: none; border-color: var(--tsk-accent); }
.stat-card.is-attention { border-color: var(--tsk-crit); background: var(--tsk-crit-soft); }
.stat-card__icon { color: var(--tsk-accent); font-size: 18px; }
.stat-card.is-attention .stat-card__icon { color: var(--tsk-crit); }
.stat-card__num { font-size: 32px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-card__label { font-size: 12.5px; color: var(--tsk-ink-muted); }
.section-title { margin: 28px 0 12px; font-size: 16px; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.officer-shell a.action-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--tsk-line);
	border-radius: var(--tsk-radius);
	background: var(--tsk-surface);
	color: var(--tsk-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.officer-shell a.action-tile i { color: var(--tsk-accent); font-size: 20px; }
.officer-shell a.action-tile:hover { transform: translateY(-2px); border-color: var(--tsk-accent); box-shadow: var(--tsk-shadow); text-decoration: none; }

/* =====================================================================
 * お知らせ・連絡掲示板の一覧(カテゴリ色バッジ、絞り込み、添付チップ)
 * ===================================================================== */
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.chip-btn__n { margin-left: 4px; font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; }

.cat-badge {
	display: inline-block;
	flex-shrink: 0;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--tsk-accent-soft);
	color: var(--tsk-accent-strong);
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.7;
	white-space: nowrap;
}
.cat-badge--crit { background: var(--tsk-crit-soft); color: var(--tsk-crit); }
.cat-badge--warn { background: var(--tsk-warn-soft); color: var(--tsk-warn); }
.cat-badge--blue { background: hsl(215 55% 92%); color: hsl(215 50% 32%); }

.file-chip {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	border: 1px solid var(--tsk-line-strong);
	border-radius: var(--tsk-radius-sm);
	background: var(--tsk-surface);
	font-size: 12.5px;
	overflow: hidden;
}
.file-chip__type { padding: 1px 8px; background: var(--tsk-surface-sunken); color: var(--tsk-ink-muted); font-weight: 800; font-size: 11px; line-height: 1.9; }
.file-chip__name { padding: 1px 10px; line-height: 1.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.officer-shell a.file-chip:hover { border-color: var(--tsk-accent); background: var(--tsk-accent-softer); }

/* お知らせ一覧 */
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	padding: 11px 4px;
	border-top: 1px solid var(--tsk-line);
}
.feed__item:first-child { border-top: 0; }
.feed__date { flex-shrink: 0; width: 84px; font-size: 12.5px; color: var(--tsk-ink-faint); font-variant-numeric: tabular-nums; }
.feed__title { flex: 1 1 200px; min-width: 0; font-weight: 700; }
.feed__meta { font-size: 12.5px; color: var(--tsk-ink-muted); white-space: nowrap; }
@media (max-width: 560px) { .feed__date { width: auto; } }

/* 連絡掲示板の投稿 */
.post--urgent { border-left: 4px solid var(--tsk-crit); }
.post__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.post__meta { font-size: 12.5px; color: var(--tsk-ink-muted); }
.post__title { margin: 8px 0 6px; font-size: 16.5px; }
.post__text { white-space: pre-wrap; color: var(--tsk-ink); font-size: 14.5px; line-height: 1.8; }
.post__body summary { list-style: none; cursor: pointer; font-size: 14.5px; line-height: 1.8; color: var(--tsk-ink); }
.post__body summary::-webkit-details-marker { display: none; }
/* 本文の続き部分と、開閉ボタンの位置をどの投稿でも揃えるため、
   プレビュー文をブロック要素にして、ボタンを必ずその下の独立した行に出す */
.post__preview { display: block; }
.post__toggle {
	display: inline-flex; align-items: center; gap: 5px;
	margin-top: 8px; padding: 5px 12px;
	border-radius: 999px;
	background: var(--tsk-accent-softer); color: var(--tsk-accent-strong);
	font-size: 12.5px; font-weight: 700; white-space: nowrap;
	transition: background .12s ease;
}
.post__body summary:hover .post__toggle { background: var(--tsk-accent-soft); }
.post__toggle--close, .post__body[open] .post__toggle--open, .post__body[open] .post__preview { display: none; }
.post__body[open] .post__toggle--close { display: inline-flex; }
.post__body[open] summary { margin-bottom: 4px; }
.post__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--tsk-line); }
.post__reply { font-size: 13px; color: var(--tsk-ink-muted); }

/* ダッシュボードの「役職：会計　所属：8組」 */
.profile-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.profile-line__item {
	display: inline-flex;
	align-items: baseline;
	padding: 5px 16px;
	border: 1px solid var(--tsk-line);
	border-radius: 999px;
	background: var(--tsk-surface);
	font-size: 14px;
}
.profile-line__label { color: var(--tsk-ink-muted); }
.profile-line__item strong { color: var(--tsk-accent-strong); font-weight: 800; }

/* トップの「役員の方はこちら」: メニューを開かず押せる、大きく分かりやすい入り口 */
.hero .hero__inner a.hero__officer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	margin-top: 22px;
	padding: 12px 24px;
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.hero .hero__inner a.hero__officer:hover,
.hero .hero__inner a.hero__officer:active {
	background: #fff;
	color: var(--tsk-accent-strong);
	text-decoration: none;
}
.hero__officer i { font-size: 20px; }
.hero__officer-text { text-align: left; }
.hero__officer-text small { display: block; font-size: 13px; font-weight: 600; opacity: .9; }
@media (max-width: 600px) {
	.hero .hero__inner a.hero__officer { width: 100%; }
}

/* メーリングリストから削除推奨のアドレス一覧 */
.ml-removal__list { list-style: none; margin: 0 0 10px; padding: 0; }
.ml-removal__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.ml-removal__addr { font-weight: 700; color: var(--tsk-ink); word-break: break-all; }
.ml-removal__meta { flex: 1; font-size: 12.5px; color: var(--tsk-ink-muted); }
.ml-removal__copy { display: block; width: 100%; margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--tsk-line-strong); border-radius: var(--tsk-radius-sm); background: var(--tsk-surface); color: var(--tsk-ink); font-size: 13px; resize: none; }
.ml-removal__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 年度別役員一覧(空席・兼務の表示) */
.roster-table__section td { padding-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--tsk-accent-strong); background: var(--tsk-accent-softer); }
.roster-table tr.is-vacant td:first-child { color: var(--tsk-ink-muted); }
.roster-vacant { display: inline-block; padding: 1px 10px; border: 1px dashed var(--tsk-warn); border-radius: 999px; background: var(--tsk-warn-soft); color: var(--tsk-warn); font-size: 12.5px; font-weight: 700; }
.roster-concurrent { color: var(--tsk-ink-muted); font-size: 13.5px; }

/* 再発行した仮パスワードの表示 */
.reissued__pw { margin: 4px 0 0; padding: 10px 14px; border-radius: var(--tsk-radius-sm); background: var(--tsk-surface); color: var(--tsk-ink); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 22px; font-weight: 800; letter-spacing: .12em; user-select: all; word-break: break-all; }

/* 見出し・箇条書きのボタンつき入力欄(お知らせ投稿) */
.rte__toolbar, .rte__area { display: none; }
.rte.is-ready .rte__source { display: none; }
.rte.is-ready .rte__toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--tsk-line-strong); border-bottom: 0; border-radius: var(--tsk-radius-sm) var(--tsk-radius-sm) 0 0; background: var(--tsk-surface-sunken); }
.rte.is-ready .rte__area { display: block; min-height: 240px; padding: 12px 14px; border: 1px solid var(--tsk-line-strong); border-radius: 0 0 var(--tsk-radius-sm) var(--tsk-radius-sm); background: var(--tsk-surface); color: var(--tsk-ink); font-size: 15.5px; line-height: 1.85; overflow-y: auto; }
.rte__area:focus { outline: 2px solid var(--tsk-accent); outline-offset: 1px; border-color: var(--tsk-accent); }
.rte__btn { padding: 8px 14px; border: 1px solid var(--tsk-line-strong); border-radius: var(--tsk-radius-sm); background: var(--tsk-surface); color: var(--tsk-ink); font-size: 14px; cursor: pointer; }
.rte__btn:hover { background: var(--tsk-accent-softer); border-color: var(--tsk-accent); }
.rte__area h2, .notice-body-rich h2 { margin: 18px 0 6px; padding-left: 10px; border-left: 4px solid var(--tsk-accent); font-size: 17px; font-weight: 800; line-height: 1.5; }
.rte__area p, .notice-body-rich p { margin: 0 0 8px; }
.rte__area ul, .rte__area ol, .notice-body-rich ul, .notice-body-rich ol { margin: 4px 0 10px; padding-left: 1.6em; }
.rte__area li, .notice-body-rich li { margin-bottom: 2px; }

/* 画面上で作るQRコード */
.qr-canvas { display: inline-block; margin: 10px 0 0; padding: 8px; background: #fff; border: 1px solid var(--tsk-line); border-radius: var(--tsk-radius-sm); line-height: 0; }
.qr-canvas svg { width: 200px; height: 200px; }

/* 年度別役員一覧: 年度の切り替えと記録 */
.roster-tools { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--tsk-sp-4) var(--tsk-sp-6); align-items: start; }
.roster-tools .field { margin: 0; }
.roster-tools__save { display: grid; grid-template-columns: 140px auto; gap: var(--tsk-sp-2) var(--tsk-sp-3); align-items: end; padding-left: var(--tsk-sp-6); border-left: 1px solid var(--tsk-line); }
.roster-tools__save .field { min-width: 0; }
.roster-tools__save .btn { justify-self: start; }
.roster-tools select,
.roster-tools__save .btn { box-sizing: border-box; height: 52px; margin: 0; }
.roster-tools__save .btn { display: inline-flex; align-items: center; gap: 8px; padding-top: 0; padding-bottom: 0; }
.roster-tools__hint { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--tsk-ink-muted); }
@media (max-width: 700px) {
	.roster-tools { grid-template-columns: minmax(0, 1fr); }
	.roster-tools__save { grid-template-columns: minmax(0, 1fr); padding: var(--tsk-sp-4) 0 0; border-left: 0; border-top: 1px solid var(--tsk-line); }
	.roster-tools__save .btn { justify-self: stretch; }
}

/* お知らせ一覧の「編集」「削除」(display/text-decorationは .msg-mini 本体に統合済み) */
/* align-items: center が無いと既定の stretch になり、削除(<form>の中の<a>)を
   包むform側が行内レイアウトの「行の高さ」計算で編集(直接の<a>)より少し
   高くなることがあり、その高さに編集側が引き伸ばされてサイズが揃わなかった。
   center指定で、双方とも本来の(引き伸ばされない)高さで表示される。 */
.feed__actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.feed__actions form { margin: 0; line-height: 0; }
.msg-mini--danger { background: var(--tsk-crit); border-color: var(--tsk-crit); color: #fff; }
.msg-mini--danger:hover { background: color-mix(in srgb, var(--tsk-crit) 85%, black); border-color: color-mix(in srgb, var(--tsk-crit) 85%, black); }
/* 「無効にする」など、進める操作(緑)でも取り消す操作(赤)でもない、中立の操作用。
   .msg-mini の基本(塗り緑)をそのまま使うと「編集」と同じ意味に見えてしまうため分けた */
.msg-mini--secondary { background: var(--tsk-surface-sunken); border-color: var(--tsk-line-strong); color: var(--tsk-ink); }
.msg-mini--secondary:hover { background: var(--tsk-line); border-color: var(--tsk-line-strong); }

/* 編集済みの表示、個別メッセージの見出し行(編集・削除ボタン) */
.post__edited { margin-left: 6px; font-size: 12px; color: var(--tsk-ink-faint); }
.msg-bubble__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.msg-bubble__head .msg-bubble__time { margin-left: 0; }

/* ---- 防災情報: 災害時の連絡体制 ---- */
.bousai-chain { max-width: 720px; margin: var(--tsk-sp-6) auto; }
.bousai-chain__title { margin: 0 0 var(--tsk-sp-3); padding: 0 0 0 var(--tsk-sp-4); border-left: 5px solid var(--tsk-accent); font-size: 1.35rem; line-height: 1.4; }
.bousai-chain__lead { text-wrap: pretty; margin: 0 0 var(--tsk-sp-5); line-height: 1.8; color: var(--tsk-ink); }
.bousai-chain__sub { margin: var(--tsk-sp-6) 0 var(--tsk-sp-3); font-size: 1.05rem; line-height: 1.4; }

.bousai-flow { list-style: none; margin: 0; padding: 0; }
.bousai-flow__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--tsk-sp-4); align-items: center; margin: 0 0 var(--tsk-sp-5); padding: var(--tsk-sp-4); background: var(--tsk-surface); border: 1px solid var(--tsk-line); border-radius: var(--tsk-radius); box-shadow: var(--tsk-shadow-sm); }
/* 段と段をつなぐ矢印 */
.bousai-flow__step:not(.bousai-flow__step--last)::after { content: ""; position: absolute; left: 41px; bottom: -17px; width: 8px; height: 8px; border-right: 2.5px solid var(--tsk-accent); border-bottom: 2.5px solid var(--tsk-accent); transform: rotate(45deg); }
.bousai-flow__step--last { margin-bottom: 0; background: var(--tsk-accent-softer); border-color: var(--tsk-accent); }
.bousai-svg { width: 1em; height: 1em; flex: none; }
.bousai-chain__notice-title .bousai-svg { vertical-align: -.12em; margin-right: 4px; }
.bousai-flow__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tsk-accent-soft); color: var(--tsk-accent-strong); font-size: 22px; }
.bousai-flow__step--last .bousai-flow__icon { background: var(--tsk-accent); color: #fff; }
.bousai-flow__who { margin: 0 0 var(--tsk-sp-1); font-weight: 800; font-size: 1.05rem; line-height: 1.4; color: var(--tsk-ink); }
.bousai-flow__what { text-wrap: pretty; margin: 0; font-size: .95rem; line-height: 1.7; color: var(--tsk-ink-muted); }

.bousai-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--tsk-sp-2) var(--tsk-sp-3); }
.bousai-roles li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tsk-sp-3); margin: 0; padding: var(--tsk-sp-3) var(--tsk-sp-4); background: var(--tsk-surface-sunken); border-radius: var(--tsk-radius-sm); }
.bousai-roles__name { font-weight: 700; color: var(--tsk-ink); }
.bousai-roles__n { font-size: .9rem; color: var(--tsk-accent-strong); font-weight: 700; white-space: nowrap; }

.bousai-chain__notice { margin: var(--tsk-sp-6) 0 0; padding: var(--tsk-sp-5); background: var(--tsk-accent-softer); border: 1px solid var(--tsk-accent-soft); border-radius: var(--tsk-radius); text-align: center; }
.bousai-chain__notice p { margin: 0 0 var(--tsk-sp-3); line-height: 1.7; }
.bousai-chain__notice-title { text-wrap: balance; font-weight: 800; font-size: 1.05rem; color: var(--tsk-accent-strong); }
.bousai-chain__notice .btn--hall-cta { margin-top: var(--tsk-sp-1); }
.bousai-chain__source { margin: var(--tsk-sp-4) 0 0; font-size: 12.5px; line-height: 1.7; color: var(--tsk-ink-muted); }
@media (max-width: 500px) {
	.bousai-flow__step { grid-template-columns: 48px minmax(0, 1fr); gap: var(--tsk-sp-3); padding: var(--tsk-sp-3) var(--tsk-sp-4); }
	.bousai-flow__step:not(.bousai-flow__step--last)::after { left: 37px; }
	.bousai-flow__icon { width: 48px; height: 48px; font-size: 19px; }
	.bousai-chain__notice { padding: var(--tsk-sp-4); }
	.bousai-chain__notice .btn--hall-cta { width: 100%; }
}

/* ---- 防災情報ページ: 災害が起きたら(inc/views/bousai_guide_view.php) ----
   災害時は色が見づらい場面もあるため、危険度は色だけでなく「レベルN」の文字でも示す */
.bousai-guide { max-width: 720px; margin: var(--tsk-sp-6) auto; }
.bousai-guide__emergency { margin: 0 0 var(--tsk-sp-6); padding: var(--tsk-sp-4) var(--tsk-sp-5); background: var(--tsk-crit-soft); border: 1px solid var(--tsk-crit); border-radius: var(--tsk-radius); text-align: center; }
.bousai-guide__emergency-title { margin: 0 0 var(--tsk-sp-3); font-weight: 800; color: var(--tsk-crit); }
.bousai-guide__emergency-tel { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tsk-sp-3); }
.bousai-guide__emergency-tel a { flex: 1 1 160px; padding: 12px 16px; background: var(--tsk-crit); color: #fff !important; border-radius: var(--tsk-radius-sm); font-size: 1.15rem; font-weight: 800; text-decoration: none !important; }
.bousai-guide__note { margin: 0 0 var(--tsk-sp-4); line-height: 1.8; }
.bousai-level { list-style: none; margin: 0 0 var(--tsk-sp-4); padding: 0; display: grid; gap: var(--tsk-sp-2); }
.bousai-level__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--tsk-sp-3); align-items: start; margin: 0; padding: var(--tsk-sp-3) var(--tsk-sp-4); background: var(--tsk-surface); border: 1px solid var(--tsk-line); border-left-width: 6px; border-radius: var(--tsk-radius-sm); }
.bousai-level__badge { display: inline-block; padding: 3px 0; border-radius: 999px; background: var(--tsk-ink-muted); color: #fff; font-size: 13px; font-weight: 800; text-align: center; }
.bousai-level__name { margin: 0 0 2px; font-weight: 800; line-height: 1.5; }
.bousai-level__name small { margin-left: 6px; font-weight: 600; font-size: .8rem; color: var(--tsk-ink-muted); }
.bousai-level__what { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--tsk-ink); }
.bousai-level__row--5 { border-left-color: #1c1c1c; background: #f2f2f2; } .bousai-level__row--5 .bousai-level__badge { background: #1c1c1c; }
.bousai-level__row--4 { border-left-color: var(--tsk-crit); background: var(--tsk-crit-soft); } .bousai-level__row--4 .bousai-level__badge { background: var(--tsk-crit); }
.bousai-level__row--3 { border-left-color: var(--tsk-warn); background: var(--tsk-warn-soft); } .bousai-level__row--3 .bousai-level__badge { background: var(--tsk-warn); }
.bousai-level__row--2 { border-left-color: var(--tsk-accent); } .bousai-level__row--2 .bousai-level__badge { background: var(--tsk-accent); }
.bousai-level__row--1 .bousai-level__badge { background: var(--tsk-ink-faint); }
.bousai-do { list-style: none; margin: 0 0 var(--tsk-sp-3); padding: 0; display: grid; gap: var(--tsk-sp-2); }
.bousai-do li { margin: 0; padding: var(--tsk-sp-3) var(--tsk-sp-4); background: var(--tsk-surface-sunken); border-radius: var(--tsk-radius-sm); line-height: 1.75; }
.bousai-info { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tsk-sp-4); }
.bousai-info__item { margin: 0; padding: var(--tsk-sp-4) var(--tsk-sp-5); background: var(--tsk-surface); border: 1px solid var(--tsk-line); border-radius: var(--tsk-radius); }
.bousai-info__item p { margin: 0 0 var(--tsk-sp-2); line-height: 1.75; }
.bousai-info__name { font-weight: 800; font-size: 1.05rem; color: var(--tsk-accent-strong); }
.bousai-info__name small, .bousai-chain__sub small { margin-left: 6px; font-weight: 600; font-size: .8rem; color: var(--tsk-ink-muted); }
.bousai-info__tel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--tsk-sp-3); }
.bousai-info__tel a { font-size: 1.4rem; font-weight: 800; letter-spacing: .02em; }
.bousai-info__tel span { font-size: .85rem; color: var(--tsk-ink-muted); }
.bousai-info__steps { margin: 0 0 var(--tsk-sp-2); padding-left: 1.5em; }
.bousai-info__steps li { margin: 0 0 4px; line-height: 1.7; }
.bousai-info__mono { display: inline-block; margin-top: 2px; padding: 2px 8px; background: var(--tsk-surface-sunken); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem; word-break: break-all; }
.bousai-info__caveat { font-size: .85rem; color: var(--tsk-ink-muted); }
@media (max-width: 500px) {
	.bousai-level__row { grid-template-columns: 1fr; gap: var(--tsk-sp-2); }
	.bousai-level__badge { justify-self: start; padding: 3px 14px; }
	.bousai-info__item { padding: var(--tsk-sp-4); }
}

/* ---- 本文ページ(町内会について・規約・よくある質問など): サイト全体のデザインに揃える ----
   本文がCocoon標準の装飾のまま画面幅いっぱい(約1200px)に広がり、PCで読みにくかった。
   読みやすい幅に絞り、見出し・表・引用・リストをサイトのトーンに合わせる。
   本文のHTMLは触らず、body に .tsk-article が付いたページ(functions.php で、独自ショートコードを使わない固定ページに付与)にだけCSSを当てる。 */
.tsk-article .entry-content {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--tsk-sp-5) var(--tsk-sp-4) var(--tsk-sp-6);
	font-family: var(--tsk-font);
	font-size: 16px;
	line-height: 1.95;
	color: var(--tsk-ink);
}
.tsk-article .entry-content p { margin: 0 0 1.4em; }
.tsk-article .entry-content a { color: var(--tsk-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.tsk-article .entry-content img { max-width: 100%; height: auto; border-radius: var(--tsk-radius-sm); }

.tsk-article .entry-content h2 {
	margin: 2.6em 0 1em;
	padding: 0 0 0 14px;
	border: 0;
	border-left: 5px solid var(--tsk-accent);
	background: none;
	font-size: 24px; font-weight: 800; line-height: 1.5; color: var(--tsk-ink);
}
.tsk-article .entry-content h3 {
	margin: 2.4em 0 1em;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid var(--tsk-accent-soft);
	font-size: 20px; font-weight: 800; line-height: 1.5; color: var(--tsk-accent-strong);
}
.tsk-article .entry-content h4 {
	margin: 2em 0 .8em;
	padding: 2px 0 2px 12px;
	border: 0;
	border-left: 4px solid var(--tsk-accent-soft);
	font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--tsk-ink);
}

.tsk-article .entry-content ul:not(.blocks-gallery-grid):not(.wp-block-gallery) { margin: 0 0 1.6em; padding: 0; list-style: none; }
.tsk-article .entry-content ul:not(.blocks-gallery-grid):not(.wp-block-gallery) li { position: relative; margin: 0; padding: 4px 0 4px 22px; }
.tsk-article .entry-content ul:not(.blocks-gallery-grid):not(.wp-block-gallery) li::before {
	content: ""; position: absolute; left: 4px; top: .95em;
	width: 8px; height: 8px; border-radius: 50%; background: var(--tsk-accent);
}

.tsk-article .entry-content table {
	width: 100%; margin: 0 0 1.8em;
	border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--tsk-line); border-radius: var(--tsk-radius-sm); overflow: hidden;
	background: var(--tsk-surface); font-size: 15px;
}
.tsk-article .entry-content table th,
.tsk-article .entry-content table td {
	padding: 12px 16px; text-align: left; vertical-align: middle;
	border: none !important; border-bottom: 1px solid var(--tsk-line) !important;
}
.tsk-article .entry-content table tr:last-child th,
.tsk-article .entry-content table tr:last-child td { border-bottom: none !important; }
.tsk-article .entry-content table th { width: 9em; background: var(--tsk-surface-sunken); color: var(--tsk-ink-muted); font-weight: 700; }
.tsk-article .entry-content table td img { display: block; }

.tsk-article .entry-content blockquote {
	margin: 0 0 1.8em; padding: var(--tsk-sp-4) var(--tsk-sp-5);
	border: 1px solid var(--tsk-line); border-left: 4px solid var(--tsk-line-strong);
	border-radius: var(--tsk-radius-sm); background: var(--tsk-surface-sunken);
	font-size: 14px; line-height: 1.8; color: var(--tsk-ink-muted);
}
.tsk-article .entry-content blockquote::before,
.tsk-article .entry-content blockquote::after { display: none; }
.tsk-article .entry-content blockquote p:last-child { margin-bottom: 0; }

/* ページタイトルも本文と同じ幅に揃える(揃えないと、タイトルだけ画面の左端に寄ってしまう) */
.tsk-article .article-header { max-width: 760px; margin: 0 auto; padding: var(--tsk-sp-6) var(--tsk-sp-4) 0; }
.tsk-article .entry-title {
	margin: 0; padding: 0 0 var(--tsk-sp-3);
	border-bottom: 2px solid var(--tsk-accent-soft);
	font-family: var(--tsk-font); font-size: 28px; font-weight: 800; line-height: 1.45; color: var(--tsk-ink);
}
/* Cocoonの目次: 中央寄せの小さな枠を、本文と同じ幅のカードに */
.tsk-article .toc {
	display: block; width: 100%; max-width: none; margin: 0 0 2em;
	padding: var(--tsk-sp-4) var(--tsk-sp-5);
	border: 1px solid var(--tsk-line) !important; border-radius: var(--tsk-radius-sm);
	background: var(--tsk-surface-sunken); text-align: left; font-size: 15px;
}
.tsk-article .toc .toc-title { display: block; padding: 0; margin-bottom: var(--tsk-sp-2); text-align: left; font-weight: 800; color: var(--tsk-ink); }
.tsk-article .toc a { text-decoration: none; }
.tsk-article .toc a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.tsk-article .entry-content { font-size: 15.5px; padding: var(--tsk-sp-4) var(--tsk-sp-4) var(--tsk-sp-5); }
	.tsk-article .article-header { padding-top: var(--tsk-sp-5); }
	.tsk-article .entry-title { font-size: 23px; }
	.tsk-article .entry-content h2 { font-size: 21px; }
	.tsk-article .entry-content h3 { font-size: 18px; }
	.tsk-article .entry-content table th { width: 6.5em; }
	.tsk-article .entry-content table th, .tsk-article .entry-content table td { padding: 10px 12px; }
}

/* ---- お問い合わせ受信箱(役員ポータル・管理者向け) ---- */
.contact-item.is-overdue { border-color: var(--tsk-crit); }
.contact-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.contact-item__name { font-size: 16px; }
.contact-item__meta { font-size: 12.5px; color: var(--tsk-ink-muted); }
.contact-item__age { padding: 1px 10px; border-radius: 999px; background: var(--tsk-crit-soft); color: var(--tsk-crit); font-size: 12px; font-weight: 700; }
.contact-item__subject { margin: 10px 0 0; font-weight: 700; }
.contact-item__body { margin: 6px 0 0; padding: 10px 12px; background: var(--tsk-surface-sunken); border-radius: var(--tsk-radius-sm); font-size: 14px; overflow-wrap: anywhere; }
.contact-item__mail { margin: 10px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.contact-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.contact-item__actions form { margin: 0; }
.contact-item__done { font-size: 13px; color: var(--tsk-ok); font-weight: 700; }
@media (max-width: 640px) {
	.contact-item__actions .btn { width: 100%; }
}

.contact-reply { margin-top: 14px; }
.contact-reply > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.contact-reply > summary::-webkit-details-marker { display: none; }
.contact-reply[open] > summary { margin-bottom: 10px; }
.contact-reply textarea { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.contact-reply__hint { margin: 0 0 8px; font-size: 12.5px; color: var(--tsk-ink-muted); }
.contact-reply-sent { margin-top: 12px; font-size: 13px; }
.contact-reply-sent > summary { cursor: pointer; color: var(--tsk-ink-muted); }
@media (max-width: 640px) {
	.contact-reply > summary, .contact-reply form .btn { width: 100%; justify-content: center; box-sizing: border-box; }
}

.contact-inbox { margin-bottom: 24px; }
.contact-inbox__title { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.contact-inbox__more { margin: 4px 0 0; font-size: 13px; }
.contact-inbox__empty { margin: 0 0 6px; font-size: 14px; color: var(--tsk-ok); font-weight: 700; }
.contact-reply__label { display: block; margin: 0 0 4px; font-size: 12.5px; font-weight: 700; }
.contact-reply input[type=email] { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.contact-reply__note { margin: -4px 0 10px; font-size: 12px; color: var(--tsk-ink-muted); }