@charset "utf-8";
@import url('fontawesome-4.3.0.min.css');
@import url('framework.css');

/* body
--------------------------------------------------------------------------------------------------------------- */
body{}

/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#page{
  margin:0; 
  padding:5px 15px;
  width:100%;
  background: rgb(11,48,142);
}

#page h3{
  color:#FFF;
  line-height: 3rem;
}

/* map
--------------------------------------------------------------------------------------------------------------- */
#map{width:100%; margin:0; text-align:center; overflow-x:scroll;}
#world_map{ width:1750px; height:885px; margin:0 auto;}
.world_map{ width:100%; height:100%; position: relative;}


/* LA_map
--------------------------------------------------------------------------------------------------------------- */
.Krefeld	{position: absolute; left: 48%; top: 29%;}
.Paris		{position: absolute; left: 46.5%; top: 32.5%;}
.Koeln		{position: absolute; left: 49%; top: 32%;}
.Parndorf	{position: absolute; left: 51%; top: 32%;}
.Moscow		{position: absolute; left: 55%; top: 26%;}

.Beijing	{position: absolute; left: 78%; top: 38%; z-index: 1;}
.Korea		{position: absolute; left: 81%; top: 38%; z-index: 2;}
.Japan		{position: absolute; left: 84.5%; top: 40%; z-index: 3;}
.Taiwan		{position: absolute; left: 79%; top: 46.5%; z-index: 3;}
.Shanghai	{position: absolute; left: 79%; top: 42%; z-index: 2;}

.Predix		{position: absolute; left: 90%; top: 40%; z-index: 3;}

.Bangkok	{position: absolute; left: 74%; top: 51%; z-index: 2;}
.Gurgaon	{position: absolute; left: 67%; top: 44%;}

.Australia	{position: absolute; left: 86%; top: 80%;}
.Auckland	{position: absolute; left: 94%; top: 83%;}

.Charlotte	{position: absolute; left: 23.5%; top: 39%; z-index: 2;}
.Chicago	{position: absolute; left: 22%; top: 33%;}
.Houston	{position: absolute; left: 19%; top: 41%; z-index: 1;}
.SaoPaulo	{position: absolute; left: 33%; top: 72%;}


