@charset "utf-8";

/* ============================================================
   変数
   ============================================================ */

:root {
	/* 色 */
	--color-primary: #557079;
	--color-secondary: #002A42;
	--color-text: #ffffff;
	--color-link: #557079;
	--color-line: #ffffff;
	--color-hover-bg: #ffffff;
	--color-hover-text: #2a3a44;
	--color-footer-bg: #002A42;
	--color-page-bg: #7a8c99;

	/* レイアウト */
	--content-max-width: 1600px;
	--footer-offset: 96px;
	--bottom-chrome: 96px;
	--main-inline-pad: 16px;
	--main-block-pad: 20px;
	--theme-margin-bottom: 24px;
	--nav-line-left: 28px;
	--nav-inset: 20px; /* PC：ブラウザ左端〜ハンバーガー */
	--nav-hamburger-size: 32px;
	--nav-hamburger-gap: 20px; /* ハンバーガー〜縦罫線 */
	--nav-width: 280px;
	--nav-top-offset: 0px;
	--contents-gap: 20px;
	--layout-shift-right: 0px;
	--overview-like-max: 300px;

	/* 背景・メニュー */
	--hero-bg-size: cover;
	--hero-bg-position: center top;
	--ease-menu: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (width >= 768px) {
	:root {
		--nav-width: 300px;
		--footer-offset: 80px;
		--bottom-chrome: 160px;
		--layout-shift-right: 50px;
		--main-inline-pad: 40px;
		--main-block-pad: 28px;
		--theme-margin-bottom: 32px;
		--overview-like-max: 340px;
		/* PC：main_container 非依存。ブラウザ左から固定 */
		--nav-line-left: calc(
			var(--nav-inset) + var(--nav-hamburger-size) + var(--nav-hamburger-gap)
		);
		/* theme は main_container 外。左右余白 30px */
		--theme-inline-pad: 30px;
		--theme-width: calc(100vw - var(--theme-inline-pad) * 2);
		/* theme_large.png（4000×258）の比率 */
		--theme-height: calc(var(--theme-width) * 258 / 4000);
		/* メニューリスト実寸（JSで計測）。バナー上で下端固定 */
		--nav-panel-height: 480px;
		/* 通常高さではスクロールしないよう余裕を足す */
		--nav-panel-extra: 48px;
	}

	/* トップPC：ファーストビューはバナーまで（フッターはスクロール完了後） */
	body:not(.page-child):not(.is-footer-revealed) {
		--footer-offset: 0px;
		--bottom-chrome: 80px;
	}
}

@media (width >= 1200px) {
	:root {
		--nav-width: 320px;
		--main-inline-pad: 48px;
		--main-block-pad: 36px;
		--theme-margin-bottom: 40px;
		--overview-like-max: 380px;
	}
}

/* ノートPCなど縦が低い環境：開催概要を縮小してテーマとの重なりを緩和 */
@media (width >= 768px) and (height <= 850px) {
	:root {
		--overview-like-max: 260px;
		--theme-margin-bottom: 16px;
		--main-block-pad: 16px;
		/* 縦線がテーマへ突き抜けないようパネル余白も抑える */
		--nav-panel-extra: 24px;
	}

	body:not(.page-child) .society_overview_container {
		margin-bottom: 24px;
	}
}

@media (width >= 768px) and (height <= 750px) {
	:root {
		--overview-like-max: 220px;
		--theme-margin-bottom: 12px;
		--main-block-pad: 12px;
		--nav-panel-extra: 12px;
	}

	body:not(.page-child) .society_overview_container {
		margin-bottom: 16px;
	}
}

/*
 * 幅が狭い＋低高さ（例: 1024×663）
 * 上位解像度（幅 1101px〜 や 高さ 751px〜）には適用しない
 */
@media (width >= 768px) and (width <= 1100px) and (height <= 750px) {
	:root {
		--overview-like-max: 180px;
		--theme-margin-bottom: 8px;
		--main-block-pad: 10px;
		--nav-panel-extra: 8px;
	}

	body:not(.page-child) .society_overview_container {
		margin-bottom: 12px;
	}

	/* NEWS：表示行数・余白を抑えてコンパクトに */
	body:not(.page-child) .news h2 {
		font-size: 13px;
		margin-bottom: 6px;
	}

	body:not(.page-child) .news-list_wrap {
		min-height: calc(1.6em * 1 + 4px);
		height: calc(1.6em * 2 + 4px);
		padding-right: 8px;
	}

	body:not(.page-child) .news-list li {
		font-size: 11px;
		gap: 8px;
		margin-bottom: 4px;
	}
}

/* SPのみ表示 */
.sp_on {
	display: inline;

	@media (width >= 768px) {
		& {
			display: none;
		}
	}
}

/* ============================================================
   ベース
   ============================================================ */

html {
	overflow-y: scroll;
	background-color: var(--color-page-bg);
}

body {
	height: auto;
	min-height: 100vh;
	font-family: "Noto Sans JP", Avenir, Helvetica, Arial, Verdana, Roboto, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text);
	background: transparent;
	overflow-x: hidden;

	@media (width >= 768px) {
		& {
			font-size: 15px;
		}
	}
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover:not(.btn) {
	opacity: 0.8;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* スクロール誘導（トップPC・ファーストビュー） */
.scroll_down {
	display: none;
}

@media (width >= 768px) {
	body:not(.page-child) .scroll_down {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		left: 50%;
		bottom: var(--bottom-chrome, 80px);
		z-index: 16;
		transform: translateX(-50%);
		opacity: 1;
		visibility: visible;
		pointer-events: none;
		transition:
			opacity 0.45s var(--ease-menu),
			visibility 0.45s var(--ease-menu);
	}

	body:not(.page-child) .scroll_down.is-hidden {
		opacity: 0;
		visibility: hidden;
	}

	body:not(.page-child).menu-open .scroll_down {
		opacity: 0;
		visibility: hidden;
	}

	.scroll_down__text {
		display: inline-flex;
		align-items: center;
		gap: 0.85em;
		position: relative;
		padding-bottom: 52px;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.04em;
		line-height: 1;
		color: #fff;
		white-space: nowrap;
	}

	/* 「Scroll」「Down」の間から下へ伸びるライン */
	.scroll_down__text::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0.35em;
		width: 1px;
		height: calc(100% - 0.35em);
		background: #fff;
		transform: translateX(-50%);
	}

	@media (prefers-reduced-motion: reduce) {
		body:not(.page-child) .scroll_down {
			transition: none;
		}
	}
}

/* ページトップへもどる */
.page_top {
	appearance: none;
	width: 40px;
	height: 40px;
	right: 12px;
	bottom: 180px;
	position: fixed;
	background-color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	border: none;
	border-radius: 50%;
	padding: 0;

	&::before {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		border-top: 2px solid var(--color-footer-bg);
		border-right: 2px solid var(--color-footer-bg);
		transform: rotate(-45deg);
		margin-top: 4px;
	}

	&:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	@media (width >= 1200px) {
		& {
			right: 24px;
		}
	}
}

/* ============================================================
   ヒーロー背景（目の切替）
   ============================================================ */

.hero_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.hero_bg__off,
.hero_bg__on {
	position: absolute;
	inset: 0;
	background-position: var(--hero-bg-position);
	background-repeat: no-repeat;
	background-size: var(--hero-bg-size);
}

/* 閉じ目を下層に常時表示し、開き目はトランジションなしで即切り替え */
.hero_bg__off {
	z-index: 1;
	background-image: url("../images/lagrg_close.jpg");
	opacity: 1;
}

.hero_bg__on {
	z-index: 2;
	background-image: url("../images/large_open.jpg");
	opacity: 0;
}

body.menu-open .hero_bg__on {
	opacity: 1;
}

/* ============================================================
   メインレイアウト
   ============================================================ */

.wrapper {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.main {
	position: relative;
}

.main_container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
	padding: var(--main-block-pad) var(--main-inline-pad) 40px;
	box-sizing: border-box;
	pointer-events: none;

	@media (width >= 768px) {
		& {
			padding-bottom: 60px;
		}
	}

	@media (width >= 1200px) {
		& {
			padding-bottom: 80px;
		}
	}
}

/* トップPC：テーマ〜バナー上端までを表示領域にし、contents を下端寄せで固定 */
@media (width >= 768px) {
	body:not(.page-child) .main_container {
		display: flex;
		flex-direction: column;
		bottom: var(--bottom-chrome, 160px);
		height: auto;
		min-height: calc(100dvh - var(--bottom-chrome, 160px));
		max-height: calc(100dvh - var(--bottom-chrome, 160px));
		padding-bottom: 20px;
		overflow: hidden;
	}

	body:not(.page-child) .contents {
		flex: 0 1 auto;
		display: flex;
		flex-direction: column;
		margin-top: auto;
		min-height: 0;
		overflow: hidden;
	}

	body:not(.page-child) .society_overview_container {
		flex: 0 1 auto;
		min-height: 0;
		margin-bottom: 10px;
	}

	body:not(.page-child) .society_overview_img {
		max-height: 100%;
		width: auto;
		object-fit: contain;
		object-position: left top;
	}

	body:not(.page-child) .news {
		flex: 0 0 auto;
	}
}

.theme,
.contents,
.nav_wrap,
.banner_wrap,
.footer {
	pointer-events: auto;
}

.scroll_spacer {
	display: block;
	width: 100%;
	height: 150vh;
	pointer-events: none;
}

/* ============================================================
   テーマ
   ============================================================ */

.theme {
	width: 100%;
	margin: 0 0 var(--theme-margin-bottom);

	a {
		display: block;
		width: 100%;
	}

	picture {
		display: block;
		width: 100%;
	}

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

/* main_container 外：ビューポート左右いっぱいに広げ、左右に余白 */
.main > .theme {
	width: auto;
	max-width: none;
	margin-left: var(--main-inline-pad);
	margin-right: var(--main-inline-pad);
	box-sizing: border-box;
}

@media (width >= 768px) {
	.main > .theme {
		/* PC：左右 --theme-inline-pad・固定してビューポートいっぱいに配置 */
		position: fixed;
		top: var(--main-block-pad);
		left: var(--theme-inline-pad);
		right: var(--theme-inline-pad);
		z-index: 3;
		width: auto;
		margin: 0;
	}
}

/* ============================================================
   コンテンツ / 開催概要
   ============================================================ */

.contents {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin-left: calc(var(--contents-gap) + var(--layout-shift-right));
	transition: opacity 0.45s var(--ease-menu), visibility 0.45s;

	@media (width >= 768px) {
		& {
			max-width: 480px;
		}
	}

	@media (width >= 1200px) {
		& {
			max-width: 460px;
		}
	}
}

/* PC：メニュー展開時も開催概要画像は残し、薄くぼかしてメニュー文字を優先 */
body.menu-open .contents {
	@media (width >= 768px) {
		pointer-events: none;

		.society_overview_img {
			opacity: 0.25;
			filter: blur(2px);
		}

		.news {
			opacity: 0;
			visibility: hidden;
		}
	}
}

/* ページ遷移直前の即閉じ：開閉トランジションを無効化 */
body.is-menu-snap .nav,
body.is-menu-snap .nav .menu,
body.is-menu-snap .hero_bg__off,
body.is-menu-snap .hero_bg__on,
body.is-menu-snap .contents,
body.is-menu-snap .contents .society_overview_img,
body.is-menu-snap .contents .news,
body.is-menu-snap .theme,
body.is-menu-snap .hamburger > span {
	transition: none !important;
}

.society_overview_container {
	position: relative;
	margin-bottom: 28px;

	@media (width >= 768px) {
		& {
			margin-bottom: 36px;
		}
	}
}

.society_overview_img {
	display: block;
	width: 100%;
	max-width: var(--overview-like-max);
	height: auto;
	transition: opacity 0.45s var(--ease-menu), filter 0.45s var(--ease-menu);
}

/* スクリーンリーダー用（表示は画像） */
.society_overview_text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   NEWS
   ============================================================ */

.news {
	position: relative;
	color: var(--color-text);
	transition: opacity 0.45s var(--ease-menu), visibility 0.45s;

	h2 {
		font-size: 15px;
		font-weight: 500;
		letter-spacing: 0.12em;
		margin-bottom: 12px;

		@media (width >= 768px) {
			& {
				font-size: 16px;
				margin-bottom: 14px;
			}
		}
	}
}

.news-list_wrap {
	position: relative;
	min-height: calc(1.6em * 3 + 8px * 2);
	height: calc(1.6em * 3 + 12px);
	overflow-y: auto;
	padding-right: 14px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.75) transparent;

	&::-webkit-scrollbar {
		width: 3px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.75);
		border-radius: 2px;
	}
}

