@charset "UTF-8";
/***----------------------------------------------------------------
styles.css
Copyright Living Tomato. All rights reserved.
--------------------------------------------------------------- ***/

/***------------
default
------------***/
body {
font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Verdana;
text-align: justify;
line-height: 1.3em;
font-size: 100%;
color: #333333;
text-align: left;
background: url(../img/bg.gif);
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, hr {
margin:0px;
padding:0px;
}
table {
border-collapse:collapse;
border-spacing:0px;
}
fieldset, img {
border:none;
}
ol, ul {
list-style:none;
}
h1, h2, h3, h4, h5, h6, address, caption, cite, code, dfn, em, th, var, caption, th, optgroup {
font-size:100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
text-align:left;
}
q:before, q:after {
content:'';
}
a{
overflow:hidden;
}
strong {
font-weight:bold;
}

/***------------
common
------------***/
.hidden {
position: absolute;
left: -1000px;
top: -1000px;
height: 0px;
width: 0px;
overflow: hidden;
font-size: 0px;
display: block;
}
.right {
float: right;
}
.center {
text-align: center;
}
.left {
float: left;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */
.photo_l {
margin: 0px 10px 10px 0px;
}
* html id {
margin: 0px;
padding: 0px;
}
.photo_border {
padding: 1px;
border: 1px solid #C6E7B9;
}
.line-height {
line-height: 2em;
}
.pagetop {
position: relative;
margin: 20px 0px 0px 0px;
text-align: right;
clear: both;
}
.pagetop2 {
margin: 20px 0px 0px 0px;
text-align: right;
clear: both;
}

/***------------
color font-size
------------***/
.strong {
font-weight: bold;
}
.font-red {
color: #FF0000;
}
.font-orange {
color: #F4C23C;
}
.font-size13 {
font-size: 80%;
line-height: 1.3em;
}

/***------------
default link
------------***/
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
color: #50BB36;
text-decoration: underline;
}
a:active {
color: #555555;
text-decoration: underline;
}

/***------------
header contents
------------***/
#HEAD {
position: relative;
height: 332px;
margin: 0px auto;
background: url(../topimg/bg_topimg.jpg) no-repeat;
clear: both;
}
#HEAD h1 a {
position: absolute;
left: 0px;
top: 99px;
width: 350px;
height: 233px;
overflow: hidden;
display: block;
text-indent: -9999px;
background: url(../img/logo.jpg) no-repeat ;
}
#HEAD .seo {
padding: 7px 0px 0px 0px;
font-size: 70%;
line-height: 0.8em;
text-align: right;
color: #CCB248;
}
#HEADERMENU {
position: absolute;
width: 760px;
height: 63px;
left: 350px;
top: 248px;
background: url(../img/menu.gif) no-repeat ;
}
#HEADERMENU li {
float: left;
height: 63px;
display: block;
}
#HEADERMENU li a {
height: 63px;
overflow: hidden;
display: block;
text-indent: -9999px;
}
#HEADERMENU .MENU01 { width: 28px; background: url(../img/menu.gif) no-repeat 0px 0px; }
#HEADERMENU .MENU01 a:hover { width: 28px; background: url(../img/menu.gif) no-repeat 0px -63px; }

#HEADERMENU .MENU02 { width: 130px; background: url(../img/menu.gif) no-repeat -28px 0px; }
#HEADERMENU .MENU02 a:hover { width: 130px; background: url(../img/menu.gif) no-repeat -28px -63px; }

#HEADERMENU .MENU03 { width: 130px; background: url(../img/menu.gif) no-repeat -158px 0px; }
#HEADERMENU .MENU03 a:hover { width: 130px; background: url(../img/menu.gif) no-repeat -158px -63px; }

#HEADERMENU .MENU04 { width: 130px; background: url(../img/menu.gif) no-repeat -288px 0px; }
#HEADERMENU .MENU04 a:hover { width: 130px; background: url(../img/menu.gif) no-repeat -288px -63px; }

#HEADERMENU .MENU05 { width: 130px; background: url(../img/menu.gif) no-repeat -418px 0px; }
#HEADERMENU .MENU05 a:hover { width: 130px; background: url(../img/menu.gif) no-repeat -418px -63px; }

#HEADERMENU .MENU06 { width: 130px; background: url(../img/menu.gif) no-repeat -548px 0px; }
#HEADERMENU .MENU06 a:hover { width: 130px; background: url(../img/menu.gif) no-repeat -548px -63px; }

#HEADERMENU .MENU07 { width: 82px; background: url(../img/menu.gif) no-repeat -678px 0px; }
#HEADERMENU .MENU07 a:hover { width: 82px; background: url(../img/menu.gif) no-repeat -678px -63px; }

