@charset "UTF-8";
@import "base.css";
@import "fonts.css";

/*==========================================================================*/
/*//////////////////////////////////////////////////////////////////////////*/
/*//////                                                              //////*/
/*//////  Copyright (C) 2009 株式会社フリーセル All Rights Reserved.  //////*/
/*//////                                                              //////*/
/*//////////////////////////////////////////////////////////////////////////*/
/*                                                                          */
/*    base.css   スタイルの初期設定を行うため、変更しないで下さい。      */
/*    fonts.css  フォントの初期設定を行うため、変更しないで下さい。      */
/*                                                                          */
/*==========================================================================*/

/*==========================================================================*/
/*                           Common-Setting                                 */
/*==========================================================================*/

/* 基本タグのフォントサイズを指定（12px -> 120% or 1.2em ） */
h1,h2,h3,h4,h5,h6,input,button,textarea,select,p,blockquote,th,td,pre,address,li,dt,dd {
	font-size: 140%;
}
	
h1 {} /* Header内で設定 */
h2 {}
h3 {}
h4 {}

a { color: #f41; }
a:hover,
a:active { color: #f96; text-decoration: none; }
a:visited {
}

input {margin-right:10px;  padding:0; }

h6 {
	padding-bottom: 8px;
	text-align: left;
	color:#3aa945;
	font-size:14px;
	border-bottom:1px solid #CCC;
	margin-bottom:15px;
}

ul {
}
li {
}

dl {
}
dt {
}
dd {
}

table {
	border-collapse:collapse;
	border:1px solid #d8d6d7;
	width:100%;
}

th,
td {
	border:1px solid #d8d6d7;
	line-height:25px;
}
th {	
	text-align:center;
	padding:8px;
	background:#f3f3e7 ;
	font-weight:700;
}

td{
	text-align:left;
	padding:8px;
	vertical-align:top;
	background:#FFFFFF;
}

p { margin: 0 0 8px; line-height:25px;}

.section { margin:0 0 30px 0; }

#index .section { margin:0 10px 30px 9px; }
.section01 {  margin:0 0 20px 0;}

.image_l { float: left; margin: 5px 16px 8px 0; }
.image_r { float: right; margin: 5px 0 8px 16px;}
.image_l02 { float: left; margin: -15px 0px 8px 0; }
.image_l03 { float: left; margin: 5px 16px 8px 30px; }
.image_r02 { float: right; margin: 55px 0 8px 16px;}

.img_bd { border:1px #dbdad8 solid; padding:1px; }

.case {
	margin: 10px 50px 30px ;
	background: url(../images/arrow_02.png) center center no-repeat;
	height:auto;
}

.case01 {
	margin: 10px 20px 30px ;
	background: url(../images/arrow_02.png) center center no-repeat;
	height:auto;
}

.case02 {
	margin: 10px 20px 20px ;
	background: url(../images/arrow_02.png) center center no-repeat;
	height:auto;
}

.center {
	text-align:center;
}

.pagetop { 
	text-align:right;
	clear:both;
	margin:0px 10px 0px 0;
	}
	
#index .pagetop { 
	margin:50px 10px 15px 0;
	}

strong { font-weight:700; color:#6f6f6f; }

.colo_O { color:#ff6e00; }
.colo_G { color:#3479c6;}
.colo_B { color:#2e59b2;}
.colo_R { color:#a33600;}
.colo_P { color:#9d762b;}

.bold { font-weight:700;}

.jp { font-family: "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;}

.font_18 { font-size:18px;}

.list { 
	margin-left:20px;
}

.list li { 
	background:url(../images/icon_02.jpg) 0 5px no-repeat ;
	padding-left:16px;
	line-height:22px;
	margin-bottom:10px;
}

.list li.none { 
	background:none ;
	padding-left:0px;
}

.box_l
{
	float:left;
	width:650px;
}

.box_r
{
	float:right;
	width:250px;
}

.box_l01
{
	float:left;
	width:670px;
}

.box_r01
{
	float:right;
	width:280px;
}

/* add
------------------------------------------------------------------------*/
.mb0 { margin-bottom : 0px; }
.mb05 { margin-bottom : 5px; }
.mb10 { margin-bottom : 10px; }
.mb12 { margin-bottom : 12px; }
.mb15 { margin-bottom : 15px; }
.mb20 { margin-bottom : 20px; }
.mb25 { margin-bottom : 25px; }
.mb30 { margin-bottom : 30px; }
.mb40 { margin-bottom : 40px; }

.mt0 { margin-top : 0px; }
.mt05 { margin-top : 5px; }
.mt10 { margin-top : 10px; }
.mt15 { margin-top : 15px; }
.mt20 { margin-top : 20px; }

.ml01 { margin-left:35px; }

/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/

html {
	background: none;
}

body {    
	color: #6f6f6f;
	text-align: center;
}


#wrapper {
	background: url(../images/contents_bg.jpg) 50% 0 repeat-x;
	margin: 0 auto;
}

#wrapper01 {
	margin: 0 auto;	
	width:1000px;
}

#index #wrapper {
	background: url(../images/index_bg.jpg) 50% 0 repeat-x;
	margin: 0 auto;
}


#main {
	/*width: 981px;*/
	margin: 0px auto 20px;
	text-align: center;
}

#index #main {
	width: 1000px;
	margin: 0px auto ;
	text-align: center;
	padding:0;
}

#content {
	width: 715px;
	text-align: left;
	float: right;
}

#index #content {
	width: 1000px;
	text-align: left;
	float: none;

}


#content h3 {
	margin-bottom:25px;
	border-bottom:1px solid #e1e1e2;
	padding:0 0 10px 0;
	color:#3aa945;
	font-weight:700;
	font-size:20px;
	clear:both;
}

#content .box_h4 {
	margin-bottom:25px;
	clear:both;
}

