@charset "UTF-8";


html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #000;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 300;
}




h1.title{
  color: #ddd;
  text-align: center;
  font-size: 5.0rem;
  margin: 100px auto;
}

.songs{
  color: #ddd;
}

.songsbg{
  background: rgb(70, 0, 0);
}

ul.songs{
  width: 900px;
  padding: 100px 0;
  margin: 0 auto;
}

ul.songs li{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: 0 auto 150px;
}

ul.songs li .songtitle{
  margin: 0 0px 0 20px;
}
ul.songs li .songtitle h2{
  font-size: 2.4rem;
  font-weight: bold;
}

ul.songs li .youtube{
  max-width: 100%;
  width: 560px;
}





/******************************
　　　　　　　　　SP
*******************************/

@media (max-width : 767px) {

  h1.title{
    color: #ddd;
    text-align: center;
    font-size: 4.0rem;
    margin: 50px auto;
  }

  

  ul.songs{
    width: auto;
    padding:5% 0;
    margin: 0 auto;
  }

  
    ul.songs li{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 0 auto 5%;
      border-bottom: 1px solid rgb(97, 56, 56);
      /* background: rgb(82, 82, 82); */
    }

    ul.songs li .songtitle{
      margin: 0 0 4% 0;
      
    }

    ul.songs li .youtube{
      max-width: 100%;
      width: auto;
      margin: 20px auto;
    }
    
    ul.songs li .youtube{
      width: 100%;
      aspect-ratio: 16 / 9;
  
    }
    ul.songs li .youtube iframe {
      width: 100%;
      height: 100%;
      padding: 0 5%;
     
    }
    
    
    }