/*
Theme Name: テーマ名
Theme URI: テーマのURL
Description: テーマの説明
Version: 1.0
Author: 作成者名
Author URI: 作成者のURL
*/

/* 基本スタイル */
/* ページ全体の基本的なスタイル設定 */
body {
	margin: 0;
	/* 外側の余白をなくす */
	padding: 0;
	/* 内側の余白をなくす */
	/* font-family: 'Kiwi Maru', serif; */
	/* コメントアウトされたフォント指定 */
	/* font-family: 'Noto Sans JP', sans-serif; */
	/* コメントアウトされたフォント指定 */
	/* font-family: 'M PLUS Rounded 1c', sans-serif; */
	/* コメントアウトされたフォント指定 */
	font-family: 'Noto Sans JP', sans-serif;
	/* 使用するフォントを指定 (Noto Sans JP) */
	/* background-color: #000000; */
	/* コメントアウトされた背景色指定 */
	/* color: #ffffff; */
	/* コメントアウトされた文字色指定 */
	overflow: hidden;
	/* スクロールバーを常に隠す */
}

/* ローディング画面 (コメントアウト中) */
/*
.loader {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	z-index: 9999;
}
*/

/* Loading Slideshow Overlay */
/* ローディングスライドショーの背景オーバーレイ */
#loading-slideshow-overlay {
	position: fixed;
	/* 画面に固定 */
	top: 0;
	/* 上端に配置 */
	left: 0;
	/* 左端に配置 */
	width: 100%;
	/* 幅を画面全体に */
	height: 100%;
	/* 高さを画面全体に */
	background-color: rgba(0, 0, 0, 0.671);
	/* 半透明のグレー背景 */
	display: flex;
	/* Flexboxを使用して子要素を配置 */
	justify-content: center;
	/* 子要素を水平方向中央に */
	align-items: center;
	/* 子要素を垂直方向中央に */
	z-index: 9999;
	/* 最前面に表示 */
	opacity: 1;
	/* 初期状態は不透明 */
	transition: opacity 0.4s ease-out;
	/* フェードアウト用トランジション (0.4秒) */
}

/* ローディングスライドショーオーバーレイが非表示になるときのスタイル */
#loading-slideshow-overlay.hidden {
	opacity: 0;
	/* 透明にする */
	/* display: none; は JavaScript の setTimeout で設定される想定 */
}

/* ローディングスライドショー本体 */
#loading-slideshow {
	background-color: rgba(12, 12, 12, 0.7);
	/* スライドショーの背景色 (少し透明な暗いグレー) */
	/* padding: 20px; */
	/* 内側の余白 */
	padding: 50px 20px 20px 20px;
	/* ★★★ 上部パディングを増やしてボタンとタイトルのスペース確保 ★★★ */
	border-radius: 10px;
	/* 角を丸める */
	text-align: center;
	/* テキストを中央揃え */
	color: #fff;
	/* 文字色を白に */
	width: 90%;
	/* 基本幅を90%とし、スマホにも対応 */
	max-width: 700px;
	/* PC表示時に広がりすぎるのを防ぐため最大幅を700pxに制限 */
	max-height: 85vh;
	/* スクロールバーが出にくいように最大高さを画面の85%に制限 */
	overflow-y: auto;
	/* 念のため高さがあふれた場合は内部スクロールさせる */
	display: flex;
	/* Flexboxを使用 */
	flex-direction: column;
	/* 子要素を縦方向に並べる */
	position: relative;
	/* 閉じるボタンの絶対位置指定の基準とする */
	visibility: hidden;
	/* ★★★ 初期状態を非表示にする ★★★ */
}

/* スライドショーの閉じるボタン */
#close-slideshow {
	position: absolute;
	/* 親要素(#loading-slideshow)に対して絶対位置指定 */
	top: 10px;
	/* 上から10pxの位置 (padding-top: 40px の内側) */
	right: 10px;
	/* 右から10pxの位置 */
	background-color: hsl(34, 94%, 51%);
	/* バーの色 (#FFCA28) */
	color: white;
	/* 文字色を白に */
	border: none;
	/* 境界線なし */
	padding: 5px 10px;
	/* 内側の余白 */
	cursor: pointer;
	/* カーソルをポインターに */
	border-radius: 5px;
	/* 角を丸める */
	font-size: 1.1em;
	/* フォントサイズを少し小さく */
	font-weight: bold;
	/* 太字 */
	z-index: 1;
	/* ★★★ 念のため追加（他の要素より手前に） ★★★ */
}

/* 閉じるボタンが無効な時のスタイル */
#close-slideshow:disabled {
	background-color: #333;
	/* 背景色を濃いグレーに */
	cursor: not-allowed;
	/* カーソルを禁止マークに */
}

/* スライドを格納するコンテナ */
#slides-container {
	flex-grow: 1;
	/* 親コンテナ内で可能な限り高さを取る */
	overflow-y: auto;
	/* 内容がはみ出た場合に垂直スクロールバーを表示 */
	margin-bottom: 10px;
	/* 下側のナビゲーションとの間隔 */
	display: flex;
	/* Flexboxを使用してスライドを横並びにする */
	scroll-snap-type: x mandatory;
	/* 横スクロール時にスライド単位でスナップ */
	overflow-x: hidden;
	/* 横スクロールバーは常に隠す */
	width: 100%;
	/* 親要素(#loading-slideshow)に幅を合わせる */
	/* ▼▼▼ 修正 ▼▼▼ */
	min-height: 0;
	/* Flexアイテムのスクロール問題対策 */
	/* ▲▲▲ 修正 ▲▲▲ */
}

/* 個々のスライドのスタイル */
.slide {
	min-width: 100%;
	/* 各スライドはコンテナ幅全体を使う */
	scroll-snap-align: start;
	/* スクロールスナップの開始位置に合わせる */
	opacity: 0;
	/* 初期状態は透明 */
	transition: opacity 0.5s ease-in-out;
	/* 透明度が変わる際のアニメーション */
	display: none;
	/* 初期状態では非表示 (JavaScriptで制御) */
	flex-direction: column;
	/* スライド内の要素を縦方向に並べる */
	align-items: center;
	/* スライド内の要素を水平方向中央に */
	/* justify-content: center; */
	/* コメントアウトまたは削除 */
	/* ▼▼▼ 修正 ▼▼▼ */
	justify-content: flex-start;
	/* 上寄せに変更 */
	height: auto;
	/* コンテンツに合わせて高さが変わるように明示 */
	/* ▲▲▲ 修正 ▲▲▲ */
	padding: 10px;
	/* 内側の余白 */
	box-sizing: border-box;
	/* paddingを含めて幅/高さを計算 */
	background-color: rgba(51, 51, 51, 0.8);
	/* 半透明の暗いグレー背景 */
}


/* アクティブな（表示中の）スライドのスタイル */
.slide.active {
	opacity: 1;
	/* 不透明にする */
	display: flex;
	/* 表示する (Flexbox設定を適用) */
}

/* スライド内の見出し(h2)のスタイル */
.slide h2 {
	font-size: 1.5em;
	/* フォントサイズ */
	margin-bottom: 15px;
	/* 下側の余白 */
	margin-top: 0;
	/* ★★★ 上マージンをリセット（親のpaddingで制御） ★★★ */
}

/* スライド内の画像(img)のスタイル */
.slide img {
	max-width: 100%;
	/* 最大幅をスライドの幅に合わせる */
	max-height: 60vh;
	/* 最大高さをビューポート高さの60%に制限 */
	object-fit: contain;
	/* アスペクト比を保ちつつ、全体が収まるように調整 */
	margin-bottom: 15px;
	/* 下側の余白 */
	border-radius: 5px;
	/* 角を丸める */
}

/* スライド内の段落(p)のスタイル */
.slide p {
	font-size: 1em;
	/* フォントサイズ */
	line-height: 1.6;
	/* 行の高さ */
	text-align: left;
	/* テキストを左寄せ */
	max-width: 600px;
	/* テキストの最大幅を制限 */
	margin: 0 auto;
	/* 水平方向中央に配置 */
	/* ▼▼▼ 修正 ▼▼▼ */
	overflow-wrap: break-word;
	/* 長い単語の折り返し */
	word-break: break-word;
	/* 長い単語の折り返し (念のため) */
	/* ▲▲▲ 修正 ▲▲▲ */
}

/* スライドショーのナビゲーションエリア（ボタンとプログレスバー） */
.navigation {
	display: flex;
	/* Flexboxを使用 */
	justify-content: space-between;
	/* 子要素を両端に配置し、中央の要素はスペースを広げる */
	align-items: center;
	/* 子要素を垂直方向中央に */
	width: 100%;
	/* 幅を親要素に合わせる */
	margin-top: 10px;
	/* スライドコンテナとの上側の間隔 */
}

