#section1, #MORE {
    z-index: 10000;
    position: relative;
}

.customScrollProgress {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.scrollTop {
	font-size: 25px;
	line-height: 1.75;
	padding: 0 10px;
	position: fixed;
	right: 0;
	bottom: 0;
	border: 3px outset #fdfdfd;
	border-bottom: none;
	border-right: none;
	background: rgba(229, 76, 202, 0.5);/* #E54CCA; */
}
	a.scrollTop, a.scrollTop:visited, .textAria {
		color: #fdfdfd;
		text-shadow: 1px 1px 0 #333333, -1px -1px 0 #333333,
		-1px 1px 0 #333333, 1px -1px 0 #333333,
		0px 1px 0 #333333,  0 -1px 0 #333333,
		-1px 0 0 #333333, 1px 0 0 #333333;
	}

.textAria {
	font-size: 18px;
	position: fixed;
	bottom: 10px;
	right: 80px;
  opacity: 1;
  transition: opacity 0.25s ease;
}

	.textAria.fade-out {
	  opacity: 0;
	}

	.textAria.fade-in {
	  opacity: 1;
	}

.progressBar {
	width: 0%;
	height: 5px;
	background-color: #fdfdfd;
	transition: width 0.1s ease-out;
}





.progressWrapper {
  position: relative;
  width: 100%;
  height: 5px;
  background: transparent; /* バーの道筋は表示しない */
  overflow: visible;
  z-index: 9999;
}

.progressMarks {
  position: fixed;       /* ← 固定表示に変更 */
  bottom: 0px;           /* ← お好みの高さに調整可能（例：5px） */
  left: 0;
  width: 100%;
  height: 15px;
  pointer-events: none;
  z-index: 10000;
  }

.progressMarks span {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 7.5px solid transparent;   /* 横幅半分 */
  border-right: 7.5px solid transparent;  /* 横幅半分 */
  border-top: 15px solid #fdfdfd;       /* 三角形の高さと色 */
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease, border-top-color 0.5s ease;
  }

.progressMarks span.active {
  opacity: 1;
}