@charset "utf-8";
/*------------------------*/
/*メインイメージ*/
/*------------------------*/
/*スライダ-本体*/
#index .main-slider{
	width: 100%;
	height: 100vh;/* Fallback */
	height: calc(var(--vh, 1vh) * 100);
	min-height: 780px;
    max-height: 1100px;
	position: absolute;
	top: 0;
    left: 0;
    opacity: 0;
}
#index .main-slider.slick-initialized{
    opacity: 1;
}
#index .main-slider .box{
    display: block;
    width: 100%;
	height: 100vh;/* Fallback */
	height: calc(var(--vh, 1vh) * 100);
    min-height: 780px;
    max-height: 1100px;
}
#index .main-slider .box1 img,
#index .main-slider .box2 img,
#index .main-slider .box3 img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.0);
}
#index .main-slider .slick-active.box1 img,
#index .main-slider .slick-active.box2 img,
#index .main-slider .slick-active.box3 img
{
    animation: fadezoom 5.5s ease-in-out both;
}
@keyframes fadezoom {
  0% {
      transform: scale(1.05);
  }
  100% {
      transform: scale(1.0);
  }
}



/*------------------------*/
/*タブレット*/
/*------------------------*/
@media(max-width:959px){
/*スライダ-本体*/
#index .main-slider{
	min-height: 680px;
    max-height: 780px;
}
#index .main-slider .box{
	min-height: 680px;
    max-height: 780px;
}
}/*959px以下ラスト*/


/*------------------------*/
/*スマホ*/
/*------------------------*/
@media(max-width:559px){
/*スライダ-本体*/
#index .main-slider{
	min-height: 640px;
    max-height: 780px;
}
#index .main-slider .box{
	min-height: 640px;
    max-height: 780px;
}
#index .main-slider .slick-active.box1 img,
#index .main-slider .slick-active.box2 img,
#index .main-slider .slick-active.box3 img
{
    animation: fadezoom 5.5s ease-in-out both;
}
@keyframes fadezoom {
  0% {
      transform: scale(1.2);
  }
  100% {
      transform: scale(1.0);
  }
}
}/*559px以下ラスト*/




/*------------------------*/
/*productページ*/
/*------------------------*/
/*スライダ-本体*/
#product .slider-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 64px;
}
#product .product-slider{
	width: 380px;
	height: 50vw;
	min-height: 380px;
    max-height: 380px;
}
#product .product-slider.slick-initialized{
    opacity: 1;
}
#product .product-slider .box{
    display: block;
    width: 100%;
	height: 50vw;
	min-height: 380px;
    max-height: 380px;
}
#product .product-slider .box1 img,
#product .product-slider .box2 img,
#product .product-slider .box3 img,
#product .product-slider .box4 img
{
    width: 100%;
	height: 50vw;
	min-height: 380px;
    max-height: 380px;
    object-fit: cover;
}
#product .product-slider .box.transform1 img{
    width: auto;
    margin: 0 auto;
}
/*---------------------*/
/*インジゲーター*/
/*スライド数のドットの色を変える*/
#product .product-slider .slick-dots li.slick-active button:before,
#product .product-slider .slick-dots li button:before {
    color: var(--color-bk);
}
/*ドットインジゲーターの形*/
#product .product-slider .slick-dots li{
    margin: 0 10px;
}
#product .product-slider .slick-dots li button:before{
    content: "";
    height: 12px;
    width: 12px!important;
    border-radius: 50%;
    background: var(--color-bk);
    background-size: contain!important;
}
/*ドットインジゲーターの位置*/
#product .product-slider .slick-dots{
    bottom: -10%;
}


/*------------------------*/
/*タブレット*/
/*------------------------*/
@media(max-width:959px){
/*スライダ-本体*/
#product .slider-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14%;
}
#product .product-slider{
	width: 280px;
	height: 50vw;
	min-height: 280px;
    max-height: 280px;
}
#product .product-slider .box{
    display: block;
	height: 50vw;
	min-height: 280px;
    max-height: 280px;
}
#product .product-slider .box1 img,
#product .product-slider .box2 img,
#product .product-slider .box3 img,
#product .product-slider .box4 img
{
	height: 50vw;
	min-height: 280px;
    max-height: 280px;
    object-fit: cover;
}
#product .product-slider .box.transform1 img{
    width: auto;
    margin: 0 auto;
}
/*ドットインジゲーターの形*/
#product .product-slider .slick-dots li{
    margin: 0 8px;
}

}/*959px以下ラスト*/


/*------------------------*/
/*スマホ*/
/*------------------------*/
@media(max-width:559px){
/*スライダ-本体*/
#product .slider-box{
    margin-top: 16%;
    width: 100%;
}
#product .product-slider{
	width: 100%;
    height: 50vw;
    max-width: 240px;
    min-width: 240px;
	min-height: 240px;
    max-height: 240px;
}
#product .product-slider .box{
    display: block;
	height: 50vw;
	min-height: 240px;
    max-height: 240px;
}
#product .product-slider .box1 img,
#product .product-slider .box2 img,
#product .product-slider .box3 img,
#product .product-slider .box4 img
{
	height: 50vw;
	min-height: 240px;
    max-height: 240px;
    object-fit: cover;
}
#product .product-slider .box.transform1 img{
    width: auto;
    margin: 0 auto;
}
/*ドットインジゲーターの位置*/
#product .product-slider .slick-dots{
    bottom: -16%;
}

}/*559px以下ラスト*/







