@charset "UTF-8";

/* ---------------------------------------
    slider (TOP base slider)
 --------------------------------------- */
#sliderBlock { /* top */
    margin-bottom: 5em;
    position: relative;
}

/* play/stop */
#btnSlide {
    position: absolute;
    right: 1.5%;
    bottom: calc(100% - 90%);
}
#btnSlide a {
    display: block;
    width: 34px;
    height: 34px;
    position: relative;
    background: #fff;
    font-size:.1em;
    overflow:hidden;
    text-indent: 100%;
    white-space: nowrap;
    border: 1px solid #003366;
    outline: 1px solid #fff;
}
#btnSlide a::before,
#btnSlide a::after {
    content: "";
    display: block;
    width: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: #ff00ff; */
}
#btnSlide a.slick_pause::after { /* || */
   clip-path: none;
   background: transparent;
   border-right: 4px solid #09000d;
   border-left: 4px solid #09000d;
   height: 15px;
}
#btnSlide a.slick_pause.paused::after { /* ▶ */
    background: #003366;
    height: calc(tan(60deg) * 16px / 2);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* prev/next */
.slider .slider-1 .slick-arrow {
    filter: none;
    border: 1px solid #003366;
    outline: 1px solid #fff;
}
.slider .slider-1 .slick-arrow::before {
    top: 50%;
    left: 47%;
    transform: translate(-47%, -50%) rotate(45deg);    
}
.slider .slider-1 .slick-next {
    right: 1.5%;
}
.slider .slider-1 .slick-prev {
    left: 1.5%;
}
/* dots nav */
.dots-1 .slick-dots button {
    width: 14px;
    height: 14px;    
    margin: 10px 6px;
    outline: inherit;
}
.dots-1 .slick-dots .slick-active button {
    background: #003366;
}


/* focus < > */
.slider .slider-1 .slick-arrow:focus-visible {
      background:#003366;  
}
.slider .slider-1 .slick-arrow:focus-visible::before{
   border-color: #fff;
}
/* focus dots nav */
.dots-1 .slick-dots .slick-active button:focus-visible{
    outline: 2px solid #003366;
    border: 1px solid #fff;
}
/* hover/focus  ▶|| */
#btnSlide a:focus-visible {
    background:#003366;
}
#btnSlide a.slick_pause:focus-visible::after {
   border-color: #fff;
}
#btnSlide a.slick_pause.paused:focus-visible::after {
    background: #fff;
}



/* ---------------------------------------
    event
 --------------------------------------- */
#eventSlid {
    width: 50%;
    position: relative;
}
.event_header #btnSlide {
    bottom: 1%;
}
.event_header .slider-1 .slick-arrow {
    width: 40px;
    height: 40px;
    outline:none;
    border:none;
    border-color:#444;
    filter: none;
}
.event_header .slider-1 .slick-arrow::before {
    width: 8px;
    height: 8px;
}
main .event_header #btnSlide a {
    border: none;
    outline: none;
    background: #fff !important;
}
main .event_header #btnSlide a.slick_pause::after { /* || */
   /* border-color: unset; */
}
main .event_header #btnSlide a.slick_pause.paused::after { /* ▶ */
    background: #09000d;
}
main .event_header #btnSlide a:hover {background: #fff !important;}
main .event_header #btnSlide a:focus-visible { background: #003366; }
main .event_header #btnSlide a.slick_pause:focus-visible::after {
	border-color: #fff;
	border-right: 4px solid #ffffff;
	border-left: 4px solid #ffffff;
	background: #fff;
}


/*レスポンシブ*/

@media screen and (max-width: 767px) {
/* ---------------------------------------
    slider (TOP / base slider)
 --------------------------------------- */
    div#sliderBlock {
        padding-top: 50px;
        margin-bottom: 3em;
    }
    .slider,.dots-1 {
        top: unset;
    }   
    nav.nikkan60th {
        margin-top: 0;
    }
    div#btnSlide a {width: 25px;height: 25px;}
    div#btnSlide a.slick_pause::after { height: 12px; border-width:3px;}
    div#btnSlide a.slick_pause.paused::after {
        height: calc(tan(60deg) * 10px / 2);
        width:3px;
    }
/* ---------------------------------------
    event
 --------------------------------------- */
    #eventSlid {
        /* width: 100%; */
    }
}