#content h4 {
	margin-bottom:20px;
	border-bottom:1px dotted  #e1e1e2;
	padding:3px 0 10px 15px;
	color:#72a812;
	font-weight:700;
	font-size:16px;
	background:url(../images/icon_01.jpg) 0 0 no-repeat;
	clear:both;
}

#content .box_h5 {
	margin-top:20px;
	clear:both;
}

#content h5 {	
	margin-bottom:20px;
	border-bottom:2px dotted  #c3d92f;
	padding:3px 0 15px 28px;
	color:#6a6964;
	font-weight:700;
	font-size:16px;
	background:url(../images/icon_03.jpg) 0 0 no-repeat;
	clear:both;
}

.box01 { background:url(../images/basic_bg_02.jpg) repeat-y;
	padding:15px 25px 10px;
	margin:0;
	width:660px;
}

.box02 {
	background:url(../images/box_02.jpg) 0 0 no-repeat;
	padding:40px 40px 0;
	width: 630px;
	margin:0 0 30px 0;
}

.box03 {
	background:url(../images/box_04.jpg) 0 0 repeat-y;
	padding:10px 20px 10px;
	width: 590px;
	margin:0 0 0px 0;
}

.box04 {
	background:#faf8e1;
	padding:20px 20px 10px;
	border:1px solid #e1e1e2;
}

.box05 {
	margin:0 0 20px;
	height:auto;
	background: url(../images/arrow_02.png) center center no-repeat;	
	clear:both;
}


.box05 .box_h95 {
	min-height:95px;
}

.box05 .box_h120 {
	min-height:120px;
}

.box05 .box_h220 {
	min-height:220px;
}

.box05 .box_l ,
.box05 .box_r{
	width:250px;
	background:#f2f2f2;
	padding:10px 15px 0;
}

.box05 .txt {
	margin-bottom:10px;
	border-bottom:2px dotted  #c3d92f;
	color:#0070c0;
	padding-left:10px;
}

.txt_box { 
	border:1px solid #e1e1e2;
	padding:10px 15px;
	text-align:center;
	font-weight:700;
	clear:both;
}

.txt_box01 { 
border:1px solid #e1e1e2;
	padding:10px 15px;
	text-align:center;
	clear:both;
}

.txt01 {
	text-align:center;
	font-weight:700;
	color:#72a812;
	font-size:18px;
	margin:0 0 15px;
	padding-bottom:5px;
	border-bottom:1px dotted #72a812;
}

.brn_link li { float:left;
margin:0 0 5px 10px;}

.brn_link li.first { float:left;
margin:0 0 0 5px;}

.brn_link li.first1 { float:left;
margin:0 0 0 0px;}

.gMap { border:1px solid #e1e1e2;}

/*==========================================================================*/
/*                               Header                                     */
/*==========================================================================*/

#header {
	width: 1000px;
	height:150px;
	margin:0 0 20px;
	background: url(../images/contents_bg.jpg) 0 top repeat-x;
	position: relative;
	}
	
