/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

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

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: calc(50% - 12px);
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
	display: none;
	visibility: hidden;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}












.wrapper {
	position: absolute;
	bottom: 50px;
	left: calc(50% - 25px);
	z-index: 1000;
}
.wrapper .col{
  width:50%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.scroll-down-box{
  display:block;
  position:relative;
  text-decoration:none;
}
.scroll-down-box svg{
  fill:#fff;
}
.scroll-down-box.alt svg{
  fill:#fff;
}
.scroll-down-box .scroll-text{
  width:100px;
  height:auto;
  -webkit-animation: rotation 10s infinite linear;
  animation: rotation 10s infinite linear;
}
.scroll-down-box.alt .scroll-text{
  -webkit-animation: none;
  animation: none;
}
.scroll-down-box.alt:hover .scroll-text{
  -webkit-animation: rotation 10s infinite linear;
  animation: rotation 10s infinite linear;
}
.scroll-down-box .scroll-icon{
  width:25px;
  height:auto;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}
.scroll-down-box.alt .scroll-icon{
  width:35px;
}
.scroll-down-box:hover .scroll-icon{
  -webkit-animation: move 1s infinite linear;
  animation: move 1s infinite linear;
}
.scroll-down-box.alt:hover .scroll-icon{
  -webkit-animation: none;
  animation: none;
}

@keyframes rotation {
    from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg); transform: rotate(359deg);}
}

@keyframes move {
    0% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    25% {-ms-transform: translate(-50%,-35%); -webkit-transform: translate(-50%,-35%); transform: translate(-50%,-35%);}
    50% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    75% {-ms-transform: translate(-50%,-65%); -webkit-transform: translate(-50%,-65%); transform: translate(-50%,-65%);}
    100% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
}
@-webkit-keyframes move {
    0% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    25% {-ms-transform: translate(-50%,-40%); -webkit-transform: translate(-50%,-40%); transform: translate(-50%,-40%);}
    50% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    75% {-ms-transform: translate(-50%,-60%); -webkit-transform: translate(-50%,-60%); transform: translate(-50%,-60%);}
    100% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
}

.topimage .toplogo {
	width: 500px;
	height: 100px;
	position: absolute;
	top: calc(50vh - 50px);
	left: calc(50vw - 250px);
	z-index: 99;
	filter: drop-shadow(0px 0px 7px #808080);
}

@media (max-width:960px) {
	.slick-slider {
		display: none;
	}
}