html {
    height: 100%;
    min-height:100%
}

body {
    height: 100%;
    min-height:100%;
    margin: 0;
    font-family: "游ゴシック", "Yu Gothic";
}
.body-map {
    height: 100%;
    width: 100%; 
    overflow-y: scroll;
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
}
.body-map::-webkit-scrollbar {  /* Chrome, Safari 対応 */
    display:none;
}

.header * {
    box-sizing: border-box;
}

.margin-side {
    margin-left: 3px;
    margin-right: 3px;
}

/******************** Common Menu ********************/
.common-menu {
    background-color: #FF8C00;
    text-align: left;
    height: 50px;
    width: 100%;
}
.common-menu:after {
    content: "";
    display: block;
    clear: both;
}
.common-menu ul {
    float: right;
}

.common-menu-base {
    height: 50px;
}
.common-menu-base:hover {
    background-color: #FFBC30;
}
.common-menu-base.link {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    color: #FFFFFF;
}
.common-menu-base.logo {
    position: absolute;
    top: 0px;
    left: 0px;
}
.common-menu-base.icon {
    font-size: 30px;
    color: #FFFFFF;
    height: 50px;
}
.common-menu-base.user {
    font-size: 22px;
    color: #FFFFFF;
    font-weight: bold;
    height: 50px;
}

.common-menu-user-target {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 50px;
    right: 0px;
    height: auto;
    width: auto;
    padding: 10px;
    background: #FF8C00;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
}
.common-menu-user-target a:visited {
    color: #FFFFFF;
}
.common-menu-user-trigger:hover + .common-menu-user-target {
    visibility: visible;
    opacity: 1;
}
.common-menu-user-target:hover {
    visibility: visible;
    opacity: 1;
}

.common_logout {
    color: white;
    text-decoration: none;
}
.common_logout:visited {
    color: white;
    text-decoration: none;
}

/******************** Common Contents Container ********************/
.common-container {
    position: absolute;
    top: 50px;
    width: 100%;
}

/******************** Common Map ********************/
.common-map {
    height: 100%;
    width: 100%; 
}

/******************** Common Circle ********************/
.common-circle{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 1px #000000;
  background: skyblue;
  text-align:center;
  line-height: 80px;
  vertical-align: middle;
  box-sizing: border-box;
}