#index #header {
	width: 1000px;
	height:504px;
	background:url(../images/index_bg.jpg) 0 top repeat-x;
	}

#header .logo { float: left; margin:24px 0 20px 9px; padding:0;}

#header .header01 { float:right;
text-align:right;
margin:0px 9px 0 0 0;
}

#header .header01 li{ 
	float:right;	
	margin:0 0 0 5px;
	padding:0;
}

#header .header01 .gnavi li{ 
	float:left;	
	margin:0;
}

#header .header01 ul{ 
	clear:both;
	margin:0 0 15px;
}

#wrapper01 h1 {
	font-size: 1.05em;
	position:absolute;
	top:0;
	left:0px;
	margin:6px 0 0;
	color:#383838;
	
}

#header h2{ 
	text-align:center;
	clear:both;
}



/*==========================================================================*/
/*                              Footer                                      */
/*==========================================================================*/

#footer {
	max-width:100%;
	min-width:1000px;
	position:relative;
	background:url(../images/footer_bg.jpg) 50% 0 no-repeat;
	height:370px;
	clear:both;
}

*:first-child+html #footer {
	max-width:100%;
	min-width:1000px;
	position:relative;
	background:url(../images/footer_bg.jpg) 50% 0 no-repeat;
	height:370px;
	clear:both;
	margin-bottom:-15px;
}


#footer .footer01{
	width:981px;
	margin:0 auto;
	padding: 25px 0 0 0;
	font-size:80%;
	position:relative;
}

#footer .footer01 a{
	color:#8e8e8e;
}

#footer .footer01 a:hover,
#footer .footer01 a:active{
	color:#8e8e8e;
	text-decoration:none;
}

#footer .footer01 ul{
	padding:0 0 0 100px;
}

#footer .footer01 ul li {
	float:left;
	margin:0 20px 0 0;
}

#footer .footer01 .ft_link {
	clear:both;
	margin:0px 0 0 15px;
	padding:25px 0 0 0;
	position:relative;
	z-index:200;
}

#footer .footer01 .ft_link  ul{
	 width:220px;
	 float:left;
	 padding:0 0 0 15px;
	 border-left:1px dashed #d4d4d4;
}

#footer .footer01 .ft_link  ul li{
	float:none;
	text-align:left;
	margin-bottom:5px;	
}

#footer .footer01 .ft_link  ul li.last{
	margin-bottom:0px;	
}

.footer_out .ft_logo {
	float:left;
	width:290px;
}

.footer_out address {
	float:right;
	margin:5px 10px 0 0;
}


.footer_out .ft_office {
	float:left;
	width:370px;
}


/*==========================================================================*/
/*                             Contents                                     */
/*==========================================================================*/

/* index
------------------------------------------------------------------------*/

#index .idx_box01 {
	background:url(../images/box_01.jpg) 0 0 no-repeat;
	padding:40px 35px 0;
	width: 930px;
}

#index .idx_box02 {
	clear:both;
}

#index .idx_box03 {
	margin-bottom:35px;
	padding:40px 35px;
	clear:both;
}

#index .idx_img {
	margin-bottom:40px;
}

#index .idx_img li{
	float:left;
	margin:0 4px 0 0;
}

#index .idx_img li.last{
	margin-right:0px;
}


/* faq
------------------------------------------------------------------------*/
#faq table {
	margin-bottom:25px;
}

#faq .q {
	background:url(../images/q.jpg)  10px 10px no-repeat;
	padding:12px 15px 15px 55px;
	font-weight:700;
	margin:0;
	color:#72a812;
	border:1px solid #d8d6d7;
}

#faq .q a {
	color:#72a812;
	text-decoration:none;
}

#faq .q a:hover ,
#faq .q a:active{
	color:#72a812;
	text-decoration:underline;
}

#faq .a {
	background:url(../images/a.jpg)  30px 5px no-repeat;
	padding:10px 15px 10px 72px;
	margin:0 0 0px 0;
	border:1px solid #d8d6d7;
	border-top:0;
}

#faq .b_none {
	margin:0 0 20px 0;
}



/* skeletonreform
------------------------------------------------------------------------*/
#skeletonreform th {	
	background:#FFF;
}

/* flow
------------------------------------------------------------------------*/
#flow table {	
	margin-bottom:8px;
}

#flow table.tbl02 th,
#flow table.tbl02 td {
	border-color:#ff933b;
}

