@charset "UTF-8";
/*建物ラインナップのキャッチフレーズ セットのCSS設定*/

.catch.white { background:#fff; width:100%; position:relative; overflow:hidden;}
.catch.gray { background:#202020; width:100%; position:relative; overflow:hidden; color:#fff;}
.catch dl { position:relative;}
.catch dl dd { position:absolute; display:block;top:0px;}
.catch dl dt { position:absolute; top:0px; overflow:hidden; display:block;}

.catch.white dl dd { background-image:url(../img/bg_grade_white.png); background-repeat:repeat-y; background-position:left top;letter-spacing: -0.1em;}
.catch.gray dl dd { background-image:url(../img/bg_grade_gray.png); background-repeat:repeat-y; background-position:right top;letter-spacing: -0.1em;}
.catch dl dd.right span, .catch dl dd.right p { padding-left:150px;}
.catch dl dd.left span, .catch dl dd.left p { padding-left:150px;}

.catch dl dd span { font-size:45px; font-weight:bold; line-height:150%; display:block;}
.catch dl dd p { font-size:20px; font-weight:bold; line-height:150%}
.catch dl dd.text_2_2 span { margin-top:150px;}
.catch dl dd.text_2_2 p { margin-top:50px;}
@media only screen and (max-width: 767px) {
	.catch.white { background:#202020;color:#fff;padding-bottom: 15px;}
	.catch.gray { padding-bottom: 15px;}
	.catch dl dd { position:relative; top:auto;}
	.catch dl dt { position:relative; top:auto;}

	.catch.white dl dd { background-image:none;letter-spacing:inherit;}
	.catch.gray dl dd { background-image:none;letter-spacing:inherit;}
	.catch dl dd.right span, .catch dl dd.right p { padding-left:10px;}
	.catch dl dd.left span, .catch dl dd.left p { padding-left:10px;}

	.catch dl dd span { font-size:15px; text-align: center;}
	.catch dl dd p { font-size:13px; font-weight:normal;  text-align: center;line-height:150%}
	.catch dl dd.text_2_2 span { margin-top:15px;}
	.catch dl dd.text_2_2 p { margin-top:0px;}
}

#lnavi_building { background:#e6f4f9; }
#lnavi_building ul { margin:0 auto; width:960px;}
#lnavi_building ul li { float:left; width:240px; height:240px;}
#lnavi_building ul li a{ display:block; width:240px; height:240px; position:relative;}
#lnavi_building ul li a:hover { background:#dbeff6;}
#lnavi_building ul li.on a, #lnavi_building ul li.on a:hover { background:#cae8f2;}
#lnavi_building ul li.on a img { position:absolute; left:0px; top:0px; background-position:center top; background-repeat:no-repeat; z-index:1;}
#lnavi_building ul li.on a img.gray { background-image:url( ../img/arrow_down_gray.png);}
#lnavi_building ul li.on a img.white { background-image:url( ../img/arrow_down_white.png);}
#lnavi_building ul li a span { position:absolute; left:0px; top:0px;  display:block; width:240px; margin-top:200px; text-align:center; font-weight:bold; font-size:16px;z-index:2;}
@media only screen and (max-width: 767px) {
	#lnavi_building ul { width:100%;}
	#lnavi_building ul li { float:left; width:50%; height: auto;}
	#lnavi_building ul li a{ width:100%;  height: auto;position:relative;}
	#lnavi_building ul li a img { width:100%; height: auto;position:relative;}
	#lnavi_building ul li a img {  left:auto; top:auto; background-position:center top; background-repeat:no-repeat; z-index:1;}
	#lnavi_building ul li.on a img { position: relative;}
	#lnavi_building ul li.on a img.white { background-image:url( ../img/arrow_down_gray.png);}
	#lnavi_building ul li a span { position:absolute; left:0px; top:auto; bottom: 20px;  display:block; width:100%; margin-top:0px; font-size:12px;}

}