/*  ---------------- photoframe ページ用 css ---------------- */

/* css 変数の定義 初期設定 */
:root {
	--slide_tiltup_bgn: translate(50%,);
	--slide_tiltup_end: translate(50%,);
	--slide_tiltdn_bgn: translate(50%,);
	--slide_tiltdn_end: translate(50%,);
	--slide_panlft_bgn: translate(,50%);
	--slide_panlft_end: translate(,50%);
	--slide_panrgt_bgn: translate(,50%);
	--slide_panrgt_end: translate(,50%);
}
/*
@font-face {
	font-family: 'WEBMPLUS1p';
	src: url（'/fonts/MPLUS1p/MPLUS1p-Regular.woff2'） format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'WEBMPLUS1p';
	src:	 url（'/fonts/MPLUS1p/MPLUS1p-Bold.woff2'） format('woff2');
	font-weight: 700;
	font-style: normal;
}
*/

html {
	height:100%;
}

body {
	height: 100%;
	padding: 0;
	margin: 0 auto;
	background-color: #000;
	font-family: "Hiragino Maru Gothic ProN","Noto Sans CJK JP","Meiryo","sans-serif";
	/*font-family: 'WEBMPLUS1p';*/
	/*font-family: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif; */
	text-align: center;
	overflow:hidden;			/* 2022-08-05 これで Firefox のトップページのスクロールバーが消えた */
	-ms-overflow-style: none;	/* IE Edge でスクロールバーを表示しない */
	scrollbar-width: none;		/* Firefox スクロールバー消去 */

}

body::-webkit-scrollbar{		/* Chrome Safari でスクロールバーを表示しない */
	display: none;
}

/* Windows Chrome で、縮小画像がぼやけて表示されるのに対処 */
img {
    image-rendering: -webkit-optimize-contrast;
}

