* {  
    box-sizing: border-box;  
}  

body {  
    font-family: 'Arial', sans-serif;  
    margin: 0;  
    padding: 0;  
    line-height: 1.6;  
    width: 960px;
    margin: auto;

}  

header {  

}

table{
    width: 100%;
    border-collapse:separate;
    text-align: left;
    border-spacing: 0;
    width: 100%;
}

table th:first-child{
    border-radius: 5px 0 0 0;
}

table th:last-child{
    border-radius: 0 5px 0 0;
    border-right: 1px solid #3c6690;
}

table th{
    color:white;
    background: linear-gradient(#829ebc,#225588);
    border-left: 1px solid #3c6690;
    border-top: 1px solid #3c6690;
    border-bottom: 1px solid #3c6690;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
    padding: 10px 5px;
}

table td{
    border-left: 1px solid #a8b7c5;
    border-bottom: 1px solid #a8b7c5;
    border-top: 1px solid #a8b7c5;
    box-shadow: 0px -3px 5px 1px #eee inset;
    padding: 10px 5px;
}

table td:last-child{
    border-right: 1px solid #a8b7c5;
}

table tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}

table tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}

section {  
    padding: 20px;  
    margin: 10px 0;  
    border: 1px solid #444; /* セクションの境界線をダークグレーに */  
    border-radius: 5px 5px 5px 5px;
}  


#youtube-introduction{
    color: #030303;
    text-shadow: 0 0 5px rgb(0, 153, 255), 0 0 10px rgb(16, 63, 192), 0 0 20px #47eaff, 0 0 30px #47cbff;

    margin: 0 0 0 0 ;
}

#band-introduction{
    color: #030303;
    text-shadow: 0 0 5px rgb(0, 153, 255), 0 0 10px rgb(16, 63, 192), 0 0 20px #47eaff, 0 0 30px #47cbff;

    margin: 0 0 0 0 ;
}


footer {  
    text-align: center;  
    padding: 10px 0;  
    background-color: white; /* 背景を黒に */  
    color: black;  
    position: relative;  
}  


footer .social-media a:hover {  
    color: #e63946; /* ソーシャルメディアアイコンのホバー時の色 */  
}  

.fade-in {  
    opacity: 0; /* 初期状態は透明 */  
    animation: fadeIn 0.6s forwards; /* フェードインアニメーション */  
}  

@keyframes fadeIn {  
    to {  
        opacity: 1; /* 最終的な不透明度 */  
    }  
}  

.bounce {  
    display: inline-block;  
    animation: bounce 1.5s infinite; /* ボタンのバウンスアニメーション */  
}  

@keyframes bounce {  
    0%, 20%, 50%, 80%, 100% {  
        transform: translateY(0);  
    }  
    40% {  
        transform: translateY(-10px);  
    }  
    60% {  
        transform: translateY(-5px);  
    }  
}  


/* PC用 */
@media(min-width:751px){

    *{
        font-size: 20px;
    }


}

/* スマホ用 */
@media (max-width: 600px) {  

    *{
        font-size: 10px;
    }

    body{
        width: 400px;
        margin: auto;
    }


    span.responsive-return:before{
        white-space: pre-wrap;
        content: "\A";
    }
    h2{
        margin: 0;
    }
    header{
        display: none;
    }

    #career-table{
        width: 330px;
        table-layout: auto;
        display: block;
    }

    #yearsOfExperience{
        width: 80px;

    }

    #projectInfo{
        width: 200px;
    }

    #technology{
        width: 70px;
    }

    #myImage{
        max-width: 100px;
    }



}