@charset "utf-8";
html {
  height:100%;
}

body {
  margin:0;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-10deg, #4c6cb3 40%, #7ebea5 40%);
  bottom:0;
  left:-50%;
  opacity:.4;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:3s;
}

.bg3 {
  animation-duration:7s;
}

.bg4 {
  animation-duration:2s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
ul li{
display: table-cell;
min-width: 50px;
}
ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #ccc;
font-weight: bold;
}
ul li.current{
border: 3px solid #555;
}
ul li.current a{
color: #555;
}
ul li a:hover{
color: #E71B1F;
}

/* 子画面 */
h1 {
  color: #ddbb99;
  font-size: 16px;
  font-weight: bold;
}
h2 {
  font-size: 10px;
}
.main-text {
  font-size: 8px;
}

/* 中画面 */
@media only screen and (min-width:651px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 20px;
  }
  .main-text {
    font-size: 16px;
  }
}

/* 大画面 */
@media only screen and (min-width:961px) {
  h1 {
    font-size: 26px;
  }
  h2 {
    font-size: 22px;
  }
  .main-text {
    font-size: 17px;
  }
}