@charset "utf-8";
@import url("variables.css");
/* loading */

body {
	opacity: 1;
	transition: all var(--transition-timing);
}


body.firstShow {
	opacity: 0;
	
}

body {
	opacity: 1;
}

body #contentsWrapper.firstShow {
	opacity: 0;
}

body #contentsWrapper{
	opacity: 1;
	transition: all var(--transition-timing);
}

#loadingWrap {
	display: block;
	width: 100%;
	height: 100dvh;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	overflow: hidden;
	
}

#loadingWrap.hideCont {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	-webkit-transition: all .4s;
	transition: all .4s;
}

#loadingWrap.isShown {
	visibility: visible;
	opacity: 1;
	/* background: rgba(255, 255, 255, 1.0); */
	
	background: rgba(0, 0, 0, 1);
}





#loadingWrap.isShown .sectionTop {
	visibility: visible;
	width: 100%;
	height: 50vh;
	background: rgba(255, 255, 255, 1.0);
	position: absolute;
	top: 0;
	left: 0;
	
	opacity: 1;
	
}



#loadingWrap.isShown .barWrap {
	width: 100%;
	height: 100dvh;
}

#loadingWrap.isShown.hideCont .barWrap {
	left: 150%;
	
	-webkit-transition: all .2s;
	transition: all .2s;
}

#loadingWrap.isShown .barWrap .progress {
	width: 100%;
	height: 1px;
	background: var(--gradient-green-color);
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;

	display: none;
}



#loadingWrap.isShown .barWrap .progress .act {
	width: 0%;
	height: 1px;
	background: rgba(255, 255, 255, 1);
	position: absolute;
	top: 0;
	left: 0;
}

#loadingWrap.isShown .barWrap .text.up {
	position: relative;
	top: 80vh;
	font-size: 1rem;
	color: var(--black-color);
	z-index: 5;
	text-align: center;
	display: none;
}

#loadingWrap.isShown .barWrap .text.lower {
	/* position: relative;
	top: 15px;
	font-size: 11px;
	z-index: 5;
	top: 40vh;
	text-align: center; */

	position: relative;
	width: 100%;
	height: 100%;
}

#loadingWrap.isShown .barWrap .text.lower .loading {
	position: relative;
	width: 100%;
	height: 100dvh;
	top: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(255, 255, 255, 1);
	font-size: 11px;
}

#loadingWrap.isShown .barWrap .text.lower .loading span.text {
	animation: textAnimation 1s linear 0s infinite;
}

@keyframes textAnimation {
	0%   { opacity: .45; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  70%  { opacity: .45; }
  100% { opacity: .45; }
}


#loadingWrap.isShown .barWrap .text.lower .loading span.dot_1 {
	animation: dotAnimation 3s linear 0s infinite;
}

#loadingWrap.isShown .barWrap .text.lower .loading span.dot_2 {
	animation: dotAnimation 3s linear 1s infinite;
}

#loadingWrap.isShown .barWrap .text.lower .loading span.dot_3 {
	animation: dotAnimation 3s linear 2s infinite;
}

@keyframes dotAnimation {
	0%   { opacity: 0; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}


#loadingWrap.isShown .barWrap .text.lower .icon {
	content: "";
	display: block;
	width: 50px;
	height: 10px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateX(-50%);
	
	
}

#loadingWrap.isShown .barWrap .text.lower .icon span {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	position: absolute;
	border: 1px solid #fff;
	background: var(--black-color);
}

#loadingWrap.isShown .barWrap .text.lower .icon span:nth-child(1) {
	left: 0;
	animation: iconAnimation1 0.5s linear 0s infinite;
}

#loadingWrap.isShown .barWrap .text.lower .icon span:nth-child(2) {
	left: 20px;
	animation: iconAnimation1 0.5s linear .5s infinite;
}


#loadingWrap.isShown .barWrap .text.lower .icon span:nth-child(3) {
	left: 40px;
	animation: iconAnimation2 1s linear .5s infinite;
}

@keyframes iconAnimation1 {
	0%   { opacity: 0; }
  25%  { opacity: 1; }
  50%  { opacity: 1; }
  75%  { opacity: 	0; }
  100% { opacity: 0; }
}

@keyframes iconAnimation2 {
	0%   { 
		opacity: 0; 
		left: 60px;
	}
  25%  { 
	opacity: 1; 
	left: 40px;
	}
  50%  { opacity: 1; }
  75%  { opacity: 	0; }
  100% { opacity: 0; }
}



#loadingWrap.isShown .barWrap .text.lower .logoWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 160px;
	height: 160px;
	z-index: 5;
}

#loadingWrap.isShown .barWrap .text.lower .logoWrap .bgWhiteWrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 1);
	border-radius: 50%;
	overflow: hidden;
}

#loadingWrap.isShown .barWrap .text.lower .logoWrap .arr {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	animation: rotateLogo 1.5s linear infinite;
}

@keyframes rotateLogo {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(-360deg);
	}
}

#loadingWrap.isShown .barWrap .text.lower .logoWrap .leaf {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}





.blinker {
  /* 置きたい位置が固定なら position などは適宜追加 */
  display: inline-block;
  width: 1em;
  text-align: center;
  font-family: monospace;       /* 幅ズレ防止に等幅推奨 */
  line-height: 1;               /* 好みで調整 */
  position: fixed;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  width: 100%;
  font-weight: normal;
}

.blinker::after {
  content: "/";
  display: inline-block;
  animation: swap 1s steps(1, end) infinite;
}

/* 速度を変えたい時は --speed を上書き */
.blinker {
  --speed: 1s;
}
.blinker::after {
  animation-duration: var(--speed);
}

/* 文字の切替 */
@keyframes swap {
  0%   { content: "//|//¥"; }
  25%  { content: "|||////____~"; }
  50%  { content: "¥AAAAAAA"; }  /* フォントにより \ と表示されることも */
  75%  { content: "*BBBBBBBB"; }
  100% { content: "/"; }
}

/* ふわっと点滅も足したい場合（任意） */
.blinker.flicker::after {
  animation:
    swap var(--speed) steps(1, end) infinite,
    fade  var(--speed) linear infinite;
}
@keyframes fade {
  0%,25%,50%,75%,100% { opacity: 1; }
  12.5%,37.5%,62.5%,87.5% { opacity: .35; }
}

/* 動きが苦手な人向けに無効化 */
@media (prefers-reduced-motion: reduce) {
  .blinker::after { animation: none !important; }
}