/* モーダル */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
     display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
     background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
     background: #666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
     font-size: 1.2rem;
     text-align: center;
     margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
     padding: 0;
}

.modaal-gallery-item {
     max-width: 700px !important;
}


.modaal-gallery-control,
.modaal-gallery-next,
.modaal-gallery-prev,
.modaal-gallery-next-inner,
.modaal-gallery-prev-inner {
  display: none !important;
}







.work_slide {
  text-align: center;
  font-size: 3rem;
  margin: 0 10px;
}

.slick-prev,
.slick-next {
  background: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.slick-prev {
  left: 10px;
}
.slick-next {
  right: 10px;
}

.work_prev,
.work_next {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.work_prev {
  left: 10px;
}

.work_next {
  right: 10px;
}

.work_prev img,
.work_next img {
  width: 30px; /* 画像サイズを調整 */
  height: auto;
}

@media (min-width: 700px) {
    .work_prev img,
.work_next img {
  width: 50px; /* 画像サイズを調整 */
  height: auto;
}
}




.card-title{
    margin: 1rem 0;
    background-color: #333;
    border-radius: 3px;
    color: white;
    padding: 1px 10px;
    display: inline-block;
}

.card_img{
  border-radius: 15px !important;
      display: block;
    border: 3px solid #333;
}