@charset "UTF-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
}

/*　背景画像設定　*/
.slider-item01 {
  background:url(../../images/img_top_mv01.jpg);
}
.slider-item02 {
  background:url(../../images/img_top_mv02.jpg);
}  
.slider-item03 {
  background:url(../../images/img_top_mv03.jpg);
}
.slider-item {
  width: 100%;/*各スライダー全体の横幅　画面の高さいっぱいなら（100%）にする*/
  height: 530px;/*各スライダー全体の縦幅　画面の高さいっぱいなら（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  border-radius: 20px;
}

@media screen and (max-width:1000px) {
.slider-item {
  height: 70vh;
  border-radius: 15px;
}
}

/*矢印の設定*/
.slick-prev, 
.slick-next {
  position: absolute;
  z-index: 3;
  bottom: 10%;
  cursor: default;/*マウスカーソルをなしに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  height: 32px;
  width: 32px;
  background-color: #36170B;
  border-radius: 50%;
}

.slick-prev{
  right: -7%;
}
.slick-prev::after {/*戻る矢印の位置と形状*/
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 35%;
  left: 39%;
  transform: rotate(-135deg);
}
.slick-prev:hover{
  background-color: #EFE9E9;
  transition: all .2s ease-in-out;
}
.slick-prev:hover::after{
  border-top: 2px solid #36170B;
  border-right: 2px solid #36170B;
}

.slick-next{
  right: -12%;
}
.slick-next::after {/*戻る矢印の位置と形状*/
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 35%;
  right: 39%;
  transform: rotate(45deg);
}
.slick-next:hover{
  background-color: #EFE9E9;
  transition: all .2s ease-in-out;
}
.slick-next:hover::after{
  border-top: 2px solid #36170B;
  border-right: 2px solid #36170B;
}


@media screen and (max-width:1000px) {
.slick-prev, 
.slick-next {
  bottom: -8%;
}
.slick-prev{
  left: 44%;
  transform: translateX(-44%);
}
.slick-next{
  left: 56%;
  transform: translateX(-56%);
}

  
}
  
/*ドットナビゲーションの設定*/
.slick-dots {
  position: relative;
  z-index: 3;
  text-align:center;
  margin: 36px 0 0 0;/*ドットの位置*/
} 
.slick-dots li {
  display:inline-block;
  margin:0 5px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width:50px;/*ドットボタンのサイズ*/
  height:6px;/*ドットボタンのサイズ*/
  display:block;
  background: #EFE9E9;/*ドットボタンの色*/
}  
.slick-dots .slick-active button{
  background: #36170B;/*ドットボタンの現在地表示の色*/
}


/*==================================================
ローディングアニメーションのためのcss
===================================*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background:#fff;
    text-align:center;
    color:#fff;
    top: 0;
    left: 0;
  }
  
  /* Loading画像中央配置　*/
  #splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Loading アイコンの大きさ設定　*/
  #splash_logo img {
    width: 100px;
  }
  
  /* fadeUpをするアイコンの動き */
  .fadeUp{
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(50px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }


/*==================================================
タブメニューのためのcss
===================================*/
  .flow_tab_area .tab_area .active{
    color: #fff;
    background-color: #36170B;
  }
  .flow_tab_content {
    display: none;
  }
  .flow_tab_content.active{
    display: block;
  }