textarea {
	text-size-adjust: none;
	font-family: "Hiragino Maru Gothic ProN","Noto Sans CJK JP","Meiryo","sans-serif";
	/*font-family: 'WEBMPLUS1p'*/;
	/* font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
	max-height: 100%;
}

/* 2019-01-31 スライドのキャプション .photoframe-slide に<a>リンク先をセットすると画面ロード時に一瞬リンク文字が表示されるのを抑止するため → 他の<a>ではcolor再設定が必須 */
a {
	/* color: rgba(0,0,0,0); */
	color:#aaddff;
}

.main {
	width: 100%;
	height: 100%;
}

/* 各ページの ヘッダ文字 初回アニメーション */
.title-desc {
	--charas:9;
	position: absolute;
	right: 50%;
	transform: translateX(50%);
	top: 4px;
	font-size: min(calc(100vw - 208px)/var(--charas),29px);
	width : min(calc(100vw - 202px),var(--charas)*29px);
	color: #cfc;
	font-weight: normal;
	line-height: 105%;
	text-shadow: 2px 2px 2px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,0.9),1px -1px 0px rgba(0,0,0,0.9),-1px -1px 0px rgba(0,0,0,0.9);
	cursor: pointer;
	z-index: 10;
	opacity: 1.0;

	animation-name: titleanime;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes titleanime {
	0%   {
		opacity: 0.0;
		top: 35%;
		font-size: min(calc(100vw - 208px)/var(--charas),29px);
		width : min(calc(100vw - 202px),var(--charas)*29px);
		line-height: 105%;

	}
	2%   {
		opacity: 0.0;
		top: 35%;
		font-size: min(calc((100vw - 28px)/var(--charas)),45px);
		width: calc(100vw - 202px);
		line-height: 105%;
	}
	50%   {
		opacity: 1.0;
		top: 35%;
		font-size: min(calc((100vw - 28px)/var(--charas)),45px);
		width: calc(100vw - 202px);
		line-height: 105%;
	}
	100% {
		opacity: 1.0;
		top: 4px;
		font-size: min(calc(100vw - 208px)/var(--charas),29px);
		width : min(calc(100vw - 202px),var(--charas)*29px);
		line-height: 105%;
	}
}

.bgm-data {
	display: none;
}

/* photoframeframe関連css */
.photoframe-container {
	display: none;			/* 最初のスライダー不要リストの露出防止の為 */
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	overflow: hidden;
	z-index: 3;
}

.photoframe-wapper {
	margin: 0 auto;
	padding: 0;
	text-align: center;
	overflow: hidden;
}

/* 画像 表示枠 */
.photoframe-slide {
	/* display: none; */
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	overflow: hidden;
	background-color: #111;
	display: block;
	border: 2px solid darkgreen;
	box-sizing:border-box;
	z-index: 1;
	opacity: 0;
}


/* イメージのスタイル 前景 */
.photoframe-slide>img {
	display: none;
	position: absolute;
    bottom: 50%;
    right: 50%;
	opacity: 0.0;

/*  ------ 以下は photoframe.js で設定 ------
	display: block;
	height: auto;
	width: auto;
    max-width: 120%;  
    max-height: 120%; 
	transform: translate 999px,50%;
	z-index: 2;

	animation-name: 'none' ---> 'fadein,tiltup' など ;
	animation-play-state: running;
	animation-duration: 1.5s,6.5s;
	animation-delay: 0s,1.5s;
 ------ ここまで  photoframe.js で設定 ----- */
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;

	/* 前景画層の例 animation-name: fadein と panright/panleft/tiltup/tiltdown/zoomin/zoomout/still を組み合わせる */ 
	/* $('.photoframe-slide>img').eq(i).css('animation-duration','1.5s,6.5s');		--- faidein と panright の時間を指定   */
	/* $('.photoframe-slide>img').eq(i).css('animation-name','fadein,panright');	--- faidein と panright のキーを指定   */

	/* 背景画像の例 slide_fadeout は animate（）で実施 */
	/* $('.photoframe-slide>img').eq(i).css('animation-duration','1.5s'); */
	/* $('.photoframe-slide>img').eq(i).css('animation-name','fadeout'); */
}


/* position:absolute right:50% がベースになっているので左右の座標が逆転 */
@keyframes panright {
	0% {
		transform: var(--slide_panrgt_bgn);
	}
	100% {
		transform: var(--slide_panrgt_end);
	}
}

@keyframes panleft {
	0% {
		transform: var(--slide_panlft_bgn);
	}
	100% {
		transform: var(--slide_panlft_end);
	}
}

/* position:absolute bottom:50% がベースになっているので上下の座標が逆転 */
@keyframes tiltup {
	0% {
		transform: var(--slide_tiltup_bgn);
	}
	100% {
		transform: var(--slide_tiltup_end);
	}
}

@keyframes tiltdown {
	0% {
		transform: var(--slide_tiltdn_bgn);
	}
	100% {
		transform: var(--slide_tiltdn_end);
	}
}

@keyframes zoomin {
	0% {
		transform: translate(50%,50%) scale(1.0);
	}
	100% {
		transform: translate(50%,50%) scale(1.2);
	}
}

@keyframes zoomout {
	0% {
		transform: translate(50%,50%) scale(1.2);
	}
	100% {
		transform: translate(50%,50%) scale(1.0);
	}
}

/* アニメーションなしの指定でも経過時間測定のため動かないアニメを実行 */
@keyframes stillin {
	0% {
		transform: translate(50%,50%) scale(1.0);
	}
	100% {
		transform: translate(50%,50%) scale(1.0);
	}
}

@keyframes stillout {
	0% {
		transform: translate(50%,50%) scale(1.0);
	}
	100% {
		transform: translate(50%,50%) scale(1.0);
	}
}



/* 戻るマーク 画面中央左端 */
.prev_mark{
	display: block;
	height: 40px;
	width: 36px;
	position: absolute;
	top: calc(50% - 20px);
	left: 0%;
	cursor: pointer;
	z-index: 10;
	background: url('/photoframe/prev_mark.png?v=20250610024549') no-repeat;
	background-size: contain;
	opacity: 0.4;
}


/* 進むマーク 画面右端 */
.next_mark{
	display: block;
	height: 40px;
	width: 36px;
	position: absolute;
	top: calc(50% - 20px);
	left: calc(100% - 36px);
	cursor: pointer;
	z-index: 10;
	background: url('/photoframe/next_mark.png?v=20250610024448') no-repeat;
	background-size: contain;
	opacity: 0.4;
}

/*  画面下スライドコントロール */
.slidecontrols {
	display: none;
	width: 300px;
	height: 32px;
	position: absolute;
	padding: 2px;
	bottom: 0;
	left: calc(50% - 150px);
	border-radius: 4px;
	/*cursor: pointer;*/
	/* z-index: 20; */
	opacity: 1.0;
	background-color: transparent;
}

/* スライド Auto_Manual 制御ボタン */
.slide_button{
	display: block;
	height: 32px;
	width: 32px;
	position: absolute;
	bottom: 1px;
	left: 56px;
	cursor: pointer;
	z-index: 4;
	/* background: url('/photoframe/slide_red.png?v=20250608043837') no-repeat; */
	background-size: contain;
	opacity: 1.0;
} 
	
/* スライド番号表示　画面下 */
.slide_count{
	display: inline-block;
	position: absolute;
	padding: 2px;
	bottom: 0;
	font-size: 1.0rem;
	left: 100px;
	width: 100px;
	border-radius: 4px;
	text-align: center;
	height: 32px;
	line-height: 32px;
	color: white;
	background: radial-gradient(rgba(16,96,16,1.0), rgba(16,96,16,0.0));
	cursor: pointer;
	vertical-align: bottom;
	z-index: 4;
}

/* 動画制御ボタン */
.video_button{
	display: block;
	height: 32px;
	width: 32px;
	position: absolute;
	bottom: 1px;
	right: 56px;
	cursor: pointer;
	z-index: 20;
	/* background: url('/photoframe/video_none.png?v=20250615021124') no-repeat; */
	background-size: contain;
	opacity: 1.0;
} 

/* スライド送り制御ボタン */
/* .slideplay{
	display: block;
	height: 32px;
	width: 32px;
	position: absolute;
	bottom: 3px;
	right: 0px;
	cursor: pointer;
	z-index: 4;
	background: url('/photoframe/slideplay.gif?v=20250401235528') no-repeat;
	background-size: contain;
	opacity: 1.0;
}  */


/* @keyframes blinkplay{
	0% { 
		opacity: 1.0;
	}
	40% {
		opacity: 1.0;
	}
	50%{
		opacity: 0.2;
	}
	80% {
		opacity: 0.2;
	}
	90% {
		opacity: 1.0;
	}
	100% {
		opacity: 1.0;
	}
} */


/* 動画マーク 中央 */
.video_mark{
	display: none;
	height: min(calc(100vh/8),calc(100vw/8),80px);
	width:  min(calc(100vh/8),calc(100vw/8),80px);
	position: absolute;
	bottom: calc(50% - min(calc(100vh/16),calc(100vw/16),40px));
	left:   calc(50% - min(calc(100vh/16),calc(100vw/16),40px));
	cursor: pointer;
	z-index: 10;
	background: url('/photoframe/video_mark.png?v=20230213033139') no-repeat;
	background-size: contain;
	opacity: 0.0;
	text-align: center;

	animation-name: video_mark_fadein;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: both;
	animation-play-state: running;
}

@keyframes video_mark_fadein{
	0% { 
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}

@keyframes video_mark_fadeout{
	0% { 
		opacity: 1.0;
	}
	100% {
		opacity: 0.2;
	}
}

/* 動画マーク の添字 容量・再生時間・ファイル名 */ 
.video_mark span{
	position: absolute;
	width:320px;
	bottom: calc(50% + min(calc(100vh/16),calc(100vw/16),45px) + 3px);
	left: calc(50% - 160px);
	cursor: pointer;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1.5rem;
	color: rgba(255, 255, 255, 1.0); 
	text-shadow: 2px 2px 2px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1);
	}

/* 各ページの 小さな Haji's Home Page ロゴ　*/
.returntop {
	width:86px;
	height:32px;
	position:absolute;
	top:4px;
	left:4px;
	z-index:10;
	border: 0;
}

/* 操作説明ボタン */
.exp_button {
    display: block;
    width:70px;
    height: 26px;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    line-height: 26px;
    position: absolute;
    top: 40px;
    left: 6px;
    cursor: pointer;
    background-color: rgba(0,128,0,0.7);
    box-shadow:2px 2px 2px 0px #000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 10; 
    
}

/* 操作説明ダイアログ  */
.exp_window{
	display: none;
	position: absolute;
	top: 80px;
	width: min(calc(100vw - 8px),640px);
	max-width: min(calc(100vw - 8px),640px);
	max-height: calc(100% - 130px);

	right: 50%;
	transform: translateX(50%) scale(1,1);

	font-size: 0.9rem;
	color: #fff;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	text-align: left;
	text-indent: -1rem;
	background-color: rgba(0, 0, 0, 0.7);	
	z-index: 20; 
	overflow-y: auto;

	animation-name: zoom_exp_top;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: both;
	animation-play-state: running;
	animation-fill-mode: forwards;
} 


@keyframes zoom_exp_top{
	0% { 
		opacity: 0.0;
		transform: translateX(50%) translateY(-50%) scale(0.1,0.1);
	}
	10% {
		opacity: 0.0;
		transform: translateX(50%) translateY(-50%) scale(0.1,0.1);
	}
	100% {
		opacity: 1.0;
		transform: translateX(50%) translateY(0%) scale(1,1);
	}
}

@keyframes zoom_out_top{
	0% { 
		opacity: 1.0;
		transform: translateX(50%) translateY(0%) scale(1,1);
	}
	70% {
		opacity: 0.0;
		transform: translateX(50%) translateY(-50%) scale(0,0);
	}
	100% {
		opacity: 0.0;
		transform: translateX(50%) translateY(-50%) scale(0,0);
	}
}

@keyframes zoom_exp_left{
	0% { 
		opacity: 0.0;
		transform: translateX(-50%) translateY(-50%) scale(0.1,0.1);
	}
	10% {
		opacity: 0.0;
		transform: translateX(-50%) translateY(-50%) scale(0.1,0.1);
	}
	100% {
		opacity: 1.0;
		transform: translateX(50%) translateY(0%) scale(1,1);
	}
}

@keyframes zoom_exp_right{
	0% { 
		opacity: 0.0;
		transform: translateX(150%) translateY(-50%) scale(0.1,0.1);
	}
	10% {
		opacity: 0.0;
		transform: translateX(150%) translateY(-50%) scale(0.1,0.1);
	}
	100% {
		opacity: 1.0;
		transform: translateX(50%) translateY(0%) scale(1,1);
	}
}

/* exp_window（メッセージ＆メニュー） のスクロールバー：スマホでも見えるように */
.exp_window::-webkit-scrollbar{ 
	width: 8px;
}
.exp_window::-webkit-scrollbar-thumb{ 
    background-color: #4f4;
    border-radius: 8px;
}
.exp_window::-webkit-scrollbar-track-piece:start{
    background-color: #cfc;
}
.exp_window::-webkit-scrollbar-track-piece:end{
    background-color: #fff;
}

/* for Firefox maybe 8px */
.exp_window {
	scrollbar-width: thin;
	scrollbar-color: #00ff00 #cfffcf;
}	 

/* IEではスクロールバーの幅が制御できないので auto(17px?) とし、幅を 9px 加算する。*/
_:-ms-lang(x)::-ms-backdrop, .exp_window {
	-ms-overflow-style: auto;
	scrollbar-base-color: #00ff00;
	max-width: 649px;
}


/* 操作説明 [x]ボタン */
.exp_window .close{
    float: right;
    top: 0px;
    right: 0px;
    cursor: pointer;
}

/* 操作説明 [x]ボタン 自動消去用 */
.exp_window .closefade{
    float: right;
    top: 0px;
    right: 0px;
    cursor: pointer;
	animation-name: blinkclose;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: both;
	animation-play-state: running;
} 
@keyframes blinkclose{
	0% { 
		opacity: 1.0;
	}
	50% {
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}

/* メール送信スタイル */
.send_mail{
	color: skyblue;
	cursor: pointer;
	font-weight: bold;
}

.send_mail img{
	height:24px;
	width:16px;
	vertical-align:bottom;	
}

/* タイトルタップボタン */
.taptitle{
	display: none;
	height: 24px;
	width: 24px;
	position: absolute;
	top: 32px;
	right: calc(50% - 14px);
	cursor: pointer;
	z-index: 20;
	background: url('/photoframe/tap.png?v=20241031134405') no-repeat;
	background-size: contain;
	opacity: 0.8;
	animation-name: blinktap;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: both;
	animation-play-state: running;
} 
@keyframes blinktap{
	0% { 
		opacity: 1.0;
	}
	50% {
		opacity: 0.4;
	}
	100% {
		opacity: 1.0;
	}
}

/* 固定メニュー コンテナ  */
.menu_container{
	display: block;
	position: absolute;
	top: 80px;
	width: min(calc(100vw - 4px),720px);
	max-width: min(calc(100vw - 4px),720px);
	max-height: calc(100% - 130px);
	padding: 0px;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%); 
	z-index: 19; 
	overflow-y: auto;

} 
/* menu_container（メニュー） のスクロールバー：スマホでも見えるように */
.menu_container::-webkit-scrollbar{ 
	width: 8px;
}
.menu_container::-webkit-scrollbar-thumb{ 
    background-color: #4f4;
    border-radius: 8px;
}
.menu_container::-webkit-scrollbar-track-piece:start{
    background-color: #cfc;
}
.menu_container::-webkit-scrollbar-track-piece:end{
    background-color: #fff;
}

/* for Firefox maybe 8px */
.menu_container {
	scrollbar-width: thin;
	scrollbar-color: #00ff00 #cfffcf;
}	 

/* メニュー フレックスボックス宣言 */
.menu-flex {
	margin: 0 auto;
	padding: 8px;
	font-size: 0.9rem;
	color: #fff;
	text-align: left;
	background-color: rgba(0, 0, 0, 0.7);	
}

/* メニューアイコン Flexbox宣言 */
.menu-icons { 
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-content:space-around;
	font-size:1.0rem;
	line-height:1.2rem;
}

/* ----------- mediaelement video 用 css --------------------*/


/* ビデオ表示コンテナ */
.video-container {
	display: none;
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width:100%;
	height:100%;
	top: 0;
	right: 50%;
	transform: translateX(50%);
	text-align: center;
	z-index: 8;
	border: 2px solid dodgerblue;
	box-sizing:border-box;
	background-color: black;
	opacity: 0.0;

	animation-name: none;
	animation-delay: 0s;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@keyframes video-container-fadein{
	0% { 
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}

@keyframes video-container-fadeout{
	0% { 
		opacity: 1.0;
	}
	100% {
		opacity: 0.0;
	}
}

.mejs__container {
	background-color: transparent;
}

/* ビデオ画面のクリック・タッチ領域 */
.video-touch {
	display: none;
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width:100%;
	height:calc(100% - 40px);
	top: 0;
	right: 50%;
	transform: translateX(50%);
	z-index: 9;
	box-sizing:border-box;
	background-color: black;
	opacity: 0.0;
}


/* mpjs-player では BGM と干渉の可能性があるので .video-player を指定 */
.video-player {
	position: absolute;
    bottom: 50%;
	max-width: 100%;
	max-height: 100vh;
	height: 100vh;
    right: 50%;
    transform: translateX(50%) translateY(50%);
	z-index: 6;
}

/* 本来の丸い「再生ボタン」を表示しない */
.mejs__overlay-button { display: none !important; }

/* rolld-caption 内の New が最初に見えるのを抑える */
.rolld-caption {
	opacity: 0.0;
}


/* slide-caption 内の <a> の下線を隠す */
.caption-container > a ,.caption-container-top > a {
	text-decoration:none;
}

/* 画像 上から下に移動するキャプション トップページ用 */
.caption-container-top {
	position: absolute;
	bottom: 32px;
	display: inline-block;
	word-wrap:break-word;
	overflow-wrap:break-word;
	right: 50%;
	transform: translateX(50%);
	min-width: 240px;
	max-width: calc(100vw - 24px);
	z-index: 15;
	font-size: 1.0rem;
	font-weight: normal;
	padding: 0 4px;
	line-height: 1.5em;
	color: rgba(255, 255, 255, 1.0);
	text-shadow: 1px 1px 2px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,0.7),1px -1px 0px rgba(0,0,0,0.7),-1px -1px 0px rgba(0,0,0,0.7);
	margin: 0;
	margin-bottom: 0.3em;
	background-color: rgba(0,0,0,0.0);
	opacity: 0.0;
	cursor: pointer;


    animation-name: move-caption;
	animation-duration: 6s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-play-state: running;
	animation-delay: 0s;
	animation-fill-mode: both;
}
@keyframes move-caption {
	0%   {
		bottom: 50%;
		opacity: 0.0;
	}
	5%   {
		bottom: 50%;
		opacity: 0.3;
	}
	20% {
		opacity: 0.7;
	}
	70% {
		bottom: 112px;
		opacity: 1.0;
	}
	100% {
		bottom: 112px;
		opacity: 1.0;
	}
}


/* 画像 の下に表示するキャプション 通常用 */
.caption-container {
	position: absolute;
	bottom: 32px;
/*	display: inline-block;	*/
	overflow-x: scroll;
/*	word-wrap:break-word; */
/*	overflow-wrap:break-word; */
	right: 50%;
	transform: translateX(50%);
	width: min(calc(100vw - 64px),670px);
	max-width: min(calc(100vw - 64px),670px);		/* 30em などの指定では 中央合わせ ＆ 折り返し時左寄せができない */
	z-index: 15;
/*	font-size: 22px;	*/
	font-weight: normal;
	padding: 0;
/*	line-height: 24px;	*/
	color: rgba(255, 255, 255, 1.0);
	margin: 0 auto;
	background-color: rgba(128,128,128,0.0);
/*	height:52px;	*/
	overflow-y: scroll;  
	-ms-overflow-style : none;	/* edge スクロールバー消去 */
	scrollbar-width : none;		/* Firefox スクロールバー消去 */
	display: block;		/* photoframe.js で .caption-container > div に display: flex; などがセットされる C3，C5 の中央揃え＆左詰めのため */
	flex-direction: column;
	align-items: center;
	transform: translate(50%,0);
	opacity: 0.0;
}
.caption-container::-webkit-scrollbar {display:none;}  /* Chrome, Safari スクロールバー消去 */

#caption-div {
	position: relative;
	top: 0;
	left: 0;
	background-color: black;
	color: rgba(255, 255, 255, 1.0);
	width: 100%;
	height: 64px;
	overflow-y: visible;
	transform: translate(0,0);
	opacity: 1.0;
	display: inline-block;
	cursor: row-resize;
}


.caption-container h2,.caption-container-top h2, .slide-caption h2{
	font-size: 2.5rem;
	font-weight: normal;
	padding: 0 30px;
	line-height: 1em;
	color: rgba(255, 255, 255, 1.0);
/*	text-shadow: 3px 3px 5px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,0.5),1px -1px 0px rgba(0,0,0,0.5),-1px -1px 0px rgba(0,0,0,0.5); */
	text-shadow: 4px 4px 4px  #000,-2px 2px 2px  #000,2px -2px 2px  #000,-2px -2px 2px #000;
	margin: 0;
	margin-bottom: 0.3em;
}

#caption-div p{
	vertical-align: sub;
}

