@charset "utf-8";
/* CSS Document */
/* =======================================

	BASE

======================================= */
#contents_wrapper{
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display:-webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
}
#contents_wrapper section{
	width: 50%;
}
#contents_wrapper section h4{
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 10px;
	margin-bottom: 40px;
}
#contents_wrapper section h4 i[class^="icon-"]{
	vertical-align: -3px;
}

/* =======================================

	ranking

======================================= */

#ranking .info{
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display:-webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	-ms-flex-pack:center;/*--- IE10 ---*/
	-webkit-justify-content:center;/*--- safari（PC）用 ---*/
	justify-content:center;
	text-align: center;
	margin: 50px 0;
}
#ranking .info li{
	margin: 0 15px;
}
#ranking .info li a{
	display: block;
    background-color: #FFF;
	color: #ff229d;
	font-size: 18px;
	font-weight: bold;
    width: 270px;
    padding: 15px 40px;
    border: 5px solid #FFF;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
    transition: all 0.8s ease 0s;
}

#ranking .info li a:hover{
	transition: all 0.8s ease 0s;
    padding: 15px 20px;	
    border: 5px solid #ff229d;
}
#ranking .info li.select a {
    border-color: #ff229d;
    color: #ff229d;
    cursor: default;
}
#ranking .info li a em{
	display: block;
	font-size: 14px;
	font-weight: normal;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #ff229d;
}

/* =======================================

	When_ranking

======================================= */

#ranking h4 {
    color: #ff229d;
    font-size: 20px;
    font-weight: bold;
}

#ranking .when{
	width: 65%;
    border: 4px solid #FF229D;
	text-align: left;
    margin: 0 auto 50px;
    padding: 20px;
    font-size: 16px;
}

h4.when_ranking{
    margin-left: 19%;
    margin-bottom: 10px;
}





/* =======================================

	LIST [BASE]

======================================= */	
#gakuen ul.block{}

#gakuen li.list{
	background-color: #FFF;
	position: relative;
	text-align: center;
	padding: 25px;
	margin-bottom: 80px;
}
#gakuen li.list:last-child{
	margin-bottom: 30px;
}
#gakuen li.list .name{
	position: relative;
    font-size: 21px;
    font-weight: bold;
}
#gakuen li.list .name:before{
	content: url(../images/ranking1_item1.png);
    background-color: #ddd;
    display: block;
    position: absolute;
    top: -8px;
    left: 30px;
    width: 60px;
    height: 60px;
    padding: 11px 8px;
}
#gakuen li.list .size{
    display: block;
    font-size: 14px;
    margin: 10px 0 25px;
}
#gakuen li.list .thum{
    width: 270px;
    overflow: hidden;
    margin: 0 auto;
}
#gakuen li.list .thum img{
	width: 100%;
}
#gakuen li.list .icon_award{
    position: absolute;
    bottom: -54px;
    right: 50%;
    margin-right: -19%;
    width: 190px;
}

/* =======================================

	LIST [begi_ave]

======================================= */	
ul.box{
	width: 56%;
    margin: 0 auto;
}
li.boxlist{
	display: table;
	table-layout: fixed;
	border-spacing: 40px;
	background-color: #FFF;
	margin-bottom: 30px;
}
li.boxlist:last-child{
	margin-bottom: 0;
}
li.boxlist div[class$="_box"]{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
li.boxlist .name{
    font-size: 30px;
    font-weight: bold;
    margin: 50px 0 10px;
}
li.boxlist .size{
    display: block;
    font-size: 18px;
}
li.boxlist .thum_box{
    width: 270px;
    overflow: hidden;
}
li.boxlist .thum_box img{
	width: 100%;
}
li.boxlist .icon_award{
    width: 280px;
}


/* =======================================

	LIST [DAY-TIME]

======================================= */	
#daytime{
	background-color: rgba(255,189,85,0.15);
	padding: 50px;
}
#daytime h4{
	color: #ffbd55;
}
#daytime h4 i{
	color: #e4007f;
}
#daytime li.list .name:before{
	background-color: #ffe155;
}
/* =======================================

	LIST [NIGHT-TIME]

======================================= */	
#nighttime{
	background-color: rgba(0,104,183,0.15);
	padding: 50px;
}
#nighttime h4{
	color: #0068b7;
}
#nighttime h4 i{
	color: #fff799;
}
#nighttime li.list .name:before{
	background-color: #0378d0;
}