.news-list {
	li {
		display: flex;
		gap: 12px;
		align-items: flex-start;
		font-size: 12px;
		line-height: 1.6;
		margin-bottom: 8px;

		@media (width >= 768px) {
			& {
				font-size: 13px;
				gap: 16px;
			}
		}
	}

	.date {
		flex: 0 0 auto;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}

	.excerpt {
		flex: 1 1 auto;
		min-width: 0;
		word-break: break-word;
	}

	a {
		color: #fff;
		text-decoration: underline;
	}
}

/* ============================================================
   ナビ / ハンバーガー
   ============================================================ */

.nav_wrap {
	position: fixed;
	top: var(--nav-top-offset);
	left: 0;
	z-index: 10;
	height: calc(100vh - var(--nav-top-offset));
	height: calc(100dvh - var(--nav-top-offset));
	pointer-events: none;

	/* PC：リストが収まる高さでバナー上端に下端固定。狭い画面は max-height で縮めてスクロール */
	@media (width >= 768px) {
		& {
			top: auto;
			bottom: var(--bottom-chrome, 0px);
			height: var(--nav-panel-height);
			/* テーマ帯より上へ縦線が突き抜けないよう上限を設ける */
			max-height: calc(
				100dvh - var(--bottom-chrome, 0px) - var(--main-block-pad) - var(--theme-height) -
					var(--theme-margin-bottom)
			);
			width: calc(var(--nav-line-left) + var(--nav-width));
			/* 計測完了まで非表示（位置確定前の移動を見せない） */
			opacity: 0;
		}
	}
}

