@charset "UTF-8";
.wrap{
	max-width:960px;
	margin: 0 auto;
	padding:0 2%;
}

.lead{
	background: #f1f1f1;
	text-align: center;
	padding: 30px 0;
	font-size: 14px;
	line-height: 2;
}

.newspaper-wrap, .level-wrap, .article-wrap{
	padding:30px 0;
}

.newspaper-wrap{
	background: /*rgb(204,231,227)*/rgb(218,235,243);
}

.newspaper-wrap ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.newspaper-wrap ul li{
	width:32.5%;
	border-radius: 5px;
	margin: 2.5px 0;
	/*margin:10px 0;*/
	background: #fff;
	font-size: 5px;
	text-align: center;
	position: relative;
}

.newspaper-wrap ul li:nth-child(3n-1){
	margin-left: 1.25%;
	margin-right:1.25%;
}

.newspaper-wrap ul li a{
	width:100%;
	height: 100px;
	display: flex;
	align-items: center;
}

.newspaper-wrap ul li a:hover{
	cursor: pointer;
	background-color:rgba(255,255,255,0.5);
	border-radius: 5px;
}
.newspaper-wrap ul li a div{
	padding: 12px;
}

.level-wrap{
	background: /*rgb(239,243,250)*/rgb(247,246,247);
}

.level-wrap ul{
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: stretch;
}

.level-wrap ul li{
	width:33%;
	border-radius: 5px;
	margin: 2.5px 0;
	background: #fff;
	font-size: 5px;
	text-align: center;
	border:3px solid /*#eaaa6c*/rgb(239,123,81);
}

.level-wrap ul li:last-of-type{
	width:100%;
	border-radius: 5px;
	margin: 2.5px 0;
	background: #fff;
	font-size: 5px;
	text-align: center;
	border:3px solid /*#eaaa6c*/rgb(239,123,81);
}

.level-wrap ul li a{
	width:100%;
	display: block;
	height: 100px;
	position: relative;
	padding: 10px 10px 10px;
	text-decoration: none;
}

.level-wrap ul li a span{
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	top:15%;
	left: 0;
	width:100%;
}

.level-wrap ul li a .star00{
	position: absolute;
	top:50%;
	left:0;
	width:100%;
	transform: translate(0,-50%);
}

.level-wrap ul li a .star01::after{
	content:url(../img/top/star_1.png);
	display: block;
	width:100%;
	padding-top:5px;
	/*position: absolute;*/
	/*top:50%;
	left:0;
	width:100%;
	transform: translate(0,-15%);*/
}

.level-wrap ul li a .star02::after{
	content:url(../img/top/star_2.png);
	display: block;
	padding-top:5px;
	/*position: absolute;
	top:50%;
	left:0;
	width:100%;
	transform: translate(0,-15%);*/
}

.level-wrap ul li a .star03::after{
	content:url(../img/top/star_3.png);
	display: block;
	padding-top:5px;
	/*position: absolute;
	top:50%;
	left:0;
	width:100%;
	transform: translate(0,-15%);*/
}

.level-wrap ul li a .star04::after{
	content:url(../img/top/star_4.png);
	display: block;
	padding-top:5px;
	/*position: absolute;
	top:50%;
	left:0;
	width:100%;
	transform: translate(0,-15%);*/
}

.level-wrap ul li a .star05::after{
	content:url(../img/top/star_5.png);
	display: block;
	padding-top:5px;
 /*position: absolute;
	top:50%;
	left:0;
	width:100%;
	transform: translate(0,-15%);*/
}

.level-wrap ul li a .star06::after{
	content:url(../img/top/star_6.png);
	display: block;
	padding-top:7px;
	/*position: absolute;
	top:50%;
	left: 0;
	width: 100%;
	transform: translate(0,-15%);*/
}

.article-wrap{
	background: #f1f1f1;
	/*padding:10px;*/
}


.article-wrap .wrapA{
	padding:0px 2%;
	max-width: 960px;
	margin: 0 auto;

}

.article-wrap .wrapA .article-box{
	border-bottom: 2px solid #f1f1f1;
	padding:20px 2%;
	background: rgba(255,255,255,0.5);
}

.article-wrap .wrapA .article-box ul{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-bottom: 15px;
}

.article-wrap .wrapA .article-box ul li{
	list-style: none;
	margin-right: 5px;
	font-size: 14px;
	font-weight: bold;
	padding:2px 5px;
}

