@charset "UTF-8";
/*----------------------------------------------------
	BODY
----------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
  margin: 0;
  padding: 0;
}

html,div {
  margin: 0;
  padding: 0;
  font-family:"Jura", "游ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", YuGothic, sans-serif;
  color: #333333;
}

/* スクロールバーの有無によるズレ対策 */
html {
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 16px;
  background: #222222 url() no-repeat top left;
}

/* for IE6 */
* html body{
  font-size: 75%;
}

/* for IE7 */
*:first-child+html body{
  font-size: 75%;
}

h1,h2,h3,h4,h5,h6,p,dt,dd {
   margin: 0;
   padding: 0;
   line-height: 1.8em;
   font-size: 12px;
   font-weight: normal;
}

ul,ol,li {
   margin: 0;
   padding: 0;
   list-style: none;
}

img {
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

a img {
  border:none;
}

a:link, a:visited {
  color: #333333;
  text-decoration: none;
  outline : 0;
  transition: 0.3s;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

em,i {
  font-style: normal;
}



/*============================
#INDEX
============================*/
div#WRAPP {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  position: relative;
}

#INDEX {
  width: auto;
}

#INDEX div.inner {
  max-width: 375px;
  width: calc(100% - 60px);
  margin: 0 auto;
}

#INDEX div.inner div.artwork_block {
  width: auto;
  margin-top: 40px;
}

#INDEX div.inner div.artwork_block iframe {
  width: 100%;
  margin-top: 20px;
}

#INDEX div.inner div.artwork_block figure.artwork {
  width: 100%;
}

#INDEX div.inner div.artwork_block figure.artwork.line {
  width: calc(100% - 10px) !important;
  border: 5px solid #fff;
  margin: 0 auto;
}


#INDEX div.inner div.artwork_block figure img {
  width:100%;
}

#INDEX div.inner div.artwork_block div.artist_block {
  width: auto;
  padding: 30px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#INDEX div.inner div.artwork_block div.artist_block figure.artist {
  width: 82px;
}

#INDEX div.inner div.artwork_block div.artist_block figure img {
  width: 100%;
}

#INDEX div.inner div.artwork_block div.artist_block div.music_name_box {
  width: calc(100% - 95px);
  margin: 0 0 0 16px;
}

#INDEX div.inner div.artwork_block div.artist_block div.music_name_box p.listen {
  width: auto;
  color: #FF7C7C;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.1em;
}

@keyframes colorChange {
  0% {
    color: #FF7C7C;
  }
  50% {
    color: #ffbebe;
  }
  100% {
    color: #FF7C7C;
  }
}

#INDEX div.inner div.artwork_block div.artist_block div.music_name_box p.listen {
  font-weight: bold;
  animation: colorChange 2s infinite ease-in-out;
}

#INDEX div.inner div.artwork_block div.artist_block div.music_name_box h1 {
  width: auto;
  color: #fff;
  font-weight: normal;
  font-size: 16px;
  letter-spacing: 0.06em;
}

/*********** artwork_block トップページ *************/


/* #INDEX div.inner div.artwork_block.top {
} */

#INDEX div.inner div.artwork_block.top {
  margin-top: 32px;
  position: relative;
}

/* #INDEX div.inner div.artwork_block.top::after {
  content: "";
  display: block;
  width: 560px;
  height: 45px;
  border-radius: 30px;
  background-color: #141414;
  position: fixed;
  top: 0px;
  left: -50px;
  rotate: 315deg;
  z-index: -1;
}

#INDEX div.inner div.artwork_block.top::before {
  content: "";
  display: block;
  width: 560px;
  height: 40px;
  border-radius: 30px;
  background-color: #141414;
  position: fixed;
  top: -120px;
  left: 230px;
  rotate: 315deg;
  z-index: -1;
} */


#INDEX div.inner div.artwork_block.top div.artist_block {
  display: block;
}

#INDEX div.inner div.artwork_block.top div.artist_block figure.artist {
  width: 200px;
  margin: 0 auto;
}

/* #INDEX div.inner div.artwork_block.top div.artist_block figure img {
} */

#INDEX div.inner div.artwork_block.top div.artist_block div.music_name_box {
  width: 100%;
  text-align: center;
  margin: 24px 0 0 0;
}

#INDEX div.inner div.artwork_block.top div.artist_block div.music_name_box h1 {
  width: auto;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

#INDEX div.inner div.artwork_block.top div.artist_block div.music_name_box p.intro {
  width: 100%;
  color: #d6d6d6;
  text-align: left;
  margin-top: 12px;
  line-height: 2em;
  font-size: 12px;
}

/*********** platform_block *************/

#INDEX div.inner div.platform_block {
  width: auto;
  margin-top: 10px;
  padding: 0px 0 60px 0
}
#INDEX div.inner div.platform_block ul {
  width: auto;
}
#INDEX div.inner div.platform_block ul li {
  width: auto;
  margin: 0 auto;
}

#INDEX div.inner div.platform_block ul li + li {
  border-top: 1px solid #515151 ;
}


#INDEX div.inner div.platform_block ul li a {
  width: calc(100% - 10px);
  margin: 0 auto;
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#INDEX div.inner div.platform_block ul li a p.logo {
  width: auto;
}
#INDEX div.inner div.platform_block ul li a p.logo img {
  width: auto;
}
#INDEX div.inner div.platform_block ul li a p.btn {
  width: 117px;
  padding: 10px 0;
  border-radius: 30px;
  text-align: center;
  font-size: 10px;
  color: #EAEAEA;
  letter-spacing: 0.12em;
  background-color: #313131;
  border: 1px solid #7F7F7F;
}

#INDEX div.inner div.platform_block ul li a div.btn_double_wrapp {
  width: 117px;
}

#INDEX div.inner div.platform_block ul li a div.btn_double_wrapp p.btn + p.btn {
  margin-top: 15px;
}

 footer p {
  padding: 0 0 20px 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #7F7F7F;
  text-align: center;
 }

/*----------------------------------------------------
	COMMON
----------------------------------------------------*/
@media (min-width:769px){
.visible_pc {display: block;}
.visible_sp {display: none;}

.display_pc {display: inline;}
.display_sp {display: none;}
}


@media (max-width:768px){
  .visible_sp {display: block;}
  .visible_pc {display: none;}
  .hidden_sp {display: none;}

  .display_pc {display: none;}
  .display_sp {display: inline;}
}

.disnon {display: none;}
.disblo {display: block;}