@media (width >= 768px) {
	html.is-nav-ready .nav_wrap {
		opacity: 1;
	}

	html:not(.is-nav-ready) .hamburger {
		pointer-events: none;
	}
}

/* メニュー展開時：操作を有効化（PCは高さ制限でバナー／フッターと分離） */
body.menu-open .nav_wrap {
	pointer-events: auto;
}

/* 左側の縦罫線 */
.nav_wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--nav-line-left);
	width: 1px;
	height: 100%;
	background-color: var(--color-line);
	opacity: 0.9;
	pointer-events: none;
	z-index: 2;
}

.hamburger {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	left: var(--nav-line-left);
	/* 縦罫線の左に配置（SP はメディアクエリで上書き） */
	transform: translate(calc(-100% - var(--nav-hamburger-gap)), -50%);
	z-index: 3;
	width: var(--nav-hamburger-size);
	height: var(--nav-hamburger-size);
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0;

	@media (width >= 768px) {
		& {
			/* ブラウザ左から --nav-inset。縦線の中央に配置 */
			left: var(--nav-inset);
			top: 50%;
			transform: translateY(-50%);
		}
	}

	> span {
		display: block;
		position: absolute;
		left: 6px;
		width: 20px;
		height: 1.5px;
		background: #fff;
		transition: transform 0.4s var(--ease-menu), opacity 0.3s ease, top 0.4s var(--ease-menu);
	}

	> span:nth-child(1) {
		top: 9px;
	}

	> span:nth-child(2) {
		top: 15.5px;
	}

	> span:nth-child(3) {
		top: 22px;
	}

	&.active > span:nth-child(1) {
		top: 15.5px;
		transform: rotate(-45deg);
	}

	&.active > span:nth-child(2) {
		opacity: 0;
	}

	&.active > span:nth-child(3) {
		top: 15.5px;
		transform: rotate(45deg);
	}
}