.article-wrap .wrapA .article-box ul li:first-child{
	display: flex;
	flex-wrap: wrap;
	border:1px solid rgb(239,123,81);
	background-color: rgb(239,123,81);
	color:#fff;
}

.article-wrap .wrapA .article-box ul li:first-child span{
	justify-content: flex-start;
	margin-right: 2px;
	display: block;
}

.article-wrap .wrapA .article-box ul li:first-child span:last-child{
	margin-right: 0;
}


/*
.article-wrap .wrapA .article-box ul li:nth-child(2){
	border:3px solid rgb(218,235,243);
	background-color:rgb(218,235,243);
}

.article-wrap .wrapA .article-box ul li:nth-child(2) a{
	display: block;
	color: rgb(81,80,93);
	text-decoration: none;
}
*/
.article-wrap .wrapA .article-box ul li:nth-child(2){
	margin-right: 0;
	background-color: #f1f1f1;
	border:3px solid #f1f1f1;
	color:rgb(81,80,93);
}

.article-wrap .wrapA .article-box ul li:last-child{
	margin-right: 0;
	#background-color: #f1f1f1;
	#border:3px solid #f1f1f1;
	color:#C0C0C0;
	margin-left: auto;
}


.article-wrap .wrapA .article-box .title{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 25px;
	line-height: 1.25;
}

.article-wrap .wrapA .article-box .title dt{
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
	line-height: 1.25;
	color:rgb(58,144,207);
}

.article-wrap .wrapA .article-box .title dd a{
	color: rgb(81,80,93);
	text-decoration: none;
	/*letter-spacing: 0.5px;*/
}

.article-wrap .wrapA .article-box .article{
	display: flex;
	font-weight: bold;
	line-height: 1.25;
}

.article-wrap .wrapA .article-box .article dt{
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.25;
	color: rgb(58,144,207);
	margin-right: 25px;
}

.article-wrap .wrapA .article-box .article dt span{
	text-decoration: none;
}

.article-wrap .wrapA .article-box .article dd{
	font-weight: bold;
	font-size: 18px;
}

.article-wrap .wrapA .article-box .article dd a{
	color: /*rgb(81,80,93)*/gray;
	text-decoration: none;
}

.article-wrap .wrapA .article-box .article dd a span{
	border-bottom: 2px solid gray;
}


/*テーブルに罫線をつける
.article-wrap .wrapA table{
	border-collapse: collapse;
	width:100%;
	margin:0 auto;
	text-align: center;
}

.article-wrap .wrapA table tr.tr-heading{
	background-color:rgb(204,231,227);
}

.article-wrap .wrapA table tr.tr-heading a{
	color: rgb(81,80,93);
}

.article-wrap .wrapA table tr th{
	border:1px solid #ccc;
	padding:20px;
	font-size: 18px;
}

.article-wrap .wrapA table .tr-heading th a{
	text-decoration: none;
}

.article-wrap .wrapA table tr td{
	border:1px solid #ccc;
	padding:20px 5px;
	font-size: 18px;
	color: rgb(81,80,93);
	font-weight: bold;
}

レベルの垂直方向の中央揃え.article-wrap .wrapA table tr td:first-child{
}でも可能
.article-wrap .wrapA table .tr-1 .level-td{
	vertical-align: middle;
	text-decoration: none;
	color: rgb(81,80,93);
	font-weight: bold;
	padding:15px 0px;
}

.article-wrap .wrapA table tr td a {
	text-decoration: none;
	color:rgb(81,80,93);
}

出典と日付
.article-wrap .wrapA table tr:nth-child(2n-1) td{
	vertical-align: middle;
	font-size: 13px;
	padding:15px;

}

出典と日付 span
.article-wrap .wrapA table tr:nth-child(2n-1) td a span{
	background-color: #333;
	color: #fff;
	padding:5px 8px;;
}

交互に背景のカラーを変える　レベルとタイトル
.article-wrap .wrapA table tr:nth-child(4n) td{
	background-color: rgb(233,239,244);
}

交互に背景のカラーを変える　出典と日付
.article-wrap .wrapA table tr:nth-child(4n+1) td{
	background-color: rgb(233,239,244);
}
*/





.article-wrap .wrapA div .btn{
	display: block;
	text-align: center;
	width:50%;;
	margin: 20px auto 20px;
	border:2px solid #000;
	text-decoration: none;
	padding:13px 0 12px;
	font-weight: bold;
	}