#iroha{
  writing-mode:vertical-rl;
  width:8em;
  margin: 1.5em auto;
  font-family: "Hannari";
  font-size:20pt;
  line-height:2em;
  animation-name:fadein;
  animation-duration:5s;
  animation-timing-function:ease-in-out;
}
#iroha > p{
  text-align:center;
}
#iroha > p > span{
  text-align:left;
}
.shichi{
  height:7.5em;
  display:inline-block;
}
.go{
  height:5.5em;
  display:inline-block;
  margin-top:0.25em;
}
@media screen and (max-height: 320px){
  #iroha{
    width:16em;
  }
  .go{
    margin-top:0;
  }
}
#etoAnimals{
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
#etoAnimals > li{
  list-style-type:none;
  font-size:24pt;
}

@media screen and (max-width: 900px){
  #etoAnimals{
    justify-content:space-around;
  }
  #etoAnimals > li{
    width:15%;
    text-align:center;
  }
}

/*戌年の強調*/
.omg{
  animation-name:inuuu;
  animation-duration: 5s;
  animation-timing-function:linear;
  display:inline-block;
}
@keyframes inuuu{
  0% {color:#000000;transform:rotate(0deg);}/*黒*/
  20% {color:#E91E63;transform:rotate(20deg);}/*濃赤*/
  40% {color:#FCE4EC;transform:rotate(0deg);}/*薄赤*/
  60% {color:#E91E63;transform:rotate(-20deg);}/*濃赤*/
  100% {color:#000000;transform:rotate(0deg);}/*黒*/
}

/* * 初期読み込み * */
/* いろはうた部分 */
@keyframes fadein{
  from {opacity:0;}
  to {opacity:1;}
}

/* 干支アイコン部分 */
.delayedAni{
  opacity:0;
  animation-name:delayedAnimation;
  animation-duration:1s;
  animation-delay:5s;
  animation-timing-function: step-start;
  animation-fill-mode: forwards;
}
@keyframes delayedAnimation{
  from {opacity:0;}
  to {opacity:1;}
}