@charset "UIF-8";
/*-------------
css Document
共通部分
-------------*/
body{
    color: #000;
    font-family: 'Courier New', Courier, monospace;
}

.page {
    width: 600px;
    margin: 0 auto;
    padding-top: 60px;     
}


.font-small td{
    font-size: 0.5rem;
}
 
.delete-list{
    width: 320px;
    margin: 0 auto;
}
.delete-list img{
    width: 320px;
}

/*-------------
 header
--------------*/
.title{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#header{
    width: 100%;
    height: 100px;
    background-color: rgb(244, 247, 90);
    
}
.top{
    width: 900px;
    height: 100px;
    margin: 0 auto;
    padding-top: 20px;
    
}

/*------------
 main
------------*/

.main{
    width: 900px;
    margin: 0 auto;
}
.image-wrapper{
    margin-bottom: 30px;
}

.main-wrapper{
    display: flex;
    
    

}
.notice{
    width: 50%;
    padding: 10px 10px;

}
.notice-content{
    background-color: rgb(190, 211, 252);
    border-bottom: rgba(251, 253, 253, 0.938) 10px solid;
}
.notice-post-at{
    font-size: 0.5rem;
}
.notice-title {
    font-size: 1.3rem; 
    border-bottom: rgba(251, 253, 253, 0.938) 10px solid;   
}

.notice-wrapper{
    width: 100%;
}

.font-small{
    font-size: 0.5rem;
}
.login-form{
    width: 100%;
    
}  
.login{
    padding: 50px 0 20px 0;
    text-align: center;
}
.login p{
    text-align: center;
}
.signup{
    padding-bottom: 50px;
    text-align: center;
}
  
.login h5{
    margin: 0 auto;
    width: 200px;
    
} 
.signup h5{
    margin: 0 auto;
    width: 220px;
}
.school-song{
    width: 230px;
    margin: 0 auto;
}   

    


/*------------
footer
-------------*/
#footer{
    width: 100%;
    height: 100px;
    background-color: rgb(244, 247, 90);
}
.footer-wrapper{
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 50px 10px 10px 10px;
}
/*-------------
    ログイン
-------------*/
.register label{
    width: 150px;

}
    
.signup-comment{
    color: rgb(255, 2, 2);
}
.err{
    color: rgb(255, 2, 2); 
}

/*-------------
 お知らせページ
--------------*/
.home{
    width: 100%;
    height: 60px;
    background-color: rgb(244, 247, 90);
    position: fixed;
}

.home-wrapper{
    display: flex;
    width: 600px;
    margin: 0 auto;
    justify-content: space-between;
    padding: 10px;
}

.logo{
    width: 70px;
}


.home-wrapper h5{
    padding-top: 10px;
}

.list{
    background-color: rgb(217, 228, 247);
    width: 100%;

}
.line{
    border-bottom:10px white solid ;
}

.line td{
    padding:  5px;
}
.button2{
    width: 50px;
    height: 35px;
    padding: 1px;
    text-align: center;
    border-radius: 5px;
    background-color: rgb(190, 211, 252); 

}
.button2:hover{
    background-color: rgb(38, 38, 227);
    text-decoration: none;
    color:white;

}
.button3{
    width: 100px;
    height: 25px;
    padding: 1px;
    text-align: center;
    border-radius: 5px;
    background-color: rgb(190, 211, 252);
    display: inline-block;
    vertical-align: middle; 

}
.button3:hover{
    background-color: rgb(38, 38, 227);
    text-decoration: none;
    color:white;

}

.button4{
    width: 150px;
    height: 25px;
    padding: 1px;
    text-align: center;
    border-radius: 5px;
    background-color: rgb(190, 211, 252);
    display: inline-block;
    vertical-align: middle; 

}
.button4:hover{
    background-color: rgb(38, 38, 227);
    text-decoration: none;
    color:white;

}

.button5{
    width: 50px;
    height: 25px;
    padding: 1px;
    text-align: center;
    border-radius: 5px;
    background-color: rgb(190, 211, 252);
    display: inline-block;
    vertical-align: middle; 

}
.button5:hover{
    background-color: rgb(38, 38, 227);
    text-decoration: none;
    color:white;

}

.return-mypage{
    display: flex;
    
}
.wrapper{
    display: flex;
}
.stand-out{
    background-color:rgb(244, 247, 90) ;
    width: 130px;
}
.stand-out2{
    background-color:rgb(244, 247, 90) ;
    width: 230px;  
}


.space {
    font-size: 0.7rem;
    display: block;
    width: 85px;
}
.at-comment{
    display: block;
    width: 320PX;
    overflow: scroll;

}
.at-comment2{
    display: block;
    width: 270PX;
    overflow: scroll;

}
.at-header{
    display: flex;
    justify-content: space-between;
    width: 320px;
}
.notice-cont{
    width: 320px;
}
/*------------
    編集ページ
-------------*/
.page-header{
    width: 100%;
    height: 60px;
    background-color: rgb(244, 247, 90);
    position: fixed;
    
}


.header-wrapper{
    padding-top: 20px;
    width: 600px;
    margin: 0 auto;
    display: flex; 
    justify-content: space-between;  

}
.logo-small{
    
    width: 30px;
}
.wrapper-btn{
    background-color: rgb(217, 228, 247);
    display: flex;
    padding: 10px 0;
    width: 320px;
}
.notice-btn{
    background-color: rgb(217, 228, 247);
    padding: 10px 10px 5px 10px;
    margin-bottom: 10px;
    width: 320px;
}