.caption-container h3, .caption-container-top h3, .slide-caption h3{
	font-size: 26px;
	font-weight: normal;
	padding: 0 26px;
	line-height: 28px;
	color: rgba(255, 255, 255, 1.0); 
	text-shadow: 4px 4px 4px  #000,-2px 2px 2px  #000,2px -2px 2px  #000,-2px -2px 2px #000;
	margin: 0;
	margin-bottom: 0.1rem;
}

.caption-container h4, .caption-container-top h4, .slide-caption h4{
	font-size: 22px;
	font-weight: normal;
	padding: 0 22px;
	line-height: 28px;
	color: rgba(255, 255, 255, 1.0);
	text-shadow: 4px 4px 5px  #000,-2px 2px 2px  #000,2px -2px 2px  #000,-2px -2px 2px #000;
	margin: 0;
	margin-bottom: 0.1rem;
}

.L3, .C3, .R3 {
	font-size: min(calc(0.025 * (min(100vw,100vh) - 64px) + 12.5px) , 28px);
	font-weight: normal;
	line-height: min(calc(0.02 * (min(100vw,100vh) - 64px) + 15.6px) , 32px);
}

.L3{
	width:99%;
	text-align: left;
}

.C3{
	width:fit-content;	/* 文字列に必要な幅の<p>を設定し中央揃え */
	text-align: left;	/* 文字列が折り返すときは左詰めになる */
}