.nav {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: var(--nav-line-left);
	width: min(var(--nav-width), calc(100vw - var(--nav-line-left)));
	height: 100%;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.55s var(--ease-menu);
	overflow: hidden;
	z-index: 1;

	&.is-open {
		pointer-events: auto;
		clip-path: inset(0 0 0 0);
	}

	.menu {
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	&.is-open .menu {
		opacity: 1;
		/* 開くときはパネルが見えてから文字を出す */
		transition: opacity 0.25s ease 0.12s;
	}
}

.menu {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2px;
	height: 100%;
	padding: 20px 0 40px 20px;
	overflow-y: auto;

	@media (width >= 768px) {
		& {
			/* リスト周囲の余白＋余裕で通常時はスクロール不要に */
			padding: 40px 0 40px 0;
			gap: 7px;
			min-height: 0;
			/* PC：狭い画面でパネルが縮んだときスクロール（バーは非表示） */
			overflow-y: auto;
			overscroll-behavior: contain;
			scrollbar-width: none;
			-ms-overflow-style: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}

	li {
		flex: 0 0 auto;
	}

	a {
		display: inline-block;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.04em;
		line-height: 1.4;
		padding: 6px 14px 6px 10px;
		transition: background-color 0.25s ease, color 0.25s ease;

		@media (width >= 768px) {
			& {
				font-size: 13px;
				/* ホバー白背景の高さが文字高になるよう上下余白を詰める */
				line-height: 1;
				padding: 0 18px 0 12px;
			}
		}

		@media (width >= 1200px) {
			& {
				font-size: 14px;
				padding: 0 20px 0 14px;
			}
		}

		/* ホバー時白帯 */
		&:hover,
		&:focus-visible {
			background-color: var(--color-hover-bg);
			color: var(--color-hover-text);
			opacity: 1;
			text-decoration: none;
		}
	}

	li:hover > a {
		background-color: var(--color-hover-bg);
		color: var(--color-hover-text);
		opacity: 1;
		text-decoration: none;
	}

	li.active > a {
		background-color: var(--color-hover-bg);
		color: var(--color-hover-text);
	}
}

/* 準備中：li ごと無効化し、ホバー／タップの白反転を防ぐ */
.menu li:has(> a[href="./committee.html"]),
.menu li:has(> a[href="./registration.html"]),
.menu li:has(> a[href="./participants.html"]),
.menu li:has(> a[href="./presenters.html"]),
.menu li:has(> a[href="./certification.html"]),
.menu li:has(> a[href="./program.html"]),
.menu li:has(> a[href="./hands-on.html"]),
.menu li:has(> a[href="./designated-abstracts.html"]),
.menu li:has(> a[href="./access.html"]),
.menu li:has(> a[href="./accommodation.html"]),
.menu li:has(> a[href="./childcare.html"]),
.menu li:has(> a[href="./press.html"]),
.menu li:has(> a[href="./poster-info.html"]),
.menu li:has(> a[href="./links.html"]),
.menu li:has(> a[href="./english.html"]) {
	pointer-events: none;
}

.menu li a[href="./committee.html"],
.menu li a[href="./registration.html"],
.menu li a[href="./participants.html"],
.menu li a[href="./presenters.html"],
.menu li a[href="./certification.html"],
.menu li a[href="./program.html"],
.menu li a[href="./hands-on.html"],
.menu li a[href="./designated-abstracts.html"],
.menu li a[href="./access.html"],
.menu li a[href="./accommodation.html"],
.menu li a[href="./childcare.html"],
.menu li a[href="./press.html"],
.menu li a[href="./poster-info.html"],
.menu li a[href="./links.html"],
.menu li a[href="./english.html"] {
	color: #999;
	pointer-events: none;
	background-color: transparent;
}

/* ============================================================
   協賛バナー
   ============================================================ */

.banner_wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--footer-offset, 96px);
	z-index: 15;
	background: #fff;
	pointer-events: auto;
}

.banner_list {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding: 10px 16px;
	min-height: 52px;
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
	box-sizing: border-box;

	@media (width >= 768px) {
		& {
			gap: 20px 32px;
			padding: 12px 32px;
			min-height: 64px;
			flex-wrap: nowrap;
			justify-content: space-around;
		}
	}

	@media (width >= 1200px) {
		& {
			gap: 24px 40px;
			padding: 14px 48px;
			min-height: 72px;
		}
	}

	li {
		flex: 0 0 auto;
		line-height: 0;
	}

	img {
		display: block;
		width: auto;
		height: 28px;
		max-width: 140px;
		object-fit: contain;

		@media (width >= 768px) {
			& {
				height: 38px;
				max-width: 180px;
			}
		}

		@media (width >= 1200px) {
			& {
				height: 44px;
				max-width: 220px;
			}
		}
	}
}

/* ============================================================
   フッター
   ============================================================ */

.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 14;
	background-color: var(--color-footer-bg);
	color: #fff;
	pointer-events: auto;
}

/* トップPC：背景画像下端までパンした時点でフッターを表示 */
@media (width >= 768px) {
	body:not(.page-child) .footer {
		transform: translateY(100%);
		visibility: hidden;
		pointer-events: none;
		transition:
			transform 0.4s var(--ease-menu),
			visibility 0.4s;
	}

	body:not(.page-child).is-footer-revealed .footer {
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
	}

	@media (prefers-reduced-motion: reduce) {
		body:not(.page-child) .footer {
			transition: none;
		}
	}
}

.footer_container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 14px 10px;
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
	font-size: 10px;
	line-height: 1.5;
	box-sizing: border-box;

	@media (width >= 768px) {
		& {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 24px 48px;
			padding: 14px 32px 12px;
			font-size: 11px;
			line-height: 1.5;
		}
	}

	@media (width >= 1200px) {
		& {
			gap: 28px 72px;
			padding: 16px 48px 14px;
			font-size: 12px;
		}
	}
}

