@charset "UTF-8";
*{
    margin:0;
    list-style: none;
}
a{
    text-decoration: none;
}
body{
    background-image:url(../../images/i_catch_full.jpg);
    background-size: 100%;
    max-width: 1370px;
    height:400px;
    width:100%;
    background-attachment: fixed;
}
#header{
    position:fixed;
    width:100%;
    top:10px;
    transition:0.7s;
}

/* #header-list{
    /* background:blue; */
    /* }  */
    #header-list ul{
        display:flex;
        justify-content: right;
        margin:0 20px;
    }
    #header-list li{
        padding:0 10px;
        line-height: 50px;
    }
    #header-list p{
        color:white;
        font-weight:lighter;
    }
#header-list li:hover{
    background:rgba(255,255,255,0.3);
}


.header-contents{
    text-align: center;
}
.header-contents img{
    width:200px;
    border-radius: 50%;
}

.white{
    color:green;
}
main{
    width:100%;
    background:white;
    position:absolute;
    top:580px;
}




#open{
    animation-name:fadeUpAnime;
    /* display:inline-block; */
    animation-duration: 1s;
    transition: 0.7s;
    font-size: 30px;
    font-weight:bold;
    margin:10px;
    top:0px;
    left:0;
    z-index: 0;
    /* animation:bgchange 2s ease 0s infinite normal; */
}
#open ::after{
    background:white;
}

@keyframes fadeUpAnime{
    from{
        opacity:0;
        transform:translateY(100px);
        /* transform:scale(0.1); */
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

#text{
    font-size: 30px;
    font-weight:bold;
}
#text1{
    font-size: 30px;
    font-weight:bold;
}
.hello{
    font-size:30px;
    font-weight:bold;
}
#text05{
    position:relative;
}

#block05::before{
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:0;
    border-style:solid;
    border-width:40px 0 0 100%;
    border-color:transparent transparent transparent #bbb;
}


@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
    #header-list{
        display:none;
    }
}