.R3{
	width:99%;
	text-align: right;
}

.L4, .C4, .R4 {
	font-size: min(calc(0.02 * (min(100vw,100vh) - 64px) + 11.6px) , 26px);
	font-weight: normal;
	line-height: min(calc(0.02 * (min(100vw,100vh) - 64px) + 15.6px) , 32px);
}

.L4{
	width:99%;
	text-align: left;
}

.C4{
	width: fit-content;	/* 文字列に必要な幅の<p>を設定し中央揃え */
	text-align: left;	/* 文字列が折り返すときは左詰めになる */
}


.R4{
	width:99%;
	text-align: right;
}
	
.L3, .C3, .R3, .L4, .C4, .R4{
/*	text-shadow: 2px 2px 1px #000,-2px -2px 1px #000,-2px 2px 1px #000,2px -2px 1px #000,2px 0px 1px #000,-2px 0px 1px #000,0px 0px 1px #000,-2px -2px 1px #000;  */
	text-shadow: -1px -1px 2px  #000, -1px -1px 2px  #000, 2px 2px 3px  #000, 2px 2px 3px  #000, 2px 2px 3px  #000;
	padding: 0 2px 0 2px;
	color: rgba(255, 255, 255, 1.0); 
	margin: 0;
	margin-top: 0px;
	margin-bottom: 0px;
/*	width: calc(100vw * 0.4);     			キャプション文字サイズ、枠サイズをダイナミックに変更するため CSS 空は削除*/
/*	max-width: calc(100vw - 4px);			30em などの指定では 中央合わせ ＆ 折り返し時左寄せができない */
	background-color: rgba(0, 0, 0, 0.0);
}


