.scrolly-video {
	position: relative
}

@media screen and (max-width: 599px) {
  /* SPここに 〜599px 向けの既存スタイルをそのまま入れる */
  .scrolly-video {
	  aspect-ratio: 1920 / 1900;
  }
	/* 親が video:hover または .video_icon:hover を含む間は表示 */
	.scrolly-video:has(> video:hover),
	.scrolly-video:has(.video_icon:hover) {
	  /* フラグ用にクラスを付ける代わりに、子を直接出すなら↓でもOK */
	}
	.scrolly-video:has(> video:hover) .video_icon,
	.scrolly-video:has(.video_icon:hover) .video_icon {
	  opacity: 1; /* 不透明にする */
	  transform: translateY(0); /* 元の位置に戻す */
	  visibility: visible; /* 表示して操作可能にする */
	}
	.video_icon {
	  position: absolute;
	  bottom: 0;
	  right: 12%;
	  z-index: 99;
	  text-align: right;
	  cursor: pointer;
	  opacity: 0; /* 最初は透明にする */
	  transform: translateY(20px); /* 少し下にずらしておく */
	  visibility: hidden; /* 操作できないように隠す */
	  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; /* アニメーションの設定 */
	}
  .video_icon img {
	  width: 40%;
	}
	.video_arrow {
	  position: absolute;
	  bottom: 25px;
	  left: 50%;
	  transform: translateX(-50%);
	  -webkit-transform: translateX(-50%);
	  -ms-transform: translateX(-50%);
		display: block;
	  width: 100%;
	  height: auto;
	  margin: auto;
	  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
	  outline: none;
	  border: none;	
	  text-align: right;
	}
	.video_arrow img {
		width: 10%;
	}
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  /* タブレットここに 600〜1024px 向けの既存スタイルをそのまま入れる */
  .scrolly-video {
	  aspect-ratio: 1920 / 1040;
  }
	/* 親が video:hover または .video_icon:hover を含む間は表示 */
	.scrolly-video:has(> video:hover),
	.scrolly-video:has(.video_icon:hover) {
	  /* フラグ用にクラスを付ける代わりに、子を直接出すなら↓でもOK */
	}
	.scrolly-video:has(> video:hover) .video_icon,
	.scrolly-video:has(.video_icon:hover) .video_icon {
	  opacity: 1; /* 不透明にする */
	  transform: translateY(0); /* 元の位置に戻す */
	  visibility: visible; /* 表示して操作可能にする */
	}
	.video_icon {
	  position: absolute;
	  bottom: 0;
	  right: 26%;
	  z-index: 99;
	  text-align: right;
	  cursor: pointer;
	  opacity: 0; /* 最初は透明にする */
	  transform: translateY(20px); /* 少し下にずらしておく */
	  visibility: hidden; /* 操作できないように隠す */
	  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; /* アニメーションの設定 */
	}
  .video_icon img {
	  width: 25%;
	}
  
	.video_arrow {
	  position: absolute;
	  bottom: 10px;
	  left: 50%;
	  transform: translateX(-50%);
	  -webkit-transform: translateX(-50%);
	  -ms-transform: translateX(-50%);
		display: block;
	  width: 65.1041666667%;
	  height: auto;
	  margin: auto;
	  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
	  outline: none;
	  border: none;	
	  text-align: right;
	}
	.video_arrow img {
		width: 10%;
		margin-right: 10px;
	}
}
@media screen and (min-width: 1025px) {
  /* PCここに 1025px〜 向けの既存スタイルをそのまま入れる */
  .scrolly-video {
	  aspect-ratio: 1920 / 1040;
  }
	/* 親が video:hover または .video_icon:hover を含む間は表示 */
	.scrolly-video:has(> video:hover),
	.scrolly-video:has(.video_icon:hover) {
	  /* フラグ用にクラスを付ける代わりに、子を直接出すなら↓でもOK */
	}
	.scrolly-video:has(> video:hover) .video_icon,
	.scrolly-video:has(.video_icon:hover) .video_icon {
	  opacity: 1; /* 不透明にする */
	  transform: translateY(0); /* 元の位置に戻す */
	  visibility: visible; /* 表示して操作可能にする */
	}
	.video_icon {
	  position: absolute;
	  bottom: 0;
	  right: 26%;
	  z-index: 99;
	  text-align: right;
	  cursor: pointer;
	  opacity: 0; /* 最初は透明にする */
	  transform: translateY(20px); /* 少し下にずらしておく */
	  visibility: hidden; /* 操作できないように隠す */
	  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; /* アニメーションの設定 */
	}
  .video_icon img {
	  width: 50%;
	}
  
	.video_arrow {
	  position: absolute;
	  bottom: 10px;
	  left: 50%;
	  transform: translateX(-50%);
	  -webkit-transform: translateX(-50%);
	  -ms-transform: translateX(-50%);
		display: block;
	  width: 65.1041666667%;
	  height: auto;
	  margin: auto;
	  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
	  outline: none;
	  border: none;	
	  text-align: right;
	}
	.video_arrow img {
		width: 10%;
		margin-right: 10px;
	}
}
@media screen and (max-width: 767px) {
  /* 大SP小タブレットここに フォーム/動画の 〜767px 調整スタイルを入れる */
  .scrolly-video {
	  aspect-ratio: 1920 / 1900;
  }
	/* 親が video:hover または .video_icon:hover を含む間は表示 */
	.scrolly-video:has(> video:hover),
	.scrolly-video:has(.video_icon:hover) {
	  /* フラグ用にクラスを付ける代わりに、子を直接出すなら↓でもOK */
	}
	.scrolly-video:has(> video:hover) .video_icon,
	.scrolly-video:has(.video_icon:hover) .video_icon {
	  opacity: 1; /* 不透明にする */
	  transform: translateY(0); /* 元の位置に戻す */
	  visibility: visible; /* 表示して操作可能にする */
	}
	.video_icon {
	  position: absolute;
	  bottom: 0;
	  right: 15%;
	  z-index: 99;
	  text-align: right;
	  cursor: pointer;
	  opacity: 0; /* 最初は透明にする */
	  transform: translateY(20px); /* 少し下にずらしておく */
	  visibility: hidden; /* 操作できないように隠す */
	  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; /* アニメーションの設定 */
	}
  .video_icon img {
	  width: 40%;
	}
	.video_arrow {
	  position: absolute;
	  bottom: 25px;
	  left: 50%;
	  transform: translateX(-50%);
	  -webkit-transform: translateX(-50%);
	  -ms-transform: translateX(-50%);
		display: block;
	  width: 100%;
	  height: auto;
	  margin: auto;
	  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
	  outline: none;
	  border: none;	
	  text-align: right;
	}
	.video_arrow img {
		width: 10%;
	}
}