@charset "utf-8";
/*
************************************************************************
* ブログレイアウト
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.post
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	
	margin:-2.0em;
}
.post .post-list
{
	margin:2.0em;
	width:calc(70% - 4.0em);
}
.post .post-menu
{
	margin:2.0em;
	width:calc(30% - 4.0em);
}
.post-items
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin:-0.25em;
}
.post-items .post-item
{
	border:1px solid #DDDDDD;
	width:calc(100% - 0.5em);
	margin:0.25em;
}
.post-items .post-item .post-content
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	padding:0.25em;
	cursor:pointer;
}
.post-items .post-item .post-content .thin
{
	margin:0.25em;
	white-space: nowrap;
	width:8em;
}
.post-items .post-item .post-content .grow
{
	margin:0.25em;
	flex-grow:1;
	width:1%;
}
.post-items .post-item .post-content .image-sq
{
	background-size:cover;
}
.post-items .post-item .post-content .tag
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	
	margin:0 -0.25em;
	margin-top:0.5em;
	padding:0;
	list-style:none;
}
.post-items .post-item .post-content .tag .tag-item
{
	margin:0.25em;
	padding:0;
	list-style:none;
	
	padding:0.2em;
	background-color:#F0F0F0;
	border:1px solid #D0D0D0;
	
	font-size:0.8em;
}
.post-artice
{
	
}
.post-artice .post-artice-card
{
	border:1px solid #DDDDDD;
	width:calc(100% - 0.5em);
	margin:0.25em;
}
.post-artice .post-artice-card .post-content
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	padding:0.5em;
}
.post-artice .post-artice-card .post-content .date
{
	font-size:0.8em;
}
.post-artice .post-artice-card .post-content .title
{
	font-size:1.6em;
}
.post-artice .post-artice-card .post-content .description
{
	font-size:1.0em;
}
.post-artice .post-artice-card .post-content .thin
{
	margin:0.25em;
	white-space: nowrap;
	width:8em;
}
.post-artice .post-artice-card .post-content .grow
{
	margin:0.25em;
	flex-grow:1;
	width:1%;
}
.post-artice .post-artice-card .post-content .image-sq
{
	background-size:cover;
}
.post-artice .post-artice-card .post-content .tag
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	
	margin:0 -0.25em;
	margin-top:0.5em;
	padding:0;
	list-style:none;
}
.post-artice .post-artice-card .post-content .tag .tag-item
{
	margin:0.25em;
	padding:0;
	list-style:none;
	
	padding:0.2em;
	background-color:#F0F0F0;
	border:1px solid #D0D0D0;
	
	font-size:0.8em;
}
.post-artice .post-artice-body
{
	margin-top:2.0em;
}

.image-sq
{
	width:100%;
	padding-top:100%;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-color:#222222;
	background-image:url(../../img/noimage.png);
}
.post-navi
{
	margin-top:3.0em;
	
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center ;
    align-content:stretch;
}
.post-navi > div
{
	width:33.33333%;
}
.post-navi > div.prev
{
	text-align:left;
}
.post-navi > div.list
{
	text-align:center;
}
.post-navi > div.next
{
	text-align:right;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.post
	{
		flex-wrap:wrap;
		margin:-1.0em;
	}
	.post .post-list
	{
		margin:1.0em;
		width:calc(100% - 2.0em);
	}
	.post .post-menu
	{
		margin:1.0em;
		width:calc(100% - 2.0em);
	}
	.post-artice .post-artice-card .post-content
	{
		flex-wrap: wrap;
	}
	.post-artice .post-artice-card .post-content .thin
	{
		margin:0.25em;
		white-space: nowrap;
		width:100%;
		margin-bottom:1.0em;
	}
	.post-artice .post-artice-card .post-content .grow
	{
		margin:0.25em;
		flex-grow:1;
		width:1%;
	}
}