/*
 * QMAC 子テーマの表示用スタイル。
 * 色は theme.json のパレット（旧サイト QMAC-X の CSS から抽出）を CSS 変数経由で使う。
 * 変数が取れない場合（エディタ外の一部文脈）に備えてフォールバック値を併記する。
 */

:root {
	--qmac-base: var( --wp--preset--color--base, #e8eff0 );
	--qmac-contrast: var( --wp--preset--color--contrast, #000033 );
	--qmac-primary: var( --wp--preset--color--primary, #003300 );
	--qmac-accent: var( --wp--preset--color--accent, #660000 );
	--qmac-footer: var( --wp--preset--color--footer, #53747b );
	--qmac-panel: var( --wp--preset--color--panel, #efebde );
	--qmac-panel-alt: var( --wp--preset--color--panel-alt, #cddcde );
	--qmac-line: var( --wp--preset--color--line, #cccccc );

	/* ヘッダー画像（qmac-header-sky.jpg）の下端の実測色。
	 * サイドパネルの青空をこの色から始めることで、ヘッダーとの継ぎ目を作らない。 */
	--qmac-sky-join: #3272b0;
}

/* サイドパネルの青空を画面左端まで伸ばすため、横方向のはみ出しは切り落とす。 */
body {
	overflow-x: hidden;
}

/* ヘッダー・本文・フッターの間に親テーマの block-gap（24px）が入ると、
 * そこだけ地の色が覗いてヘッダーとサイドパネルの青空が切れてしまう。ここでは詰める。 */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------- 共通の見出し（旧サイトの Caption2 帯を踏襲） ---------- */

.qmac-section-heading {
	margin: 0 0 4px;
	padding: 4px 10px;
	background-color: var( --qmac-primary );
	color: #fff;
	font-size: var( --wp--preset--font-size--medium, 13px );
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.08em;
}

/* 現行サイトに合わせ、帯の色で予定と記録を見分ける（予定＝濃赤／記録＝濃緑）。 */
.qmac-section-heading--planned {
	background-color: var( --qmac-accent );
}

.qmac-section-heading--done {
	background-color: var( --qmac-primary );
}

/* ---------- 行事写真の帯（横スライド） ----------
 * 外部ライブラリは使わない。track を素の横スクロール領域にしておくことで、
 * タッチのスワイプ・トラックパッドの横スクロール・キーボードの矢印がそのまま効く。
 * 送りボタンは、はみ出しているときだけ JavaScript が表に出す。
 */

.qmac-photo-strip {
	position: relative;
	margin: 0 0 4px;
}

.qmac-photo-strip__viewport {
	overflow: hidden;
}

.qmac-photo-strip__track {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.qmac-photo-strip__track::-webkit-scrollbar {
	display: none;
}

.qmac-photo-strip__item {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	margin: 0;
	max-width: 100%;
	background: #fff;
	border: 1px solid var( --qmac-line );
}

.qmac-photo-strip__item a {
	display: block;
	background: none;
	line-height: 0;
	cursor: zoom-in;
}

/* 高さをそろえ、幅は写真の縦横比に応じて変える（幅は PHP 側が算出して指定する）。
 * 帯が幅いっぱいになるまで写真を集めるので、右側が空くことはない。
 * 入りきらない分は横スライドで見る。 */
.qmac-photo-strip__item img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

/* 枠の幅は PHP 側が写真の縦横比から算出して style で指定する。
 * 注釈は写真の中（下部）に重ねる。枠の高さが写真の高さで決まるので、
 * 注釈の行数が写真ごとに違っても、横に並んだときに高さがそろう。 */
.qmac-photo-strip:not( .qmac-photo-strip--event ) .qmac-photo-strip__item {
	position: relative;
}

.qmac-photo-strip:not( .qmac-photo-strip--event ) .qmac-photo-strip__item figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 14px 7px 5px;
	/* 写真の明暗にかかわらず読めるよう、下ほど濃くなる帯を敷く。 */
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0.72 ) 45% );
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
	pointer-events: none;
}

/* 注釈が1文字も無い写真では、帯そのものを出さない。 */
.qmac-photo-strip:not( .qmac-photo-strip--event ) .qmac-photo-strip__item figcaption:empty {
	display: none;
}

.qmac-photo-strip__item figcaption {
	flex: 1 0 auto;
	padding: 4px 7px;
	font-size: var( --wp--preset--font-size--x-small, 10px );
	line-height: 1.45;
	color: var( --qmac-contrast );
	background: var( --qmac-panel );
}

.qmac-photo-strip__date,
.qmac-photo-strip__title,
.qmac-photo-strip__note {
	display: block;
}

.qmac-photo-strip__date {
	color: var( --qmac-footer );
}

.qmac-photo-strip__title {
	font-weight: 700;
}

.qmac-photo-strip__note {
	color: var( --qmac-footer );
}

/* 写真に重ねたときは、下地が写真なので文字はすべて白にする。 */
.qmac-photo-strip:not( .qmac-photo-strip--event ) .qmac-photo-strip__date,
.qmac-photo-strip:not( .qmac-photo-strip--event ) .qmac-photo-strip__note {
	color: rgba( 255, 255, 255, 0.88 );
}

.qmac-photo-strip__nav {
	position: absolute;
	top: 96px; /* 写真部分（高さ190px）の中央 */
	transform: translateY( -50% );
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.7 );
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.qmac-photo-strip__nav:hover {
	background: rgba( 0, 0, 0, 0.7 );
}

.qmac-photo-strip__nav[hidden] {
	display: none;
}

.qmac-photo-strip__nav--prev {
	left: 4px;
}

.qmac-photo-strip__nav--next {
	right: 4px;
}

.qmac-photo-strip.qmac-empty p {
	margin: 0;
	padding: 12px;
	background: var( --qmac-panel );
	font-size: var( --wp--preset--font-size--small, 12px );
}

@media ( max-width: 600px ) {
	.qmac-photo-strip__item img {
		height: 150px;
	}
	.qmac-photo-strip__nav {
		top: 76px;
	}
}

/* ---------- 行事一覧（旧サイトの4列表を踏襲） ---------- */

.qmac-event-list {
	margin: 0 0 4px;
}

.qmac-event-list__table {
	width: 100%;
	margin: 0 0 4px;
	border-collapse: collapse;
	background: #fff;
	font-size: var( --wp--preset--font-size--small, 12px );
	table-layout: fixed;
}

.qmac-event-list__table:last-child {
	margin-bottom: 0;
}

.qmac-event-list__table th,
.qmac-event-list__table td {
	box-sizing: border-box;
	border: 1px solid var( --qmac-line );
	padding: 6px 8px;
	vertical-align: top;
	word-break: break-word;
}

.qmac-event-list__table thead th {
	background: var( --qmac-panel-alt );
	color: var( --qmac-primary );
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

/* 日時・行事・場所は幅を固定し、内容だけが余った幅をすべて受け取る。
 * 値は旧サイト（Day and Time 85px / Event 159px / Place 147px）に写真サムネイルの分を足したもの。 */
.qmac-event-list__table thead th:nth-child( 1 ) { width: 100px; }
.qmac-event-list__table thead th:nth-child( 2 ) { width: 170px; }
.qmac-event-list__table thead th:nth-child( 3 ) { width: auto; }
.qmac-event-list__table thead th:nth-child( 4 ) { width: 175px; }

.qmac-event-list__when {
	text-align: center;
	background: var( --qmac-panel );
}

.qmac-event-list__date {
	display: block;
	font-weight: 700;
}

/* 日時・行事・内容・場所は同じ大きさにそろえる（表全体の font-size を継承）。
 * 時刻だけは色を落として日付と見分けられるようにする。 */
.qmac-event-list__time {
	display: block;
	color: var( --qmac-footer );
	font-weight: 400;
}

.qmac-event-list__what {
	text-align: center;
	background: var( --qmac-panel );
}

.qmac-event-list__what a {
	background: none;
}

/* ---------- 行事欄（行事名＋副題＋資料・写真） ----------
 * 現行サイトの Event セルに入っていた
 * 「パンフレットの文字リンク」「Newsアイコン」「写真サムネイル」を再現する。
 */

.qmac-event-list__name {
	display: block;
	font-weight: 700;
}

.qmac-event-list__subtitle {
	display: block;
	font-weight: 700;
}

.qmac-event-list__docs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 5px;
}

.qmac-event-list__what a.qmac-event-list__doc,
.qmac-event-list__what a.qmac-event-list__news {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var( --qmac-line );
	background: #fff;
	font-size: var( --wp--preset--font-size--x-small, 10px );
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.qmac-event-list__what a.qmac-event-list__doc:hover {
	background: var( --qmac-accent );
	color: #fff;
	border-color: var( --qmac-accent );
}

/* 会報は現行サイトで帯画像だったので、テキストのバッジとして目立たせる。
 * 画像にしないのはロゴ・協会名と同じ理由（どの解像度でも鮮明・検索できる）。 */
.qmac-event-list__what a.qmac-event-list__news {
	border-color: var( --qmac-accent );
	background: var( --qmac-accent );
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.qmac-event-list__what a.qmac-event-list__news:hover {
	background: var( --qmac-primary );
	border-color: var( --qmac-primary );
	color: #fff;
}

.qmac-event-list__photos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 5px;
}

.qmac-event-list__what a.qmac-event-list__photo {
	display: inline-block;
	line-height: 0;
	background: none;
	border: 1px solid var( --qmac-line );
	cursor: zoom-in;
}

.qmac-event-list__photo img {
	display: block;
	width: auto;
	height: 46px;
	max-width: 120px;
	object-fit: cover;
}

/* 内容欄は現行サイトに合わせて全文を出す。長い回もあるので行間を詰める。
 * 編集画面で付けた太字・文字色・文字サイズ・リンクはそのまま反映される。 */
.qmac-event-list__abstract {
	line-height: 1.6;
}

/* 段落は空行を作らずに続ける（現行サイトは <br> 区切りで詰まっている）。 */
.qmac-event-list__abstract p {
	margin: 0;
}

.qmac-event-list__abstract p + p {
	margin-top: 0.2em;
}

.qmac-event-list__abstract ul,
.qmac-event-list__abstract ol {
	margin: 0.2em 0 0;
	padding-left: 1.4em;
}

.qmac-event-list__abstract li {
	margin: 0;
}

.qmac-event-list__abstract a {
	background: none;
}

/* 編集画面で選んだ文字サイズが表の中でも効くようにする。
 * 表を崩さないよう、特大だけは表の中では抑える。 */
.qmac-event-list__abstract .has-x-large-font-size {
	font-size: var( --wp--preset--font-size--large, 16px ) !important;
}

/* 本文に入れた画像。編集画面で指定した幅（style="width:150px" 等）はそのまま効く。
 * 指定が無い場合や列幅を超える場合だけ、列の中に収まるように抑える。 */
.qmac-event-list__abstract img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.qmac-event-list__abstract figure {
	margin: 0.3em 0;
	max-width: 100%;
}

.qmac-event-list__abstract figure img {
	display: block;
}

.qmac-event-list__abstract figcaption {
	margin-top: 2px;
	color: var( --qmac-footer );
	font-size: var( --wp--preset--font-size--x-small, 10px );
	line-height: 1.4;
}

/* 「左寄せ」「右寄せ」「中央」の回り込みも表の中で効かせる。 */
.qmac-event-list__abstract .alignleft {
	float: left;
	margin: 0 8px 4px 0;
}

.qmac-event-list__abstract .alignright {
	float: right;
	margin: 0 0 4px 8px;
}

.qmac-event-list__abstract .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* 回り込みが次の行にはみ出さないようにする。 */
.qmac-event-list__abstract::after {
	content: "";
	display: block;
	clear: both;
}

.qmac-event-list__empty {
	padding: 14px;
	text-align: center;
	color: var( --qmac-footer );
	background: var( --qmac-panel );
}

/* 左罫線も見出し帯と同じ色分けにする（予定＝濃赤／記録＝濃緑）。 */
.qmac-event-list--planned .qmac-event-list__when {
	border-left: 4px solid var( --qmac-accent );
}

.qmac-event-list--done .qmac-event-list__when {
	border-left: 4px solid var( --qmac-primary );
}

@media ( max-width: 782px ) {
	.qmac-event-list__table,
	.qmac-event-list__table tbody,
	.qmac-event-list__table tr,
	.qmac-event-list__table td {
		display: block;
		width: auto;
	}
	.qmac-event-list__table thead {
		display: none;
	}
	.qmac-event-list__row {
		margin-bottom: 4px;
		border: 1px solid var( --qmac-line );
	}
	.qmac-event-list__table td {
		border: none;
		border-bottom: 1px solid var( --qmac-line );
	}
}

/* 年度アーカイブ（/fiscal-year/2025/ など）。トップページと同じ表を使う。 */
.qmac-event-list--archive {
	margin-top: 4px;
}

.qmac-event-list--archive .qmac-event-list__when {
	border-left: 4px solid var( --qmac-primary );
}

/* ---------- 本文カラム（サイドパネルを左に配置） ----------
 * サイドパネルの背景をヘッダーの青空からそのまま続かせ、
 * 「ヘッダーとサイドパネルが一体」に見せる（現行サイトと同じ見え方）。
 * 現行サイトは左メニューフレームの body に 140x1200px の縦長JPEG を敷いていた。
 * ここでは画像を増やさず、その画像から実測した色でグラデーションを作って再現する。
 */

/* サイドパネルの青空をフッターまで届かせるため、カラムを main いっぱいに伸ばす。
 * :has() でサイドパネル付きのカラムを持つ main だけに限定する
 * （トップページと年度アーカイブ。行事の個別ページなどには影響させない）。 */
.wp-site-blocks > main:has( > .qmac-main-columns ) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-bottom: 0;
}

/* 記事はウィンドウの幅いっぱいまで使う（1200pxの制限を外す）。 */
.qmac-main-columns {
	flex: 1 0 auto;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* 余った幅は本文（写真・行事表）側がすべて受け取る。
 * サイドパネルは指定した幅のまま、伸び縮みしない。 */
.qmac-main-columns__body {
	flex-grow: 1;
	padding-bottom: 8px;
	/* サイドパネル（青空）に記事が密着して読みにくいため、本文側に左インデントを取る。 */
	padding-left: 16px;
}

/* 写真は横幅いっぱいに見せたいので、本文カラム直下の写真ブロックだけ
 * 同じ幅を左へ戻し、インデント前と同じ位置に置く。
 * 行事の個別ページの写真は白カード（.qmac-single-main）の中にあるため、
 * 枠線がずれないようカードごと寄せる（ここでは戻さない）。 */
.qmac-main-columns__body > .qmac-photo-strip,
.qmac-main-columns__body > .qmac-event-single__photos {
	margin-left: -16px;
}

/* サイドパネルは固定幅。ウィンドウが広くなっても広がらず、余りは記事側が受け取る。 */
.qmac-main-columns__side {
	flex-grow: 0;
	flex-shrink: 0;
	/* 指定した幅を「余白を含んだ外形」として扱う（幅の計算をずらさないため）。 */
	box-sizing: border-box;
}

.qmac-main-columns__side {
	position: relative;
	padding: 8px 8px 20px;
	color: #fff;
}

.qmac-main-columns__side::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: -50vw; /* 画面左端まで伸ばす。はみ出しは body の overflow-x で切る */
	z-index: 0;
	background-color: #6ca5d1; /* 1200pxを超えた分の下地（水色） */
	background-image: linear-gradient(
		to bottom,
		var( --qmac-sky-join ) 0,
		#1c5ea3 90px,
		#17559a 220px,
		#2a6cae 420px,
		#3b86be 700px,
		#5b9bcb 950px,
		#6ca5d1 1200px
	);
	background-repeat: no-repeat;
	background-size: 100% 1200px;
}

.qmac-main-columns__side > * {
	position: relative;
	z-index: 1;
}

/* ---------- サイドパネル（青空の上に置くため白文字） ---------- */

.qmac-side-panel {
	font-size: var( --wp--preset--font-size--small, 12px );
	color: #fff;
}

.qmac-side-panel__group {
	margin-bottom: 4px;
	border: 1px solid rgba( 255, 255, 255, 0.32 );
	background: rgba( 0, 22, 62, 0.44 );
}

.qmac-side-panel__heading {
	margin: 0;
	padding: 3px 8px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.26 );
	background: rgba( 0, 22, 62, 0.55 );
	color: #fff;
	font-size: var( --wp--preset--font-size--small, 12px );
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.qmac-side-panel ul {
	margin: 0;
	padding: 4px 8px;
	list-style: none;
}

.qmac-side-panel li {
	margin: 0;
	padding: 2px 0;
	border-bottom: 1px dotted rgba( 255, 255, 255, 0.28 );
}

.qmac-side-panel li:last-child {
	border-bottom: none;
}

.qmac-side-panel a {
	display: block;
	background: none;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.qmac-side-panel a:hover {
	background: var( --qmac-accent );
	color: #fff;
	text-decoration: none;
}

.qmac-side-panel > p {
	margin: 0;
	padding: 8px;
	color: #fff;
}

/* 過去年度は18年分（2008〜2025）入る。縦一列だと長くなりすぎるため、
 * 幅に応じて2〜3列に折り返すタイル表示にして、スクロールなしで収める。 */
.qmac-side-panel__years {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 58px, 1fr ) );
	gap: 3px;
	padding: 6px;
	list-style: none;
}

.qmac-side-panel__years li {
	margin: 0;
	padding: 0;
	border-bottom: none;
}

.qmac-side-panel__years a {
	display: block;
	padding: 3px 2px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	background: rgba( 0, 22, 62, 0.4 );
	color: #fff;
	font-size: var( --wp--preset--font-size--x-small, 10px );
	text-align: center;
	white-space: nowrap;
}

/* 旧サイトの保存版（1992〜2007年度）。WordPress の年度と区別がつくよう、わずかに落とす。 */
.qmac-side-panel__years a.qmac-side-panel__legacy {
	border-style: dashed;
	opacity: 0.92;
}

.qmac-side-panel__years a:hover {
	background: var( --qmac-accent );
	color: #fff;
	text-decoration: none;
}

@media ( max-width: 782px ) {
	.qmac-main-columns {
		flex-wrap: wrap;
	}
	/* 画面が狭いときは本文（写真・行事一覧）を先に見せ、サイドパネルを後ろに送る。 */
	.qmac-main-columns__side {
		order: 2;
		margin-top: 8px;
	}
	.qmac-main-columns__body {
		order: 1;
		/* 縦積みではサイドパネルが横に来ないため、左インデントは不要。 */
		padding-left: 0;
	}
	.qmac-main-columns__body > .qmac-photo-strip,
	.qmac-main-columns__body > .qmac-event-single__photos {
		margin-left: 0;
	}
	/* 縦に積むとヘッダーと繋がらないため、青空は単純な上下グラデーションにする。 */
	.qmac-main-columns__side::before {
		background-image: linear-gradient( to bottom, #2a6cae 0, #5b9bcb 100% );
		background-size: 100% 100%;
	}
}

/* ---------- ヘッダー ----------
 * 旧サイトのヘッダー帯（960x110・青空にロゴと協会名が焼き込まれたJPEG）を再現する。
 * 焼き込み部分は使わず、空だけを切り出した qmac-header-sky.jpg を背景に敷き、
 * ロゴ（透過GIF）と協会名は前面に重ねる。こうすると幅や画面解像度が変わっても粗くならない。
 * 下線は入れない。サイドパネルの青空へそのまま繋げるため。
 */

.qmac-header {
	position: relative;
	background-color: #2068aa; /* 画像が出るまでの下地。空の中央部の実測色。 */
	background-image: url( "../images/qmac-header-sky.jpg" );
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.qmac-header__inner {
	position: relative;
}

/* 左端をうっすら白く抜いて、濃紅色のロゴが青空の上でも読めるようにする（旧サイトの淡色パネルの再現）。
 * 白抜きはロゴの右端で終わらせる。協会名はその右の青空側に置くため（指示5）。
 * --qmac-logo-end = コンテンツ左端 + 左パディング16px + ロゴ幅163px。 */
.qmac-header__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	--qmac-logo-end: calc( max( 0px, 50% - 600px ) + 179px );
	background: linear-gradient(
		to right,
		rgba( 255, 255, 255, 0.95 ) 0,
		rgba( 255, 255, 255, 0.92 ) calc( var( --qmac-logo-end ) - 55px ),
		rgba( 255, 255, 255, 0.4 ) var( --qmac-logo-end ),
		rgba( 255, 255, 255, 0 ) calc( var( --qmac-logo-end ) + 34px )
	);
	/* 帯の下端は空のままにする。白抜きが下端まで残ると、
	 * ヘッダーとサイドパネルの境目に横一直線の段差が出るため。 */
	-webkit-mask-image: linear-gradient( to bottom, #000 0, #000 86%, rgba( 0, 0, 0, 0 ) 100% );
	mask-image: linear-gradient( to bottom, #000 0, #000 86%, rgba( 0, 0, 0, 0 ) 100% );
	pointer-events: none;
}

.qmac-header__row {
	position: relative; /* ::before より前面に出す */
	z-index: 1;
	/* 旧サイトの帯は138px。画面を広く使うため40%低くした（138 → 83px）。
	 * padding を含んだ値（box-sizing: border-box）。 */
	min-height: 83px;
	padding: 8px 16px;
	gap: 20px; /* ロゴと協会名の間隔（指示5） */
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.qmac-header__logo {
	flex: 0 0 auto;
}

/* ロゴは帯の高さに合わせる。上下パディング8pxずつを引いた67pxが入る高さ。
 * 幅は縦横比（615:253）なりに決まるので指定しない（67px × 2.43 ≒ 163px）。 */
.qmac-header__logo img,
.qmac-header__logo .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 67px;
}

/* 協会名（サイト名）。旧サイトの帯に焼き込まれていた白抜き文字を、テキストとして再現する。 */
.qmac-header__name {
	flex: 0 1 auto;
	margin: 0;
	font-size: clamp( 16px, 2.2vw, 26px );
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	white-space: nowrap;
}

.qmac-header__name,
.qmac-header__name a {
	color: #fff;
	background: none;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 ), 0 0 10px rgba( 0, 32, 72, 0.5 );
}

.qmac-header__name a:hover {
	color: #fff;
	text-decoration: underline;
}

@media ( max-width: 600px ) {
	.qmac-header__row {
		min-height: 0;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
		gap: 8px;
	}
	.qmac-header__name {
		white-space: normal;
	}
	.qmac-header__inner::before {
		background: linear-gradient(
			to bottom,
			rgba( 255, 255, 255, 0.9 ) 0%,
			rgba( 255, 255, 255, 0.5 ) 55%,
			rgba( 255, 255, 255, 0 ) 100%
		);
	}
}

/* ---------- フッター ----------
 * 旧サイト Qmac.css の .FooterT（背景 #53747B・白文字・12px・行間160%）を踏襲する。
 * 連絡先の内容は QMAC_Menu.htm のフッターと 00Index/14NyukainoOsusume.htm から抽出したもの。
 */

/* 内容が少ないページでもフッターが画面下端まで下りるようにする（帯が宙に浮いて見えるのを防ぐ）。 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.qmac-footer {
	margin-top: 0;
	padding: 18px 16px;
	background-color: var( --qmac-footer );
	color: #fff;
	font-size: var( --wp--preset--font-size--small, 12px );
	line-height: 1.6;
	border-top: 3px solid var( --qmac-primary );
}

.qmac-footer p {
	margin: 0 0 4px;
	color: #fff;
}

.qmac-footer a {
	color: #fff;
	background: none;
	text-decoration: underline;
}

.qmac-footer__name {
	font-size: var( --wp--preset--font-size--medium, 13px );
	font-weight: 700;
	letter-spacing: 0.06em;
}

.qmac-footer__copyright {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba( 255, 255, 255, 0.35 );
	font-size: var( --wp--preset--font-size--x-small, 10px );
}

@media ( max-width: 600px ) {
	.qmac-footer__contact {
		/* 「／」区切りだと折り返しが読みにくいため、狭い画面では行を分ける。 */
		word-break: keep-all;
	}
}

/* ---------- 行事の個別ページ ----------
 * 一覧の表には収まらない情報（資料PDF・写真）の置き場。
 * 表と同じ配色・罫線でそろえ、同じサイトの続きに見えるようにする。
 */

/* 行事の個別ページの本文枠。
 * サイドパネル付きの2カラムに入れたため、白地の枠は main ではなく本文カラムの中の
 * このグループが持つ（枠の中で文字が縁に触れないよう、内側の余白もここで取る）。 */
.qmac-single-main {
	background: #fff;
	border: 1px solid var( --qmac-line );
	margin-top: 0;
	margin-bottom: 8px;
	padding: 8px;
	/* 中身（880px）＋左右の余白ぶん。カラムが広くても白地だけが伸びないようにする。 */
	max-width: 896px;
}

/* 写真はページの先頭。見出しを付けず、枠の幅いっぱいに出す。 */
.qmac-event-single__photos {
	/* 枠の内側の余白（8px）を打ち消し、写真だけは枠いっぱいに出す。 */
	margin: -8px -8px 10px;
}

.qmac-event-single__title {
	margin: 0 0 2px;
	padding-bottom: 6px;
	border-bottom: 3px solid var( --qmac-primary );
}

.qmac-event-single__subtitle {
	margin: 0 0 10px;
	font-size: var( --wp--preset--font-size--large, 16px );
	font-weight: 700;
	color: var( --qmac-primary );
}

.qmac-event-single__meta {
	width: 100%;
	margin: 0 0 14px;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--small, 12px );
}

.qmac-event-single__meta th,
.qmac-event-single__meta td {
	border: 1px solid var( --qmac-line );
	padding: 5px 8px;
	vertical-align: top;
	text-align: left;
}

.qmac-event-single__meta th {
	width: 92px;
	background: var( --qmac-panel-alt );
	color: var( --qmac-primary );
	white-space: nowrap;
}

.qmac-event-single__meta td {
	background: var( --qmac-panel );
}

.qmac-event-single__status {
	color: var( --qmac-accent );
	font-weight: 700;
}

.qmac-event-single__body {
	font-size: var( --wp--preset--font-size--small, 12px );
	line-height: 1.8;
}

/* 本文に入れた画像。指定した幅は尊重し、本文の幅を超える分だけ抑える。 */
.qmac-event-single__body img {
	max-width: 100%;
	height: auto;
}

.qmac-event-single__body figure {
	margin: 0.8em 0;
	max-width: 100%;
}

.qmac-event-single__body figcaption {
	margin-top: 3px;
	color: var( --qmac-footer );
	font-size: var( --wp--preset--font-size--x-small, 10px );
	line-height: 1.5;
}

.qmac-event-single__body .alignleft {
	float: left;
	margin: 0 12px 6px 0;
}

.qmac-event-single__body .alignright {
	float: right;
	margin: 0 0 6px 12px;
}

.qmac-event-single__body .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.qmac-event-single__body::after {
	content: "";
	display: block;
	clear: both;
}

.qmac-event-single__docs {
	margin-top: 16px;
}

.qmac-event-single__docs ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var( --qmac-line );
	border-bottom: none;
}

.qmac-event-single__docs li {
	margin: 0;
	padding: 6px 10px;
	border-bottom: 1px solid var( --qmac-line );
	background: var( --qmac-panel );
	font-size: var( --wp--preset--font-size--small, 12px );
}

.qmac-event-single__docs li a {
	font-weight: 700;
}

.qmac-event-single__filemeta {
	margin-left: 8px;
	color: var( --qmac-footer );
	font-size: var( --wp--preset--font-size--x-small, 10px );
}

/* 1枚だけのときは大きく1枚で見せる。2枚以上は横スライド（下の --event を参照）。 */
.qmac-event-single__photogrid--single {
	display: block;
}

.qmac-event-single__photo {
	margin: 0;
	background: var( --qmac-panel );
}

.qmac-event-single__photo a {
	display: block;
	background: none;
	line-height: 0;
	cursor: zoom-in;
}

.qmac-event-single__photo img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* 1枚のときは切り抜かずに全体を見せる。 */
.qmac-event-single__photogrid--single .qmac-event-single__photo img {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	background: #fff;
}

.qmac-event-single__photo figcaption {
	padding: 4px 7px;
	font-size: var( --wp--preset--font-size--x-small, 10px );
	line-height: 1.5;
	color: var( --qmac-contrast );
}

@media ( max-width: 600px ) {
	.qmac-event-single__photogrid {
		grid-template-columns: 1fr;
	}
}

/* 行事ページの写真スライド（2枚以上のとき）。
 * 構造はトップページの写真帯と同じなので、送りボタンの制御は共通の処理が動く。
 * 違いは高さと注釈の中身だけ（日付・行事名はページ上部に出ているので、ここはコメントのみ）。 */
.qmac-photo-strip--event {
	margin: 0 -1px 10px;
}

.qmac-photo-strip--event .qmac-photo-strip__item {
	border: none;
	border-right: 1px solid #fff;
	background: var( --qmac-panel );
}

.qmac-photo-strip--event .qmac-photo-strip__item:last-child {
	border-right: none;
}

.qmac-photo-strip--event .qmac-photo-strip__item img {
	height: 240px;
	max-width: none;
}

.qmac-photo-strip--event .qmac-photo-strip__item figcaption {
	padding: 4px 7px;
	background: var( --qmac-panel );
	color: var( --qmac-contrast );
}

.qmac-photo-strip--event .qmac-photo-strip__nav {
	top: 121px;
}

@media ( max-width: 600px ) {
	.qmac-photo-strip--event .qmac-photo-strip__item img {
		height: 180px;
	}
	.qmac-photo-strip--event .qmac-photo-strip__nav {
		top: 91px;
	}
}

/* ---------- 拡大表示（ライトボックス） ---------- */
/* ---------- 資料PDFのモーダル ----------
 * 写真と同じ枠を使い、中身だけ差し替える。
 * PDF はブラウザ内蔵のビューアで表示するので、外部ライブラリは要らない。
 * スマートフォンなど埋め込めない環境では、これまでどおり別のタブで開く（JS側で判定）。
 */

.qmac-lightbox--doc {
	padding: 16px;
}

.qmac-lightbox__doc {
	display: flex;
	flex-direction: column;
	width: min( 1100px, 96vw );
	height: 92vh;
	background: #fff;
	border: 1px solid var( --qmac-line );
}

.qmac-lightbox__doc[hidden] {
	display: none;
}

.qmac-lightbox__docbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 44px 6px 10px;
	background: var( --qmac-primary );
	color: #fff;
	font-size: var( --wp--preset--font-size--small, 12px );
}

.qmac-lightbox__docname {
	flex: 1 1 auto;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qmac-lightbox__docopen {
	flex: 0 0 auto;
	color: #fff;
	background: none;
	text-decoration: underline;
	white-space: nowrap;
}

.qmac-lightbox__docopen:hover {
	color: #fff;
	background: var( --qmac-accent );
}

.qmac-lightbox__docframe {
	flex: 1 1 auto;
	width: 100%;
	border: none;
	background: #525659;
}

/* 資料を開いているときは、閉じるボタンを枠の角に重ねる。 */
.qmac-lightbox--doc .qmac-lightbox__close {
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	font-size: 18px;
}


body.qmac-lightbox-open {
	overflow: hidden;
}

.qmac-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 0, 0, 0, 0.82 );
}

.qmac-lightbox[hidden] {
	display: none;
}

.qmac-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
}