.wrap1			{width: 100px;  margin: 0 auto;  padding:0;  color: #fff;  text-align: center;}
.wrap1 li		{list-style: none;  float: left;  margin: 0;  padding: 0 5px;}
.wrap1 a		{display: block;  position: relative;  width: 30px;  height: 30px;
  			 	 padding: 0px;  border-radius: 50%;  background: #FFB549;  transition: .3s;}
.wrap1 a:hover	{background: #FF5050;}
.wrap1 a:before	{font-family: 'typicons';  font-style: normal;  font-weight: normal;
				 display: inline-block;  width: 30px;  height: 30px;  padding: 0;
				 margin: 0; color: #fff;  text-align: center;  line-height: 1;}
.wrap1 a span	{position: absolute;  opacity: 0;  top: -10px;  left: -34px;  width: 105px; padding:10px;
 				 border-radius: 5px;  background: #FF5050;  color: #fff; font-size: 20px;  line-height: 1;  transition: .3s;}
.wrap1 a span:after{position: absolute;  top: 100%;  left: 39px;  height: 0;  width: 0;
  				     border: 10px solid transparent;  border-top: 10px solid #FF5050; content: "";}
.wrap1 a:hover span{opacity: 1;  top: -48px;}


.wrap2			{width: 100px;  margin: 0 auto;  padding:0;  color: #fff;  text-align: center;}
.wrap2 li		{list-style: none;  float: left;  margin: 0;  padding: 0 5px;}
.wrap2 a		{display: block;  position: relative;  width: 24px;  height: 24px;
  			 	 padding: 0px;  border-radius: 50%;  background: #FFB549;  transition: .3s;}
.wrap2 a:hover	{background: #FFB549;}
.wrap2 a:before	{font-family: 'typicons';  font-style: normal;  font-weight: normal;
				 display: inline-block;  width: 24px;  height: 24px;  padding: 0;
				 margin: 0; color: #fff; text-align: center;  line-height: 1;}
.wrap2 a span	{position: absolute;  opacity: 0;  top: -20px;  left: -29px;  width: 90px; padding:10px;
 				 border-radius: 5px;  background: #FFB549;  color: #fff; font-size: 14px;  line-height: 1;  transition: .3s;}
.wrap2 a span:after{position: absolute;  top: 100%;  left: 34px;  height: 0;  width: 0;
  				     border: 7px solid transparent;  border-top: 7px solid #FFB549; content: "";}
.wrap2 a:hover span{opacity: 1;  top: -40px;}



/* Search
--------------------------------------------------------------------------------------------------------------- */
#search{padding:0px 20px 0px 90px;text-align:left; z-index: 99;}
.search{position: absolute; bottom:50px;
   		background-color: rgba(0,94,184, 0.3); color: rgba(11,48,142);	}

#Model{ float: left;  padding:20px;}

#sz{padding:20px;}
select.sz{width:155px;}

#more{padding:0;}


a.btn{
  display: inline-block;  width: 200px;  margin: 0 auto;  padding: 15px 10px;
  border: 1px solid #fff;  border-radius: 25px;  background: rgba(0,94,184, 0.2);
  color: #fff;  text-align: center;  text-decoration: none;  line-height: 1;
  transition: .3s;}

a.white:hover {
  background: #fff;  color: #000;}


/* monitor
--------------------------------------------------------------------------------------------------------------- */
#foot{ background: linear-gradient(#005EB8, #0B308E); width:100%;}
#monitor{ width:1050px; margin:0 auto; padding:40px 0; text-align:left; color:#fff;}

.table-ul {
  background-color:transparent;  display: table;  table-layout: fixed;  padding:0;
  text-align: center;  width: 100%;}
.table-ul li {
  display: table-cell; vertical-align: middle;}
.table-ul li a {
  height:65px; color: #000; display: block;
  text-decoration: none;  background: rgba(360,360,360,0.85);  margin: 0 5px;  padding: 10px 0;}
.table-ul li a:hover{
  background: rgba(360,360,360,1);}


/* more
--------------------------------------------------------------------------------------------------------------- */
#more1{ width:100%; text-align:center;}
#more2{ width:1000px; height:820px; margin:20px auto; text-align:center;}
#filter{ width:215px; text-align:left; float: left; font-size:80%; margin-left:15px}
.searchBtn{
  display: none;
  background:#0B308E;
  width: 60px;
  border-radius: 0 30px 30px 0;
  padding:10px 10px 10px 20px ;
}

.searchBtn img{
  width: 25px;
}

.searchBtn:hover{
  background:rgba(11, 48, 142,.7);
}

.close{
  display:none;
}

@media only screen and (max-width: 600px) {
  #filter{
    display: none;
  }
  .searchBtn{
    display: block;  
  }
}




#result{ width:670px; height:820px; text-align:left; overflow-y:scroll;}
#link{ width:215px; margin:50px 0 0 0;}

p.fz18{font-size:18px;}
p.fz24{font-size:24px;}
p.b{font-weight:bold}


a.monitorbtn{ font-size:12px;  width: 190px;
  display: inline-block;  margin: 2px auto;  padding: 15px 0px;
  border: 1px solid rgba(0,94,184,0.3);  background:#fff ;
  color: rgba(0,94,184,1);  text-align: center;  text-decoration: none;  line-height: 1;
  transition: .3s;}

a.monitorbtn:hover {
  border: 1px solid rgba(0,181,226,1);  color: rgba(0,181,226,1); background: rgba(0,181,226,0.1);
}


/* --- リストエリア --- */
ul.thumbnail {
width: 100%; /* リストエリアの幅 */
margin: 0;
padding: 0;
list-style-type: none;
border-top: 1px #808080 dotted; /* リスト項目の上境界線 */
}

/* --- リスト項目 --- */
ul.thumbnail li {
padding: 20px 15px; /* リスト項目のパディング（上下、左右） */
border-bottom: 1px #808080 dotted; /* リスト項目の下境界線 */
list-style:none;
}

/* --- 項目内容 --- */
ul.thumbnail dl {
width: 100%;
margin: 0;
}

/* --- 写真エリア --- */
ul.thumbnail dt {
width: 160px; /* 写真エリアの幅 */
float: left;
}
ul.thumbnail dt img {
border: 0px; /* 写真の境界線 */
}

/* --- キャプションエリア --- */
ul.thumbnail dd {
margin: 0 0 0 160px; /* キャプションエリアのマージン（上右下左） */
line-height: 150%;
}

/* --- キャプションエリア --- */
ul.thumbnail dd {
margin: 0 0 0 160px; /* キャプションエリアのマージン（上右下左） */
line-height: 150%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

p.blu {
    width:80px; font-size:80%;  border-radius: 5px;  text-decoration:none;  display:inline-block;
    text-align:center;  padding:0; margin:2px 15px 0 0; color:#fff;  background-color:rgba(0,94,184,1);}
p.pup {
    width:80px; font-size:80%;  border-radius: 4px;  text-decoration:none;  display:inline-block;
    text-align:center;  padding:0; margin:2px 15px 0 0; color:#fff;  background-color:rgba(165,127,178,1);}
p.grn {
    width:80px; font-size:80%;  border-radius: 5px;  text-decoration:none;  display:inline-block;
    text-align:center;  padding:0; margin:2px 15px 0 0; color:#fff;  background-color:rgba(183,191,16,1);}
p.dgr {
    width:80px; font-size:80%;  border-radius: 5px;  text-decoration:none;  display:inline-block;
    text-align:center;   padding:0; margin:2px 15px 0 0; color:#fff;  background-color:rgba(116,170,80,1);}
p.ylw {
    width:80px; font-size:80%;  border-radius: 5px;  text-decoration:none;  display:inline-block;
    text-align:center;   padding:0; margin:2px 15px 0 0; color:#fff;  background-color:rgba(255,181,73,1);}

a.con{ color:black; text-decoration: none;}
a.con:hover{ position:relative; top:2px;left:2px; color:gray; text-decoration:underline;}
a.con:after{ color:black; text-decoration: none;}

.under{	padding:10px 0;}
.margin-top10{margin:10px 0 0 0}


@media only screen and (max-width: 600px) {
  .m-pad-L20{
    padding-left:20px;
  }
}