@charset "utf-8";

/**
 * tabasco カスタマイズ CSS
 */

/* ユーティリティ */
.u-plm{
    padding-left: 10px;
}
.u-t-center{
    text-align: center;
}
.u-mtl4{
  margin-top: 30px;
}

/* グロナビ(local) */
.navbar-inverse-local {
    background-color: #bcbcb8;
    border-color: #8a8a8a;
}
.navbar-inverse-local .navbar-brand {
    color: #cc4933;
    font-size: 22px;
}
.navbar-inverse-local .navbar-nav > li > a {
    color: #666;
}
.navbar-inverse-local .navbar-nav > li > a:hover,
.navbar-inverse-local .navbar-nav > li > a:focus,
.navbar-inverse-local .navbar-nav > .active > a,
.navbar-inverse-local .navbar-nav > .active > a:hover {
    background-color: #d4d4d4;
}
.navbar-inverse-local .nav .open > a,
.navbar-inverse-local .nav .open > a:hover,
.navbar-inverse-local .nav .open > a:focus {
    background-color: #d4d4d4;
}

/* グロナビ(develop) */
.navbar-inverse-develop {
    background-color: #0091C5;
    border-color: #56658a;
}
.navbar-inverse-develop .navbar-brand {
    color: #f4f2dc;
    font-size: 22px;
}
.navbar-inverse-develop .navbar-nav > li > a {
    color: #d9d9d9;
}
.navbar-inverse-develop .navbar-nav > li > a:hover,
.navbar-inverse-develop .navbar-nav > li > a:focus,
.navbar-inverse-develop .navbar-nav > .active > a,
.navbar-inverse-develop .navbar-nav > .active > a:hover {
    background-color: #0080aa;
}
.navbar-inverse-develop .nav .open > a,
.navbar-inverse-develop .nav .open > a:hover,
.navbar-inverse-develop .nav .open > a:focus {
    background-color: #0080aa;
}

/* グロナビ(staging) */
.navbar-inverse-staging {
    background-color: #2f7a79;
    border-color: #3d574b;
}
.navbar-inverse-staging .navbar-brand {
    color: #f4f2dc;
    font-size: 22px;
}
.navbar-inverse-staging .navbar-nav > li > a {
    color: #d9d9d9;
}
.navbar-inverse-staging .navbar-nav > li > a:hover,
.navbar-inverse-staging .navbar-nav > li > a:focus,
.navbar-inverse-staging .navbar-nav > li > a:active,
.navbar-inverse-staging .navbar-nav > .active > a,
.navbar-inverse-staging .navbar-nav > .active > a:hover  {
    background-color: #246665;
    border-color: #246665;
}
.navbar-inverse-staging .nav .open > a,
.navbar-inverse-staging .nav .open > a:hover,
.navbar-inverse-staging .nav .open > a:focus {
    background-color: #246665;
}

/* グロナビ(production) */
.navbar-inverse-production {
    background-color: #cc4933;
    border-color: #a12c1a;
}
.navbar-inverse-production .navbar-brand {
    color: #f4f2dc;
    font-size: 22px;
}
.navbar-inverse-production .navbar-nav > li > a {
    color: #d9d9d9;
}
.navbar-inverse-production .navbar-nav > li > a:hover,
.navbar-inverse-production .navbar-nav > li > a:focus,
.navbar-inverse-production .navbar-nav > .active > a,
.navbar-inverse-production .navbar-nav > .active > a:hover {
    background-color: #c92c14;
}
.navbar-inverse-production .nav .open > a,
.navbar-inverse-production .nav .open > a:hover,
.navbar-inverse-production .nav .open > a:focus {
    background-color: #c92c14;
}

/* ホーム */
.dev-info {
    margin: 20px 0px;
    padding: 10px 30px 30px 30px;
    background-color: #feffd6;
    font-size: 18px;
}
.dev-info .comment {
    font-size: 14px;
    color: #F00;
}

/* レコードの色 */
tr.pre_open, .table-hover tbody tr.pre_open:hover>td, .table-hover tbody tr.pre_open:hover>th {
    background-color:#B2E5FF;
}
tr.open, .table-hover tbody tr.open:hover>td, .table-hover tbody tr.open:hover>th {
    background-color:#FFF;
}
tr.open_period, .table-hover tbody tr.open_period:hover>td, .table-hover tbody tr.open_period:hover>th {
    background-color:#CCC;
    color:#999;
}
tr.closed, .table-hover tbody tr.open:hover>td, .table-hover tbody tr.closed:hover>th {
    background-color:#FFF7D1;
}
tr.deleted, .table-hover tbody tr.open:hover>td, .table-hover tbody tr.deleted:hover>th {
    background-color:#585858;
}
tr.caution, .table-hover tbody tr.open:hover>td, .table-hover tbody tr.caution:hover>th {
    background-color:#ffadad;
}
/* セルの色 */
td.notice {
    background-color:#fffbb0;
}
/* メッセージ表示 */
.tabasco_message {
    background:#48D1CC;        /* 背景色：任意の色 */
    color:#000080;             /* 文字色：任意の色 */
    font-size:15px;            /* フォントの大きさ：任意の数値 */
    padding:10px;              /* 内側の余白 */
    margin:10px 0;             /* 外側の余白 */
    text-align:center;         /* 文字揃え */
    font-weight:bold;          /* 太文字にする */
    border:2px #009999 solid; /* 枠の太さ・カラー・種類 */
}
/* エラーメッセージ表示 */
.tabasco_error_message {
    background:#FFFF00;        /* 背景色：任意の色 */
    color:#FF0000;             /* 文字色：任意の色 */
    font-size:15px;            /* フォントの大きさ：任意の数値 */
    padding:10px;              /* 内側の余白 */
    margin:10px 0;             /* 外側の余白 */
    text-align:center;         /* 文字揃え */
    font-weight:bold;          /* 太文字にする */
    border:2px #FF0000 dashed; /* 枠の太さ・カラー・種類 */
}

/* 人気ワード登録画面のボタン */
.btn-list-4{
    display: -webkit-box;
    display: box;
    margin: 20px 40px;
    -webkit-box-pack:center;
    box-pack:center;
}
@media (min-width: 768px){
    .btn-list-4{
        margin-left:60px;
        margin-right:60px;
    }
}
@media (min-width: 992px){
    .btn-list-4{
        margin-left:170px;
        margin-right:170px;
    }
}
@media (min-width: 1200px){
    .btn-list-4{
        margin-left:270px;
        margin-right:270px;
    }
}
.btn-list-4__list-item{
    width: 25%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.btn-list-4__list-item:not(:last-child){
    padding-right: 10px;
}
.btn-list-4__list-item .btn{
    display: block;
    width: 100%;
    white-space: normal;
}
.modalViewImg {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}
.modalViewImg.modalActive {
    display: block;
}
.modalViewImg .modalContent {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
.modalViewImg .modalBody {
    padding: 16px;
}
.modalViewImg .viewImg img {
    max-width: 100%;
}
.u-t-right {
    text-align: right;
}
.u-m-b-15 {
    margin-bottom: 15px;
}
.red_tx {
    margin-bottom: 5px;
    color: #D14;
}
.red {
    color: #D14;
}
.btn-color-green {
    background-color: #5cb85b;
    color: white !important;
}