.qmac-lightbox__image {
	max-width: 100%;
	max-height: 80vh;
	display: block;
	margin: 0 auto;
	background: #fff;
}

.qmac-lightbox__caption:empty {
	display: none;
}

.qmac-lightbox__caption {
	margin-top: 10px;
	color: #fff;
	font-size: var( --wp--preset--font-size--small, 12px );
}

.qmac-lightbox__close {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	color: var( --qmac-contrast );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.qmac-lightbox__close:hover {
	background: #fff;
}

/* ---------- サイドパネルの「ホーム」 ----------
 * 枠（協会について／名簿／過去の年度）とは別扱いにして、いちばん上に単独で置く。
 * 見出しを持たない1本のボタンなので、枠と同じ枠線・背景を直接当てている。
 */

.qmac-side-panel__home {
	margin-bottom: 4px;
	border: 1px solid rgba( 255, 255, 255, 0.32 );
	background: rgba( 0, 22, 62, 0.55 );
}

.qmac-side-panel__home a {
	display: block;
	padding: 4px 8px;
	color: #fff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
	letter-spacing: 0.04em;
}

.qmac-side-panel__home a:hover {
	background: var( --qmac-accent );
}

/* いま見ているページを反転させて、どこにいるか分かるようにする。 */
.qmac-side-panel a[ aria-current="page" ] {
	background: var( --qmac-accent );
}

/* ---------- 固定ページの本文 ----------
 * 行事の個別ページ（qmac-event-single）と字送りを揃える。
 * 余白は最小限。見出しは本文と同じ幅の中で左に寄せる。
 */

.qmac-page {
	padding: 8px 0 24px;
}

/* 見出しの大きさ・下線は行事の個別ページ（qmac-event-single__title）に合わせる。 */
.qmac-page__title {
	margin: 0 0 12px;
	padding: 0 0 6px;
	border-bottom: 3px solid var( --qmac-primary );
	font-size: var( --wp--preset--font-size--x-large, 20px );
	font-weight: 700;
	line-height: 1.4;
}

.qmac-page__body {
	font-size: var( --wp--preset--font-size--medium, 14px );
	line-height: 1.9;
}

.qmac-page__body > * {
	margin-top: 0;
	margin-bottom: 0.9em;
}

.qmac-page__body > *:last-child {
	margin-bottom: 0;
}

.qmac-page__body h2 {
	margin: 1.6em 0 0.6em;
	padding: 3px 8px;
	background: #e8f1f8;
	border-left: 4px solid var( --qmac-accent );
	font-size: var( --wp--preset--font-size--medium, 14px );
	font-weight: 700;
	line-height: 1.5;
}

.qmac-page__body h2:first-child {
	margin-top: 0;
}

.qmac-page__body h3 {
	margin: 1.2em 0 0.4em;
	font-size: var( --wp--preset--font-size--medium, 14px );
	font-weight: 700;
}

/* 「（会社名五十音順　敬称略）2026年6月現在」のような注記。表の直前に置く。 */
.qmac-page__note {
	margin: 0 0 6px;
	color: #555;
	font-size: var( --wp--preset--font-size--small, 12px );
	text-align: right;
}

/* 原本の画像（協会の目的と事業・協会の組織）は幅いっぱいまで。 */
.qmac-page__body .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* ---------- 名簿の表 ----------
 * 役員・委員名簿と会員企業・団体で共通。行数が多いので行間は詰める。
 * 事務局が編集しやすいよう、標準の「テーブル」ブロックをそのまま使っている。
 * テーブルブロックはセル単位のクラスを保持しないため、列の指定は nth-child で行う。
 * 列構成に応じて figure 側に修飾クラスを付ける:
 *   --3col      … 役職 / 会社名・所属 / 氏名
 *   --name-only … 所属 / 氏名（特別会員）
 *   --even      … 均等2列（会員企業・団体）
 */

.qmac-roster-table {
	margin: 0 0 0.9em;
}

.qmac-roster-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--small, 12px );
	line-height: 1.6;
}

