@charset "utf-8";

/*
************************************************************************
* ブログ
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.blog-list
{
	display: flex;
	flex-wrap: wrap;
	margin:-1em;
}
.blog-list .blog-article
{
	display:block;
	width:calc(50% - 2em);
	margin:1em;
}
.blog-list .blog-article:hover
{
	text-decoration:none;
}
.blog-list .blog-article .thumbnail
{
	display:block;
	width:100%;
	padding-top:75%;
	background-color:#EFEFEF;
	background-image:url(../../img/image.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.blog-list .blog-article .title
{
	padding:0.5em;
	display:block;
}
.blog-list .blog-article .attr
{
	padding:0.5em;
	padding-top:0.0em;
	display:block;
}
.blog-list .blog-article .attr .date
{
	display:inline-block;
	font-size:0.7em;
}
.blog-list .blog-article .attr .tag
{
	display:inline-block;
	font-size:0.7em;
}
.blog-attrs
{
	margin-bottom:1em;
}
.blog-attrs .blog-attrs-title
{
	cursor:pointer;
	
	line-height:1;
	
	margin-bottom:0.5em;
	
}
.blog-attrs .blog-attrs-title > .main
{
	font-weight:bold;
}
.blog-attrs .blog-attrs-list
{
	height:0;
	transform-origin: top left;
	transform: scaleY(0.0);
}
.blog-attrs .blog-attrs-list.on
{
	height:auto;
	transform: scaleY(1.0);
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.blog-attrs .blog-attrs-title:before,
.blog-attrs .blog-attrs-title:after
{
	content:"";
	
	display:block;
	position:absolute;
	
	top:50%;
	right:0.2em;
	
	width:0.8em;
	height:0.0em;
	
	border:0px solid transparent;
	border-bottom:1px solid #999999;
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.blog-attrs .blog-attrs-title:before
{
    transform:rotate(90deg);
}
.blog-attrs .blog-attrs-title.on:before
{
    transform:rotate(0deg);
}
.blog-article-eyechatch
{
	width:100%;
	padding-top:100%;

	overflow: hidden;
	background-color:rgba(0,0,0,0.3);
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-blend-mode:color;

	margin-bottom:2em;
}
.blog-article-eyechatch:before
{
	content: '';
	background: inherit;
	background-size:cover;
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
	filter: blur(20px);
	position: absolute;
	top: -20px;
	left: -20px;
	right: -20px;
	bottom: -20px;
	z-index: -2;
}
.blog-article-eyechatch:after
{
	content: '';
	background: inherit;
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

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

	
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.blog-list .blog-article
	{
		width:calc(100% - 2em);
		margin:1em;
	}
}