/* ナビゲーション内のボタン（戻る/進む）のスタイル */
.navigation button {
	background-color: hsl(34, 94%, 51%);
	/* バーの色 (#FFCA28) */
	color: white;
	/* 文字色を白に */
	border: none;
	/* 境界線なし */
	padding: 8px 15px;
	/* 内側の余白 */
	cursor: pointer;
	/* カーソルをポインターに */
	border-radius: 5px;
	/* 角を丸める */
	font-size: 1.5em;
	/* ★★★ 矢印の大きさを変更 ★★★ */
	font-weight: bold;
	/* 太字 */
	line-height: 1;
	/* ★★★ ボタンの高さに影響しないようにline-height調整 ★★★ */
}

/* ナビゲーション内のボタンが無効な時のスタイル */
.navigation button:disabled {
	background-color: #222;
	/* 背景色を濃いグレーに */
	cursor: not-allowed;
	/* カーソルを禁止マークに */
}

/* プログレスバーのコンテナ */
#progress-bar-container {
	flex-grow: 1;
	/* ナビゲーション内で可能な限り幅を取る */
	height: 20px;
	/* 高さ */
	background-color: #333;
	/* 背景色 (濃いグレー) */
	border-radius: 10px;
	/* 角を丸める */
	margin: 0 10px;
	/* 左右のボタンとの間隔 */
	position: relative;
	/* テキストの絶対位置指定の基準とする */
	overflow: hidden;
	/* 中のバーが角丸からはみ出ないように */
	visibility: visible;
	/* 初期表示は見えるように */
}

/* プログレスバー本体（進捗を示す部分） */
#progress-bar {
	width: 0%;
	/* 初期幅は0% */
	height: 100%;
	/* 高さをコンテナに合わせる */
	background-color: hsl(34, 90%, 72%);
	/* バーの色 (#FFCA28) */
	border-radius: 10px;
	/* 角を丸める */
	transition: width 0.3s ease-in-out;
	/* 幅が変わる際のアニメーション */
	/* z-index: 0; または指定なし */
	/* テキストより背面に */
}

/* プログレスバー上のテキスト */
#progress-text {
	position: absolute;
	/* 親要素(#progress-bar-container)に対して絶対位置指定 */
	top: 50%;
	/* 上から50%の位置 */
	left: 50%;
	/* 左から50%の位置 */
	transform: translate(-50%, -50%);
	/* 要素自身の中心を基準に中央揃え */
	color: #ffffff;
	/* 文字色 (#e3e3e3) */
	font-size: 0.9em;
	/* フォントサイズ */
	white-space: nowrap;
	/* テキストを折り返さない */
	font-family: 'Noto Sans JP', sans-serif;
	/* フォント指定 */
	font-weight: bold;
	/* 太字 */
	z-index: 1;
	/* プログレスバー(#progress-bar)より手前に表示 */
	pointer-events: none;
	/* テキストがクリックイベントを妨げないように */
}


/* キャンバス (Three.jsの描画領域) */
#canvas {
	position: fixed;
	/* 画面に固定 */
	top: 0;
	/* 上端に配置 */
	left: 0;
	/* 左端に配置 */
	width: 100%;
	/* 幅を画面全体に */
	height: 100%;
	/* 高さを画面全体に */
	z-index: 1;
	/* 重なり順序を背面に */
	opacity: 0;
	/* ★★★ 初期状態を透明にする ★★★ */
	transition: opacity 0.5s ease-in;
	/* ★★★ フェードインアニメーションを追加 (0.5秒) ★★★ */
}

/* フェード用 (パノラマ移動時の画面遷移エフェクト用) */
#fade {
	position: fixed;
	/* 画面に固定 */
	top: 0;
	/* 上端に配置 */
	left: 0;
	/* 左端に配置 */
	width: 100%;
	/* 幅を画面全体に */
	height: 100%;
	/* 高さを画面全体に */
	z-index: 2;
	/* キャンバスより手前に表示 */
	pointer-events: none;
	/* クリックイベントを透過させる */
}

/* ▼▼▼ Flexboxベースのレイアウトに修正 ▼▼▼ */
/* 吹き出しダイアログ */
#balloon-dialog {
	position: absolute;
	/* JavaScriptで位置計算するためabsoluteに変更 */
	z-index: 4;
	/* 重なり順序 */
	width: 400px;
	/* 幅 */
	height: 500px;
	/* 高さ */
	background: rgba(0, 0, 0, 0.7);
	/* 半透明の黒背景 */
	/* text-align: center; は不要になる */
	visibility: hidden;
	/* 初期非表示 */
	display: flex;
	/* ★★★ Flexboxコンテナにする ★★★ */
	flex-direction: column;
	/* ★★★ 縦方向に並べる ★★★ */
	box-sizing: border-box;
	/* ★★★ 念のため追加 ★★★ */
	padding: 10px;
	/* ★★★ 上下のボタン部分との間隔をpaddingで確保 ★★★ */
	padding-bottom: 6px;
	/* ★★★ 下部paddingを 6px に変更 ★★★ */
	color: white;
	/* ★★★ デフォルトの文字色を白系に ★★★ */
}

/* 吹き出しダイアログ内のボタン行 (HTMLの1番目の .row) */
#balloon-dialog>.row:first-child {
	flex-shrink: 0;
	/* ボタン行は縮まないように */
	text-align: center;
	/* ボタン類を中央揃え */
	/* margin-top は削除 (親のpaddingで調整) */
	box-sizing: border-box;
	/* 念のため */
	padding-bottom: 10px;
	/* メッセージ部分との間に少し余白 */
}

/* 吹き出しダイアログ内のメッセージ行 (HTMLの2番目の .row) */
#balloon-dialog>.row:nth-child(2) {
	flex-grow: 1;
	/* 残りの高さを取る */
	overflow: hidden;
	/* はみ出し防止 */
	/* margin-top は削除 */
	box-sizing: border-box;
	/* 念のため */
	/* text-align: center; は不要 */
	min-height: 0;
	/* ★★★ スクロール不足対策 ★★★ */
}

/* メッセージ行内の .col も高さを100%にする */
#balloon-dialog>.row:nth-child(2)>.col {
	/* height: 100%; は削除 */
	box-sizing: border-box;
	/* 念のため */
	text-align: left;
	/* メッセージエリアは左揃え */
	display: flex;
	/* ★★★ Flexboxコンテナにする ★★★ */
	flex-direction: column;
	/* ★★★ 縦方向に ★★★ */
	min-height: 0;
	/* ★★★ スクロール不足対策 ★★★ */
	height: 100%;
	/* ★★★ 高さを維持 ★★★ */
}

/* 吹き出しダイアログ内のメッセージ表示エリア */
#balloon-message {
	overflow-y: auto;
	/* 縦スクロール */
	padding-right: 7px;
	/* スクロールバーとの隙間 */
	overflow-x: hidden;
	/* 横スクロール禁止 */
	word-wrap: break-word;
	/* 長い単語の折り返し */
	box-sizing: border-box;
	/* paddingを含めて計算 */
	/* height: 100%; は削除 */
	width: 100%;
	/* ★★★ 親要素(.col)いっぱいに広がるように変更 ★★★ */
	display: block;
	/* ★★★ block要素に変更 ★★★ */
	font-family: 'Noto Sans JP', sans-serif;
	/* 旧index.phpのインラインスタイルから転記 */
	text-align: left;
	/* 旧index.phpのインラインスタイルから転記 */
	/* color: #333; は削除 */
	/* background-color: #fff; は削除 */
	padding: 10px;
	/* ★★★ 内側にパディングを追加 ★★★ */
	padding-bottom: 6px;
	/* ★★★ 下部paddingを 6px に変更 ★★★ */
	/* color: white; */
	/* 必要であれば明示的に白を指定 (親から継承させる) */
	flex-grow: 1;
	/* ★★★ 残りの高さを取るように変更 ★★★ */
	min-height: 0;
	/* ★★★ スクロール不足対策 ★★★ */
}

/* 吹き出しダイアログ内の最初の行（ボタン行）のマージン */
#balloon-dialog>.row:first-child {
	margin-top: 10px;
}

/* 吹き出しダイアログ内の2番目の行（メッセージ行）のマージン */
#balloon-dialog>.row:nth-child(2) {
	margin-top: 10px;
}

/* 吹き出しダイアログ内のボタンのスタイル */
#balloon-dialog .row:first-child .btn {
	position: relative;
	line-height: normal;
}

#balloon-dialog .row:first-child .btn-sm.rounded-circle {
	width: 1.2rem;
	height: 1.2rem;
}

#balloon-dialog .row:first-child .btn-sm.rounded-pill {
	width: 3rem;
}

/* balloon_infoテキスト内にHTMLでimg を埋め込んだ場合の画像横幅 */
#balloon-message img {
	/* width: 290px; は削除 (max-widthで制御) */
	max-width: 100%;
	/* はみ出し防止のため追加 */
	height: auto;
	/* アスペクト比維持 */
	display: block;
	/* 中央揃えしやすく */
	margin: 10px auto;
	/* 上下左右マージン */
}

/* iframeも同様に設定する場合 */
#balloon-message iframe {
	max-width: 100%;
	/* height: auto; は削除 (アスペクト比で高さを決めたい場合) */
	aspect-ratio: 16 / 9;
	/* ★★★ 16:9の比率を維持（必要に応じて調整） ★★★ */
	display: block;
	margin: 10px auto;
	border: none;
}

