@charset "UTF-8";
/* ==================================================
common
================================================== */

body.page_home {}

body.page_home #all_wrap {}

body.page_clip_articles {}

body.page_clip_articles #all_wrap {}

/* ==================================================
main
================================================== */

/* 記事リスト
------------------------------ */

#area_articles {}

#rt_favorite_sp{}

article.list.objView {
	display:none;
}

article .list_head img {
	max-height: 265px;
}

article.list.active_fev.objView,
article.list.active.objView {
	display:block;
}

#area_articles .list {
	width: 100%;
	border-radius: 8px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
	margin: 0 auto 38px;
	padding-bottom: 25px;
	max-width: 640px;
}


/* ### .list_head ### */

#area_articles .list .list_head {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	overflow: hidden;
}

#area_articles .list .list_head:hover, #area_articles .list .list_body:hover{
	cursor: pointer;
}

#area_articles .list .list_head {
	display: block;
}

#area_articles .list .list_head:hover {
	opacity: 1;
}

#area_articles .list .list_head img {
	transition: all 0.4s ease-out 0s;
}

@media screen and (min-width: 901px) {
	#area_articles .list .list_head:hover img {
		transform: scale(1.08);
	}
}

/* ### .list_body ### */

#area_articles .list .list_body {}

#area_articles .list .list_body .title {
	text-align: left;
	padding: 25px 5% 20px;
}

#area_articles .list .list_body .title h1 {
	font-size: 1.8rem;
	color: #000;
	font-weight: bold;
	/*! margin-bottom: 20px; */
}

#area_articles .list .list_body .title .program_name {
	color: #969696;
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	font-family: "Ekster-Regular", sans-serif;
	font-weight: normal;
	font-style: normal;
	margin-top: 20px;
}

#area_articles .list .list_body .foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row;
	padding: 0 5%;
}

/* タグ */

#area_articles .list .list_body .foot .tag {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #000;
	border-radius: 20px;
	color: #fff;
	font-family: "Ekster-Regular", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 1.3rem;
	letter-spacing: 0.15em;
	height: 28px;
	padding: 0 15px;
	vertical-align: middle;
}

#area_articles .list .list_body .foot .tag span {
	transform: translateY(2px);
	line-height: 1.2;
}

#area_articles .list .list_body .foot .tag.rajiko,
#area_articles .list .list_body .foot .tag.rajiko-timefree {
	padding: 0 15px 0 6px;
}

#area_articles .list .list_body .foot .tag.rajiko::before {
	content: "番組情報";
	font-family: "游ゴシック", YuGothic, "Yu Gothic", "Custom Yu Gothic", sans-serif;
	font-size: 1.2rem;
	color: #fff;
	order: -1;
	margin-right: 5px;
	letter-spacing: 0.04em;
	line-height: 1.2;
	font-weight: bold;
}

#area_articles .list .list_body .foot .tag.rajiko-timefree::before {
	content: "聞き逃し";
	font-family: "游ゴシック", YuGothic, "Yu Gothic", "Custom Yu Gothic", sans-serif;
	font-size: 1.2rem;
	color: #fff;
	order: -1;
	margin-right: 5px;
	letter-spacing: 0.04em;
	line-height: 1.2;
	font-weight: bold;
}