.secretariat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;

	@media (width >= 768px) {
		& {
			flex-direction: row;
			align-items: flex-start;
			gap: 16px 20px;
		}
	}

	@media (width >= 1200px) {
		& {
			gap: 20px 28px;
		}
	}

	& + .secretariat {
		@media (width >= 768px) {
			flex: 1 1 auto;
			min-width: 280px;
		}
	}

	h2 {
		flex: 0 0 auto;
		font-weight: 500;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	dl {
		flex: 1 1 auto;
		min-width: 0;
	}

	dt {
		font-weight: 500;
		margin-bottom: 2px;
	}

	dd {
		font-weight: 400;
	}

	a {
		color: #fff;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.footer-copyright {
	@media (width >= 768px) {
		& {
			margin-left: auto;
			align-self: flex-end;
			text-align: right;
			max-width: none;
		}
	}

	p {
		font-size: 10px;
		line-height: 1.4;
		opacity: 0.9;

		@media (width >= 1200px) {
			& {
				font-size: 11px;
			}
		}
	}
}

/* ============================================================
   SPレイアウト（〜767px）
   PC（768px〜）は上記ルールを維持
   ============================================================ */

@media (width < 768px) {
	/* フッター下に余白が出ないようにする */
	body {
		min-height: 0;
	}

	.scroll_spacer {
		display: none;
	}

	/* 背景：SP専用画像。サイズは JS で px 固定（スクロール時の拡大防止） */
	.hero_bg {
		height: var(--hero-vh, 100dvh);
	}

	.hero_bg__off,
	.hero_bg__on {
		background-size: var(--hero-bg-size, cover);
		/* JS未適用時のフォールバック：人物（右寄り）をやや上へ */
		background-position: var(--hero-bg-position, 75% 20%);
	}

	.hero_bg__off {
		background-image: url("../images/sp_close.jpg");
	}

	.hero_bg__on {
		background-image: url("../images/sp_open.jpg");
	}

	/* メイン：下層は通常フロー。トップはバナー上へ追従固定 */
	.main_container {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		height: auto;
		min-height: 70dvh;
		/* theme が main_container 外のため、上余白は theme 側へ */
		padding: 0 var(--main-inline-pad) 0;
	}

	/* トップSP：main はスクロール高さ確保用（中身は fixed） */
	body:not(.page-child) .main {
		display: block;
		min-height: calc(var(--hero-vh, 100dvh) - var(--sp-banner-height, 72px));
	}

	/* トップSP：テーマは画面上部に固定 */
	body:not(.page-child) .main > .theme {
		position: fixed;
		top: calc(20px + env(safe-area-inset-top, 0px));
		left: var(--main-inline-pad);
		right: var(--main-inline-pad);
		z-index: 3;
		margin: 0;
		width: auto;
	}

	/*
	 * トップSP：contents を協賛バナー上 30px に追従固定（PC／ハンバーガー同様）
	 * --sp-contents-bottom は JS がバナー位置から更新
	 */
	body:not(.page-child) .main_container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: var(
			--sp-contents-bottom,
			calc(var(--sp-banner-height, 72px) + 30px)
		);
		z-index: 2;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		display: flex;
		flex-direction: column;
		padding: 0 var(--main-inline-pad);
		overflow: hidden;
		box-sizing: border-box;
	}

	body:not(.page-child) .contents {
		flex: 0 1 auto;
		display: flex;
		flex-direction: column;
		margin-top: auto;
		min-height: 0;
		overflow: hidden;
	}

	body:not(.page-child) .society_overview_container {
		flex: 0 1 auto;
		min-height: 0;
		margin-bottom: 0;
	}

	body:not(.page-child) .society_overview_img {
		max-height: 100%;
		width: auto;
		object-fit: contain;
		object-position: left top;
	}

	body:not(.page-child) .news {
		flex: 0 0 auto;
		margin-bottom: 0;
	}

	.main > .theme {
		/* 上下余白を揃える（safe-area はノッチ分のみ加算） */
		margin-top: calc(20px + env(safe-area-inset-top, 0px));
		margin-bottom: 20px;
	}

	.theme {
		/* 画像内余白がタイトなため、下余白でコンテンツとの間隔を確保 */
		margin-bottom: 20px;
	}

	.contents {
		max-width: none;
		margin-left: 0;
	}

	/* 下層SPのみ最低高さを確保（トップはバナー追従のため min-height なし） */
	body.page-child .contents {
		min-height: 48dvh;
	}

	.society_overview_container {
		margin-bottom: 28px;
	}

	.society_overview_img {
		width: 66.666%;
		max-width: 200px;
	}

	.news {
		margin-bottom: 28px;

		h2 {
			margin-bottom: 10px;
		}
	}

	/* SP：件数に応じて高さを可変（PCの固定高さは使わない） */
	.news-list_wrap {
		height: auto;
		min-height: 0;
		overflow-y: visible;
		padding-right: 8px;
	}

	/* バナー・フッター：通常フロー */
	.banner_wrap,
	.footer {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		z-index: 2;
	}

	.banner_list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	/* ナビ：協賛バナー上＋30px にハンバーガー／フルスクリーン */
	.nav_wrap {
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100dvh;
		height: 100vh;
		z-index: 40;
	}

	.nav_wrap::before {
		display: none;
	}

	.hamburger {
		/* 協賛バナー上端から 30px 上を JS で追従（--sp-hamburger-top） */
		top: var(
			--sp-hamburger-top,
			calc(100dvh - var(--sp-banner-height, 72px) - 30px - 44px)
		);
		bottom: auto;
		left: auto;
		right: 12px;
		transform: none;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: rgba(26, 40, 48, 0.4);
		border: 1px solid rgba(255, 255, 255, 0.2);

		> span {
			left: 12px;
			width: 18px;
		}

		> span:nth-child(1) {
			top: 15px;
		}

		> span:nth-child(2) {
			top: 21px;
		}

		> span:nth-child(3) {
			top: 27px;
		}

		&.active span:nth-child(1),
		&.active span:nth-child(3) {
			top: 21px;
		}
	}

	.nav {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip-path: inset(0 0 100% 0);
		/* 閉じアニメ中も背景を維持（SP） */
		background-color: rgba(26, 40, 48, 0.82);
		background-image: none;

		&.is-open {
			clip-path: inset(0 0 0 0);
		}
	}

	.menu {
		/* 追従ハンバーガー分の下余白（位置は JS 連動） */
		padding: calc(24px + env(safe-area-inset-top, 0px)) 20px
			calc(44px + 30px + 24px + env(safe-area-inset-bottom, 0px));

		a {
			display: block;
			width: 100%;
			font-size: 14px;
			padding: 8px 12px;
		}
	}

	body.menu-open .contents,
	body.menu-open .theme {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* メニュー展開時：背面のバナー／フッターとの重なりを解消 */
	body.menu-open {
		overflow: hidden;
	}

	body.menu-open .banner_wrap,
	body.menu-open .footer {
		visibility: hidden;
		pointer-events: none;
	}

	body.menu-open .nav_wrap {
		z-index: 50;
	}

	/* スマートフォンではページトップへ戻るを非表示 */
	.page_top {
		display: none !important;
	}
}

/* ============================================================
   下層ページ共通（child.jpg）
   body に page-child を付与して利用
   ============================================================ */

/* 下層：開き目画像で固定（メニュー開閉でも切り替え・アニメーションなし） */
.page-child .hero_bg__off,
.page-child .hero_bg__on {
	background-image: url("../images/page_open.jpg");
}

.page-child .hero_bg__on {
	opacity: 1;
}

/* 下層：メニュー開閉時も contents を常時表示 */
body.page-child.menu-open .contents {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* 下層PC：メニュー常時オープン（開閉アニメなし。×はトップへ） */
@media (width >= 768px) {
	.page-child .nav_wrap {
		pointer-events: auto;
	}

	.page-child .nav {
		pointer-events: auto;
		clip-path: inset(0 0 0 0);
		transition: none;
	}

	.page-child .nav .menu {
		opacity: 1;
		transition: none;
	}

	.page-child .hamburger {
		cursor: pointer;
	}

	/* 常時オープンに合わせ、×表示で固定 */
	.page-child .hamburger > span:nth-child(1) {
		top: 15.5px;
		transform: rotate(-45deg);
	}

	.page-child .hamburger > span:nth-child(2) {
		opacity: 0;
	}

	.page-child .hamburger > span:nth-child(3) {
		top: 15.5px;
		transform: rotate(45deg);
	}
}

@media (width < 768px) {
	.page-child .hero_bg__off,
	.page-child .hero_bg__on {
		background-image: url("../images/sp_open.jpg");
	}
}

.page-child .scroll_spacer {
	display: none;
}

/*
 * 下層ではトップのような「抜けて下層へクリック」が不要。
 * wrapper / main の pointer-events: none が残ると
 * 環境によってボタンの :hover や cursor:pointer が効かないことがある。
 */
.page-child .wrapper,
.page-child .main {
	pointer-events: auto;
}

/* 下層共通：contents は main_container 外（theme の兄弟）
   半透明白枠（白85%半調）／見出し固定・本文のみスクロール */
.page-child .contents {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - 24px);
	max-width: none;
	width: auto;
	margin-left: var(--main-inline-pad);
	margin-right: var(--main-inline-pad);
	margin-bottom: 24px;
	background-color: rgba(255, 255, 255, 0.85);
	color: #2a3a44;
	padding: 28px 32px 36px;
	box-sizing: border-box;
	overflow: hidden;

	/* PC：サイドメニュー右端から間隔を取り、右側はブラウザいっぱい（横幅可変） */
	@media (width >= 768px) {
		& {
			position: fixed;
			top: calc(var(--main-block-pad) + var(--theme-height) + var(--theme-margin-bottom));
			left: calc(var(--nav-line-left) + var(--nav-width) + var(--contents-gap));
			right: 0;
			bottom: var(--bottom-chrome, 160px);
			z-index: 2;
			width: auto;
			min-height: 0;
			margin: 0;
			overflow: hidden;
		}
	}

	@media (width >= 1200px) {
		& {
			padding: 36px 48px 44px;
		}
	}
}

.page-child .contents > article {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
}

.page-child .page-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	margin: 0 0 16px;
	padding: 0 4px 10px;
	border-bottom: 1px solid rgba(42, 58, 68, 0.35);
	color: #2a3a44;

	h1 {
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: 1.3;
		color: var(--color-primary);

		@media (width >= 768px) {
			& {
				font-size: 22px;
			}
		}

		@media (width >= 1200px) {
			& {
				font-size: 24px;
			}
		}
	}
}

