@charset "utf-8";
/* ==========================================================

title : 千種タワーヒルズ
scope : 間取り

last modify : 2017/01/06 041_ooba
memo  : 

========================================================== */

body#generally { background: #e0e4ef; }
body#comfort { background: #e8f5f5; }
body#deluxe { background: #f2e9ec; }
body#premium { background: #ebe8d1; }

a:hover img {
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}

img {
	vertical-align:bottom;
}

.att{
	padding-left: 1em;
	text-indent: -1em;
  }
  
[class^="lead"]{
	color:#000;
	margin:20px auto;
	width:720px;
  }
  
 [class^="lead_c"]{
	 text-align:center;
  }
  

/* ----------------------------------------------------------
	header
---------------------------------------------------------- */
header {
	background:#fff;
	border-top: 10px solid #9e8578;
}

header #header_layout {
	height:77px;
	margin:0 auto;
	overflow:hidden;
	width:965px;
}

header #logo_layout {
	float:left;
	margin:15px 0 0;
}

header #headinfo_layout {
	float:right;
	margin:20px 0 0;
	width:340px;
}

header #headinfo_layout li {
	float:left;
}

header #headinfo_layout li:last-of-type {
	float:right;
}


/* ----------------------------------------------------------
	siteroute
---------------------------------------------------------- */
#siteroute{
	margin:0 auto;
	overflow:hidden;
	padding:10px 0;
	width:965px;
}

#generally #siteroute{ border-bottom:#6c7390 solid 1px; }
#comfort #siteroute{ border-bottom:#7da8ac solid 1px; }
#deluxe #siteroute{ border-bottom:#ac9098 solid 1px; }
#premium #siteroute{ border-bottom:#beb782 solid 1px; }

#siteroute li{
	color:#000;
	float:left;
	font-size:80%;
	margin:0 5px 0 0;
}

#siteroute li:after{
	content: " > ";
}

#siteroute li.current:after{
	content:normal;
}


/* ----------------------------------------------------------
	#main
---------------------------------------------------------- */
#main {
	margin: 0 auto;
	padding:0 0 50px;
	width:965px;
}

#generally #main { color:#00092e; }
#comfort #main { color:#003034; }
#deluxe #main { color:#350010; }
#premium #main { color:#3f3800; }


/* ----------------------------------------------------------
	#title
---------------------------------------------------------- */

#title {
	height:142px;
	overflow:hidden;
	width:965px;
}

#generally #title { background:url(../image/title_line_generally.png) no-repeat 0 bottom; }
#comfort #title { background:url(../image/title_line_comfort.png) no-repeat 0 bottom; }
#deluxe #title { background:url(../image/title_line_deluxe.png) no-repeat 0 bottom; }
#premium #title { background:url(../image/title_line_premium.png) no-repeat 0 bottom; }

#main h1 {
	float:left;
	height:93px;
	margin:25px 20px 0 100px;
}

#main h1 img {
	float:left;
}

#number {
	float:left;
	font-size:30px;
	line-height:93px;
	margin:0 0 0 25px;
}

#generally #number { color:#2f3345; } 
#comfort #number { color:#1a4549; }
#deluxe #number { color:#682639; }
#premium #number { color:#8c7d02; }

#number span {
	font-size:24px;
}

#dtl {
	float:right;
	margin:25px 100px 0 0;
	width:410px;
}

#dtl .layout {
	font-size:20px;
	line-height:95px;
	white-space:nowrap;
}

#dtl .function {
	border:#fff solid 1px;
	color:#fff;
	display:block;
	float:right;
	font-size:15px;
	height:32px;
	line-height:32px;
	margin:30px 0 0 0;
	text-align:center;
	width:140px;
}

#generally #dtl .function { background:#2f3345; }
#comfort #dtl .function { background:#1a4549; }
#deluxe #dtl .function { background:#682639; }
#premium #dtl .function { background:#8c7d02; }



/* ----------------------------------------------------------
	#layout_area
---------------------------------------------------------- */
#layout_area {
	background:#fff;
	margin: 17px auto 10px;
	padding:30px 0 45px;
	text-align:center;
	width:765px;
}

