@charset "UTF-8";

img {
    cursor: pointer;
    max-width: 100%;
}

/*フォント*/

/*カラー*/
.red {
  color: #fc030f;
}
.orange {
  color: #ffa500;
}
.yellow {
  color: #ffff00;
}
.green {
  color: #008000;
}
.lightblue {
  color: #00ffff;
}
.blue {
  color: #0000ff;
}
.black {
  color: #000000;
}
.white {
  color: #ffffff;
}

.field {
    display: flex;
    justify-content: center;
    gap: 30px 20px;
    /*行間 列間*/
}

.img-right 
{
margin-left: auto; display:block;
}

/*犬のアニメーション*/
.zoomin {
    animation: zoomIn 2.5s ease;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
        transform: translateX(50vw) 
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


.slidein {
    animation: slideIn 5.5s ease forwards;
    animation-delay: 2.5s;
}

@keyframes slideIn {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100vw);
    }
}