@charset 'utf-8';

/*------------ソート一覧------------*/
/*ローカルナビ（1R~のメニューバー）*/
ul#menu{
    position: relative;
}

ul#menu li{
    width: 100px;
}

ul#menu li a{
    padding: 0 10px;
}

ul#menu li a.no:hover{
    color: #000;
}

#menu ul#sub{
    position: absolute;
    bottom: 25px;
    width: 100px;
    background: rgba(255, 255, 255, 0.7);
    border: none;
}

#menu ul#sub li{
    background: none;
    border-bottom: 1px solid #ddd;
}

/*検索BOX*/
#PlanBox{
	width:920px;
	clear:both;
	padding:22px;
	margin: 10px 0 10px 0;
	position:relative;
	font-size: 12px;
	border: 4px solid #fff;
	float: left;
}

#PlanBox ul {
	width:632px;
	float: left;
}

#PlanBox ul li{
    border-bottom: 1px solid #fff;
    margin: 0px 5px 10px 0px;
    padding-bottom: 8px;
}

#PlanBox div{
    margin: 0px 10px 5px 0px;
    display: inline;
}

#PlanBox ul li div input[type="number"]{
	width: 40px;
}

#PlanBox ul li div label{
	margin-right: 19px;
}

#PlanBox div.Mtype{
    width: 275px;
    height: 111px;
    border: 1px solid #fff;
    float: left;
    margin: 0px 0px 20px 10px;
}

#PlanBox div.Mtype p{
    width: 150px;
    margin: 6px 5px 0px 10px;
    text-align: left;
	line-height:1.5em;
    float: left;
}

#PlanBox div.Mtype p.TT{
    width: 150px;
    margin: 7px 5px 0px 10px;
    text-align: left;
    float: left;
    border-bottom: 1px solid #fff;
    line-height: 1.8em;
	clear: none;
}

#PlanBox div.Mtype p.Mimg{
    float: right;
    width: 100px;
    margin-left: 0;
	position: relative;
    margin-top: 7px;
}

#PlanBox div.Mtype p.Mimg img{
    width: 96px;
}

#PlanBox div.Mtype p.Mimg span.TT {
    display: block;
}

#PlanBox div.Mtype p.submit{
	text-align: center;
	margin-top: 75px;
	line-height: 28px;
	position: absolute;
}

#PlanBox div.Mtype p.submit a {
	width:100%;
	height:100%;
	display: block;
	background: #91928f;
	color: #fff;
	text-decoration: none;
}

#PlanBox div.Mtype p.submit a:hover {
	color: #fff;
	background: #44cccc;
	text-decoration: none;
}
/*
#PlanBox div.Mtype p.submit input[type="submit"] {
	width: 60px;
}*/

#PlanBox input[type="checkbox"]{
    margin: 0px 3px 0px 0px;
    vertical-align: middle;
}

#PlanBox p{
    text-align: center;
    margin: 15px 0 0 0;
}

#PlanBox p.searchbtn{
	clear: both;
}

#PlanBox input[type="submit"] {
	width: 150px;
	height:30px;
	background: #91928f;
	color:#fff;
	border: none;
	padding: 4px;
	text-align: center;
}

#PlanBox input[type="submit"]:hover {
	background: #44cccc;
	cursor: pointer;
}



/*間取りタイプポップアップウィンドウ*/
#BOX01,
#BOX02,
#BOX03,
#BOX04,
#BOX05 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
}

.close {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: fixed;
	background: #000;
	opacity: 0.5;
	z-index: 5;
}

.modal_BOX {
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -300px;
	width: 600px;
	height: 420px;
	text-align: center;
	display: block;
	background: url(/common/images/bg_general.png);
	position: absolute;
	z-index: 1000;
	border: 4px #fff solid;
	padding: 20px;
}

div#modal div.BOX .close{
	opacity: 0.8;
}

.closeBtn_P{
    width: 39px;
    height: 39px;
    position: absolute;
    top: 0;
    right: 0;
}

.closeBtn_P a{
    background: url(/common/images/arrow_large.png) no-repeat top right;
    width: 100%;
    height: 100%;
    display: block;
	text-indent: -9999px;
}

.closeBtn_P a:hover {
	background-position: bottom right;
}

.PLANPOSITION{
	margin-bottom: 20px;
}

