.header{
    border:solid 5px;
    padding:5px;
    /*background-color:#FF9933;*/
    background: radial-gradient(circle farthest-side, #FFCC99, #FF9966, #FF9900);
}

header{
    text-align: center;
    background-color:black; /* 灰色の背景 */
}

header a{
    text-decoration: none;
    color:white;
    font-weight: bold;

}

body {
        background-image:url('/img/openmic202411/block_wall.jpg');
        background-size: cover;
        background-repeat: repeat;
        /*height: 500vh;*/
        width:100vw;
        overflow-x: hidden;
        
    }





.other a{
    text-decoration-line:none; 
    color:black;

}





@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用（PC版）*/



/*スマホ用とPC用でデザインを変更する必要があります。*/

.subtitle{
    width:90vw;
    text-align: center;
    color:black;
    font-weight: bold;
    border-radius: 20px; /* 角を丸くする */
    background-color: #ccc; /* 灰色の背景 */
    margin-left:5vw;
}

.review{
    width:90vw;
    color:black;
    font-weight: bold;
    border-radius: 20px; /* 角を丸くする */
    background-color: #ccc; /* 灰色の背景 */
    margin-left:5vw;
    padding-bottom:3vw;
    padding-left: 2vw;

}

.review h3{
    text-align: center;
    
}

#outside{
    display:none;
}



#artist_photo{
    width:30vw;
    height:auto;
    border-radius: 50%;
}


    
.selfproduce{
    width:90vw;
    display: flex;
    align-items: center;
    margin-top:5vw;
    margin-left:5vw;
    overflow:auto;
    font-weight: bold;
    border-radius: 20px; /* 角を丸くする */
    background-color: #ccc; /* 灰色の背景 */


}

.artist_image{
   width: 40%; 
}

.artist_info{
    width: 50vw; 
    color:black;
    line-height: 1.0;
    font-weight: bold;
    
 }

 .link_btn{
    color:white;
    font-weight: bold;
    border-radius: 10px; /* 角を丸くする */
    background-color:black; 
    width:10vw;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
}

.link_btn a{
    text-decoration: none;
    color:white;
    font-weight: bold;
}
 

.other_contents{
    margin-top:5vh;
    margin-left:5vw;
    width:100vw;
    color:white;

}

.other_contents .other_group{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 90vw;
}
.other_contents .other_group .other{
    height: 30vh;
    width: auto;
    margin-right:1vw;
    flex: 1 1 auto;
    max-width: 100%;
    font-weight: bold;
    color:black;

}


.other_contents  .other a img{
    height:30vh;
  
}

.other_contents .other_group .other h3{
color:black;
font-weight: bold;
border-radius: 20px; /* 角を丸くする */
background-color: #ccc; /* 灰色の背景 */
text-align: center;
}


/*

.footer{
    background-color: black;
    padding-right:10px;
    height:60px;
    text-align: right;
    padding-top:15px;
    
   
}

.footer a{
    background-color: black;
    padding-right:10px;
    height:60px;
    margin-right:700px;
    padding-top:15px;
    color:white;
    text-decoration-line:none; 
    font-size:30px;
}

.footer #btn{
    height:30px;
    width:150px;
    margin-top:10px;
    background-color:white;
    border-radius: 20px;
}
*/





}

/*レスポンシブデザイン（スマホ対応）は以下に記載します。 */
@media only screen and (max-width : 767px){

    .subtitle{
        color:black;
        width:90vw;
        border-radius: 20px; /* 角を丸くする */
        background-color: #ccc; /* 灰色の背景 */
        text-align: center;
    }
    

    .review{
        width:90vw;
        color:black;
        font-weight: bold;
        border-radius: 20px; /* 角を丸くする */
        background-color: #ccc; /* 灰色の背景 */
        padding-bottom:3vw;
        padding-left:2vw;
    
    }

    .review h3{
        text-align: center;

    }

    #bar{
        display:none;
    }
        

    #outside{
        width:80vw;
        height: auto;
        text-align: center;
    }
    
    
    
    #artist_photo{
        
        width:40vw;
        height:auto;
        border-radius: 50%;
    }
        
    .selfproduce{
        width:90vw;   
        margin-top:5vw;
        align-items: center;
        margin-top:5vw;
        overflow:auto;
        font-weight: bold;
        border-radius: 20px; /* 角を丸くする */
        background-color: #ccc; /* 灰色の背景 */
        padding-left:2vw;
    }
    
    .artist_image{
       width: 80vw; 
       text-align: center;
    }
    
    .artist_info{
        width: 80vw; 
        color:black;
        line-height: 1.0;
        font-weight: bold;
        
     }

     .link_btn{
        border-radius: 10px; /* 角を丸くする */
        background-color:black; 
        width:80vw;
        padding-top:10px;
        padding-bottom:10px;
        text-align:center;
    }
    
    .link_btn a{
        text-decoration: none;
        color:white;
        font-weight: bold;
    }

     .artist_info h3{
        text-align: center;
     }
    
     
    
    .other_contents {
        width: 90%;
        color:white;
        
    }
    .other_contents .other_group .other{
        height: 30vh;
        width: auto;
        max-width: 80%;
        color:black;
    
    }

    .other_contents .other_group .other h3{
        color:black;
        font-weight: bold;
        border-radius: 20px; /* 角を丸くする */
        background-color: #ccc; /* 灰色の背景 */
        text-align: center;
    }

    
    
    .other_contents  .other a img{
        height:20vh;
      
    }
    
    
    /*
    
    .footer{
        background-color: black;
        padding-right:10px;
        height:60px;
        text-align: right;
        padding-top:15px;
        
       
    }
    
    .footer a{
        background-color: black;
        padding-right:10px;
        height:60px;
        margin-right:700px;
        padding-top:15px;
        color:white;
        text-decoration-line:none; 
        font-size:30px;
    }
    
    .footer #btn{
        height:30px;
        width:150px;
        margin-top:10px;
        background-color:white;
        border-radius: 20px;
    }
    */

}