@charset "utf-8";

div#contents {
	text-align: center;
  margin-bottom: 10px;
}

div#contents-end {
  height: 40px;
}

div#contentsbox-top {
  height: 10px;
  background-image: url("../images/contentsbox_top.png");
  background-repeat: no-repeat;
}

div#contentsbox {
  background-image: url("../images/contentsbox_center.png");
  background-repeat: repeat;
}

div#contentsbox-bottom {
  height:10px;
  background-image: url("../images/contentsbox_bottom.png");
  background-repeat: no-repeat;
}

div#brief {
  height: 91px;
  background-image: url("../images/brief.png");
  background-repeat: no-repeat;
}

div#brief {
  height: 71px;
  background-image: url("../images/brief.png");
  background-repeat: no-repeat;
}

div#solution-top {
  height: 257px;
  background-image: url("../images/solution_top.png");
  background-repeat: no-repeat;
}

div#solution-1 {
  height: 319px;
  background-image: url("../images/solution_1.png");
  background-repeat: no-repeat;
}

div#solution-2-3 {
  height: 241px;
  background-image: url("../images/solution_2_3.png");
  background-repeat: no-repeat;
}

div#solution-bottom {
  height: 112px;
  background-image: url("../images/solution_bottom.png");
  background-repeat: no-repeat;
}

div#result {
  height: 259px;
  background-image: url("../images/result.png");
  background-repeat: no-repeat;
}

div#bannar {
  height:102px;
  padding-left:67px;
  padding-bottom:10px;
}

div#bannar ul li {
  float:left;
	margin:16px 0 16px 0;
	padding:0 0 0 27px;
	list-style:none;
}





/* ** ** Common Addative Classes ** ** */
.left, .float_left  { float:left	 }
.right, .float_right { float:right }
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
.clear-left, .clear_left { clear:left; } .clear-right, .clear_right { clear:right; }
.hide  { display:none	} .block {display:block !important;} .inline {display:inline !important;}
.align_right    { text-align:right; }
.align_left     { text-align:left; }
.align_center   { text-align:center; }
.align_justify  { text-align:justify; }
a {	color:#525252;	}
a:hover, a:focus { text-decoration:underline;}
a:active, a:visited { }

ul{
  list-style:outside disc;
}
ul,ol{
  margin:0 0 0 0;
  padding:0;
}
li ul,li ol{
  padding:0;
  margin:0 0 1.5em 1.5em;
}

/* slide */

div#container #slide {
    width: 705px;
    height: 655px;
    margin: 0;
    float: left;
    overflow: hidden;
    position: relative;
    
    background-image: url("http://aquastorage.fgv.jp/images/index/img_index_iphone.png");
    background-repeat: no-repeat;
    background-position:64px 0;
}

div#container #slide div.left {
    width: 315px;
    margin: 0;
    padding: 619px 0 0;
    
    display: inline;
    position: relative;
}

div#container #slide div#slide_area {
    width: 261px;
    padding: 375px 0 0;
    
    overflow: hidden;
    display: inline;
    position: absolute;
    top: 126px;
    left: 91px;

    z-index: 200;
    
    cursor: pointer;
}

div#container #slide div#reflection {
    width: 155px;
    height: 512px;
    
    overflow: hidden;
    display: inline;
    position: absolute;
    top: 12px;
    left: 213px;
    z-index: 100;
    
    background-image: url("http://aquastorage.fgv.jp/images/index/reflection.png");
    background-repeat: no-repeat;
}

div#container #slide ul#canvas {
    width: 261px;
    height: 375px;
    margin: 0;
    
    overflow: hidden;
    display: inline;
    position: absolute;
    top: 126px;
    left: 94px;
}

div#container #slide ul#canvas li {
    margin: 0;
    
    display: inline;
    position: absolute;

    left: 0px;
}

div#container #slide ul#nav {
    width: 120px;
    margin: 0 0 0 174px;
    position: relative;
}

div#container #slide ul#nav li {
    width: 8px;
    height: 8px;
    margin: 0 7px 0 0;
    
    display: inline;
    overflow: hidden;
    float: left;
    position: relative;
    
    background-image: url("http://aquastorage.fgv.jp/images/index/default_mark.png");
    background-repeat: no-repeat;
    
    cursor: pointer;
}

div#container #slide div.right {
    width: 289px;
    margin: 50px 0 0 0;

    display: inline;
    position: relative;
}

div#container #slide ul#balloon li {
    width: 271px;
    height: 106px;
    margin: 0 0 26px;
    overflow: hidden;
    position: relative;
}

div#container #slide ul#balloon li#tweet {
    width: 271px;
    height: 106px;
    
    background-image: url("http://aquastorage.fgv.jp/images/index/tweet_default.png");
    background-repeat: no-repeat;
    
    cursor: pointer;
}

div#container #slide ul#balloon li#voice {
    width: 271px;
    height: 106px;
    
    background-image: url("http://aquastorage.fgv.jp/images/index/voice_default.png");
    background-repeat: no-repeat;
    
    cursor: pointer;
}

div#container #slide ul#balloon li#share {
    width: 271px;
    height: 106px;
    
    background-image: url("http://aquastorage.fgv.jp/images/index/share_default.png");
    background-repeat: no-repeat;
    
    cursor: pointer;
}

div#container #slide ul#balloon li#sticker {
    width: 271px;
    height: 106px;
    
    background-image: url("http://aquastorage.fgv.jp/images/index/sticker_default.png");
    background-repeat: no-repeat;
    
    cursor: pointer;
}

div#container #slide ul#nav li img,
div#container #slide ul#balloon li img {
    position: absolute;
}

div#container #slide ul#nav li.current img,
div#container #slide ul#balloon li.current img {
    left:0px;
}

div#container #slide ul#nav li.default img,
div#container #slide ul#balloon li.default img {
    left:-1000px;
}

/* FAQ */

#faq_btn {
	z-index:200;
	position:absolute;
	bottom:0;
	right:38px;
	width:165px;
	height:73px;
	background-image:url(http://aquastorage.fgv.jp/images/index/bg_faq.png);
	background-repeat:no-repeat;
}