.formContainer .PLAN input[type="submit"]{
	width: 150px;
}

.formContainer button {
	width:150px;
	height:30px;
	background: #91928f;
	color:#fff;
	border: none;
	padding: 4px;
	text-align: right;
	margin-top: 5px;
}

.formContainer button:hover {
	background: #44cccc;
	cursor: pointer;
}

.formContainer button small{
	font-size: 10px;
}

.backBtn{
	text-align: left;
}

/* CSS3 ModalWindow SET
-------------------------- 
@-webkit-keyframes modalFadeIn {
	0% {opacity:0.5;display:block;z-index: 1000;}
	100% {opacity:1;}
}*/

div#modal div.BOX:target {
	/*-webkit-animation-name: modalFadeIn; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;*/
	opacity: 1;
	display:block;
	z-index: 1000;
	margin: 0;
	padding: 0;
}	

/*2DKなど間取り選択後のソートページ：間取りタイプを順に選択するパターン*/
.itemInnerPlan{
	width: 100%;
}

.itemInnerPlan p{
	font-size:30px;
	color: #fff;
	opacity: 0.5;
	text-align: center;
}

/*間取りタイプボックス*/
#Panel input[type="radio"] + ul{
    height: 0;
    overflow: hidden;
}

#Panel input[type="radio"]:checked + ul{
    height: 100px;
    width: auto;
    margin: 50px 0px 20px 0px;
    border: 1px solid #BDBDBD;
}

#PlanBox .TYPEBOX,
#PlanBox #LINE,
#PlanBox #LINE01,
#PlanBox #LINE02,
#PlanBox #LINE03,
#PlanBox #LINE04{
	width:100%;
	text-align: center;
	float: left;
	margin-right: 0;
}

.L50{
	width:50%;
	float: left;
	vertical-align: top;
}

.L25_R{
	width:25%;
	float: right;
	vertical-align: top;
}

.L12{
	width:14.28%;
	float: left;
	vertical-align: top;
}

.W_M10{
	margin:0 9%;
}

.TYPEBOX input{
	margin: 3px 5px 0px 0px;
}

#LINE .W50,
#LINE01 .W50,
#LINE02 .W50,
#LINE03 .W50,
#LINE04 .W50{
	width:50%;
	float: left;
	height: 15px;
	margin: 0 -1px 0 0;
}

#LINE .W25,
#LINE01 .W25,
#LINE02 .W25,
#LINE03 .W25,
#LINE04 .W25{
	width:25%;
	float: left;
	height: 15px;
	margin: 0 -1px 0 0;
}

#LINE .W13,
#LINE01 .W13,
#LINE02 .W13,
#LINE03 .W13,
#LINE04 .W13{
	width:12.5%;
	float: left;
	height: 15px;
	margin: 0 -1px 0 0;
}

#LINE .W11,
#LINE01 .W11,
#LINE02 .W11,
#LINE03 .W11,
#LINE04 .W11{
	width:11.5%;
	float: left;
	height: 15px;
	margin: 0 -1px 0 0;
}

#LINE .W15,
#LINE01 .W15,
#LINE02 .W15,
#LINE03 .W15,
#LINE04 .W15{
	width:14.3%;
	float: left;
	height: 15px;
	margin: 0 -1px 0 0;
}

#LINE .W7,
#LINE01 .W7,
#LINE02 .W7,
#LINE03 .W7,
#LINE04 .W7{
	width:7%;
	float: left;
	height: 15px;
	margin: 0 -1px 0 0;
}

#LINE .W16,
#LINE01 .W16,
#LINE02 .W16,
#LINE03 .W16,
#LINE04 .W16{
	width:16%;
	float: left;
	height: 15px;
	margin: 0 -1px 0 0;
}

#LINE p.B_r,
#LINE01 p.B_r,
#LINE02 p.B_r,
#LINE03 p.B_r,
#LINE04  p.B_r{
	border-right: 1px #666 solid;
}

#LINE p.B_l,
#LINE01 p.B_l,
#LINE02 p.B_l,
#LINE03 p.B_l,
#LINE04  p.B_l{
	border-left: 1px #666 solid;
}

