.site-box{
	max-width:750px;
    margin-left:auto;
    margin-right:auto;
	border:solid 3px rgba(255, 255,255, 0.7);
	border-radius:15px 15px 15px 15px;
	padding:0px;
	background-color:rgba(255, 255, 255, 0.8)
}
.title-box{
	max-width:750px;
    margin-left:auto;
    margin-right:auto;
	border:solid 3px rgba(255, 255,255, 0.7);
	border-radius:15px 15px 15px 15px;
	padding:0px;
	background-image: linear-gradient(to bottom, #F6F068,#EEEEEE);
	max-height:120px;
}

.banner{
	max-width:750px;
	border:solid 3px rgba(255, 255,255, 0.7);
	border-radius:0px 0px 15px 15px;
	padding:0px;
	background-color:rgba(255, 255, 255, 0.6)
}

body {
  margin: 0;
  background-image: url("../img/Wallpaper/bg.jpg");
  background-size:cover;
  background-attachment: fixed;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  line-height: 1.8;
  color: #333;
  overflow-wrap: break-word;
}

.title {
  font-size: 40px;
  color: #fff;
  text-align: center;
  -webkit-animation: title 1s ease-in-out infinite alternate;
  -moz-animation: title 1s ease-in-out infinite alternate;
  animation: title 1s ease-in-out infinite alternate;
  background-color:transparent;
  border:0;
  transform:translateY(-10px)
}

@keyframes title {
  from {
    text-shadow: 0 0 1px #AD780A, 0 0 2px #AD780A, 0 0 4px #AD780A, 0 0 8px #AD780A, 0 0 4px #AD780A, 0 0 2px #AD780A, 0 0 1px #AD780A;
  }
  to {
    text-shadow: 0 0 2px #AD780A, 0 0 4px #AD780A, 0 0 4px #AD780A, 0 0 8px #AD780A, 0 0 4px #AD780A, 0 0 4px #AD780A, 0 0 2px #AD780A;
  }
}
.text {
	font-size:15px;
	font-weight:500;
	padding:15px;
	color:#383838;
}

a{
	color:#1c89ff;
}

h2{
	padding:15px;
	color: #fcf125;
	background-color:transparent;
	text-shadow: 0 0 1px #AD780A, 0 0 2px #AD780A, 0 0 4px #AD780A, 0 0 2px #AD780A, 0 0 4px #AD780A, 0 0 2px #AD780A, 0 0 1px #AD780A;
}

.reward-table{
	border-radius:15px;
	min-width:400px;
	border:solid 2px rgba(255, 255, 255, 0.4);
	text-align:center;
}

.reward-table th:nth-child(1) {
	border-top: 1px solid #C9EAFB;
	border-top-left-radius:15px;
}
.reward-table th:nth-last-child(1) {
	border-top: 1px solid #C9EAFB;
	border-top-right-radius:15px;
}

.reward-table th
{
	background-color:#1987fc;
	color:white;
}

.reward-table td
{
	background-color:rgba(255, 255, 255, 0.3);
	color:#383838;
}

.progress {
  padding: 4px;
  background: rgba(244, 240, 147, 0.1);
  border-radius: 6px;
  width:600px;
  box-shadow: inset 0 1px 2px rgba(244, 184, 147, 0.45), 0 1px rgba(244, 184, 147, 0.08);
}

.progress-bar {
  height: 16px;
  border-radius: 4px;
  width:0%;
  background-image: linear-gradient(to bottom, #F6D068, rgba(255, 255, 255, 0.05));
  transition: 0.7s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px #F6D068, inset 0 1px rgba(244, 240, 147, 0.1);
}

.progress-bar-text{
	text-align:left;
	font-weight:600;
	color:#696969;
	background-color:#F6F06875;
	border-radius:15px 15px 0px 0px;
	border: solid 2px #F6A068;
	padding:5px;
}
.arrowText,
.scoreText{
	color:#F6A068;
	font-weight:600;
}

.icon {
  position: absolute;
  transform: translate(-50%,-50%) scale(0.4) ;
  width: 80px;
  height: 60px;
  transition: 0.7s linear;
  transition-property: opacity;
  opacity:0;
  
}

.arrow {
  position: absolute;
  top: 25px;
  width: 50%;
  height: 10px;
  background-color: #F6D068;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  animation: arrow 700ms linear infinite;
  transform:translateX(25px) rotate(270deg) ;
  display:inline;
}

@keyframes arrow {
  0% {
    top:-15px;
  }
  50%{
    top:-25px;
  }
  100% {
    top:-15px;
  }
}

.arrow::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 10px;
  top: -9px;
  right: -8px;
  background-color: #F6D068;
  transform: rotate(45deg);
}

.arrow::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 10px;
  top: 9px;
  right: -8px;
  background-color: #F6D068;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  transform: rotate(-45deg);
}
.tutorial-header-text2,
.tutorial-header-text{
	color:#696969;
	font-weight:900;
	font-size:20px;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}

.tutorial-header-text2{
	background-color:#FFFF00;
	border-radius:15px 15px 0px 0px;
	border:solid 2px rgba(105,105,105,0.4);
	width:250px;
}

.tutorial-point-text{
	color:#d39926;
	font-weight:900;
	font-size:20px;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}

.tutorial-point-red-text{
	background-color:#FFFF00;
	padding:5px 15px 5px 15px;
	border-radius:15px;
	border:solid 2px rgba(105,105,105,0.4);
	font-size:18px;
	color:#696969;
	font-weight:900;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}

#btn_back{
	background-color:rgba(15,70,255,0.3);
	padding:15px;
	color:#fff;
	width:450px;
	border-radius:15px;
	transition: 0.4s linear;
	transition-property: background-color;
}

#btn_back:hover{
	background-color:rgba(15,70,255,1.0);
}


.scoreCol{
	transition: 0.7s linear;
	transition-property: background-color;
}
.score{
	font-weight:600;
}

.server-score-table{
	
}