:root {
    /* 画面色を変えるにはここの値を変更する */
    --base-color: #68BF39;      /* 基本色 */
    --light-color: #8EBF73;     /* 薄い色 */
    --deep-color: #43BF00;      /* 濃い色 */

    /* ログイン、申し込み画面の背景画像の透過度を変えるにはここの値を変更する */
    --opacity: 0.6;             /* 0～1の間の値を指定 */
}

body
{
	color:#222;
}

/* ---------------------------------------- */
/* ヘッダー 								*/
/* ---------------------------------------- */
.expanded.top-bar
{
	background-color:#fff;
	border-bottom-width:0.4rem;
	border-bottom-style:solid;
	border-bottom-color:#999;
}

/* タイトルエリア */
.expanded.top-bar .title-area
{
	background-color:#fff;
}

/* メニューエリア */
.top-bar-section ul li
{
	background-color:#fff;
	color:#222;
}
.top-bar-section #menu>li>a
{
	background-color:#fff;
	color:#222;
}

.top-bar-section #menu>li>a:hover
{
	background-color:#fff;
	color:var(--base-color, #E56666);
}
.top-bar-section #menu>li>#menu_home
{
	background-image:url(../img/ico/blk/menu_home.png);
}
.top-bar-section #menu>li>#menu_user
{
	background-image:url(../img/ico/blk/menu_user.png);
}
.top-bar-section #menu>li>#menu_manual
{
	background-image:url(../img/ico/blk/menu_manual.png);
}
.top-bar-section #menu>li>#menu_board
{
	background-image:url(../img/ico/blk/menu_board.png);
}
.top-bar-section #menu>li>#menu_kintai
{
	background-image:url(../img/ico/blk/menu_kintai.png);
}
.top-bar-section #menu>li>#menu_else
{
	background-image:url(../img/ico/blk/grid.png);
}
.top-bar-section #menu>li>#menu_setting
{
	background-image:url(../img/ico/blk/android-settings.png);
}

.top-bar-section #menu>li>#menu_home:hover
{
	background-image:url(../img/ico/red/menu_home.png);
}
.top-bar-section #menu>li>#menu_user:hover
{
	background-image:url(../img/ico/red/menu_user.png);
}
.top-bar-section #menu>li>#menu_manual:hover
{
	background-image:url(../img/ico/red/menu_manual.png);
}
.top-bar-section #menu>li>#menu_board:hover
{
	background-image:url(../img/ico/red/menu_board.png);
}
.top-bar-section #menu>li>#menu_kintai:hover
{
	background-image:url(../img/ico/red/menu_kintai.png);
}
.top-bar-section #menu>li>#menu_else:hover
{
	background-image:url(../img/ico/red/grid.png);
}
.top-bar-section #menu>li>#menu_setting:hover
{
	background-image:url(../img/ico/red/android-settings.png);
}

ul.child{
	background-color:#fff;
	border:2px solid #999;
}
ul.child li{
	background-color:#fff;
}
#menu ul.child li a{
    color: #333;
	background-color:#fff;
}
#menu ul.child li a:hover{
    color: var(--base-color, #E56666);
    background-color: #fff;
}
#menu ul.child li a.user_index{
	background-image:url(../img/ico/blk/menu_user.png);
}
#menu ul.child li a.user_index:hover{
	background-image:url(../img/ico/red/menu_user.png);
}
#menu ul.child li a.user_add{
	background-image:url(../img/ico/blk/act_add_user.png);
}
#menu ul.child li a.user_add:hover{
	background-image:url(../img/ico/red/act_add_user.png);
}
#menu ul.child li a.user_import{
	background-image:url(../img/ico/blk/user_imp.png);
}
#menu ul.child li a.user_import:hover{
	background-image:url(../img/ico/red/user_imp.png);
}
#menu ul.child li a.user_export{
	background-image:url(../img/ico/blk/user_exp.png);
}
#menu ul.child li a.user_export:hover{
	background-image:url(../img/ico/red/user_exp.png);
}
#menu ul.child li a.manual_index{
	background-image:url(../img/ico/blk/menu_manual.png);
}
#menu ul.child li a.manual_index:hover{
	background-image:url(../img/ico/red/menu_manual.png);
}
#menu ul.child li a.manual_import{
	background-image:url(../img/ico/blk/menu_manual.png);
}
#menu ul.child li a.manual_import:hover{
	background-image:url(../img/ico/red/menu_manual.png);
}
#menu ul.child li a.manual_export{
	background-image:url(../img/ico/blk/menu_manual.png);
}
#menu ul.child li a.manual_export:hover{
	background-image:url(../img/ico/red/menu_manual.png);
}
#menu ul.child li a.info_index{
	background-image:url(../img/ico/blk/information.png);
}
#menu ul.child li a.info_index:hover{
	background-image:url(../img/ico/red/information.png);
}
#menu ul.child li a.info_add{
	background-image:url(../img/ico/blk/information_add.png);
}
#menu ul.child li a.info_add:hover{
	background-image:url(../img/ico/red/information_add.png);
}
#menu ul.child li a.mail_index{
	background-image:url(../img/ico/blk/mail.png);
}
#menu ul.child li a.mail_index:hover{
	background-image:url(../img/ico/red/mail.png);
}
#menu ul.child li a.mail_add{
	background-image:url(../img/ico/blk/mail.png);
}
#menu ul.child li a.mail_add:hover{
	background-image:url(../img/ico/red/mail.png);
}
#menu ul.child li a.mail_template_index{
	background-image:url(../img/ico/blk/mail.png);
}
#menu ul.child li a.mail_template_index:hover{
	background-image:url(../img/ico/red/mail.png);
}
#menu ul.child li a.affi_index{
	background-image:url(../img/ico/blk/affilation.png);
}
#menu ul.child li a.affi_index:hover{
	background-image:url(../img/ico/red/affilation.png);
}
#menu ul.child li a.user_view{
	background-image:url(../img/ico/blk/profile.png);
}
#menu ul.child li a.user_view:hover{
	background-image:url(../img/ico/red/profile.png);
}
#menu ul.child li a.user_edit_profile_photo{
	background-image:url(../img/ico/blk/profile.png);
}
#menu ul.child li a.user_edit_profile_photo:hover{
	background-image:url(../img/ico/red/profile.png);
}
#menu ul.child li a.user_edit_mail{
	background-image:url(../img/ico/blk/mail.png);
}
#menu ul.child li a.user_edit_mail:hover{
	background-image:url(../img/ico/red/mail.png);
}
#menu ul.child li a.user_edit_password{
	background-image:url(../img/ico/blk/key.png);
}
#menu ul.child li a.user_edit_password:hover{
	background-image:url(../img/ico/red/key.png);
}
#menu ul.child li a.site_setting_edit{
	background-image:url(../img/ico/blk/compose.png);
}
#menu ul.child li a.site_setting_edit:hover{
	background-image:url(../img/ico/red/compose.png);
}
#menu ul.child li a.join_setting_index{
	background-image:url(../img/ico/blk/compose.png);
}
#menu ul.child li a.join_setting_index:hover{
	background-image:url(../img/ico/red/compose.png);
}
#menu ul.child li a.mail_setting_edit{
	background-image:url(../img/ico/blk/mail.png);
}
#menu ul.child li a.mail_setting_edit:hover{
	background-image:url(../img/ico/red/mail.png);
}
#menu ul.child li a.maintenance_setting_edit{
	background-image:url(../img/ico/blk/act_edit.png);
}
#menu ul.child li a.maintenance_setting_edit:hover{
	background-image:url(../img/ico/red/act_edit.png);
}
#menu ul.child li a.user_logout{
	background-image:url(../img/ico/blk/log-out.png);
}
#menu ul.child li a.user_logout:hover{
	background-image:url(../img/ico/red/log-out.png);
}