#area_articles .list .list_body .foot .tag.rajiko::after,
#area_articles .list .list_body .foot .tag.rajiko-timefree::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	background-color: #000;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M11.830%2C13.718%20L11.692%2C13.894%20L10.477%2C13.053%20L10.613%2C12.878%20C11.448%2C11.789%2011.886%2C10.502%2011.886%2C9.153%20C11.886%2C7.808%2011.448%2C6.519%2010.613%2C5.431%20L10.477%2C5.255%20L11.692%2C4.414%20L11.830%2C4.592%20C12.851%2C5.925%2013.393%2C7.502%2013.393%2C9.153%20C13.393%2C10.808%2012.851%2C12.385%2011.830%2C13.718%20ZM10.025%2C12.473%20L9.887%2C12.652%20L8.672%2C11.811%20L8.807%2C11.632%20C9.363%2C10.909%209.658%2C10.053%209.658%2C9.153%20C9.658%2C8.257%209.363%2C7.401%208.807%2C6.674%20L8.672%2C6.497%20L9.887%2C5.658%20L10.025%2C5.836%20C10.768%2C6.804%2011.160%2C7.953%2011.160%2C9.153%20C11.160%2C10.355%2010.768%2C11.504%2010.025%2C12.473%20ZM3.981%2C8.605%20L3.981%2C13.110%20L0.462%2C13.110%20L0.462%2C0.872%20L3.981%2C0.872%20L3.981%2C2.544%20C5.441%2C1.485%207.268%2C0.856%209.246%2C0.856%20L9.244%2C4.062%20C6.476%2C4.062%204.255%2C6.052%203.981%2C8.605%20ZM6.868%2C7.738%20L8.085%2C6.898%20L8.221%2C7.077%20C8.685%2C7.686%208.932%2C8.404%208.932%2C9.153%20C8.932%2C9.906%208.685%2C10.624%208.221%2C11.229%20L8.085%2C11.408%20L6.868%2C10.570%20L7.004%2C10.392%20C7.282%2C10.029%207.427%2C9.600%207.427%2C9.153%20C7.427%2C8.708%207.282%2C8.279%207.004%2C7.918%20L6.868%2C7.738%20Z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: 8px center;
	background-size: 14px 14px;
	border-radius: 20px;
	order: -2;
	margin-right: 5px;
}

/* クリップOFF ※基本設定 */

#area_articles .list .list_body .foot .clip {cursor: pointer;}

#area_articles .list .list_body .foot .clip p {}

#area_articles .list .list_body .foot .clip p .svg_style {
	fill: #787878;
	width: 32px;
	height: auto;
}

/* クリップON */

#area_articles .list .list_body .foot .clip.likeit_add {}

#area_articles .list .list_body .foot .clip p.likeit_add {}

#area_articles .list .list_body .foot .clip p.likeit_add .svg_style {
	fill: #1CA9E7;
}

/* クリップの使い方
------------------------------ */

#area_articles_guide {
	padding: 12px 4%;
	border: 1px solid #000;
	border-radius: 8px;
	max-width: 100%;
	margin: 50px auto;
}

#area_articles_guide .title {}

#area_articles_guide .title h2 {
	display: inline-block;
	margin: 0 auto 15px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #000;
	padding-bottom: 10px;
	position: relative;
}

#area_articles_guide .title h2::after {
	content: "";
	display: block;
	height: 2px;
	width: 100%;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
}

#area_articles_guide .note {
	text-align: left;
	line-height: 1.8;
	font-size: 1.6rem;
}

#area_articles_guide .note p {margin-bottom: 10px;}

#area_articles_guide .note p:last-child {
	font-size: 1.4rem;
}

#area_articles_guide .note .svg_style {
	width: 18px;
	fill: #787878;
	transform: translateY(2px);
	margin-right: 5px;
}

#area_articles_guide .note .spOnly {}

