@charset "UTF-8";
/* ***************************************************************
*
* 全体
*
*
* *************************************************************** */
/* フォントサイズの設定 */
html {
font-size: 14px;
}
/* フォント */
body, input, button, select, textarea {
font-family: 'Meiryo UI', 'メイリオ', Meiryo, sans-serif;
font-size: 1rem;
}
/* 閉じるマーク「×」 だけフォントを Bootstrap の設定に戻し、サイズを大きく */
.close {
/* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
font-size: 2rem;
}
/* テキストも disabled クラスをつけたらカーソルを不許可のマークにする */
span.disabled {
cursor: not-allowed;
}
a:not([href]) {
cursor: pointer;
}
body {
word-wrap: break-word;
}
/* ***************************************************************
*
* 全体のレイアウト
*
*
* *************************************************************** */
/* 未使用予定 */
.pageCaption {
margin:10px 20px 0px 20px;
padding:5px 0px 0px 8px;
border-left:4px solid #5A4398;
}
/* 未使用予定 */
.pageCaptionEx {
padding:5px 0px 0px 8px;
border-left:4px solid #5A4398;
}
/* ***************************************************************
*
* レイアウト
*
*
* *************************************************************** */
body, html {
height: 100%;
}
/* IE11 Sticky footer 対応 */
body {
display: flex;
flex-direction: column!important;
}
body>section {
max-width: 1260px;
min-height: 100%;
display: -ms-flexbox!important;
display: -webkit-box!important;
display: flex!important;
-webkit-box-orient: vertical!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
}
body>section>header {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.header-logo {
height: 50px;
}
/*
body>section>main > div > .card:first-child:last-child {
margin-top: 5rem;
}
*/
body>section>main {
flex: 1 0 auto;
}
#container {
min-width: 980px;
}
body>section>footer {
margin-top: 2rem;
padding-top: 0.5rem;
padding-bottom: 1rem;
text-align: center;
border: 0;
border-top: 1px solid #e5e5e5;
color: #333333;
font-size: 0.9rem;
}
/* ***************************************************************
*
* 背景色
*
*
* *************************************************************** */
/*
.navbar .navbar-nav > li > a:hover {
background-color: #e6e6e6;
}
.navbar .navbar-nav .open .dropdown-menu > .active > a {
color: #333 !important;
background-color: #e7e7e7 !important;
}
*/
body {
background-color: #f8f9fa;
}
.modal-content {
background-color: #f8f9fa;
}
/* ***************************************************************
*
* メニュー
*
*
* *************************************************************** */
.bg-menu {
background-color: #e9ecef;
}
.navbar {
border-radius: 4px;
margin-bottom: 20px;
border: solid 1px #ced4da;
}
#menu {
padding-top: 0px;
padding-bottom: 0px;
}
#menu .nav-item {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar .dropdown:hover,
.navbar .dropdown.show {
color: #343a40;
background-color: #dee2e6;
}
.navbar .dropdown.active,
.navbar .dropdown-item.active {
color: #212529;
background-color: #ced4da;
}
.dropdown-item.active,
.dropdown-item:active {
color: #212529;
text-decoration: none;
background-color: #ced4da;
}
/* ***************************************************************
*
* ボタン
*
*
* *************************************************************** */
.btn-secondary {
color: #343a40 !important;
background-color: #ced4da !important;
border-color: #adb5bd !important;
}
.btn-group-toggle .btn-secondary {
color: #adb5bd !important;
background-color: #f8f9fa !important;
border-color: #adb5bd !important;
}
.btn-group-toggle .btn-secondary.active {
color: #343a40 !important;
background-color: #ced4da !important;
border-color: #adb5bd !important;
}
.btn-secondary.focus,
.btn-secondary:focus {
box-shadow: 0 0 0 0.2rem rgba(173, 181, 189,.5);
}
.btn-secondary.hover:not([disabled]),
.btn-secondary:hover:not([disabled]) {
color: #343a40 !important;
background-color: #adb5bd !important;
border-color: #adb5bd !important;
}
.btn-fixed {
min-width: 100px;
}
.btn-transparent {
border: 0;
background-color: transparent;
}
.btn.text-right {
text-align: right;
}
.btn.text-left {
text-align: left;
}
.btn.btn-link.disabled {
color: #777;
opacity: 1;
}
.btn.btn-link.disabled:active,
.btn.btn-link.disabled:focus,
.btn.btn-link.disabled:hover {
text-decoration: none;
}
.pager {
border-radius: 1.5rem;
transform: rotate(0.00001deg);
}
/* ***************************************************************
*
* ログイン画面
*
* @todo どこかのタイミングで見直し
*
* *************************************************************** */
/* コンテンツエリアの設定(ログイン画面) */
.contents-area-login {
padding: 10px 10px 10px 10px;
background-color: #FAFAFA;
background-image: -moz-linear-gradient(top, white, #F2F2F2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#F2F2F2) );
background-image: -webkit-linear-gradient(top, white, #F2F2F2);
background-image: -o-linear-gradient(top, white, #F2F2F2);
background-image: linear-gradient(to bottom, white, #F2F2F2);
background-repeat: repeat-x;
border: 1px solid #D4D4D4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
margin: 15px auto 15px auto;
}
/* ***************************************************************
*
* ダッシュボード
*
*
* *************************************************************** */
/* ダッシュボードのセクション */
section.dashboard-section {
margin-top: 20px;
margin-bottom: 50px;
}
.dashboard-section h5.section-title {
font-size: 1.25rem;
margin-top: 0px;
margin-bottom: 0px;
}
.dashboard-section h6.section-title {
font-size: 1rem;
font-weight: bold;
margin-top: 10px;
margin-bottom: 3px;
}
.dashboard-section .list-group-header {
margin-bottom: 10px;
}
/* ***************************************************************
*
* ツールチップ
*
*
* *************************************************************** */
.help {
cursor: pointer;
line-height: 1.5;
}
/*
ツールチップが他のオブジェクトで隠れないよう
十分なz-indexを設定しておく。
*/
.tooltip {
z-index: 8000;
}
/*
ツールチップの幅は、デフォルト(200px)だと狭すぎるので広げる。
また、右寄せにする。
*/
.tooltip-inner {
min-width: 200px;
}
.tooltip-inner > p:last-child {
margin-bottom: 0;
}
.tooltip-inner,
.tooltip-inner * {
max-width: 300px;
text-align: left;
}
/*
ツールチップの内のコードは文字色、背景色ともに親要素と同様とする。
*/
.tooltip-inner pre {
color: inherit;
background-color: transparent;
}
/* ***************************************************************
*
* フォーム・入力コントロール関連
*
*
* *************************************************************** */
.mandatory:after{
content:"*";
color:#FF0000;
}
.mandatory-blue:after{
content:"*";
color:#0000ff;
}
table {
table-layout: fixed;
}
.table-form > tbody + tbody {
border-top: none;
}
.table-bordered thead th,
.table-bordered thead td {
border-bottom-width: 1px;
}
textarea.description-textarea {
height: 70px;
}
textarea.textarea-attribute {
height: 100px;
}
.item-body.list-unstyled {
margin-bottom: 0px;
}
/* ファイルアップロード用のボタンの設定 */
.btn-file {
position: relative;
overflow: hidden;
vertical-align: middle;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.btn-file > input {
position: absolute;
top: 0;
right: 0;
margin: 0;
font-size: 1.75rem;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-650px, 0) scale(4);
direction: ltr;
}
/* ラベル内チェックボックスのマージンを狭くする場合 */
label.checkbox-condensed {
margin-top: 0px;
margin-bottom: 0px;
}
/* ***************************************************************
*
* 黒いチェックボックス
*
*
* *************************************************************** */
.form-check-label-black input[type="checkbox"] ~ span {
position: relative;
}
.form-check-label-black input[type="checkbox"] ~ span::before {
content: '';
display: block;
border: 1px solid #777;
border-radius: 2px;
height: 13px;
width: 13px;
position: absolute;
top: 3px;
left: -17px;
}
.form-check-label-black:hover input[type="checkbox"] ~ span::before {
border-color: #444;
}
.form-check-label-black input[type="checkbox"] ~ span::after {
content: '';
display: none;
border: 2px solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
height: 9px;
width: 5px;
position: absolute;
top: 4px;
left: -13px;
}
.form-check-label-black input[type="checkbox"] {
display: none;
}
.form-check-label-black input[type="checkbox"]:checked ~ span::before {
background-color: #212529;
border-color: #212529;
}
.form-check-label-black input[type="checkbox"]:checked ~ span::after {
display: block;
}
/* ***************************************************************
*
* タイポグラフィ
*
*
* *************************************************************** */
/* 文章の省略 */
.ellipsis {
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*
名称や備考を表示するのに使用
連続する空白はそのまま残されます。行の折り返しは、改行文字や
要素のあるときか、行ボックスを埋めるのに必要なときに行います。
*/
.pre-wrap {
white-space:pre-wrap;
}
.pre {
white-space:pre;
}
/*英単語の途中でも改行を許可する指定*/
.break-word{
word-wrap: break-word;
}
/* 見出し */
h1.page-caption,
h2.page-caption,
h3.page-caption {
border-left-style: solid;
border-left-width: 4px;
border-left-color: #5A4398;
padding-left: 8px;
padding-top: 5px;
margin-top: 0px;
font-weight: bold;
}
h4.page-caption,
h5.page-caption {
border-left-style: solid;
border-left-width: 4px;
border-left-color: #5A4398;
padding-left: 8px;
padding-top: 3px;
margin-top: 0px;
font-weight: bold;
}
h3.section-title,
h4.section-title,
h5.section-title {
font-weight: bold;
}
h5.section-title:not(:first-child) {
margin-top: 30px;
}
.dl-horizontal2 dt {
float: left;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal2 dd {
margin-left: 180px;
}
/* ***************************************************************
*
* テーブルの枠を使ったフォーム
*
*
* *************************************************************** */
.table-form > tbody > tr > td {
padding-top: 4px;
padding-bottom: 4px;
padding-right: 6px;
padding-left: 6px;
}
th {
background-color:#dee2e6;
}
.table thead th,
.table-bordered td,
.table-bordered th {
border: 1px solid #ced4da;
}
.table-form.inactive th,
.table-form > tbody > tr.inactive th {
background-color:#dee2e6;
}
.table-form.inactive td,
.table-form > tbody > tr.inactive td {
background-color:#e9ecef;
}
.ta
.table-form.inactive th,
.table-form.inactive td,
.table-form > tbody > tr.inactive th,
.table-form > tbody > tr.inactive td {
opacity: 0.6;
}
thead th {
text-align: center;
}
/*セルのボーダーを消して見た目上結合させる指定。bootstrapの指定に勝てるようセレクタを多めに指定*/
table.table-bordered tbody tr .merge-up {
border-top:none;
}
/* チェックボックスの位置の調整 */
td .form-check:first-child {
margin-top: 6.25px;
}
td .form-check:last-child {
margin-bottom: 6.25px;
}
td .form-check > .form-check-input {
margin-left: -0.75rem;
}
td .form-check.form-check-inline .form-check-label .form-check-input {
vertical-align: -0.05rem;
margin-right: 0;
margin-left: 0;
}
/* ファイル選択 */
td input[type="file"] {
margin-top: 6px;
margin-bottom: 7px;
overflow: hidden;
}
td input.form-control-plaintext[type="file"] {
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
}
/* ie 11 */
@media all and (-ms-high-contrast:none) {
td input.form-control-plaintext[type="file"] {
padding-top: 0px;
padding-bottom: 0px;
}
}
/* ie edge */
@supports (-ms-ime-align:auto) {
td input.form-control-plaintext[type="file"] {
padding-top: 0px;
padding-bottom: 0px;
}
}
td .radio label .ui-spinner,
td .checkbox label .ui-spinner {
margin-top: -7px;
margin-bottom: -7px;
}
.input-group .form-control-plaintext + .input-group-btn > .btn:first-child {
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.input-group .form-control-plaintext + .input-group-append > *:first-child,
.input-group .form-check-inline + .input-group-append > *:first-child {
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.input-group>.form-control-plaintext {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}
.input-group-text {
display: block;
}
td > .form-control-plaintext:first-child:last-child a:first-child:last-child {
display: inline-block;
width: 100%;
}
.input-group-addon label {
margin-bottom: 0px;
}
/* コントロール自体をリンクにした場合、ブロック要素であることを明示 */
td .form-control-plaintext {
display: block;
}
/* 長い単語の場合、ボタンがはみ出さないようにする */
.input-group > .form-control-plaintext {
word-break: break-all;
margin-right: 8px;
}
/* .table-group 内のテーブルのはマージンを狭める */
.table-group > table:not(:last-child) {
margin-bottom: 4px;
}
/* 最後のテーブルはマージンを狭めない */
.table-group > *:last-child {
margin-bottom: 0px;
}
/* テーブルグループ自体のマージン */
.table-group {
margin-bottom: 20px;
}
td > .table-group {
margin-bottom: 0px;
}
/* テーブルの行を区切り文字として使う */
.table-line {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
/* 入れ子となったテーブル */
.table .table {
background-color: transparent;
}
.table .table:first-child {
margin-top: 4px;
}
.table .table:last-child {
margin-bottom: 4px;
}
/* 時刻コントロール */
.input-group-clock-sep {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.input-group-clock-sep:after {
content: ":"
}
.input-group-time {
min-width: 10rem;
}
/*
td > .form-control,
td > .form-control-plaintext,
td > .input-group {
margin-top: -4px;
margin-bottom: -4px;
}
*/
/* ***************************************************************
*
* ドロップダウン多層化
* Bootstrap v2 では存在していたドロップダウンの階層化が v3 では削除されていたため、再定義。
*
*
* *************************************************************** */
/* 上側を丸くする */
.navbar .navbar-nav .open .dropdown-menu {
border-width: 1px 1px 1px;
border-radius: 4px 4px 4px 4px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-toggle {
display: block;
width: 100%;
font-weight: 400;
color: #212529;
text-decoration: none;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
/* ***************************************************************
* テーブルの幅の指定(span1～span12)
* Twitter Bootstrapと同様にグリッドシステムを採用し、
* パーセントによる指定とする。
* ただし、テーブルは枠線の存在により誤差が生じるため
* 少なくとも一つの列にはspan1～span12を指定しないこと。
* 特に固定列であるチェックボックスの列が存在する場合は気を付けること。
* *************************************************************** */
col.colwidth1 {
width:8.3%;
}
col.colwidth1\.5 {
width:12.5%;
}
col.colwidth2 {
width:16.6%;
}
col.colwidth2\.5 {
width:20.8%;
}
col.colwidth3 {
width:24.9%;
}
col.colwidth3\.5 {
width:29%;
}
col.colwidth4 {
width:33.2%;
}
col.colwidth5 {
width:41.5%;
}
col.colwidth6 {
width:49.8%;
}
col.colwidth7 {
width:58.1%;
}
col.colwidth8 {
width:66.4%;
}
col.colwidth9 {
width:74.7%;
}
col.colwidth10 {
width:83.0%;
}
col.colwidth11 {
width:91.3%;
}
col.colwidth12 {
width:100%;
}
/* チェックボックスの列の幅は20pxに常に固定 */
.table > colgroup > col.colcheckbox {
width: 37px;
}
/* ***************************************************************
*
* リスト
*
*
* *************************************************************** */
.list-inline {
line-height: 1rem;
}
.list-inline:last-child {
margin-bottom: 0px;
}
/* カンマ区切りインラインリスト */
.list-inline-comma {
display: inline;
}
.list-inline-comma > li {
display: inline;
padding-right: 0px;
padding-left: 0px;
}
.list-inline-comma > li:first-child {
padding-left: 5px;
}
.list-inline-comma > li:after {
content: ", ";
}
.list-inline-comma > li:last-child:after {
content: "";
}
/* ハイフン区切りインラインリスト */
.list-dash {
margin-bottom: 0px;
}
.list-dash > li {
padding-right: 0px;
padding-left: 0px;
}
.list-dash > li:first-child {
padding-left: 5px;
}
.list-dash > li:after {
content: "-";
}
.list-dash > li:last-child:after {
content: "";
}
/* チェックボックス付きのリスト */
.list-unstyled > li > label.checkbox {
margin-left: 20px;
}
/* ***************************************************************
*
* リストグループ
*
*
* *************************************************************** */
/* リストグループヘッダ */
.list-group-header {
margin-bottom: 5px;
display: table;
box-sizing: border-box;
width: 100%;
}
.list-group-header form.form-inline {
display: inline-flex;
}
.list-group-header form.form-inline .form-group-sm .form-control-plaintext {
padding-right: 0px;
padding-left: 0px;
}
.list-group-header-item {
display: table-cell;
width: 1%;
white-space: nowrap;
vertical-align: middle;
line-height: 1rem;
}
/* 区切り文字 */
.divider:after {
margin-right: 5px;
margin-left: 5px;
content: "|";
color: #cccccc;
}
.modal-body > *:last-child {
margin-bottom: 0px;
}
.modal-body .progress {
margin-bottom: 0px;
}
.list-group-item:not(:last-child) {
border-bottom: none;
}
.list-group-item:focus, .list-group-item:hover {
z-index: auto;
}
/*
最後の項目は下のマージンを取らない
※ TD内のチェックボックスは除く。本来は