.qmac-roster-table td {
	padding: 3px 6px;
	border: 1px solid #b9cddd;
	vertical-align: middle;
	word-break: break-word;
}

/* 役職。折り返させず、幅を固定する。 */
.qmac-roster-table--3col td:first-child {
	width: 7em;
	background: #f2f7fb;
	white-space: nowrap;
}

/* 氏名。原本と同じく中央寄せ。 */
.qmac-roster-table--3col td:last-child,
.qmac-roster-table--name-only td:last-child {
	width: 8.5em;
	text-align: center;
	white-space: nowrap;
}

/* 会員企業・団体は均等2列。 */
.qmac-roster-table--even td {
	width: 50%;
}

@media ( max-width: 782px ) {
	.qmac-roster-table table {
		table-layout: auto;
	}
	.qmac-roster-table td {
		width: auto !important;
		white-space: normal;
	}
}

/* ---------- ご挨拶ページの顔写真 ----------
 * 会長は本文の前に、副会長2名は本文のあとに横並びで置く。
 * 幅が狭いときは縦に積む。
 */

.qmac-greeting-lead {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 1.2em;
}

.qmac-greeting-lead__photo {
	flex: 0 0 auto;
	width: 120px;
}

.qmac-greeting-lead__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.qmac-greeting-lead__name {
	flex: 1 1 auto;
	font-size: var( --wp--preset--font-size--small, 12px );
	line-height: 1.8;
}