@media screen and (min-width: 901px) {
	/* 記事リスト
------------------------------ */
	#area_articles {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: row;
	}
	body.page_home #area_articles {
		/*! padding-top: 20px; */
	}
	#area_articles .list {
		width: calc(100% / 3 - 29px);
		margin: 0 0 68px;
		border-radius: 0;
		box-shadow: none;
		padding-bottom: 0;
	}
	#area_articles .list:nth-of-type(3n-1) {
		margin: 40px 43px 68px;
	}
	/* ### .list_head ### */
	#area_articles .list .list_head {
		border-radius: 8px;
		background-color: #eee;
	}
	#area_articles .list .list_head a:hover {}
	#area_articles .list .list_head a img {}
	#area_articles .list .list_head a:hover img {}
	/* ### .list_body ### */
	#area_articles .list .list_body {
		background: #1a1a1a;
		padding: 20px 15px;
		position: relative;
		z-index: 1;
		width: 90%;
		margin: -15px auto 0;
	}
	#area_articles .list .list_body .title {
		padding: 0;
	}
	#area_articles .list .list_body .title h1 {
		font-size: 1.4rem;
		color: #fff;
		font-weight: bold;
		/*! margin-bottom: 10px; */
	}
	#area_articles .list .list_body .title .program_name {
		color: #fff;
		font-size: 1.1rem;
		margin-top: 10px;
	}
	#area_articles .list .list_body .foot {
		padding: 0;
		margin-top: 10px;
		display: block;
		position: relative;
		text-align: left;
	}
	/* タグ */
	#area_articles .list .list_body .foot .tag {
		background: none;
		border-radius: 0;
		font-size: 1.1rem;
		height: auto;
		padding: 0;
	}
	#area_articles .list .list_body .foot .tag span {}
	#area_articles .list .list_body .foot .tag.rajiko,
	#area_articles .list .list_body .foot .tag.rajiko-timefree {
		padding: 0;
	}
	#area_articles .list .list_body .foot .tag.rajiko::before,
	#area_articles .list .list_body .foot .tag.rajiko-timefree::before {
		font-size: 1.1rem;
	}
	#area_articles .list .list_body .foot .tag.rajiko::after,
	#area_articles .list .list_body .foot .tag.rajiko-timefree::after {
		width: 18px;
		height: 18px;
		background-color: #fff;
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M11.830%2C13.718%20L11.692%2C13.894%20L10.477%2C13.053%20L10.613%2C12.878%20C11.448%2C11.789%2011.886%2C10.502%2011.886%2C9.153%20C11.886%2C7.808%2011.448%2C6.519%2010.613%2C5.431%20L10.477%2C5.255%20L11.692%2C4.414%20L11.830%2C4.592%20C12.851%2C5.925%2013.393%2C7.502%2013.393%2C9.153%20C13.393%2C10.808%2012.851%2C12.385%2011.830%2C13.718%20ZM10.025%2C12.473%20L9.887%2C12.652%20L8.672%2C11.811%20L8.807%2C11.632%20C9.363%2C10.909%209.658%2C10.053%209.658%2C9.153%20C9.658%2C8.257%209.363%2C7.401%208.807%2C6.674%20L8.672%2C6.497%20L9.887%2C5.658%20L10.025%2C5.836%20C10.768%2C6.804%2011.160%2C7.953%2011.160%2C9.153%20C11.160%2C10.355%2010.768%2C11.504%2010.025%2C12.473%20ZM3.981%2C8.605%20L3.981%2C13.110%20L0.462%2C13.110%20L0.462%2C0.872%20L3.981%2C0.872%20L3.981%2C2.544%20C5.441%2C1.485%207.268%2C0.856%209.246%2C0.856%20L9.244%2C4.062%20C6.476%2C4.062%204.255%2C6.052%203.981%2C8.605%20ZM6.868%2C7.738%20L8.085%2C6.898%20L8.221%2C7.077%20C8.685%2C7.686%208.932%2C8.404%208.932%2C9.153%20C8.932%2C9.906%208.685%2C10.624%208.221%2C11.229%20L8.085%2C11.408%20L6.868%2C10.570%20L7.004%2C10.392%20C7.282%2C10.029%207.427%2C9.600%207.427%2C9.153%20C7.427%2C8.708%207.282%2C8.279%207.004%2C7.918%20L6.868%2C7.738%20Z%22%2F%3E%3C%2Fsvg%3E');
		background-position: 5px 3px;
		background-size: 60%;
		margin-right: 8px;
	}
	/* クリップOFF ※基本設定 */
	#area_articles .list .list_body .foot .clip {
		position: absolute;
		bottom: -42px;
		right: -15px;
		width: 44px;
		height: 44px;
	}
	#area_articles .list .list_body .foot .clip p {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #1a1a1a;
		border-radius: 30px;
	}
	#area_articles .list .list_body .foot .clip p .svg_style {
		width: 50%;
		fill: #fff;
	}
	/* クリップON */
	#area_articles .list .list_body .foot .clip.likeit_add {}
	#area_articles .list .list_body .foot .clip p.likeit_add {
		background: #fff;
	}
	#area_articles .list .list_body .foot .clip p.likeit_add .svg_style {
		fill: #000;
	}
	/* クリップの使い方
------------------------------ */
	#area_articles_guide {
    max-width: 800px;
    padding: 12px 10px;
	}
	#area_articles_guide .title {}
	#area_articles_guide .title h2 {}
	#area_articles_guide .title h2::after {}
	#area_articles_guide .note {}
	#area_articles_guide .note p {margin-bottom: 6px;}
	#area_articles_guide .note p:last-child {}
	#area_articles_guide .note .svg_style {}
	#area_articles_guide .note .spOnly {}
}