* {
  margin: 0;
  padding: 0;
}
.kyukokunosunejinka {
  background: #072C38;
  color: #fff;
  font: 17px / 1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  text-justify: inter-ideograph;
}
.kyukokunosunejinka a {
}
.kyukokunosunejinka a:hover {
  text-decoration: underline;
}
.kyukokunosunejinka h2 {
  font-size: 2em;
}
.kyukokunosunejinka h3 {
  font-size: 1.6em;
}

.kyukokunosunejinka .darkblue {
  background: #072C38;
  color: #DDD2BB;
}
.kyukokunosunejinka .cream {
  background: #DDD2BB;
  color: #072C38;
}

.eyecatch {
  position: relative;
  height: 70vh;
}
.eyecatch-inner {
  background: rgba(0,0,0,.5);
  padding: 40px 4%;
  position: absolute;
  bottom: 40%;
  left: 10%;
}

.introduction {
  overflow: hidden;
}
.introduction-wrapper {
  margin: 0 auto;
  padding: 80px 2% 0;
  max-width: 1280px;
}
.introduction-text {
  margin: 40px auto;
}
.introduction-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 0 -20%;
  overflow: hidden;
  width: 140%;
}
.introduction-images-item {
  width: 25%;
}
.introduction-images-item img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.story-wrapper {
  margin: 0 auto;
  padding: 80px 2% 0;
  max-width: 1280px;
}
.story-text {
  margin: 40px auto;
}
.story-end {
}
.story-end-header {
  background: rgba(0,0,0,.1);
  padding: 200px 4%;
  text-align: center;
}

.characters-wrapper {
  margin: 0 auto;
  padding: 80px 2% 0;
  max-width: 1280px;
}
.characters-text {
  margin: 40px auto;
}
.characters-items {
  margin: 0 auto;
  padding: 40px 0;
  width: 90%;
}
.characters-item {
  display: flex;
  align-items: center;
}
.characters-item:nth-child(even) {
  flex-direction: row-reverse;
}
.characters-item:nth-child(even) img {
  margin: 0 0 0 20px;
}
.characters-item img {
  margin: 0 20px 0 0;
  width: 35%;
}

.guns-wrapper {
  margin: 0 auto;
  padding: 80px 2% 0;
  max-width: 1280px;
}
.guns-header {
  text-shadow: 2px 2px 0 #333;
}
.guns-text {
  margin: 40px auto;
  text-shadow: 1px 1px 0 #333;
}
.guns-small {
  text-shadow: 1px 1px 0 #333;
}
.metallic {
  background: radial-gradient(#999, #777);
}
.guns-image {
  margin: 0 auto 80px;
  width: 100%;
}

.cards-wrapper {
  margin: 0 auto;
  padding: 80px 2%;
  max-width: 1280px;
}
.cards-header {
  text-shadow: 2px 2px 0 #333;
}
.cards-text {
  margin: 40px auto;
  text-shadow: 1px 1px 0 #333;
}

.weapons {
  background: #000;
}
.weapons-wrapper {
  margin: 0 auto;
  padding: 80px 2%;
  max-width: 1280px;
}
.weapons-header {
  text-shadow: 2px 2px 0 #333;
}
.weapons-text {
  margin: 40px auto;
  text-shadow: 1px 1px 0 #333;
}
.weapons-items {
  display: flex;
  justify-content: center;
}
.weapons-item {
  margin: 40px .5%;
  padding: 20px;
  width: 32%;
}
.weapons-item img {
  width: 100%;
}

.enemies-wrapper {
  margin: 0 auto;
  padding: 80px 2%;
  max-width: 1280px;
}
.enemies-header {
  text-shadow: 2px 2px 0 #333;
}
.enemies-text {
  margin: 40px auto;
  text-shadow: 1px 1px 0 #333;
}
.enemies-image{
  margin: 0 auto 40px;
  width: 100%;
  max-width: 1280px;
}
.enemies-list {
  color: #ccc;
  margin: 0 0 0 2em;
}
.enemies-list li {
  margin: 4px 0;
}

.barracks-wrapper {
  margin: 0 auto;
  padding: 80px 2%;
  max-width: 1280px;
}
.barracks-header {
  text-shadow: 2px 2px 0 #333;
}
.barracks-text {
  margin: 40px auto;
  text-shadow: 1px 1px 0 #333;
}
.barracks-image {
  margin: 20px auto;
  width: 100%;
  max-width: 1280px;
}
.barracks-list li {
  list-style: none;
  margin: 4px 0;
}

.devs-wrapper {
  margin: 0 auto;
  padding: 80px 2%;
  max-width: 1280px;
}
.devs-header {
  text-shadow: 2px 2px 0 #333;
}
.devs-text {
  margin: 40px auto;
  text-shadow: 1px 1px 0 #333;
}


@media screen and (max-width: 550px) {
.guidebook {
  font-size: 15px;
}

.test-item1 {
  padding: 4px;
  width: 50%;
}
.kyukokunosunejinka-character {
  flex-wrap: wrap;
}
.kyukokunosunejinka-character-images {
  flex-wrap: wrap;
}
}