.qmac-greeting-lead__name strong {
	display: block;
	margin-top: 4px;
	font-size: var( --wp--preset--font-size--medium, 14px );
	letter-spacing: 0.4em;
}

.qmac-greeting-vice {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 1.6em;
	text-align: center;
}

.qmac-greeting-vice figure {
	margin: 0;
	flex: 0 1 220px;
}

.qmac-greeting-vice img {
	display: block;
	width: 130px;
	height: auto;
	margin: 0 auto 6px;
}

.qmac-greeting-vice figcaption {
	font-size: var( --wp--preset--font-size--small, 12px );
	line-height: 1.7;
}

.qmac-greeting-vice figcaption strong {
	display: block;
	margin-top: 2px;
	font-size: var( --wp--preset--font-size--medium, 14px );
	letter-spacing: 0.4em;
}

@media ( max-width: 782px ) {
	.qmac-greeting-lead {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.qmac-greeting-vice {
		flex-direction: column;
		gap: 20px;
	}
}

/* ---------- 事務局向けマニュアルのページ ----------
 * 長い1枚もののページ。目次・表・画像の置き場をここで整える。
 * 他の固定ページに影響させないよう、すべて .qmac-manual の中だけに限定する。
 */

/* 目次。押すとその章へ飛ぶ。 */
.qmac-manual h2#toc + .wp-block-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 2px 12px;
	margin: 0 0 1em;
	padding: 10px 12px;
	border: 1px solid #b9cddd;
	background: #f2f7fb;
	list-style: none;
}

