@charset "UTF-8";


.categories,
.tags
{
	display: block;
	text-align: center;
}

body.touch .categories, 
body.touch .tags
{
	overflow-x: auto;
	white-space: nowrap;
}

.categories > a.category, 
.tags > a.tag
{
	color: rgb(140, 140, 140);
	font-size: .9rem;
	display: inline-block;
	margin-left: 2em;
	white-space: nowrap;
}
.categories > a.category:first-child, 
.tags > a.tag:first-child
{
	margin-left: 0;
}

.categories > a.category:before,
.tags > a.tag:before
{
	content:"";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	left: 0;
	bottom: 0;
	background-color: rgb(140, 140, 140);
	
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.categories > a.category:not(.now):before,
.tags > a.tag:not(.now):before
{
	transform:scale(0, 1);
}
body:not(.touch) .categories > a.category:hover:before,
body:not(.touch) .tags > a.tag:hover:before
{
	transform:scale(1, 1);
}

.nowCate, .nowTag
{
	display: block;
	text-align: center;
	font-size: .7em;
	margin-top: 1em;
}

/**********************************************************************/
/********************************* Tile *******************************/
/**********************************************************************/

.tileWrapperWrapper
{
	flex: 1 1 auto;
	position:relative;

	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

.tileWrapper
{
	width: calc(100% + 2rem);
	margin-left: -2rem;
	margin-right: -2rem;

	flex-wrap: wrap;
	
/*	-webkit-align-items: flex-start;
	align-items: flex-start;
	
	-webkit-justify-content: flex-start;
	justify-content: flex-start;*/
}

a.tile
{
	margin: 1rem;
	width: calc((100% - 6rem) / 3);
/*	min-width: calc((1024px - 8rem) / 3);*/
	flex: 0 0 auto;
	color: rgb(50, 50, 50);
	text-decoration: none;
	padding: .5rem .5rem 1.25rem;

	border: 3px dotted rgb(120, 120, 120);

	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-webkit-align-items: center;
	align-items: center;

	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

a.tile .textWrapperWrapper
{
	flex: 1 1 auto;
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	-webkit-align-items: center;
	align-items: center;
}

a.tile .textWrapper
{
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-webkit-align-items: center;
	align-items: center;

	flex: 1 1 auto;
/*	justify-content: space-between;*/
	
	margin: 0 0 0rem;
}

a.tile .name
{
	font-family: Roboto-B, GG-B, 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 700;

	font-size: 1rem;
	padding: 0 .75rem;
	display: block;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

a.tile .photo_100
{
	overflow: hidden;
	background-color: black;
}
a.tile .photo_100 img
{
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

div.sumnail_bg > div:after, a.sumnail_bg > div:after
{
	padding-top: 100%;
}

body:not(.touch) a.tile:hover .photo_100 img
{
	transform: scale(1.1);
}

.tile div.sumnail_bg,
.tile a.sumnail_bg
{
	margin-bottom: 1rem;
}

.tile .cate_date
{
	color: rgb(120, 120, 120);
	width: 100%;
	margin-bottom: .8rem;
	-webkit-justify-content: center;
	justify-content: center;
}

.tile .cate_date .category
{
	font-size: .75rem;
	line-height: 1.25;
}

.tile .cate_date .date
{
	margin-left: 1em;
	padding-left: 1em;
	border-left: 1px solid rgb(120,120,120);
	
	font-family: 'lsm_font';
	text-transform: uppercase;
	font-size: .6rem;
}

.tile .cate_date  span + span
{
	margin-left: .5em;
}

.excerpt
{
	padding: 1em .8em;
	font-size: .75rem;
	color: rgb(120, 120, 120);
}

.tile .dirLink
{
	font-size: .8rem;
}

body:not(.touch) .tile:hover .dirLink
{
	color: rgb(50, 50, 50);
}

body:not(.touch) .tile:hover  .dirLink._white
{
	color: rgb(255, 255, 255);
}

body:not(.touch) .tile:hover .dirLink .dir > p
{
	background-image: linear-gradient(to right, rgb(50, 50, 50), rgb(50, 50, 50) 3px, transparent 3px, transparent 3px);
	animation-name: shrink_x;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

body:not(.touch) .tile:hover .dirLink._white .dir > p
{
	background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255) 3px, transparent 3px, transparent 3px);
}

body:not(.touch) .tile:hover .dirLink .dir > span
{
	background-color: rgb(50, 50, 50);
	animation-name: blink_3;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

body:not(.touch) .tile:hover .dirLink._white .dir > span
{
	background-color: rgb(255, 255, 255);
}

.tile .stamp
{
	font-family: 'lsm_font';
	text-transform: uppercase;
	color: rgb(120, 120, 120);
	font-size: .5rem;
	font-family: Roboto-B, GG-B, 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 700;
	
	position: absolute;
	width: 4rem;
	height: 4rem;
	top: -1.75rem;
	left: -1.75rem;
	
	border: 3px dotted rgb(120, 120, 120);
	background-color: rgb(255, 255, 255);
	border-radius: 50% 50%;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 1900px)
{
	a.tile
	{
		width: calc((100% - 10rem) / 5);
	}
	.max_page_width a.tile
	{
		width: calc((100% - 6rem) / 3);
	}
}

@media screen and (min-width: 1650px) and (max-width: 1899px)
{
	a.tile
	{
		width: calc((100% - 8rem) / 4);
	}
	.max_page_width a.tile
	{
		width: calc((100% - 6rem) / 3);
	}
}

/*@media screen and (max-width: 1200px)
{
	a.tile
	{
		width: calc((100% - 6rem) / 3);
	}
}*/

@media screen and (max-width: 900px)
{
	a.tile
	{
		width: calc((100% - 4rem) / 2);
	}
}

@media screen and (max-width: 600px)
{
	#newsList
	{
		padding-top: 3rem;
	}
	
	a.tile
	{
		width: calc( (100% - 2rem) / 1);
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	}
	
	.excerpt
	{
		display: none;
	}
	
	.nav-links
	{
		margin-top: 0rem;
	}

	.nav-links .pageNum a,
	.nav-links .pageNum span
	{
		margin: 0 .25em;
	}
	
	.categories, 
	.tags
	{
		overflow-x: auto;
		white-space: nowrap;
	}
	
	a.tile .dirLink
	{
		margin-top: .5rem;
	}
}