/*------------
    つぶやき
-------------*/

.page-tweet{
    background-color: rgb(217, 228, 247);
    width: 600px;
}    
    
.tweet-user {    
    font-size: 0.5rem;
    
}
.tweet{
    border-bottom:10px rgb(255, 254, 249) solid ;
}
.tweet-end{
    margin-bottom: 30px;
}
/*-----------
    photo
-----------*/
.album-header{
    width: 100%;
    height: 60px;
    background-color: rgb(244, 247, 90);
    position: fixed;
}
.album-wrapper{
    
    padding-top: 20px;
    width: 600px;
    margin: 0 auto;
    display: flex;
    
    justify-content: space-between;
    
}
.album-page{
    width: 600px;
    margin: 0 auto;

}
.album-page img {
    width: 600px;
    
}

.button{
    
    width: 110px;
    height: 35px;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(204, 222, 247); 
          
}


.button:hover{
    background-color: rgb(38, 38, 227);
    text-decoration: none;
    color:white;
}
.delete-photo {
    margin-bottom: 10px;
}
    


.delete-btn{
    width: 150px;
    height: 35px;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(204, 222, 247); 
    position: fixed;
    bottom: 50px;
    right: 30%;
}
.pt-btn{
    width: 150px;
    height: 35px;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(204, 222, 247); 
    position: fixed;
    bottom: 10px;
    right: 30%;
}
.delete-btn:hover{
    background-color: rgb(38, 38, 227);
    text-decoration: none;
    color:white;   
}
.pt-btn:hover{
    background-color: rgb(38, 38, 227);
    text-decoration: none;
    color:white;   
}




.delete-comment{
    height: 100px;
    padding-top: 70px;
}
.album-return {
    padding: 20px 0 0 150px;
    width: 320px;
    margin: 0 auto;
    
    
}
.new-line{
    white-space: pre-wrap;
}
/*-------------
photo コメント
--------------*/
.comment textarea{
    border: 1px solid #000;
    width: 100%;
}
.c-button{
    margin-top: 10px;
    width: 70px;
    height: 35px;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(190, 211, 252); 
    
}.c-button:hover{
    background-color: rgb(38, 38, 227);
    color:white;   
}

.small-name{
    font-size: 0.5rem;
}
.small-date{
    font-size: 0.5rem;
    text-align: end;
}

.comment-list{
    background-color: rgb(217, 228, 247);
    width: 100%;
}
.comment-bottom{
    border-bottom:10px rgb(255, 254, 249) solid;
    width: 320px;
}
.comment-delete {
    text-align: end;
}
    

/*---------

モバイル版
-----------*/

@media(max-width:900px){
    #header{
        height:50px;
    }

    .top{
        width: 320px;
        padding-top: 5px;
        
    
    }
    .logo{
        width: 40px;
        vertical-align: auto;
    }
    .title{
        font-size: 15px;
        text-align: center;
    }
   
    .page{
        width: 320px;
        margin: 0 auto;
    }

    .main{
        width: 320px;
        margin: 0 auto;
    }
    .image-wrapper img{
        width: 320px;
    }
    .main-wrapper{
        flex-direction: column;
        
    }
    .notice{
        width: 320px;
    }
    .login-form{
        width: 320px;
            
        }
    .notice h2{
        font-size: 1.5rem;
    }
    
    
    .notice-title{
        font-size: 1rem;
    }

    .login p{
        font-size: 0.8rem;
    }
    .signup p{
        font-size: 0.8rem;
    }

        

    .signup h5{
    
        margin-bottom: 30px;
    }
    #footer{
        height: 50px;
    }
    .footer-wrapper{
        width: 320px;
        padding: 20px 0 0 0;
    }
    .footer-wrapper P{
        font-size: 0.5rem;
    }
    /*------------
        マイページ
    ------------*/
    .home-wrapper{
        width: 320px;
    }
    /*------------
        編集ページ
    ------------*/
    .header-wrapper{
        width: 320px;
    }
    .line2 {
        width: 50px;
    }
    
    /*-----------
        つぶやき
    ------------*/
    .page-tweet{
        width: 320px;
    }
    .tweet-fw{
        width: 320px;

    }
    /*----------
        photo
    -----------*/
    .album-wrapper {
        width: 320px;

    }
    .album-wrapper h3{
        font-size: 15px;
    }
    .album-wrapper p{
        font-size: 15px;
    }
    .album-wrapper a{
        font-size: 15px;
    }
    .album-page{
        width: 320px;
    
    }
    .album-page img {
        width: 320px;
        
    }

    .delete-btn{
        width: 150px;
        height: 35px;
        padding: 5px;
        text-align: center;
        border-radius: 10px;
        background-color: rgb(204, 222, 247); 
        position: fixed;
        bottom: 50px;
        right: 10%;
    }
    .pt-btn{
        width: 150px;
        height: 35px;
        padding: 5px;
        text-align: center;
        border-radius: 10px;
        background-color: rgb(204, 222, 247); 
        position: fixed;
        bottom: 10px;
        right: 10%;
    }

}