@charset "utf-8";

#contents{
  position: relative;
  width:100%;
  min-width: 1000px;
}

/* -- 固定ヘッダー -- */
#fixnav .genre1{
  border-left: solid 40px #6688bb;
}
#fixnav-wrapper{
  background-color:rgba(255,255,255,0.0)
}

/* -- コンテンツ -- */
#header{
  padding-top: 170px;
  margin-bottom: 50px;
  background: url(../images/bg-header.jpg) top center no-repeat;
}
#header h1{
  width:668px;
  margin: 0 auto 40px;
}
#header p{
  width:588px;
  margin:0 auto;
  font-size:15px;
  line-height: 1.6;
}
#header p.credit{
  font-size:13px;
  margin-top: 10px;
  text-align: right;
}

#graph{
  width:100%;
  min-width: 1000px;
  height:2240px;
  position: relative;
  overflow: hidden;
  background:url(../images/bg-blue.png);
}
#graph-bg1{
  width:100%;
  height:400px;
  position: absolute;
  top:0;
  left:0;
  background: -webkit-linear-gradient(
    top,
    rgba(255,255,255,1.0) 0%,
    rgba(255,255,255,0.0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1.0) 0%,
    rgba(255,255,255,0.0) 100%
  );
}
#graph-bg2{
  width:100%;
  height:280px;
  position: absolute;
  bottom:0;
  left:0;
  overflow: hidden;
  background: -webkit-linear-gradient(
    top,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,1.0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,1.0) 100%
  );
}
#graph-bg2 img{
  position: absolute;
  bottom:0px;
  left:50%;
  margin-left: -1000px;
}
#canvas-area{
  position: absolute;
  width:1000px;
  height:2163px;
  top:0px;
  left:50%;
  margin-left: -500px;
}
#graph-lead{
  width:557px;
  position: absolute;
  top:0px;
  left:50%;
  margin-left:-60px;
  background:url(../images/icon.png) 170px 180px no-repeat;
  background-position: top right;
  padding-top:50px;
  padding-bottom:30px;
}
#graph-lead p{
  font-size:14px;
  line-height: 1.6;
  margin: 15px 40px 0 80px;
}
.graph-section{
  display: block;
  width:520px;
  height:455px;
  position: absolute;
}
.graph-section2{
  width:380px;
  height:440px;
}
.graph-section svg{
  position: absolute;
  top:0px;
  left:0px;
}
.graph-section svg a:hover{
  cursor: pointer;
}
.graph-section > img{
  position: absolute;
  top:20px;
  left:150px;
}
.graph-section2 > img{
  left:35px;
}
.graph-section div{
  position: absolute;
}
.graph-section h3{
  margin-bottom: 5px;
}
.graph-section p{
  font-size:14px;
  line-height: 1.5;
  margin-bottom: 15px;
}
.graph-section span{
  display:inline-block;
  padding:8px 10px;
  border-radius: 5px;
}

#graph-home{
  top:125px;
  left:50%;
  margin-left: -540px;
}
#graph-home div{
  width:238px;
  top:155px;
  left:220px;
}
#graph-home span{
  background-color: #ef7a00;
  margin-left: 13px;
  transition: 0.5s;
}

#graph-agro{
  top:395px;
  left:50%;
  margin-left: -15px;
}
#graph-agro div{
  width:364px;
  top:140px;
  left:100px;
}
#graph-agro span{
  background-color: #66aa44;
  margin-left: 230px;
  transition: 0.5s;
}

#graph-vehicle{
  top:723px;
  left:50%;
  margin-left: -445px;
}
#graph-vehicle div{
  width:364px;
  top:140px;
  left:100px;
}
#graph-vehicle span{
  background-color: #dd4411;
  margin-left: 170px;
  transition: 0.5s;
}

#graph-city{
  top:1110px;
  left:50%;
  margin-left: 5px;
}
#graph-city div{
  width:210px;
  top:130px;
  left:245px;
}
#graph-city span{
  background-color: #408fcd;
  margin-left: 40px;
  transition: 0.5s;
}

#graph-health{
  top:1670px;
  left:50%;
  margin-left: -545px;
}
#graph-health div{
  width:240px;
  top:130px;
  left:215px;
}
#graph-health span{
  background-color: #ff3366;
  margin-left: 20px;
  transition: 0.5s;
}

