@charset "utf-8";

body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}


#social {
 margin-top: .5em;
 margin-right: .5em;
 text-align: right;
}
.pless a {
 float: right;
 padding: 5px 12px;
 border-radius: 3px;
 display:block;
 background:#cd4c18;
 color: #fff;
 font-size: 0.8em;
 margin-left: 5px;
 font-weight: bold;
 text-decoration: none;
}
.pless a:hover {
 background: #e2784d;
}
button {
 background-color: transparent;
 border: none;
 cursor: pointer;
 outline: none;
 padding: 0;
 appearance: none;
}
 
#Audio-Control {
 overflow: hidden;
 float:right;
 margin-left: 5px;
 border-radius: 3px;
}
 
#Audio-Control button {
 border: 1px solid #cd4c18;
 width: 60px;
 float: left;
 padding: 3px 0;
 font-size: 10px;
 color: #cd4c18;
 -webkit-transition: all 0.6s ease;
 -moz-transition: all 0.6s ease;
 -o-transition: all 0.6s ease;
 transition: all 0.6s ease;
 background: rgba(255, 255, 255, 0.6);
}

 
#Audio-Control button.on {
 border-left: none;
}
 
#Audio-Control button.off {
 border-right: none;
}
 
#Audio-Control button.active {
 background: #cd4c18;
 color: #fff;
}
 
#Audio-Control button:not(.active):hover {
    background: rgba(205, 76, 24, 0.3);
}







@media screen and (min-width:480px) { 
#contents {
 margin-top: 200px;
}
#title {
 width: 80%;
 margin-left: auto;
 margin-right: auto;
}
#comming {
 width: 40%;
 margin-left: auto;
 margin-right: auto;
}

.hoge {
color:#ffffff;
}
#contents {
 margin-top: 280px;
}

}


@media screen and (min-width:768px) and ( max-width:1024px) {
#title {
 width: 70%;
 margin-top: -10px;
}
#comming {
 width: 50%;
}
#contents {
 margin-top: 220px;
}
}


@media screen and (min-width:1024px) {
#title {
 width: 50%;
 margin-top: -20px;
}
#comming {
 width: 30%;
}
#contents {
 margin-top: 210px;
}
}