#MENUSUB {
position: absolute;
width: 232px;
height: 15px;
left: 210px;
top: 20px;
}
#MENUSUB li {
height: 15px;
float: left;
display: block;
}
#MENUSUB a.subMenu01 { height: 15px; width: 70px; margin-right: 10px; overflow: hidden; display: block; text-indent: -9999px; background: url(../img/smenu_01.gif) no-repeat; }
#MENUSUB a.subMenu02 { height: 15px; width: 59px; margin-right: 10px; overflow: hidden; display: block; text-indent: -9999px; background: url(../img/smenu_02.gif) no-repeat; }
#MENUSUB a.subMenu03 { height: 15px; width: 83px; margin-right: 0px; overflow: hidden; display: block; text-indent: -9999px; background: url(../img/smenu_03.gif) no-repeat; }

.line {
height: 14px;
margin: 2px 0px 2px 0px;
background: #C5BB7E;
}

/***------------
top contents
------------***/
#TOP {
position: relative;
width: 927px;
_width:1077px;
text-align: left;
padding: 0px 0px 0px 150px;
margin: 0px 0px 0px 0px;
background: url(../topimg/bg_topbtm.jpg) no-repeat;
float: left;
}
#TOP_LEFT {
width: 530px;
float: left;
}
#TOP_LEFT .bathtub {
width: 530px;
clear: both;
}
#TOP_LEFT h2 {
margin: 0px 0px 6px 0px;
}
#TOP_LEFT .pho_left {
width: 256px;
margin: 0px 0px 14px 0px;
float: left;
}
#TOP_LEFT .pho_left p {
margin: 5px 0px 0px 0px;
font-size: 80%;
line-height: 1.5em;
}
#TOP_LEFT .pho_right p {
margin: 5px 0px 0px 0px;
font-size: 80%;
line-height: 1.5em;
}
#TOP_LEFT .pho_right {
width: 256px;
margin: 0px 0px 14px 0px;
float: right;
}
#TOP_LEFT .toptxt_right {
width: 256px;
margin: 0px 0px 14px 0px;
font-size: 80%;
line-height: 1.5em;
float: right;
}
#TOP_LEFT .toptxt_center {
width: 530px;
margin: 0px 0px 14px 0px;
font-size: 80%;
line-height: 1.5em;
float: left;
}
#TOP_LEFT .pho{
}
#TOP_LEFT p {
height: 20px;
}

#TOP_RIGHT {
width: 305px;
margin: 55px 0px 0px 0px;
float: right;
}
#TOP_RIGHT .bn1 {
margin: 0px 0px 0px 5px;
}
#TOP_RIGHT .bn2 {
margin: 0px 0px 18px 5px;
text-align: right;
}
#TOP_RIGHT .mini_bn{
width: 210px;
margin: 50px 0px 0px 98px;
}
#TOP_RIGHT .mini_pho1{
width: 70px;
float: left;
}
#TOP_RIGHT .txt {
text-align: right;
padding: 5px 0px 0px 0px;
clear: both;
}

/***------------
footer contents
------------***/
#FOOTER {
position: relative;
width: 1248px;
height: 200px;
overflow: hidden;
background: url(../img/bg_footer.gif) top left;
clear: both;
}
#FOOTER .smenu {
padding: 115px 0px 0px 280px;
}
#FOOTER .copyright_top {
padding: 20px 0px 0px 500px;
}
#FOOTER .copyright {
padding: 20px 0px 0px 500px;
}

/***------------
footer2 contents
------------***/
#FOOTER2 {
position: relative;
width: 1248px;
height: 200px;
overflow: hidden;
background: url(../img/bg_footer.gif) top left;
clear: both;
}
#FOOTER2 .smenu {
padding: 115px 0px 0px 280px;
}
#FOOTER2 .copyright {
padding: 20px 0px 0px 500px;
}

/***------------
contents
------------***/
#CONTENT {
position: relative;
width: 927px;
_width:1077px;
text-align: left;
padding: 0px 0px 0px 150px;
margin: 0px 0px 0px 0px;
background: url(../img/bg_left2.jpg) left top no-repeat;
float: left;
}
#CONTENT h2 {
margin: 0px 0px 10px 0px;
clear: both;
}
#CONTENT .box {
width: 920px;
margin: 0px 0px 30px 0px;
text-align: left;
font-size: 80%;
line-height: 1.4em;
float: left;
}
#CONTENT h3 {
margin: 0px 0px 10px 0px;
clear: both;
}
#CONTENT h4 {
width: 885px;
background: url(../img/stt_h4.gif) no-repeat;
color: #2D0000;
font-size: 100%;
line-height: 1.4em;
padding: 5px 0px 5px 35px;
margin: 0px 0px 10px 0px;
font-weight: bold;
clear: both;
}
#CONTENT .waku_top {
width: 850px;
_width: 920px;
background: url(../../lifewithtree/img/waku_top.gif);
padding: 35px 35px 0px 35px;
clear: both;
}
#CONTENT .waku_bg {
width: 840px;
_width: 920px;
padding: 0px 40px 0px 40px;
background: url(../../lifewithtree/img/bg_waku.gif) ;
float: left;
}
#CONTENT .waku_btm {
width: 850px;
_width: 920px;
height: 35px;
background: url(../../lifewithtree/img/waku_btm.gif) bottom;
padding: 0px 35px 0px 35px;
clear: both;
}
#CONTENT .pho_right2 {
float: right;
}

