@charset "utf-8";

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

/*
************************************************************************
* ブログ
************************************************************************
*/
#blog .row.blog
{
	max-width:800px;
}
#blog .post
{
	padding-top:70px;
	padding-bottom:70px;
	border-bottom:1px solid #e3e3e3;
}
#blog .post:first-child
{
	padding-top:0px;
}
#blog .post:last-child
{
	border-bottom:0px solid transparent;
}
#blog .post .post-title
{
	font-size:2.4rem;
	font-weight:bold;
	line-height:1.5;
}
#blog .post .post-prop
{
	margin-top:1em;
	margin-bottom:1em;
	
	display:flex;
	
	line-height:1.2;
}
#blog .post .post-prop .post-prop-item
{
	margin-right:1em;
	border-right:1px solid #cccccc;
}
#blog .post .post-prop .post-prop-item:last-child
{
	border-right:0px solid transparent;
}
#blog .post .post-prop .post-prop-item span
{
	padding-right:1em;
}
#blog .post .post-body
{
	margin-top:50px;
	line-height:2;
	font-size:1.6rem;
}
#blog .post .post-body img
{
	display:block;
	margin: 2.2em 0 2.5em;
	height:auto;
	border-radius:0.5em;
}
#blog .post-body p strong{
	font-family:auto;
}
#blog .navigation.pagination
{
	
}
#blog .navigation.pagination h2
{
	display:none;
}
#blog .navigation.pagination .nav-links
{
	line-height:1;
}
#blog .navigation.pagination .nav-links .page-numbers
{
	display:none;
	font-family: 'Roboto';
}
#blog .navigation.pagination .nav-links .page-numbers:hover
{
	opacity:0.5;
	text-decoration:none;
}
#blog .navigation.pagination .nav-links .page-numbers.prev,
#blog .navigation.pagination .nav-links .page-numbers.next
{
	display:block;
	width:50%;
	font-size:2.4rem;
	font-weight:bold;
}
#blog .navigation.pagination .nav-links .page-numbers.prev
{
	float:left;
	text-align:left;
}
#blog .navigation.pagination .nav-links .page-numbers.prev:before
{
	content:"";
	
	display:inline-block;
	
	width:0.6em;
	height:0.6em;
	
	transform:rotate(-45deg) skew(10deg, 10deg);
	
	border-left:1px solid #000000;
	border-top:1px solid #000000;
	
	margin-bottom:0.05em;
}
#blog .navigation.pagination .nav-links .page-numbers.next
{
	float:right;
	text-align:right;
}
#blog .navigation.pagination .nav-links .page-numbers.next:after
{
	content:"";
	
	display:inline-block;
	
	width:0.6em;
	height:0.6em;
	
	transform:rotate(-45deg) skew(10deg, 10deg);
	
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	
	margin-bottom:0.05em;

}
#blog .blog-operation
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	
	margin:-1.0em;
}
#blog .blog-operation .blog-operation-item
{
	width:calc(33.33333% - 2em);
	margin:1.0em;
}
#blog .blog-operation .blog-operation-item .blog-operation-title
{
	font-weight:bold;
	font-size:1.6rem;
	margin-bottom:0.5em;
}
#blog .blog-operation .blog-operation-item .blog-operation-search span.screen-reader-text
{
	display:none;
}
#blog .blog-operation .blog-operation-item .blog-operation-search label
{
	line-height:1.2;
}
#blog .blog-operation .blog-operation-item .blog-operation-search label .search-field
{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
	
	border-radius:0px;
	border:0px solid transparent;
	
	padding:0.5em 0em;
	width:100%;
	border-bottom:1px solid #000000;
	line-height:1.2;
}
#blog .blog-operation .blog-operation-item .blog-operation-search .search-submit
{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
	
	border-radius:0px;
	border:0px solid transparent;
	background-color:transparent;
	
	position:absolute;
	top:50%;
	right:5px;
	
	transform:translateY(-50%);
	
	padding:0;
	
	font-size:0;
	color:transparent;
	
	height:2.0rem;
	width:2.0rem;
	
	background-image:url(../../../_img/icon/search.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
input:focus {
	background-color:transparent;
}
input::-ms-clear {
	visibility:hidden;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
#blog .blog-operation .blog-operation-item .blog-operation-dropdown select
{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
	
	border-radius:0px;
	border:0px solid transparent;
	
	padding:0.5em 0em;
	width:100%;
	border-bottom:1px solid #000000;
	line-height:1.2;
	background-color:transparent;
}
#blog .blog-operation .blog-operation-item .blog-operation-dropdown:after
{
	content:"";
	
	display:block;
	position:absolute;
	top:calc(50% - 0.3em);
	right:0.6em;
	
	width:0.6em;
	height:0.6em;
	
	transform:rotate(-45deg) skew(-10deg, -10deg);
	
	border-left:1px solid #000000;
	border-bottom:1px solid #000000;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}


/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	#blog .row.blog
	{
		max-width:auto;
	}
	#blog .post
	{
		padding-top:7.5vw;
		padding-bottom:7.5vw;
		border-bottom:1px solid #e3e3e3;
	}
	#blog .post:first-child
	{
		padding-top:0px;
	}
	#blog .post:last-child
	{
		border-bottom:0px solid transparent;
	}
	#blog .post .post-title
	{
		font-size:3.6rem;
		font-weight:bold;
		line-height:1.5;
	}
	#blog .post .post-prop
	{
		margin-top:1em;
		margin-bottom:1.8em;
		
		display:flex;
		
		line-height:1.2;
	}
	#blog .post .post-prop .post-prop-item
	{
		margin-right:1em;
		border-right:1px solid #cccccc;
		font-size:2.2rem;
	}
	#blog .post .post-prop .post-prop-item:last-child
	{
		border-right:0px solid transparent;
	}
	#blog .post .post-prop .post-prop-item span
	{
		padding-right:1em;
	}
	#blog .post .post-body
	{
		margin-top:4vw;
		font-size:2.8rem;
		line-height:1.8;
	}
	#blog .post .post-body img
	{
		margin:2.0em auto 2.2em auto;
	}

	#blog .navigation.pagination
	{
		
	}
	#blog .navigation.pagination h2
	{
		display:none;
	}
	#blog .navigation.pagination .nav-links
	{
		line-height:1;
	}
	#blog .navigation.pagination .nav-links .page-numbers
	{
		display:none;
		font-family: 'Roboto';
	}
	#blog .navigation.pagination .nav-links .page-numbers:hover
	{
		opacity:0.5;
		text-decoration:none;
	}
	#blog .navigation.pagination .nav-links .page-numbers.prev,
	#blog .navigation.pagination .nav-links .page-numbers.next
	{
		display:block;
		width:50%;
		font-size:3.6rem;
		font-weight:bold;
	}
	#blog .navigation.pagination .nav-links .page-numbers.prev
	{
		float:left;
		text-align:left;
	}
	#blog .navigation.pagination .nav-links .page-numbers.prev:before
	{
		content:"";
		
		display:inline-block;
		
		width:0.6em;
		height:0.6em;
		
		transform:rotate(-45deg) skew(10deg, 10deg);
		
		border-left:1px solid #000000;
		border-top:1px solid #000000;
		
		margin-bottom:0.05em;
	}
	#blog .navigation.pagination .nav-links .page-numbers.next
	{
		float:right;
		text-align:right;
	}
	#blog .navigation.pagination .nav-links .page-numbers.next:after
	{
		content:"";
		
		display:inline-block;
		
		width:0.6em;
		height:0.6em;
		
		transform:rotate(-45deg) skew(10deg, 10deg);
		
		border-right:1px solid #000000;
		border-bottom:1px solid #000000;
		
		margin-bottom:0.05em;

	}
	#blog .blog-operation
	{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		
		margin:0.0em;
	}
	#blog .blog-operation .blog-operation-item
	{
		width:calc(100%);
		margin:0;
		margin-bottom:2.0em;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-title
	{
		font-weight:bold;
		font-size:2.8rem;
		
		width:30vw;
		float:left;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-search
	{
		margin-left:30vw;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-search span.screen-reader-text
	{
		display:none;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-search label
	{
		line-height:1.2;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-search label .search-field
	{
	    -webkit-appearance: none;
	       -moz-appearance: none;
	            appearance: none;
		
		border-radius:0px;
		border:0px solid transparent;
		
		padding:0.8em 0em;
		width:100%;
		border-bottom:1px solid #000000;
		line-height:1.2;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-search .search-submit
	{
	    -webkit-appearance: none;
	       -moz-appearance: none;
	            appearance: none;
		
		border-radius:0px;
		border:0px solid transparent;
		background-color:transparent;
		
		position:absolute;
		top:50%;
		right:1vw;
		
		transform:translateY(-50%);
		
		padding:0;
		
		font-size:0;
		color:transparent;
		
		height:4.0vw;
		width:4.0vw;
		
		background-image:url(../../../_img/icon/search.svg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:contain;
	}
	input:focus {
		background-color:transparent;
	}
	input::-ms-clear {
		visibility:hidden;
	}
	[type="search"]::-webkit-search-cancel-button,
	[type="search"]::-webkit-search-decoration {
	  -webkit-appearance: none;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-dropdown
	{
		margin-left:30vw;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-dropdown select
	{
	    -webkit-appearance: none;
	       -moz-appearance: none;
	            appearance: none;
		
		border-radius:0px;
		border:0px solid transparent;
		
		padding:0.8em 0em;
		width:100%;
		border-bottom:1px solid #000000;
		line-height:1.2;
	}
	#blog .blog-operation .blog-operation-item .blog-operation-dropdown:after
	{
		content:"";
		
		display:block;
		position:absolute;
		top:calc(50% - 0.5em);
		right:0.6em;
		
		width:0.6em;
		height:0.6em;
		
		transform:rotate(-45deg) skew(-10deg, -10deg);
		
		border-left:1px solid #000000;
		border-bottom:1px solid #000000;

		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
}