/* Common */
/* ----- PC ----- */
#contents {
 margin: 0 auto;
 float: none;
}
article {
 background: #fff100;
 letter-spacing: 2px;
 padding-bottom: 5%;
}
article h2 {
 text-align: center;
 font-size: 1.6rem;
 background: #01b4ed;
 padding: 8px;
 color: #fff;
 border-bottom: none !important;
 font-weight: bold !important;
}
article > div {
 background: rgba(255, 255, 255, 0.7);
 margin: 5% 5% 0;
}
article > div h3 {
 text-align: center;
 padding: 5px;
 font-size: 1.3rem;
 background: #01b4ed;
 color: #fff;
}
.dl_area {
 padding-bottom: 4%;
}
.dl_area > div {
 padding: 4% 4% 0;
}
.dl_area > div h4 {
 border-bottom: 1px solid #01b4ed;
 margin-bottom: 5px;
 padding-bottom: 4px;
 font-size: 0.9rem;
}
.dl_area > div p {
 margin: 2% 2% 0;
 text-align: center;
}
.dl_area a, .dl_area a:hover, .dl_area a:visited, .dl_area a:active {
 color: #01b4ed;
}
.dl_area a:hover, .dl_area a:visited {
 opacity: 0.8;
}
.dl_area .dl_txt {
 margin-bottom: 10%;
}
.dl_area .dl_txt a {
 font-size: 1.3em;
}
.dl_area .dl_btn a {
 width: 50%;
 background: #01b4ed;
 border-radius: 10px;
 display: block;
 text-align: center;
 font-weight: bold;
 font-size: 1.1em;
 padding: 10px;
 color: #fff;
 margin: 0 auto;
}
.dl_area .dl_btn a:hover {
 text-decoration: none;
 color: #3f51b5;
 opacity: 0.8;
}
.movie_area_wrap section {
 background: #fff;
 border-radius: 10px;
 padding: 20px;
}
.movie_area_wrap section ul{
 margin: 5% 0;
}
.movie_area_wrap section ul p{
 font-size: 1.3em;
 font-weight: bold;
 margin-bottom: 2%;
}
.movie_area_wrap section ul li {
 position: relative;
 padding: 5px 0 5px 200px;
 font-size: 1.3em;
 z-index: 0;
 margin-bottom: 20px;
 border-radius: 5px;
 overflow: hidden;
 border: 3px solid #01b4ed;
 background-image: linear-gradient(90deg, #fff 0 10%, #01b4ed 10%);
 -webkit-background-clip: text;
 color: transparent;
}
.movie_area_wrap section ul li:before {
 position: absolute;
 top: 0;
 left: 0;
 width: 200%;
 height: 100%;
 background: linear-gradient(90deg, #01b4ed 10%, #fff 0 10%);
 content: '';
 z-index: -1;
}
.movie_area_wrap section ul li span {
 position: absolute;
 color: #fff;
 font-weight: bold;
 top: 1;
 left: 0;
 z-index: 1;
}
.movie_area_wrap section ul li a {
 color: #000000;
 display: block;
}
.movie_area_wrap section ul li a:hover, .movie_area_wrap section ul li a span:hover {
 color: #3f51b5;
}
.movie_area_wrap section .btn_playlist a {
 padding: 1rem 2rem;
 color: #fff;
 background: #01b4ed;
 border-radius: 10px;
 display: block;
 margin: 0 auto;
 width: 30%;
 font-weight: bold;
 text-align: center;
 font-size: 1.3em;
}
.movie_area_wrap section .btn_playlist a:hover {
 text-decoration: none;
 color: #3f51b5;
 opacity: 0.8;
}
/*.wide .movie_area {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 &:after {
  content: "";
  display: block;
  width: 300px;
  height: 0;
 }
}
.wide .movie_area iframe {
 margin: 5px 5px 2%;
}
.wide .movie_area p {
 text-align: center;
 font-weight: bold;
 font-size: 1rem;
 width: 270px;
 margin: 0 auto 10%;
 padding: 0.3em;
 background: #fff;
}*/
/* ---------- SP ---------- */
.sp .movie_area_wrap section ul{
 margin-bottom: 10%;
}
.sp .movie_area_wrap section ul p{
 font-size: 1.2em;
 margin-bottom: 2%;
}
.sp .movie_area_wrap section ul li {
 padding: 0;
 background-image: linear-gradient(1deg, #fff 0 10%, #01b4ed 10%);
 font-size: 1.1em;
}
.sp .movie_area_wrap section ul li:before {
 position: relative;
 width: 100%;
}
.sp .movie_area_wrap section ul li span {
 position: relative;
 top: 0;
 display: block;
 text-align: center;
 background: #01b4ed;
}
.sp .movie_area_wrap section ul li a{
 padding: 2%;
}
.sp .movie_area_wrap section .btn_playlist a {
 padding: 1rem;
 width: 90%;
 font-size: 1.2em;
}
/*.sp .movie_area {
 margin-top: 5%;
 padding-bottom: 1%;
}
.sp .movie_area_wrap iframe {
 width: 280px;
 margin: 0 auto;
 display: block;
}
.sp .movie_area_wrap {
 margin-bottom: 50px;
}
.sp .movie_area_wrap p {
 text-align: center;
 font-weight: bold;
 margin: 3% auto 15%;
 padding: 0.3em 0;
 background: #fff;
 width: 280px;
}
.sp .movie_area_wrap .movie_btn a {
 display: block;
 padding: 1em 0;
 margin: 0 auto;
 text-decoration: none;
 background: #8bc34a;
 color: #fff;
 border-radius: 4px;
 -moz-box-shadow: 2px 2px #009688;
 -webkit-box-shadow: 2px 2px #009688;
 -ms-box-shadow: 2px 2px #009688;
 line-height: 30px;
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
 width: 90%;
}*/
/* ---------- ToTop ---------- */
#page-top {
 display: block;
 position: fixed;
 bottom: 10px;
 right: 10px;
 width: 40px;
 padding: 10px;
 background: rgba(0, 0, 0, 0.7);
 color: #fff;
 text-align: center;
 text-decoration: none;
 border-radius: 50%;
}
#page-top:hover {
 opacity: 0.7;
}
.sp #page-top {
 width: 25px;
 padding: 5px 8px;
 border-radius: 50%;
 font-size: 10px;
}