/* slick 表示 */
.slick-slider {
  width: 100%; /* 横幅100%に変更 */
  height: calc(100% * 9 / 16); /* 高さも%ベースで設定 */
  max-width: 100vw; /* 横幅最大を画面幅に設定 */
  max-height: 90vh; /* 高さ最大を画面高さの90%に設定 */
  background-color: #FFFFFF;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 0!important;

}


.slick-slider .slick-list, 
.slick-slider .slick-track {
  position: relative}

.slick-slider .slick-slide {
  height: 100%;
}

.slick-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を比率崩さずカバー */
  display: block;
  z-index: 10;
}


.slick-button-set{
  position: relative;
  display: flex;
background-color: rgba(2,48,48,1.00);
  background-image:url("../img/concrete.jpg");
  background-size: 20%
}

.button-container {
  position: relative; /* 固定配置 */
  top: 0px; /* 画面の中央に配置 */
  right: 0px; /* 右側に配置 */
  display: flex;
  flex-direction: column; /* 縦に並べる */
  
  width: 80px;
  height: 100%;
 background-color: rgba(2,48,48,1.00);
}



.vertical-button {
  height:150px; /* 縦長に設定 */
  background-color: #3192B3; /* ボタンの背景色 */
  color: white; /* ボタン文字の色 */
  font-size: 17px;
  border: none; /* ボーダーをなしに */
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 0px;
  padding-left: 30px;
  padding-right: 30px;
}

/* 2番目の要素にスタイルを適用 */
.vertical-button:nth-child(2) {
 background-color: rgba(128,118,97,1.00);
}
.vertical-button:nth-child(3) {
 background-color: rgba(2,48,48,1.00);
   height:auto;; /* 縦長に設定 */
}


.vertical-button:hover {
  background-color: #00142A; /* ホバー時の背景色 */
}


@media screen and (max-width: 767px) {
  
  .slick-button-set{
  /* [disabled]position: relative; */
  display: block;
  /* [disabled]background-color: rgba(2,48,48,1.00); */
}
  
  .button-container {
  /* [disabled]position: relative; */ /* 固定配置 */
  /* [disabled]top: 0px; */ /* 画面の中央に配置 */; /* 画面の中央に配置 */
  /* [disabled]right: 0px; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; /* 縦に並べる */
  gap: 0px; /* ボタン間の間隔 */
  width:auto;
  /* [disabled]height: 100%; */
  /* [disabled]background-color: rgba(2,48,48,1.00); */
}

.vertical-button {
  height:50px; /* 縦長に設定 */
  min-width: 200px;
   flex: 1; /* 空間を均等に広げる */
}


  

}