@charset "utf-8";

html{
    height: 100%;
overflow: auto;
}

body{
    overflow-x: hidden;
    position: relative;
    height: 100%;
    margin: 0;
}
*{
   margin: 0;
   padding: 0; /* 全てのプロパティの余白とパディングをリセットしています。*/
}
#wrapper{
   width: 980px;
   margin: 0 auto;/* 幅固定（700px）でセンタリングします。*/
background-color: #ffffff;
}

#header{
   width: 980px;
   height: 90px;  /* サイトロゴの高さに合わせて調節して下さい。*/
margin: 5px auto;
position: relative;
}

#headerLogo{
    width : 450px;
    float: left;
position: absolute;
top: 20%;
}

#headerMain h1{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 4px;
    padding-right: 0;
    padding-bottom: 4px;
    padding-left: 0;
    text-align: left;
    font-weight: normal;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff;
	text-align: right;
}

#headerLogo a{
    display: block;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    text-indent: -9999px;
    overflow: hidden;
    background-image : url(logo_1C1.png);
    background-position: top left;
    background-repeat: no-repeat;
background-size:400px;
height:70px;
}

#headerExtra1{
    width: 350px;
    float: right;
}

#headerExtra1 a{
    display: block;
    margin-top: 11px;
    height: 42px;
    background-image : url(img/contact.png);
    background-position: top right;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

#headerExtra1 a:hover{
    display: block;
    margin-top: 11px;
    height: 42px;
    background : url(img/contact_r.png) no-repeat;
    background-position: top right;
    background-repeat: no-repeat;
}

#container{
	width: 100%;
	text-align: center;
}

#main{
   width: 980px;     /* メニューとコンテンツを囲んでいます。 */
   overflow: hidden; /* 親ボックスでフロート解除します。*/
background-color: #191970;
margin: 0 auto;
}

#container2{
   width: 980px;
   margin: 0 auto;/* 幅固定（700px）でセンタリングします。*/

}

#nav-cont{
   width: 980px;
   margin : 0px auto;/* 幅固定（700px）でセンタリングします。*/
   background-color: #5f9ea0;
}

#new{
	position:relative;
margin-top:20px;
	font-size:20px;
	border:1px solid #325A8C;
	background: #f8f8fc;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;  
border-radius:10px 10px 10px 10px;
}
#new::after{
	content: "i-constructionへの取り組み";
	position: absolute;
	top: -15px;
	left: 10px;
	background:  #191970;
	font-size: 20px;
	color: #fff;
	padding: 10px 50px;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;  
border-radius:10px 10px 10px 10px;
}

#image2{
  background: rgba(255,255,255,0.5);
}

#menu{
   float: left;
   width: 250px;     /* floatの width 指定は必須です。*/+
height 600px;
background-color: #ff69b4;
background-image: url("banner-1050629_640.jpg")
margin: 0 auto;
}

#topics{
   float: left;
   width: 650px;     /* floatの width 指定は必須です。*/
   background-color: #ff69b4;
   color: #000000;
margin-left: 0;
}

#contents{
   float: left;
   width: auto;     /* floatの width 指定は必須です。*/
background-color: #f5f5f5;
margin: 0 auto;
}

#banner{
   float: right;
   width: 270px;     /* floatの width 指定は必須です。*/
   background-color: #ff69b4;
   color: #000000;
margin-left: 40px;
margin-top: 40px;
}

#footer{
   clear: both;      /* IE6 以前の float 解除対応です。 */
   background-color: #000080;
   color: #ffffff;
   width: auto;
   height: 80px;
   margin: 0 auto;
}

#footerMain {
   width: 980px;
   margin: auto;
   position: relative;
}

#footerMain p{
    /* コピーライト文字設定 */
   clear: both;
    text-align: center;
	color : #ffffff;
    padding-top: 5px;
}

#menu ul{
   list-style: none;
}

#hpb-aside{
    width: 330px;
    float: right;
    text-align: left;
margin-top : 50px;
}

#companyinfo{
   float: right;
   width: 270px;     /* floatの width 指定は必須です。*/
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

#youtube {
float: right;
position: relative;
margin: 0 0;
padding: 1em 1em;
border: solid 3px #62c1ce;

}


#profile{
   float: left;
   width: 650px;     /* floatの width 指定は必須です。*/
   background-color: #ff69b4;
   color: #000000;
margin-left: 0;
}

#history{
   float: left;
   width: 650px;     /* floatの width 指定は必須です。*/
   background-color: #ff69b4;
   color: #000000;
margin-left: 0;
}

#title_box{
color: #000000;
background: url(headline_bg.png) center center no-repeat;
height:150px;
margin: 10px -200%; /* マージンを追記 */
padding: 0 200% 0 200%;/* マージンで横にはみ出した部分を戻す */
width:100%;
  position: relative;
text-align:center;
}

#new2{
width:270px;
float:right;
	position:relative;
margin-top:20px;
	font-size:20px;
	border:1px solid #325A8C;
	background: #f8f8fc;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;  
border-radius:10px 10px 10px 10px;
}
#new2::after{
	content: "i-construction";
	position: absolute;
	top: -15px;
	left: 10px;
	background:  #191970;
	font-size: 20px;
	color: #fff;
	padding: 10px 20px;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;  
border-radius:10px 10px 10px 10px;
}

.topicpath {
  width: 980px;
}

.topicpath ol li {
        /* liを横並び＆ブレットを消す */
        display: inline;
        list-style-type: none;
  font-size: 11px;
  line-height: 1;
  color: #696969;

}

.topicpath ol li:before {
        content: " > ";
}

.topicpath ol li:first-child:before {
        content:"";
}

.service {
width: 640px;
height:100%;
overflow: hidden;
    margin-top: 10px;
}

.service img{
    padding-top: 10px;
    padding-bottom: 8px;
}