/* ▲▲▲ Flexboxベースのレイアウトに修正 ▲▲▲ */


/* メモ詳細ダイアログ */
#memo-detail-dialog {
	position: absolute;
	width: 300px;
	/* 基本の幅 */
	aspect-ratio: 1 / 1;
	/* ★★★ 正方形にする ★★★ */
	min-height: 150px;
	/* 最小高さ */
	max-height: 80vh;
	/* 最大高さ */
	max-width: 90%;
	/* 最大幅 */

	background-color: #f8e8daea;
	/* 半透明の背景 */
	border-radius: 40px;
	/* 角を丸める */
	padding: 10px;
	/* ★★★ 上左右のパディング ★★★ */
	padding-bottom: 10px;
	/* ★★★ 下部のパディング ★★★ */
	z-index: 10;
	visibility: hidden;
	color: #ffebf1;
	/* 基本文字色 */
	font-size: 16px;
	/* 基本フォントサイズ */
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
}

/* ★★★ メモ詳細ダイアログ内のメッセージ行 (HTMLの1番目の .row) ★★★ */
/* この要素がメッセージエリア(.memo-message-box)の親になります */
#memo-detail-dialog>.row:first-child {
	flex-grow: 1;
	/* 残りの高さを取る */
	min-height: 0;
	/* スクロール不足対策 */
	overflow: hidden;
	/* はみ出し防止 */
	margin-top: 10px;
	margin-bottom: 15px;
	/* ★★★ ボタン行との間隔を 15px に調整 ★★★ */
	box-sizing: border-box;
	/* 念のため追加 */
}

/* メモ詳細ダイアログ内のメッセージ表示ボックス (.col.memo-message-box) */
/* この要素内でスクロールが発生します */
.memo-message-box {
	height: 100%;
	/* 親(.row)の高さに合わせる */
	overflow-y: auto;
	/* 内容がはみ出た場合に垂直スクロールバーを表示 */
	padding-right: 7px;
	/* 右側の余白 (スクロールバーとの隙間) */
	box-sizing: border-box;
	min-height: 0;
	/* スクロール不足対策 */
	/* background-color: rgba(255, 255, 255, 0.05); */
	/* デバッグ用に背景色を付ける場合 */
}

/* ★★★ メモ詳細ダイアログ内のユーザーが読むメッセージ本体 (#memo-message) ★★★ */
#memo-message {
	/* width: 100%; を削除またはコメントアウト */
	width: calc(100% - 4px);
	/* ★★★ 右側に15pxのスペースを空けるように幅を調整 ★★★ */
	display: block;
	word-wrap: break-word;
	box-sizing: border-box;
	margin-right: 4px;
	/* ★★★ テキストと右端(スクロールバー)の間★★★ */
	padding: 5px;
	/* 内側の上下左右パディング */
	font-family: 'Noto Sans JP', sans-serif;
	/* フォント指定 */
	font-weight: bold;
	/* 太字 */
	font-size: 16.5px;
	/* 基本フォントサイズ */
	letter-spacing: 0.05em;
	/* 文字間隔を少し広げる (半角文字の詰まり改善用) */
	color: #4b3f3f;
	/* メッセージ本文の文字色 */
	/* background-color: rgba(0, 255, 0, 0.1); */
	/* デバッグ用に背景色を付ける場合 */
}

/* ★★★ メモ詳細ダイアログ内のボタン行 (HTMLの最後の .row) ★★★ */
#memo-detail-dialog>.row:last-child {
	flex-shrink: 0;
	/* ボタン行は縮まない */
	width: 100%;
	/* 幅を100%に */
	box-sizing: border-box;
}

/* メモの編集削除ボタン最初のスタイル */
#memo-detail-dialog .btn {
	/* margin-left はHTMLのユーティリティクラス(me-2など)で制御するため削除 */
	color: #4b3f3f;
	/* ボタンの文字色 */
	background-color: #f8e8da;
	/* ボタンの背景色 */
	border-color: #fddabbea;
	/* ボタンの枠線色 */
}

/* メモの編集削除ボタンクリックした時のスタイル */
#memo-detail-dialog .btn:hover {
	color: #776565;
	background-color: #fddabbea;
	border-color: #fddabbea;
}

/* メモ入力ダイアログ */
.memo-input-dialog {
	position: fixed;
	/* 画面に固定 */
	top: 50%;
	/* 画面中央(垂直) */
	left: 50%;
	/* 画面中央(水平) */
	transform: translate(-50%, -50%);
	/* 要素自身の中心を基準に中央揃え */
	width: 250px;
	/* 幅を指定 */
	background-color: rgba(0, 0, 0, 0.432);
	/* 半透明の黒背景 */
	border-radius: 5px;
	/* 角を丸める */
	padding: 10px;
	/* 内側の余白 */
	z-index: 11;
	/* メモ詳細ダイアログより手前に表示 */
	display: none;
	/* 初期状態は非表示 */
	color: white;
	/* 文字色を白に */
}

/* メモ入力ダイアログ内のメッセージテキスト */
.memo-input-message {
	font-size: 15px;
	/* フォントサイズ */
	margin-bottom: 5px;
	/* 下側の余白 */
}

/* メモ入力カウンターのコンテナ */
#char-counter-container {
	text-align: right;
	margin-top: 5px;
}

/* メモ入力用のテキストエリア */
#memo-text {
	width: 100%;
	/* 幅を親要素に合わせる */
	box-sizing: border-box;
	/* paddingを含めて幅100%にする */
	margin-top: 5px;
	/* 上側の余白 */
	background-color: #333;
	/* 背景色 (濃いグレー) */
	color: white;
	/* 文字色を白に */
	border: 1px solid #555;
	/* 境界線 */
}

/* メモ入力カウンター */
#char-counter-container {
	font-size: 0.9em;
	/* フォントサイズを少し小さくする場合 (任意) */
	font-weight: bold;
	/* 太字 */
	color: #17a2b8;
	/* デフォルトのカウンター文字色 (例: 明るいグレー) */
	/* 他の色にしたい場合は、ここの #aaaaaa を変更してください */
	/* 例: 青っぽくする場合 color: #17a2b8; */
	/* 例: 通常のテキストと同じ白系にする場合 color: #f0f0f0; */
}

/* #char-counter のスタイルは、上限超過時にJavaScriptで color: red; になります */

/* ▼▼▼ 「01picture表示」に合わせた修正 ▼▼▼ */
/* 画像・動画再生ダイアログ */
#play-photo-dialog {
	position: fixed;
	/* 画面に固定 */
	top: 0;
	/* 上端に配置 */
	left: 0;
	/* 左端に配置 */
	width: 100%;
	/* 幅を画面全体に */
	height: 100%;
	/* 高さを画面全体に */
	background-color: rgba(0, 0, 0, 0.8);
	/* 半透明の黒背景 */
	display: none;
	/* 初期状態は非表示 */
	/* justify-content, align-items は削除 (中のboxで制御) */
	z-index: 12;
	/* 最前面に表示 */
	cursor: pointer;
	/* カーソルをポインターに (閉じる動作を示唆) */
}

/* 画像・動画再生ダイアログ内のコンテンツボックス */
#play-photo-box {
	position: relative;
	/* 相対位置指定 */
	/* max-width, max-height は削除 (中のimg/iframeで制御) */
	/* background-color は削除 (親の背景で十分) */
	/* display: flex, justify-content, align-items: は削除 */
	/* ▼▼▼ 「01picture表示」のスタイルを追加 ▼▼▼ */
	visibility: visible;
	/* 表示状態 */
	display: block;
	/* ブロック要素 */
	top: 50%;
	/* 上から50% */
	left: 50%;
	/* 左から50% */
	transform: translate(-50%, -50%);
	/* 中央揃え */
	width: 100%;
	/* 幅を100% (中の要素で制限) */
	height: 100%;
	/* 高さを100% (中の要素で制限) */
}

/* ダイアログ内のiframe (動画用) */
#dialog-photo-iframe-src {
	display: block;
	/* ブロック要素 */
	/* margin: auto; は削除 */
	max-width: 100%;
	/* 親要素に最大幅を合わせる */
	max-height: 100%;
	/* 親要素に最大高さを合わせる */
	object-fit: contain;
	/* アスペクト比維持 */
	border: none;
	/* 境界線なし */
	width: 100%;
	/* 幅を指定 */
	aspect-ratio: 16 / 9;
	/* 比率を維持 */
	/* ▼▼▼ 「01picture表示」のスタイルを追加 ▼▼▼ */
	position: relative;
	/* 位置調整の基準 */
	top: 50%;
	/* 上から50% */
	left: 50%;
	/* 左から50% */
	transform: translate(-50%, -50%);
	/* 中央揃え */
	border: none;
}

/* ダイアログ内のimg (画像用) */
#dialog-photo-img-src {
	display: block;
	/* ブロック要素 */
	/* margin: auto; は削除 */
	max-width: 100%;
	/* 親要素に最大幅を合わせる */
	max-height: 100%;
	/* 親要素に最大高さを合わせる */
	object-fit: contain;
	/* アスペクト比維持 */
	/* ▼▼▼ 「01picture表示」のスタイルを追加 ▼▼▼ */
	position: relative;
	/* 位置調整の基準 */
	top: 50%;
	/* 上から50% */
	left: 50%;
	/* 左から50% */
	transform: translate(-50%, -50%);
	/* 中央揃え */
	width: auto;
	/* 幅は自動 */
	height: auto;
	/* 高さは自動 */
}

