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

#spa{padding: 450px 0 0 0;}
#spa #container{text-align:center; }


/*----------------------
lead
------------------------*/

#spa #lead{background: url(../img/lead_bg.jpg) right bottom no-repeat; width: 1100px; height: 330px; margin: 0 auto;}
#spa #lead:after{content:''; height:0; display:block; clear:both;}
#spa #lead h3{float: right; margin: 40px 520px 0 0; display: inline;}
#spa #lead p{float: right; margin: 15px 270px 0 0;}

/*----------------------
sec1
------------------------*/
#spa #sec1{background: url(../../spa/img/line_bg.gif) repeat-x #fff; padding: 3px 0 0 0; width: 100%; text-align: left;}
#spa #sec1 div{width: 1100px; margin: 0 auto; background: url(../../spa/img/sec1_bg.jpg) no-repeat right bottom; padding: 50px 0 60px 0;}
#spa #sec1 h3{padding: 0 0 50px 0;}

/*----------------------
s_nav
------------------------*/
#spa #s_nav{width: 100%; background: url(../../spa/img/line_bg.gif) repeat-x; padding: 36px 0 24px 0;}
#spa #s_nav ul{width: 1100px; margin: 0 auto;}
#spa #s_nav ul:after{content:''; height:0; display:block; clear:both;}
#spa #s_nav li{float: left; margin: 0 25px 0 0;}
#spa #s_nav .last{margin: 0;}


/*----------------------
sec2
sec2の背景位置はjsで制御
------------------------*/
#spa #sec2{width: 100%; background: url(../../spa/img/sec2_bg.jpg) no-repeat; margin: 0 auto; padding: 60px 0 45px 0;}
#spa #sec2 div{ width: 1100px; margin: -55px auto 0 auto; text-align: left; padding: 55px 0 45px 0; position: relative;}
#spa #sec2 div:after{content:''; height:0; display:block; clear:both;}
#spa #sec2 dl{float: left; width: 285px; text-align: center;}
#spa #sec2 dt{ padding: 27px 0 60px 0; }
#spa #sec2 dd p{padding: 0 25px 20px 25px; width: 230px; margin: 0 auto; text-align: left;}
#spa #sec2 .pict{float: right; color: #b85a27; width: 785px;}
#spa #sec2 .pict img{display: block; margin: 0 0 20px 0;}

#spa #sec2 .con2{padding: 0px 0 112px 0; background: url(../../spa/img/sec2_bg3.jpg) no-repeat center bottom; margin: 0 auto;}
#spa #sec2 .con2 dl{float: right; width: 301px;}
#spa #sec2 .con2 dt{background: url(../../spa/img/sec2_bg2.jpg) no-repeat; padding: 86px 0 73px 0; margin: -38px 0 0 0; position: relative;}
#spa #sec2 .con2 .pict2{position: absolute; bottom:55px; right: 184px;}

/*----------------------
sec3
------------------------*/
#spa #sec3_col{width: 100%; padding: 55px 0 0 0; margin: -55px 0 50px 0; color: #fff;}
#spa #sec3_col h3{background: url(../../spa/img/line_bg2.jpg) repeat-x 0 49px;}
#spa #sec3{width: 1100px; margin: 0 auto; background: url(../../spa/img/sec3_bg.jpg); text-align: left;}
#spa #sec3:after{content:''; height:0; display:block; clear:both;}
#spa #sec3 div:after{content:''; height:0; display:block; clear:both;}
#spa #sec3 dd{text-align: left; margin: 54px 0 72px 0; width: 300px;}
#spa #sec3 .pict{float: right;}

#spa #sec3 .con1{background: url(../../spa/img/sec3_bg2.jpg)no-repeat left bottom; padding: 27px 0 0 62px;}
#spa #sec3 .con1 dl{margin: -27px 0 0 0; width: 300px; float: left; text-align: center;}

#spa #sec3 .con2{background: url(../../spa/img/sec3_bg3.jpg) no-repeat right bottom;}
#spa #sec3 .con2 dl{float: right; width: 377px; margin: 59px 0 0 0; text-align: left;}
#spa #sec3 .con2 dd{margin: 54px 0 0;}
#spa #sec3 .con2 .pict{float: left;}
#spa #sec3 .con2 .detail{clear: both; padding: 0px 25px 25px 25px; float: none; width: 690px; margin: 0;}
#spa #sec3 .con2 .detail:after{content:''; height:0; display:block; clear:both;}
#spa #sec3 .con2 .detail dt{width: 53px; float: left; background: url(../../spa/img/sec3_bg4.jpg); padding: 3px 7px; margin: 30px 0 0px 0; text-align: center;}
#spa #sec3 .con2 .detail .txt{width: 200px;}
#spa #sec3 .con2 .detail dd{float: left; margin: 30px 0 0px 0; width: 317px; padding: 3px 8px;}


/*----------------------
sec4
------------------------*/
#spa #sec4{width: 100%; display: inline-block; padding: 55px 0 0 0; margin: -55px 0 0px 0;}
#spa #sec4 h3{background: url(../../spa/img/line_bg2.jpg) repeat-x 0 49px;}
#spa #sec4 .section{background: url(../../spa/img/sec4_bg.jpg) repeat-x; width: 1100px; margin: 0 auto 60px auto; text-align: left;}
#spa #sec4 .section:after{content:''; height:0; display:block; clear:both;}
#spa #sec4 dl{width: 270px; padding: 0 0 0 20px; float: left;}
#spa #sec4 dd{padding: 0 13px;}
#spa #sec4 .pict{float: right;}

#spa #sec4 .con1{position: relative;}
#spa #sec4 .con1 dd{padding: 0 0 81px 0;}
#spa #sec4 .con1 .simg{position: absolute; bottom: 7px; left: 190px;}

#spa #sec4 .con2 dl{float: right;}
#spa #sec4 .con2 .pict{float: left;}


/*----------------------
info
------------------------*/

#spa #info{width: 1052px; background: url(../../spa/img/info_bg.jpg) no-repeat center bottom #000; margin: 0 auto; text-align: left; padding: 0 48px 35px 0; color: #fff; font-size: 1.1em;}
#spa #info:after{content:''; height:0; display:block; clear:both;}
#spa #info h3{float: left;}
#spa #info div{float: right; width: 700px; padding: 34px 0 0 0;}
#spa #info h4{background: url(../../spa/img/info_tit_bg.jpg) repeat-x bottom; color: #ffe062; font-weight: bold; padding: 10px 0px 10px 13px; font-size: 1.1em; letter-spacing: 0.15em; margin: 0 0 19px 0;}
#spa #info table{font-size: 0.85em; margin: 24px 0 12px 0; width: 700px;}
#spa #info th,
#spa #info td{padding: 7px 15px;  border-top: 1px solid #5b4e45; border-bottom: 1px solid #5b4e45;}
#spa #info th{text-align: center; border-right: 1px dotted  #5b4e45;}
#spa #info td{width: 530px;}
#spa #info .con1 td{width: 590px;}