/* 制作事例ページ用CSS
------------------------------------------------------------------------------*/

html {
	font-family: Helvetica, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}

body {
	color: #272727;
	font-size: 1.4rem;/* =14px */
	letter-spacing: 0.06rem;
	min-width: 320px;
}

h1 { font-size: 3.2rem;}
h2 { font-size: 2.1rem;}


/*
#header
*******************/

header {
	width: 100%;
}

.style-header {
	margin: 90px auto;
	text-align: center;
}

.style-header .company-logo {
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 3%;
}

.style-header .company-logo img {
	height: auto;
	max-height: 80px;/* ロゴのサイズ調整はここ */
	width: auto;
}

.style-header .page-title {
	background: #f6f6f6;
	margin-top: .5em;
	padding: .5em 3%;
	text-align: center;
}

.style-header .page-title span {
	display: inline-block;
	max-width: 1200px;
}


/*
#main
*******************/

.container {
	padding-bottom: 90px;
	width: 100%;
}

.style-contents {
	margin: 0 auto;
	max-width: 1200px;
	width: auto;
}

.style-contents .site-all {/* flex親要素 */
	align-content: flex-start;/*（子要素が複数行になるとき）左上から開始して上揃えに並べる */
	display: flex;
	flex-flow: row wrap;/* 左から右に要素を並べる・表示幅に合わせて子要素を自動折り返し */
	justify-content: flex-start;/* 初期値の左揃え */
	padding: 0 3%;
}

.style-contents .site-link {/* flex子要素 */
	align-self: flex-start;/*（よこ１行について）縦方向は上揃えに並べる */
	background: #f6f6f6;
	border-bottom: 1px solid #ddd;
	border-radius: 6px;
	color: #494949;
	display: inline-block;
	flex-basis: 30%;/* 子要素の幅を指定 */
	margin: 30px 1.66%;
	padding: 1.2%;
	position: relative;
	text-align: center;
}

.style-contents .site-link:hover {
	background-color: #eee;
}

.style-contents .site-link .mansion-name {
	margin-bottom: .5em;
}

.style-contents .site-link .img-wrap img {
	height: auto;
	width: 100%;
}

.style-contents .site-link:hover .img-wrap img {
	opacity: .8;
}

.style-contents .site-link .mansion-address {
	font-size: 1.45rem;
	margin: 1em 0;
}

.style-contents .site-link .mansion-address::before {
	background: #666;
	border-radius: 4px;
	color: #fff;
	content: "所在地";
	display: inline-block;
	font-size: 1.1rem;
	height: auto;
	line-height: 1rem;
	margin-right: 6px;
	padding: 4px 6px 4px 7px;
	width: auto;
	vertical-align: top;
}

.style-contents .site-link .go {
	background: #666;
	color: #fff;
	display: block;
	font-size: 1.3rem;
	margin-top: .5em;
	padding: .25em .5em;
}

.style-contents .site-link .go:hover {
	background-color: #545454;
}

.style-contents .site-link .go::after {
	bottom: 0;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.style-contents .site-link .go span {
	display: inline-block;
}

.style-contents .site-link .go span::after {
	content: url(../img/img-ico-win.png);
	display: inline-block;
	height: 10px;
	margin-left: .5em;
	width: 12px;
}


@media screen and (max-width: 960px) {
/*--- 表示領域が960px以下の場合に適用するスタイル ---*/
	.style-contents .site-all {/* flex親要素 */
		justify-content: space-around;/* 均等割り配置 */
	}

	.style-contents .site-link {/* flex子要素 */
		flex-basis: 300px;/* 子要素の幅を指定 */
		margin: 25px 2%;
	}
}


@media screen and (max-width: 559px) {
	/*--- 表示領域が559px以下の場合に適用するスタイル ---*/
	.style-header {
		margin: 60px auto;
	}

	.style-header .page-title {
		font-size: 3rem;
	}

	.style-contents .site-link {
		margin: 25px 0;
		padding: 3%;
	}
}


/* 物件サイトの登録がないときの見た目 */

.style-contents .no-site {/* flex親要素 */
	align-items: center;/* 縦位置中央揃え */
	display: flex;
	flex-flow: row nowrap;/* 左から右に要素を並べる・子要素は折り返さない */
	justify-content: center;/* よこ方向中央揃え */
	min-height: 420px;
	padding: 0 3%;
}

.style-contents .info {/* flex子要素 */
	border: 2px solid #ddd;
	border-bottom-color: #999;
	border-right-color: #999;
	flex-basis: 85%;/* 子要素の幅を指定 */
}

.style-contents .info-txt {
	font-size: 2.6rem;
	padding: 1.2em;
	text-align: center;
}


@media screen and (max-width: 459px) {
	/*--- 表示領域が459px以下の場合に適用するスタイル ---*/
	.style-contents .no-site {/* flex親要素 */
		min-height: 320px;
	}
}


/*
#footer
*******************/

footer {
	width: 100%;
}

.style-footer {
	background: #494949;
	text-align: center;
}

.style-footer address {
	margin: 0 auto;
	max-width: 1200px;
	padding: 2em 3%;
}

.style-footer .company-name {
	color: #fff;
	font-size: 1.9rem;
}

.style-footer .company-address {
	color: #fff;
	font-size: 1.6rem;
	margin-top: .5em;
}

.style-footer .copy {
	background: #272727;
	line-height: 1;
	padding: .25em 3%;
	text-align: center;
}

.style-footer .copy span {
	color: #fff;
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1.4;
	max-width: 1200px;
}