/*------------------------*/
/*machineryページ*/
/*------------------------*/
/*スライダ-本体*/
#machinery .slider-box{
    width: 980px;
    margin: 0 auto;
    margin-top: 100px;
}
#machinery .machinery-slider{
    width: 100%;
    height: 40vw;
    min-height: 480px;
    max-height: 580px;
    opacity: 0;
    transition: 1s ease-in-out;
}
#machinery .machinery-slider.slick-initialized{
    opacity: 1;
}
#machinery .machinery-slider .box{
    width: 100%;
    height: 40vw;
    min-height: 480px;
    max-height: 580px;
    position: relative;
}
#machinery .machinery-slider .box > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#machinery .machinery-slider .box > .caption{
    padding: 10px 40px;
    margin-top: 20px;
    background: rgba(26, 26, 26, 0.9);
    position: absolute;
    top: 0;
    left: 0;
}
#machinery .machinery-slider .box > .caption > span.alphabet{
    display: block;
    font-family: var(--alphabet);
    font-size: var(--txt);
    font-style: var(--italic);
    color: var(--color-white);
}
#machinery .machinery-slider .box > .caption > span.name{
    display: block;
    font-size: var(--txt-ex-small);
    color: var(--color-white);
}
/* アニメーション効果 */
/* --captionをスライド表示-- */
#machinery .machinery-slider .slick-slide > .caption,
#machinery .machinery-slider .slick-slide > .caption > span.alphabet,
#machinery .machinery-slider .slick-slide > .caption > span.name
{
	visibility: hidden;
}
#machinery .machinery-slider .slick-current > .caption,
#machinery .machinery-slider .slick-current > .caption > span.alphabet,
#machinery .machinery-slider .slick-current > .caption > span.name
{
	visibility: visible;
	transform: translateX(0);
}
#machinery .machinery-slider .slick-current > .caption{
	animation: slideLeft 0.8s 0s 1 ease backwards;
}
#machinery .machinery-slider .slick-current > .caption > span.alphabet{
	animation: slideLeft 0.8s 0.4s 1 ease backwards;
}
#machinery .machinery-slider .slick-current > .caption > span.name{
	animation: slideLeft 0.8s 0.8s 1 ease backwards;
}


/*-----------------------*/
/* サムネイル */
#machinery .machinery-thumb{
    width: 83%;
    margin: 0 auto;
    margin-top: 2px;
    padding: 0;
    opacity: 0;
    transition: 1s ease-in-out;
}
#machinery .machinery-thumb.slick-initialized{
    opacity: 1;
}
#machinery .machinery-thumb .slick-slide{
    margin: 2px;
    transition: .6s ease-in-out;
    position: relative;
}
#machinery .machinery-thumb .slick-slide::after{
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: .6s ease-in-out;
}
#machinery .machinery-thumb .thumb{
    height: 10vw;
    max-height: 120px;
    min-height: 100px;
    cursor: pointer;
}
#machinery .machinery-thumb .thumb > img{
    width: auto;
    height: 10vw;
    max-height: 120px;
    min-height: 100px;
    object-fit: cover;
}
/* アニメーション効果 */
/* --センター以外のサムネイルを暗くする-- */
#machinery .machinery-thumb .slick-slide:not(.slick-center)::after{
    background: rgba(0, 0, 0, 0.5);
}
#machinery .machinery-thumb .slick-slide:not(.slick-center){
    filter: grayscale(50%);
}
/*-----------------------*/
/*矢印*/
.slick-prev:before,
.slick-next:before {
    font-family: var(--alphabet);
    font-style: var(--italic);
    font-size: var(--txt-small);
    color: var(--color-white);
    background: var(--color-bk);
    padding: 8px 16px;
    opacity: 1;
}
.slick-prev:before{
    content: "PREV";
    position: absolute;
    top: 50%;
    left: -60px;
    transform: translateY(-50%);
}
.slick-next:before {
    content: "NEXT";
    position: absolute;
    top: 50%;
    right: -60px;
    transform: translateY(-50%);
}
/*------------------------*/
/*タブレット*/
/*------------------------*/
@media(max-width:959px){
/*スライダ-本体*/
#machinery .slider-box{
    width: 90%;
    margin-top: 12%;
}
#machinery .machinery-slider{
    width: 100%;
    height: 50vw;
    min-height: 380px;
    max-height: 580px;
}
#machinery .machinery-slider .box{
    width: 100%;
    height: 50vw;
    min-height: 380px;
    max-height: 580px;
}
/*-----------------------*/
/* サムネイル */
#machinery .machinery-thumb{
    width: 75%;
}
}/*959px以下ラスト*/


/*------------------------*/
/*スマホ*/
/*------------------------*/
@media(max-width:559px){
/*スライダ-本体*/
#machinery .slider-box{
    width: 100%;
    margin-top: 14%;
}
#machinery .machinery-slider{
    width: 100%;
    height: 70vw;
    min-height: 240px;
    max-height: 320px;
}
#machinery .machinery-slider .box{
    width: 100%;
    height: 70vw;
    min-height: 240px;
    max-height: 320px;
}
/* caption */
#machinery .machinery-slider .box > .caption{
    padding: 8px 16px;
    margin-top: 10px;
}
#machinery .machinery-slider .box > .caption > span.alphabet{
    font-size: var(--txt-small);
}
#machinery .machinery-slider .box > .caption > span.name{
    font-size: var(--txt-ex-small);
}
/*-----------------------*/
/* サムネイル */
#machinery .machinery-thumb{
    width: 60%;
}
#machinery .machinery-thumb .thumb{
    width: 100px;
    max-height: 100px;
    min-height: 100px;
}
#machinery .machinery-thumb .thumb > img{
    width: 100px;
    max-height: 100px;
    min-height: 100px;
}
/*-----------------------*/
/*矢印*/
.slick-prev:before,
.slick-next:before {
    font-size: var(--txt-ex-small);
    padding: 8px 10px;
}
.slick-prev:before{
    left: -32px;
}
.slick-next:before {
    right: -32px;
}
}/*559px以下ラスト*/