/* 全体の設定 */
header {
	min-width:1345px;
}
.container-fluid {
	padding:0px;
}
.row {
	padding-left:10px;
	paddinr-right:10px;
}

/* ヘッダーまわり */
.fs-4 {
	color:#fff;
}
.bg-light {
	background-color: #000 !important;
	color:#fff;
	background-image: url("../img/m-haikei2.png"),url("../img/m-haikei5.png");
	background-position: 0% 50%,100% 50%;
	background-repeat:  no-repeat,no-repeat;

}
.bg-light a {
	color:#fff;
}
.site-header .text-dark {
	color: #fff !important;
	transition-duration: 0.5s;
}

.h-logo {
	margin-left:auto;
	margin-right:10px;
}
.h-logo img.logo1{
	height:80px;
	padding-right:16px;
}
.h-logo img.logo2{
	height:60px;
}
.row {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
}
.me-3 {
	margin-right: 15px !important;
}
.p-3 {
  padding: 8px !important;
}
.mb-3 {
  margin-bottom: 10px !important;
}
nav.mt-2 a.py-2:hover {
	color:#fff352 !important;
	transition-duration: 0.5s;
}
/*
nav a.lay {
	background-image: url("icon-lay.png");
	background-position: 0% 50%;
	background-repeat: no-repeat;
	padding-left: 38px;
	font-weight:bold;
}
nav a.anime {
	background-image: url("icon-anime.png");
	background-position: 0% 50%;
	background-repeat: no-repeat;
	padding-left: 38px;
	font-weight:bold;
}
*/
.mb:hover {
	background-color:rgba(0,141,183,0.5);
	transition:all 0.5s ease-in-out;
}
.mb {
	transition:all 0.5s ease-in-out;
}


/* マップエリア */
.map-menu {
	margin-bottom:2px;
	margin-left:16px;
	max-width: 670px;
	margin-left:auto;
}
.map-title {
	background-color:rgba(48,48,48,0.8);
	padding:4px 8px 5px 8px;
	color:#fff;
	margin-top: 3px;
	font-size:16px;
	font-weight:bold;
	margin-left:10px;
	width:90px;
	float: left;
	text-align:center;
	line-height:18px;
}
.map-title2 {
	background-color:rgba(48,48,48,0.8);
	padding:4px 8px 5px 8px;
	color:#fff;
	padding-top:6px;
	margin-top: 3px;
	font-size:16px;
	font-weight:bold;
	margin-left:10px;
	width:142px;
	float: left;
	text-align:center;
	line-height:18px;
}
#map {
    height: 90vh;
}
.map-select {
	float:right;
}


/* z-index */
header.site-header {
	position: fixed;
	z-index: 3;
	width:100%;
}
.map-area {
	position: fixed !important;
	z-index: 2;
	top: 95px;
	padding-left:0px;
	padding-right:0px;
}
.col-md-2 {
	position:relative;
	top:180px;
	z-index: 4;
}
.map-menu {
	text-align: right;
	position:fixed;
	top:100px;
	right:5px;
	z-index: 4;
}



/* コントロールエリア */
.form-area {
	margin-top:5px;
	padding-bottom:8px;
	padding-left:8px;
	padding-right:8px;
	padding-top:5px;
	background-color:rgba(48,48,48,0.8);
	border:1px solid #000;
	margin-bottom:20px;
}

ul.fancytree-container {
	max-height: 500px;
	overflow: scroll;
	overflow-x: hidden;
}
.fancytree-plain span.fancytree-selected span.fancytree-title {
	background-color: #fff462;
}

.col-md-2 {

}

p.description {
	color:#fff;
	font-weight:bold;
}

span.setsu {
	color:#fff;
	font-size:14px;
}
p.description {
	margin-bottom:10px;
	margin-top:5px;
}
.color_bar {
	margin-top:10px;
}

li.ui-state-default{
    margin: 5px;
    padding: 5px;

}
ul {
    list-style-type: none;
}
.layer_gray {
  filter: grayscale(100%);
  -webkit-filter: grayscale(1);
  opacity: 1;
}
input[type=radio]+label:before{
		content: "";
		display: inline-block;
		background-size: contain;
		width: 160px;
		height: 50px;
}
input[type=radio][value="open_street"]+label:before{
		background-image: url(../img/tizu-12-2.png);
		background-repeat:no-repeat;
		background-position:50% 50%;
}
input[type=radio][value="blank_map"]+label:before{
		background-image: url(../img/tizu-13-2.png);
		background-repeat:no-repeat;
		background-position:50% 50%;
}
input[type=radio][value="gsi"]+label:before{
		background-image: url(../img/tizu-14-2.png);
		background-repeat:no-repeat;
		background-position:50% 50%;
}
input[type=radio]:checked+label::before{
    border-bottom: 2px dotted #000;
    box-sizing: border-box;
}

input[type=radio]+label{
    cursor: pointer;
}
input[type=radio]{
    display: none;
}

button#play {
	cursor: pointer;
	padding:5px 10px 7px;
	margin:8px 0px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 20px;
	background-color:#00a381;
	font-weight:bold;
	font-size:20px;
	transition: 0.5s ;
}
button#play:hover {
	background-color:#5ac5f5;
	transition: 0.5s ;
}

button#stop {
	cursor: pointer;
	padding:5px 10px 7px;
	margin:8px 0px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 20px;
	background-color:#ea5549;
	font-weight:bold;
	font-size:20px;
	transition: 0.5s ;
}
button#stop:hover {
	background-color:#d1de4c;
	transition: 0.5s ;
}

.m-2 {
	background-color: rgba(255,255,255,0.9);
}

ul.fancytree-container {
	background-color: rgba(255,255,255,0.5);
}
#ui-id-1, span.fancytree-node {
	background-color: rgba(255,255,255,1);
	border-bottom:1px solid #afafb0;
}

ul#sortable .name {
	font-size:14px;
}




/* アニメーション */
.col-md-2{
  animation: SlideIn 1.6s;
}

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.map-menu{
  animation: SlideIn2 1.6s;
}

@keyframes SlideIn2 {
  0% {
    opacity: 0;
    transform: translateY(-64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* サイズ別 */
@media (min-width: 768px) {
	.ms-md-auto {
		margin-left: 80px !important;
		font-size: 20px;
	}
	.col-md-2 {
		width: 28% !important;
	}
	.col-md-7 {
		width: 100% !important;
	}
	.col-md-3 {
		width: 0% !important;
		padding:0px !important;
	}
}


@media (min-width: 1200px) {
	.fs-4 {
		font-size: 30px !important;
		padding-left: 10px;
	}
}