#layout_area .note {
	display:inline-block;
	border:#ccc solid 1px;
	color:#000;
	font-size:14px;
	margin:30px auto 0;
	padding:8px 30px;
}

#layout_area .note li {
	font-size:14px;
	text-align:left;
}

#layout_area #btn_pdf {
	margin:30px 0 0;
}


/* ----------------------------------------------------------
	#dtl_area
---------------------------------------------------------- */
#dtl_area {
	margin:0 auto 10px;
	overflow:hidden;
	width:765px;
}

#generally #dtl_area { background:#caceda; }
#comfort #dtl_area { background:#ccd6d6; }
#deluxe #dtl_area { background:#ddcfd3; }
#premium #dtl_area { background:#d9d4a7; }

#dtl_area #area {
	float:left;
	margin:10px 0 10px 20px;
	padding:5px 0;
	width:400px;
}

#generally #dtl_area #area { background:url(../image/line_area_generally.png) repeat-y right 0; }
#comfort #dtl_area #area { background:url(../image/line_area_comfort.png) repeat-y right 0; }
#deluxe #dtl_area #area { background:url(../image/line_area_deluxe.png) repeat-y right 0; }
#premium #dtl_area #area { background:url(../image/line_area_premium.png) repeat-y right 0; }

#dtl_area #area li.balcony {
	font-size:15px;
}

#dtl_area #area li span {
	font-size:30px;
}

#dtl_area #area li .tsubo {
	font-size:15px;
}

#dtl_area #imagecolor {
	float:left;
	margin:2px 0 0;
	width:345px;
}

#dtl_area #imagecolor dt {
	margin:0px;
	line-height:1;
	padding:8px 0 7px;
	text-align:center;
}

#generally #dtl_area #imagecolor dt {
	background: -webkit-linear-gradient(left, rgba(47,51,69,0) 0%,rgba(47,51,69,1) 15%,rgba(47,51,69,1) 85%,rgba(47,51,69,0) 100%);
	background: -moz-linear-gradient(left, rgba(47,51,69,0) 0%, rgba(47,51,69,1) 15%, rgba(47,51,69,1) 85%, rgba(47,51,69,0) 100%);
	background: linear-gradient(to right, rgba(47,51,69,0) 0%,rgba(47,51,69,1) 15%,rgba(47,51,69,1) 85%,rgba(47,51,69,0) 100%);
}

#comfort #dtl_area #imagecolor dt {
	background: -webkit-linear-gradient(left, rgba(26,69,73,0) 0%,rgba(26,69,73,1) 15%,rgba(26,69,73,1) 85%,rgba(26,69,73,0) 100%);
	background: -moz-linear-gradient(left, rgba(26,69,73,0) 0%, rgba(26,69,73,1) 15%, rgba(26,69,73,1) 85%, rgba(26,69,73,0) 100%);
	background: linear-gradient(to right, rgba(26,69,73,0) 0%,rgba(26,69,73,1) 15%,rgba(26,69,73,1) 85%,rgba(26,69,73,0) 100%);
}

#deluxe #dtl_area #imagecolor dt {
	background: -webkit-linear-gradient(left, rgba(104,38,57,0) 0%,rgba(104,38,57,1) 15%,rgba(104,38,57,1) 85%,rgba(104,38,57,0) 100%);
	background: -moz-linear-gradient(left, rgba(104,38,57,0) 0%, rgba(104,38,57,1) 15%, rgba(104,38,57,1) 85%, rgba(104,38,57,0) 100%);
	background: linear-gradient(to right, rgba(104,38,57,0) 0%,rgba(104,38,57,1) 15%,rgba(104,38,57,1) 85%,rgba(104,38,57,0) 100%);
}

#premium #dtl_area #imagecolor dt {
	background: -webkit-linear-gradient(left, rgba(140,125,2,0) 0%,rgba(140,125,2,1) 15%,rgba(140,125,2,1) 85%,rgba(140,125,2,0) 100%);
	background: -moz-linear-gradient(left, rgba(140,125,2,0) 0%, rgba(140,125,2,1) 15%, rgba(140,125,2,1) 85%, rgba(140,125,2,0) 100%);
	background: linear-gradient(to right, rgba(140,125,2,0) 0%,rgba(140,125,2,1) 15%,rgba(140,125,2,1) 85%,rgba(140,125,2,0) 100%);
}