/* ▲▲▲ 「01picture表示」に合わせた修正 ▲▲▲ */


/* インスタグラム共有ダイアログ */
#insta-dialog {
	position: fixed;
	/* 画面に固定 */
	top: 50%;
	/* 上から50%の位置 */
	left: 50%;
	/* 左から50%の位置 */
	transform: translate(-50%, -50%);
	/* 要素自身の中心を基準に中央揃え */
	width: 300px;
	/* 幅を指定 */
	background-color: rgba(255, 255, 255, 0.9);
	/* 半透明の白背景 */
	border-radius: 10px;
	/* 角を丸める */
	padding: 15px;
	/* 内側の余白 */
	z-index: 10;
	/* 重なり順序を手前に */
	display: none;
	/* 初期状態は非表示 */
	color: #333;
	/* 文字色 (暗いグレー) */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	/* 影をつける */
}

/* インスタグラムダイアログ内のコンテンツボックス */
.insta-dialog-box {
	text-align: center;
	/* テキストやボタンを中央揃え */
}

/* インスタグラムアプリ起動ボタン */
.insta-appboot-button {
	display: inline-block;
	/* インラインブロック要素として表示 */
	padding: 10px 20px;
	/* 内側の余白 */
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	/* グラデーション背景 */
	color: white;
	/* 文字色を白に */
	text-decoration: none;
	/* 下線をなくす */
	border-radius: 5px;
	/* 角を丸める */
	font-weight: bold;
	/* 太字 */
	margin-bottom: 15px;
	/* 下側の余白 */
}

/* インスタグラムダイアログ内のメッセージテキスト */
.insta-message {
	font-size: 12px;
	/* フォントサイズ */
	margin-bottom: 10px;
	/* 下側の余白 */
	line-height: 1.4;
	/* 行の高さ */
}

/* インスタグラムダイアログ内のテキストエリアのボックス */
.insta-text-box {
	margin-bottom: 10px;
	/* 下側の余白 */
	text-align: left;
	/* テキストを左寄せ */
}

/* テキストエリアのラベル (テキスト/text) */
.insta-text-box span {
	font-size: 10px;
	/* フォントサイズ */
	color: #555;
	/* 文字色 (グレー) */
	/* align-text は存在しないプロパティのため、text-align を使用 */
	display: block;
	/* spanをブロック要素にしてtext-alignを有効に */
	text-align: left;
}

/* インスタグラム共有用のテキストエリア */
#insta-text {
	width: 100%;
	/* 幅を親要素に合わせる */
	height: 80px;
	/* 高さを指定 */
	box-sizing: border-box;
	/* paddingを含めて幅/高さを計算 */
	margin-top: 3px;
	/* 上側の余白 */
	border: 1px solid #ccc;
	/* 境界線 */
	border-radius: 3px;
	/* 角を少し丸める */
	padding: 5px;
	/* 内側の余白 */
	font-size: 12px;
	/* フォントサイズ */
	background-color: #f9f9f9;
	/* 背景色 (薄いグレー) */
}

/* インスタグラムダイアログ内の画像プレビュー */
#insta-image {
	max-width: 100%;
	/* 最大幅を親要素に合わせる */
	max-height: 150px;
	/* 最大高さを指定 */
	object-fit: contain;
	/* アスペクト比を保ちつつ、全体が収まるように調整 */
	margin-top: 10px;
	/* 上側の余白 */
	border: 1px solid #eee;
	/* 薄い境界線 */
}

/* ▼▼▼ YouTube開閉ボタン ▼▼▼ */
#youtube-toggle-button {
	position: fixed;
	top: 50px;
	/* ログイン情報と重ならないように調整 */
	right: 10px;
	writing-mode: vertical-rl;
	/* 縦書き 右から左へ */
	background-color: rgba(255, 255, 255, 0.534);
	color: rgb(0, 0, 0);
	padding: 10px 5px;
	border-radius: 5px 0 0 5px;
	/* 左側だけ角丸 */
	cursor: pointer;
	z-index: 8;
	/* ★★★ YouTubeフレーム(7)より手前 ★★★ */
	display: none;
	/* 初期状態は非表示 JSで制御 */
	font-size: 14px;
	/* ボタン文字サイズ */
}

/* ▲▲▲ YouTube開閉ボタン ▲▲▲ */

/* ▼▼▼ YouTube埋め込み用のフレーム (開閉対応) ▼▼▼ */
#frame-youtube {
	position: fixed;
	/* 画面に固定 */
	top: 10px;
	/* 上から10pxの位置 */
	/* right: 10px; */
	/* ← 開いた時の位置 */
	right: -490px;
	/* ← 初期状態: 画面右外 (幅300px + 右隙間10px) */
	/* width: 480px; */
	/* デフォルトの幅 (PC/タブレット) - クラスで指定 */
	/* height: 270px; */
	/* デフォルトの高さ (16:9) - クラスで指定 */
	z-index: 5;
	/* ★★★ フッターメニュー(6)より手前に変更 ★★★ */
	display: none;
	/* 初期状態は非表示 JSで制御 */
	background-color: black;
	/* 背景色 */
	/* ★★★ サイズ変更もアニメーションさせる ★★★ */
	transition: right 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* YouTubeフレームが開いた状態 (PC/タブレット) */
#frame-youtube.open {
	right: 50px;
	/* PC/タブレットでの開いた位置 */
}

/* ▲▲▲ YouTube埋め込み用のフレーム (開閉対応) ▲▲▲ */

/* YouTube埋め込み内の各iframe (動画、ライブストリーム、チャット) */
#video_url,
#video_live_stream,
#video_live_chat {
	position: absolute;
	/* 親要素(#frame-youtube)に対して絶対位置指定 */
	top: 0;
	/* 上端に配置 */
	left: 0;
	/* 左端に配置 */
	width: 100%;
	/* 幅を親要素に合わせる */
	height: 100%;
	/* 高さを親要素に合わせる */
	border: none;
}

/* YouTubeライブチャット表示切り替えボタン */
#video_live_chat_btn {
	position: absolute;
	/* 親要素(#frame-youtube)に対して絶対位置指定 */
	bottom: -40px;
	/* 下から5pxの位置 */
	right: 5px;
	/* 右から5pxの位置 */
	width: 60px;
	/* PC/タブレットでの幅 */
	cursor: pointer;
	/* カーソルをポインターに */
}

/* キャプチャ用の一時的なキャンバス */
#capture_canvas {
	display: none;
	/* 通常は非表示 */
}

/* --- ログインUI --- */
#auth-ui-container {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 8;
	/* YouTubeボタンと同じ階層に設定 */
	display: none;
	/* 初期状態では非表示にする */
	opacity: 0;
	/* フェードインの初期状態 */
	transition: opacity 0.5s ease-in;
	/* フェードインアニメーションを追加 */
	/* YouTubeボタン風のスタイル */
	font-family: sans-serif;
	font-size: 14px;
	background-color: rgba(255, 255, 255, 0.534);
	padding: 5px 10px;
	color: rgb(0, 0, 0);
	border-radius: 5px;
}

#auth-ui-container button {
	/* Bootstrapのスタイルを上書きしてシンプルな見た目に */
	background-color: transparent;
	border: none;
	color: inherit;
	/* 親要素の文字色を継承 */
	padding: 0;
	font-size: inherit;
	/* 親要素のフォントサイズを継承 */
	cursor: pointer;
}

#auth-ui-container button:hover {
	text-decoration: underline;
}

#logged-in-view {
	display: none;
	align-items: center;
}

#user-display-name {
	margin-right: 10px;
	font-weight: bold;
}

/* フッターメニュー全体のコンテナ */
.footer-menu {
	position: fixed;
	/* 画面に固定 */
	bottom: 0;
	/* 下端に配置 */
	left: 0;
	/* 左端に配置 */
	width: 100%;
	/* 幅を画面全体に */
	z-index: 6;
	/* 重なり順序を指定 */
}

/* フッターメニュー本体 (開閉する部分) */
.footer-menu>aside {
	position: absolute;
	/* 親要素(.footer-menu)に対して絶対位置指定 */
	bottom: -60px;
	/* 初期状態は画面下に隠す (-80px + 上に突き出すボタン高さ20px?) */
	left: 50%;
	/* 左から50%の位置 */
	transform: translateX(-50%);
	/* 要素自身の中心を基準に中央揃え */
	width: 90%;
	/* 幅を画面の90%に */
	max-width: 600px;
	/* 最大幅を指定 */
	height: 80px;
	/* 高さを指定 */
	background-color: rgba(0, 0, 0, 0.3);
	/* 半透明の黒背景 */
	border-radius: 10px 10px 0 0;
	/* 上側の角だけ丸める */
	transition: bottom 0.3s ease-in-out;
	/* bottomプロパティが変わる際のアニメーション */
}

