﻿
/* ------------------------------------------------------------------------------------------------------------- */
/* index-hero-slick 用のカスタマイズ
/*-------------------------------------------------------------------------------------------------------------- */
.slick-track{
    display: flex;
}

/* -- 矢印の位置・重なり -- */
.index-hero-slick .slick-prev { z-index:100; }
.index-hero-slick .slick-prev:before { color:#ffffff; }

.index-hero-slick .slick-next { z-index:100; }
.index-hero-slick .slick-next:before { color:#ffffff; }


/* -- 矢印の形状 -- */
.index-hero-slick .slick-arrow { display:block; color:transparent; width:20px; height:38px; margin:auto; padding:0; top:0; bottom:0; z-index:1; position:absolute; transition:opacity 0.3s; }
.index-hero-slick .slick-arrow:hover { opacity:0.5; }

.index-hero-slick .slick-next::before,
.index-hero-slick .slick-next::after,
.index-hero-slick .slick-prev::before,
.index-hero-slick .slick-prev::after { vertical-align:middle; margin:auto; top:0; bottom:0; position:absolute; content:""; }

.index-hero-slick .slick-next::after,
.index-hero-slick .slick-prev::after { width:26px; height:26px; border-top:2px solid #ffffff; border-right:2px solid #ffffff; }

.index-hero-slick .slick-next { right:48px; }
.index-hero-slick .slick-next::after { right:4px; transform:rotate(45deg); }

.index-hero-slick .slick-prev { left:48px; }
.index-hero-slick .slick-prev::after { left:4px; transform: rotate(-135deg); }

/* -- ドット -- */
.index-hero-slick-dots { text-align:center; }
.index-hero-slick-dots li { display:inline-block; }
.index-hero-slick-dots button { display:block; font-size:0; width:10px; height:10px; margin:0 6px; padding:0; border:0; border-radius:50%; background:#cccccc; outline:none; cursor:pointer; }
.index-hero-slick-dots .slick-active button { background:#be2021; }


/* -- レイアウト -- */
.index-hero-slick { }
.index-hero-slick.slick-dotted.slick-slider { margin-bottom:0; }

.index-hero-slick .ih-slick-slide { width:100%; max-width:1238px; margin:0 12px; }
.index-hero-slick .ih-slick-slide a:hover { opacity:1.0;  }

.ih-slick-slide:not(.slick-current) { background:#ffffff; }
.ih-slick-slide:not(.slick-current) img { opacity:0.75; }
.ih-slick-slide:not(.slick-current) a { pointer-events:none; }

.index-hero-slick > .ih-slick-slide:not(:first-child) { display: none; }

/* -- */
.ih-slick-slide .ih-image-pc { }
.ih-slick-slide .ih-image-sp { display: none; }


@media screen and (max-width:1238px) {

.index-hero-slick .ih-slick-slide { margin:0; }

}
/* END : 1238px */

@media screen and (max-width:570px) {

.ih-slick-slide .ih-image-pc { display:none; }
.ih-slick-slide .ih-image-sp { display:block; }

}
/* END : 570px */