/* 見出し以外の本文領域のみスクロール */
.page-child .contents > article > :not(.page-heading) {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(42, 58, 68, 0.45) transparent;

	&::-webkit-scrollbar {
		width: 4px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: rgba(42, 58, 68, 0.45);
		border-radius: 2px;
	}
}

/*
 * 下層パネル共通（-panel / _panel 両対応）
 * 直下の余白をリセットし、連続要素・section 内だけ上方向マージンを付与
 */
:is(
	[class$="-panel"],
	[class$="_panel"],
	[class*="-panel "],
	[class*="_panel "]
) > * {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.7;
}

:is(
	[class$="-panel"],
	[class$="_panel"],
	[class*="-panel "],
	[class*="_panel "]
) > * + * {
	margin-block-start: 2rem;
}

:is(
	[class$="-panel"],
	[class$="_panel"],
	[class*="-panel "],
	[class*="_panel "]
) > section > * + * {
	margin-block-start: 1rem;
}

.page-child .page-heading_en {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	opacity: 0.75;

	@media (width >= 768px) {
		& {
			font-size: 13px;
		}
	}
}

/* 見出し */
.heading_h3 {
	padding: .3em .5em;
	border-left: 5px solid var(--color-primary);
}

.heading_h3 span {
	display: inline-block;
	position: relative;
	padding: 0 .2em .2em;
	font-size: clamp(1.25rem, 1.125rem + 0.4vi, 1.375rem);
	font-weight: bold;
	line-height: 1.4;
	font-feature-settings: "palt";
}