/* フッターメニューが開いた状態のスタイル */
.footer-menu>aside.open {
	bottom: 0;
	/* 画面下端に表示 */
}

/* フッターメニュー内のアイコンリスト */
.footer-menu>aside ul {
	list-style: none;
	/* リストマーカーをなくす */
	padding: 0 10px;
	/* 左右の内側余白 */
	margin: 0;
	/* 外側の余白をなくす */
	height: 60px;
	/* ボタンエリアの高さを指定 */
	display: flex;
	/* Flexboxを使用 */
	justify-content: space-around;
	/* アイコンを均等に配置 */
	align-items: center;
	/* アイコンを垂直方向中央に */
}

/* フッターメニュー内のリストアイテム (アイコンの親) */
.footer-menu>aside li {
	/* 個別のマージンは不要 (ulのjustify-contentで調整) */
}

/* フッターメニュー内のアイコン画像 */
.footer-menu>aside li img {
	width: 40px;
	/* アイコンの幅を指定 */
	height: auto;
	/* 高さは自動調整 */
	max-height: 40px;
	/* 縦長の画像が上に伸びないように制限を追加 */
	object-fit: contain;
	/* アスペクト比を維持して収める */
	display: block;
	/* ブロック要素として表示 (余白調整のため) */
	cursor: pointer;
	/* カーソルをポインターに */
}

/* フッターメニューの開閉ボタン */
.footer-menu #btnOpen {
	position: absolute;
	/* 親要素(aside)に対して絶対位置指定 */
	top: -26px;
	/* 上に突き出すように配置 */
	left: 50%;
	/* 左から50%の位置 */
	transform: translateX(-50%);
	/* 要素自身の中心を基準に中央揃え */
	width: 90px;
	/* 幅を指定 */
	height: 37px;
	/* 高さを指定 */
	cursor: pointer;
	/* カーソルをポインターに */
}

/* フッターメニュー開閉ボタン内の画像 */
.footer-menu #btnOpen img {
	width: 100%;
	/* 幅を親要素に合わせる */
	height: 100%;
	/* 高さを親要素に合わせる */
}

/* ログインダイアログ */
.login-dialog {
	position: fixed;
	/* 画面に固定 */
	top: 50%;
	/* 上から50%の位置 */
	left: 50%;
	/* 左から50%の位置 */
	transform: translate(-50%, -50%);
	/* 要素自身の中心を基準に中央揃え */
	width: 300px;
	/* 幅を指定 */
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明の黒背景 */
	border-radius: 10px;
	/* 角を丸める */
	padding: 20px;
	/* 内側の余白 */
	z-index: 11;
	/* 重なり順序を指定 (メモ入力より手前) */
	display: none;
	/* 初期状態は非表示 */
	color: white;
	/* 文字色を白に */
	text-align: center;
	/* テキストを中央揃え */
	font-size: 16px;
	/* ★★★ この値をお好みのサイズに変更 (例: 18px, 1.1em など) ★★★ */
}

/* ログインダイアログ内のテキスト入力欄とパスワード入力欄 */
.login-dialog input[type="text"],
.login-dialog input[type="password"] {
	width: 100%;
	/* 幅を親要素に合わせる */
	padding: 10px;
	/* 内側の余白 */
	margin-bottom: 10px;
	/* 下側の余白 */
	border: 1px solid #555;
	/* 境界線 */
	background-color: #333;
	/* 背景色 (濃いグレー) */
	color: white;
	/* 文字色を白に */
	border-radius: 5px;
	/* 角を丸める */
	box-sizing: border-box;
	/* paddingを含めて幅100%にする */
	font-weight: bold;
	font-size: 1em;
	/* ★★★ この値をお好みのサイズに変更 (例: 1.1em, 16px など) ★★★ */
	/* テキスト入力欄は width: 100% なので text-align: center; の影響は受けません */
}

/* ログインダイアログ内の送信ボタンと通常ボタン */
.login-dialog input[type="submit"],
.login-dialog input[type="button"] {
	/* width: 48%; */
	/* ← この行をコメントアウトまたは削除 */
	padding: 10px 20px;
	/* ← 左右のパディングを調整してボタン幅を確保 (例) */
	border: none;
	/* 境界線なし */
	border-radius: 5px;
	/* 角を丸める */
	cursor: pointer;
	/* カーソルをポインターに */
	margin-top: 10px;
	/* 上側の余白 */
	font-size: 1em;
	/* ★★★ この値をお好みのサイズに変更 (例: 1.1em, 16px など) ★★★ */
	margin-left: 5px;
	/* ★★★ ボタン間の左マージンを追加 ★★★ */
	margin-right: 5px;
	/* ★★★ ボタン間の右マージンを追加 ★★★ */
	/* display: inline-block; */
	/* input は元々インライン系なので通常不要 */
}

/* ログインダイアログ内の送信ボタンのスタイル */
.login-dialog input[type="submit"] {
	background-color: hsl(34, 94%, 51%);
	/* 背景色 */
	color: white;
	/* 文字色を白に */
	font-weight: bold;
	/* margin-right: 2%; */
	/* ← この行をコメントアウトまたは削除 */
}

/* ログインダイアログ内の通常ボタン（戻るなど）のスタイル */
.login-dialog input[type="button"] {
	background-color: #d6d6d6;
	/* 背景色 (グレー) */
	color: #303030;
	/* 文字色 (暗いグレー) */
	font-weight: bold;
	/* margin-left: 2%; */
	/* ← この行をコメントアウトまたは削除 */
}

/* ログインダイアログ内のメッセージやリンクを表示するFlexコンテナ */
.flex-login-message {
	display: flex;
	/* Flexboxを使用 */
	justify-content: center;
	/* 子要素を中央に配置 */
	margin-top: 15px;
	/* 上側の余白 */
	font-size: 15px;
	/* フォントサイズ */
}

/* ログインダイアログ内の説明文 */
.login-instruction-text {
	width: 100%;
	/* 親要素(.flex-login-message)いっぱいに広げる */
	text-align: center;
	/* ★ テキストを中央揃えにする */
	font-family: 'Arial', sans-serif;
	/* ★ 希望のフォントファミリーに変更 */
	font-size: 14px;
	/* フォントサイズを調整 (例: 12px) */
	line-height: 1.5;
	/* 行間を調整 (改行後の見やすさのため) */
	color: #dddddd;
	/* 文字色を調整 (任意) */
}

/* ログインダイアログ内のリンク */
.flex-login-message a {
	color: #aaa;
	/* 文字色 (薄いグレー) */
	text-decoration: none;
	/* 下線をなくす */
}

/* ログインダイアログ内のリンクにマウスが乗った時のスタイル */
.flex-login-message a:hover {
	text-decoration: underline;
	/* 下線を表示 */
}

/* コメント機能の使い方ガイド ポップアップ */
.usage-guide-popup-dialog {
	display: none;
	/* 初期状態は非表示 */
	position: fixed;
	/* 画面に固定 */
	z-index: 1000;
	/* 最前面に表示 */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	/* 内容が多い場合にスクロール可能にする */
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明の背景 */
	padding-top: 60px;
	/* ポップアップの上部マージン */
}

.usage-guide-popup-content {
	background-color: #fefefe;
	margin: 5% auto;
	/* 上下5%、左右自動で中央配置 */
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	/* ポップアップの幅 */
	max-width: 600px;
	/* 最大幅 */
	border-radius: 8px;
	position: relative;
	color: #333;
	/* テキストカラー */
}

.usage-guide-popup-close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	position: absolute;
	top: 10px;
	right: 15px;
}

.usage-guide-popup-close:hover,
.usage-guide-popup-close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* 既存の .usage-guide-popup-content h2 スタイルは一旦コメントアウトまたは削除し、新しいスタイルで上書きします */
/*
.usage-guide-popup-content h2 {
	margin-bottom: 20px; /* 見出し下のマージンを追加 */
font-size: 1.5em;
/* 見出しのフォントサイズ調整 */
color: #333;
/* 見出しの色 */
text-align: center;
/* 見出しを中央揃え */
}

*/

/* 新しいコメントガイド用スタイル (既存のポップアップスタイルとの競合を避けるため、セレクタを調整) */
.usage-guide-popup-content .container {
	/* 新しいHTMLのルートコンテナに適用 */
	font-family: 'Helvetica Neue', sans-serif;
	/* フォントを新しいスタイルに合わせる */
	background-color: #e6f0fad8;
	/* 背景色を新しいスタイルに合わせる */
	color: #1F2937;
	/* 文字色を新しいスタイルに合わせる */
	line-height: 1.8;
	/* max-width, margin, padding は .usage-guide-popup-content で制御されるため、ここでは不要な場合あり */
	/* 必要に応じて調整 */
	padding: 1rem;
	/* コンテナ内のパディング */
}

.usage-guide-popup-content h1 {
	/* 新しいHTMLのh1 */
	font-size: 1.8rem;
	color: #111827;
	border-bottom: 2px solid #E5E7EB;
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
	text-align: left;
	/* h1は左寄せのまま */
}

