@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	ブログ用css

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	PC・SP共通部分

================================================================================ */

.blog_wrap table{
	width:auto !important;
}
.blog_wrap table td{
	border:1px solid;
	padding:8px;
	width:auto !important;
	vertical-align:middle;
}

.pull-left{
	float:left;
}
.pull-right{
	float:right;
}



/* カテゴリアイコン色
---------------------------------------------------------------
.cate_投稿カテゴリスラッグ名　アイコンの色変更できます。
--------------------------------------------------------------- */
.blog_icon{
	padding: 0 1vw;
	background-color: #26477d;
	color: #ffffff;
	margin-right: 0.5vw;
}
.cate_news{
	background-color:#751d1d;
}
.cate_blog{
	background-color:;
}
.cate_voice{
	background-color:#222222;
}


/* タグアイコン色 */
.blog_tag ul li a{
	background-color:#741C1B;
	color:#ffffff;
}
.blog_tag ul li a:hover{
	text-decoration:none;
}



/* ================================================================================

	PC

================================================================================ */
@media (min-width: 768px) {

	/* 日付アーカイブ・タグタイトル */
	.category_title{
		margin-bottom:40px;
		font-size:32px;
		text-align:center;
		color: #fff;
	}


	/* ブログ */
	.blog_wrap{
		max-width:1000px;
		width:100%;
		margin:0 auto;
	}

	.blog_wrap p{
		overflow:hidden;
	}

	.blog_wrap img{
		max-width:100%;
		height:auto;
		margin:16px 0;
	}

	.blog_wrap > ul > li{
		background-color:#fff;
		margin-bottom:60px;
		padding:48px;
	}
	.blog_wrap > ul > li:last-child{
		margin-bottom:24px;
	}


	.blog_title_date{
		font-size:18px;
		margin-bottom:8px;
	}
	.blog_title_link{
		font-size:28px;
		margin-bottom:24px;
	}
	
	.blog_title_link a{
		color: #bb4c4c;
	}

	/* タグアイコン */
	.blog_tag{
		margin-top: 2vw;
		border-top: 0.1vw dotted #bb4c4c;
		padding-top: 1.5vw;
	}
	.blog_tag ul li{
		display:inline-block;
		margin:0 10px 0 0;
	}
	.blog_tag ul li a{
		padding:0 4px;
		display:block;
		font-size:14px;
	}



	/* 人気記事 */
	.popular_post_wrap{
		padding:100px 0 30px;
	}
	.popular_post_wrap h2{
		text-align:center;
		font-size:24px;
		font-weight:300;
		border-bottom:1px solid;
		width:50%;
		margin:0 auto 24px;
		color: #fff;
	}
	.popular_post_wrap ul{
		overflow:hidden;
		width:1000px;
		margin:0 auto;
	}
	.popular_post_wrap ul li{
		float:left;
		width:320px;
		margin-right:20px;
		background-color:#fff;
		clear:none;
		padding:10px;
	}
	.popular_post_wrap ul li:last-child{
		margin-right:0px;
	}
	.popular_post_wrap ul li img{
		float:none;
		display:block;
		margin:0 auto 8px;

		width:300px;
		height:200px;
		object-fit: cover;
		font-family: 'object-fit: cover;'; /* IE対策 */
	}
	.popular_post_wrap ul li a{
		float:none;
		display:block;
		text-align:center;
		font-size:inherit;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		color :#731C1C;
	}
	.popular_post_wrap ul li span{
		float:none;
		display:block;
		text-align:center;
	}


	/* 最近の投稿・アーカイブ */
	.blog_function_wrap_inner{
		padding:24px 0 0;
	}
	.blog_function_wrap_inner > ul{
		overflow:auto;
		width:1000px;
		margin:0 auto;
	}
	.blog_function_wrap_inner > ul > li a{
		font-size:16px;
		color: #fff;
	}
	.blog_function_wrap_inner > ul > li:nth-of-type(1){
		width:50%;
		padding:0 40px 16px;
		float:left;
	}
	.blog_function_wrap_inner > ul > li:nth-of-type(2){
		width:50%;
		padding:0 24px 16px;
		float:left;
	}
	/*
	.blog_function_wrap_inner > ul > li:nth-of-type(3){
		width:33.3%;
		padding:0 24px 16px;
		float:left;
	}
	*/
	.blog_function_wrap_inner > ul > li > ul{
		width:100%;
		height:210px;
		overflow:auto;
		text-align:center;
	}
	.blog_function_wrap_inner > ul > li > ul > li{
		font-size:16px;
		/* font-size:14px; */
		line-height:40px;
		color: #fff;
	}
	.blog_function_wrap_inner h2{
		text-align:center;
		font-size:24px;
		/* font-size:20px; */
		font-weight:300;
		border-bottom:1px solid;
		width:50%;
		margin:8px auto 24px;
		color: #fff;
	}
	.blog_function_wrap_inner .recent_title_text{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		width:76%;
		display:block;
		float:left;
		text-align:left;
	}
	.blog_function_wrap_inner .recent_title_text a{
		color: #fff;
	}
	.blog_function_wrap_inner .recent_title_date{
		font-size:14px;
		width:24%;
		display:block;
		float:left;
		text-align:right;
		color: #fff;
	}
}






