@charset "UTF-8";

.title-wrapper {
  width: 100%;
}

.title-container {
width: 100%;
background-color: #4ca5ff;
text-align: center;
line-height: 50px;
}

.title-container h1 a {
color: white;
text-decoration: none;
}

.title-container h1 :hover {
  opacity: 0.6;
  transition: 0.3s;
}

.song-list-wrapper {
  width: 100%;
}

.song-list-container {
  width: 90%;
  margin: 0 auto;
  max-width: 480px;
}

.song-list-container > h2 {
  padding: 10px 0px;
  font-size: 20px;
  line-height: 40px;
}

.song-list-container > h2::before {
  display: block;
  vertical-align: middle;
  background-color: #4ca5ff;
  width: 6px;
  border-radius: 3px;
  content: "";
  height: 40px;
  margin-right: 15px;
  float: left;
}

.song-list {
  margin-left: 1.05em;
}

.song-list > h3 {
  font-size: 20px;
  text-decoration: none;
  color: black;
}

.song-wrapper {
  margin-top: 20px;
}

.song {
  display: flex;
  line-height: 30px;
}

.extension {
  display: flex;
  margin-left: auto;
  margin-right: 7%;
  vertical-align: middle;
}

.extension div a {
  padding: 0px 10px;
  font-size: 20px;
  text-decoration: none;
  color: white;
  text-align: center;
}

.mp3 {
  background-color: blue;
  border-radius: 5px;
}

.wav {
  margin-left: 20px;
  background-color: red;
  border-radius: 5px;
}

.extension div :hover {
  opacity: 0.6;
  transition: 0.3s;
}

footer {
  width: 100%;
}

.footer-container {
  width: 90%;
  margin: 0 auto;
  max-width: 480px;
}

.footer-logo-sns {
  width: 70%;
  margin: 0 auto;
  max-width: 480px;
  padding: 30px 0px;
}

.icon-sns {
  /* margin: 30px 0px 15px 0px; */
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.icon-sns :hover {
  opacity: 0.8;
  transition: 0.3s;
}

.icon-sns i {
  font-weight: normal;
}

/*  インスタグラムのアイコンのデザイン*/

.insta-btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta-btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/
}

.insta-btn .insta::before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta-btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 40px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}

.copyright {
  padding-bottom:20px;
  text-align: center;
}