#dtl_area #imagecolor dd {
	margin:12px 0 0;
	overflow:hidden;
	text-align:center;
}

#dtl_area #imagecolor dd img {
	display:inline-block;
	margin:0 5px 0 0;
	vertical-align:top;
}

#dtl_area #imagecolor dd span {
	font-size:13px;
	display:inline-block;
	line-height:1.3;
	text-align:left;
	vertical-align:top;
}


/* ----------------------------------------------------------
	#ico_area
---------------------------------------------------------- */

#ico_area {
	margin:0 auto 31px;
	overflow:hidden;
	width:780px;
}

#ico_list {
	margin:0 auto;
	overflow:hidden;
	padding:0 0 0 1px;
	width:775px;
}

#ico_list li {
	float:left;
	margin:0 5px 9px 4px;
	position:relative;
}

#ico_list li .ast {
	color:#000;
	font-size:12px;
	line-height:1;
	position:absolute;
	right:3px;
	top:5px;
}

#ico_note {
	font-size:14px;
	margin:0 auto;
	overflow:hidden;
	width:765px;
}

#ico_note li {
	font-size:14px;
}


/* ----------------------------------------------------------
	#photo_area
---------------------------------------------------------- */
#photo_area {
	margin:0 auto 31px;
	overflow:hidden;
	width:765px;
}

#generally #photo_area,
#comfort #photo_area { margin:0 auto; }

#photo_list {
	margin:0 auto;
	overflow:hidden;
	padding:0 0 0 1px;
	width:756px;
}

#generally #photo_list {
	width:504px;
	background:none;
}
#comfort #photo_list { background:url(../image/bg_photo_comfort.png) no-repeat right bottom; }
#deluxe #photo_list { background:url(../image/bg_photo_deluxe.png) no-repeat right bottom; }
#premium #photo_list { background:url(../image/bg_photo_premium.png) no-repeat right bottom; }

#photo_list li {
	float:left;
	margin:0 6px 20px 5px;
	width:241px;
}

#photo_list li a {
	background: #ffffff;
	display: block;
	height: 160px;
	width:241px;
}

#photo_list figcaption {
	margin:8px 0 0;
	text-align:center;
}


/* ----------------------------------------------------------
	#movie_area
---------------------------------------------------------- */
#movie_area {
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	width:765px;
}

#movie {
	letter-spacing:-0.5em;
	overflow:hidden;
	text-align:center;
	width:765px;
}

#movie li {
	background:#000;
	display:inline-block;
	letter-spacing:normal;
	margin:0 22px;
	padding:10px 10px 0;
	width:290px;
}

#movie figure .youtube {
	background:#fff;
    height: 163px;
	margin:0 auto;
	overflow: hidden;
    padding: 0px;
    position: relative;
}

#movie_area figure .thumb {
	margin:-27px 0 0;
}

#movie_area figure .mark {
	position: absolute;
	top: 64px;
	left: 125px;
}

#movie figcaption {
	color:#fff;
	padding:8px 0 15px;
	text-align:center;
}

#movie figcaption span {
	display:block;
}

#movie figcaption .room {
	font-size:18px;
}

#movie figcaption .room span {
	display:block;
	font-size:12px;
}

#movie figcaption .time {
	font-size:14px;
	margin:8px 0 0;
}



/* ----------------------------------------------------------
	#keyword_area
---------------------------------------------------------- */
#keyword_area{
	background: #fff;
	clear:both;
	padding:50px 0;
}

#keyword_area div{
	border: 4px solid #999999;
	clear: both;
	font-size: 14px;
	margin:0 auto;
	padding: 20px;
	text-align: left;
	width: 770px;
}



/* ----------------------------------------------------------
	footer
---------------------------------------------------------- */
footer{
	background: #E6E6E6;
	clear:both;
	padding:15px 0;
}

#copy_layout{
	color: #3E3A39;
	font-size:16px;
	text-align: center;
}