@charset "UTF-8";

.wrap-notice {position: relative;} 
.wrap-notice .slider a {width: 100%; height: 100%; display: block;}
.wrap-notice .slider a:focus,
.wrap-notice .slider a:focus-within{ outline: auto;}
.wrap-notice .slider a:focus-visible {border: 3px solid red;}
/* .wrap-notice .slider img {display: block;} */
.wrap-notice .slider .web-notice-image {display: block;}
.wrap-notice .slider .mobile-notice-image {display: none;}
.wrap-notice .control {position: absolute; right: 0; bottom: 5%; width: 100%; text-align: right;}
.wrap-notice .control-box {display: inline-block; background: rgba(0,0,0,.5); padding: 10px; border-radius: 5px; overflow: hidden; margin-right: 30px;}
.wrap-notice .control-box::after {content:""; display: table; clear: both;}
.wrap-notice .control-box .notice-count-box {float: left; line-height: 15px; margin-right: 30px;}
.wrap-notice .control-box .notice-count-box span {font-family: "Noto Regular"; color: #fff; display: inline-block; line-height: 15px;}
.wrap-notice .control-box .notice-count-box .notice-current {color: #dddddd; font-family: "Noto Bold";}
.wrap-notice .control-box .notice-count-box .notice-slash {margin: 0 10px;}
.wrap-notice .control-box .slick-arrow {float: left; display: block; text-indent: -9999px; width: 9px; height: 15px; background: url(../images/popup_arrow.png)}
.wrap-notice .control-box .slick-arrow.next {background-position: right center;}
.wrap-notice .control-box .playstop {float: left; margin: 0 30px;}
.wrap-notice .control-box .playstop button {display: none; width: 9px; height: 15px; text-indent: -9999px;}
.wrap-notice .control-box .playstop button.on {display: block;}
.wrap-notice .control-box .playstop .play {background: url(../images/popup_play.png);}
.wrap-notice .control-box .playstop .stop {background: url(../images/popup_stop.png);}

@media all and (max-width: 1680px) {
    .wrap-notice .control-box {margin-right: -10px;}
}
@media all and (max-width: 1280px) {
    .wrap-notice .slider .web-notice-image {display: none;}
    .wrap-notice .slider .mobile-notice-image {display: block; width: 100%;}
}
@media all and (min-width: 1920px) {
    /* .wrap-notice .slider .web-notice-image {width: 100%;} */
}