/* アイコン */
.exlink::after {
	content: "\f360";
	font-family: "Font Awesome 5 Free";
	font-size: 0.85em;
	font-weight: 900;
	margin-left: .5em;
}

/* 囲み */
.enclosure01 {
	border: 1px;
	border-style: solid;
	padding: 0.75em 1em;
}

.enclosure-style02 {
	border: 3px solid rgba(245, 200, 200, 0.4);
	background: rgba(245, 200, 200, 0.1);
}

.kome_ja > * {
	display: table;
	width: 100%;
}

.kome_ja > *::before {
	display: table-cell;
	content: "※";
	width: 1em;
	position: relative;
	top: -0.1em;
}

/* 表組み */
.tbl-sp {
	overflow-x: auto;
}

.tbl-sp table {
	min-width: 690px;
}

.tbl-width100 {
	width: 100%;
}

table {
	box-sizing: border-box;
	border-collapse: collapse;
}

.tbl-style01 thead th {
	background-color: #DDD;
	border: 1px #CCCCCC;
	border-style: solid;
	padding: .5em;
}

.tbl-style01 tbody th,
.tbl-style01 tbody td {
	border: 1px #CCCCCC;
	border-style: solid;
}

.tbl-style01 tbody th {
	background-color: #EEEEEE;
	padding: .5em;
}

.tbl-style01 tbody td {
	background-color: #FFFFFF;
	padding: 1.5em;
}

.th-c-m th {
	text-align: center;
	vertical-align: middle;
}

.th-l-m th {
	text-align: left;
	vertical-align: middle;
}

.td-c-m td {
	text-align: center;
	vertical-align: middle;
}

/* ボタン：塗りカプセル＋リフト（枠線スライド塗りとは別系統） */
.btn-wrap {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: auto;
}

.btn-wrap li {
	pointer-events: auto;
	cursor: pointer;
}

.btn {
	--btn-bg: var(--color-secondary);
	min-width: 280px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 1rem 2.2rem;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: #fff;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 1;
	background-color: var(--btn-bg);
	background-image: none;
	text-decoration: none;
	font-family: inherit;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.12) inset,
		0 10px 28px rgba(0, 42, 66, 0.22);
	transition:
		transform 0.28s var(--ease-menu),
		background-color 0.28s var(--ease-menu),
		box-shadow 0.28s var(--ease-menu),
		color 0.28s var(--ease-menu),
		opacity 0.28s var(--ease-menu);
}

.btn::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
	flex: 0 0 auto;
	pointer-events: none;
	transition: transform 0.28s var(--ease-menu), background-color 0.28s var(--ease-menu);
}

/* li:hover も対象：角丸の外側ヒットが li に抜けても見た目が変わる */
.btn-wrap li:hover .btn,
.btn:hover,
.btn:focus-visible {
	/* 通常=紺塗り → ホバー=白塗り＋紺文字（変化が一目で分かる） */
	color: var(--color-secondary);
	background-color: #fff;
	text-decoration: none;
	opacity: 1;
	transform: translateY(-3px);
	box-shadow:
		0 0 0 2px var(--color-secondary),
		0 16px 36px rgba(0, 42, 66, 0.28);
}

.btn-wrap li:hover .btn::before,
.btn:hover::before,
.btn:focus-visible::before {
	transform: scale(1.25);
	background-color: var(--color-secondary);
	box-shadow: 0 0 0 3px rgba(0, 42, 66, 0.12);
}

.btn:active {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 2px var(--color-secondary),
		0 8px 18px rgba(0, 42, 66, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn::before {
		transition: none;
	}

	.btn:hover,
	.btn:focus-visible,
	.btn:active {
		transform: none;
	}
}

/* ============================================================
   下層ページ：会長挨拶
   ============================================================ */

/* ページ内移動ナビ（前回総会の移動ボタン相当） */
.page-message .message_nav {
	margin: 0 0 8px;
}

.page-message .message_nav_list {
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid #cccccc;
	background-color: #ffffff;
}

@media (width >= 768px) {
	.page-message .message_nav_list {
		grid-template-columns: 1fr 1fr;
	}
}

.page-message .message_nav_list li {
	border-top: 1px solid #cccccc;
}

.page-message .message_nav_list li:first-child {
	border-top: none;
}

@media (width >= 768px) {
	.page-message .message_nav_list li {
		border-top: none;
	}

	.page-message .message_nav_list li + li {
		border-left: 1px solid #cccccc;
	}
}

.page-message .message_nav_list a {
	position: relative;
	display: block;
	padding: 14px 16px 14px 18px;
	color: #333333;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	background-color: #ffffff;
	transition: background-color 0.2s ease;
}

@media (width >= 768px) {
	.page-message .message_nav_list a {
		padding: 15px;
		font-size: 14px;
		line-height: 1.5;
	}
}

.page-message .message_nav_list a::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 0;
	margin: -3px 4px 0 0;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent var(--color-secondary);
}

.page-message .message_nav_list a span {
	font-size: 1.15em;
	font-weight: 700;
}

.page-message .message_nav_list a:hover,
.page-message .message_nav_list a:focus-visible {
	background-color: rgba(85, 112, 121, 0.08);
	color: #333333;
	opacity: 1;
	text-decoration: none;
}

