.c-message img{
width:60%;
}

@media screen and (min-width:1025px) and ( max-width:1500px) {
.c-message img{
width:65%;
}
  }
@media screen and (min-width:801px) and ( max-width:1024px) {
.c-message img{
width:75%;
}
  }

@media screen and (max-width:800px) {
.c-message img{
width:97%;
}
  }
.group-lift{
    border-collapse: collapse;
}
.group-lift th, .group-lift td{
  border: solid 1px black;
  padding:5px;
　color:red;
}

/* リフトグループページ　表の表示 */
@media only screen and (min-width: 801px) {
  #myTable {
    display: table; /* 表示 */
  }
}
@media only screen and (max-width: 800px) {
  #myTable {
    display: none; /* 非表示 */
  }
}

.youtube-container {
  display: flex; /* 子要素を横並びにする */
  flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
  gap: 20px; /* 動画間のスペース */
  justify-content: center; /* コンテナ内で中央寄せ */
}

.youtube {
  /* 各動画コンテナのスタイル（必要であれば調整） */
  flex: 1; /* 利用可能なスペースに応じて幅を調整 */
  min-width: 300px; /* 動画の最小幅 */
  max-width: 560px; /* 動画の最大幅 */
  box-sizing: border-box; /* paddingとborderをwidthに含める */
  text-align: center; /* 動画の説明文を中央寄せ */
}

.youtube iframe {
  width: 100%; /* 親要素の幅に合わせてiframeの幅を調整 */
  height: auto; /* 高さは自動調整 */
  aspect-ratio: 16 / 9; /* 16:9のアスペクト比を維持 */
}

.c-product-button {
  margin: 30px auto 0 auto;
  width: 100%;
  max-width: 400px;
  height: 80px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--defaultImportantColor);
  color: white;
  transition: opacity 0.2s ease-out;
  font-size: 18px;
  font-family: var(--boldfont);
  font-weight: bold;
}
.c-product-button:hover {
  opacity: 0.8;
}