@charset "UTF-8";

/*---------------------------------------------

Architecture Top Page CSS

for maik-kk.com/architecture/
coded by d-spica at 2009-05-09
linked to "/$page-name.html"

---------------------------------------------*/

 
@import url(../../css/default.css);
@import url(../../css/base.css);
@import url(common.css);


#area-main h3,
#area-main p,
#area-main ul,
#area-main ol,
#area-main dl {
  padding: 2px 8px;
}

#area-main div.section h3 {
  font-size: 100%;
}

#area-main div#concept {
}

#area-main div#concept h2 {
  position: absolute;
  top: 130px;
  left: 293px;
  z-index: 1;
  padding: 0 8px;
  width: 274px;
  height: 107px;
  background: #FC1E1E;
  text-align: right;
  font-family: "Century Gothic", sans-serif;
  font-size: 250%;
  font-weight: bold;
  color: #FFF;
}

#area-main div#concept div#custom {
  margin-bottom: 3px;
  padding-top: 110px;
  padding-left: 293px;
  padding-right: 293px;
  background: url(../img/top/ph-01.jpg) no-repeat right top;
}

#area-main div#concept div#custom div {
  position: relative;
  padding-bottom: 20px;
  min-height: 87px;
  background: #F58220;
  color: #FFF;
}

* html #area-main div#concept div#custom div {
  height: 87px;
}

#area-main div#concept div#custom p.guide-nav a {
	position: absolute;
	right: 4px;
	bottom: 2px;
	background: url(../img/common/ar-or-rv.png) no-repeat left center;
	color: #FFF;
}

#area-main div#concept div#solar {
  float: right;
  margin-bottom: 3px;
  width: 290px;
}

#area-main div#concept div#solar div {
  position: relative;
  padding-bottom: 20px;
  min-height: 87px;
  background: #36C;
  color: #FFF;
}

* html #area-main div#concept div#solar div {
  height: 87px;
}

#area-main div#concept div#solar p.guide-nav a {
  position: absolute;
  right: 8px;
  bottom: 3px;
  background: url(../img/common/ar-bl-rv.png) no-repeat left center;
  color: #FFF;
}

#area-main div#concept div#electric {
  margin-bottom: 3px;
  padding-top: 110px;
  padding-right: 293px;
  width: 290px;
  background: url(../img/top/ph-02.jpg) no-repeat right top;
}

#area-main div#concept div#electric div {
  position: relative;
  background: #FC1E1E;
  color: #FFF;
  padding-bottom: 20px;
  min-height: 87px;
}

* html #area-main div#concept div#electric div {
  height: 87px;
}

#area-main div#concept div#electric p.guide-nav a {
  position: absolute;
  right: 8px;
  bottom: 3px;
  background: url(../img/common/ar-rd-rv.png) no-repeat left center;
  color: #FFF;
}

#area-main div#concept div#policy {
  margin-bottom: 3px;
  padding-left: 293px;
  padding-right: 293px;
  background: url(../img/top/ph-03.jpg) no-repeat 0 0;
}

#area-main div#concept div#policy div {
  position: relative;
  background: #00B9F2;
  color: #FFF;
  padding-bottom: 20px;
  min-height: 197px;
}

* html #area-main div#concept div#policy div {
  height: 197px;
}

#area-main div#concept div#policy p.guide-nav a {
  position: absolute;
  right: 8px;
  bottom: 3px;
  background: url(../img/common/ar-lbl-rv.png) no-repeat left center;
  color: #FFF;
}

#area-main div#topics {
  position: relative;
  margin-bottom: 3px;
  padding-right: 293px;
}

#area-main div#topics h2 {
  float: right;
  padding: 3px 8px;
  width: 274px;
  height: 211px;
  background: #FC1E1E;
  font-family: "Century Gothic", sans-serif;
  font-size: 250%;
  font-weight: bold;
  color: #FFF;
}

#area-main div#topics dl {
  width: 274px;
  min-height: 209px;
}

* html #area-main div#topics dl {
  height: 209px;
}

#area-main div#topics dl dt {
  float: left;
  width: 5.5em;
  font-weight: bold;
  color: #333;
}

#area-main div#topics dl dd {
  margin-bottom: 3px;
  padding: 0 0 3px 5.5em;
  background: url(../../img/base/ln-dot-gy.png) repeat-x bottom;
}

#area-main div#topics dl dd a {
  display: block;
  padding-left: 1em;
  background: url(../img/common/mk-link.png) no-repeat 0 0.4em;
  color: #272727;
}

#area-main div#topics p.guide-nav a {
  position: absolute;
  right: 301px;
  top: 194px;
  background: url(../img/common/ar-rd-rv.png) no-repeat left center;
  color: #FFF;
}

#area-main div#stuff-blog {
  position: relative;
  margin-bottom: 40px;
  width: 876px;
}

#area-main div#stuff-blog h2 {
  float: left;
  padding: 164px 8px 3px;
  width: 274px;
  height: 50px;
  background: #00B9F2;
  font-family: "Century Gothic", sans-serif;
  font-size: 250%;
  font-weight: bold;
  color: #FFF;
}

#area-main div#stuff-blog h2 span {
}

#area-main div#stuff-blog div dl dd span.update {
  font-weight: bold;
  color: #FC1E1E;
}

#area-main div#stuff-blog dl {
  float: left;
  padding: 0 0 3px 3px;
  width: 290px;
  min-height: 107px;
}

#area-main div#stuff-blog div#blog1 dl dt {
  float: left;
  width: 97px;
}

#area-main div#stuff-blog div#blog1 dl dt a {
  display: block;
  padding: 65px 5px 0;
  height: 42px;
  background: #36C url(../img/top/ph-stuff1.jpg) no-repeat right top;
  color: #FFF;
}

#area-main div#stuff-blog div#blog1 dl dd {
  padding: 0 15px 0 107px;
}

#area-main div#stuff-blog div#blog2 dl dt {
  float: left;
  width: 97px;
}

#area-main div#stuff-blog div#blog2 dl dt a {
  display: block;
  padding: 0 5px 65px;
  height: 42px;
  background: #F58220 url(../img/top/ph-stuff3.jpg) no-repeat right bottom;
  color: #FFF;
}

#area-main div#stuff-blog div#blog2 dl dd {
  padding: 0 15px 0 107px;
}

#area-main div#stuff-blog div#blog3 dl dt {
  float: right;
  width: 97px;
}

#area-main div#stuff-blog div#blog3 dl dt a {
  display: block;
  padding: 65px 5px 0;
  height: 42px;
  background: #00B9F2 url(../img/top/ph-stuff2.jpg) no-repeat left top;
  color: #FFF;
}

#area-main div#stuff-blog div#blog3 dl dd {
  padding: 0 107px 0 15px;
}

#area-main div#stuff-blog p.guide-nav a {
  position: absolute;
  right: 594px;
  top: 8px;
  background: url(../img/common/ar-lbl-rv.png) no-repeat left center;
  color: #FFF;
}