.qmac-manual h2#toc + .wp-block-list li {
	margin: 0;
}

/* 章の見出しは、飛んできたときに見つけやすいよう強めにする。 */
.qmac-manual h2 {
	margin: 1.8em 0 0.6em;
	padding: 4px 10px;
	background: var( --qmac-primary );
	border-left: none;
	color: #fff;
	font-size: var( --wp--preset--font-size--medium, 13px );
}

.qmac-manual h2#toc {
	margin-top: 0;
}

.qmac-manual h4 {
	margin: 1.2em 0 0.4em;
	font-size: var( --wp--preset--font-size--medium, 13px );
	font-weight: 700;
	color: var( --qmac-primary );
}

/* 表。狭い画面でははみ出さずに横スクロールする。 */
.qmac-manual .wp-block-table {
	margin: 0 0 1em;
	overflow-x: auto;
}

.qmac-manual .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--small, 12px );
	line-height: 1.7;
}

.qmac-manual .wp-block-table th,
.qmac-manual .wp-block-table td {
	padding: 4px 8px;
	border: 1px solid #b9cddd;
	vertical-align: top;
	text-align: left;
}

.qmac-manual .wp-block-table th {
	background: #e8f1f8;
	font-weight: 700;
	white-space: nowrap;
}

/* 引用（「なぜそうするのか」の補足）。 */
.qmac-manual .wp-block-quote {
	margin: 0 0 1em;
	padding: 6px 12px;
	border-left: 4px solid #7aa7c7;
	background: #f7fafc;
	font-size: var( --wp--preset--font-size--small, 12px );
}