#graph-company{
  top:1686px;
  left:50%;
  margin-left: 76px;
}
#graph-company div{
  width:322px;
  top:247px;
  left:40px;
}
#graph-company span{
  background-color: #002266;
  margin-left: 190px;
  transition: 0.5s;
}

#graph-mobile{
  position: absolute;
  top:1250px;
  left:50%;
  margin-left: -500px;
  width:210px;
  padding:20px 20px 5px;
  background-color: #6688bb;
  border-radius:15px;
}
#graph-mobile div{
  width:182px;
  padding: 20px 14px;
  background-color: #fff;
  border-radius:14px;
}
#graph-mobile span{
  display: block;
  margin: 10px auto;
  width:40px;
  height: 40px;
  background-color: #fff;
  border-radius:20px;
}
#graph-mobile h3{
  margin-bottom: 10px;
}
#graph-mobile p{
  font-size:14px;
  line-height: 1.5;
}
#graph-mobile > img{
  position: absolute;
  bottom:-50px;
  left:200px;
}

#text{
  width:800px;
  margin:0px auto;
}
#text h2{
  text-align: center;
  margin-bottom: 30px;
}
#text h2 img{
  margin:0;
}
#text p{
  width:700px;
  font-size:15px;
  line-height: 1.6;
  margin:0 auto 10px;
}
#text p.p-last{
  margin-top: 40px;
}
#text img{
  display: block;
  margin: 40px auto 60px;
}

#overlay{
  position:fixed;
  z-index: 100;
  display:none;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  overflow: scroll;
  overflow-x: hidden;
}
#overlay-bg{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: rgba(0, 26, 77,0.7);
}
#overlay-bg img{
  position: absolute;
  top:30px;
  left:50%;
  margin-left: -450px;
}
#overlay-bg img:hover{
  cursor: pointer;
}

.subarticle{
  display: none;
  background-color: #fff;
  position: relative;
  width:800px;
  margin: 20px auto;
  padding-bottom: 10px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
.subarticle h1{
  position: absolute;
  top:230px;
  left:30px;
}
.subarticle .sub-right{
  width:480px;
  margin:0 50px 60px auto;
}
.subarticle .sub-right h2{
  margin: 15px 0 10px;
}
.subarticle .sub-right p+h2{
  margin: 30px 0 10px;
}
.subarticle .sub-right p{
  font-size:15px;
  line-height: 1.8;
  margin: 0 0 10px;
}
.subarticle .sub-bottom{
  width:690px;
  margin: 0 auto;
  padding: 0 5px;
  border-top: solid 1px #aaa;
}
.subarticle .sub-bottom h2{
  width:200px;
  margin: -25px auto 0;
}
.subarticle .sub-bottom p{
  width:315px;
  margin-top: 40px;
  font-size:15px;
  line-height: 1.6;
}
.subarticle .sub-bottom p.fl{
  float: left;
}
.subarticle .sub-bottom p.fr{
  float: right;
}
.subarticle .sub-bottom p img{
  float: left;
}
.subarticle .sub-bottom2{
  width:480px;
  margin:0 50px 0 auto;
}
.subarticle .sub-bottom2 p{
  width:480px;
}
.subarticle .sub-close{
  width:114px;
  height:22px;
  margin: 40px auto;
  padding: 10px 20px;
  background-color: #eee;
  border-radius: 21px;
  transition: 0.3s;
}
.subarticle .sub-close img{
  display: block;
}
.subarticle .sub-close:hover{
  cursor: pointer;
  background-color: #ddd;
}

h3.message{
  text-align: center;
}
#ac-message{
  background-color:#003344;
  padding-bottom: 50px;
}
#ac-message div{
  width:672px;
  padding:25px;
  margin: 0 auto;
  border-right: solid 1px #fff;
  border-left: solid 1px #fff;
  border-bottom: solid 1px #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#ac-message div p{
  font-size:14px;
  line-height: 1.6;
  margin-bottom: 10px;
  color:#fff;
}
#ac-message div p.credit{
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
}
#ac-message a{
  display: block;
  width:380px;
  margin: 0 auto;
  opacity: 1.0;
  transition: all linear 0.3s;
}
#ac-message a:hover{
  opacity:0.7;
}