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

@media screen and (max-width: 900px){
  #etoAnimals{
    justify-content:space-around;
  }
  #etoAnimals > li{
    width:15%;
    text-align:center;
  }
}
/*クリックされたらフェードアウト*/
.foff{
  animation-name:fadeoff;
  animation-duration:10s;
}
@keyframes fadeoff{
  0% {color:#212529;}
  10% {color:transparent;}
  45% {color:transparent;}
  100% {color:#212529;}
}

/*選択された干支の強調*/
#irohainner > * > .regexpkana{
  animation-name:modblink;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-timing-function:linear;
  animation-fill-mode: forwards;
}
@keyframes modblink{
  0% {color:transparent;}/*透明*/
  20% {color:#E91E63;}/*赤*/
  40% {color:#66BB6A;}/*緑*/
  60% {color:#FFEE58;}/*黄色*/
  100% {color:#212529;}/*黒*/
}

/* * 初期読み込み * */
/* いろはうた部分 */
@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;}
}
footer{
  text-align:center;
  margin-top: 2em;
}