@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900');

#column {
	color: #555;
	font-size: 14px;
	font-family: "Noto Sans JP";
}

/*----- COMMON -----*/
#column img {
	width: 100%;
}

#column a {
	font-size: inherit;
	text-decoration: none;
}

#column ::selection {
	color: #FFF;
	background: #ff9541;
}

/*----- H1 H2 H3 H4-----*/
#column h1,
#column h2,
#column h3,
#column h4 {
	font-weight: 200;
}


#column {
	margin: 0 auto;
	width: 80%;
}
	#column h1 {
		margin: 0 10% 16px 10%;
		font-size: 4rem;
		text-align: center;
		border-bottom: 1px solid #333;
	}

#column #wrapper {

}

	#column #listArea {
		display: flex;
		flex-wrap: wrap;
	}

		#column #listArea a {
			display: block;
			margin: 1%;
			width: calc(100% / 3 - 2%);
			border-radius: 8px;
			box-shadow: 0 0 16px 0 rgba(0,0,0,0.15);
			transition: .5s;
		}

			#column #listArea a h2 {
				padding: 12px;
				height: 72px;
				font-size: 1.6rem;
				font-weight: 600;
				line-height: 2.1rem;
			}
			#column #listArea a .thumb {
				overflow: hidden;
			}
				#column #listArea a .thumb img {
					transition: .5s;
				}
			#column #listArea a p {
				padding: 12px;
				font-size: 1.4rem;
			}
				#column #listArea a p.date {
					padding-top: 0;
					color: #CCC;
					font-size: 1.2rem;
				}
		/* HOVER */
		#column #listArea a:hover {
			color: #FFF;
			background: #c7a957;
			box-shadow: 0 0 16px 0 rgba(0,0,0,0.35);
		}
			#column #listArea a:hover h2 {
				color: #FFF;
			}
			#column #listArea a:hover img {
				transform: scale(1.2);
			}



@media screen and (max-width: 1199px){
	/*bootstrapを使用する場合。幅を1200pxとして
	左右に15pxずつpaddingをつけている為*/
}
@media screen and (max-width: 1169px){
	/*bootstrapを使用しない場合*/
}
	
@media screen and (max-width: 1024px){
}

@media (max-width: 767px){
	#column {
		width: 90%;
	}
	#column h1 {
		margin: 0 2% 16px 2%;
	}

	#column #listArea {
		flex-direction: column;
	}
	#column #listArea a {
		margin: 8px 0;
		width: auto;
	}
	#column #listArea a h2 {
		font-size: 2.4rem;
		font-weight: 600;
		line-height: 3rem;
	}
}