.qmac-manual .wp-block-quote p {
	margin: 0;
}

/* 画面の写真を貼る場所の指示。TAMが貼り終えたら消す前提の作業メモ。 */
.qmac-manual-shot-note {
	margin: 0 0 6px;
	padding: 6px 10px;
	border: 1px dashed #b32d2e;
	background: #fdf6f6;
	color: #7a2b2c;
	font-size: var( --wp--preset--font-size--x-small, 10px );
	line-height: 1.6;
}

/* 画像を入れる前の空の枠は、公開画面では何も出さない。
 * 編集画面では中に選択用の部品が入るため :empty に当たらず、そのまま見える。 */
figure.qmac-manual-shot:empty {
	display: none;
}

.qmac-manual .qmac-manual-shot img {
	max-width: 100%;
	height: auto;
	border: 1px solid #c3c4c7;
}

/* 手順の中のキー表記・スラッグなど。 */
.qmac-manual code {
	padding: 1px 4px;
	background: #eef2f5;
	border: 1px solid #d7dee4;
	border-radius: 2px;
	font-size: 0.95em;
}

/* このページの直し方（更新の経路を1本にするための注記）。 */
.qmac-manual-policy {
	margin: 0 0 14px;
	padding: 8px 12px;
	border: 1px solid #9ab7cd;
	border-left: 4px solid var( --qmac-primary );
	background: #f2f7fb;
	font-size: var( --wp--preset--font-size--small, 12px );
	line-height: 1.8;
}

@media ( max-width: 782px ) {
	.qmac-page:has( .qmac-manual ) {
		padding-left: 0;
	}
}