@charset "utf-8";
/*------------------------*/
/*スライダ-本体*/
/*------------------------*/
/*スライダ-本体*/
#MHM-Slider{
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: 50%;
    height: 50vw;
    min-height: 480px;
    max-height: 580px;
    margin-left: -60px;
    margin-bottom: 80px;
}
#MHM-Slider.slick-initialized{
    opacity: 0;
    visibility: hidden;
}
#MHM-Slider.slick-initialized.sliderIn{
    opacity: 1;
    visibility: visible;
    -webkit-animation: sliderIn .6s ease-in-out 1;
            animation: sliderIn .6s ease-in-out 1;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
}
@-webkit-keyframes sliderIn{
    0%{
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(40px);
                transform: translateX(40px);
    }
}
@keyframes sliderIn{
    0%{
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(40px);
                transform: translateX(40px);
    }
}
#MHM-Slider .box{
    width: 100%;
    height: 50vw;
    min-height: 480px;
    max-height: 580px;
    cursor: -webkit-grab;
    cursor: grab;
}
/*画像*/
#MHM-Slider .box .photo{
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact;/*Chrome印刷用*/
}
#MHM-Slider .box .photo#MHM01{
    background: url(../images/machinery/mhm01.jpg) center/cover no-repeat;
}
#MHM-Slider .box .photo#MHM02{
    background: url(../images/machinery/mhm02.jpg) 32% center/cover no-repeat;
}
#MHM-Slider .box .photo#MHM03{
    background: url(../images/machinery/mhm03.jpg) center/cover no-repeat;
}
/* ナンバリング */
#MHM-Slider .box > span{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 24px 0 10px;
}
#MHM-Slider .box > span > p{
    color: var(--color-pailBlue);
    font-size: 2.4rem;
    font-weight: bold;
    padding-right: 10px;
}
/* アニメーション */
#MHM-Slider .box > span > span.border{
    display: block;
    height: 5px;
    width: 0;
}
#MHM-Slider .box.slick-current > span > span.border{
    display: block;
    height: 5px;
    width: 80%;
    background: var(--color-pailBlue);
    -webkit-animation: slideAnime 4.5s 1 linear;
            animation: slideAnime 4.5s 1 linear;
    z-index: 2;
}
@-webkit-keyframes slideAnime{
    0%{
        width: 2%;
    }
}
@keyframes slideAnime{
    0%{
        width: 2%;
    }
}
/*---------------------*/
/*インジゲーター*/
.slide-dots{
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-align: left;
    margin-top: 10px;
}
.slide-dots li{
    display: inline-block;
    margin-right: 32px;
}
.slide-dots li button{
    position: relative;
    color: rgba(255, 255, 255, 0);/*数字を消す*/
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
	outline:none;/*フォーカス無効*/
}
.slide-dots li button::before{
    content: "";
    display: block;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: var(--color-pailTxt);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
}
.slide-dots li.slick-active button::before{
    background: var(--color-pailBlue);
    opacity: 1;
}
.slide-dots li button:hover::before{
    background: var(--color-blue);
    opacity: 1;
}
/*-----------------------*/
/*矢印*/
.slick-arrow {
    width: 38px;
    position: absolute;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
    margin: auto;
    opacity: 0.3;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}
.prev-arrow {
    left: 10px;
    z-index: 1;
}
.next-arrow {
    right: 10px;
    z-index: 1;
}
.slick-arrow:hover {
    opacity: 0.7;
}
.slick-arrow.prev-arrow:hover{
    -webkit-transform: translateY(-10%)translateX(-6px);
            transform: translateY(-10%)translateX(-6px);
}
.slick-arrow.next-arrow:hover{
    -webkit-transform: translateY(-10%)translateX(6px);
            transform: translateY(-10%)translateX(6px);
}



/*------------------------*/
/*タブレット*/
/*------------------------*/
@media(max-width:959px){
/*スライダ-本体*/
#MHM-Slider{
    width: 100%;
    height: 50vw;
    min-height: 580px;
    max-height: 680px;
    margin: 0;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
#MHM-Slider .box{
    height: 50vw;
    min-height: 580px;
    max-height: 680px;
}
/* ナンバリング */
#MHM-Slider .box > span{
    padding-left: 20px;
}
/*---------------------*/
/*インジゲーター*/
.slide-dots{
    text-align: center;
    margin-top: 24px;
}
.slide-dots li button:hover::before{
    background: var(--color-pailTxt);
    opacity: 0.3;
}
.slide-dots li.slick-active button:hover::before{
    background: var(--color-pailBlue);
    opacity: 1;
}
.slide-dots li button:active::before{
    background: var(--color-blue);
    opacity: 1;
}
/*-----------------------*/
/*矢印*/
.slick-arrow:hover {
    opacity: 0.3;
}
.slick-arrow.prev-arrow:hover{
    -webkit-transform: translateY(-10%)translateX(0);
            transform: translateY(-10%)translateX(0);
}
.slick-arrow.next-arrow:hover{
    -webkit-transform: translateY(-10%)translateX(0);
            transform: translateY(-10%)translateX(0);
}
.slick-arrow:active {
    opacity: 0.7;
}
.slick-arrow.prev-arrow:active{
    -webkit-transform: translateY(-10%)translateX(-6px);
            transform: translateY(-10%)translateX(-6px);
}
.slick-arrow.next-arrow:active{
    -webkit-transform: translateY(-10%)translateX(6px);
            transform: translateY(-10%)translateX(6px);
}
}/*959px以下ラスト*/


/*------------------------*/
/*スマホ*/
/*------------------------*/
@media(max-width:559px){
/*スライダ-本体*/
#MHM-Slider{
    height: 100vw;
    min-height: 380px;
    max-height: 480px;
}
#MHM-Slider .box{
    height: 100vw;
    min-height: 380px;
    max-height: 480px;
}
/*画像*/
#MHM-Slider .box .photo#MHM01{
    background: url(../images/machinery/mhm01.jpg) 40% center/cover no-repeat;
}
#MHM-Slider .box .photo#MHM02{
    background: url(../images/machinery/mhm02.jpg) 18% center/cover no-repeat;
}
/*---------------------*/
/*インジゲーター*/
.slide-dots{
    text-align: center;
    margin-top: 18px;
}
/*-----------------------*/
/*矢印*/
.slick-arrow {
    width: 32px;
}
}/*559px以下ラスト*/