/******************** Common Button Normal ********************/
.common-button-n {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.common-button-n.add {  background: rgb( 28, 184,  65);}
.common-button-n.del {  background: rgb(202,  60,  60);}
.common-button-n.edit { background: rgb(223, 117,  20);}
.common-button-n.look { background: rgb( 66, 184, 221);}
.common-button-n.gray {
    color: #000000;
    background: rgb(220, 220, 220);
    border-color: #000000;
    padding: 5px;
}

/******************** Common Button Gradation ********************/
.common-button-g{
    color: #000000;
    border-radius: 4px;
    padding: 6px;
    border: solid 1px #000000;
}
.common-button-g.w{
    background: -moz-linear-gradient(90deg, #ddf1f9, #feffff, #ddf1f9);
    background: -webkit-linear-gradient(90deg, #ddf1f9, #feffff, #ddf1f9);
    background: -ms-linear-gradient(90deg, #ddf1f9, #feffff, #ddf1f9);
}
.common-button-g.g{
    background: -moz-linear-gradient(90deg, #c0c0c0, #feffff, #c0c0c0);
    background: -webkit-linear-gradient(90deg, #c0c0c0, #feffff, #c0c0c0);
    background: -ms-linear-gradient(90deg, #c0c0c0, #feffff, #c0c0c0);
}

/******************** Common Search Area ********************/
.pure-form-aligned .pure-control-group label.dil-label-search {
    min-width: 6em;
}
.pure-form-aligned .pure-control-group select {
    font-size: 12pt
}
.pure-form-aligned .pure-controls {
    margin: 0 0 0 11.3em;
}
.common-search-item {
    min-width: 8em;
    width: calc(80% - 6em);
}
.common-search-close {
  position:         absolute;
  top:              10px;
  right:            10px;
  width:            23px;
  height:           23px;
  background-image: url("../../../img/common/icon_close.png");
  background-size:  contain;
}
.common-search-title {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
.common-search-area {
    position:           absolute;
    top:                15%;
    left:               15%;
    height:             70%;
    min-height:         450px;
    max-height:         500px;
    width:              70%;
    min-width:          700px;
    margin:             auto;
    border:             solid 1px #777;
    border-radius:      10px;
    background-color:   #FFFFFF;
    overflow-y: scroll;
    -ms-overflow-style: scroll;    /* IE, Edge 対応 */
    scrollbar-width: scroll;       /* Firefox 対応 */
}
.common-search-area.common-search-hide {
    visibility:         hidden;
    -webkit-transform:  translateY(-50px);
    -moz-transform:     translateY(-50px);
    -ms-transform:      translateY(-50px);
    -o-transform:       translateY(-50px);
    transform:          translateY(-50px);
    -webkit-transition: .1s;
    -moz-transition:    .1s;
    -ms-transition:     .1s;
    -o-transition:      .1s;
    transition:         .1s;
    opacity:            0;
}
.common-search-area.common-search-disp {
    visibility:         visible;
    -webkit-transform:  translateY(0);
    -moz-transform:     translateY(0);
    -ms-transform:      translateY(0);
    -o-transform:       translateY(0);
    transform:          translateY(0);
    -webkit-transition: .3s;
    -moz-transition:    .3s;
    -ms-transition:     .3s;
    -o-transition:      .3s;
    transition:         .3s;
    opacity:            1;
}

.common-search-area::-webkit-scrollbar {
  border-radius: 10px;
}
.common-search-area::-webkit-scrollbar-track {
  border-radius: 10px;
}
.common-search-area::-webkit-scrollbar-thumb {
  border-radius: 10px;
}
/******************** Loading ********************/
.hide-loading{
    visibility:         hidden;
    opacity:            0;
}
.disp-loading{
    visibility:         visible;
    opacity:            1;
}
#loading-area{
    position:           absolute;
    left:               0px;
    top:                0px;
    height:             100%;
    width:              100%;
}
#loading-position{
    position:           absolute;
    height:             160px;
    width:              140px;
    top:                0;
    left:               0;
    bottom:             0;
    right:              0;
    margin:             auto;
    background-color:   #FFFFFF;
}
#loading-img{
    position:           relative;
    height:             120px;
    width:              120px;
    top:                10px;
    left:               10px;
    right:              0;
    margin:             auto;
    -webkit-user-select:    none; /* 選択防止[Safari,Chrome] */
    -moz-user-select:       none; /* 選択防止[Firefox] */
    -ms-user-select:        none; /* 選択防止[IE10] */
    user-select:            none; /* 選択防止[CSS3] */
}
#loading-string{
    position:           relative;
    top:                10px;
    left:               10px;
    right:              0;
    margin-top:         3px;
    height:             auto;
    width:              120px;
    font-size:          14px;
    text-align:         center;
    -webkit-user-select:    none; /* 選択防止[Safari,Chrome] */
    -moz-user-select:       none; /* 選択防止[Firefox] */
    -ms-user-select:        none; /* 選択防止[IE10] */
    user-select:            none; /* 選択防止[CSS3] */
}

/******************** Display / Hide ********************/
.common-hide {
    visibility:         hidden;
    -webkit-transform:  translateY(-50px);
    -moz-transform:     translateY(-50px);
    -ms-transform:      translateY(-50px);
    -o-transform:       translateY(-50px);
    transform:          translateY(-50px);
    -webkit-transition: .3s;
    -moz-transition:    .3s;
    -ms-transition:     .3s;
    -o-transition:      .3s;
    transition:         .3s;
    opacity:            0;
}
.common-disp {
    visibility:         visible;
    -webkit-transform:  translateY(0);
    -moz-transform:     translateY(0);
    -ms-transform:      translateY(0);
    -o-transform:       translateY(0);
    transform:          translateY(0);
    -webkit-transition: .3s;
    -moz-transition:    .3s;
    -ms-transition:     .3s;
    -o-transition:      .3s;
    transition:         .3s;
    opacity:            1;
}

/******************** marquee animation ********************/
.marquee {
    padding:            5px;
    overflow:           hidden;
    margin-bottom:      10px;
    position:           relative;
}
.marquee a:after {
    content:        "";
    white-space:    nowrap;
    padding-right:  50px;
}
.marquee a {
    margin:0;
    display:                            inline-block;
    white-space:                        nowrap;
    -webkit-animation-name:             marquee;
    -webkit-animation-timing-function:  linear;
    -webkit-animation-duration:         40s;
    -webkit-animation-iteration-count:  infinite;
    -moz-animation-name:                marquee;
    -moz-animation-timing-function:     linear;
    -moz-animation-duration:            40s;
    -moz-animation-iteration-count:     infinite;
    -ms-animation-name:                 marquee;
    -ms-animation-timing-function:      linear;
    -ms-animation-duration:             40s;
    -ms-animation-iteration-count:      infinite;
    -o-animation-name:                  marquee;
    -o-animation-timing-function:       linear;
    -o-animation-duration:              40s;
    -o-animation-iteration-count:       infinite;
    animation-name:                     marquee;
    animation-timing-function:          linear;
    animation-duration:                 40s;
    animation-iteration-count:          infinite;
}
@-webkit-keyframes marquee {
    from   { -webkit-transform: translate(100%);}
    99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
    from   { -moz-transform: translate(100%);}
    99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
    from   { -ms-transform: translate(100%);}
    99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
    from   { -o-transform: translate(100%);}
    99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
    from   { transform: translate(100%);}
    99%,to { transform: translate(-100%);}
}

/******************** remodal ********************/
.dialog-text {
    font-size: 22px;
}

/******************** tooltip ********************/
.custom-tooltip {
    display: inline-block;
    position: relative;
}
.custom-tooltip::before,
.custom-tooltip::after {
    -webkit-transition: all 0.2s;
    opacity: 0;
    position: absolute;
    transition: all 0.2s;
    visibility: hidden;
    z-index: 11;
}
.custom-tooltip::before {
    -webkit-transform: translateY(-50%);
    border-color: transparent #5f6368 transparent transparent;
    border-style: solid;
    border-width: 3px 7px 3px 0;
    content: "";
    height: 0;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
}
.custom-tooltip::after {
    -webkit-transform: translateY(-50%);
    background: #5f6368;
    border-radius: 3px;
    color: #FFFFFF;
    content: attr(data-tooltip);
    display: block;
    font-size: 11px;
    font-weight: 600;
    left: calc(100% + 13px);
    padding: 5px 10px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}
.custom-tooltip:hover {
    cursor: pointer;
}
.custom-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}
.custom-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}