/*========= カード表示のためのCSS ===============*/
.cards{
    width: 100%;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    gap: 40px 20px;
}
.cards .card{
    width: calc(95%/3);
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px #ccc;
    transform: scale(1);
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  }
  .card .img{
    border-radius: 5px 5px 0 0;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .card .content{
    padding: 20px;
    text-align:center;
  }
  .card time{
    font-size: 15px;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
  }
  .card .title{
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
  }
  .card .text {
    color: #444;
    font-size: 14px;
    line-height: 1.5;
  }
  .cards a {
    text-decoration: none;
  }
  .cards a:hover {
    text-decoration: none;
    transform: scale(1.05);/*拡大の値を変更したい場合はこの数値を変更*/
  }

/*========= モーダル表示のためのCSS ===============*/

/*全て共通：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;
}

/*========= スライダー表示のためのCSS ===============*/  
.slider {/*横幅80%で中央寄せ*/
    margin: 0 auto;
    /*max-width: 500px;*/
    width:70vw;
    display: none;
}

.slider img {
    width:70vw;/*スライダー内の画像を40vwにしてレスポンシブ化*/
    height:auto;
    margin: 0 auto;
}

@media screen and (min-width: 1250px) {
  .slider {/*横幅80%で中央寄せ*/
    margin: 0 auto;
    /*max-width: 500px;*/
    width:60vw;
    display: none;
  }

  .slider img {
    width:60vw;/*スライダー内の画像を40vwにしてレスポンシブ化*/
    height:auto;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1500px) {
  .slider {/*横幅80%で中央寄せ*/
    margin: 0 auto;
    /*max-width: 500px;*/
    width:50vw;
    display: none;
  }

  .slider img {
    width:50vw;/*スライダー内の画像を40vwにしてレスポンシブ化*/
    height:auto;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1800px) {
  .slider {/*横幅80%で中央寄せ*/
    margin: 0 auto;
    /*max-width: 500px;*/
    width:40vw;
    display: none;
  }

  .slider img {
    width:40vw;/*スライダー内の画像を40vwにしてレスポンシブ化*/
    height:auto;
    margin: 0 auto;
  }
}

@media screen and (min-width: 2200px) {
  .slider {/*横幅80%で中央寄せ*/
    margin: 0 auto;
    /*max-width: 500px;*/
    width:30vw;
    display: none;
  }

  .slider img {
    width:30vw;/*スライダー内の画像を40vwにしてレスポンシブ化*/
    height:auto;
    margin: 0 auto;
  }
}

@media screen and (min-width: 2860px) {
  .slider {/*横幅80%で中央寄せ*/
    margin: 0 auto;
    /*max-width: 500px;*/
    width:20vw;
    display: none;
  }

  .slider img {
    width:20vw;/*スライダー内の画像を40vwにしてレスポンシブ化*/
    height:auto;
    margin: 0 auto;
  }
}

.slider.slick-initialized{
    display: block; /* slickが実行完了したら表示 */
  }


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 50%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

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

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

.slick-track {
	display: flex;
	align-items: center;
}

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

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

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

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

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


/*========= コピー禁止のためのCSS ===============*/
img{
    /* 右クリック禁止 */
    pointer-events: none;
	/* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
  }