#flow table.tbl02 th { background:#ecd58f;}

#flow table.mb30 {	
	margin-bottom:30px;
}

#flow th {	
	text-align:left;
}

/* start
------------------------------------------------------------------------*/
#start table {	
	margin-bottom:25px;
}

#start table td.w75 {	
	width:75%;
}

#start table td {	
	width:50%;
}

#start .start_box {	
	position:relative;
}

#start .start_box .img01{
	position:absolute;
	left: 86px;
	top: 170px;
}

#start .start_box .img02{
	position:absolute;
	left: 87px;
	top: 253px;
}

#start .start_box .img03{
	position:absolute;
	left: 224px;
	top: 172px;
}

#start .start_box .img04{
	position:absolute;
	left: 448px;
	top: 170px;
}

#start table.w350 {	
	float:right;
	width:350px;
	margin-top:5px;
}

.box_h6 { clear:both; margin-bottom:20px;}

#start .idx_img {
	margin-bottom:40px;
}

#start .idx_img li{
	float:left;
	margin:0 10px 10px 0;
}

#start .idx_img li.last{
	margin-right:0px;
}

.arrow { float:left; margin:60px 0px 0 40px;}

/* living
------------------------------------------------------------------------*/

#living table td {	
	width:50%;
}

#living #pkup_js .beta { width: 350px;float: right;  }

#living #pkup_js .alpha {
	  padding: 0;
	  width: 240px;
	  height: 280px;
	  float: left;
	  }

 
#living #pkup_img {
    width: 240px;
		height: 280px;
		position: relative;
		margin: 0; 
		}
		
.con {display: none;}
.atv {display: block !important;}
.beta a:hover,
.beta a { color: #6F6F6F; text-decoration: underline; }

.beta a:hover { color: #fd8c30; text-decoration: none; }

#living  #pkup_js .beta p.topic { 
	background:none;
	padding-left:0;
	color:#0070c0;
	text-indent:-30px;
	width:390px;
}
	/* wa
------------------------------------------------------------------------*/



#wa #pkup_js .beta { width: 350px;float: right;  }

#wa #pkup_js .alpha {
	  padding: 0;
	  width: 240px;
	  height: 180px;
	  float: left;
	  }
 
#wa #pkup_img {
    width: 240px;
		height: 180px;
		position: relative;
		margin: 0; 
		}
		
#wa  #pkup_js .beta p.topic { 
	background:none;
	padding-left:0;
	color:#0070c0;
	text-indent:-30px;
	width:390px;
}


/* kitchen
------------------------------------------------------------------------*/

#kitchen table td {	
	width:50%;
}

#kitchen #pkup_js .beta { width: 350px;float: right;  }

#kitchen #pkup_js .alpha {
	  padding: 0;
	  width: 240px;
	  height: 240px;
	  float: left;
	  }

 
#kitchen #pkup_img {
    width: 240px;
		height: 240px;
		position: relative;
		margin: 0; 
		}
		
#kitchen  #pkup_js .beta p.topic { 
	background:none;
	padding-left:0;
	color:#0070c0;
	text-indent:-30px;
	width:390px;
}

/* bath
------------------------------------------------------------------------*/

#bath table td {	
	width:50%;
}

#bath #pkup_js .beta { width: 350px;float: right;  }

#bath #pkup_js .alpha {
	  padding: 0;
	  width: 240px;
	  height: 240px;
	  float: left;
	  }

 
#bath #pkup_img {
    width: 240px;
		height: 240px;
		position: relative;
		margin: 0; 
		}
		
#bath  #pkup_js .beta p.topic { 
	background:none;
	padding-left:0;
	padding-right:0;
	color:#0070c0;
	text-indent:-30px;
	width:390px;
}

/* front
------------------------------------------------------------------------*/

#front table td {	
	width:50%;
}

#pkup_js .alpha {
	  padding: 0;
	  width: 180px;
	  height: 240px;
	  float: left;
	  }
#pkup_js .beta { width: 390px;float: right;  }
#pkup_js .beta p { display: block;  cursor:pointer;}
#pkup_js .beta p.topic { 
	background:none;
	padding-left:0;
	color:#0070c0;
	text-indent:-45px;
	cursor:default;
	margin-bottom:20px;
}

#pkup_img {
    width: 180px;
		/*height: 200px;*/
		position: relative;
		margin: 0; 
		}
#pkup_img img {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		}
#pkup_img img#default { display: block; }

