@charset "UTF-8";
/* CSS Document */

#shizen_area #contents,
#shizen_area #select,
#header,
#footer,
#lower_banner {
	width: 980px;
	margin: 0 auto;
}

#lower_banner {
	padding-bottom:15px;
}

#lower_banner .left_low {
	float:left;
	width:480px;
}

#lower_banner .right_low {
	float:right;
	width:480px;
}

#shizen_area #contents {
	margin-top: 100px;
	margin-bottom: 20px;
	width:980px;
	height:593px;
	position:relative;
}

#select {
	padding-bottom: 30px;
}

#select #section_catlog {
	width: 361px;
	float: left;
}

#select #section_catlog div.btn {
	margin-bottom: 4px;
}

#select #section_map {
	float: right;
	margin-right: 0;
}

#shizen_area #contents #btn_annai {
	position:absolute;
	top:10px;
	right:10px;
	z-index:100;
}

#shizen_area #contents #btn_annai li {
	display:inline;
}

#shizen_area #contents .btn_skip {
	position:absolute;
	bottom:7px;
	right:10px;
}

#shizen_area #contents .anim_cat {
	position:absolute;
	left:760px;
	top:443px;
}

#shizen_area #contents #slideshow .tab_area {
	background:url(/hebel/topics/shizengocochi/images/shizen_tab_bg.jpg) no-repeat;
	width:980px;
	height:593px;
}

#shizen_area #contents #slideshow .tab_area .logo {
	padding-top: 15px;
	padding-left: 21px;
	padding-bottom: 7px;
}

#shizen_area #contents #slideshow .tab_area .cat {
	position: absolute;
	bottom: 0;
	left: 8px;
}

#shizen_area #contents #slideshow .tab_area #tabs {
	width: 950px;
	padding-left: 17px;
}

#tabs .tab_btn {
	width: 249px;
	float: left;
	padding-top: 23px;
}

#tabs .tab_btn li {
	text-align: right;
	padding-bottom: 8px;
}

#tabs .tab_btn .tab_cat {
	padding-bottom: 0;
}

#tabs #panel1,
#tabs #panel2,
#tabs #panel3,
#tabs #panel4,
#tabs #panel5,
#tabs #panel6,
#tabs #panel9 {
	width: 701px;
	float: left;
}

/* ここは一時的に作業用にコメントアウトしています */
/*#tabs #panel2,#tabs #panel3,#tabs #panel4,#tabs #panel5,#tabs #panel6,#tabs #panel7,#tabs #panel8 {display: none;}*/

#tabs #panel1 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab01_bg.jpg) no-repeat;
	width: 701px;
	height: 503px;
	position: relative;
}

#tabs #panel1 h3 {
	padding-top: 70px;
	padding-left: 69px;
}

#tabs #panel1 p {
	padding-top: 17px;
	padding-left: 69px;
}

#tabs #panel1 .btn01 {
	position: absolute;
	top: 223px;
	left: 272px;
}

#tabs #panel1 .btn02 {
	position: absolute;
	top: 303px;
	left: 354px;
}

#tabs #panel1 .btn03 {
	position: absolute;
	top: 382px;
	left: 296px;
}

#tabs #panel2 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab02_bg.jpg) no-repeat;
	width: 701px;
	height: 503px;
	position: relative;
}

#tabs #panel2 h3 {
	padding-top: 113px;
	padding-left: 55px;
}

#tabs #panel2 p {
	padding-top: 33px;
	padding-left: 55px;
}

#tabs #panel2 .btn01 {
	position: absolute;
	top: 410px;
	left: 319px;
}

#tabs #panel2 .btn02 {
	position: absolute;
	top: 410px;
	left: 506px;
}

#tabs #panel3 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab03_bg.jpg) no-repeat;
	width: 701px;
	height: 503px;
	position: relative;
}

#tabs #panel3 h3 {
	padding-top: 113px;
	padding-left: 55px;
}

#tabs #panel3 p {
	padding-top: 33px;
	padding-left: 55px;
}

#tabs #panel3 .btn01 {
	position: absolute;
	top: 410px;
	left: 319px;
}

#tabs #panel3 .btn02 {
	position: absolute;
	top: 410px;
	left: 506px;
}

#tabs #panel4 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab04_bg.jpg) no-repeat;
	width: 701px;
	height: 503px;
	position: relative;
}

#tabs #panel4 h3 {
	padding-top: 113px;
	padding-left: 55px;
}

#tabs #panel4 p {
	padding-top: 33px;
	padding-left: 55px;
}