/***------------
LIFE
------------***/
#LIFE .txt_left {
width: 510px;
margin: 0px 0px 0px 0px;
float: left;
}
#LIFE .pho_right {
width: 390px;
margin: 0px 0px 0px 0px;
float: right;
}
#LIFE .txt_right {
width: 510px;
margin: 0px 0px 0px 0px;
float: right;
}
#LIFE .pho_left {
width: 390px;
margin: 0px 0px 0px 0px;
float: left;
}
#LIFE .pho_left2 {
width: 28px 0px;
margin: 0px 0px 0px 0px;
float: left;
}
#LIFE .txt_left2 {
width: 620px;
margin: 0px 0px 0px 0px;
float: left;
}

/***------------
STICK
------------***/
#STICK .txt {
margin: 0px 0px 20px 0px;
}
#STICK .pho_left {
width: 280px;
margin: 0px 25px 20px 0px;
float: left;
}
#STICK .txt_left {
width: 590px;
margin: 0px 0px 0px 0px;
float: left;
}
#STICK .pho_right {
width: 280px;
margin: 0px 30px 0px 0px;
float: right;
}
#STICK .txt_right2 {
width: 590px;
margin: 0px 0px 0px 0px;
float: left;
}
#STICK .pho_left2 {
width: 280px;
margin: 0px 30px 0px 0px;
float: left;
}


/***------------
ORIGINAL
------------***/
#ORIGINAL .stt {
width: 270px;
padding: 3px 0px 3px 8px;
margin: 0px 0px 10px 0px;
border-bottom: 1px solid #CCCCCC;
border-left: 3px solid #6b9912;
font-weight: bold;
}
#ORIGINAL .pho_left {
width: 280px;
margin: 0px 25px 20px 0px;
float: left;
}
#ORIGINAL .btn {
margin: 5px 0px 0px 0px;
text-align: right;
}

/***------------
DETAILS
------------***/
#DETAILS .stt {
width: 905px;
padding: 3px 0px 3px 10px;
margin: 0px 0px 10px 0px;
border-bottom: 1px solid #CCCCCC;
border-left: 5px solid #6b9912;
font-weight: bold;
font-size: 130%;
line-height: 1.4em;
}
#DETAILS .pho_left {
width: 400px;
margin: 0px 20px 20px 0px;
float: left;
}
#DETAILS .pho_left1 {
width: 280px;
margin: 0px 25px 20px 0px;
float: left;
}
#DETAILS .txt {
}
#DETAILS .txt_right {
width: 400px;
margin: 0px 0px 0px 0px;
float: left;
}
#DETAILS .txt_right1 {
width: 400px;
}
#DETAILS .txt_right2 {
width: 400px;
font-size: 130%;
line-height: 1.4em;
text-align: left;
font-weight: bold;
}
#DETAILS .txt_right3 {
width: 400px;
font-size: 130%;
line-height: 1.4em;
text-align: left;
font-weight: bold;
margin: 0px 0px 10px 0px;
color: #CC0000;
}

/***------------
WITHTREE
------------***/
#WITHTREE {
}
#WITHTREE .txt {
margin: 0px 0px 20px 0px;
font-size: 80%;
line-height: 1.5em;
}

/***------------
GALLERY
------------***/
#GALLERY {
}
#GALLERY .pho_left1 {
width: 280px;
margin: 0px 25px 20px 0px;
float: left;
}
#GALLERY .txt {
}

/***------------
ORDER
------------***/
#ORDER .txt {
margin: 0px 0px 20px 0px;
}
#ORDER .pho_left {
width: 280px;
margin: 0px 25px 20px 0px;
float: left;
}
#ORDER .txt_left {
width: 590px;
margin: 0px 0px 0px 0px;
float: left;
}
#ORDER .pho_right {
width: 280px;
margin: 0px 30px 0px 0px;
float: right;
}


/***------------
table
------------***/
#TABLE {
position: relative;
clear: both;
}
#TABLE table {
border-collapse: separate;
border-spacing: 0px;
border-right: 1px solid #bcbf8a;
border-bottom: 1px solid #bcbf8a;
margin: 0px 0px 20px 0px;
}
#TABLE td,th {
font-weight: normal;
border-top: 1px solid #bcbf8a;
border-left: 1px solid #bcbf8a;
padding: 10px;
_font-size: 13px;
font-family: Verdana
}
#TABLE .color1 {
background: #e6e8c8;
font-weight: bold;
}
#TABLE .color2 {
background: #D6E7CE;
}
#TABLE th {
}
#TABLE td {
}