.usage-guide-popup-content h2 {
	/* 新しいHTMLのh2 */
	font-size: 1.4rem;
	margin-top: 2rem;
	color: #111827;
	display: flex;
	align-items: center;
	text-align: left;
	/* h2も左寄せのまま */
	border-bottom: none;
	/* 既存のh2スタイルからの影響をリセット */
	padding-bottom: 0;
	/* 既存のh2スタイルからの影響をリセット */
	margin-bottom: 1rem;
	/* h2の下に少しマージンを追加 */
}

/* 以下の ::before スタイルをコメントアウトまたは削除します */
/*
.usage-guide-popup-content h2::before {
  content: "🔹";
  margin-right: 0.5rem;
}
*/

/* 既存の .usage-guide-popup-content h3 スタイルは一旦コメントアウトまたは削除 */
/*
.usage-guide-popup-content h3 {
	font-size: 1.2em;
	color: #444;
	margin-top: 25px; /* 上の段落とのスペース */
margin-bottom: 10px;
border-bottom: 1px solid #eee;
/* 下線 */
padding-bottom: 5px;
}

*/ .usage-guide-popup-content p {
	margin: 0.5rem 0 1rem;
	/* line-height, color は .usage-guide-popup-content .container から継承されるか、ここで上書き */
}

/* 既存の .usage-guide-popup-content strong スタイルは一旦コメントアウトまたは削除 */
/*
.usage-guide-popup-content p {
	line-height: 1.6; /* 行間を調整 */
margin-bottom: 15px;
/* 段落下のマージンを追加 */
color: #555;
/* 本文の文字色を少し濃く */
}

.usage-guide-popup-content strong {
	color: #E91E63;
	/* 強調文字の色を変更 (例: ピンク系) */
}

*/ .usage-guide-popup-content ol,
.usage-guide-popup-content ul {
	margin: 0.5rem 0 1.5rem;
	padding-left: 1.2rem;
}

.usage-guide-popup-content li {
	margin-bottom: 0.5rem;
}

.usage-guide-popup-content .tip {
	background-color: #E0F2FE;
	padding: 1rem;
	border-left: 4px solid #3B82F6;
	margin: 1rem 0;
	border-radius: 4px;
}

.usage-guide-popup-content .summary {
	/* 新しいHTMLに .summary はないが、念のため定義 */
	background-color: #F3F4F6;
	padding: 1rem;
	margin-top: 2rem;
	border-radius: 6px;
}

.usage-guide-popup-content .summary h3 {
	margin-top: 0;
}

.usage-guide-popup-content .icon {
	font-weight: bold;
	color: #3B82F6;
}

.usage-guide-popup-content .guide-icon {
	width: 1em;
	/* 文字サイズに合わせた幅 (調整可能) */
	height: 1em;
	/* 文字サイズに合わせた高さ (調整可能) */
	vertical-align: middle;
	/* テキストと画像を中央揃え */
	margin-right: 0.2em;
	/* 画像とテキストの間のスペース */
}

/* --- メディアクエリ内の調整 --- */

/* スマホ縦持ち (画面幅480px以下) */
@media screen and (max-width: 480px) {

	/* ▼▼▼ スライドショーの調整 ▼▼▼ */
	#loading-slideshow {
		padding: 40px 10px 10px 10px;
		/* 上パディングを少し減らす */
	}

	.slide img {
		max-height: 45vh;
		/* 画像の高さをビューポートの45%に制限 */
	}

	.slide h2 {
		font-size: 1.3em;
		/* 見出しを少し小さく */
		margin-bottom: 10px;
	}

	.slide p {
		font-size: 0.9em;
		/* テキストを少し小さく */
		line-height: 1.5;
	}

	.navigation button {
		font-size: 1.3em;
		/* ナビゲーション矢印を少し小さく */
		padding: 6px 12px;
	}

	#progress-text {
		font-size: 0.8em;
	}

	/* ▲▲▲ スライドショーの調整 ▲▲▲ */


	/* ▼▼▼ Flexboxベースのレイアウトに修正 ▼▼▼ */
	#balloon-dialog {
		width: 90%;
		/* 幅を画面の90%に */
		height: 70%;
		/* 高さを画面の70%に */
		font-size: 16px;
		/* フォントサイズを少し小さく */
		padding: 5px;
		/* スマホ縦ではpaddingを少し小さく */
		padding-bottom: 6px;
		/* ★★★ 下部paddingを 6px に変更 ★★★ */
	}

	#balloon-dialog>.row:first-child {
		padding-bottom: 5px;
		/* メッセージ部分との余白を少し小さく */
	}

	/* メッセージ行の .col のスタイルは基本スタイルを継承 */
	#balloon-message {
		/* height: 100%; は削除 */
		width: 100%;
		display: block;
		padding: 5px;
		/* 内側パディングを調整 */
		padding-bottom: 6px;
		/* ★★★ 下部paddingを 6px に変更 ★★★ */
		/* flex-grow, min-height は基本スタイルを継承 */
	}

	/* ▲▲▲ Flexboxベースのレイアウトに修正 ▲▲▲ */

	/* メモ詳細ダイアログの調整 */
	#memo-detail-dialog {
		width: 90%;
		min-height: 150px;
		max-height: 70vh;
	}

	#memo-detail-dialog .btn {
		width: 3rem;
		height: 1.8rem;
		font-size: 0.8em;
	}

	/* スクロールバー (変更なし) */

	/* メモ入力ダイアログの調整 */
	.memo-input-dialog {
		width: calc(100% - 20px);
		/* 左右に余白を持たせて幅を調整 */
		max-width: 300px;
		/* スマホ縦での最大幅を少し広げる (任意) */
	}

	/* インスタグラムダイアログの幅調整 */
	#insta-dialog {
		width: 90%;
		/* 幅を画面の90%に */
	}

	/* ▼▼▼ YouTube埋め込みフレームの調整 (スマホ縦) ▼▼▼ */
	/* #frame-youtube { */
	/* ← クラスで指定するためコメントアウト */
	/* width: 70%; */
	/* top: 50px; */
	/* height: calc(70vw * 9 / 16); */
	/* right: calc(-70% - 5px); */
	/* } */
	#frame-youtube.video-mode {
		/* ★★★ 動画表示時のサイズ (スマホ縦) ★★★ */
		width: 70%;
		/* 幅を画面の95%に */
		top: 50px;
		/* 上から10pxの位置 */
		height: calc(70vw * 9 / 16);
		/* 幅に合わせて16:9の高さを計算 */
		right: calc(-70% - 5px);
		/* ← 初期状態: 画面右外 (幅95% + 右隙間5px) */
	}

	#frame-youtube.chat-mode {
		/* ★★★ チャット表示時のサイズ (スマホ縦) ★★★ */
		width: 80%;
		/* 例: 幅を80% */
		height: 65vh;
		/* 例: 高さをビューポートの65% */
		top: 50px;
		right: calc(-80% - 5px);
		/* 初期位置も調整 */
	}

	#frame-youtube.open {
		/* ★★★ 開いた時の位置 (スマホ縦) ★★★ */
		right: 50px;
		/* 開いた時の位置 */
	}

	/* ▼▼▼ スマホ縦でのチャットボタン調整 ▼▼▼ */
	#video_live_chat_btn {
		width: 50px;
		/* スマホ縦でのボタン幅 */
		bottom: -35px;
		/* スマホ縦での下からの位置 */
		right: 3px;
		/* スマホ縦での右からの位置 */
	}

	/* ▲▲▲ YouTube埋め込みフレームの調整 (スマホ縦) ▲▲▲ */

	/* ログイン情報表示エリアの調整 */
	.login-info {
		font-size: 10px;
		/* フォントサイズを小さく */
		padding: 3px 6px;
		/* 内側の余白を調整 */
	}

	/* フッターメニュー本体の調整 */
	.footer-menu>aside {
		width: 100%;
		/* 幅を画面全体に */
		bottom: -50px;
		/* 隠れた位置を調整 */
		height: 70px;
		/* 高さを調整 */
		border-radius: 0;
		/* 角丸をなくす */
	}

	/* フッターメニューが開いた状態の位置調整 */
	.footer-menu>aside.open {
		bottom: 0;
	}

	/* フッターメニュー内のアイコンリストのスクロール・余白調整 */
	/* フッターメニュー内のアイコンリストのスクロール・余白調整 */
	.footer-menu>aside ul {
		height: 60px;
		/* ★50pxから60pxに増やし、下部が切れる問題を解消 */
		padding: 0 10px;
		overflow-x: auto;
		/* 横スクロールを可能に */
		white-space: nowrap;
		/* アイコンが折り返さないようにする */
		justify-content: flex-start !important;
		/* はみ出した分を右側に逃がし、左から順に表示 */
		-webkit-overflow-scrolling: touch;
		/* スマホでのスクロールを滑らかに */
		scrollbar-width: none;
		/* Firefoxでスクロールバーを非表示 */
	}

	/* WebKit系（Chrome, Safari等）でスクロールバーを非表示にし、スワイプのみで見せる */
	.footer-menu>aside ul::-webkit-scrollbar {
		display: none;
	}

	/* スマホ表示時にアイコン(json)全体を約95%サイズ(57px)に縮小し、縦位置を調整 */
	.footer-menu>aside lottie-player {
		width: 57px !important;
		/* ★60pxの95%に縮小 */
		height: 57px !important;
		/* ★60pxの95%に縮小 */
		top: 1px !important;
		/* 上下バランスを整えるため1pxに戻す */
	}

	/* フッターメニュー内のアイコン画像のサイズ調整 */
	.footer-menu>aside li img {
		width: 32px !important;
		/* アイコンサイズを調整 */
		max-height: 32px !important;
		/* 縦長の画像が上に伸びないように制限を追加 */
		object-fit: contain;
		/* アスペクト比を維持して収める */
		cursor: pointer;
		/* カーソルをポインターに (念のため) */
	}

	/* フッターメニュー開閉ボタンの位置・サイズ調整 */
	.footer-menu #btnOpen {
		top: -26px;
		/* 上に突き出す位置を調整 */
		height: 28px;
		/* 高さを調整 */
		width: 75px;
		/* 幅を調整 */
	}

	/* 新しいコメントガイドのメディアクエリ調整 (必要であれば) */
	.usage-guide-popup-content .container {
		padding: 0.8rem;
		/* スマホではコンテナ内パディングを少し小さく */
	}
}