#tabs #panel4 .btn01 {
	position: absolute;
	top: 410px;
	left: 506px;
}

#tabs #panel5 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab05_bg.jpg) no-repeat;
/*	width: 701px; IE6だとplan_2fで崩れる */
	width: 698px; /* 変更 */
	height: 503px;
	position: relative;
}

#tabs #panel5 h3 {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 10;
}

#tabs #panel5 p {
	position: absolute;
	top: 100px;
	left: 30px;
	z-index: 20;
}

#tabs #panel5 ul.btn_floor {
	position: absolute;
	top: 215px;
	left: 30px;
	z-index: 90;
}

#tabs #panel5 ul.btn_floor li {
	margin-bottom: 3px;
}

#tabs #panel5 .plan_gaiko {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab05_gai_bg.jpg) no-repeat 251px 18px;
}

#tabs #panel5 .plan_gaiko .image {
/* 	position: absolute; positionを使うとIEでFI/FOが効かない */
	padding-top: 18px; /* 追加 */
	padding-left: 251px;
	z-index: 0;
}

#tabs #panel5 .plan_1f {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab05_1f_bg.jpg) no-repeat 142px 22px;
	height: 503px;
}

/*20120824*/
#tabs #panel5 .plan_1f .image {
/* 	position: absolute; positionを使うとIEでFI/FOが効かない */
	padding-top: 22px; /* 追加 */
	margin-left: 142px;
}

#tabs #panel5 .plan_2f {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab05_2f_bg.jpg) no-repeat 142px 22px;
	height: 503px;
}

/*20120824*/
#tabs #panel5 .plan_2f .image {
/* 	position: absolute; positionを使うとIEでFI/FOが効かない */
	padding-top: 22px; /* 追加 */
	padding-left: 142px;
	z-index: 0;
}

/*20120824*/
#tabs #panel5 .btn_room {
	position: absolute;
	left: 30px;
	top: 418px;
	z-index: 100;
}

/*20120824*/
#tabs #panel5 .btn_room li {
	float: left;
}

/*20120824*/
#tabs #panel5 .btn_zumen {
	position:absolute;
	bottom:20px;
	right:20px;
	z-index:100;
}

#tabs #panel6 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab06_bg.jpg) no-repeat;
	width: 701px;
	height: 503px;
	position: relative;
}

#tabs #panel6 h3 {
	padding-top: 134px;
	padding-left: 231px;
}

#tabs #panel6 p {
	padding-top: 13px;
	padding-left: 175px;
}

#tabs #panel6 .btn01 {
	position: absolute;
	top: 275px;
	left: 187px;
}

#tabs #panel6 .btn02 {
	position: absolute;
	top: 275px;
	left: 388px;
}

#tabs #panel7 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab09_bg.jpg) no-repeat;
/*	width: 701px; IE6だと崩れる */
	width: 698px; /* 変更 */
	height: 503px;
	float: left;
	position: relative;
	margin-top: 0px;
	overflow: hidden;
}

#tabs #panel7 .data {
	text-align: center;
	padding-top: 29px;
}

#tabs #panel7 .data h3 {
	padding-top: 22px;
	padding-bottom: 14px;
}

#tabs #panel7 .data ul {
	padding-top: 19px;
}

#tabs #panel7 .data ul li {
	display: inline;
}

#tabs #panel7 .green {
	text-align: center;
	padding-top: 51px;
}

#tabs #panel7 .green h3 {
	padding-bottom: 13px;
}

#tabs #panel7 .green p {
	padding-bottom: 16px;
}

#tabs #panel7 .green .btn_green {
	position: absolute;
	top: 11px;
	right: 120px;
}

#tabs #panel7 .green .btn_green02 {
	position: absolute;
	top: 11px;
	right: 20px;
}

/*#tabs #panel8 {
	width: 701px;
	height: 503px;
	position: relative;
	float: left;
	margin-top: 0px;
}*/

#tabs #panel8 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab09_bg.jpg) no-repeat;
/*	width: 701px;  IE6だと崩れる */
	width: 698px; /* 変更 */
	height: 503px;
	position: relative;
	float: left;
}

#tabs #panel8 .para02 {
	position: absolute;
	top: 11px;
	left: 10px;
	width: 680px;
	height: 482px;
	overflow: hidden;
}

#tabs #panel8 .para02 .anim05 img {
	margin-top: -3px;
}

#tabs #panel8 .para02 .anim04 .ya {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

#tabs #panel8 .para02 .anim05 .ya_back {
	position: absolute;
	bottom: 15px;
	right: 10px;
}

