@charset "UTF-8";
/* CSS Document */

/*----------------------------

毎日小学生新聞

------------------------------*/
section {
    margin-bottom: 0;
}

ul.newspaper .ttl {
	font-feature-settings: "palt";
	letter-spacing: 0.025em;
}

ul.newspaper .ttl br {
	display: none;
}

/*----日付-----*/
ul.newspaper .sub {
	text-align: left;
}

/*----Newマーク-----*/
ul.newspaper .sub.new::before {
	display: inline-block;
	content: "NEW";
	color: #fff;
	font-size: 76%!important;
	background-color: #ff5582;
	border-radius: 5px;
	padding: 3px 5px 2px;
	margin: 0 5px 0 0;
	line-height: 120%;
}

/*----ルビ-----*/
ul.newspaper li rt {
	font-size: 40%;
}

.ribbon {
	padding: 2px 10px 3px;
	color: #fff;
	background-color: #039ad6;
	font-size: 80%;
	border-radius: 5px;
	margin: 0 0 0 5px;
}

ul.img_list li:hover .ribbon,
ul.img_list li:focus .ribbon {
	color: #fff;
	background-color: #ff9b23;
	transition: all .3s;/*ふわっと切り替え*/
}

ul.img_list li:hover .new::before {
	background-color: #fc2536;
	transition: all .3s;/*ふわっと切り替え*/
}

.annotation {
	font-size: 86%;
}

.pagination {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 20px 0 0;
}

.pagination p {
	margin: 0;
	padding: 0;
}

.pagination button {
	margin: 0;
	padding: 0px 10px;
	font-size: 100%;
	color: #333;
	border: solid 1px #999;
	cursor: pointer;
	background-color: #ededed;
	border-radius: 4px;
}

.pagination .prev-page button,
.pagination .next-page button {
	padding: 0px 12px;
}

.pagination .prev-page button {
	margin: 0 16px 0 8px;
}

.pagination .next-page button {
	margin: 0 8px 0 16px;
}
.pagination button:hover {
	background-color: #ffdd88;
}

.pagination p.disabled button {
	color: #bfbfbf;
	border: solid 1px #bfbfbf;
	cursor: default;
}

.pagination p.disabled button:hover {
	background-color: #ededed;
}

ul.pager {
	display: flex;
	flex-direction: row;
	padding: 0;
	margin: 0;
}

ul.pager li {
	margin: 0 3px;
	list-style: none;
}

ul.pager li a {
	font-weight: bold;
	padding: 0px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	text-decoration: none;
	border: solid 1px #0071bc;
	border-radius: 4px;
	font-size: 90%;
}

li.current a {
	color: #fff;
	background: #0071bc;
	cursor: default;
}

li.ellipsis {
	font-size: 86%;
}

@media screen and (min-width: 640px) {
ul.img_list.newspaper li span.ttl {
	padding: 10px 5px 10px 10px;
}
	
ul.newspaper .ttl br {
	display: block;
}

ul.newspaper .sub {
	margin: 0 3px 0 0;
	text-align: right;
	font-size: 70%!important;
}
	
ul.newspaper .sub.new {
	display: flex!important;
  justify-content: space-between;
	align-items: center;
}
	
	/*----Newマーク-----*/
ul.newspaper .sub.new::before {
	font-size: 80%;
	padding: 3px 10px 2px;
	margin: 0; 
}
	
ul.newspaper li rt {
	font-size: 35%;
}
	
.ribbon {
	display: inline-block;
	position: absolute;
	left: -4px;
	top: 5px;
	box-sizing: border-box;
	padding: 0 8px 0 6px;
	margin: 0;
	height: 30px;
	line-height: 30px;
	font-size: 76%!important;
	color: white;
	background: #039ad6;
	/*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);*/
	z-index: 1;
	border-radius: 0px 5px 5px 0px;

}
.ribbon:before {
	position: absolute;
	content: '';
	top: 0;
	left: -7px;
	border: none;
	height: 38px;
	width: 7px;
	background: #039ad6;
	border-radius: 5px 0 0 5px;
}
.ribbon:after {
	position: absolute;
	content: '';
	bottom: -7px;
	left: -5px;
	border: none;
	height: 7px;
	width: 5px;
	background: #0273a1;
	border-radius: 5px 0 0 5px;
}

ul.img_list li:hover .ribbon,
ul.img_list li:hover .ribbon:before ,
ul.img_list li:hover .ribbon:after,
ul.img_list li:focus .ribbon,
ul.img_list li:focus .ribbon:before ,
ul.img_list li:focus .ribbon:after {
	color: #fff;
	background-color: #ff9b23;
	transition: all .3s;/*ふわっと切り替え*/
}

ul.img_list li:hover .ribbon:after,
ul.img_list li:focus .ribbon:after {
	background-color: #bf741a;
}

.annotation {
	font-size: 75%;
}

.pagination {
	margin: 40px 0 0;
}	

ul.pager li {
	margin: 0 4px;
}

ul.pager li a {
	padding: 0px 14px;
	font-size: 100%;
}
	
}/*@media おわり*/