.btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }

  img {
    /* max-height: 500px; */
  }

  .moveX {
    animation: fluffyX 1s ease infinite;
  }

  .moveY {
    animation: fluffyY 1s ease infinite;
  }

  .moveYurayura {
    animation: yurayura 2s ease infinite ;
  }

  .moveAnimationZoom1 {
    animation: animationZoom1 2s ease-in-out infinite ;
  }

@keyframes fluffyY {
0%, 100%  {
transform: translateY(0);
/* transform: translateX(0);  */
}
50% {
transform: translateY(-20px);
/* transform: translateX(-20px);  */
}
}

@keyframes fluffyX {
0%, 100%  {
/* transform: translateY(0);  */
transform: translateX(0);
}
50% {
/* transform: translateY(-20px);  */
transform: translateX(-20px);
}
}


@keyframes yurayura {
0% , 100%{
  transform: rotate(5deg);
}
50%{
  transform: rotate(-5deg);
}
}

@keyframes animationZoom1 {
0% { transform:scale(1.0)}
50% { transform:scale(1.2)}
100% { transform:scale(1.0)}
}

.relative {
width: 500px;
position: relative;
}
.absolute {
position: absolute;
left: 35px;
bottom: 95px;


/* animation: fluffyY 2s ease-in-out infinite;  */
width: 160px;
}


.scenarioBox {
/* width: 20%; */
/* height: 50%; */
position: absolute;
right: 5px;
top: 5px;
}
.scenarioArea {

/* 縦書き */
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

    color: white; /* 文字色を白に設定 */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;   /* 文字の縁取りを黒に設定 */
}

.freewordArea {
    position: absolute;
    left:50px;
    top: 50px;
    vertical-align: middle;

    /*min-width: 300px;*/
    /*min-height: 300px;*/
}

.tate {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.characterNameArea {
    color: #F4F5F7; /* 文字色を白に設定 */
    text-shadow:
        -1px -1px 0 #7d7d7d,
        1px -1px 0 #7d7d7d,
        -1px 1px 0 #7d7d7d,
        1px 1px 0 #7d7d7d;   /* 文字の縁取りを黒に設定 */
}

.characterNameHr {
    width: 50%;
    margin: auto;
    border-color: #F4F5F7; /* 文字色を白に設定 */
}

.messageBox {
width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: white; /* 文字色を白に設定 */
    text-shadow:
        -1px -1px 0 #7d7d7d,
        1px -1px 0 #7d7d7d,
        -1px 1px 0 #7d7d7d,
        1px 1px 0 #7d7d7d;   /* 文字の縁取りを黒に設定 */
position: absolute;
left:0;
right:0;
margin: auto;
bottom: 0;
    vertical-align: middle;
    text-align: left;
}

/*.charaNameArea {*/

/*    !* 画像作成時のみ微調整が必要そう *!*/
/*    padding-bottom: 20px;*/

/*!* animation: fluffyY 2s ease-in-out infinite;  *!*/
/*width: 90%;*/
/*background-color: white;*/
/*font-size: 1.0em;*/
/*}*/

.messageArea {
  /*width: 90%;*/
}