#tabs #panel8 .para02 .anim04,
#tabs #panel8 .para02 .anim05 {
	position: relative;
}

#tabs #panel9 {
	background: url(/hebel/topics/shizengocochi/images/shizen_tab09_bg.jpg) no-repeat;
/*	width: 701px;  IE6だと崩れる */
	width: 698px; /* 変更 */
	height: 503px;
	position: relative;
}

#tabs #panel9 .para {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 677px;
	height: 479px;
	overflow: hidden;
}

#tabs #panel9 .para p {
	width: 2031px;
	height: 479px;
	margin: 0;
}

#tabs #panel9 .para .anim01,
#tabs #panel9 .para .anim02,
#tabs #panel9 .para .anim03 {
	position: relative;
}

#tabs #panel9 .para .anim01 .cat01 {
	position: absolute;
	left: 65px;
	bottom: 23px;
}

#tabs #panel9 .para .anim02 .cat03 {
	position: absolute;
	left: 227px;
	bottom: 0px;
}

#tabs #panel9 .para .anim02 .cat02 {
	position: absolute;
	right: 32px;
	bottom: 44px;
}

#tabs #panel9 .para .anim03 .cat04 {
	position: absolute;
	left: 39px;
	bottom: 12px;
}

#tabs #panel9 .para .anim01 .ya,
#tabs #panel9 .para .anim02 .ya {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

#tabs #panel9 .para .anim01 .ya_back,
#tabs #panel9 .para .anim02 .ya_back,
#tabs #panel9 .para .anim03 .ya_back {
	position: absolute;
	bottom: 15px;
	right: 10px;
}

/* popup */

#story_cont {
	background: url(/hebel/topics/shizengocochi/images/shizen_story_bg.jpg) no-repeat;
	width: 960px;
	height: 612px;
	position: relative;
}

#story_cont .image_bg {
	background: url(/hebel/topics/shizengocochi/images/shizen_story_papa_img.jpg) no-repeat 396px 17px;
	height: 612px;
}

#story_cont .image_bg_mama {
	background: url(/hebel/topics/shizengocochi/images/shizen_story_mama_img.jpg) no-repeat 386px 17px;
	height: 612px;
}


#story_cont .logo {
	padding-top: 40px;
	padding-left: 94px;
}

#story_cont h3 {
	padding-left: 40px;
	padding-top: 22px;
}

#story_cont p {
	padding-left: 40px;
	padding-top: 21px;
}

/*#story_cont .btn {
	padding-left: 46px;
	padding-top: 56px;
}*/

#story_cont .btn.papa {
	padding-top:56px;
	padding-left: 46px;
}

#story_cont .btn.mama {
	padding-top:80px;
	padding-left: 46px;
}

#story_cont .close_btn {
	position: absolute;
	top: 7px;
	right: 7px;
}

#level1_cont,
#level2_cont,
#level3_cont {
	width: 808px;
	height: 466px;
	position: relative;
}

#level1_cont .left,
#level2_cont .left,
#level3_cont .left {
	width: 370px;
	float: left;
	padding-left: 40px;
	padding-top: 33px;
}

#level1_cont .right,
#level2_cont .right,
#level3_cont .right {
	width: 291px;
	float: left;
	padding-left: 28px;
	padding-top: 9px;
}

#level1_cont .btn_close,
#level2_cont .btn_close,
#level3_cont .btn_close {
	position: absolute;
	right: 0;
	top: 0;
}

#level1_cont .left p,
#level2_cont .left p,
#level3_cont .left p {
	margin-bottom: 17px;
}

#level1_cont .left p.oku {
	padding-top: 61px;
}

#level1_cont .left p.kaze {
	padding-top: 40px;
}

#level1_cont .left p.mado {
	padding-top: 36px;
}

#level2_cont div.bench_bg {
	background: url(/hebel/topics/shizengocochi/images/shizen_level2_img02.jpg) no-repeat 353px 20px;
	height:466px;
}

#level2_cont div.tatami_bg {
	background: url(/hebel/topics/shizengocochi/images/shizen_level2_img03.jpg) no-repeat 353px 20px;
	height:466px;
}

#level2_cont .left p.bench {
	padding-top: 45px;
}

#level2_cont .left p.iroi {
	padding-top: 37px;
}

#level3_cont .left p.mina {
	padding-top: 76px;
}

#level1_cont .left ul li,
#level2_cont .left ul li,
#level3_cont .left ul li {
	float: left;
	margin-right: 13px;
}

#zumen {
	width: 817px;
	height: 501px;
	position: relative;
	text-align: center;
	padding-top: 18px;
}