@charset "utf-8";

/* ******************************************************************

	--post.css--

	1. Post setting
		1-1. PostTitle styles
		1-2. PostMeta styles
		1-3. PostCategory styles
		1-4. PostDate styles
		1-5. PostSubstr styles
		1-6. PostThumbnail styles
		1-7. PostBody styles
		1-8. PostList styles
		1-9. PostGenre styles
		1-10. PostRelease styles

****************************************************************** */

/*==================================================================
	1. Post setting
===================================================================*/

/* ------------------------------------------------------------------
	1-1. PostTitle styles
-------------------------------------------------------------------*/
.post_title {
	font-size: 16px;
	font-weight: 700;
	color: #000;
}
.post_title a {
	color: inherit;
}
.post_title a:hover {
	text-decoration: underline;
}

/* PRアイコン */
.post_attribution {
	line-height: 1;
}

/* ------------------------------------------------------------------
	1-2. PostMeta styles
-------------------------------------------------------------------*/
.post_meta {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 5px;
}

/* ------------------------------------------------------------------
	1-3. PostCategory styles
-------------------------------------------------------------------*/
.post_cat_sapporo10 {
	font-size: 12px;
}
.post_cat_sapporo10 div.series {
    background: #d5498a;
    color: #FFF;
    pointer-events: none;
}
.post_cat_sapporo10 div.series a{
    background: #d5498a;
    color: #FFF;
    pointer-events: all;
}
.post_cat_sapporo10 > div {
    border-radius: 50px;
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    font-weight: 700;
}
.post_cat_sapporo10 div.series:hover{
    background: #FFC0CB;
}
.post_cat_sapporo10 div.series a:hover{
    background: #FFC0CB;
}

.post_cat {
	font-size: 9px;
}
.post_cat > a,
.post_cat > div {
	background: #C7ECFF;
	border-radius: 50px;
	display: inline-block;
	vertical-align: top;
	padding: 0 10px;
	color: #254894;
	font-weight: 700;
}
.post_cat > a:hover {
	opacity: .5;
}
.post_cat a:not(:only-child) {
	margin: 0 5px 5px 0;
}

/* 各カテゴリアイコン色指定 */
/* 特集 */
.post_cat a.series,
.post_cat div.series {
	background: #254894;
	color: #FFF;
	pointer-events: none;
}
/* 朝刊一面 */
.post_cat a.paper,
.post_cat div.paper {
	background: #FFF;
	border: 1px solid #254894;
	color: #254894;
}
/* スクープ */
.post_cat a.scoop,
.post_cat div.scoop {
	background: #FF0000;
	color: #FFF;
	pointer-events: none;
}
/* 独自 */
.post_cat a.original,
.post_cat div.original {
	background: #FF0000;
	color: #FFF;
	pointer-events: none;
}
/* 道新スポーツ */
.post_cat span.dospo {
	display: inline-block;
	width: 81px;
}
/* イベント */
.post_cat a.event,
.post_cat div.event {
	background: #FFF;
	border: 1px solid #707070;
	color: #707070;
}

.post_cat2 {
	font-size: 12px;
  float: left;
  padding-right: 5px;
  padding-top: 3px;
}

.post_cat3 {
	font-size: 18px;
  float: left;
  padding-right: 5px;
  padding-top: 3px;
}

.post_cat2  > a,
.post_cat3  > a,
.post_cat2  > div,
.post_cat3  > div {
	background: #C7ECFF;
	border-radius: 50px;
	display: inline-block;
	vertical-align: top;
	padding: 0 10px 2px;
	color: #254894;
	font-weight: 700;
}
.post_cat2 > a:hover,
.post_cat3 > a:hover {
	opacity: .8;
}
.post_cat2 a:not(:only-child),
.post_cat3 a:not(:only-child) {
	margin: 0 5px 5px 0;
}

/* 特報 */
.post_cat2 a.scoop,
.post_cat3 a.scoop,
.post_cat2 div.scoop,
.post_cat3 div.scoop {
	background: #FF0000;
	color: #FFF;
	pointer-events: none;
}
/* 速報 */
.post_cat2 a.flash,
.post_cat3 a.flash,
.post_cat2 div.flash,
.post_cat3 div.flash {
	background: #FF0000;
	color: #FFF;
	pointer-events: none;
}
/* 独自 */
.post_cat2 a.original,
.post_cat3 a.original,
.post_cat2 div.original,
.post_cat3 div.original {
	background: #FF0000;
	color: #FFF;
	pointer-events: none;
}


/* ------------------------------------------------------------------
	1-4. PostDate styles（記事日付）
-------------------------------------------------------------------*/
.post_date {
	font-size: 12px;
	color: #595959;
}

/* 記事アイコン */
.post_icon {
	display: inline-block;
}
.post_icon.limited {
	margin-left: 5px;
}
.post_icon.pr {
	vertical-align: middle;
	width: 22px;
}

/* ------------------------------------------------------------------
	1-5. PostSubstr styles（記事抜粋）
-------------------------------------------------------------------*/
.post_substr {
	margin: 5px 0;
}

/* ------------------------------------------------------------------
	1-6. PostThumbnail styles（写真）
-------------------------------------------------------------------*/
.post_thm {
/*	background: #EDEDED; */
	border-radius: 5px;
	overflow: hidden;
	float: right;
}
.post_thm a {
	display: block;
}

/* 写真（逆配置） */
.post_thm_reverse { 
	float: left;
	margin-right: 25px;
	margin-left: 0 !important;
}

/* 写真（トリミングする場合） */
.post_thm_fit { }
.post_thm_fit img {
	object-fit: cover;
}