/* popupメッセージ要素に転用  */
.popup_span {
	position: absolute;
	padding: 4px;
	top: 100px;
	left: 100px;
	background-color: #ffffe0;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 4px;
	font-size: 1.0rem;
	line-height: 1.2rem;
    opacity: 0.9;
    z-index: 50;
    display: none;
}


/* flex-thumbnails サムネイルスライダー */
.flex-thumbnails{
	display: none;
	position: absolute;
	bottom: 32px;
	padding: 0;
	margin: 0 auto;
	flex-direction: row;
	justify-content: space-between;
	background-color: transparent;
	width: calc(100vw - 2px);
	height: 78px;
	overflow: auto;
	z-index: 20;
	-ms-overflow-style : none;	/* edge スクロールバー消去 */
	scrollbar-width : none;		/* Firefox スクロールバー消去 */
}
.flex-thumbnails::-webkit-scrollbar {display:none;}   /* Chrome, Safari スクロールバー消去 */


.img-thumbnail{
	/*flex-basis: 98px;*/
	min-width: 100px;
	height: 75px;
	border: 1px solid #fff;
	border-collapse: collapse;
	cursor: pointer;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

.img-thumbnail p{
	position: relative;
	top: 54px;
	right: 2px;
	margin: 0 auto;
	font-size: 0.95rem;
	font-weight: normal;
	color: rgba(255, 255, 255, 1.0);
	background: radial-gradient(rgba(16,96,16,1.0), rgba(16,96,16,0.0));
/*	background: radial-gradient(rgba(255,96,16,1.0), rgba(255,96,16,0.0));*/
}

/* --------------- -------------------------------  /menu/menu.css より　移植 ------------------------------ */
/*右上に固定でメニューボタンを設置*/
.menu-bt {
    display: block;
    width: 76px;
    height: 26px;
    font-size: 0.7rem; 
    color: #ffffff;
    text-align: center;
    line-height: 26px;
    position: absolute;
    top:6px;
    right:6px;
    cursor: pointer;
    background-color: rgba(0,128,0,0.7);
    box-shadow: 2px 2px 2px #000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 20;
}

.menu-check-bt {
	position: fixed;
	top: 4px;
	right: 32px;
    width: 70px;
    height: 22px;
    font-size: smaller; 
    color: #ffffff;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    background-color: rgba(0,128,0,0.7);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 20;
}

/* ---------  動画について ボタン ----- */
.video_exp_bt {
	position: fixed;
	top: 4px;
	right: 32px;
    width: 70px;
    height: 22px;
    font-size: smaller; 
    color: #ffffff;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    background-color: rgba(0,128,0,0.7);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 20;
}

/* ---------  動画コーデック ボタン ----- */
.video_codec_bt {
    width: 90px;
    height: 22px;
    font-size: small; 
    color: #ffffff;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    background-color: rgba(0,128,0,0.7);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 20;
}

.table_back_black {
	border-collapse: collapse;
	border: 1px solid skyblue;
	font-size: smaller;
	text-align: center;
}

.table_back_black tr td {
	border: 1px solid skyblue;
}


/* メニュー div アイテム */
.menu-item { 
	width:158px;
	height:158px;
	text-align:center;
	color: #8cf;
	text-decoration:underline;
    cursor: pointer;
} 

 /* メニュー <a> 文字色 */
.menu-item a { 
	color: #acf; 
} 

 /* メニュー image アイテム */
.menu-image { 
	max-width:150px;
	max-height:100px;
	display:block;
	margin:auto;
} 

 /* メニュー image 強調アイテム */
.menu-highl { 
	max-width:150px;
	max-height:100px;
	display:block;
	margin:auto;
	box-shadow: 0 0 8px 4px #8f8;
} 


/* --------------- ここまで -------------------------------  /menu/menu.css より　移植 ------------------------------ */



/* ----トップページの ロゴイメージ ---- 各ページでカウンタ表示のため /index.css より移植 */
.top_title {
	display:block;
	position: absolute;
	top:6px;
	right: 50%;
	transform: translateX(50%);
	width: 200px;
	cursor: pointer;
	z-index: 10;

	animation-name: hajishpanime;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes hajishpanime {
	0%   {
		top: 6px;
		width : 200px;
		opacity: 0.0;
	}
	1%   {
		top: 35%;
		width: 350px;
		opacity: 1.0;
	}
	50%   {
		top: 35%;
		width: 350px;
		opacity: 1.0;
	}
	100% {
		top: 6px;
		width : 200px;
		opacity: 1.0;
	}
}


/* ----- カウンター Landscape or Portrate ---- */
.land-port {
	display: block;
	position: absolute;
	top: 6px;
	left: 6px;
	margin: 0 auto;
	padding: 3px;
	line-height: 0.7rem;
	border: 1px solid #888;
	border-radius: 3px;
	box-shadow:2px 2px 2px 0 #000;
	font-size: 0.7em;
	line-height: 0.8rem;
	color: white;
	text-align: center;
	cursor: pointer;
	width: 68px;
	z-index: 10;
}
.land-port-right {
	display: block;
	position: absolute;
	top: 3px;
	right: 32px;
	margin: 0 auto;
	padding: 0px;
	border: 1px solid #888;
	border-radius: 3px;
	box-shadow:2px 2px 2px 0 #000;
	text-indent: 0;
	text-align: center;
	font-size: 0.7em;
	line-height: 0.8rem;
	cursor: pointer;
	width: 100px;
	z-index: 10;
}

@media screen and (orientation: landscape) {
	.land-port,.land-port-right {
		background-color: rgba(32,32,255,0.6);
	}
}

@media screen and (orientation: portrait) {
	.land-port,.land-port-right {
		background-color: rgba(255,32,32,0.6);
	}
} 

#count_ttl {
	text-align: center;
	font-size: 0.7rem;
	line-height: 0.8rem;
	color: white;
}

#count_val {
	text-align: center;
	font-size: 0.7rem;
	line-height: 0.8rem;
	color: yellow;
}