#LINE p.B_rt,
#LINE01 p.B_rt,
#LINE02 p.B_rt,
#LINE03 p.B_rt,
#LINE04  p.B_rt{
	border-right: 1px #666 solid;
	border-top: 1px #666 solid;
}

#LINE p.B_lt,
#LINE01 p.B_lt,
#LINE02 p.B_lt,
#LINE03 p.B_lt,
#LINE04  p.B_lt{
	border-left: 1px #666 solid;
	border-top: 1px #666 solid;
}

#LINE p.B_t,
#LINE01 p.B_t,
#LINE02 p.B_t,
#LINE03 p.B_t,
#LINE04  p.B_t{
	border-top: 1px #666 solid;
}

/*1LDKタイプ*/
#PlanBox div#MTYPE01,
#PlanBox div#MTYPE02,
#PlanBox div#MTYPE03,
#PlanBox div#MTYPE04{
	width: 120px;
	float: left;
	text-align: center;
}

#PlanBox div#MTYPE01 a,
#PlanBox div#MTYPE02 a,
#PlanBox div#MTYPE03 a,
#PlanBox div#MTYPE04 a{
	text-decoration:	none;
}

#PlanBox div#MTYPE01{
	margin-left: 6%;
}

#PlanBox div#MTYPE02{
	margin-left: 31%;
}

#PlanBox div#MTYPE03{
	margin-left: 55%;
}

#PlanBox div#MTYPE04{
	margin-left: 81%;
}

#PlanBox .TYPEBOX p.Link{
	text-align: left;
    margin-left: 18%;
}

#PlanBox div#MTYPE01 p.Link,
#PlanBox div#MTYPE02 p.Link,
#PlanBox div#MTYPE03 p.Link,
#PlanBox div#MTYPE04 p.Link{
	text-align: left;
    margin-left: 20%;
}

#PlanBox div#MTYPE01 a.on,
#PlanBox div#MTYPE02 a.on,
#PlanBox div#MTYPE03 a.on,
#PlanBox div#MTYPE04 a.on{
	background-color: #fff;
}

#PlanBox .TYPEBOX a{
	text-decoration: none;
}

#PlanBox .TYPEBOX a.on{
	background-color: #fff;
}

#PlanBox div#MT-1{
	float: left;
	width: 50%;
}

#PlanBox div#MT-2{
	float: right;
	width: 50%;
}

#PlanBox div#MT-last{
	float: left;
	width: 100%;
}

/* ラジオボタンで切り替え */
.invisible{
	display: none!important;
	opacity: 0;
}

.visible{
	display: block;
      opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
    }

    @keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }


/*------------詳細記事------------*/
.PlanSpec {
}

.PlanSpec dl {
	width: 130px;
	font-size: 10px;
	float: left;
	margin-top: 8px;
	margin-right: 6px;
	display: inline;
}

.PlanSpec dl dt {
	width:13px;
	float: left;
	clear: both;
	margin-right: 10px;
}

.PlanSpec dl dd {
	width: 100px;
	float: left;
}

.PlanSpec  p{
	width: 140px;
	float: left;
	font-size: 10px;
}

.PlanSpec a img{
	margin: 0 10px 0 10px;
}

/*左シート　ユーザーの部屋記事*/
#DETAIL #wrapper #leftColumn .PLAN{
	/*height: 250px!important;*/
}

#DETAIL #wrapper #leftColumn .PLAN ul li a.PLANROOM span{
	width: 100%;
	margin: 0 0 3px 0;
}

#DETAIL #wrapper #leftColumn .PLAN ul li a.PLANROOM img{
	width: 100%;
}


#DETAIL #wrapper #leftColumn #plan.dtlMember_room{
	padding-bottom: 0px;
}

.dtlItemPhoto p{
	clear: both;
	float: left;
	font-size: 11px;
	line-height: 1.5em;
}

.dtlItemPhoto img{
    width: 100px;
    margin: 0px 25px;
}

h4.plan,
h5.plan,
h6.plan{
	text-align: center;
	font-size: 10px;
	line-height: 1.6;
	margin-top: 22px;
	margin-bottom: 12px;
	padding: 5px 0;
}

h4.plan{
	margin-top: 0px;
	}
	
h5.plan{
	margin-top: 10px;
	}

p.heart{
    text-align: left!important;
    line-height: 1.8em;
	font-size: 10px;
}

