/*	===============================================================
	● 管理サイト
	---------------------------------------------------------------
	Release 2024.06.03                                Powerd by TDR
	=============================================================== */

	/****************************
	 * 追加スタイル
	 ****************************/
	@import url( 'style.css' );

	/****************************
	 * WEBフォント
	 ****************************/
	/*
	@import url( 'https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100&display=swap' );
	@import url( 'https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100&family=Noto+Sans+JP:wght@100&display=swap' );
	@import url( 'https://fonts.googleapis.com/css2?family=Murecho:wght@400&display=swap' );
	@import url( 'https://fonts.googleapis.com/css2?family=Kosugi:wght@300&display=swap' );
	@import url( 'https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400&display=swap' );
	@import url( 'https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&display=swap' );
	*/

	/****************************
	 * レイアウト
	 ****************************/
	body
	{
	}

	nav
	{
		width:200px;
		height:100vh;
		background-color:var( --site-main-color );
		position:fixed;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		display:block;
		overflow-y:auto;
		scrollbar-width:none;
	}

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

	header
	{
		width:calc( 100% - 200px );
		height:90px;
		background:white;
		color:black;
		position:fixed;
		top:0px;
		left:200px;
		z-index:500;

		/*
		# ページタイトルに背景色をつけたい場合 ##COLOR## の部分を変更する
		background:linear-gradient( 180deg, ##COLOR## 0%, ##COLOR## 60px, white 60px, white 100% );
		*/
	}

	main
	{
		width:calc( 100% - 240px );
		max-width:1900px;
		margin:0px 0px 0px 220px;
		padding:90px 0px 30px 0px;
		display:block;
	}

	/****************************
	 * ログイン
	 ****************************/
	#login
	{
		width:100%;
		padding-top:calc( 50vh - 210px );
		background:white;
		text-align:center;
	}

	#login h1
	{
		font-size:calc( var( --site-font-size ) * 1.6 );
	}

	#login h2
	{
		margin-top:5px;
		font-size:calc( var( --site-font-size ) * 1.2 );
		color:gray;
	}

	#login p
	{
		height:20px;
		margin-bottom:15px;
		color:red;
	}

	#login form
	{
		width:30%;
		min-width:400px;
		max-width:500px;
		margin:auto; margin-bottom:8px;
		padding:35px 30px;
		border:1px solid #ccc;
		background:#f5f5f5;
		line-height:220%;
		display:block;
	}

	#login input[ type='text' ], #login input[ type='password' ]
	{
		width:100%;
		margin-bottom:20px;
		padding:10px 0 10px 50px;
		font-size:calc( var( --site-font-size ) * 1.6 );
	}

	#login label.in_form
	{
		position:relative;
	}

	#login label.in_form i
	{
		font-size:calc( var( --site-font-size ) * 1.6 );
		color:#aaa;
		position:absolute;
		top:-3px;
		left:15px;
		z-index:1;
	}

	/****************************
	 * ページヘッダ
	 ****************************/
	/** ページタイトル ***/
	header h1
	{
		margin-left:55px;
		padding:7px 0px 5px 0px;
		font-size:var( --page-title-size );
		color:black;
	}

	/** サブメニュー ***/
	header #submenu
	{
		height:30px;
		margin-left:40px;
		padding:2px 0px 0px 10px;
		border-width:1px 0px;
		border-style:solid;
		border-color:#ddd;
		background:var( --page-menu-back-color );
	}

	header #submenu a
	{
		margin-right:20px;
		padding:2px 7px;
		color:var( --page-menu-color );
		text-decoration:none;
	}

	header #submenu a:hover
	{
		border-radius:3px;
		background:var( --site-accesnt-color );
		color:white;
		text-decoration:none;
	}

	/** トグルボタン ***/
	header #screen_switch
	{
		width:20px;
		height:68px;
		margin-left:20px;
		padding-top:2px;
		background:var( --site-accesnt-color );
		text-align:center;
		position:absolute;
	}

	header #screen_switch::before
	{
		font-family:"Font Awesome 5 Free";
		content:'\f104';
		font-size:calc( var( --site-font-size ) * 1.4 );
		font-weight:900;
		color:white;
		top:5px;
		position:relative;
	}

	header #screen_switch:hover
	{
		background:var( --site-accesnt-hover-color );
		cursor:pointer;
	}

	header #screen_switch:hover::before
	{
		color:white;
	}

	/****************************
	 * メインメニュー
	 ****************************/
	/** お気に入り ***/
	nav #fav
	{
		border-bottom:1px solid #d1d1d1;
		background:none;
		display:flex;
	}

	nav #fav a
	{
		width:calc( 100% / 4 );
		margin:2px;
		padding:4px;
		border-radius:5px;
		color:var( --menu-fav-color );
		font-size:calc( var( --site-font-size ) * 1.6 );
		text-align:center;
		display:block;
	}

	nav #fav a:hover { color:white;	}
	nav #fav a:nth-child( 1 ):hover { background:#87b97e; }
	nav #fav a:nth-child( 2 ):hover { background:#6fb3e0; }
	nav #fav a:nth-child( 3 ):hover { background:#d05b47; }
	nav #fav a:nth-child( 4 ):hover { background:#f7b652; }
	nav #fav a:nth-child( 5 ):hover { background:#d05b47; }
	nav #fav a:nth-child( 6 ):hover { background:#d05b47; }

	/*** メイン ***/
	#adm_menu_block { z-index:1000; }

	nav #menu h3
	{
		margin:0px;
		padding:9px; padding-left:10px;
		background-color:none;
		border-top:0px none;
		border-bottom:0px none;
		color:var( --menu-title-color );
		font-weight:bold;
		display:block;
	}

	nav #menu h3:hover
	{
		background:var( --site-accesnt-sub-color );
		cursor:pointer;
	}

	nav #menu h3 i
	{
		width:30px;
		font-size:calc( var( --site-font-size ) * 1.4 );
		vertical-align:text-top;
		/* color:#d7e5f7; */
	}

	/*** コンテンツ ***/
	nav ul
	{
		padding:5px 0;
		background:var( --site-main-sub-color );
		border-bottom:0px none;
	}

	nav ul.close
	{
		display:none;
	}

	nav li
	{
		margin-left:18px;
		padding:0px;
		background:none;
		border-left:2px dotted var( --site-nav-line-color );
	}

	nav li a
	{
		width:100%;
		padding-left:20px;
		color:var( --menu-content-color );
		letter-spacing:0px;
		text-decoration:none;
		display:block;
		position:relative;
	}

	nav li a::before
	{
		content:'';
		width:14px;
		height:2px;
		margin-left:-2px;
		border-top:2px dotted var( --site-nav-line-color );
		position:absolute;
		top:50%;
		left:0px;
		display:block;
	}

	nav li a:hover, nav li a.active
	{
		background:var( --site-accesnt-sub-color );
		color:var( --menu-content-color );
	}

	nav li hr
	{
		border-color:var( --site-nav-line-color );
		border-bottom-style:dotted;
	}

	/*** ログアウト ***/
	nav .logout
	{
		width:100%;
		margin-top:30px;
		color:var( --menu-logout-color );
		font-size:var( --site-font-size );
		text-align:center;
		text-decoration:none;
		display:block;
	}

	nav .logout:hover
	{
		color:var( --menu-logout-hover-color );
	}

	/*** メニューの非表示時 ***/
	nav[ style='display: none;' ] ~ header
	{
		width:100%;
		left:-20px !important;
	}

	nav[ style='display: none;' ] ~ header #screen_switch::before
	{
		content:'\f105';
	}

	nav[ style='display: none;' ] ~ main
	{
		width:calc( 100% - 40px );
		margin-left:20px;
	}

	/****************************
	 * フッタ
	 ****************************/
	footer
	{
		width:100%;
		margin-top:5px;
		text-align:center;
		color:var( --menu-footer-color );
		font-size:calc( var( --site-font-size ) * 0.6 );
		display:block;
	}

	/****************************
	 * セクションブロック
	 ****************************/
	section.search, section.list, section.list_edit, section.edit, section.detail
	{
		min-width:800px;
		margin-bottom:30px;
		display:block;
	}

	section.edit td h3
	{
		margin:10px -5px -5px -5px;
		padding-bottom:3px;
		border-bottom:1px dotted gray;
		color:black;
		font-size:1rem;
		font-weight:normal;
	}

	/****************************
	 * ブロックタイトル
	 ****************************/
	.search h4,.list h4, .list_edit h4, .edit h4, .detail h4, .csv_import h4
	{
		margin-bottom:3px;
		font-size:var( --section-title-size );
		font-weight:normal;
		color:var( --section-title-color );
	}

	.search h4
	{
		height:28px;
		margin-bottom:0px;
		padding-bottom:5px;
		border-bottom:1px solid #ccc;
	}

	.search h4:hover::after
	{
		font-family:"Font Awesome 5 Free";
		content:'\f078';
		color:#aaa;
		font-size:var( --site-font-size );
		font-weight:900;
		position:relative;
		top:0px;
		left:1em;
	}

	/****************************
	 * テーブル「全体設定」
	 ****************************/
	table
	{
		width:100%;
		margin-bottom:30px;
		color:#333;
	}

	.edit table, .detail table
	{
		border-collapse:separate;
		border-spacing:0px 10px;
		border-top:1px solid #ddd;
	}

	table th
	{
		padding:0px 10px;
		text-align:left;
	}

	table td
	{
		padding:6px 10px;
	}

	/****************************
	 * テーブル「ページャ」
	 ****************************/
	pager
	{
		margin:0px;
		display:flex;
	}

	/** 件数 ***/
	pager number
	{
		padding:0 20px;
		color:var( --list-pager-count-color );
		font-size:calc( var( --site-font-size ) * 1.0 );
	}

	/** ページャボタン ***/
	pager .page_button
	{
		margin-left:auto;
		padding:0px;
		display:flex;
	}

	pager .page_button li
	{
		margin:0px 1px;
	}

	pager .page_button li a
	{
		width:100%;
		padding:0 5px;
		color:var( --list-pager-color );
		text-decoration:none;
		display:block;
	}

	pager .page_button li a:hover
	{
		background:var( --list-pager-hover-color );
	}

	pager .page_button li.active
	{
		height:89%;
		padding:0px 5px;
		background:var( --list-pager-active-color );
		color:white;
		font-weight:bold;
	}

	/****************************
	 * テーブル「開閉やソートボタン」
	 ****************************/
	.switcher
	{
		color:var( --list-switcher-color );
		text-decoration:none;
	}

	.switcher:hover
	{
		color:var( --list-switcher-hover-color );
		text-decoration:none;
	}

	.switcher.active
	{
		color:var( --list-switcher-active-color );
	}

	.switcher.float_center
	{
		margin-top:-6px;
		position:absolute;
		left:49%;
		font-size:calc( var( --site-font-size ) * 1.3 );
	}

	/****************************
	 * テーブル「検索」
	 ****************************/
	.search table
	{
		border-width:0px 0px 1px 0px;
		border-style:solid;
		border-color:var( --list-search-border-color );
		background:var( --list-search-bg-color );
	}

	.search table:hover, .search table:focus-within td
	{
		background:var( --list-search-bg-hover-color );
	}

	/****************************
	 * テーブル「リスト」
	 ****************************/
	/** 表題 ***/
	.list th, .list_edit th
	{
		padding:1px 10px;
		border-width:1px 0px;
		border-style:solid;
		border-top-color:var( --list-title-border-color );
		border-bottom-color:var( --list-title-border-color );
		background:var( --list-title-bg-color );
		color:var( --list-title-color );
		font-size:var( --list-title-size );
		font-weight:normal;
		color:black;
	}

	.list th.main, .list_edit th.main
	{
		background:var( --list-title-main-bg-color );
	}

	/** リスト ***/
	.list td, .list_edit td
	{
		border-width:0px 0px 1px 0px;
		border-style:solid;
		border-bottom-color:var( --list-border-color );
	}

	.list tr:hover td
	{
		background:var( --list-hover-color );
		color:black;
	}

	.list td.main
	{
		background:var( --list-main-color );
	}

	.list tr:hover td.main
	{
		background:var( --list-main-hover-color );
		color:black;
	}

	/*** リスト編集 ***/
	.list_edit td
	{
		padding:7px 10px;
	}

	.list_edit td.main
	{
		background:var( --list-main-color );
	}

	.list_edit tr:hover td, .list_edit tr:focus-within td
	{
		background:var( --list-main-color );
		color:black;
	}

	.list_edit tr:hover td.main, .list_edit tr:focus-within td.main
	{
		background:var( --list-main-hover-color );
		color:black;
	}

	/*** リスト新規 ***/
	.list_edit tr.insert td
	{
		background:var( --list-insert-color );
	}

	.list_edit tr.insert td.main
	{
		background:var( --list-insert-main-color );
	}

	.list_edit tr.insert:hover td, .list_edit tr.insert:focus-within td
	{
		background:var( --list-insert-hover-color );
		color:black;
	}

	.list_edit tr.insert:hover td.main, .list_edit tr.insert:focus-within td.main
	{
		background:var( --list-insert-main-hover-color );
	}

	/*** リスト編集（変更行のハイライト） ***/
	tr.line_mark td:first-child
	{
		border-left:5px solid var( --list-mark-color );
	}

	/****************************
	 * テーブル「詳細」
	 ****************************/
	/** 表題 ***/
	.edit th, .detail th
	{
		width:200px;
		padding-top:10px;
		border-right:15px solid white;
		background:var( --edit-title-color );
		font-size:calc( var( --site-font-size ) * 0.9 );
		font-weight:normal;
		color:black;
		position:relative;
	}

	.edit th.main, .detail th.main
	{
		background:var( --edit-title-main-color );
	}

	/** 表題のボーダー ***/
	.edit th::before,      .detail th::before      { z-index:0; content:''; width:100%; border-top:5px solid var( --edit-title-border-color );      position:absolute; left:0px; top:0px;    }
	.edit th.main::before, .detail th.main::before { z-index:0; content:''; width:100%; border-top:5px solid var( --edit-title-border-main-color ); position:absolute; left:0px; top:0px;    }

	/** フォーム箇所のフォーカス ***/
	.edit td.main, .detail td.main
	{
		padding-top:10px;
		padding-bottom:10px;
		background:var( --edit-main-color );
	}

	.edit tr:focus-within td, .detail tr:focus-within td
	{
		background:var( --edit-focus-color );
	}

	.edit tr:focus-within td.main, .detail tr:focus-within td.main
	{
		background:var( --edit-main-focus-color );
	}

	/** 表題箇所のフォーカス ***/
	.edit tr:focus-within th, .detail tr:focus-within th
	{
		background:var( --edit-title-focus-color );
	}

	.edit tr:focus-within th::before, .detail tr:focus-within th::before
	{
		border-color:var( --edit-title-border-focus-color );
	}

	.edit tr:focus-within th.main::before, .detail tr:focus-within th.main::before
	{
		border-color:var( --edit-title-border-main-focus-color );
	}

	/** ブロック間タイトル ***/
	.edit table h2, .detail table h2
	{
		margin:5px 0 -8px -8px;
		font-size:calc( var( --site-font-size ) * 1.1 );
		font-weight:100;
		color:var( --site-main-sub-color );
	}

	.edit table h2[ class^='sub-title' ], .detail table h2[ class^='sub-title' ]
	{
		margin-bottom:10px;
	}

	.edit table h2[ class^='sub-title' ][ class*='-sharp' ]::before, .detail table h2[ class^='sub-title' ][ class*='-sharp' ]::before
	{ 
		content:'# '; 
		font-size:calc( var( --site-font-size ) * 1.2 );
		color:#bbb;
	}

	/****************************
	 * テーブル「リンク」
	 ****************************/
	table td > a:not( .field_order ):not( [role='button'] )
	{
		margin:-10px;
		padding:10px;
		color:var( --link-color );
		text-decoration:none;
		text-shadow:2px 2px 2px white;
		font-weight:bold;
		display:block;
	}

	table td > a:not( .field_order ):hover
	{
		color:var( --link-hover-color );
		text-decoration:underline;
	}

	/****************************
	 * テーブル「スクロールロック」
	 ****************************/
	.scroll_fix > *, .list th, .list_edit th
	{
		position:-webkit-sticky;
		position:sticky;
		top:90px;
	}

	.list th::before, .list_edit th::before
	{
		content:'';
		width:100%;
		position:absolute;
		border-bottom:1px solid var( --list-title-border-color );
		top:-1px;
		left:0px;
		z-index:1;
	}

	.list th::after, .list_edit th::after
	{
		content:'';
		width:100%;
		position:absolute;
		border-bottom:1px solid var( --list-title-border-color );
		left:0px;
		bottom:-1px;
		z-index:1;
	}

	/****************************
	 * テーブル「CSVインポート」
	 ****************************/
	.csv_import table
	{
		border-width:1px 0px;
		border-style:solid;
		border-top-color:var( --list-title-border-color );
		border-bottom-color:var( --list-title-border-color );
	}

	.csv_import table tr > td:first-child
	{
		width:160px;
		white-space:nowrap !important;
		background:#f1f1f1;
	}

	.csv_import table:hover, .csv_import table:focus-within td
	{
		background:#fafafa;
	}

	/****************************
	 * ファイルフォーム
	 ****************************/
	/** 通常 ***/
	.file_form
	{
		padding:0px;
	}

	.file_form figure
	{
		margin:10px 0 0 0;
		padding:0px;
	}

	.file_form figure a:hover img
	{
		filter:opacity( 75% );
	}

	/** Firefox 対応 **/
	@-moz-document url-prefix()
	{
		.file_form label
		{
			width:140px;
		}
	}

	/** 小さめ ***/
	.file_form.small
	{
		max-width:120px;
	}

	.file_form.small section
	{
		margin:0px 0px 5px -5px !important;
	}

	.file_form.small section.hide input
	{
		margin-top:0px !important;
	}

	.file_form.small label span, .file_form.small section.hide
	{
		padding:2px 5px;
	}

	.file_form.small figure, .file_form.small img
	{
		max-height:60px !important;
		margin-top:0px;
	}

	/** 選択ボタン ***/
	/* .file_form label span
	{
		padding:5px 15px;
		background:var( --form-fselect-color );
		border-radius:5px;
		text-align:center;
	}

	.file_form label span:hover
	{
		background:var( --form-fselect-hover-color );
		color:white;
		cursor:pointer;
	}

	.file_form label input
	{
		display:none;
	} */

	/** 選択ボタン(改) ***/
	.file_form label
	{
		position: relative;
		display: inline-block;
		margin-bottom: 10px;
	}
	.file_form label span
	{
		position: absolute;
		top:0;
		left:0;
		min-width: 128px;
		height: 30px;
		padding:8px 15px;
		background:var( --form-fselect-color );
		border-radius:5px;
		text-align:center;
		border:none;
		font-size:0;
		line-height: 1;
		z-index: 0;
	}
	.file_form input
	{
		font-size:0;
	}
	.file_form input::file-selector-button
	{
		position: absolute;
		top:0;
		left:0;
		padding:8px 15px;
		height: 30px;
		background:transparent;
		border-radius:5px;
		text-align:center;
		border:none;
		font-size:14px;
		line-height: 1;
		z-index: 1;
	}
	.file_form input::file-selector-button:hover
	{
		background:var( --form-fselect-hover-color );
		color:white;
		cursor:pointer;
	}

	/****************************
	 * ファイルリンク「画像」
	 ****************************/
	.file_form figure img.fit
	{
		max-width:175px;
		height:125px;
		border:1px solid #ddd;
	}

	.file_form figure img.fit:hover
	{
		border-color:#bbb;
	}

	img.fit
	{
		width:100%;
		object-fit:cover;
	}

	/****************************
	 * ファイルリンク「アプリケーション」
	 ****************************/
	/*** 共通 ***/
	*[ class^='file_disp' ]
	{
		width:100%;
		min-width:175px;
		max-width:175px;
		height:125px;
		padding:30px 10px 0 10px;
		border:2px solid;
		background:white;
		border-radius:5px;
		text-align:center;
		text-decoration:none;
		display:block;
	}

	*[ class^='file_disp' ] span
	{
		margin-top:10px;
		padding:3px;
		text-decoration:none;
		border-radius:5px;
		color:white;
		font-weight:bold;
		text-align:center;
		display:block;
	}

	*[ class^='file_disp' ]:hover, *[ class^='file_disp' ]:hover i { color:white; }

	/*** アプリケーションとサウンド ***/
	*[ class^='file_disp' ][ class*='-app' ]   { border-color:#6fb3e0; color:#6fb3e0; }
	*[ class^='file_disp' ][ class*='-sound' ] { border-color:orange; color:orange;  }
	*[ class^='file_disp' ][ class*='-app' ] span, *[ class^='file_disp' ][ class*='-app' ]:hover     { background:#6fb3e0; }
	*[ class^='file_disp' ][ class*='-sound' ] span, *[ class^='file_disp' ][ class*='-sound' ]:hover { background:orange;  }
	*[ class^='file_disp' ][ class*='-app' ]:hover span   { background:white; color:#6fb3e0; }
	*[ class^='file_disp' ][ class*='-sound' ]:hover span { background:white; color:orange;  }

	/*** アイコン ***/
	*[ class^='file_disp' ] i { font-size:var( --max-size ); }

	/** ファイルリンク文字列 ******/
	a.file_link
	{
		color:#256aaa;
		text-decoration:none;
	}
	a.file_link:hover
	{
		color:#cc0000;
	}

	/****************************
	 * 入力の必須や補足説明
	 ****************************/
	.fix::after
	{
		font-family:"Font Awesome 5 Free";
		content:'\f06a';
		color:var( --link-hover-scolor );
		font-size:calc( var( --site-font-size ) * 0.9 );
		font-weight:bold;
	}

	aside, .aside, item, .item
	{
		color:var( --form-aside-color );
		font-size:calc( var( --site-font-size ) * 0.9 );
		font-weight:normal;
		line-height:140%;
	}

	item, .item
	{
		margin-bottom:5px;
	}

	aside, .aside
	{
		margin-top:5px;
		margin-bottom:-5px;
	}

	/****************************
	 * フォームのスプラッシュ
	 ****************************/
	/*** 失敗時 ***/
	.splush_error
	{
	  animation:splush_error_kf 0.3s ease-out 1;
	}
	@keyframes splush_error_kf
	{
		  0%   { background:#cc0000; }
		  100% { background:#fce1fc; }
	}

	/*** 成功時 ***/
	.splush_success
	{
	  animation:splush_success_kf 0.5s ease-out 1;
	}
	@keyframes splush_success_kf
	{
		  0%   { background:#91cfff; }
		  100% { background:white; }
	}

	/****************************
	 * ボタンブロック
	 ****************************/
	.btn_block
	{
		margin-top:20px;
		padding:15px;
		border-radius:10px;
		background-color:var( --button_bg_color );
		color:black;
		font-size:var( --site-font-size );
		font-weight:normal;
		text-align:center;
		text-decoration:none;
		display:block;
	}

	/****************************
	 * メッセージボックス
	 ****************************/
	/*** 共通 ***/
	#message
	{
		width:100%;
		margin-bottom:20px;
		display:blcok;
		position:relative;
	}

	#message h4
	{
		width:100%;
		margin-bottom:2px;
		color:white;
		font-weight:bold;
		letter-spacing:0.2em;
		text-align:center;
	}

	#message h4:hover
	{
		filter:saturate( 80% );
		cursor:pointer;
	}

	/*** 失敗時 ***/
	#message.error h4    { background:var( --message-error_color ); border:1px solid var( --message-error_color ); }
	#message.error       { border-bottom:1px solid var( --message-error_color ); }

	/*** 成功時 ***/
	#message.success h4  { background:var( --message-success_color ); }
	#message.success     { border-bottom:1px solid var( --message-success_color ); }

	/*** 確認時 ***/
	#message.confirm
	{
		width:100%;
		padding:3px;
		border:2px solid var( --message-confirm_color ) !important;
		border-radius:10px;
		color:var( --message-confirm_color );
		font-weight:bold;
		text-align:center;
	}

	/*** メッセージ詳細 ***/
	#message table
	{
		width:100%;
		margin:10px;
		border-spacing:1px !important;
		white-space:nowrap;
	}

	#message table th
	{
		width:1%;
		padding:0px;
		text-align:right;
		font-weight:normal;
		color:#666;
		white-space:nowrap;
	}

	#message table td
	{
		padding:0px;
		color:black;
	}

	/*** エラー行・更新行へのスクロールボタン ***/
	#message #line_link
	{
		position:absolute;
		color:#bbb;
		text-align:right;
		top:50%; bottom:0px; right:10px;
		text-decoration:none;
	}
	#message #line_link:hover
	{
		color:black;
		cursor:pointer;
	}

	/*** フォーム下のエラー表示 ***/
	.error_form_message
	{
		margin-top:4px;
		color:var( --message-error_color );
		font-size:var( --message-form-text-size );
		line-height:140%;
	}

	/****************************
	 * カレンダー（リアルタイム更新）
	 ****************************/
	.schedule_ym
	{
		margin-bottom:10px;
		font-size:calc( var( --site-font-size ) * 1.6 );
		font-weight:normal;
	}

	.schedule
	{
		width:100%;
		margin-bottom:30px;
		display:block;
	}

	.schedule week
	{
		margin:0px;
		padding:0px;
		border-top:1px solid #ccc;
		border-left:1px solid #ccc;
		background:#efefef;
		color:black;
		display:flex;
		justify-content:space-around;
		z-index:1000;
	}
	.schedule week div
	{
		margin:auto;
		width:calc( 100% / 7 );
		border-bottom:1px solid #ccc;
		border-right:1px solid #ccc;
		text-align:center;
	}

	.schedule week div:first-child { background:#f7adad; }
	.schedule week div:last-child { background:#f9db98; }

	.schedule section
	{
		border-left:1px solid #ccc;
		display:flex;
		flex-wrap:wrap;
	}

	.schedule section div
	{
		width:calc( 100% / 7 );
		margin:0px;
		padding:15px;
		border-bottom:1px solid #ccc;
		border-right:1px solid #ccc;
	}

	.schedule section div:hover, .schedule section div:focus-within
	{
		background:#eaf2f9 !important;
	}

	.schedule section div:first-child, .schedule section div:nth-child( 7n + 1 ) { background:#fff7f7; }
	.schedule section div:nth-child( 7 ), .schedule section div:nth-child( 7n ) { background:#fffcf7; }

	.schedule section div date
	{
		width:100%;
		color:#999;
		font-weight:bold;
		text-align:center;
		display:block;
	}

	.schedule section div input, .schedule section div select
	{
		width:100%;
		margin-top:12px;
	}

	.schedule_title
	{
		display:flex;
		justify-content:space-between;
	}

	/****************************
	 * ドラッグ＆ドロップ
	 ****************************/
	#dd_area
	{
		margin:0px !important;
		background-color:rgba( 86, 86, 86, 0.4 );
		text-shadow:0px 0px 5px orange;
		color:white;
		font-size:var( --site-font-size );
		font-weight:900;
		text-align:center;
		position:absolute;
		z-index:2000;
		display:block !important;
	}

	#dd_area div#prog_bar
	{
		width:50%;
		height:15px !important;
		margin:auto !important;
		margin-top:10px !important;
		padding:0px !important;
		border:2px solid white !important;
		position:relative !important;
	}

	#dd_area div#prog_bar div
	{
		width:0%;
		margin:0px !important;
		height:11px !important;
		background:white !important;
	}

	#dd_area div#prog_txt
	{
		width:50%;
		margin:auto;
		margin-top:10px;
		text-align:center;
		color:white;
	}

	/****************************
	 * ファイルリスト
	 ****************************/
	/** テンプレート1 - ファイルリスト **/
	.file_rt_list
	{
		height:25vh;
		margin:5px 0 30px 0;
		padding:10px 15px;
		background:white;
		border:1px solid #aaa;
		overflow:auto;
		display:block;
	}


	.file_rt_list > .template, .file_rt_thumb > .template
	{
		display:none !important;
		list-style-type:none
	}

	.file_rt_list > *:not( .toaster )
	{
		margin:0px;
		padding:0px;
		display:flex;
		justify-content:space-between;
		border-bottom:1px dotted #aaa;
		list-style-type:none
	}

	.file_rt_list > * > *
	{
		padding:5px;
		display:block;
	}

	.file_rt_list > *:hover  { background:#f1f1f1; }
	.file_rt_list icon      { padding-right:15px; }
	.file_rt_list name       { flex:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
	.file_rt_list size       { width:100px; text-align:right; }

	/** テンプレート2 - サムネイルリスト **/
	.file_rt_thumb
	{
		height:25vh;
		padding:0 10px 10px 0;
		border:1px solid #ccc;
		background:white;
		display:flex;
		flex-wrap:wrap;
		overflow:auto;
	}

	.file_rt_thumb thumb
	{
		width:70px;
		height:50px;
		margin:10px 0 0 10px;
		display:block;
	}

	.file_rt_thumb thumb img
	{
		width:70px;
		height:50px;
		object-fit:cover;
	}

	.file_rt_thumb thumb img:hover
	{
		filter:brightness( 0.8 ) contrast( 120% );
		cursor:pointer;
	}

	.file_rt_thumb name
	{
		width:70px;
		margin-left:10px;
		font-size:calc( var( --site-font-size ) * 0.9 );
		text-align:center;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		display:block;
	}

	.file_rt_thumb thumb .link
	{
		width:70px;
		height:50px;
		padding:8px 0;
		text-align:center;
		line-height:130%;
		display:block;
	}

	.file_rt_thumb thumb .link span { display:none; }

	.file_rt_thumb thumb
	{
		border:0.5px solid #eee;
		color:#cc0000;
		text-decoration:none;
	}

	.file_rt_thumb thumb:hover
	{
		background:#f4f4f4;
	}

	*[data-proc="sort"]:hover
	{
		cursor:pointer;
	}

	/** テンプレート3 - アップロードブロック **/
	.file_rt_upload
	{
		min-height:100px;
		border:5px dotted #ddd;
		background:#f7f7f7;
		display:block;
	}
	.file_rt_upload::after
	{
		font-family:"Font Awesome 5 Free";
		content:'\f0ee';
		font-weight:900;
		position:relative;
		color:#e7e7e7;
		top:calc( 50% - 1rem );
		left:calc( 50% - 2.3rem );
		font-size:calc( var( --site-font-size ) * 4.0 );
		display:block;
	}

	/****************************
	 * コンテキストメニュー
	 ****************************/
	#contextmenu
	{
		width:230px;
		padding:0px;
		border:1px solid var( --contmenu-border-color );
		background:white;
		box-shadow:2px 2px 6px var( --contmenu-hr-color );
		position:fixed;
		display:none;
	}

	#contextmenu li, #link_tag li, #path_tag li
	{
		padding:5px 0;
		display:none;
	}

	#contextmenu hr
	{
		margin:3px 0;
		padding:0px;
		border:none;
		border-bottom:1px solid var( --contmenu-hr-color );
	}

	#contextmenu li span
	{
		padding:0 10px;
	}

	#contextmenu li:hover
	{
		background:var( --contmenu-menu-bg-hover-color );
		color:white;
		cursor:pointer;
	}

	#contextmenu li a
	{
		margin:0px;
		padding:0px 10px !important;
		display:block;
		color:#333;
	}

	#contextmenu li a i
	{
		font-weight:900;
	}

	#contextmenu li a:hover
	{
		color:var( --contmenu-menu-hover-color ) !important;
		text-decoration:none;
	}

	/****************************
	 * ファイルブラウザ
	 ****************************/
	#file_browser { display:none; }

	div[data-toggle="#file_browser%"] { width:100%; left:0px; top:auto; bottom:10px; text-align:center; position:absolute; }
	div[data-toggle="#file_browser%"]:hover { color:#cc0000; }

	/** ボタンブロック **/

	#fb_wrapper
	{
		width:100%;
		margin:10px 0px 10px -5px;
		padding:0px;
		border-radius:15px;
		box-shadow:0px 0px 20px #cacaca;
	}

	#fb_wrapper h3
	{
		padding:5px;
		background:#ADD6D8;
		border-radius:15px 15px 0 0;
		color:white;
		text-align:center;
	}

	#fb_wrapper .cmd_block
	{
		padding:10px 15px;
	}

	#fb_wrapper .cmd_block a
	{
		width:fit-content;
		margin-right:20px;
		padding:8px;
		color:gray;
	}

	#fb_wrapper .cmd_block a:hover
	{
		text-decoration:none;
		cursor:pointer;
	}

	#fb_wrapper .cmd_block.proc a[data-modal='#dialog_up'] { border-bottom:2px solid #2f6abc; color:#2f6abc; }
	#fb_wrapper .cmd_block.proc a[data-modal='#dialog_up']:hover { background:#2f6abc; color:white; }
	#fb_wrapper .cmd_block.proc a[data-modal='#dialog_rmb'] { border-bottom:2px solid #CE1C4A; color:#CE1C4A; }
	#fb_wrapper .cmd_block.proc a[data-modal='#dialog_rmb']:hover { background:#CE1C4A; color:white; }
	#fb_wrapper .cmd_block.proc a[data-listup='#file_list'] { border-bottom:2px solid #F8C83C; color:#c4940f }
	#fb_wrapper .cmd_block.proc a[data-listup='#file_list']:hover { background:#F8C83C; color:white; }
	#fb_wrapper .cmd_block.sort a { color:#aaa; }
	#fb_wrapper .cmd_block.sort a:hover { color:black; }

	#fb_wrapper .file_list_wrapper
	{
		width:100%;
		padding-bottom:20px;
		border-radius:0 0 15px 15px;
	}

	#fb_wrapper .file_rt_thumb
	{
		margin:0 10px 10px 10px;
		border:none;
		background:none;
	}

	#fb_wrapper .file_rt_upload
	{
		margin-top:20px;
	}

	#fb_wrapper .file_rt_upload::after
	{
		top:35px;
	}

	/****************************
	 * モーダル
	 ****************************/
	#modal_base
	{
		width:100%; height:100vh;
		margin:0px !important;
		background:black;
		opacity:0.4;
		position:fixed;
		z-index:2000;
	 }

	#modal_window
	{
		padding:15px;
		border-radius:10px;
		background:white;
		box-shadow:0px 0px 30px #333;
		position:fixed;
		z-index:2500;
	 }

	/****************************
	 * モーダル - ダイアログ
	 ****************************/
	/** ウィンドウのベース設定 **/
	#modal_window .dialog
	{
		padding:0px 10px 4px 40px;
		color:black !important;
	}

	#modal_window .dialog::before
	{
		font-family:"Font Awesome 5 Free";
		content:'\f044';
		width:30px;
		height:100%;
		margin:-15px 0 0 -55px;
		padding:14px 0 0 10px;
		border-radius:10px 0 0 10px;
		font-weight:900;
		font-size:calc( var( --site-font-size ) * 0.9 );
		color:white;
		position:absolute;
	}

	/** ウィンドウの個別カラー **/
	#modal_window .dialog.blue::before   { background:#54bdff; }
	#modal_window .dialog.green::before  { background:#40ad0a; }
	#modal_window .dialog.orange::before { background:#ff9d26; }
	#modal_window .dialog.red::before    { background:#e00000; }
	#modal_window .dialog.gray::before   { background:#bbbbbb; }

	/** 区切り線 **/
	#modal_window .dialog hr
	{
		margin:20px 0 15px 0;
		border:none;
		border-bottom:1px dotted gray;
	}

	/****************************
	 * モーダル - ボタン
	 ****************************/
	/** ボタンの挙動 **/
	#modal_window .dialog button:hover
	{
		cursor:pointer;
	}

	/** ボタンのデフォルト **/
	#modal_window .dialog button
	{
		min-width:115px;
		margin:0 15px;
		padding:4px 10px;
		border-radius:5px;
		font-size:var( --site-font-size );
	}

	/** ボタン（ブルー） **/
	#modal_window .dialog button.blue
	{
		border:2px solid #54bdff;
		background:white;
		color:#1c9eef !important;
	}

	#modal_window .dialog button.blue:hover
	{
		background:#54bdff;
		color:white !important;
	}

	/** ボタン（グリーン） **/
	#modal_window .dialog button.green
	{
		border:2px solid #199900;
		background:white;
		color:#199900 !important;
	}

	#modal_window .dialog button.green:hover
	{
		background:#199900;
		color:white !important;
	}

	/** ボタン（オレンジ） **/
	#modal_window .dialog button.orange
	{
		border:2px solid #ff9d26;
		background:white;
		color:#ff9d26 !important;
	}

	#modal_window .dialog button.orange:hover
	{
		background:#ff9d26;
		color:white !important;
	}

	/** ボタン（レッド） **/
	#modal_window .dialog button.red
	{
		border:2px solid #bf0f0f;
		background:white;
		color:#bf0f0f !important;
	}

	#modal_window .dialog button.red:hover
	{
		background:#bf0f0f;
		color:white !important;
	}

	/** ボタン（グレー/キャンセル） **/
	#modal_window .dialog button.cancel
	{
		border:2px solid #e4e4e4;
		background:#e4e4e4;
		color:#666;
	}

	#modal_window .dialog button.cancel:hover
	{
		border:2px solid #ccc;
		background:#ccc;
		color:#333;
	}

	/****************************
	 * モーダルウィンドウ（個別）
	 ****************************/
	/** ファイルアップロード **/
	#modal_window .dialog.file_up input[ type="file" ]
	{
		display:none;
	}

	#modal_window .dialog.file_up label
	{
		width:100%;
		margin:10px 0 10px 0 !important;
		padding:5px 10px;
		border-radius:5px;
		color:#7e8c11;
		background-color:var( --dialog-filelabel-color );
		display:block;
		cursor:pointer;
	}

	#modal_window .dialog.file_up label:hover
	{
		color:white;
		background-color:var( --dialog-filelabel-select-color );
	}

	/****************************
	 * ツールチップ
	 ****************************/
	#tooltip
	{
		padding:10px 15px;
		border-radius:5px;
		border:1px solid var( --link-hover-scolor );
		background:white;
		color:var( --link-hover-scolor );
		display:none;
		position:fixed;
		z-index:999;
	 }

	/****************************
	 * トースター
	 ****************************/
	.toaster
	{
		margin:0px;
		padding:0px;
		border:3px solid #78c40d;
		background:white;
		color:black;
		display:none;
		z-index:1000;
	}

	.toaster icon
	{
		width:50px;
		margin:0px;
		padding:0px;
		background:#78c40d;
		font-weight:900;
		font-size:calc( var( --site-font-size ) * 1.3 );
		color:white;
		justify-content:center;
		align-items:center;
		display:flex;
	}

	.toaster p
	{
		margin:15px;
		padding:0px;
	}

	.toaster.error { border-color:var( --message-error_color ); }
	.toaster.error icon
	{
		background-color:var( --message-error_color );
	}

	/****************************
	 * その他
	 ****************************/
	.fld_gray legend { color:gray; }
	.fld_gray
	{
		padding:10px 20px 20px 20px;
		border:0px;
		border-radius:10px;
		background:#f1f1f1;
	}