/* --- 基本スタイル --- */
		html,
		body,
		#cesiumContainer {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
			position: fixed;
			font-family: 'Noto Serif JP', serif;
			background-color: black;
		}

		.cesium-widget-credits {
			display: block !important;
			bottom: 5px;
			left: 5px;
		}

		.cesium-widget-credits span {
			display: none;
		}

		.cesium-home-button {
			display: none !important;
		}

		.cesium-infoBox {
			background-color: rgba(255, 255, 255, 0.9);
		}

		.cesium-infoBox-title {
			padding: 5px 24px;
			color: #000;
			background-color: rgba(255, 255, 255, 0.5);
		}

		button.cesium-infoBox-close {
			color: #aaa;
		}

		.cesium-selection-wrapper svg {
			fill: #FFF;
			stroke: #FFF;
			stroke-width: 0px;
			opacity: 0.7;
		}

		.titleScreen {
			position: absolute;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			display: table;
			z-index: 10002;
			background-color: black;
		}

		.titleScreen p {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}

		.titleImage {
			width: 90%;
			max-width: 640px;
		}

		#blackOut {
			position: absolute;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			background: black;
			z-index: 10003;
			opacity: 1;
		}

		.loading {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -40px;
			margin-left: -40px;
		}

		/* --- PC用UIスタイル (デフォルト) --- */
		.custom-button-container {
			position: absolute;
			z-index: 100;
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}

		#viewpoint-buttons {
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			padding: 6px;
			border-radius: 10px;
			gap: 6px;
			justify-content: center;
		}

		#viewpoint-buttons .custom-button {
			padding: 6px 9px;
			font-size: 12px;
			border-radius: 7px;
		}

		#map-layer-buttons {
			bottom: 20px;
			right: 20px;
			flex-direction: column;
		}

		.custom-button {
			background: rgba(255, 255, 255, 0.2);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.3);
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			color: white;
			padding: 8px 12px;
			font-size: 14px;
			cursor: pointer;
			border-radius: 8px;
			transition: background 0.3s, border 0.3s;
			font-family: 'Noto Serif JP', serif;
		}

		.custom-button:hover {
			background: rgba(255, 255, 255, 0.3);
			border: 1px solid rgba(255, 255, 255, 0.5);
		}

		.custom-button.active {
			background: rgba(76, 175, 80, 0.8);
			border: 1px solid rgba(255, 255, 255, 0.7);
		}

		#modal-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.7);
			visibility: hidden;
			opacity: 0;
			transition: visibility 0s 0.2s, opacity 0.2s linear;
		}

		#modal-container.visible {
			visibility: visible;
			opacity: 1;
			transition: opacity 0.2s linear;
		}

		#modal-content {
			background-color: rgba(254, 254, 254, 0.9);
			margin: 0;
			padding: 25px;
			border: 1px solid #888;
			width: 80%;
			max-width: 700px;
			border-radius: 8px;
			position: relative;
			max-height: 80vh;
			overflow-y: auto;
			box-sizing: border-box;
		}

		#modal-close-button {
			color: #aaa;
			position: absolute;
			top: 10px;
			right: 25px;
			font-size: 35px;
			font-weight: bold;
			cursor: pointer;
			z-index: 10;
		}

		#modal-title {
			text-align: center;
			font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 15px;
			padding: 0 15px;
		}

		#modal-body {
			font-size: 20px !important;
			line-height: 1.7 !important;
			font-family: 'Noto Serif JP', serif;
		}

		#modal-body h1,
		#modal-body h2,
		#modal-body h3,
		#modal-body h4,
		#modal-body h5,
		#modal-body h6 {
			text-align: center;
			font-weight: bold;
		}

		#modal-body h1 {
			font-size: 22px;
		}

		#modal-body .pub_date {
			font-size: 14px;
			text-align: center;
			margin-bottom: 15px;
		}

		#modal-body img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 100%;
			height: auto;
			margin-bottom: 15px;
		}

		#modal-body a {
			color: inherit;
			text-decoration: none;
			cursor: default;
		}

		#modal-content.youtube-modal {
			width: 90vw;
			height: 80vh;
			max-width: 1280px;
			padding: 0;
			background-color: black;
			border: none;
			overflow: hidden;
		}

		#modal-content.youtube-modal #modal-title {
			display: none;
		}

		#modal-content.youtube-modal #modal-body {
			height: 100%;
			padding: 0;
		}

		#modal-content.youtube-modal iframe {
			width: 100%;
			height: 100%;
			border: none;
		}

		#modal-content.youtube-modal #modal-close-button {
			color: white;
			text-shadow: 0 0 5px black;
		}

		#photoContainer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 900;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.4);
		}

		#photoContainer .photograph {
			max-width: 80%;
			max-height: 80%;
			object-fit: contain;
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
		}

		#descriptionContainer {
			position: absolute;
			bottom: 20px;
			right: 20px;
			width: 30%;
			max-width: 400px;
			background-color: rgba(0, 0, 0, 0.6);
			color: white;
			padding: 15px;
			border-radius: 8px;
			font-size: 12pt !important;
			line-height: 1.6 !important;
			max-height: 40%;
			overflow-y: auto;
			z-index: 901;
			cursor: pointer;
			font-family: 'Noto Serif JP', serif;
		}

		#descriptionContainer .photo-title {
			font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
			font-weight: bold;
			font-size: 14pt;
			text-align: left;
			margin-bottom: 10px;
			padding-bottom: 8px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.4);
		}

		#custom-credits {
			position: absolute;
			bottom: 5px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 100;
			color: rgba(255, 255, 255, 0.7);
			font-size: 12px;
			font-family: 'Noto Serif JP', serif;
			text-shadow: 1px 1px 2px black;
			white-space: nowrap;
		}

		.archive-index-link-container {
			position: absolute;
			left: 12px;
			bottom: 36px;
			z-index: 110;
			pointer-events: auto;
		}

		.archive-index-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 28px;
			padding: 0 12px;
			background: rgba(214, 146, 82, 0.22);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.28);
			border-radius: 8px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
			color: rgba(255, 255, 255, 0.96);
			font-size: 12px;
			font-family: 'Noto Serif JP', serif;
			line-height: 1;
			text-decoration: none;
			white-space: nowrap;
			transition: background 0.3s, border-color 0.3s, opacity 0.3s;
		}

		.archive-index-link:hover {
			background: rgba(214, 146, 82, 0.3);
			border-color: rgba(255, 255, 255, 0.42);
		}

		.archive-index-link:focus-visible {
			outline: 2px solid rgba(255, 255, 255, 0.72);
			outline-offset: 2px;
			background: rgba(214, 146, 82, 0.32);
			border-color: rgba(255, 255, 255, 0.5);
		}

		.top-ui-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: 15px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			box-sizing: border-box;
			pointer-events: none;
		}

		.search-forms,
		.help-button-container {
			pointer-events: auto;
		}

		.search-forms {
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
		}

		.search-form {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.2);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.3);
			border-radius: 8px;
			overflow: hidden;
		}

		.search-form input {
			background: transparent;
			border: none;
			color: white;
			padding: 6px 10px;
			font-size: 13px;
			font-family: 'Noto Serif JP', serif;
			width: 170px;
		}

		.search-form input:focus {
			outline: none;
		}

		.search-form input::placeholder {
			color: rgba(255, 255, 255, 0.9);
			opacity: 1;
		}

		.search-form button,
		#help-button {
			background: rgba(255, 255, 255, 0.1);
			border: none;
			color: white;
			cursor: pointer;
			padding: 6px 10px;
			font-size: 14px;
			border-left: 1px solid rgba(255, 255, 255, 0.3);
			transition: background 0.3s;
		}

		.search-form button:hover,
		#help-button:hover {
			background: rgba(255, 255, 255, 0.3);
		}

		#help-button {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			padding: 0;
			border: 1px solid rgba(255, 255, 255, 0.3);
			font-size: 18px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* --- モバイル用スタイル --- */
		.mobile-view #viewpoint-buttons {
			display: none !important;
		}

		.mobile-view #map-layer-buttons {
			right: 10px;
			bottom: 10px;
			gap: 5px;
		}

		.mobile-view #map-layer-buttons .custom-button {
			font-size: 12px;
			padding: 8px 10px;
		}

		.mobile-view #modal-title {
			font-size: 18px;
		}

		.mobile-view #modal-content {
			width: 95vw;
		}

		.mobile-view #photoContainer .photograph {
			max-width: 90%;
			max-height: 70%;
		}

		.mobile-view #descriptionContainer {
			width: calc(100% - 20px);
			max-width: none;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
			right: auto;
			max-height: 30%;
			font-size: 10pt !important;
		}

		.mobile-view #custom-credits {
			display: none;
		}

		.mobile-view .archive-index-link-container {
			display: none;
		}

		.mobile-view .top-ui-container {
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			gap: 10px;
			padding: 8px;
		}

		.mobile-view .search-forms {
			flex-direction: column;
			width: auto;
			gap: 8px;
			align-items: flex-start;
		}

		.mobile-view .search-form {
			border-radius: 7px;
		}

		.mobile-view .search-form input {
			width: 165px;
			max-width: 56vw;
			padding: 5px 8px;
			font-size: 12px;
			box-sizing: border-box;
		}

		.mobile-view .search-form button {
			padding: 5px 8px;
			font-size: 12px;
		}

		.mobile-view .help-button-container {
			align-self: flex-end;
		}

		.mobile-view #help-button {
			width: 32px;
			height: 32px;
			font-size: 16px;
		}

		/* 右上のコントロール（ヘルプ、言語）をまとめるコンテナ */
		.top-right-controls {
			display: flex;
			align-items: center;
			gap: 10px;
			/* ボタン間のスペース */
			pointer-events: auto;
			/* コンテナ内でクリックを有効に */
		}

		/* 新しいコンテナにも pointer-events を設定 */
		.lang-switch-container {
			pointer-events: auto;
		}

		/* 言語切り替えボタンのスタイル */
		.lang-switch-button {
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.2);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.3);
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			color: white;
			padding: 8px 12px;
			font-size: 14px;
			cursor: pointer;
			border-radius: 8px;
			transition: background 0.3s, border 0.3s;
			font-family: 'Noto Serif JP', serif;
			text-decoration: none;
			/* リンクの下線を消す */
			white-space: nowrap;
			/* テキストが改行しないように */
		}

		.lang-switch-button:hover {
			background: rgba(255, 255, 255, 0.3);
			border: 1px solid rgba(255, 255, 255, 0.5);
		}

		/* モバイル用の調整 */
		.mobile-view .top-right-controls {
			align-self: flex-start;
			/* 右上に配置 */
			gap: 8px;
		}

		.mobile-view .lang-switch-button {
			padding: 6px 10px;
			font-size: 12px;
		}