p.RENOPLAN,
div.RENOPRICE p.RENOT{
	text-align: center;
	line-height: 1.6;
	margin-bottom: 12px;
	padding: 5px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	margin-top: 0px;
	width: 100%;
	position: relative;
}

/*リフォーム済み間取りタイトル*/
#DETAIL #wrapper #rightColumn .dtlArticle .dtlArticleContents .dtlArticleLeft .dtlArticleSlide div span.RefTT{
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
}

div span.RefTT a{
   text-decoration: none;
}

#DETAIL #wrapper #rightColumn .dtlArticle .dtlArticleContents  .dtlArticleLeft .dtlArticleSlide div span.RefTT p.planId {
	font-size: 10px;
	color:#aaa;
	float:left;
	text-align:left;
	clear:both;
}

/*リフォーム概算*/
div.RENOPRICE{
	width:100%; 
	float: left;
	position: relative;
}

ul.PAY	{ 
	width:100%; 
	float:left; 
	display:inline; 
	clear:both; 
	margin:20px 0px 0px 0px; 
	padding-bottom:30px; 
}

ul.PAY li	{ 
	width:33%; 
	float:left; 
	display:inline; 
	clear:none; 
	margin:0px 0px 0px 0px; 
}

ul.PAY li img{
    width: 90%;
    height: auto;
}

ul.PAY li strong	{ 
	width: 80%; 
	float:left; 
	display:inline; 
	clear:both; 
	padding-left:10px; 
	font-size:13px; 
	line-height:1.5em; 
}

ul.PAY li strong.INTERIOR	{ 
	border-left:3px solid #fbd; 
	background:#fff; 
}

ul.PAY li strong.WATER	{ 
	border-left:3px solid #8df; 
	background:#fff; 
}

ul.PAY li strong.SKELETON	{ 
	border-left:3px solid #9d6; 
	background:#fff; 
}

ul.PAY li span	{ 
	width: 90%; 
	float:left; 
	display:inline; 
	clear:both; 
	font-size:12px; 
	margin-bottom: 10px!important;
}

ul.PAY li p	{ 
	width: 90%;  
	margin:5px 0px 5px 0px; 
	padding:0px; 
	color:#777;
}

ul.PAY li a	{ 
	float:left; 
	display:inline; 
	clear:both; 
	font-size:10px; 
}

.COST	{ 
	width:28%;  
	float:right; 
	display:inline; 
	clear:both; 
	text-align:right;  
	line-height:1.5em; 
}

span.COST_B	{ 
	width:28%;  
	float:right; 
	display:inline; 
	clear:both; 
	text-align:right; 
	margin: 0px 0px 0px 0px; 
	line-height:1.5em; 
	font-size:14px; 
	font-weight:bold; 
}

span.COST_B em	{ 
	float:none; 
	margin:0px; 
	padding:0px; 
	font-size:18px; 
	color:#f90; 
	font-style:normal; 
	font-weight:bold; 
	display: inline!important;
}

small.ALART		{ 
	clear:both; 
	display:inline; 
	float:left; 
	width:90%; 
	margin:30px 0px 0px 0px;
	adding:0px; color:#000; 
	text-align:left; 
	font-size:11px; 
	line-height:1.5em; 
	}
	
small.ALART img		{ 
	display:inline; 
	float:left; 
	padding-bottom:50px; 
	margin:3px 10px 0px 0px; 
}

/*右シートピクト部分*/
#DETAIL #wrapper #rightColumn #plan.dtlSpec {
	margin-bottom:20px;
}

#DETAIL #wrapper #rightColumn #plan.dtlSpec dt{
}

#DETAIL #wrapper #rightColumn #plan.dtlSpec dd{
	width: 180px;
}

ol{
    margin: 10px 0px 20px 0px;
    float: left;
}

ol li{
	width: 125px;
	display: block;
	float: left;
	margin: 0px 1px 1px 0px;
	padding-left: 5px;
	background-color: #e8e8e8;
	border: 1px solid #ddd;
	font-size: 10px;
}

ol li.OFF{
	color: #fff;
}

#DETAIL #wrapper #rightColumn .dtlArticle .dtlArticleHeader p.planId {
	font-size: 10px;
	color:#aaa;
	float:left;
	text-align:left;
	clear:both;
}