.page-message .message_panel > section[id] {
	scroll-margin-top: 12px;
}

.page-message .message_profile {
	display: flex;
	align-items: flex-start;
	gap: 20px 28px;
	margin-bottom: 28px;

	@media (width >= 768px) {
		& {
			align-items: flex-end;
			gap: 24px 36px;
			margin-bottom: 32px;
		}
	}
}

.page-message .message_profile_photo {
	flex: 0 0 auto;
	width: 140px;
	margin: 0;
	line-height: 0;

	@media (width >= 1200px) {
		& {
			width: 160px;
		}
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

.page-message .message_profile_text {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 4px;
	font-size: 13px;
	line-height: 1.7;

	@media (width >= 768px) {
		& {
			padding-top: 0;
			font-size: 14px;
		}
	}

	@media (width >= 1200px) {
		& {
			font-size: 15px;
		}
	}
}

.page-message .message_profile_congress {
	margin-bottom: 6px;
	font-weight: 500;
}

.page-message .message_profile_name {
	margin-bottom: 4px;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.page-message .message_profile_role {
	font-size: 0.85em;
	font-weight: 400;
}

.page-message .message_profile_affil {
	font-weight: 400;
}

.page-message .message_body {
	font-size: 13px;
	line-height: 1.9;

	@media (width >= 768px) {
		& {
			font-size: 14px;
		}
	}

	@media (width >= 1200px) {
		& {
			font-size: 15px;
			line-height: 2;
		}
	}

	p {
		margin: 0 0 .5em;
		text-align: justify;
		text-justify: inter-ideograph;
		text-indent: 1em;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

.page-message .message_panel a {
	color: #002a42;
}

/* 下層共通（SP上書き） */
@media (width < 768px) {
	.page-child .contents {
		position: relative;
		width: auto;
		max-width: none;
		min-height: 48dvh;
		overflow: visible;
		padding: 20px 16px 28px;
	}

	.page-child .page-heading {
		margin-bottom: 12px;
	}

	.page-child .contents > article > :not(.page-heading) {
		overflow: visible;
	}

	/* 本文リンクのみ。メニューは白文字のままにする */
	.page-child a:not(.btn):not(.message_nav_list a):not(.menu a) {
		color: var(--color-primary);
	}

	.page-message .message_profile {
		flex-direction: column;
		align-items: flex-start;
	}

	.page-message .message_profile_photo {
		width: 120px;
	}

	.page-message .message_body {
		font-size: 13px;
	}
}

/* ============================================================
   下層ページ：開催概要
   ============================================================ */
.overview-list {
	display: flex;
	flex-wrap: wrap;
	row-gap: 10px;
	font-feature-settings: "palt";
	line-height: 1.4;
}

.overview-list dt {
	width: 100%;
	font-weight: bold;
	color: var(--color-primary);
}

.overview-list dt::before {
	content: "\f14b";
	font-family: "Font Awesome 5 Free";
	margin-right: 0.5em;
	font-size: 0.85em;
	font-weight: 900;
	position: relative;
	bottom: 1px;
	color: var(--color-secondary);
	opacity: 0.5;
}

.overview-list dd {
	flex: 1;
	border-top: 1px dotted var(--color-primary);
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 20px;
}

.overview-list dd > span,
.overview-list dd > ul > li > span {
	display: block;
}

.overview-list dd ul {
	padding-left: 0;
	line-height: 1.4;
}

.overview-list dd ul > * + * {
	margin-top: 5px;
}

@media (width >= 768px) {
	.overview-list {
		row-gap: 20px;
		column-gap: 10px;
		padding-left: 20px;
	}

	.overview-list dt,
	.overview-list dd {
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.overview-list dt {
		width: 130px;
		text-indent: -1.1em;
		padding-left: 1.1em;
	}

	.overview-list dd {
		flex: 0 0 calc(100% - 130px - 10px);
		border-top: none;
		border-bottom: 1px dotted var(--color-primary);
		padding-left: 5px;
	}

	.overview-list dd > span,
	.overview-list dd > ul > li > span {
		display: inline;
	}
}

/* ============================================================
   下層ページ：企業協賛申込
   ============================================================ */

/* パネル共通（1rem）よりやや広め。ボタン周りの余白 */
.sponsors-panel .btn-wrap {
	margin-top: 1.5em;
}

.btn-sm {
	min-width: 6.5em;
	padding: 0.55rem 1.35rem;
	font-size: 13px;
	letter-spacing: 0.14em;
	gap: 0.4em;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.12) inset,
		0 6px 16px rgba(0, 42, 66, 0.18);
}

.btn-sm::before {
	width: 0.35em;
	height: 0.35em;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.sponsors-table {
	font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
}

.sponsors-table thead th:last-child,
.sponsors-table tbody td {
	width: 9.5em;
	text-align: center;
	vertical-align: middle;
	padding: 0.75em;
	pointer-events: auto;
}

/* 表内ボタン：セル上でもホバー見た目が付くようにする */
.sponsors-table td:hover .btn {
	color: var(--color-secondary);
	background-color: #fff;
	text-decoration: none;
	opacity: 1;
	transform: translateY(-3px);
	box-shadow:
		0 0 0 2px var(--color-secondary),
		0 16px 36px rgba(0, 42, 66, 0.28);
}

.sponsors-table td:hover .btn::before {
	transform: scale(1.25);
	background-color: var(--color-secondary);
	box-shadow: 0 0 0 3px rgba(0, 42, 66, 0.12);
}

.sponsors-table tbody th {
	text-align: left;
	vertical-align: middle;
	font-weight: 500;
	padding: 0.75em 1em;
}