/* img.videoThumb のスタイル定義 */
img.videoThumb {
    cursor: pointer; /* マウスカーソルが画像の上に来たときに、ポインターに変更する */
}

/* img.videoThumb のホバー時のスタイル定義 */
img.videoThumb:hover {
    opacity: 0.8; /* マウスオーバー時に画像の透明度を80%に設定 */
}

/* .modalContent のスタイル定義 */
.modalContent {
    background-color: #fefefe; /* 背景色を設定 */
    margin: 8% auto; 5% /* 上下のマージンを15%、左右のマージンを自動に設定 */
    padding: 0; /* パディングを設定 */
    border: 1px solid #888; /* 境界線の色と太さを設定 */
    animation: fadeIn 0.7s ease 0s 1 normal; /* アニメーションの名前、時間、タイミング関数、遅延時間、反復回数、方向を設定 */
    position: relative; /* 位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    aspect-ratio: 17 / 30; /* アスペクト比を16:9に設定 */
    max-width: 340px; /* 最大幅を600pxに設定 */
}

/* .modalContent iframe のスタイル定義 */
.modalContent iframe {
    position: absolute; /* 絶対位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
}

/* button.closeBtn のスタイル定義 */
button.closeBtn {
    display: inline-block; /* ディスプレイプロパティをinline-blockに設定 */
    vertical-align: middle; /* 垂直方向の配置を中央に設定 */
    color: #FFF; /* 文字色を白に設定 */
    line-height: 1; /* 行の高さを1に設定 */
    width: 1.6rem; /* 幅を1.6remに設定 */
    height: 0.2rem; /* 高さを0.2remに設定 */
    background: currentColor; /* 背景色を現在の文字色に設定 */
    border-radius: 0.1rem; /* ボーダーの角を丸める */
    position: absolute; /* 絶対位置を設定 */
    transform: rotate(45deg); /* 要素を45度回転させる */
    border: none; /* ボーダーをなくす */
    right: -35px; /* 右から-35pxの位置に配置 */
    top: 7px; /* 上から7pxの位置に配置 */
    opacity: 0.6; /* 透明度を60%に設定 */
    transition: 0.2s ease-in-out; /* 0.2秒間でプロパティを変更し、変更の速度が先頭と末尾でゆっくりとなるように設定 */
}


@media (max-width: 768px) {

.modalContent {
    background-color: #fefefe; /* 背景色を設定 */
    margin: 10% auto; /* 上下のマージンを15%、左右のマージンを自動に設定 */
    padding: 0; /* パディングを設定 */
    border: 1px solid #888; /* 境界線の色と太さを設定 */
    animation: fadeIn 0.7s ease 0s 1 normal; /* アニメーションの名前、時間、タイミング関数、遅延時間、反復回数、方向を設定 */
    position: relative; /* 位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    aspect-ratio: 17 / 30; /* アスペクト比を16:9に設定 */
    max-width: auto; /* 最大幅を600pxに設定 */
    width: 90%;
}

button.closeBtn {
    display: inline-block; /* ディスプレイプロパティをinline-blockに設定 */
    vertical-align: middle; /* 垂直方向の配置を中央に設定 */
    color: #FFF; /* 文字色を白に設定 */
    line-height: 1; /* 行の高さを1に設定 */
    width: 1.6rem; /* 幅を1.6remに設定 */
    height: 0.2rem; /* 高さを0.2remに設定 */
    background: currentColor; /* 背景色を現在の文字色に設定 */
    border-radius: 0.1rem; /* ボーダーの角を丸める */
    position: absolute; /* 絶対位置を設定 */
    transform: rotate(45deg); /* 要素を45度回転させる */
    border: none; /* ボーダーをなくす */
    right: 0px; /* 右から-35pxの位置に配置 */
    top: -20px; /* 上から7pxの位置に配置 */
    opacity: 0.6; /* 透明度を60%に設定 */
    transition: 0.2s ease-in-out; /* 0.2秒間でプロパティを変更し、変更の速度が先頭と末尾でゆっくりとなるように設定 */
}

}


/* button.closeBtn:before のスタイル定義 */
button.closeBtn:before {
    content: ''; /* 内容を空に設定 */
    position: absolute; /* 絶対位置を設定 */
    top: 0; /* 上から0の位置に配置 */
    left: 0; /* 左から0の位置に配置 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    background: inherit; /* 背景色を親要素から継承 */
    border-radius: inherit; /* ボーダーの角を親要素から継承 */
    transform: rotate(90deg); /* 要素を90度回転させる */
}

/* button.closeBtn のホバー時のスタイル定義 */
button.closeBtn:hover {
    opacity: 1; /* マウスオーバー時に透明度を100%に設定 */
}

/* fadeIn アニメーションの定義 */
@keyframes fadeIn {
  0% {
    opacity: 0; /* 開始時点での透明度を0%に設定 */
    transform: translateY(30px); /* 開始時点での要素の位置をY軸方向に30px下に移動 */
  }
  100% {
    opacity: 1; /* 終了時点での透明度を100%に設定 */
  }
}

/* fadeOut アニメーションの定義 */
@keyframes fadeOut {
  0% {
    opacity: 1; /* 開始時点での透明度を100%に設定 */
  }
  100% {
    opacity: 0; /* 終了時点での透明度を0%に設定 */
    transform: translateY(60px); /* 終了時点での要素の位置をY軸方向に60px下に移動 */
  }
}