/* スマホ横持ち */
@media screen and (min-width: 480px) and (max-height: 480px) {

	/* ▼▼▼ スライドショーの調整 ▼▼▼ */
	#loading-slideshow {
		padding: 40px 15px 15px 15px;
		/* 上パディングを少し減らす */
	}

	.slide img {
		max-height: 40vh;
		/* 画像の高さをビューポートの40%に制限 (横画面なのでvhが大きい) */
		/* max-width: 50%; */
		/* 必要なら横幅も制限 */
		margin-bottom: 10px;
	}

	.slide h2 {
		font-size: 1.3em;
		/* 見出しを少し小さく */
		margin-bottom: 10px;
	}

	.slide p {
		font-size: 0.9em;
		/* テキストを少し小さく */
		line-height: 1.5;
		max-width: 80%;
		/* テキストエリアの幅を制限 */
	}

	.navigation button {
		font-size: 1.3em;
		/* ナビゲーション矢印を少し小さく */
		padding: 6px 12px;
	}

	#progress-text {
		font-size: 0.8em;
	}

	/* ▲▲▲ スライドショーの調整 ▲▲▲ */

	/* ▼▼▼ Flexboxベースのレイアウトに修正 ▼▼▼ */
	#balloon-dialog {
		width: 60%;
		/* 幅を画面の60%に */
		height: 80%;
		/* 高さを画面の80%に */
		padding: 5px;
		/* ★★★ スマホ横でもpaddingを少し小さく ★★★ */
		padding-bottom: 6px;
		/* ★★★ 下部paddingを 6px に変更 ★★★ */
	}

	#balloon-dialog>.row:first-child {
		padding-bottom: 5px;
		/* メッセージ部分との余白を少し小さく */
	}

	#balloon-message {
		padding: 5px;
		/* ★★★ 内側パディングを調整 ★★★ */
		padding-bottom: 6px;
		/* ★★★ 下部paddingを 6px に変更 ★★★ */
	}

	/* ▲▲▲ Flexboxベースのレイアウトに修正 ▲▲▲ */

	/* メモ詳細ダイアログの調整 */
	#memo-detail-dialog {
		width: 60%;
		max-height: 80vh;

		max-width: 400px;
	}

	/* メモ入力ダイアログの調整 (スマホ横) */
	.memo-input-dialog {
		width: 80%;
		/* 幅を広げる (任意) */
		max-width: 400px;
		/* 最大幅も設定 (任意) */
	}

	/* スクロールバー (変更なし) */

	/* ▼▼▼ YouTube埋め込みフレームのサイズ調整 (スマホ横) ▼▼▼ */
	/* #frame-youtube { */
	/* ← クラスで指定するためコメントアウト */
	/* width: 50%; */
	/* height: calc(50vw * 9 / 16); */
	/* right: calc(-50% - 10px); */
	/* } */
	#frame-youtube.video-mode {
		/* ★★★ 動画表示時のサイズ (スマホ横) ★★★ */
		width: 50%;
		/* 幅を画面の50%に */
		height: calc(50vw * 9 / 16);
		/* 幅に合わせて16:9の高さを計算 */
		right: calc(-50% - 10px);
		/* ← 初期状態: 画面右外 (幅40% + 右隙間10px) */
	}

	/* ★★★ スマホ横ではチャットモードのスタイル指定は不要（非表示にするため）★★★ */
	/*
	#frame-youtube.chat-mode {
		width: 200px;
		height: 300px;
		right: calc(-200px - 10px);
	}
	*/
	#frame-youtube.open {
		/* ★★★ 開いた時の位置 (スマホ横) ★★★ */
		right: calc((100vw - 50vw) / 2);
		/* 開いた時の位置 */
	}

	/* ▼▼▼ スマホ横でのチャットボタン調整 (非表示にするためコメントアウトまたは削除) ▼▼▼ */
	/*
	#video_live_chat_btn {
		width: 60px;
		top: -5px;
		right: -65px;
	}
	*/
	/* ▼▼▼ スマホ横表示時のチャット関連非表示 ▼▼▼ */
	#video_live_chat_btn {
		display: none !important;
		/* チャット切り替えボタンを強制的に非表示 */
	}

	#frame-youtube.chat-mode {
		display: none !important;
		/* チャットモードのフレーム自体を強制的に非表示 */
	}

	/* ▲▲▲ スマホ横表示時のチャット関連非表示 ▲▲▲ */
	/* ▲▲▲ YouTube埋め込みフレームのサイズ調整 (スマホ横) ▲▲▲ */

	/* フッターメニュー本体の位置・高さ調整 */
	.footer-menu>aside {
		bottom: -50px;
		/* 隠れた位置を調整 */
		height: 70px;
		/* 高さを調整 */
	}

	/* フッターメニュー内のアイコンリストの高さ調整 */
	.footer-menu>aside ul {
		height: 60px;
		/* ★50pxから60pxに増やし、下部が切れる問題を解消 */
		/* ボタンエリアの高さを調整 */
	}

	/* スマホ横表示時にもアイコン(json)全体を約95%サイズ(57px)に縮小し、縦位置を調整 */
	.footer-menu>aside lottie-player {
		width: 57px !important;
		/* ★60pxの95%に縮小 */
		height: 57px !important;
		/* ★60pxの95%に縮小 */
		top: 1px !important;
		/* 上下バランスを整えるため1pxに戻す */
	}

	/* フッターメニュー内のアイコン画像のサイズ調整 */
	.footer-menu>aside li img {
		width: 30px;
		/* アイコンサイズを調整 */
		max-height: 30px;
		/* 縦長の画像が上に伸びないように制限を追加 */
		object-fit: contain;
		/* アスペクト比を維持して収める */
	}

	/* フッターメニュー開閉ボタンの位置・サイズ調整 */
	.footer-menu #btnOpen {
		top: -26px;
		/* 上に突き出す位置を調整 */
		height: 28px;
		/* 高さを調整 */
		width: 75px;
		/* 幅を調整 */
	}
}

/* タブレット・PC */
@media screen and (min-width: 480px) and (min-height: 480px) {
	#balloon-dialog {
		padding: 10px;
		/* 基本のpadding */
		padding-bottom: 6px;
		/* ★★★ 下部paddingを 6px に変更 ★★★ */
	}

	/* メモ入力ダイアログの調整 (タブレット・PC) */
	.memo-input-dialog {
		width: 300px;
		/* 少し幅を広げる (任意) */
	}

	#balloon-dialog>.row:first-child {
		padding-bottom: 10px;
		/* 基本のpadding-bottom */
	}

	#balloon-message {
		padding: 10px;
		/* 基本のpadding */
		padding-bottom: 6px;
		/* ★★★ 下部paddingを 6px に変更 ★★★ */
	}

	/* メモ詳細ダイアログの調整 (タブレット・PC) */
	#memo-detail-dialog {
		width: 300px;
		max-width: 300px;
	}

	/* スクロールバー (変更なし) */

	/* ▼▼▼ YouTube埋め込みフレームのサイズ調整 (PC/タブレット) ▼▼▼ */
	#frame-youtube.video-mode {
		/* ★★★ 動画表示時のサイズ (PC/タブレット) ★★★ */
		width: 480px;
		height: 270px;
		/* 16:9 */
	}

	#frame-youtube.chat-mode {
		/* ★★★ チャット表示時のサイズ (PC/タブレット) ★★★ */
		width: 350px;
		/* 例: 幅を350px */
		height: 400px;
		/* 例: 高さを400px */
	}

	/* ▲▲▲ YouTube埋め込みフレームのサイズ調整 (PC/タブレット) ▲▲▲ */
}


/* =============================================== */
/* スクロールバー デザイン (汎用クラス .scrollArea) */
/* =============================================== */

