@charset "UTF-8";

#pageHero {
    background: url(../images/bg_result_hero.jpg) no-repeat center 45.9%;
}
main article{
    margin-top: 77px;
}
#pageResult h2 {
	position: relative;
	font-size: 1.7em;
	letter-spacing: 0.04em;
	color: #bff8ff;
	padding-bottom: 0.7em;
	margin-bottom: 4.2%;
}
#pageResult h2 img{
	width:100%;
}
#pageResult .underline:after {
	content: "";
	background: url(../images/hr_cts.png) no-repeat center;
	width: 115.1%;
	height: 48px;
	position: absolute;
	display: block;
	left: -8.2%;
	bottom: 0;
	margin-bottom: -4.2%;
	-webkit-background-size: 100% 100% !important;
	background-size: 100% 100% !important;
}
#pageResult h5 img {
	width: 100%;
}
/*============================
#ctsRanking
============================*/
#ctsRanking h2 {
	position: relative;
	margin: -4.9% auto -0.8%;
	width: 50.8%;
}
#ctsRanking h2.stl:after {
	display:none;
}
#ctsRanking .rank1 h3 {
	width: 46.772%;
	margin: 1.6% auto 10%;
	padding-left: 2%;
}
#ctsRanking .rank1 .card {
	width: 30.2%;
}
#ctsRanking .rank1 h5 {
	width: 47.605%;
	margin: 1.5% auto 2.8%;
	padding-left: 2%;
}
#ctsRanking .rank2-4 li {
	display: inline-block;
	width: 33.33%;
	vertical-align: top;
}
#ctsRanking .rank2-4 h3 {
	width: 93.14%;
	margin: 2.6% auto 3%;
	padding-right: 1.4%;
}
#ctsRanking .rank2-4 .card {
	width: 68.764%;
}
#ctsRanking .rank2-4 h5 {
	width: 94.39%;
	margin: 3% auto;
}
#ctsRanking .rank {
	margin-bottom: -1.9%;
}
#ctsRanking .rank ul {
	width: 108%;
	margin: 0 -4%;
}
#ctsRanking .rank li {
	display: inline-block;
	width: 25%;
	margin-bottom: 3.9%;
}
#ctsRanking .rank h3 {
	width: 49.272%;
	margin: 5% auto 3.8%;
	position: relative;
}
#ctsRanking .rank h3:after {
	width: 170%;
	margin-left: -25%;
}
#ctsRanking .rank .card {
	width: 84.885%;
}
/*============================
#ctsStanding
============================*/

#ctsStanding {
	margin: 8.8% 0 8.5%;
}
#ctsStanding h2{
	padding-bottom: 0.05em;
	margin-bottom: 6.1%;
}
#ctsStanding .standing {
	margin: -0.3% 0 1% -2.2%;
	width: 104.376%;
}
/*============================
#ctsVideo
============================*/
#ctsVideo {
	margin-bottom: 11.4%;
}
#ctsVideo h2{
	padding-bottom: 0.05em;
	margin-bottom: 5.8%;
}
#ctsVideo .movie{position:relative;width: 100%;padding: 16.875% 0;background: url(../images/thumb_result_movie.jpg) no-repeat;background-size: cover;cursor: pointer;transition: opacity .3s;}
#ctsVideo .movie:hover{opacity:0.7;}
#ctsVideo .movie .playmark{
    width: 21.667%;
}
#ctsVideo .movie:after{content: "";display: block;position: absolute;width: 100%;height: 100%;width: calc(100% - 2px);height: calc(100% - 2px);top: 0;left: 0;border: #a1dbe4 1px solid;pointer-events: none;transition: background 0.2s;box-shadow: #006fa9 0 0 25px 0, rgba(0, 167, 255, 0.5) 0 0 35px 0 inset;}
/*============================
#ctsGallery
============================*/

#ctsGallery {
	margin-bottom: 6.4%;
}
#ctsGallery h2{
	padding-bottom: 0.05em;
	margin-bottom: 6.1%;
}
#ctsGallery ul {
	width: 104.167%;
	margin-left: -2.2%;
	margin-top: -0.3%;
	text-align: left;
}
#ctsGallery li {
	position:relative;
	display: inline-block;
	width: 23%;
	height: 0;
	margin: 0 2.65% 2.7% 0;
	padding-bottom: 15.4%;
	background: #020f22;
	cursor: pointer;
}
#ctsGallery li img{
	width:100%;
}
#ctsGallery li:after{content: "";display: block;position: absolute;width: 100%;height: 100%;width: calc(100% - 2px);height: calc(100% - 2px);top: 0;left: 0;border: #a1dbe4 1px solid;pointer-events: none;transition: background 0.2s;box-shadow: #006fa9 0 0 25px 0, rgba(0, 167, 255, 0.5) 0 0 35px 0 inset;}

