@charset "UTF-8";

/**
 *
 * EntryListForm.htmlのスタイルシート。
 *
 * entryテーブルの一覧(施工例やイベントを含む)を表示するフォームのレイアウトを
 * 定義します。
 *
 * #mainArea.withoutSidebar	TOP画面などサイドバーが存在しないメイン領域。
 * #sidebarArea				サイドバー領域。
 *
 */

div#mainArea.withoutSidebar.layout02 {
	display: flex;
	flex-flow: column;
}


div#mainArea.withoutSidebar.layout03 {
	display: flex;
	flex-flow: row;
	width: 100%;
}

#blockSection {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
    justify-content: flex-start;
}

#blockSection form {
	flex: 0 0 50%;
	max-width: calc(50% - 1px);
}

@media (max-width: 576px) {
	#blockSection form {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

#mainArea #entryList:not(.hscroll) {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#mainArea #entryList:not(.hscroll).ranking {
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
}

#mainArea #entryList:not(.hscroll).ranking div.news {
	border-width: 2px;
	border-style: solid;
	border-color: #ddd;
}

.ranking  .news .photo img {
	max-height: 100px;
}
/*
#mainArea #entryList.ranking .listEntry .photo img {
	max-height: initial;
}*/
#mainArea #entryList.ranking .listEntry .news td {
	width: 340px;
}
#mainArea #entryList.ranking .listEntry .news td div.photo {
	width: 300px;
}

.ranking th.top_rank {
	width: 40px;
	height: 162px;
	padding-left: 10px;
}

.ranking th.top_rank img {
	width: 30px;
}

.ranking .ttl {
	font-weight: bold;
}

p.blog_ranking_company {
	background-color: #f6faf1;
	height: 24px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 16px;
	padding-right: 16px;
	border-top-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	border-top-width: 2px;
	border-left-width: 2px;
	border-right-width: 2px;
	border-top-color: #ddd;
	border-left-color: #ddd;
	border-right-color:  #ddd;
}

@media (max-width: 767px) {
	#mainArea #entryList.ranking .listEntry {
		margin: 5px 0;
		max-width: calc(100% - 10px) !important;
	}
	#mainArea #entryList.ranking .listEntry .newslink > table {
		table-layout: fixed;
		width: 100%;
	}
	#mainArea #entryList.ranking .listEntry .news table {
		width: 100%;
	}
	#mainArea #entryList.ranking .listEntry .news tr {
		display: flex;
		flex-direction: row-reverse;
		height: 180px;
	}
	#mainArea #entryList.ranking .listEntry .news td:first-child {
		width: 100px;
	}
	#mainArea #entryList.ranking .listEntry .news td:last-child {
		width: calc(100% - 100px);
		word-break: break-all;
	}
	#mainArea #entryList.ranking .listEntry .news td div.photo {
		width: 100px;
		height: 100px;
	}
	.ranking th.top_rank {
		width: 34px;
		padding: 0;
		text-align: center;
	}
	.ranking th.top_rank img {
		margin: auto;
	}
	p.blog_ranking_company {
		height: auto;
	}
}

/* スマートフォン版(分割なし) */
@media (max-width: 767px) {
	#mainArea.withoutSidebar #entryList:not(.hscroll) .listEntry,
	#mainArea.withoutSidebar #examples .owl-carousel,
	#mainArea.withoutSidebar #events .eventInfo {
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
		max-width: calc(100% - 40px);
	}
}

/* タブレット版(2分割) */
@media (min-width: 768px) {
	#mainArea.withoutSidebar #entryList:not(.hscroll) .listEntry,
	#mainArea.withoutSidebar #examples .owl-carousel,
	#mainArea.withoutSidebar #events .eventInfo {
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
		max-width: calc(50% - 40px);
	}
}


/* PC版(4分割) */
@media (min-width: 992px) {
	#mainArea.withoutSidebar #entryList:not(.hscroll) .listEntry,
	#mainArea.withoutSidebar #examples .owl-carousel,
	#mainArea.withoutSidebar #events .eventInfo {
		-ms-flex: 0 0 25%;
	    flex: 0 0 25%;
		max-width: calc(25% - 40px);
	}
}