/* スクロールバーを表示させる要素の基本設定 (例) */
/* 実際にスクロールさせたいHTML要素に .scrollArea クラスを付与し、 */
/* 必要に応じて height や max-height、overflow-y: auto; などを設定してください。 */
/* 例:
.my-scrollable-content {
  height: 300px;
  overflow-y: auto;
  class="scrollArea"; <--- このクラスを追加
}
*/

/* Firefox スクロールバー設定 */
/* .scrollArea クラスを持つ要素自体に適用 */
.scrollArea {
	scrollbar-width: thin;
	/* スクロールバーを細くする (auto, thin, none) */
	scrollbar-color: #42c1e1 #f2f2f2;
	/* スクロールバーの色 (つまみ色 トラック背景色) */
	/* overflow-y: auto; */
	/* ← スクロールが必要な要素にはこれも必要 */
	/* height: 80vh; */
	/* ← 高さを指定しないとスクロールしない場合がある */
}

/* WebKit系 (Chrome, Safari, Edge等) スクロールバー設定 */
/* スクロールバー全体の幅 (縦スクロールバーの場合) */
.scrollArea::-webkit-scrollbar {
	width: 12px;
	/* デスクトップでの幅 */
}

/* 水平スクロールバーの場合の高さも指定する場合 */
.scrollArea::-webkit-scrollbar:horizontal {
	height: 12px;
}

/* スクロールバーのトラック (レール部分・背景) */
.scrollArea::-webkit-scrollbar-track {
	background: #f2f2f2;
	/* 背景色 */
	border-radius: 10px;
	/* 角丸 */
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
	/* 内側の影 (少し控えめに) */
}

/* スクロールバーのサム (つまみ部分) */
.scrollArea::-webkit-scrollbar-thumb {
	background: #42c1e1;
	/* つまみの色 */
	border-radius: 10px;
	/* 角丸 */
	/* ★★★ サムを視覚的に細く見せるためのボーダー ★★★ */
	/* トラックの背景色と同じ色(#f2f2f2)を指定し、太さ(例: 3px)を調整します */
	border: 3px solid #f2f2f2;
	/* ボーダーを含めたサム全体の幅は ::-webkit-scrollbar の width (12px) になります */
	/* このボーダーにより、実際に色が見える部分 (#42c1e1) は 12px - (3px * 2) = 6px 幅になります */
}

/* スクロールバーのサムにマウスが乗った時のスタイル (任意) */
.scrollArea::-webkit-scrollbar-thumb:hover {
	background: #36a9c4;
	/* 少し濃い色に */
}

/* --- スマホ表示 (max-width: 480px) --- */
@media screen and (max-width: 480px) {

	/* WebKit系スクロールバーの幅を調整 (モバイルでは細めにする例) */
	.scrollArea::-webkit-scrollbar {
		width: 8px;
		/* スマホ用に幅を狭くする */
	}

	.scrollArea::-webkit-scrollbar:horizontal {
		height: 8px;
		/* 水平スクロールバーも同様 */
	}

	/* ★★★ スマホ表示でサムを細く見せる場合 ★★★ */
	.scrollArea::-webkit-scrollbar-thumb {
		/* スマホでのボーダー幅 (例: 2px) */
		border: 2px solid #f2f2f2;
		/* 色が見える部分は 8px - (2px * 2) = 4px 幅になります */
	}

	.scrollArea::-webkit-scrollbar-thumb:hover {
		/* ホバー時のスタイルも必要なら調整 */
		border: 2px solid #f2f2f2;
		/* Firefoxは scrollbar-width: thin; が適用されているので、 */
		/* 特に変更が不要な場合は記述不要です。 */
		/* もしデフォルト(auto)や非表示(none)にしたい場合はここで上書きします */
		/*
	.scrollArea {
	  scrollbar-width: auto;
	}
	*/

		/* モバイルでトラックやサムのデザインをさらに変更する場合 (任意) */
		/* 例: トラックの背景や影を消す */
		/*
	.scrollArea::-webkit-scrollbar-track {
	  background: transparent;
	  box-shadow: none;
	}
	*/
		/* 例: サムの色を変える */
		/*
	.scrollArea::-webkit-scrollbar-thumb {
	  background: #888;
	}
	*/
	}
}

/* =============================================== */
/* 既存要素への適用例 (必要な場合)                */
/* =============================================== */
/* もし #balloon-message のスクロールバーを変更したい場合、 */
/* 上記の .scrollArea を #balloon-message に置き換えて記述します。 */
/* 例: */
#balloon-message {
	scrollbar-width: thin;
	scrollbar-color: #838383 #f2f2f2;
	/* height, width, display, padding は基本スタイルやメディアクエリで設定 */
}

#balloon-message::-webkit-scrollbar {
	width: 12px;
}

/* デスクトップ幅 */
#balloon-message::-webkit-scrollbar-track {
	background: #f2f2f2;
	border-radius: 10px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

#balloon-message::-webkit-scrollbar-thumb {
	background: #42c1e1;
	border-radius: 10px;
	border: 3px solid #f2f2f2;
}

#balloon-message::-webkit-scrollbar-thumb:hover {
	background: #36a9c4;
	border: 3px solid #f2f2f2;
}

@media screen and (max-width: 480px) {
	#balloon-message::-webkit-scrollbar {
		width: 8px;
	}

	/* スマホ幅 */
	#balloon-message::-webkit-scrollbar-thumb {
		border: 2px solid #f2f2f2;
	}

	#balloon-message::-webkit-scrollbar-thumb:hover {
		border: 2px solid #f2f2f2;
	}
}

/* スマホ横持ち用のスクロールバースタイルはデスクトップと同じでよければ不要 */


/* .memo-message-box や #slides-container など、他の要素も同様です。 */
/* 必要なセレクタに置き換えて適用してください。 */
.memo-message-box {
	scrollbar-width: thin;
	scrollbar-color: #838383 #f2f2f2;
}

.memo-message-box::-webkit-scrollbar {
	width: 12px;
}

.memo-message-box::-webkit-scrollbar-track {
	background: #f2f2f2;
	border-radius: 10px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.memo-message-box::-webkit-scrollbar-thumb {
	background: #42c1e1;
	border-radius: 10px;
	border: 3px solid #f2f2f2;
}

.memo-message-box::-webkit-scrollbar-thumb:hover {
	background: #36a9c4;
	border: 3px solid #f2f2f2;
}

@media screen and (max-width: 480px) {
	.memo-message-box::-webkit-scrollbar {
		width: 8px;
	}

	.memo-message-box::-webkit-scrollbar-thumb {
		border: 2px solid #f2f2f2;
	}

	.memo-message-box::-webkit-scrollbar-thumb:hover {
		border: 2px solid #f2f2f2;
	}
}

/* ▼▼▼ スライドコンテナのスクロールバーデザイン ▼▼▼ */
#slides-container {
	scrollbar-width: thin;
	/* Firefox */
	scrollbar-color: #838383 #f2f2f2;
	/* Firefox (つまみ色 トラック色) */
}

#slides-container::-webkit-scrollbar {
	width: 12px;
}

/* Webkit系 幅 */
#slides-container::-webkit-scrollbar-track {
	background: #f2f2f2;
	border-radius: 10px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Webkit系 トラック */
#slides-container::-webkit-scrollbar-thumb {
	background: #42c1e1;
	border-radius: 10px;
	border: 3px solid #f2f2f2;
}

/* Webkit系 つまみ */
#slides-container::-webkit-scrollbar-thumb:hover {
	background: #36a9c4;
	border: 3px solid #f2f2f2;
}

/* Webkit系 つまみホバー */

@media screen and (max-width: 480px) {
	#slides-container::-webkit-scrollbar {
		width: 8px;
	}

	/* スマホ幅 */
	#slides-container::-webkit-scrollbar-thumb {
		border: 2px solid #f2f2f2;
	}

	/* スマホつまみボーダー */
	#slides-container::-webkit-scrollbar-thumb:hover {
		border: 2px solid #f2f2f2;
	}

	/* スマホつまみホバー */
}

/* ▲▲▲ スライドコンテナのスクロールバーデザイン ▲▲▲ */

/* ==========================================================
   フッターメニュー Lottieアイコン 個別サイズ調整 (Scale) & マージン
   ※1.0が基準サイズ。大きくしたい場合は 1.2 や 1.5 などに変更してください
   ※隣との距離（余白）を変えたい場合は margin の 5px を 15px などに変更してください
   ========================================================== */
#help-icon {
	transform: scale(1.0);
	margin: 0 2px !important;
	position: relative;
	z-index: 10;
}

#memo-icon-onoff {
	transform: scale(2.1);
	margin: 0 0.05px !important;
}

#memo-icon-new {
	transform: scale(1.0);
	margin: 0 3px !important;
}

#video-channel-icon {
	transform: scale(1.2);
	margin: 0 1px !important;
}

#twitter lottie-player {
	transform: scale(0.9);
	margin: 0 3px !important;
}

#facebook lottie-player {
	transform: scale(1.0);
	margin: 0 5px !important;
}

#line lottie-player {
	transform: scale(0.9);
	margin: 0 3px !important;
}

#instagram lottie-player {
	transform: scale(0.9);
	margin: 0 5px !important;
}

#camera_icon {
	transform: scale(0.9);
	margin: 0 5px !important;
}