#ctsGallery li:nth-child(4n) {
	margin-right: 0;
}
@media screen and (min-width: 768px) and (max-width: 1060px) {
    #pageResult article .ctsInner{
        width: 96%;
        margin: 2% auto;
    }
}


@media screen and (max-width: 767px) {
  #pageResult #pageHero {
    min-height: 46.4vw;
    background: url(../images/bg_result_hero_sp.jpg) no-repeat center bottom;
    -webkit-background-size: 100% 100% !important;
            background-size: 100% !important;
  }
  main article{
  	margin-top: 8%;
  }
    #pageResult h2 {
        font-size: 0.98em;
        letter-spacing: 0.04em;
        margin: -1.8% 0 -3.7% 16.2%;
        width: 67.6%;
    }
    #pageResult .underline:after {
        background: url(../images/hr_cts.png) no-repeat center;
        width: 110%;
        height: 1.2em;
        left: -5%;
        margin-bottom: -4.7%;
    }
    #pageResult h5 img {
        width: 100%;
    }
    /*============================
    #ctsRanking
    ============================*/

    #ctsRanking .rank1 h3 {
        width: 70.9%;
        margin: 2.5% auto 11.5%;
        padding-left: 0;
    }
    #ctsRanking .rank1 .card {
        width: 42.9%;
    }
    #ctsRanking .rank1 h5 {
        width: 63.5%;
        margin: 1.2% auto 2.8%;
        padding-left: 2.9%;
    }
    #ctsRanking .rank2-4{
    	margin-bottom:12%;
    }
    #ctsRanking .rank2-4 li {
        width: 100%;
    }
    #ctsRanking .rank2-4 li.sp_half {
        width: 43.8%;
    }
    #ctsRanking .rank2-4 h3 {
        width: 48.4%;
        margin: 1.6% auto 10.8%;
        padding-right: 0.6%;
    }
    #ctsRanking .rank2-4 .card {
        width: 36.8%;
    }
    #ctsRanking .rank2-4 h5 {
        width: 50.4%;
        margin: 0.8% auto;
    }
    #ctsRanking .rank2-4 li.sp_half h3 {
        width: 100.3%;
        margin: 4% 0 0.8% -1%;
    }
    #ctsRanking .rank2-4 li.sp_half .card {
        width: 84%;
    }
    #ctsRanking .rank2-4 li.sp_half h5 {
        width: 115%;
        margin: 1.5% 0 0 -8.2%;
    }
    #ctsRanking .rank {
        margin-bottom: -1.9%;
    }
    #ctsRanking .rank ul {
        width: 100%;
        margin: 0;
    }
    #ctsRanking .rank li {
        width: 43.8%;
        margin-bottom: 6.8%;
    }
    #ctsRanking .rank h3 {
        width: 66.8%;
        margin: 7.3% auto 7.2%;
    }
    #ctsRanking .rank h3 img{
        margin-bottom: -3.1%;
    }
    #ctsRanking .rank h3:after {
        width: 118%;
        margin-left: -9%;
    }
    #ctsRanking .rank .card {
        width: 84%;
    }
    /*============================
    #ctsStanding
    ============================*/

    #ctsStanding {
        margin: 9% 0 10.7%;
    }
    #ctsStanding h2{
    	font-size: 1.18em;
    	padding-bottom: 0.15em;
    	margin: 9.9% 0 7.2%;
    	width: 100%;
    }
    #ctsStanding .standing {
        margin: -0.2% 0 1%;
        width: 85.1%;
    }
    /*============================
	#ctsVideo
	============================*/
	#ctsVideo {
		margin-bottom: 13%;
	}
	#ctsVideo h2{
		padding-bottom: 0.05em;
		margin-bottom: 5.8%;
		width: 100%;
		margin-left: 0;
	}
	#ctsVideo .movie{position:relative;padding: 14.175% 0;width: 85.7%;margin: 7.4% auto;}
	#ctsVideo .movie .playmark{
		width: 20.667%;
	}
    /*============================
    #ctsGallery
    ============================*/

    #ctsGallery {
        margin-bottom: 1.1%;
    }
    #ctsGallery h2 {
		font-size: 1.18em;
		padding-bottom: 0.15em;
		margin: 9.9% 0 7%;
		width: 100%;
	}
    #ctsGallery ul {
        text-align: center;
        width: 100%;
        margin-left: 0;
        margin-top: -0.3%;
    }
    #ctsGallery li {
        width: 41.2%;
        height: 0;
        margin: 0 3.45% 1.4% 0;
        padding-bottom: 27.2%;
        overflow: hidden;
    }
    #ctsGallery li:nth-child(2n) {
        margin-right: 0;
    }
    #ctsGallery li:after{box-shadow: #006FA8 0 0 11px 0, rgba(0, 167, 255, 0.5) 0 0 16px 0 inset;}

}