body{
    margin:0;
    top:0;
}

main{
    margin: 0 auto;
    display: table;
}

section{
    position:relative;
    margin-bottom:40px;
}

p{  
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-size:18px;
    transform:rotateZ(0.03deg);
    text-align: center;
    width:680px;
    margin:0 auto;
}

img{
    pointer-events:none;
}

.top{
    position:fixed;
    background-color: rgba(100, 148, 237, 0.75);
    width:100%;
    top:0;
    z-index: 999;
}

.topimg{
    position:relative;
    left:10%;
    height: 50px;
    padding-top: 7px;  
}

nav{
    position:absolute;
    top:28%;
    right:10%;
    display: inline-block;
}

#topinfoul{
    padding:0;
    margin:0;
    display:flex;
}

.topinfoli{
    position:relative;
    display:inline-block;
    padding-left:20px;
    padding-right:20px;
}

.topinfo{
    text-decoration: none;
    color: rgb(255, 200, 134);
    font-size: 24px;
    font-family: "Nico Moji";
}

.updatedaybox{
    position:absolute;
    top:64px;
    right:0;
    margin-right:10px;
}

.updatedayimg{
    top:6px;
}

#selecttarget{
    position:absolute;
    height:4px;
    transform:translateX(-50%) translateY(-5px);
    background-color: rgb(255, 200, 134);
    border-radius:2px;
}

.mybackground{
    position:fixed;
    width: 100%;
    height:100%;
    z-index:-100;
}

.backanimation{
    position:absolute;
    transform:translateX(-100%);
    left:-20%;
    user-select: none;
}

.setcenter{
    width:100%;
    margin-top:100px;
}

.heading{
    text-decoration: underline;
    color: rgb(255, 200, 134);
    font-size: 42px;
    font-family: "Nico Moji";
    opacity:0;
    position:relative;
    bottom:10px;
}

.introduction{
    display: flex;
    opacity:0;
}

.introicon{
    position:relative;
    height:320px;
    margin-top:26px;
}

#introicon{
    position:relative;
    left:-50%;
}

.illustrated{
    text-align: center;
    font-family:"Nico Moji"
}

#introabout{
    position:relative;
    margin-left: 30px;
    right:-50%;
    /*margin-top:20px;*/
}

.introitem{
    font-size:44px;
    font-family: 'Ubuntu', sans-serif;
    color:rgb(100, 148, 237);    
    margin:16px;
}

.introitem::after{
    background-color: rgba(100,255,100,0.75);
    border-radius: 4px;
    content:"";
    display:block;
    width:400px;
    height:8px;
}

.introinfo{
    position:absolute;
    left:160px;
    font-size: 32px;
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight: 500;
    color:black;
}

#linklogos{
    position:relative;
    display: flex;
    justify-content:space-evenly;
}

.linklogo{
    border-radius: 50%;
    background-color: white;
    position:relative;
    bottom:100px;
    opacity: 0;
}

#details{
    position:relative;
    display: flex;
    justify-content:space-evenly;
}

.detail{
    font-size: 18px;
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight: 400;
    transform:rotateZ(0.03deg);
    text-align: center;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    margin:20px;
    box-shadow: 7px 7px 15px 0 rgba(0,0,0,0.5);
    opacity:0;
    position:relative;
    top:100px;
}

.detailtitle{
    color:midnightblue;
    font-weight: 500;
    padding-top:5px;
    background-color: rgba(190, 225, 255, 0.75);
    border-radius: 20px 20px 0px 0px;
}

.detailtitleimg{
    position:relative;
    top:2px;
    margin-right:10px;
}

.detailul{
    margin-top:10px;
    padding-left:40px;
    padding-right:15px;
    text-align: left;
}

.detailli{
    padding-right:10px;
}

#introsentence{
    opacity: 0;
}

#introsentencedate{
    position:absolute;
    right:0;
    opacity: 0;
}

.works{
    position:absolute;
    background-color: rgba(100,255,100,0.75);
    width:250px;
    height: 250px;
    border-radius: 50%;
    margin:50px;
}

.worktitle{
    color:inherit;
    text-decoration: none;
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-size: 24px;
    font-weight: 500;
    display: block;
    padding-top:50px;
    text-align: center;
}

.workarticle{
    transform:rotateZ(0.03deg);
    font-family:'M PLUS Rounded 1c', sans-serif;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 90%;
}

@media screen and (min-width:880px) {       /*PCのみ*/
    #introicon{
        display:block;
    }
}

@media screen and (max-width:880px) {       /*スマホのみ*/
    .topinfoli{
        padding-left:10px;
        padding-right:10px;
    }

    section{
        display:block;
    }
    
    p{
        width:380px;
    }

    .topimg{
        height:40px;
        left:2px;
    }

    .topinfo{
        font-size:20px;
        padding-top:4px;
    }

    nav{
        right:2px;
    }

    .updatedaybox{
        top:54px;
    }

    .setcenter{
        margin-top:90px;
    }

    .introduction{
        display:block;
    }

    #introicon{
        height:240px;
        left:0;
        top:-20%;
        margin:0 auto;
        display:table;
    }
    
    #introabout{
        margin-left: 0px;
        right:0;
        top:20px;
    }
    
    .introitem{
        font-size:32px;
    }

    .introitem::after{
        width:350px;
    }
    
    .introinfo{
        position:absolute;
        left:160px;
        font-size: 26px;
        font-family:'M PLUS Rounded 1c', sans-serif;
        color:black;
    }

    #details{
        display: block;
    }

    .detailul{
        padding-bottom:10px;
    }
}