/* 写真（フレーム） */
.post_thm_bg {
	width: 100%;
	padding-top: 66.6%;
	position: relative;
}
.post_thm_bg img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	border-radius: 5px;
	object-fit: contain;
}
img.kakunin1 {
	border-radius: 0px;
}
img.radiusrelease {
	border-radius: 0px;
}

/* 動画アイコン付き */
.post_thm_movie {
	/*background: #333;*/
}
.post_thm_movie:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	/*background: url(../img/play.svg) 90% 88% no-repeat;*/
	background: url(../img/play.svg) 85% 85% no-repeat;
	-webkit-background-size: 25%;
	background-size: 25%;
}

/* ------------------------------------------------------------------
	1-7. PostBody styles（タイトルや日付を囲むdiv）
-------------------------------------------------------------------*/
.post_body { 
	overflow: hidden;
}

/* ------------------------------------------------------------------
	1-8. PostList styles（記事リスト）
-------------------------------------------------------------------*/
.post_list { }
.post_item {
	border-bottom: 1px solid #E8E3D6;
	padding-bottom: 17px;
	margin-bottom: 17px;
}

/* 記事_サムネイルS（100x67）付き */
.post_list-type_thm_bg-s { }
.post_list-type_thm_bg-s .post_thm {
	width: 100px;
	margin-left: 22px;
}

/* 記事_サムネイルM（140x90）付き */
.post_list-type_thm_bg-m { }
.post_list-type_thm_bg-m .post_thm {
	width: 140px;
	margin-left: 22px;
}
.post_list-type_thm_bg-m .post_item { 
	padding-bottom: 14px;
	margin-bottom: 14px;
}
.post_list-type_thm_bg-m .post_title { 
	font-size: 20px;
}

/* 記事_サムネイルL（300x200）付き */
.post_list-type_thm_bg-l { }
.post_list-type_thm_bg-l .post_thm {
	width: 300px;
	margin-left: 25px;
}
.post_list-type_thm_bg-l .post_thm_movie:before {
	-webkit-background-size: 16%;
	background-size: 16%;
}
.post_list-type_thm_bg-l .post_item { 
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.post_list-type_thm_bg-l .post_title { 
	font-size: 24px;
	color: #333;
}
.post_list-type_thm_bg-l .post_substr {
	margin: 20px 0;
}

/* 記事_グリッドタイプ */
.post_list-type_grid { }
.post_list-type_grid .post_thm {
	float: none;
	margin-bottom: 10px;
}
.post_list-type_grid .post_item { 
	padding-bottom: 20px;
	margin-bottom: 20px;
}


/* 記事_グリッドタイプ（影アリ） */
.post_list-type_grid_box { }
.post_list-type_grid_box .post_item {
	background: #FFF;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	padding: 0;
	margin-bottom: 30px;
	overflow: hidden;
}
.post_list-type_grid_box .post_thm {
	float: none;
	border-radius: 0;
}
.post_list-type_grid_box .post_body {
	padding: 10px 15px 15px 15px;
}
.post_list-type_grid_box .post_title {
	font-size: 17px;
}

/* 記事_小説用_サムネイルL（250x167）付き */
.post_list-type_novel { }
.post_list-type_novel .post_thm {
	width: 250px;
	margin-right: 15px;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 250px;
	flex: 0 0 250px;
}
.post_list-type_novel .post_item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.post_list-type_novel .post_title { 
	font-size: 16px;
}

/*-------------------------------*/
/*	記事リスト（サイド用）
/*-------------------------------*/
.section_side .post_title {
	font-size: 14px;
}

/* 記事_サムネイルS（100x67）付き */
.section_side .post_list-type_thm_bg-s .post_item {
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.section_side .post_list-type_thm_bg-s .post_item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
.section_side .post_list-type_thm_bg-s .post_thm {
	/*width: 80px;*/
	margin-left: 10px;
}
.section_side .post_list-type_thm_bg-s .post_date {
	font-size: 10px;
}

/* 記事_シンプルタイプ */
.post_list-type_simple { }
.post_list-type_simple .post_item {
	padding: 10px 0;
	margin-bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.post_list-type_simple .post_item:last-child {
	border-bottom: none;
}
.post_list-type_simple .post_date {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50px;
	flex: 0 0 50px;
	font-size: 12px;
	font-weight: 700;
	color: #3362B5;
}

/* 記事_ランキングタイプ */
.section_side_ranking { }
.section_side_ranking .heading_parts .post_date {
	color: #3362B5;
}
.section_side_ranking .post_list .post_item {
	padding: 10px 0 10px 25px;
	margin-bottom: 0;
	counter-increment: counter 1;
	position: relative;
}
.section_side_ranking .post_list .post_item:before {
	content: counter(counter);
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: Arial;
	font-style: italic;
	font-size: 20px;
	font-weight: 700;
	color: #3362B5;
}

/* 記事_お知らせ */
.section_side_info .post_list-type_thm_bg-s .post_item {
	padding: 10px 0;
	margin-bottom: 0;
}
.section_side_info .post_title {
	font-size: 12px;
}

/* ------------------------------------------------------------------
	1-9. PostGenre styles（記事ジャンル）
-------------------------------------------------------------------*/
.post_genre {
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 700;
	color: #707070;
}
/* ジャンルごとに色分けする場合はspanにクラスを付与して、装飾を上書きする想定 */
.post_genre span.event {
	background: #5388E6;
	display: inline-block;
	vertical-align: top;
	padding: 2px 10px;
	color: #FFF;
}

/* ------------------------------------------------------------------
	1-10. PostRelease styles（記事の公開状況）
-------------------------------------------------------------------*/
/* 小説一覧ページでのみ使用中 */
.post_release {
	font-size: 14px;
	color: #000;
}