@charset "UTF-8";

body{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 300;
    font-size: 18px;
}

.header{
    background-color: black;
    height: 60px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 900;
}
.header__title-area{
    width:-moz-fit-content; /* Firefox */
    width:fit-content; /* other browsers */
    margin-left: 30px;
    display: flex;
    cursor: pointer;
}
.header img{
    height: 60px;
}
.header h1{
    color: white;
    margin: auto 0;
    font-size: 30px;
    margin-left: 10px;
}
@media screen and (max-width: 650px) {
    .header__title-area{
        margin-left: 10px;
    }
}

main{
    padding-top: 60px;
}

/* フッター */
.footer{
    margin-top: 80px;
    width: 100%;
    height: 30px;
    background-color: black;
    display: flex;
}
.footer__copy{
    margin: auto;
    color: white;
}
.footer__copy small{
    font-size: 12px;
}

/* アニメ */
.op{
    animation: op .3s infinite linear normal;
}
@keyframes op{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.3;
    }
    100%{
        opacity: 1;
    }
}
.turn{
    animation: turn 1s infinite linear normal;
}
@keyframes turn{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(1turn);
    }
}