/* ==========================
  ローディング画面
========================== */
#bl_loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/loading/loading_bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; color: #fff; font-size: 12px; transition: 0.3s; z-index: 999999;}
#bl_loading .bg_black{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: black; z-index: 998; animation: flash_bg_black 3s infinite; opacity: 0.6;}
@keyframes flash_bg_black{
  50%{ opacity: 0.3;}
}
#bl_loadingPercentWrap{ width: 100%; max-width: 380px; aspect-ratio: 1 / 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center; z-index: 999;}
#bl_loadingPercentWrap .loading_itme_01{ width: 100%; max-width: 150px; height: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/loading/loading_itme_01.png); background-size: 100%; background-repeat: no-repeat; background-position: center center; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
#bl_loadingPercentWrap .loading_itme_01 img{ width: 89%; animation: rotation_loading_itme_02 4s linear infinite;}
@keyframes rotation_loading_itme_02 {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}
#bl_loadingPercentWrap .loading_itme_01 #bl_loadingPercentNumber{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 42px; color: #fff; font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: italic; display: flex; justify-content: center; align-items: center;}
#bl_loadingPercentWrap .loading_itme_03{ display: flex; justify-content: center; align-items: center;}
#bl_loadingPercentWrap .loading_itme_03 .loading_itme_03_img01{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; animation: flash_loading_itme_03 1s infinite;}
#bl_loadingPercentWrap .loading_itme_03 .loading_itme_03_img02{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; animation: blur_loading_itme_03 1s infinite; filter: blur(7px); opacity: 0.6;}
@keyframes flash_loading_itme_03{
  50%{ opacity: 0.2;}
}
@keyframes blur_loading_itme_03{
  50%{ filter: blur(2px); opacity: 0.2;}
}

@media screen and (max-width:600px){
	#bl_loadingPercentWrap{ max-width: 220px;}
	#bl_loadingPercentWrap .loading_itme_01{ max-width: 100px;}
	#bl_loadingPercentWrap .loading_itme_01 #bl_loadingPercentNumber{ font-size: 28px;}
}