@charset "utf-8";

/* 共通ボックス設定 */
.col-container {
	width:90%;
	margin-left:5%;
	margin-right:5%;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.col-box {
  box-sizing: border-box;
  padding: 1em;
  background: #f1f1f1;
}

.col-box ul li{
	list-style-type:disc;
	margin-left:1em;
}

/* 画像ボックス（中央寄せ） */
.col-box.imgCtr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
	background-color:white;
}

.col-box.imgCtr img {
  max-width: 60%;
  height: auto;
}

/* スマホ（1カラム） */
.col-box {
	flex: 0 0 100%;
}
/* タブレット（2カラム：画像30%、テキスト70%） */
@media (min-width: 768px) {
  .col-box {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .col-box.imgCtr {
    flex: 0 0 30%;
  }
  /* 高さ揃え */
  .col-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
	.col-box{
		border-bottom:1px solid #ccc;
	}
}

/* PC以上（4カラム：画像10%、テキスト40%） */
@media (min-width: 1280px) {
  .col-box {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .col-box.imgCtr {
    flex: 0 0 12%;
  }

  .col-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
	.col-box.imgCtr img {
		max-width: 80%;
	}
}

.youtube-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin-bottom: 50px;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 横並びは768px以上のとき */
@media screen and (min-width: 768px) {
  .youtube-container {
    width: 47%;
    padding-bottom: 26.4375%; /* 幅47%に対する16:9比率 */
		margin-right: 6%;
    margin-bottom: 50px;
		margin-top:50px;
  }
	.youtube-container:nth-child(2n) {
    margin-right: 0;    /* 偶数番目は右余白なし */
  }
}
@media screen and (min-width: 1280px) {
  .youtube-container {
    width: 30%;
    padding-bottom: 16.875%; /* 幅47%に対する16:9比率 */
		margin-right:0;
		margin-left:13.333%;
  }
}