oipq/*
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; /* 文字色を白に */
    max-width: 90%; /* 最大幅を画面の90%に */
    max-height: 90%; /* 最大高さを画面の90%に */
    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; /* ★★★ Flexコンテナにする ★★★ */
    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_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: 0 !important; /* HTMLのインラインスタイルを上書き */
    margin-bottom: 40px; /* ★★★ ボタン行との間隔を 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; /* ボタン行は縮まない */
    position: static; /* staticに戻す */
    width: 100%; /* 幅を100%に */
    text-align: right; /* ボタンを右寄せ */
    box-sizing: border-box;
    /* margin-top は不要 (メッセージ行の margin-bottom で制御) */
    /* background-color: rgba(255, 0, 0, 0.1); */ /* デバッグ用に背景色を付ける場合 */
}
/* メモの編集削除ボタン最初のスタイル */
#memo-detail-dialog .btn {
    margin-left: 5px; /* ボタン間の余白 */
    color: #4b3f3f; /* ボタンの文字色 */
    background-color: #f8e8da; /* ボタンの背景色 */
    border-color: #fddabbea; /* ボタンの枠線色 */
}
#memo-detail-dialog .btn:first-child {
    margin-left: 0; /* 最初のボタンの左マージンを削除 */
}
/* メモの編集削除ボタンクリックした時のスタイル */
#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; /* 下側の余白 */
}
/* メモ入力用のテキストエリア */
#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%); /* 中央揃え */
}
/* ダイアログ内の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; /* 文字色 (グレー) */
}
/* インスタグラム共有用のテキストエリア */
#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%; /* 高さを親要素に合わせる */
}
/* YouTubeライブチャット表示切り替えボタン */
#video_live_chat_btn {
	position: absolute; /* 親要素(#frame-youtube)に対して絶対位置指定 */
	bottom: -40px; /* 下から5pxの位置 */
	right: 5px; /* 右から5pxの位置 */
	width: 60px; /* PC/タブレットでの幅 */
	cursor: pointer; /* カーソルをポインターに */
}

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

/* ログイン情報表示エリア */
.login-info {
	position: fixed; /* 画面に固定 */
	top: 10px; /* 上から10pxの位置 */
	left: 10px; /* ★★★ 左から10pxの位置に変更 ★★★ */
	background-color: rgba(255, 255, 255, 0.534); /* 半透明の黒背景 */
	padding: 5px 10px; /* 内側の余白 */
	border-radius: 5px; /* 角を丸める */
	z-index: 6; /* 重なり順序を指定 */
}
/* ログイン情報内のリンク */
.login-info a {
	color: rgba(255, 255, 255, 0.911); /* 文字色を白に */
	text-decoration: none; /* 下線をなくす */
	font-size: 13px; /* フォントサイズ */
	font-family: 'Arial', sans-serif; /* ★★★ フォントを変更 (例: Arial) ★★★ */
}
/* ログイン情報内のリンクにマウスが乗った時のスタイル */
.login-info a:hover {
	text-decoration: underline; /* 下線を表示 */
}
/* ログアウトボタン (JavaScriptで表示制御) */
#id-clickMemoLogout {
	display: none; /* 初期状態は非表示 */
}

/* フッターメニュー全体のコンテナ */
.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; /* 高さは自動調整 */
	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: 50px; /* ボタンエリアの高さを調整 */
		padding: 0 5px; /* 左右の余白を調整 */
	}
    /* フッターメニュー内のアイコン画像のサイズ調整 */
	.footer-menu > aside li img {
		width: 32px !important; /* アイコンサイズを調整 */
        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: 50px; /* ボタンエリアの高さを調整 */
	}
    /* フッターメニュー内のアイコン画像のサイズ調整 */
	.footer-menu > aside li img {
		width: 30px; /* アイコンサイズを調整 */
	}
    /* フッターメニュー開閉ボタンの位置・サイズ調整 */
	.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; } /* スマホつまみホバー */
  }
  /* ▲▲▲ スライドコンテナのスクロールバーデザイン ▲▲▲ */