/* google ハッシュタグ用 クラス   2023-11-13 */
.hashf{
	color:#ffff66;
	text-decoration-line:none;
	cursor: pointer;
}

/* google ハッシュタグ用 クラス 改良版   2024-10-25 */
.hash2{
	color:#aaddff;
	text-decoration-line:none;
	cursor: pointer;
}
/* window.open を避けるために <a> タグを生成するためのページの最後に追加された <div> タグ　*/
#hash_div{
	height: 0;
	line-height: 0;
	font-size: 0;
	visibility: hidden;
}

/* アニメ・動画を停止後、別タブで開くクラス   2025-9-27 */
.link2{
	color:lightblue;
	text-decoration-line:none;
	cursor: pointer;
}


/* ポプアップ画像・・・一時停止時に表示 display:block / none で制御 */
.popupImg{
	display: none;
	height: min(calc(100vh/8),calc(100vw/8),80px);
	width:  min(calc(100vh/8),calc(100vw/8),80px);
	position: absolute;
	top: calc(57% - min(calc(100vh/16),calc(100vw/16),40px));
	left:   calc(50% - min(calc(100vh/16),calc(100vw/16),40px));
	/* cursor: pointer; */
	text-align: center;
	font-size: min(calc(100vh/64),calc(100vw/64),16x);
	/* font-weight: bold; */
	color: white;
	text-shadow: -1px -1px 2px  #000, -1px -1px 2px  #000, 2px 2px 3px  #000, 2px 2px 3px  #000, 2px 2px 3px  #000;
	z-index: 20;
	background-image: url('/photoframe/slide_red.png?v=20250608043837');
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.0;

	animation-name: unset;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes popupImgAnime {
	0%   {
		opacity: 0.0;
	}
	30%   {
		opacity: 1.0;
	}
	70%   {
		opacity: 1.0;
	}
	100% {
		opacity: 0.0;
	}
}

/* ---------------------------------------------- my-mediabgm から移植 ----------------------------------------*/

/* BGMダイアログの配置場所　右端 6px, 上から 50px */
.bgm_container {
    position:absolute;
    top:40px;
    right:6px;
    overflow: none;
}

/*右上に固定でBGMボタンを設置*/
.bgm_btn {
    display: block;
    width: 76px;
    height: 26px;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    line-height: 26px;
    position: absolute;
    top:0;
    right:0px;
    cursor: pointer;
    background-color: rgba(0,128,0,0.7);
    box-shadow:2px 2px 2px 0px #000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 10;
}

.bgm_btn img {
	width:26px;
    vertical-align:middle;
}

.bgm_div {
	display: none;
	position: absolute;
	top:36px;
	right:0;
	margin:0;
	padding:30px 0 4px 0;
	line-height:30px;
	background-color:rgba(32,138,32,0.7);
	width:240px;
	height:120px;
	box-shadow:3px 3px 5px 0 #000;
	text-align: center;
    z-index: 21;
}

.bgm_ctls { 
	position: absolute;
	bottom: 0px;
	width: 240px;
	height: 30px;
    z-index: 10;
}


/*  2018-12-29 ver 4.2.9 では audio.mejs-player は効かない my-mediabgm.js の setup_audio() で属性をセット
audio.mejs-player {
 	position: absolute;
    top: 0; 
    width: 240px;
}
*/

/* 解説ボタン　*/
.bgm-about {
    display: block;
    font-size: 0.8rem;
    width: 2.5rem;
    height:1.2rem;
    position: absolute;
    top: 6px;
    right: 4px;
    border: 1px solid #e0e0e0;
    background-color: rgb(16,64,16);
    color: white;
    text-align: center;
    cursor: pointer;
    line-height:1.3rem;
}

.bgmBGM {
    position: absolute;
    top: 6px;
    left: 30px;
	font-size: 1rem;
	font-weight:bold;
	color: #ffffff;
	text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.8);
}

.bgmlink {
    position: absolute;
    width: 98%;
    top: 50px;
    right: 50%;
    transform: translateX(50%);
    line-height: 16px;
	color: #ffffff;
	text-shadow: 1px 1px 1px #000;
	font-size: 0.9rem;
    text-decoration: underline;
}

.bgmtitle {
    position: absolute;
    width: 98%;
    top: 90px;
    right: 50%;
    transform: translateX(50%);
    line-height: 16px;
	color: #ffffff;
    text-shadow: 1px 1px 1px #000;
	font-size:0.9rem;
}
/* --------------------------------------  ここまで my-mediabgm から移植 ----------------------------------------*/