:root {
	--load-bgcolor: #fff; /* 背景色調整 */
	--bright: rgb(0,0,0,0.1); /* アニメーションの色味 */
	--dark: rgba(0,0,0, 0.2); /* アニメーションの色味 */
	--base-line-height: 48px;
	--spin-duration: 1s;
	--pulse-duration: 750ms;
}

/* 共通 */
#s-loading {
  height: 100dvh;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--load-bgcolor);
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
}

/* pt1 */
#s-loading > .e-pt1 {
  border-radius: 50%;
  width: var(--base-line-height);
  height: var(--base-line-height);
  border: .25rem solid var(--dark);
  border-top-color: var(--bright);
  animation: spin var(--spin-duration) infinite linear;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* pt2 */
#s-loading > .e-pt2 {
  position: relative;
  width: calc(var(--base-line-height) / 4);
  height: var(--base-line-height);
  background: var(--dark);
  animation: pulse var(--pulse-duration) infinite;
  animation-delay: calc(var(--pulse-duration) / 3);
}

#s-loading > .e-pt2:before,
#s-loading > .e-pt2:after {
  content: '';
  position: absolute;
  display: block;
  height: calc(var(--base-line-height) / 1.5);
  width: calc(var(--base-line-height) / 4);
  background: var(--dark);
  top: 50%;
  transform: translateY(-50%);
  animation: pulse var(--pulse-duration) infinite;
}

#s-loading > .e-pt2:before {
  left: calc(-1 * var(--base-line-height) / 2);
}
#s-loading > .e-pt2:after {
  left: calc(var(--base-line-height) / 2);
  animation-delay: calc(var(--pulse-duration) / 1.5);
}
@keyframes pulse {	
  50% { 
    background: var(--bright);
  } 
}