@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/star1p.png") no-repeat center center;
	background-size: 100% auto;
	width: 25px;
	height: 25px;
	position: absolute;
	top:6px;
	left:7px;
}

/* ****************************
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:30%;
	}
	/* 二番目にあるddにクラスを付加 */
	.listbox dd + dd{
		width:68%;
	}
}

/* =============================================
 ストーリー詳細
============================================= */
.story-detail .story_title{
	position: relative;
	padding-bottom: 13vw;
	margin-bottom: 3%;
}
.story-detail .story_title:after{
	display: block;
	content: "";
	background: url("../img/smp/line_str.png") no-repeat bottom center;
	background-size: 100% auto;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom:0;
	left:0;
}
.story-detail .story_title p{
	background: url(../img/common/ribon.png) no-repeat top center;
	background-size: 80% auto;
	top: -5vw;
	z-index: 5;
	position: relative;
	padding: 0.6vw 0 2vw;
	color: #333;
}
.story-detail .story_title h3{
	font-size:1.25rem; /* 20pt */
	line-height: 1.2;
}
.story_txt{
	padding: 0 4% !important;
}
.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{
	width: 97%;
	padding: 0.15em 0 0.15em 0;
	font-size: 75%;
}

@media screen and (min-width:641px){
	.story-detail .story_title{
	position: relative;
	padding-bottom: 8%;
	margin-bottom: 1%;
}
	.story-detail .story_title:after{
		background: url("../img/pc/line_str2.png") no-repeat bottom center;
		background-size: 100% auto;
	}
	.story_title p span.num{
		color: #e5005e;
		font-size:1.25rem;
		font-weight: bold;
	}
	.story-detail .story_title p{
	background: url(../img/common/ribon.png) no-repeat top center;
	background-size: 50% auto;
	top: -25px;
	z-index: 5;
	position: relative;
	padding: 0.4vw 0 2vw;
	color: #333;
	}
	.story_title p span.date{
		font-size:1.125rem;
		color: #333;
	}
	.story-detail .story_title h3{
		font-size:1.625em; /* 26pt */
		line-height: 1.4;
	}
	.story_txt{
	padding: 25px 0 0 !important;
}
	.story_pager .btn_next a,
	.story_pager .btn_s a{
		width: 70%;
		padding: 0.3em 0 0.3em 0;
		font-size: 90%;
	}
	.story_pager .btn_prev a {
		width: 70%;
		padding: 0.35em 0 0.35em 0;
		font-size: 90%;
	}
	.story_pager{
		margin-top: 3%;
	}
}
@media screen and (min-width:1000px){
.story-detail .story_title{
	position: relative;
	padding-bottom: 8%;
	margin-bottom: 1%;
}
	.story-detail .story_title p{
	background: url(../img/common/ribon.png) no-repeat top center;
	background-size: 40% auto;
	top: -27px;
	z-index: 5;
	position: relative;
	padding: 0.5% 0 1%;
	}
	.story_txt{
	padding: 25px 0 0 !important;
}
	.story_pager .btn_next a,
	.story_pager .btn_s a{
		width: 60%;
		padding: 0.5em 0 0.5em 0;
		font-size: 100%;
	}
	.story_pager .btn_prev a {
		width: 60%;
		padding: 0.5em 0 0.5em 0;
		font-size: 100%;
	}
}
@media screen and (max-width:640px){
.story_pict_wrap{
	padding: 0 4%;
}
}
@media screen and (min-width:641px) and (max-width:999px){
.story_pict li{
	float: left;
	width: 100%;
}
.story_pict li a img {
    background: url(../img/pc/btn_zoom.png) no-repeat center bottom;
    background-size: 60% auto;
    padding-bottom: 17%;
}
}
@media screen and (min-width:1000px){
	.story-list .listbox li{
	float: left;
	width: 48.5%;
	margin-right: 3%;
	}
	.story-list .listbox li:nth-of-type(2n){
	margin-right: 0;
	}
	.story-list .listbox .pict{
		width:40%;
	}
	/* 二番目にあるddにクラスを付加 */
	.listbox dd + dd{
		width:58%;
	}
}