@charset "utf-8";


/* ここからコピペ */


.column_contents {
  margin-top: 100px;
}

/* 動画 */
.video-container {
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 20px auto 80px;
}
.video-item {
  text-align: left;
}
.video-wrapper {
  position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.video-wrapper iframe {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.card-container {
  display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    /* max-width: 1000px; */
	max-width: 80%;
    margin: auto;
}

.card-container2 {
  display: grid;
    gap: 30px;
    /* max-width: 1000px; */
	max-width: 80%;
    margin: auto;
}

.card_sc {
    background: white;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}
.card-content {
      padding: 15px;
}
.card_sc img {
  width: 100%;
}
.card-title {
  color: #333333;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.5;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; 
  margin: 0 auto;
  /* max-width: 1000px; */
  max-width: 80%;
}

.video-grid2 {
	display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap: 80px; */
  gap: 30px;
  margin: 0 auto;
  /* max-width: 1000px; */
  max-width: 80%;
}

.video-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); 
  background: #fff;
}

.v_item1 {
	max-width: 80%;
    margin: 80px auto 0;
}
.card_sc.blur .v_item1 {
  max-width: 100%;
  margin-top: 0;
}

div[style*="padding:177.78%"] {
  padding: 0 !important;
  height: auto !important;
}
.video-item iframe {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: 100%;
  border: 0;
}
.v_item1 iframe {
	aspect-ratio: 16 / 9;  
}
.video-caption {
    padding: 0 20px 0;
    text-align: center;
    font-size: 1em;
}
.vc-title {
  color: #333333;
    font-weight: 800;
	line-height: normal;
}
.vc-credit {
      font-size: 0.8em;
      color: #333333;
}

/* スライダー ここから*/
.slider img {
  width: 100%;
  height: auto;
}

.slider_contents {
  /* max-width: 80%; */
  max-width: 85%;
  margin: 100px auto 50px;
}

.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  /* padding: 0 25px; */
  padding: 0;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}

.slider_thumb,
.thumb {
/* max-width: 600px; */
			max-width: 80%;
			background: #fff;
			margin: 0 auto;
			padding: 10px;
		}
		.slider_text {
			max-width: 80%;
			background: #fff;
			margin: 0 auto;
			padding: 10px 10px 10px;
			text-align: center;
			border-radius: 0 0 5px 5px;
		}
		.slider_thumb {
			border-radius: 5px 5px 0 0;
			padding: 10px 5px 5px;
		}

		.thumb {
			padding: 5px 5px 0;
		}

		.slider_thumb img {
			width: 100%;
			height: auto;
			display: block;
		}

		.thumb img {
			width: 100%;
			height: auto;
			cursor: pointer;
			opacity: 0.6;
		}

		.thumb .slick-current img {
			opacity: 1;
			border: 2px solid #6FBF33;
		}

    .slick-prev:before, .slick-next:before {
      font-size: 85px!important;
    }
    .slick-prev {
      left: -90px!important;
    }

/* スライダー ここまで */


@media screen and (max-width: 900px){
	.video-grid {
		grid-template-columns: repeat(2, 1fr);
		/* padding: 0 20px; */
        gap: 30px;
		max-width: 100%;
	}
	.card-container {
		max-width: 100%;
	}
	.v_item1 {
		max-width: 100%;
    margin-top: 30px;
	}
  .column_contents {
    margin-top: 40px;
  }
  .sliderArea {
    padding: 0;
  }
  .slider_contents {
    max-width: 100%;
    margin-top: 60px;
  }
}

@media screen and (max-width: 520px) {
	.video-grid {
		grid-template-columns: 1fr;
	}
	.card-content {
		font-size: 0.8em;
	}
  .card-content {
    padding: 5px;
  }
  .slick-prev:before, .slick-next:before {
    font-size: 50px!important;
  }
      .slick-prev {
      left: -55px!important
    }
}