/* ================================================================================

	SP

================================================================================ */

@media (max-width: 767px) {

	/* 日付アーカイブ・タグタイトル */
	.category_title{
		margin-bottom:32px;
		font-size:20px;
		text-align:center;
		color: #fff;
	}


	/* ブログ */
	.blog_wrap img{
		max-width:100%;
		height:auto;
		margin:16px 0;
	}

	.blog_wrap iframe{
		max-width:100%;
		width:100%;
		margin:16px auto;
	}

	.blog_wrap > ul >li{
		background-color:#f5f5f5;
		margin-bottom:40px;
		padding:24px;
	}


	.blog_title_link{
		font-size: 18px;
		margin-bottom: 16px;
	}
	
	.blog_title_link a{
		color: #bb4c4c;
	}
	
	.blog_title_date{
		font-size: 13px;
	}


	/* タグアイコン */
	.blog_tag{
		margin-top: 21px;
		border-top: 1px dotted #bb4c4c;
		padding-top: 5vw;
	}
	.blog_tag ul li{
		display:inline-block;
		margin:0 10px 0 0;
	}
	.blog_tag ul li a{
		padding:0 4px;
		display:block;
		font-size:14px;
	}



	/* 人気記事 */
	.popular_post_wrap{
		padding-top:60px
	}
	.popular_post_wrap h2{
		text-align:center;
		font-size:20px;
		border-bottom:1px solid;
		width:50%;
		margin:0 auto 24px;
		font-weight:300;
		color: #fff;
	}
	.popular_post_wrap ul{
		overflow:auto;
	}
	.popular_post_wrap ul li{
		width:100%;
		margin-bottom:40px;
		background-color:#fff;
		clear:none;
		padding:10px;
	}
	.popular_post_wrap ul li:last-child{
		margin-right:0px;
	}
	.popular_post_wrap ul li img{
		float:none;
		display:block;
		margin:0 auto 8px;

		width:300px;
		height:200px;
		object-fit: cover;
		font-family: 'object-fit: cover;'; /* IE対策 */
	}
	.popular_post_wrap ul li a{
		float:none;
		display:block;
		text-align:center;
		font-size:inherit;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	.popular_post_wrap ul li span{
		float:none;
		display:block;
		text-align:center;
	}


	/* 最近の投稿・アーカイブ */
	.blog_function_wrap_inner{
		padding:40px 0 0;
	}
	.blog_function_wrap_inner > ul{
		overflow:auto;
	}
	.blog_function_wrap_inner > ul > li > ul{
		width:100%;
		max-height:210px;
		height:100%;
		overflow:auto;
		text-align:center;
		margin-bottom:56px;
	}
	.blog_function_wrap_inner > ul > li > ul > li{
		line-height:2.5;
		color: #fff;
	}
	.blog_function_wrap_inner > ul > li a{
		color: #fff;
	}
	.blog_function_wrap_inner h2{
		text-align:center;
		font-size:20px;
		border-bottom:1px solid;
		width:50%;
		margin:20px auto 20px;
		font-weight:300;
		color: #fff;
	}
	.blog_function_wrap_inner .recent_title_text{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		width:62%;
		display:block;
		float:left;
		text-align:left;
	}
	.blog_function_wrap_inner .recent_title_date{
		width:38%;
		display:block;
		float:left;
		text-align:right;
		color: #fff;
	}
}







/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	お客様の声 ブログページ

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* お客様の声 */
	.voice_wrap{
		position:relative;
		width:1000px;
	}
	.voice_wrap ul{
		overflow:hidden;
	}
	.voice_wrap > ul > li{
		float:left;
		width:310px;
		margin-right:35px;
		margin-bottom:48px;
		border-bottom:1px dotted;
	}
	.voice_wrap > ul > li:nth-of-type(3n){
		float:left;
		width:310px;
		margin-right:0;
	}

	.voice_icon{
		position:relative;
		height:0;
	}
	.voice_icon span{
		position:relative;
		transform: translateY(16px);
		-webkit-transform:translateY(16px);
		-ms-transform:translateY(16px);
		color:#751d1c;
		background-color:#ffffff;
		padding:0 12px;
		z-index:1;
		display:inline-block;
	}

	.voice_title{
		border-bottom:1px solid #ffffff;
		padding:8px 8px 4px;
		margin-bottom:8px;
		display:block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		color:#ffffff;
	}
	.voice_title a{
		color:#ffffff;
	}

	.voice_thumb img{
		width:310px;
		height:210px;
		object-fit: cover;
		font-family: 'object-fit: cover;'; /* IE対策 */
		border-radius:4px;
	}

	/* タグ */
	.voice_tag{
		padding:8px 0;
		height:43.2px;
	}
	.voice_tag ul li{
		display:inline-block;
		margin:0 10px 0 0;
	}
	.voice_tag ul li a{
		background-color:#9cc813;
		padding:0 4px;
		color:#ffffff;
		display:block;
		font-size:14px;
	}

	/* 内容 */
	.voice_text{
		padding:0 8px;
		height:62px;
	}

	.voice_link{
		padding:8px 0 0;
		text-align:right;
	}
	.voice_link a{
		color:#9cc813;
	}

}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	/* お客様の声 */
	.voice_wrap{
		position:relative;
		margin:0 auto;
	}
	.voice_wrap > ul{
	}
	.voice_wrap > ul > li{
		position:relative;
		margin:0 4vw 10vw;
		padding:0;
		border-bottom:1px dotted;
	}


	.voice_icon{
		position:relative;
		height:0;
	}
	.voice_icon span{
		position:relative;
		transform: translateY(4vw);
		-webkit-transform:translateY(4vw);
		-ms-transform:translateY(4vw);
		color:#751d1c;
		background-color:#ffffff;
		padding:0 2vw;
		z-index:1;
		display:inline-block;
	}

	.voice_title{
		border-bottom:1px solid #ffffff;
		padding:1vw 2vw 0;
		margin:0 0 2vw;
		display:block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		color:#ffffff;
	}
	.voice_title a{
		color:#ffffff;
		font-size:4vw;
	}

	.voice_thumb img{
		width: 100%;
		height: 55vw;
		object-fit: cover;
		font-family: 'object-fit: cover;';
		border-radius: 4px;
	}

	/* タグ */
	.voice_tag{
		padding:8px 0;
	}
	.voice_tag ul li{
		display:inline-block;
		margin:0 10px 0 0;
	}
	.voice_tag ul li a{
		background-color:#9cc813;
		padding:0 4px;
		color:#ffffff;
		display:block;
		font-size:14px;
	}

	/* 内容 */
	.voice_text{
		padding:0 2vw;
	}
	.voice_text p{
		font-size:3.5vw;
	}

	.voice_link{
		padding:4vw 0 0;
		text-align:right;
	}
	.voice_link a{
		color:#9cc813;
		font-size:3.5vw;
	}
}