/*carousel*/
.crsl-topics { width: 100%; max-width: 1000px; margin: 0 auto 15px auto; text-align:left; padding:10px 0 15px 0; font-size:100%; background: rgba(255,255,255,1);}
.crsl-topics, .crsl-topics .outer { position:relative;}
.crsl-topics .outer { overflow:hidden; -webkit-transform: translateZ(0); min-height:190px;}
.crsl-topics h2 { display: block; width: 240px; height: 50px; margin: 0 auto; background-color: rgba(255, 255, 255, 1); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
.crsl-topics .outer { padding-top: .75em;}
.crsl-topics .outer ul { position:absolute; list-style-type:none; display:table; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.crsl-topics .outer .inner li { display:table-cell; padding-right: 6px;}
.crsl-topics .outer .inner li, .crsl-topics .outer .inner li a { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.crsl-topics .outer .inner li a { text-decoration:none; border-top: 1px solid rgba(220, 220, 220, 1); -webkit-transition-duration: 0.5s; -webkit-transition-timing-function:ease-in-out; transition-duration: 0.5s; transition-timing-function:ease-in-out; transition-property:opacity; opacity:0.3;}
.crsl-topics ul li a, .crsl-topics ul li a span, .crsl-topics ul li a span img { display:block;}
.crsl-topics .outer .inner .outstanding a { opacity:1;}
.crsl-topics ul li a, .crsl-topics ul li a .thumb, .crsl-topics ul li a .thumb img { width:185px; position:relative;}
.crsl-topics ul li a .thumb, .crsl-topics ul li a .thumb img { box-sizing: border-box; height:130px;}
.crsl-topics .outer ul li a dl dd .txt { padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 120%;}
.crsl-topics:before { width:90px; height:90px; background-size:cover;}
.crsl-topics .outer .inner li a dl dd .thumb { background-size:contain; background-position:center center; background-repeat:no-repeat; color: rgba(255,224,0, 1);}
.crsl-topics .outer .inner li a dl dt { color:rgba(255, 242, 35, 1); font-weight:normal; line-height:1.25; position:relative; padding:0.25em 0.35em; display: block; width: 175px; height: 20px; position: absolute; top: 160px; left: 0; border-bottom: 1px solid rgba(180, 180, 180, 1);}
.crsl-topics .outer .inner li a dl dt:before, .crsl-topics .outer ul.inner li a dl dt span { display:block;}
.crsl-topics .outer .title_txt { position:absolute; left:0.25em; top:0; margin-top:-0.625em; letter-spacing: .1em; font-size: 90%; color:rgba(208, 206, 0, 1); position: absolute; bottom: 5px; left: 0;}
.crsl-topics .outer .update { position:absolute; left:0.25em; top:52%; margin-top:-0.625em; letter-spacing: .1em; color:#000;}
.crsl-topics .outer .inner li a dl dt::after { content: '★★★'; position: absolute; top: 25%; right: 0.25em; font-weight: bold; font-size: 100%; display: inline-block; text-align: center; color: rgba(202, 204, 7, 1);}


.crsl-topics .outer ul li a dl dd .txt { line-height:1.5; color:#000;}
.crsl-topics .ctrl-arrow { display:none;}
.crsl-topics .l_sp, .crsl-topics .r_sp { display: none;}

/*for_W768-*/
@media screen and (min-width: 768px) {
/*carousel*/
.crsl-topics { font-size:110%; padding: 20px 0;}
.crsl-topics .outer { min-height:240px;}
.crsl-topics .outer .inner li { padding-right:15px;}
.crsl-topics ul li a, .crsl-topics ul li a .thumb, .crsl-topics ul li a .thumb img { width:230px;}
.crsl-topics ul li a .thumb, .crsl-topics ul li a .thumb img { height:160px;}
.crsl-topics .outer .inner li a dl dt { width: 220px; height: 20px; position: absolute; top: 200px; left: 0; border-bottom: 1px solid rgba(180, 180, 180, 1);}
.crsl-topics .outer ul li a dl dd .txt { padding:0.75em;}
.crsl-topics:before { width:170px; height:170px;}
.crsl-topics .ctrl-arrow { display: block; width:100%;}
.crsl-topics .ctrl-arrow li { position:absolute; bottom: 36%;}
.crsl-topics .ctrl-arrow .ctrl-lef { left:50%; margin-left:-155px;}
.crsl-topics .ctrl-arrow .ctrl-rig { right:50%; margin-right:-155px;}
.crsl-topics .ctrl-arrow li a { position:relative; display:block; background-image:url(../img/arrow_carousel.svg); background-repeat:no-repeat; background-size:160px 40px; width:40px; height:40px; background-color: rgba(219, 93, 37, .8); text-indent:110%;white-space:nowrap;overflow:hidden;}
.crsl-topics .ctrl-arrow .ctrl-lef a { background-position:left top;}
.crsl-topics .ctrl-arrow .ctrl-rig a { background-position:-40px 0;}
.crsl-topics .ctrl-arrow .ctrl-lef a:hover { background-position:-80px 0;}
.crsl-topics .ctrl-arrow .ctrl-rig a:hover { background-position:-120px 0;}

.crsl-topics .l_sp { display: block; width: 50px; height: 100%; position: absolute; top: 0; left: 0; background: -moz-linear-gradient(left, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,1)', endColorstr='rgba(255,255,255,0)',GradientType=1 );}
.crsl-topics .r_sp { display: block; width: 50px; height: 100%; position: absolute; top: 0; right: 0; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.75) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.75) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,1)',GradientType=1 );}

}