@charset "utf-8";

/* ***************************************************
ＨＵＧっと！プリキュア
------------------------------------------------------
本サイト用ニュース(NEWS)　※ディザー用はinformation.css参照
------------------------------------------------------
・640pxまでをスマホとする
・641pxからタブレット／PCととする
・1000pxはPC専用とする
*************************************************** */
/* =============================================
 ストーリー一覧
============================================= */
.story-list .listbox dt{
	font-weight:bold;
	color:#891085;
	padding-left:46px;
	line-height: 1;
}
.story-list .listbox dt span{
	font-weight:normal;
	color:#2a2a2a;
	font-size:0.875rem;
}
.story-list .listbox dt:before{
	display: block;
	content: "";
	background: url("../img/common/ico_crown.png") no-repeat center center;
	background-size: 100% auto;
	width: 30px;
	height: 25px;
	position: absolute;
	top:4px;
	left:10px;
}
/* **************************** 
PC・タブレット用 CSS
**************************** */
@media screen and (min-width:641px){ 
	.story-list .listbox dt{
		font-size:1.125rem;
	}
	.story-list .listbox dt span{
		font-size:1rem;
	}
	.story-list .listbox .pict{
		width:20%;
	}
	/* 二番目にあるddにクラスを付加 */
	.listbox dd + dd{
		width:78%;
	}
}
/* =============================================
 ストーリー詳細
============================================= */
.story-detail .story_title{
	position: relative;
	padding-bottom: 6%;
	margin-bottom: 3%;
}
.story-detail .story_title:after{
	display: block;
	content: "";
	background: url("../img/common/line_heart.png") no-repeat bottom center;
	background-size: 100% auto;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom:0;
	left:0;
}
.story-detail .story_title h3{
	font-size:1.25rem; /* 20pt */
	line-height: 1.2;
}
.story_pager{
	margin-top: 6%;
}
.story_pager:after{
	content: "";
	display: block;
	clear: both;
}
.story_pager li{
	display: inline-block;
	width: 31%;
}
.story_pager .btn_s a,
.story_pager .btn_next a,
.story_pager .btn_prev a,
.story_pager .no_link{
	padding: 6% 12% 6% 12%;
}

@media screen and (min-width:641px){ 
	.story-detail .story_title:after{
		background: url("../img/common/line_heart2.png") no-repeat bottom center;
		background-size: 100% auto;
	}
	.story_title p span.num{
		color: #e5005e;
		font-size:1.25rem;
		font-weight: bold;
	}
	.story_title p span.date{
		font-size:1.125rem;
	}
	.story-detail .story_title h3{
		font-size:1.625em; /* 26pt */
		line-height: 1.4;
	}
	.story_pager .btn_next a,
	.story_pager .btn_s a{
		width: 60%;
		padding: 5% 6% 5% 5%;
	}
	.story_pager .btn_prev a {
		width: 60%
		padding: 5% 5% 5% 6%;
	}
	.story_pager{
		margin-top: 3%;
	}
}