/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;

}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*
.slick-prev {
    left: 0;
    z-index: 1;
}
 
.slick-next {
    right: 0;
}
.prev_icon{
  position: absolute;
  top: 37%;
  left: -1px;
  transform: translate(0,-50%);
  width: 33px;
  z-index: 1;
background: rgb(255,1,1,0.5)
}
.next_icon{
  position: absolute;
  top: 36%;
  right: 0;
  transform: translate(0,-50%);
  width: 33px;
  z-index: 1;
    background: rgb(255,1,1,0.5)
}*/



.slick-prev {
    left: 0;
    z-index: 1;
}
 
.slick-next {
    right: 0;
}
.prev_icon{
  position: absolute;
  bottom: 15px;
  left: calc(48% - 20%);
  transform: translate(0,-50%);
  width: 20%;
  z-index: 1;
    text-align: right;
}
.prev_icon:before {
    position: absolute;
    top: 11px;
    right: 40px;
    content: "";
    width: calc(100% - 40px);
    height: 1px;
    background: #555;
    display: block;
}
.prev_icon:after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    border-right: solid 1px #111;
    position: absolute;
    left: 2px;
    top: 6px;
    transform: rotate(-135deg);
}
.next_icon{
  position: absolute;
  bottom: 15px;
  right: calc(48% - 20%);
  transform: translate(0,-50%);
  width: 20%;
  z-index: 1;
}
.next_icon:before {
position: absolute;
    top: 10px;
    right: 0;
    content: "";
    width: calc(100% - 40px);
    height: 1px;
    background: #555;
    display: block;
}
.next_icon:after {
content: "";
    display: inline-block;
    transform: rotate(45deg);
    width: 11px;
    height: 11px;
    border-top: solid 1px #111;
    position: absolute;
    right: 2px;
    top: 5px;
}
.prev_icon.slick-disabled,
.next_icon.slick-disabled {
    opacity: .2;
}
 
.prev_icon.slick-disabled:before,
.next_icon.slick-disabled:before {
    opacity: 1;
}



.news_wrap .slick-track{ display: flex;}
.news_wrap .slick-track .slick-slide{  border-left: 1px solid #555; 
border-bottom: 1px solid #555; height: auto;}
.news_wrap .slick-track .slick-slide:last-child { border-right: 1px solid #555;}

.slick01{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition-property: transform;
    box-sizing: content-box;
}
.slick01 .slick-dots{
    bottom: -50px;
    display: flex;
    justify-content: space-between;
    background: #f2f2f2;
    height: 1px;
    width: 90%;
    margin: 90px auto 0;
}
.slick01 .slick-dots button{ 
    font-size: 0;
}
.slick01 .slick-dots li{
  width: calc(100% / 3 - 5px);
    height: 1px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #eee;
    overflow: hidden;
}
.slick01 .slick-dots li:not(:last-child){
  margin-right:10px;
}
.slick01 .slick-dots li.slick-active button::after{
  content: "";
  position:absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #666;
  animation: progress 1s linear 0s forwards; 
  z-index:1;
}
@keyframes progress {
  0%{
    width:0;
  }
  100% {
    width:100%;
  }
}
.slick01 .slick-list {
  padding: 0 15% 0 0!important;
}
.slick01 .triangle{
    z-index: 1;
    position: absolute;
    width: 160px;
    height: 160px;
    padding-left: 15px;
    padding-top: 13px;
    overflow: hidden;
}
.slick01 .triangle::before{
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 75px;
    border-style: solid;
    border-color: rgb(30,10,0,0.2)  transparent transparent rgb(30,10,0,0.2) ;
    border-width: 54.5px;
    content: "";
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
 }
.slick01 .triangle p{color:#fff; text-align: left; font-size: 13px; display: inline-block; text-align: center;}
.slick01 .triangle p span{display:block; line-height: 0.8;}       
.slick01 .triangle .date_day{ font-weight: 700; font-size: 22px; }

.slick01 .news_img_shadow{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    }

@media (min-width: 768px) {
.slick01 .slick-dots{margin-top: 100px;}
.prev_icon,.next_icon{
  bottom:25px;
}
.prev_icon:before{right: 50px;}
.prev_icon:before,.next_icon:before {
width: calc(100% - 50px);
}

}


/*==================================================
hero css
===================================*/

main {
    margin:85px 0 0 0 !important;
}

.slider {
    position:relative;
	z-index: 1;
	height: 100vh;
    background: #111;
    overflow: hidden;
}

.slider-top,
.slider-bottom {
    height: 50%;
}

.slick-list.draggable{
    height: 100%;
}

.slider-item01 {
    background:url(../img/img_01.jpg);
}

.slider-item02 {
    background:url(../img/img_02.jpg);
}

.slider-item03 {
    background:url(../img/img_03.jpg);
}

.slider-item04 {
    background:url(../img/img_0.jpg);
}

.slider-item05 {
    background:url(../img/img_05.jpg);
}

.slider-item06 {
    background:url(../img/img_06.jpg);
}

.slider-item07 {
    background:url(../img/img_07.jpg);
}

.slider-item08 {
    background:url(../img/img_08.jpg);
}

.slider-item09 {
    background:url(../img/img_09.jpg);
}

.slider-item10 {
    background:url(../img/img_10.jpg);
}

.slider-item11 {
    background:url(../img/img_11.jpg);
}

.slider-item12 {
    background:url(../img/img_12.jpg);
}

.slider-item13 {
    background:url(../img/img_13.jpg);
}

.slider-item14 {
    background:url(../img/img_14.jpg);
}

.slider-item15 {
    background:url(../img/img_15.jpg);
}

.slider-item16 {
    background:url(../img/img_16.jpg);
}






.slick-slide{height:50vh;}

.slick-track .slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 50vh ;/*各スライダーの縦幅を画面の高さの半分（50vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: bottom;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}


@media (min-width: 768px) {
.slider {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
}
  
.slider-top,
.slider-bottom {
    width:calc(100% / 2 );
    height: 100%;
}
.slick-track .slider-item {
    width: auto;
    height:100vh;
    background-position: center;/*背景画像の位置を中央に*/
    }
.slick-slide{height:100vh;}

}