@charset "Shift_JIS";



/* **************************************************

Name: style.css
Description: style

Create: 2011.03.30
Update: 2013.07.09

***************************************************** */

/* content===========================================

 01 ITエコ実験村トップページ
 02 エコ村リアルタイム映像

===================================================== */


/* 01 ITエコ実験村トップページ
===================================================== */

/* --- ITエ実験村の紹介 --- */
div.BrownStyle1{ width:965px; margin:0 0 15px 0;}
div.BrownStyle2{ width:720px; margin:0 0 15px 0;}

div.BrownStyle1 div.titleArea,
div.BrownStyle2 div.titleArea{ margin:0; padding:0 20px; height:64px;}

div.BrownStyle1 div.titleArea { background:url("../introduction/images/bg_ttl_brown_1.gif") left bottom no-repeat;}
div.BrownStyle2 div.titleArea { background:url("../introduction/images/bg_ttl_brown_2.gif") left bottom no-repeat; }

div.BrownStyle1 div.titleArea h2,
div.BrownStyle2 div.titleArea h2{ margin:18px 0 0 0; padding:0; border:none; display:inline-block; background:none;}

div.BrownStyle1 div.titleArea p{ margin:16px 0 0 0; float:right; clear:left;}

div.BrownStyle1 div.inner{ width:915px; background:#F7F4D4 url("../images/bg_introduction.jpg") center 135px no-repeat;}
div.BrownStyle2 div.inner{ width:671px; background:#F7F4D4;}

div.BrownStyle1 div.inner,
div.BrownStyle2 div.inner{ margin-left:2px; padding:20px 20px 15px 20px; border:3px solid #614A2D; border-top:none;}

div.BrownStyle1 div.inner div.mapArea {
	position:relative;
	width: 915px;
	height: 475px;
}
div.BrownStyle1 div.inner div.mapArea p#Intro01 {
	position: absolute;
	top: 30px;
	left: 378px;
}
div.BrownStyle1 div.inner div.mapArea p#Intro02 {
	position: absolute;
	top: 88px;
	left: 20px;
}
div.BrownStyle1 div.inner div.mapArea p#Intro03 {
	position: absolute;
	top: 304px;
	left: 339px;
}
div.BrownStyle1 div.inner div.mapArea p#Intro04 {
	position: absolute;
	top: 215px;
	left: 608px;
}
div.BrownStyle1 div.inner div.mapArea p#Intro05 {
	position: absolute;
	top: 428px;
	left: 0;
}

div.BrownStyle2 h3{ border:none;}

