/*	===============================================================
	● STYLE CSSファイル
	---------------------------------------------------------------
	Release 2022.03.14                                Powerd by TDR
	=============================================================== */

	/* ************************************************************
	/* NOTE
	/* ************************************************************/
	/**
	 * ----------------------------------------
	 * ■ メソッド
	 * ----------------------------------------
	 * - box [-line] [-radius] [-color]			： ブロックボックス
	 * - btn [-line] [-radius] [-color]			： ボタン
	 * 
	 */

	/****************************
	 * ブロックボックス
	 ****************************/
	/**
	 * ●使用法
	 * 
	 * 書式）box [-line] [-radius] [-color]
	 * 　例）box-l1-r5-gray
	 * 
	 **/

	/** 基本 ********************/
	*[ class^='box' ]
	{
		padding:5px 10px;
		color:black; font-size:1rem; font-weight:normal;
		text-align:left;
		text-decoration:none;
		display:block;
	}

	/** 線 **********************/
	*[ class^='box-' ][ class*='-l1'  ] { border:1px  solid; }
	*[ class^='box-' ][ class*='-l2'  ] { border:2px  solid; }
	*[ class^='box-' ][ class*='-l3'  ] { border:3px  solid; }
	*[ class^='box-' ][ class*='-l5'  ] { border:5px  solid; }
	*[ class^='box-' ][ class*='-l10' ] { border:10px solid; }

	/** 丸み ********************/
	*[ class^='box-' ][ class*='-r3'  ] { border-radius:3px;  }
	*[ class^='box-' ][ class*='-r5'  ] { border-radius:5px;  }
	*[ class^='box-' ][ class*='-r10' ] { border-radius:10px; }
	*[ class^='box-' ][ class*='-r15' ] { border-radius:15px; }

	/** 背景色 ******************/
	*[ class^='box-' ][ class*='-red'     ] { background-color:#fff2f2; border-color:#f4c3c3; }
	*[ class^='box-' ][ class*='-red+'    ] { background-color:#fff7f7; border-color:#f8dede; }
	*[ class^='box-' ][ class*='-blue'    ] { background-color:#f2f8ff; border-color:#a8bfed; }
	*[ class^='box-' ][ class*='-blue+'   ] { background-color:#f7fbff; border-color:#dbe8f6; }
	*[ class^='box-' ][ class*='-green'   ] { background-color:#f4f9e3; border-color:#c6d398; }
	*[ class^='box-' ][ class*='-green+'  ] { background-color:#f8fbef; border-color:#c6d398; }
	*[ class^='box-' ][ class*='-orange'  ] { background-color:#fdf3e3; border-color:#ffcd77; }
	*[ class^='box-' ][ class*='-orange+' ] { background-color:#fffaf2; border-color:#ffe3bd; }
	*[ class^='box-' ][ class*='-gold'    ] { background-color:#F2EFE8; border-color:#d1c6af; }
	*[ class^='box-' ][ class*='-gold+'   ] { background-color:#f7f6f2; border-color:#e5dfd4; }
	*[ class^='box-' ][ class*='-gray'    ] { background-color:#F1F1F1; border-color:#bbbbbb; }
	*[ class^='box-' ][ class*='-gray+'   ] { background-color:#F6F6F6; border-color:#cccccc; }

	*[ class^='box-' ][ class*='-center'   ] { text-align:center; }

	/****************************
	 * ボタン
	 ****************************/
	/**
	 * ●使用法
	 * 
	 * 書式）btn [-line] [-radius] [-color]	
	 * 　例）btn-blue
	 * 
	 **/

	/** 基本 ********************/
	button[ name='@btn' ], *[ class^='btn' ]
	{
		padding:7px 18px;
		background:white;
		border:0px;
		font-size:1rem;
		color:#666;
		text-align:center;
	}

	/** 線 **********************/
	*[ class^='btn-' ][ class*='-l1'  ] { border:1px  solid; }
	*[ class^='btn-' ][ class*='-l2'  ] { border:2px  solid; }
	*[ class^='btn-' ][ class*='-l3'  ] { border:3px  solid; }
	*[ class^='btn-' ][ class*='-l5'  ] { border:5px  solid; }
	*[ class^='btn-' ][ class*='-l10' ] { border:10px solid; }

	/** 丸み ********************/
	*[ class^='btn-' ][ class*='-r3'  ] { border-radius:3px;  }
	*[ class^='btn-' ][ class*='-r5'  ] { border-radius:5px;  }
	*[ class^='btn-' ][ class*='-r8'  ] { border-radius:8px; }
	*[ class^='btn-' ][ class*='-r10' ] { border-radius:10px; }
	*[ class^='btn-' ][ class*='-r15' ] { border-radius:15px; }

	/** 背景色 ******************/
	*[ class^='btn-' ][ class*='-red'     ] { background:#ed2d2d; color:white; }
	*[ class^='btn-' ][ class*='-red+'    ] { background:#ffb7b7; color:white; }
	*[ class^='btn-' ][ class*='-blue'    ] { background:#6fb3e0; color:white; }
	*[ class^='btn-' ][ class*='-blue+'   ] { background:#c4ddf2; color:white; }
	*[ class^='btn-' ][ class*='-green'   ] { background:#73b756; color:white; }
	*[ class^='btn-' ][ class*='-green+'  ] { background:#d0eac5; color:white; }
	*[ class^='btn-' ][ class*='-orange'  ] { background:#ff7530; color:white; }
	*[ class^='btn-' ][ class*='-orange+' ] { background:#fcd9c7; color:white; }
	*[ class^='btn-' ][ class*='-gray'    ] { background:#e4e4e4; color:#666;  }
	*[ class^='btn-' ][ class*='-gray+'   ] { background:#F1F1F1; color:#999;  }

	/** 背景色（線あり） ********/
	*[ class^='btn-' ][ class*='-red'     ][ class*='-l' ] { background:white; color:#bf0f0f; }
	*[ class^='btn-' ][ class*='-red+'    ][ class*='-l' ] { background:white; color:#ffb7b7; }
	*[ class^='btn-' ][ class*='-blue'    ][ class*='-l' ] { background:white; color:#2583d1; }
	*[ class^='btn-' ][ class*='-blue+'   ][ class*='-l' ] { background:white; color:#c4ddf2; }
	*[ class^='btn-' ][ class*='-green'   ][ class*='-l' ] { background:white; color:#479628; }
	*[ class^='btn-' ][ class*='-green+'  ][ class*='-l' ] { background:white; color:#d0eac5; }
	*[ class^='btn-' ][ class*='-orange'  ][ class*='-l' ] { background:white; color:#ff7530; }
	*[ class^='btn-' ][ class*='-orange+' ][ class*='-l' ] { background:white; color:#fcd9c7; }
	*[ class^='btn-' ][ class*='-gray'    ][ class*='-l' ] { background:white; color:#aaaaaa; }
	*[ class^='btn-' ][ class*='-gray+'   ][ class*='-l' ] { background:white; color:#cccccc; }

	/** ホバー ******************/
	*[ class^='btn-' ][ class*='-red'     ]:hover { background:#bf0f0f; }
	*[ class^='btn-' ][ class*='-red+'    ]:hover { background:#ed2d2d; }
	*[ class^='btn-' ][ class*='-blue'    ]:hover { background:#2583d1; }
	*[ class^='btn-' ][ class*='-blue+'   ]:hover { background:#6fb3e0; }
	*[ class^='btn-' ][ class*='-green'   ]:hover { background:#479628; }
	*[ class^='btn-' ][ class*='-green+'  ]:hover { background:#73b756; }
	*[ class^='btn-' ][ class*='-orange'  ]:hover { background:#e54800; }
	*[ class^='btn-' ][ class*='-orange+' ]:hover { background:#ff7530; }
	*[ class^='btn-' ][ class*='-gray'    ]:hover { background:#cccccc; color:#333; }
	*[ class^='btn-' ][ class*='-gray+'   ]:hover { background:#e4e4e4; color:#666; }

	/** ホバー（線あり） ********/
	*[ class^='btn-' ][ class*='-red'     ][ class*='-l' ]:hover { background:#bf0f0f; border-color:#bf0f0f; color:white; }
	*[ class^='btn-' ][ class*='-red+'    ][ class*='-l' ]:hover { background:#ed2d2d; border-color:#ed2d2d; color:white; }
	*[ class^='btn-' ][ class*='-blue'    ][ class*='-l' ]:hover { background:#2583d1; border-color:#2583d1; color:white; }
	*[ class^='btn-' ][ class*='-blue+'   ][ class*='-l' ]:hover { background:#6fb3e0; border-color:#6fb3e0; color:white; }
	*[ class^='btn-' ][ class*='-green'   ][ class*='-l' ]:hover { background:#479628; border-color:#479628; color:white; }
	*[ class^='btn-' ][ class*='-green+'  ][ class*='-l' ]:hover { background:#73b756; border-color:#73b756; color:white; }
	*[ class^='btn-' ][ class*='-orange'  ][ class*='-l' ]:hover { background:#ff7530; border-color:#ff7530; color:white; }
	*[ class^='btn-' ][ class*='-orange+' ][ class*='-l' ]:hover { background:#ff7530; border-color:#ff7530; color:white; }
	*[ class^='btn-' ][ class*='-gray'    ][ class*='-l' ]:hover { background:#aaaaaa; border-color:#aaaaaa; color:white; }
	*[ class^='btn-' ][ class*='-gray+'   ][ class*='-l' ]:hover { background:#cccccc; border-color:#cccccc; color:white; }

	/** アクティブ **************/
	button[ name='@btn' ]:focus, *[ class^='btn-' ]:focus { border:0px; }

	/** 挙動 ********************/
	button[ name='@btn' ], *[ class^='btn-' ]:hover { cursor:pointer; }

	/** 固定ボタン **************/
	button[ name='@btn' ][ value='login' ],       button[ name='@btn' ][ value='search' ]       { background:#6fb3e0; border-radius:8px; color:white; }
	button[ name='@btn' ][ value='login' ]:hover, button[ name='@btn' ][ value='search' ]:hover { background:#2583d1; }

	button[ name='@btn' ][ value='insert' ],
	button[ name='@btn' ][ value='bulk_insert' ]  { background:#73b756; border:1px solid #73b756; border-radius:8px; color:white; }
	button[ name='@btn' ][ value='insert' ]:hover,
	button[ name='@btn' ][ value='bulk_insert' ]:hover { background:#479628; border-color:#479628; }

	button[ name='@btn' ][ value='update' ],
	button[ name='@btn' ][ value='bulk_update' ] { background:#6fb3e0; border:1px solid #6fb3e0; border-radius:8px; color:white; }
	button[ name='@btn' ][ value='update' ]:hover,
	button[ name='@btn' ][ value='bulk_update' ]:hover { background:#2583d1; border-color:#2583d1; color:white; }

	button[ name='@btn' ][ value='delete' ],
	button[ name='@btn' ][ value='bulk_delete' ] { background:#ffffff; border:1px solid #cccccc; border-radius:8px; }
	button[ name='@btn' ][ value='delete' ]:hover,
	button[ name='@btn' ][ value='bulk_delete' ]:hover { background:#CC0000; border-color:#cc0000; color:white; }

	button[ name='@btn' ][ value='copy'   ]       { background:#ffffff; border:1px solid #cccccc; border-radius:8px; }
	button[ name='@btn' ][ value='copy'   ]:hover { background:#8ebc05; border-color:#719603; color:white; }

	button[ name='@btn' ][ value='return' ]       { background:#ffffff; border:1px solid #cccccc; border-radius:8px; }
	button[ name='@btn' ][ value='return' ]:hover { background:#aaaaaa; border-color:#aaaaaa; color:white; }

	button[ name='@btn' ][ value='confirm' ]       { background:#73b756; border:1px solid #73b756; border-radius:8px; color:white; }
	button[ name='@btn' ][ value='confirm' ]:hover { background:#479628; border-color:#479628 }

	button[ name='@btn' ][ value='cancel' ]       { background:#ffffff; border:1px solid #cccccc; border-radius:8px; }
	button[ name='@btn' ][ value='cancel' ]:hover { background:#aaaaaa; border-color:#aaaaaa; color:white; }

	button[ name='@btn' ][ value='csv_import' ]       { background:#73b756; border:1px solid #73b756; border-radius:8px; color:white; padding:5px 15px;  font-size:1rem; }
	button[ name='@btn' ][ value='csv_import' ]:hover { background:#479628; border-color:#479628; }

	button[ name='@btn' ][ value='debug_start' ]       { background:#ffffff; border:1px solid #ffa50a; border-radius:8px; color:#ffa50a; padding:5px 15px;  font-size:1rem; }
	button[ name='@btn' ][ value='debug_start' ]:hover { background:#ffa50a; border-color:#ffa50a; color:white; }

	button[ name='@btn' ][ value='debug_end' ]       { background:#ffffff; border:1px solid #cccccc; border-radius:8px; color:#666; padding:5px 15px;  font-size:1rem; }
	button[ name='@btn' ][ value='debug_end' ]:hover { background:#aaaaaa; border-color:#aaaaaa; color:white; }

	button[ name='@btn' ][ value='gitweb' ]       { background:#6fb3e0; border:1px solid #6fb3e0; border-radius:8px; color:white; padding:5px 15px;  font-size:1rem; }
	button[ name='@btn' ][ value='gitweb' ]:hover { background:#2583d1; border-color:#2583d1; color:white; }

	.list_edit table button[ name='@btn' ]
	{
		padding:4px 10px;
		border-radius:5px;
		border:2px solid;
		background:none;
		background:white;
	}

	.list_edit table button[ name='@btn' ][ value='insert' ] { color:#73b756; }
	.list_edit table button[ name='@btn' ][ value='insert' ]:hover { background:#479628; border-color:#479628; color:white; }

	.list_edit table button[ name='@btn' ][ value='update' ] { color:#6fb3e0; }
	.list_edit table button[ name='@btn' ][ value='update' ]:hover { background:#2583d1; border-color:#2583d1; color:white; }

	.list_edit table button[ name='@btn' ][ value='delete' ] { color:#cccccc; }
	.list_edit table button[ name='@btn' ][ value='delete' ]:hover { background:#cc0000; border-color:#cc0000; color:white; }

	.list_edit table button[ name='@btn' ][ value='copy' ] { color:#cccccc; }
	.list_edit table button[ name='@btn' ][ value='copy' ]:hover { background:#8ebc05; border-color:#8ebc05; color:white; }

	.list_edit table button[ name='@btn' ][ value='return' ] { color:#cccccc; }
	.list_edit table button[ name='@btn' ][ value='return' ]:hover { background:#aaaaaa; border-color:#aaaaaa; color:white; }

	.list_edit table button[ name='@btn' ][ value='confirm' ] { color:#73b756; }
	.list_edit table button[ name='@btn' ][ value='confirm' ]:hover { background:#479628; border-color:#479628; color:white; }

	.list_edit table button[ name='@btn' ][ value='cancel' ] { color:#cccccc; }
	.list_edit table button[ name='@btn' ][ value='cancel' ]:hover { background:#aaaaaa; border-color:#aaaaaa; color:white; }

	.list_edit table button[ name='@btn' ][ value='csv_import' ] { color:#73b756; }
	.list_edit table button[ name='@btn' ][ value='csv_import' ]:hover { background:#479628; border-color:#479628; color:white; }

	/****************************
	 * トグル
	 ****************************/
	*[ data-toggle ] { cursor:pointer; }

	/****************************
	 * アイコン
	 ****************************/
	button.icon::before
	{
		font-family:"Font Awesome 5 Free";
		padding-right:10px;
		font-weight:900;
	}

	button.icon.insert::before, button.icon.update::before, button.icon.confirm::before { content:'\f044'; }
	button.icon.delete::before { content:'\f2ed'; }
	button.icon.copy::before   { content:'\f0c5'; }
	button.icon.return::before { content:'\f3e5'; }
	button.icon.cancel::before { content:'\f00d'; }

	/****************************
	 * ホバーアイコン
	 ****************************/
	a[href$='mp4']
	{
		cursor:url(../images/icon/film.png) auto !important;
	}

	a[href$='jpg']
	{
		cursor:url(../images/icon/image.png) auto !important;
	}

	/****************************
	 * バルーン
	 ****************************/
	/** 基本 **/
	*[ class^='balloon' ]
	{
		margin-top:15px;
		padding:5px 10px;
		border-radius:5px;
		background:#cc0000;
		color:white;
		position:relative;
		display:inline-block;
	}

	*[ class^='balloon' ]:before
	{
		content:'';
		width:0; height:0;
		border-right: 10px solid transparent;
		border-bottom:10px solid #cc0000;
		border-left:  10px solid transparent;
		position:absolute;
		top:-10px; left:20px;
	}

	/****************************
	 * リスト情報ブロック
	 ****************************/
	pager
	{
		display:flex;
	}

	pager number
	{
		padding:0 20px;
		color:gray;
	}

	pager update
	{
		margin-left:auto;
		margin-right:0px;
		color:gray;
	}

	.page_button
	{
		margin-left:auto;
		display:flex;
	}
	
	.page_button li a
	{
		width:100%;
		margin-right:5px;
		padding:0px 4px;
		color:#6490cd;
		text-align:center;
		text-decoration:none;
		display:block;
	}

	.page_button li a:hover
	{
		background:#EEE;
		color:#6490cd;
		text-decoration:none;
	}

	.page_button li.active
	{
		height:80%;
		margin-right:5px;
		padding:0px 5px;
		background:#CCC;
		color:white;
		font-weight:bold;
		text-decoration:none;
		display:block;
	}