/* ---------------------------------------- */
/* コンテンツ								*/
/* ---------------------------------------- */
/* サイドバー */
#actions-sidebar {
	background-color:#f7f7f7;
}
.side-nav li.heading
{
	background-color:#333;
	color:#fff;
}
.side-nav li a:not(.button)
{
	color:var(--base-color, #E56666);
}
.side-nav li a:not(.button):hover
{
	color:var(--deep-color, #DF4242);
}
/* コンテンツ */
fieldset legend
{
	color:#555;
	border-bottom-color:var(--base-color, #E56666);
	text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff;
}
.actions a
{
    color: #FFF;
    background-color: var(--base-color, #E56666);
	border-left-color: var(--light-color, #F0A6A6);
	border-top-color: var(--light-color, #F0A6A6);
	border-right-color: var(--deep-color, #DF4242);
	border-bottom-color: var(--deep-color, #DF4242);
}
.actions a:hover
{
    background-color: var(--deep-color, #DF4242);
}
/* ページネート */
ul.pagination li a
{
	color:#555;
}
ul.pagination li.active a
{
    background-color: var(--base-color, #E56666);
	color:#fff;
}
ul.pagination p
{
	color:#555;
}
/* ---------------------------------------- */
/* 汎用										*/
/* ---------------------------------------- */
/* テーブル */
table tr th
{
/*	background-color:var(--base-color, #E56666);*/
	background-color:#555;
	color:#fff;
}
table thead tr th,
table thead tr td,
.vertical-table th
{
	color:#fff;
}
table tr th a
{
	color:#fff;
}
table tr th a:hover
{
	color:#fff;
}
table tr th,
table tr td
{
	border-color: #ddd;
}
/*
th {
	background-color:#ffb0e0;
	background:-webkit-linear-gradient(top,#ffb0e0,#fEf);
	background:-linear-gradient(to bottom,#ffb0e0,#fEf);
}
*/
/* フォーム */
button,.button{
    background-color: var(--base-color, #E56666);
    color: #FFF;
}
button:hover,button:focus,.button:hover,.button:focus{
	background-color:var(--deep-color, #DF4242) !important;
	color:#fff !important;
}
a[disabled] {
	color:#999;
}

/* モーダルポップアップの色 */
a.modal-close:hover {
    color: var(--base-color, #E56666);
}

.modal-content .modal-left,
.modal-content .modal-right {
    background-color: var(--base-color, #E56666);
}

/* 入会設定のサイドメニュー色 */
.joinSettings #side-menu li a:hover {
    background-color: var(--deep-color, #DF4242);
    color:#fff;
}

.joinSettings .selected {
    background-color: var(--base-color, #E56666);
    color:#fff !important;
}

@media screen and (min-width: 721px) {
    .bg-image {
        background-image: url(../img/bg-image/bg-image.jpg);
        background-size: cover;
        height: 97%;
    }

    .bg-mask {
        background: rgba(255, 255, 255, var(--opacity, 0.5));
        padding: 1rem;
        height: 100%;
    }
}