/* === General Page Styles === */
body {
	background:url(../assets/img/border-shape.png);   
	background-repeat: repeat; /* Tiles both horizontally and vertically */
  background-size: 25% auto; /* Or adjust to suit your design */
  font-family:'Noto Sans JP', sans-serif;  /*font-family: Arial, Helvetica, sans-serif;*/
  color: #DDDDDD;
  font-size: 14px;
  line-height: 25px;
  width: 100%;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

h4 {
  color: #F96580;
  font-size: 20px;
  margin-bottom: 2px;
  font-family:'Noto Sans JP', sans-serif; 
}

.logo-text {
  color: #999999;
  font-size: 30px;
  margin-bottom: 2px;
  font-family: Arial, Helvetica, sans-serif;
 	font-style: italic;
}

p {
  color: #999999;
}

a {
  color: #23a1d1;
}

a:hover {
  text-decoration: none;
}

.container {
  margin: 0;
  padding: 0;
  text-align: center;
}

.logo {
  margin-top: 15%;
}

/* === Orbit Loader === */
.loader {
  position: relative;
  width: 240px;
  height: 40px;
  margin: 50px auto;
}

.loader .dot {
  position: absolute;
  bottom: 0;
  width: 6px;                /* Slightly smaller dot */
  height: 6px;
  border-radius: 50%;
  background-color: #00ABCD;
  animation: wave 1.2s ease-in-out infinite;
}

/* Position & delay for each of 15 dots */
.loader .dot:nth-child(1)  { left: 0px;    animation-delay: 0s; }
.loader .dot:nth-child(2)  { left: 16px;   animation-delay: 0.05s; }
.loader .dot:nth-child(3)  { left: 32px;   animation-delay: 0.1s; }
.loader .dot:nth-child(4)  { left: 48px;   animation-delay: 0.15s; }
.loader .dot:nth-child(5)  { left: 64px;   animation-delay: 0.2s; }
.loader .dot:nth-child(6)  { left: 80px;   animation-delay: 0.25s; }
.loader .dot:nth-child(7)  { left: 96px;   animation-delay: 0.3s; }
.loader .dot:nth-child(8)  { left: 112px;  animation-delay: 0.35s; }
.loader .dot:nth-child(9)  { left: 128px;  animation-delay: 0.4s; }
.loader .dot:nth-child(10) { left: 144px;  animation-delay: 0.45s; }
.loader .dot:nth-child(11) { left: 160px;  animation-delay: 0.5s; }
.loader .dot:nth-child(12) { left: 176px;  animation-delay: 0.55s; }
.loader .dot:nth-child(13) { left: 192px;  animation-delay: 0.6s; }
.loader .dot:nth-child(14) { left: 208px;  animation-delay: 0.65s; }
.loader .dot:nth-child(15) { left: 224px;  animation-delay: 0.7s; }

@keyframes wave {
  0%   { transform: translateY(0);      opacity: 0.6; }
  50%  { transform: translateY(-20px);  opacity: 1;   }
  100% { transform: translateY(0);      opacity: 0.6; }
}