/*
div.BrownStyle2 div.area01,
div.BrownStyle2 div.area02,
div.BrownStyle2 div.area03,
div.BrownStyle2 div.area04{ margin:0 0 10px 0; width:668px;}

div.BrownStyle2 div.area01{ padding:12px 0 40px 0; height:380px; background:url("../introduction/images/bg_area01.jpg") left 0 no-repeat;}
div.BrownStyle2 div.area02{ padding:12px 0 10px 0; height:410px; background:url("../introduction/images/bg_area02.jpg") right 0 no-repeat;}
div.BrownStyle2 div.area03{ padding:12px 0 10px 0; height:410px; background:url("../introduction/images/bg_area03.jpg") right 0 no-repeat;}
div.BrownStyle2 div.area04{ padding:10px 0; height:400px;  background:url("../introduction/images/bg_area04.jpg") left 0 no-repeat;}
*/
div.BrownStyle2 div.main { margin:0 0 10px 0; background:#fff; padding:15px;}

div.BrownStyle2 div.main ul.HorizontalLinks{ font-size:83%; }
div.BrownStyle2 div.main ul.HorizontalLinks li{ margin: 0 0 10px; padding: 0 2em 0 17px; float:left; background: url(/image/jp/r1/icon/icon_link_right.gif) no-repeat 0 0.1em; white-space:nowrap;}




/* --- 生きものたち --- */
div.BlueStyle1{ margin:0 0 15px 0; width:965px;}
div.BlueStyle2{ margin:0 0 15px 0; width:720px;}

div.BlueStyle1 div.titleArea{
	margin:0;
	padding:0 20px;
	height:64px;
	background:url("../creature/images/bg_ttl_blue_1.gif") left bottom no-repeat;
}

div.BlueStyle1 div.titleArea h2{ margin:18px 0 0 0; padding:0; border:none; display:inline-block;}
div.BlueStyle1 div.titleArea p{ margin:16px 0 0 0; float:right; clear:left; }

div.BlueStyle1 ul { margin: 0 0 15px 0;}
div.BlueStyle1 ul li { float:left; margin:0 35px;}

div.BlueStyle2 div.titleArea{
	height:64px;
	background:url("../creature/images/bg_ttl_blue_2.gif") left bottom no-repeat;
}

div.BlueStyle2 div.titleArea ul.MenuList{ margin:0; padding:0;}
div.BlueStyle2 div.titleArea ul.MenuList li{ float:left;}
div.BlueStyle2 div.titleArea ul.MenuList li img{vertical-align:top;}

div.BlueStyle1 div.inner{ width:915px;}
div.BlueStyle2 div.inner{ width:671px;}

div.BlueStyle1 div.inner,
div.BlueStyle2 div.inner{ margin-left:2px; padding:20px 20px 15px 20px; background:#DFEFFC; border:3px solid #3FA0ED; border-top:none}

div.BlueStyle1 div.main,
div.BlueStyle2 div.main { margin:0 0 10px 0; background:#fff; padding:15px;}

div.BlueStyle2 div.main div.ImgW120SetStyle div.ImgSet{ width:506px;}

div.BlueStyle2 div.main ul.HorizontalLinks{ font-size:83%; }
div.BlueStyle2 div.main ul.HorizontalLinks li{ margin: 0 0 4px; padding: 0 1.5em 0 17px; float:left; background:url(/image/jp/r1/icon/icon_link_right.gif) no-repeat 0 0.1em;}




/* --- かかわる人たち --- */
div.OrangeStyle1{ width:965px; margin:0 0 15px 0;}
div.OrangeStyle2{ width:720px; margin:0 0 15px 0;}

div.OrangeStyle1 div.titleArea,
div.OrangeStyle2 div.titleArea{ margin:0; padding:0 20px; height:64px;}

div.OrangeStyle1 div.titleArea h2,
div.OrangeStyle2 div.titleArea h2{ margin:18px 0 0 0; padding:0; border:none; display:inline-block;}

div.OrangeStyle1 div.titleArea p{ margin:16px 0 0 0; float:right; clear:left;}

div.OrangeStyle1 div.inner{ width:915px;}
div.OrangeStyle2 div.inner{ width:671px;}

div.OrangeStyle1 div.inner,
div.OrangeStyle2 div.inner{ margin-left:2px; padding:20px 20px 15px 20px; background:#F7F4D4; border:3px solid #FF9147; border-top:none;}

div.OrangeStyle1 div.main,
div.OrangeStyle2 div.main { background:#fff; padding:15px; }

div.OrangeStyle2 h3{border:none; color:#FF6600;}
div.OrangeStyle2 em{color:#FF6600; font-style:normal!important;}




/* --- エコ村だより --- */
div.GreenStyle1{ width:475px; margin:0 0 15px 0;}
div.GreenStyle2{ width:720px; margin:0 0 15px 0;}

div.GreenStyle1 div.floL{ float:left; width:233px; margin-right:5px; clear:right;}
div.GreenStyle1 div.floR{ float:right;}

div.GreenStyle1 div.titleArea{ margin:0; padding:0 15px; height:64px;}
div.GreenStyle2 div.titleArea{ margin:0; padding:0 20px; height:64px;}

div.GreenStyle1 div.titleArea { background:url("../letter/images/bg_ttl_green_1.gif") left bottom no-repeat;}
div.GreenStyle2 div.titleArea { background:url("../letter/images/bg_ttl_green_2.gif") left bottom no-repeat;}

div.GreenStyle1 div.titleArea h2,
div.GreenStyle2 div.titleArea h2{ margin:16px 0 0 0; padding:0; border:none; color:#fff; display:inline-block; line-height:1.35; font-size:160%; background:none; font-weight:bold;}

div.GreenStyle1 div.titleArea h2 a,
div.GreenStyle2 div.titleArea h2 a{color:#fff; line-height:1.35;}

div.GreenStyle1 div.titleArea p{ margin:16px 0 0 0; float:right; clear:both;}

div.GreenStyle1 div.inner{ width:438px;}
div.GreenStyle2 div.inner{ width:671px;}

div.GreenStyle1 div.inner{ padding:10px 15px; background:#E7F3D2; border:3px solid #A9D460; border-top:none;}
div.GreenStyle2 div.inner{ margin-left:2px; padding:20px 20px 15px 20px; background:#E7F3D2; border:3px solid #A9D460; border-top:none;}

div.GreenStyle1 div.main,
div.GreenStyle2 div.main { margin:0 0 10px 0; background:#fff; padding:15px;}

div.GreenStyle2 div.main h3{ border:none; font-size:120%;}
div.GreenStyle2 div.main h3 span{ font-weight:normal; margin-left:1em;}




div.Grid3 div.GreenStyle2 div.Column1andHalf {
	float: left;
	text-align: left;
	width: 300px;
	margin: 0 0 0 10px;
}

/* --
div.Grid3 div.GreenStyle2 div.Column2 {
	float: left;
	text-align: left;
	width: 275px;
	margin: 0 0 0 15px;
}

div.Grid3 div.GreenStyle2 div.Column1 {
	float: left;
	text-align: left;
	width: 170px;
	margin: 0 0 0 15px;
-- */


/* --- 映像による日立グループ紹介 --- */

div.boxTheaterStyle{ width:965px; margin:0 0 15px 0;}

div.boxTheaterStyle div.titleArea{ margin:0; padding:0 20px; height:64px;}

div.boxTheaterStyle div.titleArea { background:url("../images/bg_ttl_theater_1.gif") left bottom no-repeat;}

div.boxTheaterStyle div.titleArea h2{ margin:18px 0 0 0; padding:0; border:none; display:inline-block;}

div.boxTheaterStyle div.titleArea p{ margin:16px 0 0 0; float:right; clear:left;}


div.boxTheaterStyle div.inner{ width:915px; margin-left:2px; padding:20px 20px 15px 20px; background:#D9F5D6; border:3px solid #5CE95C; border-top:none;}

div.boxTheaterStyle div.main { background:#fff; padding:15px; }

div.boxTheaterStyle h3{ border:none; }


/* --- カラム設定 --- */
div.ImgW140SetStyle p.Img { float:left; width:140px; margin:0 15px 0 0; padding:0;}
div.ImgW140SetStyle div.ImgSet { float:left;}

div.OrangeStyle1 div.Column2 {
	float: left;
	text-align: left;
	width: 457px;
	margin: 0;
}
div.OrangeStyle1 div.ImgW140SetStyle div.ImgSet{
	width:270px;
	height: 110px;
}


div.ImgW235SetStyle p.Img { float:left; width:235px; margin:0 15px 0 0; padding:0 0 15px;}
div.ImgW235SetStyle div.ImgSet { float:left;}

div.Grid4 .BoxPatternC div.ImgW235SetStyle div.ImgSet { width: 493px;}







/* 02 エコ村リアルタイム発信		add 2012.07.06
===================================================== */
div.OrangeStyle3{ width:475px; margin:0 0 15px 0;}

div.OrangeStyle3 div.floL{ float:left; width:233px; margin-right:5px; clear:right;}
div.OrangeStyle3 div.floR{ float:right;}

div.OrangeStyle3 div.titleArea{ margin:0; padding:0 15px; height:64px;background:url("/products/it/sustainability/environment/biodiv/satoyama/iteco/ecosystem/images/bg_ttl_orange_3.gif") left bottom no-repeat;}

div.OrangeStyle3 div.titleArea h2 { margin:16px 0 0 0; padding:0; border:none; color:#fff; display:inline-block; line-height:1.35; font-size:160%; background:none;}

div.OrangeStyle3 div.titleArea h2 a {color:#fff; line-height:1.35;}

div.OrangeStyle3 div.inner{ width:438px; padding:10px 15px; background:#F7F4D4; border:3px solid #FF9147; border-top:none; min-height:210px; height: auto !important; height:210px; }

div.OrangeStyle3 div.inner div.floL p.ImgOnlyStyle {
margin: 0 0 5px;
}
div.OrangeStyle3 div.inner p.bottomText {
margin-bottom:0;
clear:both;
}


div.GreenStyleAssist { min-height:210px; height: auto !important; height:210px; }







/* 02 エコ村リアルタイム映像		add 2012.07.06
===================================================== */
body#webcam {
padding:8px 0 0 8px;
margin:0;
text-align:left;
}

div#PopUpContainerMv {
    background-color: #F7F4D3;
    width: 765px;
    text-align: left;
}

div#SiteIdentityPMv {
    font-size: 0;
    height: 64px;
    margin: 0 0 11px;
    width: 765px;
}

div#SiteIdentityPMv p {
    text-align: right;
	padding: 16px 17px 0 0;
}

div#MovieBox {
width:538px;
border:1px #ccc solid;
background-color:#fff;
padding:8px 15px;
margin:0 auto;
text-align:center;
margin-bottom:7px;
}

div#BtnGroup {
width:720px;
margin: 0 auto;

}

div#BtnGroup p.RightBtn{
width:84px;
float:right;
}

div#BtnGroup p.LeftBtn{
width:195px;
float:left;
}

div#FooterMv {
    width: 765px;
}

h1.camera { text-align:left;margin: 0 0 3px 161px; }
h1.camera a {height:123px;display:block;}
h2.camera { border:none;text-align:center;}