#pkup_js .beta p{ 
	background:url(../images/icon_02.jpg) 0 5px no-repeat ;
	padding-left:16px;
	line-height:22px;
}

#pkup_js{ 
	margin:20px 0;
}


/*==========================================================================*/
/*                            navigation                                    */
/*==========================================================================*/

#navi {
	float: left;
	width: 250px;
	text-align: center;
	margin:8px 0 0 10px;
}


#navi .navi01 {
	border:1px solid #e1e1e2;
	padding-bottom:3px;
	margin:-1px 0 25px;
}


#navi .navi01 p {
	margin:0;
}


/* ギャラリー
------------------------------------------------------------------------*/



/*  ========================= alpha */
#gallery a:hover img{ 
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
}
/*  ========================= detail */

#gallery .carousel01{
/*background: url(../images/gallery_bg01.gif) no-repeat top left;
width:690px;
height:640px;*/
position: static;
margin-bottom:20px;
}
#gallery .carousel01 .photo_area{
width:630px;
height:450px;
margin-bottom:20px;
/*padding-top:15px;*/
}
#gallery .carousel01 .photobtn_area{
border-bottom:#dcabab 1px dotted;
border-top:#dcabab 1px dotted;
height:113px;
padding:10px 0;
}	
#gallery p.carousel01_canvas img{
}
#gallery .carousel01 .zoomImg {
max-height: 450px;
max-width: auto;
}
#gallery .carousel01 .carousel01_left{
cursor: pointer;
padding:0;
margin:0;
width:15px;
position:relative;
top:45px;
}
#content .carousel01 .carousel01_right{
cursor: pointer;
padding:0;
margin:0;
position:relative;
top:-70px;
}
#gallery .carousel01 ul.carousel01_images {
height: 113px;
margin:0;
padding:0;
margin-left: 10px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
width: 600px;
}
#gallery .carousel01 ul.carousel01_images li {
float: left;
display:inline;
height: 113px;
margin-right: 10px;
position: absolute;
top: 0px;
left: 0;
width: 150px;
background:none;
padding:0;
text-align:center;

}
#gallery .carousel01 ul.carousel01_images li img {
max-height: 113px;
max-width: 150px;
}

#gallery .carousel01_canvas{
text-align:center;
}
#gallery .carousel01_canvas img{
margin:auto;
}
.btn-detail{
text-align:center;
padding:20px 0px 30px 0px;
}
.btn-detail img{
margin:auto;
}




/* ========================= float */
#gallery .fleft {
	float: left;
		display:inline;
}
#gallery .fright {
	float: right;
		display:inline;
}

#gallery .lightbox_img { 
	float:left;
	margin-right:15px;
	margin-bottom:15px;
	}
	
#gallery .lightbox_img01{ 
	float:left;
	margin-right:0px;
	margin-bottom:15px;
	}


/* ========================= clearfix */
.cf {
	zoom: 1;
}
.cf:after {
	content: '';
	display: block;
	clear: both;
}


/* tab */

.tab {
    margin-bottom: 20px !important;
    width: 100%;
}
.tab li {
    cursor: pointer;
    float: left;
    padding: 0 5px;
}
.tab3btn li {
    padding: 0 4px;
}
#content #tab {
    clear: both;/*
    display: none;*/
}
#tab03_content, #tab02_content, #tab01_content {
    margin: 0 auto;
}

#tab02_content { display: none;}

.tabTitle {
    clear: both;
    font-size: 200%;
    padding-bottom: 20px;
}

#nav { 
	border-bottom: 5px solid #598410;
}

#nav li { 
	background:url(../images/bath_bg_02.jpg) no-repeat 0 0;
	width: 154px;
	height: 33px;
	text-align: center;
	font-size: 200%;
	padding-top: 10px;
}

#nav li.select {
	background:url(../images/bath_bg_01.jpg) no-repeat 0 0;
	color: #fff;
}

/* clearfix
------------------------------------------------------------------------*/

#nav {
	zoom: 1;
}

#nav:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}
.footer_fix { width:970px; margin:0 auto;  }
.footer_out { width: 100%; background: url("../images/footer_fix_bg.jpg"); position:fixed; bottom:0px; padding-top:15px; border-top:3px solid #7ea61f; z-index:99999;}

p.pankuzu  {
	text-align: right;
	font-size: 100%;
	margin: 10px 10px 10px 0;
}