body {
  font-family: 'RocknRoll One', sans-serif;
  background-color: #1d1d1d;
  color: white;
}
header {
  height: 140px;
  width: 100%;
  background-color: rgba(29, 29, 29, 0.7);
  position: fixed;
  top: 0px;
  z-index: 10;
}
header h1 {
  text-align: center;
}
header img {
  height: 20%;
  width: 20%;
}

header ul {
	list-style-type: none;
	padding-left: 0;
}
header li {
	width: 50px;
	height: 50px;
	padding: 40px;
	margin: 10px;
}
a {
  text-decoration: none;
}
header a:link {
	color: white;
}
header a:visited {
	color: white;
}
.inline {
	text-align: center;
}
.inline li {
	display: inline;
}

.wrapper {
  margin: 150px 200px 0 200px;
  text-align: center;
}
.wrapper2 {
  margin: 150px 200px 0 200px;
  text-align: center;
}

h3.head-letter {
  font-size: 26px;
  text-align: left;
  margin-left: 45px;
}

hr {
  display:block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 4px dashed #cccccc;
}

.war {
  float: left;
  width: 25%;
}
.war2 {
  float: left;
  width: 33%;
}
.war {
  position: relative;
}
.war img{
  width: 200px;
  height: 200px;
}
.war2 img{
  width: 200px;
  height: 200px;
}

.character {
  float: left;
  width: 25%;
}
.character2 {
  float: left;
  width: 25%;
}
.character-icon img {
  width: 180px;
  height: 180px;
  margin-top: 30px;
}
.character-icon p {
  width: 100%;
  font-size: 30px;
  color: white;
}
a:hover {
  opacity: 0.6;
}
/* 謎
.wrapper2 {
  margin: 80px 220px 0 220px;
}
*/
.about {
  margin-top: 250px;
}
.about {
  font-family: 'Roboto Condensed', sans-serif;
}
.about h1{
  font-size: 20px;
  white-space: nowrap;
}
.about h2{
  font-size: 24px;
}
.about h3{
  font-size: 20px;
  opacity: 0.7;
}
.about h4{
  font-size: 20px;
}
.about p{
  font-size: 18px;
  text-align: left;

}
.about h2 img{
  height: 144px;
  width: 464px;
}
h2 a:link {
	color: white;
}
h2 a:visited {
	color: white;
}
.character-language {
  float: left;
  width: 50%;
}
.video-font {
  padding-top: 100px;
}
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.box {
  margin-bottom: 150px;
}
.box2 {
  margin-bottom: 30px;

}
/* 謎
.character-chart .left {
  display: inline-block;
  font-size: 18px;
}
.character-chart .hidari {
  text-align: left;
  font-size: 18px;
}
.wait-link {
  pointer-events:none;
}
.wait-icon {
  opacity: 0.3;
}
*/
.bar {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}

a:link {
  color: orange;
}
a:visited {
	color: orange;
}
a:hover {
  color: orange;
  opacity: 0.6;
}

.disabled{
  pointer-events: none;
}


@media only screen and (max-width: 1100px) {
  header img {
    height: 108px;
    width: 348px;
  }
  header li {
  	width: 50px;
  	height: 50px;
  	padding: 10px;
  	margin: 10px;
    font-size: 25px;
  }
  .wrapper {
    margin: 150px 120px 150px 120px;
    text-align: center;
  }
  .wrapper2 {
    margin: 150px 70px 150px 70px;
    text-align: center;
  }
  .character {
    float: left;
    width: 33%;
  }
  .character2 {
    float: left;
    width: 50%;
  }
  .war {
    float: left;
    width: 50%;
  }
  .war img{
    width: 280px;
    height: 280px;
  }
  .about h1{
    font-size: 30px;
  }
  .about p{
    font-size: 26px;
  }
  .about h2 img{
    height: 173px;
    width: 557px;
  }
  .bar {
    float: left;
    width: 100%;
    margin-bottom: 20px;
  }
  .bar img{
    width: 70%;
    height: 70%;
  }
}


.anim-slide1{
  animation: SlideIn 1.0s;
}
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide2{
  animation: SlideIn2 1.0s;
}
@keyframes SlideIn2 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-30px);
  }
  10% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide3{
  animation: SlideIn3 1.0s;
}
@keyframes SlideIn3 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-30px);
  }
  20% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide4{
  animation: SlideIn4 1.0s;
}
@keyframes SlideIn4 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-30px);
  }
  30% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}